@charset "UTF-8";

._fnctWrap {line-height:1.5;}

.wrap-visual {position: relative; overflow: hidden; height: 100vh;}
.wrap-visual .slider {position: relative; z-index: 1;}
.wrap-visual .slick-slider,
.wrap-visual .slick-slider .slick-list,
.wrap-visual .slick-slider .slick-track,
.wrap-visual .slick-slide > div,
.wrap-visual .slick-slide li {width: 100%; height: 100%;}
.wrap-visual .slider li {position: relative; display: block !important;}
.wrap-visual .slider li .visual-img {position: relative; width: 100%; height: 100%;}
.wrap-visual .slider li .visual-img::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,0.2);}
.wrap-visual .slider li .visual-img img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* slogan */
.wrap-visual .visual-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; z-index: 10; padding: 0 80px;}
.wrap-visual .visual-text .line {content: ''; display: block; width: 1px; height: 50px; background: #fff; margin: 0 auto;}
.wrap-visual .slogan {text-align: center;}
.wrap-visual .slogan h4 {font-size: 80px; font-family: 'Mont SemiBold', sans-serif; line-height: 1.2; color: #fff; letter-spacing: -2px; margin-bottom: 25px;}
.wrap-visual .slogan p {color: #fff; font-size: 22px; font-family: 'Mont Light', sans-serif; line-height: 1.6; margin-top: 25px;}

/* control */
.wrap-visual .control {position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0); width: 100%; height: auto; z-index: 10;}
.wrap-visual .control {display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.wrap-visual .paging {display: inline-flex; align-items: center; margin: 0 10px; vertical-align: middle;}
.wrap-visual .paging ul {display: inline-block;}
.wrap-visual .paging li {position: relative; float: left; margin: 0 6px;}
.wrap-visual .paging li.slick-active button {border: 1px solid #fefdf2;}
.wrap-visual .paging li button {position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid transparent; box-sizing: border-box; font-size: 0;}
.wrap-visual .paging li button::after {content: ''; display: block; width: 5px; height: 5px; background: #fefdf2; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.wrap-visual .playstop {display: inline-flex; vertical-align: middle; margin-right:14px;}
.wrap-visual .playstop button {display: none; text-indent: -9999px;}
.wrap-visual .playstop button.on {display: inline-block;}
.wrap-visual .play {width: 8px; height: 10px; background: url('../images/slider_play.png') no-repeat center center; background-size: contain;}
.wrap-visual .stop {width: 8px; height: 10px; background: url('../images/slider_stop.png') no-repeat center center; background-size: contain;}
.wrap-visual .prevnext button {display: block; width: 80px; height: 21px; background-size: contain;}
.wrap-visual .prevnext button.prev {background: url('../images/slider_prev.png') no-repeat center center; text-indent: -9999px;}
.wrap-visual .prevnext button.next {background: url('../images/slider_next.png') no-repeat center center; text-indent: -9999px;}
.wrap-visual .visual-count {vertical-align: middle; padding: 0 50px;}
.wrap-visual .visual-count span {font-family: 'Mont SemiBold', sans-serif; font-size: 16px; color: #fff;}
.wrap-visual .visual-count .slash {margin: 0 5px;}

@media all and (max-width: 768px) {
	.wrap-visual .slogan h4 {font-size: 50px;}
}