/* main-visual */
.main-visual {position: relative;overflow: hidden;}
.main-visual .owl-carousel .owl-item {width: 100%;}
.main-visual .slide-area .slide {width: 100%;height: 520px;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;display: none;}
.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;width: 90%;}
.main-visual .main-typo .logo {width: 90%; margin: 0 auto 30px;}
.main-visual .main-typo p {font-size: 18px;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;}