@charset "utf-8";

#mainVisual{position:relative;overflow:hidden;height:100vh}
#mainVisual::before{z-index:2;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.6);pointer-events:none}

#mainVisual .main_slide_wrap.swiper-container{width:100%;height:100%}
#mainVisual .main_slide_wrap .swiper-slide img{width:100%;height:100%;object-fit:cover}
#mainVisual .main_inner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:3;width:100%}
#mainVisual .text-box{color:#fff;text-align:center}
#mainVisual .text-box h1{font-size:15px;font-weight:700}
#mainVisual .text-box .main_txt_l{padding:25px 0;font-size:60px;font-weight:700;line-height:1.2;white-space:pre-line;word-break:keep-all}
#mainVisual .text-box .main_txt_s{padding-bottom:30px;font-size:17px;font-weight:500;color:rgba(255,255,255,0.6);word-break:keep-all}
#mainVisual .text-box .pagination{display:flex;align-items:center;justify-content:center;gap:15px;padding-bottom:110px}
#mainVisual .text-box .pagination span{font-family:var(--e-font);font-size:17px;color:rgba(255,255,255,0.6)}
#mainVisual .text-box .pagination .progress-bar{position:relative;max-width:180px;width:100%;height:2px;background-color:rgba(255,255,255,0.2)}
#mainVisual .text-box .pagination .progress-bar .bar{display:block;transform-origin:left center;width:100%;height:100%;background-color:#fff;transform:scaleX(0)}
#mainVisual .text-box .pagination .progress-bar .bar.running {transform:scaleX(1);transition:transform 3000ms linear}

#mainVisual .aeo-box{display:flex;align-items:center;gap:20px;max-width:567px;width:100%;margin:0 auto;padding:0 35px 0 24px;background-color:#fff;border-radius:100px;height:70px}
#mainVisual .aeo-box span.material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;color:#07414f;fill:#07414f}
#mainVisual .aeo-box .swiper-container{flex:1;margin:0;height:25px;font-family:var(--k-font);font-size:16px;font-weight:600;color:#bebebe}
#mainVisual .aeo-box .rolling li{display:flex;align-items:center}
#mainVisual .scroll{z-index:3;position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;width:45px;height:28px}
#mainVisual .scroll img{display:block;opacity:.2}
#mainVisual .scroll img:first-child{animation:arrowFlow 1.4s linear infinite}
#mainVisual .scroll img:last-child{animation:arrowFlow 1.4s linear infinite .2s}

@keyframes arrowFlow{
0%{transform:translateY(-4px);opacity:0}
25%{transform:translateY(0);opacity:0.6}
75%{transform:translateY(4px);opacity:.4}
100%{transform:translateY(8px);opacity:0}
}

/* 반응형 [s] */
@media (max-width:1600px){
#mainVisual .text-box .main_txt_l{font-size:52px}
#mainVisual .text-box .pagination{padding-bottom:80px}
}
@media (max-width:1400px){
#mainVisual{height:80vh}
#mainVisual .text-box .main_txt_l{font-size:46px}
#mainVisual .text-box .pagination{padding-bottom:60px}
#mainVisual .aeo-box{gap:12px;max-width:500px;padding:0 28px 0 24px;height:65px}
#mainVisual .aeo-box span.material-symbols-rounded{font-size:20px}
#mainVisual .aeo-box svg{width:20px;height:20px}
#mainVisual .aeo-box .swiper-container{font-size:15px}
#mainVisual .scroll{bottom:50px;width:36px}
}
@media(max-width:1200px){
#mainVisual .text-box .main_txt_l{padding:20px 0;font-size:40px}
#mainVisual .text-box .main_txt_s{font-size:16px}
#mainVisual .text-box .pagination span{font-size:16px}
#mainVisual .aeo-box{max-width:450px}
#mainVisual .aeo-box .swiper-container{font-size:14px}
}
@media (max-width:1024px){
#mainVisual{height:65vh}
#mainVisual .text-box h1{font-size:14px}
#mainVisual .text-box .main_txt_l{font-size:34px}
#mainVisual .text-box .main_txt_s{padding-bottom:25px}
#mainVisual .text-box .pagination{padding-bottom:50px}
#mainVisual .aeo-box{gap:10px;max-width:465px;height:60px;padding:0 22px 0 20px}
#mainVisual .aeo-box span.material-symbols-rounded{font-size:18px}
#mainVisual .aeo-box svg{width:18px;height:18px}
#mainVisual .scroll{bottom:30px;width:32px}
}
@media (max-width:768px){
#mainVisual{height:58vh}
#mainVisual .text-box h1{font-size:13px}
#mainVisual .text-box .main_txt_l{padding:16px 0;font-size:28px}
#mainVisual .text-box .main_txt_s{padding-bottom:22px;font-size:15px}
#mainVisual .text-box .pagination{padding-bottom:40px}
#mainVisual .text-box .pagination span{font-size:15px}
#mainVisual .aeo-box{gap:6px;max-width:418px;height:54px}
#mainVisual .aeo-box .swiper-container{font-size:13px}
}
@media (max-width:480px){
#mainVisual{height:45vh}
#mainVisual .text-box{padding:0 20px}
#mainVisual .text-box h1{font-size:12px}
#mainVisual .text-box .main_txt_l{padding:12px 0;font-size:22px}
#mainVisual .text-box .main_txt_s{padding-bottom:18px;font-size:14px}
#mainVisual .text-box .pagination{padding-bottom:30px}
#mainVisual .text-box .pagination .progress-bar{max-width:140px}
#mainVisual .text-box .pagination span{font-size:14px}
#mainVisual .aeo-box{display:none}
#mainVisual .scroll{width:26px}
}
/* 반응형 [e] */