@charset "utf-8";

/* visual */
.wrap-visual {position: relative;}
.wrap-visual .img-box {position: relative;}
.wrap-visual .img-box img {position: relative; left:50%; max-width:none; max-height:90rem; height:100%; object-fit: cover; transform: translate(-50%,0);}
.wrap-visual .img-box::after {content:''; position: absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(to top, transparent 19%, rgba(0, 0, 0, 0.3) 95%)}
.wrap-visual .text-box {position: absolute; top:30.7%; left:0; width:100%; margin:0 auto; font-family: psb; font-size:7rem; color:#fff; line-height: 8.5rem;}
.wrap-visual .text-box .text-inner {max-width:160rem; width:100%; margin:0 auto;}
.wrap-visual .controls {position: absolute; bottom:36.2%; z-index: 1; display: flex; align-items: center;}
.wrap-visual .controls::before {content:''; width: 82.3rem; height:0.1rem; margin-right: 1rem; background:#fff;}
.wrap-visual .controls .swiper-pagination {position: relative; font-size: 0;}
.wrap-visual .swiper-pagination-bullet {width: 1.2rem; height:1.2rem; background:#fff; opacity:0.4; margin-right: 0.5rem; transition:all .3s;}
.wrap-visual .swiper-pagination-bullet:hover,
.wrap-visual .swiper-pagination-bullet-active {opacity:1;}
.wrap-visual .playstop {position: relative;}
.wrap-visual .playstop button {display: none; width: 1.2rem; height: 1.2rem; text-indent: -9999rem;}
.wrap-visual .playstop button.on {display: block;}
.wrap-visual .playstop .play {background:url('../images/btn-play.png') no-repeat center;}
.wrap-visual .playstop .stop {background:url('../images/btn-stop.png') no-repeat center;}

@media screen and (min-width:1921px) {
    .wrap-visual .img-box img {width:100%;}
}
@media screen and (max-width: 1680px) {
    .wrap-visual .text-box .text-inner{padding: 0 4rem;}
}

@media screen and (max-width: 1250px) {
    .wrap-visual .text-box{font-size: 6rem; line-height: 8.5rem; top: 33.5%;}
    .wrap-visual .controls::before{width: 68.2rem;}
}

@media screen and (max-width: 768px) {
    .wrap-visual .text-box{top: 27%;font-size: 4rem; line-height: 7rem;}
    .wrap-visual .text-box .text-inner{padding: 0 1.5rem;}
    .wrap-visual .text-box strong br {display: none;}
    .wrap-visual .controls::before{width: 36.7rem;}
}