@charset "utf-8";

.swiper {position:relative;user-select:none;}
.swiper .txt-wrap {position:absolute;top:50%;transform:translateY(-50%);left:13.5vw;color:#fff;}
.swiper .txt-wrap .sub_title {font-size:2rem;font-weight:400;margin-bottom:3rem;text-shadow:0 0 30px rgba(0,0,0,0.1);}
.swiper .txt-wrap .title {font:700 5.4rem/1.4 'Hallym';margin-bottom:5.5rem;text-shadow:0 0 30px rgba(0,0,0,0.1);}
.swiper .txt-wrap .btn-more {position:relative;display:inline-block;height:5.8rem;line-height:5.5rem;padding:0 3.2rem;padding-right:10rem;background:none;border:1px solid rgba(255,255,255,.5);border-radius:3rem;font-size:1.6rem;font-weight:500;color:#fff;text-shadow:0 0 10px rgba(0,0,0,0.1);transition:all .3s ease;}
.swiper .txt-wrap .btn-more::after {position:absolute;top:48%;transform:translateY(-50%);right:3.2rem;display:block !important;content:'';width:3.4rem;height:1rem;background:url('img/btn-more-arrow-w.svg') center center/contain no-repeat;transition:all .3s ease;}
.swiper .txt-wrap .btn-more:hover {background:rgba(255,255,255,.2);border-color:rgba(0,0,0,0);}
.swiper .txt-wrap .btn-more:hover::after {right:2rem;}

.slide-control {position:absolute;bottom:8rem;left:13.5vw;display:flex;align-items:center;width:14rem;height:5rem;color:#fff;}
.swiper-button-prev i, .swiper-button-next i {font-size:1.8rem;color:#fff;cursor:pointer;}
.swiper-button-next:after, .swiper-button-prev:after {display:none;}
.swiper-pagination {top:45% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:auto !important;font-size:1.6rem;color:rgba(255,255,255,.5) !important;}
.swiper-pagination .swiper-pagination-current {color:#fff;}
.autoplay-control {position:absolute;right:-2.5rem;top:45%;transform:translateY(-50%);z-index:1000;width:2rem;height:1.4rem;}
.autoplay-control button {position:absolute;background:none;border:0;}
.autoplay-control button.play {display:none;}
.autoplay-control button i {font-size:2rem;color:#fff;}
.swiper-progress-bar {position:absolute;bottom:0;left:0;z-index:1000;width:100%;height:6px;background:#c3d6fc;}
.swiper-progress-bar:after {position:absolute;top:0;left:0;width:0;height:100%;content:'';background:#7da7f8;transition:.1s width linear;}
.swiper-progress-bar.animate::after {transition:width linear;transition-delay:unset;width:100%;transition-duration:5s;}
#bo_btn {position:absolute;left:2rem;bottom:2rem;z-index:2000;}
#bo_btn a {display:inline-block;font-size:2.5rem;color:#fff;transition:all .3s ease;}
#bo_btn a:hover {opacity:0.7;}
#bo_btn a:not(:last-child) {margin-right:2rem;}

@media screen and (min-width:1920px) {
    #mainBanner .swiper ul li {background-position:center center !important;;background-size:cover !important;;}
}
@media screen and (max-width:1440px) {
    .swiper .txt-wrap {left:10vw;}
    .slide-control {left:10vw;}
}
@media screen and (max-width:1280px) {
    .swiper .txt-wrap {left:8vw;}
    .slide-control {left:8vw;}
}
@media screen and (max-width:640px) {
    #mainBanner {height:85vh !important;max-height:700px !important;}
    .swiper .txt-wrap {width:90vw;left:6vw;top:18%;transform:none;z-index:20;}
    .swiper .txt-wrap .title {font-size:4rem;margin-bottom:4.5rem;}
    .swiper .txt-wrap .sub_title {font-size:1.8rem;margin-bottom:2rem;}
    .swiper .txt-wrap .btn-more {height:4.8rem;line-height:4.4rem;padding:0 2.4rem;padding-right:6.8rem;font-size:1.45rem;}
    .swiper .txt-wrap .btn-more::after {right:2.4rem;width:2.4rem;}
    .slide-control {left:8vw;bottom:6.5rem;}
    #mainBanner .swiper ul li {position:relative;background-position:85% bottom !important;background-repeat:no-repeat !important;;background-size:220% !important;overflow:hidden;}
    #mainBanner .swiper ul li::after {position:absolute;top:0;left:0;display:block;content:'';width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0) 40%,rgba(0,0,0,0.4) 100%);z-index:10;}
    #mainBanner .swiper ul li img {width:220% !important;height:70% !important;position:absolute;bottom:0;right:-15rem;}
}
@media screen and (max-width:515px) {
}
@media screen and (max-width:414px) {
    #mainBanner .swiper ul li img {width:250% !important;height:55% !important;}
    
}