@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .swiper-container{width:100%;height:885px;z-index:1}
#mainVisual .swiper-slide{width:100%;height:100%;}
#mainVisual .swiper-slide .img-box{width:100%;height:100%;background-repeat: no-repeat;background-size: cover;}
#mainVisual .swiper-slide.slide01 .img-box{background-image: url(./main_banner03.jpg);}
#mainVisual .swiper-slide.slide02 .img-box{background-image: url(./main_banner02.jpg);}
#mainVisual .swiper-slide.slide03 .img-box{background-image: url(./main_banner01.jpg);}

#mainVisual .text-box{position:absolute;z-index:2;top:50%;left:max(calc((100% - var(--main-size)) / 2), 20px);transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;height:100%;padding-left:180px}
#mainVisual .text-box h1{padding-bottom:26px;font-family:var(--main-font);font-size:46px;font-weight:normal;white-space:pre-line;line-height:1;color:#fff;}
#mainVisual .text-box p.desc{padding-bottom:50px;font-family:var(--main-font);font-size:16px;line-height:1.25;color:#fff;word-break: keep-all;}
#mainVisual .text-box .btn_wrap{display:flex;gap:7px}
#mainVisual .text-box .btn_wrap .btn--primary.white{background-color:rgba(255,255,255,0.2);border-color:transparent}
#mainVisual .text-box .btn_wrap .btn--primary:hover{background-color:rgba(255,255,255,0.3)}

/* 반응형 [s] */
@media (max-width:1700px){
    #mainVisual .swiper-container{height: 780px;}
    #mainVisual .text-box{padding-left: 110px;}
    #mainVisual .text-box h1{padding-bottom: 20px;font-size: 42px;}
    #mainVisual .text-box p.desc{padding-bottom: 40px;}
}
@media (max-width:1600px){
    #mainVisual .swiper-container{height: 720px;}
    #mainVisual .text-box{padding-left: 85px;}
}
@media (max-width:1400px){
    #mainVisual .swiper-container{height: 650px;}
    #mainVisual .text-box{padding-left: 40px;}
    #mainVisual .text-box h1{padding-bottom: 18px;font-size: 38px;}
    #mainVisual .text-box p.desc{padding-bottom: 35px;}
    #mainVisual .swiper-slide.slide01 .img-box{background-position: right}
}
@media (max-width:1200px){
    #mainVisual .swiper-container{height: 610px;}
    #mainVisual .text-box h1{padding-bottom: 14px;font-size: 34px;}
    #mainVisual .text-box p.desc{padding-bottom: 28px;}
        #mainVisual .swiper-slide.slide01 .img-box{background-position: right -80px center}
        #mainVisual .swiper-slide.slide02 .img-box{background-position: right}

}
@media (max-width:1024px){
    #mainVisual .swiper-container{height: 510px;}
    #mainVisual .text-box{padding-left: 20px;}
    #mainVisual .text-box h1{padding-bottom: 12px;font-size: 30px;}
    #mainVisual .text-box p.desc{padding-bottom: 24px;font-size: 15px;}
    #mainVisual .swiper-slide.slide02 .img-box{background-position: right -60px center;}
    #mainVisual .swiper-slide.slide03 .img-box{background-position: right -60px center}

}
@media (max-width:768px){
    #mainVisual .swiper-container::before{z-index:2;position: absolute;inset:0%;content:'';width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);pointer-events: none;}
    #mainVisual .swiper-container{height: 440px;}
    #mainVisual .text-box{display: flex;flex-direction: column;align-items: center;left: 50%;transform: translate(-50%, -50%);width: 100%;height: auto;padding:0 20px;}
    #mainVisual .text-box h1{padding-bottom: 10px;font-size: 26px;text-align: center;}
    #mainVisual .text-box p.desc{font-size: 14px;text-align: center;}
    #mainVisual .text-box .btn_wrap{justify-content: center;width: 100%;}
    #mainVisual .swiper-slide.slide02 .img-box{background-position: right -100px center;}
    #mainVisual .swiper-slide.slide03 .img-box{background-position: right -120px center}
}
@media (max-width:480px){
    #mainVisual .swiper-container{height: 400px;}
    #mainVisual .text-box h1{padding-bottom: 8px;font-size: 22px;}
    #mainVisual .text-box p.desc{padding-bottom: 18px;}
    #mainVisual .swiper-slide.slide02 .img-box{background-position: right -158px center;}
    #mainVisual .swiper-slide.slide03 .img-box{background-position: right -155px center;}
}

/* 반응형 [e] */