@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .main_bnr{position:relative;margin:auto;width:100%;height:100vh;background:#111}

#mainVisual .main_bnr .bg01{background-image:url(./main_banner01.jpg)}
#mainVisual .main_bnr .bg02{background-image:url(./main_banner02.jpg)}
#mainVisual .main_bnr .bg03{background-image:url(./main_banner03.jpg)}
#mainVisual .main_bnr .bg04{background-image:url(./main_banner04.jpg)}
#mainVisual .main_bnr .bg{width:100%;height:100vh;transition:all 1.2s;background-size:cover}

#mainVisual .main_bnr .bg_r{background-position:right;}
#mainVisual .main_bnr .bg_l{background-position:left;}
#mainVisual .main_bnr .bg_c{background-position:center;}


#mainVisual .main_bnr .bg:after{position:absolute;z-index:10;content:'';top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,0)}

#mainVisual .main_bnr li.on .bg{opacity:1;transform:skewX(0)}

#mainVisual .main_txt{position:absolute;z-index:10;color:#fff}

#mainVisual .b01{bottom:42%;left:15%;right:0;}
#mainVisual .b02{bottom:23%;left:0;right:0;}
#mainVisual .b03{bottom:42%;left:10%;right:0;}
#mainVisual .b04{bottom:23%;left:15%;right:0;}

#mainVisual .main_txt h2{font-size:55px;font-weight:300;line-height:1.25;white-space:pre-line;font-family:var(--k-font);color:#333}
#mainVisual .main_txt p{margin-top:30px;font-size:23px;font-weight:300;line-height:1.25;color:#333}

#mainVisual .main_txt h2.color_w{color:#fff !important;}
#mainVisual .main_txt p.color_w{color:#fff !important;}

#mainVisual .main_txt p.b04_logo img{width:300px}

#mainVisual .txt{position:absolute;z-index:10;bottom:17%;left:0;right:0;color:#fff}
#mainVisual .txt h2{font-size:65px;font-weight:700;line-height:1;white-space:pre-line;font-family:var(--k-font)}
#mainVisual .txt p{margin-top:30px;font-size:20px;font-weight:700}
#mainVisual .inner{position:relative}
#mainVisual .pager{margin-top:50px;font-size:0}
#mainVisual .pager span{opacity:.3;position:relative;width:40px;height:40px;margin:0 5px;background-color:transparent;transition:all .3s}
#mainVisual .pager span.on{opacity:1}
#mainVisual .pager span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s}
#mainVisual .pager span.on:before{opacity:1;width:100%;height:100%}
#mainVisual .pager span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff}

#mainVisual .mouse{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:10px}
#mainVisual .mouse .icon{position:relative;width:22px;height:36px;border:2px solid #fff;border-radius:19px}
#mainVisual .mouse .icon:after{content:"";position:absolute;top:10%;left:50%;transform:translateX(-50%);width:2px;height:6px;border-radius:3px;background-color:#fff;animation:mouse_scroll 1.5s infinite linear}
@keyframes mouse_scroll{0% {top:10%}99% {top:50%}100% {top:10%}}
#mainVisual .mouse span{font-size:13px;font-weight:700;text-transform:uppercase;font-family:var(--k-font)}
.swiper-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* 반응형 [s] */
@media (max-width:1440px){
#mainVisual .main_bnr{height:80vh}
#mainVisual .inner{display:flex;align-items:center;justify-content:center;height:100%;padding:0 15px;text-align:center}
#mainVisual .txt{width:100%;height:100%;left:50%;top:50%;bottom:unset;font-size:55px;transform:translate(-50%, -50%)}
#mainVisual .txt h2{font-size:50px}
#mainVisual .pager{margin-top:15px}
#mainVisual .mouse{flex-direction:column;right:unset;left:50%;bottom:50px;transform:translateX(-50%)}

#mainVisual .b01{bottom:150px;left:50%;transform:translateX(-50%);}
#mainVisual .b02{bottom:150px;left:50%;transform:translateX(-50%);}
#mainVisual .b03{bottom:150px;left:50%;transform:translateX(-50%);}
#mainVisual .b04{bottom:150px;left:50%;transform:translateX(-50%);}
.swiper-pagination-bullet{display:none;}
}
@media (max-width:1240px){
#mainVisual .main_txt h2{font-size:40px; word-break: keep-all;}
#mainVisual .main_txt p{font-size:20px; word-break: keep-all;}
}
@media (max-width:1024px){
#mainVisual .main_bnr .bg{background-position:center !important}
#mainVisual .pager span{width:20px;height:20px}
#mainVisual .pager span:before{width:20px;height:20px}
#mainVisual .pager span:after{width:5px;height:5px}
}
@media (max-width:768px){
#mainVisual .main_bnr{height:600px}
#mainVisual .txt h2{font-size:40px}
#mainVisual .txt p{margin-top:10px;font-size:16px}

#mainVisual .main_txt h2{font-size:30px; font-weight:400; word-break: keep-all;}
#mainVisual .main_txt p{font-size:18px; font-weight:400; word-break: keep-all;}

#mainVisual .b04 .b04_logo{display:none;}

.res-br {
    display: none; /* 768px 이상에서는 br 숨김 */
  }

}
@media (max-width:580px){
#mainVisual .main_bnr{height:500px}
#mainVisual .txt h2{font-size:35px}
#mainVisual .mouse{bottom:30px}
#mainVisual .mouse span{font-size:12px}
#mainVisual .mouse .icon{width:18px;height:28px}

#mainVisual .main_txt h2{font-size:24px; font-weight:400; word-break: keep-all;}
#mainVisual .main_txt p{font-size:18px; font-weight:300; word-break: keep-all;}
}
@media (max-width:480px){
#mainVisual .txt h2{font-size:30px}




}
@media (max-width:390px){
#mainVisual .txt h2{font-size:25px}
#mainVisual .txt p{font-size:14px}
#mainVisual .mouse{gap:5px}
#mainVisual .mouse span{font-size:11px}
#mainVisual .mouse .icon{border:1px solid #fff}
}
/* 반응형 [e] */