.wrap-visual {position:relative;}
.wrap-visual li{width: 100%; height: 100vh; overflow: hidden;}
.wrap-visual .visual-image{width: 100%; height: 100%; transform: scale(1.1); transition: all 3s;}
.wrap-visual .slick-slide.on .visual-image{transform: scale(1);}
.wrap-visual #video{width: 100%; height: 100%; object-fit: cover;}
.wrap-visual .control{position: absolute; width: 100%; left: 0; bottom: 80px; text-align: center;}
.wrap-visual .visual-number-box{display: inline-block;}
.wrap-visual .visual-number-box .current,
.wrap-visual .visual-number-box .total{color: #fff; font-family: "Play Bold"; font-size: 14px; display: inline-block; vertical-align: middle;}
.wrap-visual .visual-number-box .visual-slider-bar{display: inline-block; vertical-align: middle; width: 98px; height: 2px; background: rgba(255,255,255,.4); margin: 0 10px;}
.wrap-visual .visual-number-box .visual-slider-bar span{width: 0; height: 2px; background-color: #fff;}
.wrap-visual .visual-number-box .visual-slider-bar.on span{display: block; width: 100%; transition: width 5s;}
.wrap-visual .visual-number-box .playstop{display: inline-block; vertical-align: middle; margin-left: 11px;}
.wrap-visual .visual-number-box .playstop button{display: none; width: 15px; height: 14px; font-size: 0;}
.wrap-visual .visual-number-box .playstop button.on{display: block;}
.wrap-visual .visual-number-box .playstop .stop{background: url(../images/visual_stop.png) no-repeat center center;}
.wrap-visual .visual-number-box .playstop .play{background: url(../images/visual_play.png) no-repeat center center;}

@media all and (max-width: 1023px) {
    .wrap-visual li{height: 600px; display: block !important;}
}

@media all and (max-width: 768px) {
    .wrap-visual li{height: 500px;}
}