@charset "utf-8";

.main-visual-wrap{position: relative; z-index: 1;}
.main-visual-wrap .frame{max-width: 170rem; margin: 0 auto; padding: 0 2rem;}
.main-visual-wrap .swiper-slide{padding-bottom: 100vh; background-color: #0c0d10}
.main-visual-wrap .swiper-slide::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/bg-image-deco.png) no-repeat center center / cover; z-index: 2;}
.main-visual-wrap .swiper-slide img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;}
.main-visual-wrap .main-visual-text{position: absolute; left: 0; top: 32.7%; width: 100%; z-index: 2;transition: all .5s; margin-top: 0;}
.main-visual-wrap .main-visual-text-box{position: absolute; left: 0; top: 34.5%; width: 100%; z-index: 2;}
.main-visual-wrap .main-visual-text-box h1{font-size: 4rem; line-height: 6rem; letter-spacing: .025em; color: #ffffff; font-family: "sm";}
.main-visual-wrap .main-visual-text-box span{font-size: 2rem; color: white; font-family: "pr"; display: block;}
.main-visual-wrap .main-visual-info{display: flex; flex-wrap: wrap; align-items: center; gap: 5rem; margin-top: 5.3rem;}
.main-visual-wrap .main-visual-num{display: flex; gap: 2rem;}
.main-visual-wrap .main-visual-num span{color: #ffffff; font-size: 1.6rem; font-family: "playB";}
.main-visual-wrap .main-visual-remote {display: flex; align-items: center; gap: 2.7rem;}
.main-visual-wrap .main-visual-remote .swiper-button-prev,
.main-visual-wrap .main-visual-remote .swiper-button-next{width: .9rem; height: 1.6rem; background-repeat: no-repeat; background-position: center center; background-size: cover; position: static; margin-top: 0; font-size: 0;}
.main-visual-wrap .main-visual-remote .swiper-button-prev{background-image: url(../images/ic-visual-prev.png);}
.main-visual-wrap .main-visual-remote .swiper-button-next{background-image: url(../images/ic-visual-next.png);}
.main-visual-wrap .main-visual-remote .swiper-button-box button{display: none; width: 1rem; height: 1.4rem; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size: 0;}
.main-visual-wrap .main-visual-remote .swiper-button-box button.on{display: block;}
.main-visual-wrap .main-visual-remote .swiper-button-box .swiper-button-play{background-image: url(../images/ic-visual-play.png);}
.main-visual-wrap .main-visual-remote .swiper-button-box .swiper-button-stop{background-image: url(../images/ic-visual-stop.png);}

@media screen and (max-width: 1740px) {
    .main-visual-wrap .main-visual-text-box .frame{padding: 0 2rem;}
}

@media screen and (max-width: 1200px) {
    .main-visual-wrap .swiper-slide{padding-bottom: 60%;}
    .main-visual-wrap .main-visual-text,
    .main-visual-wrap .main-visual-text-box{top: 30%;}
    .main-visual-wrap .main-visual-text-box h1{font-size: 3rem; line-height: 4.5rem;}
    .main-visual-wrap .main-visual-text-box span{font-size: 1.6rem;}
    .main-visual-wrap .main-visual-info{margin-top: 4rem; gap: 3.5rem;}
    .main-visual-wrap .main-visual-num{gap: 1rem;}
    .main-visual-wrap .main-visual-num span{font-size: 1.4rem;}
    .main-visual-wrap .main-visual-remote{gap: 2rem;}
}

@media screen and (max-width: 768px) {
    .main-visual-wrap .swiper-slide{padding-bottom: 100vh;}
    .main-visual-wrap .main-visual-text,
    .main-visual-wrap .main-visual-text-box{top: 33%;}
    .main-visual-wrap .main-visual-text-box h1{font-size: 2.6rem; line-height: 3.8rem; margin-bottom: 1rem;}
    .main-visual-wrap .main-visual-text-box span{font-size: 1.4rem;}
    .main-visual-wrap .main-visual-info{margin-top: 4rem; gap: 5rem;}
    .main-visual-wrap .main-visual-num{gap: 2.2rem;}
    .main-visual-wrap .main-visual-num span{font-size: 1.6rem;}
}