@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{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)}
#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{transform-origin:left;width:100%;height:100%;background-color:#fff;transform:scaleX(0)}
#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{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}
}