/* main-visual */
.main-visual {position: relative; overflow: hidden; margin-top: 100px;}
.main-visual .owl-carousel .owl-item {width: 100%;}
.main-visual .slide-area .slide {width: 100%; height: 837px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main-visual .slide-area .slide01 {background-image:url("../img/main1.jpg");}
.main-visual .slide-area .slide02 {background-image:url("../img/main2.jpg");}
.main-visual .slide-area .slide03 {background-image:url("../img/main3.jpg");}
.main-visual .slide-area .owl-item img {display: inline-block; width: auto;}

/*nav*/
.main-visual .owl-nav {position: absolute; left: 0; top: 42%; width: 100%; display: flex; justify-content: space-between; padding: 0 110px; z-index: 3;}
.main-visual .owl-nav button::before {content: ''; display: block; background-repeat: no-repeat; background-position: center; width: 30px; height: 57px;}
.main-visual .owl-nav .owl-prev::before {background-image: url("../img/prev.png");}
.main-visual .owl-nav .owl-next::before {background-image: url("../img/next.png");}

/* dots */
.main-visual .owl-dots {display: flex; position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: none;}
.main-visual .owl-dots button {width: 13px; height: 13px; border-radius: 50%; background: #fff; position: relative;}
.main-visual .owl-dots button + button {margin-left: 25px;}
.main-visual .owl-dots button.active {background: #3daaa4;}
.main-visual .owl-dots button.active::before {opacity: 1;}

/* number */
.main-visual .number-wrap {position: relative; text-align: center;}
.main-visual .number-wrap span {font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 300; color: #fff; letter-spacing: 1.7px;}
.main-visual .number-wrap span::before {content: '0';}
.main-visual .number-wrap .number::after {content: '/'; margin: 0 12px;}

/* main-typo */
.main-visual .main-typo {position: absolute; width: 100%; left: 50%; top: 33%; transform: translateX(-50%); z-index: 1; text-align: center;}
.main-visual .main-typo .logo {margin-bottom: 30px;}
.main-visual .main-typo p {font-size: 36px; font-weight: 500; color: #fff;}

/* m-controller*/
.main-visual .m-controller {position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%);}

/*progress*/
.slide-progress {position: relative; width: 300px; height: 1px; background: rgba(255, 255, 255, .3); margin-top: 25px;}
.slide-progress > div {position: absolute; left: 0; top: 0; width: 0; height: 1px; background: #fff;}