@charset "utf-8";
/* Mainslide */
#mainVisual{position:relative}
/* #mainVisual:after{position:absolute;bottom:-35px;width:100%;height:60px;background:#000;content:"";z-index:1;filter:blur(15px)} */

#mainVisual .main_slide{position:relative;width:100%;height:100vh}
#mainVisual .swiper-wrapper{height:100%}
#mainVisual ul{position:relative}
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background: rgba(0,0,0,.35);z-index:-1}
#mainVisual ul li video{position:relative;left:50%;top:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto}
#mainVisual .main_txt{position:absolute;top:26vh;width:100%;text-align:center;line-height:1.25;color:#fff;z-index: 1 !important;}
#mainVisual .main_txt span{font-size:20px;font-weight:500}
#mainVisual .main_txt h1{margin:20px 0 40px;font-size:72px;font-weight:200;font-family:var(--e-font)}

/* Pager */
#mainVisual .pager{display:flex;justify-content:center;gap:15px}
#mainVisual .pager button{opacity:1;position:relative;display:flex;justify-content:center;align-items:center;width:auto;height:auto;border-radius:50%;color:#fff;cursor:pointer;background:transparent;transition:.2s}
#mainVisual .pager button:after{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:5px;height:5px;border-radius:50%;background-color:#fff;content:"";transition:all .2s}
#mainVisual .pager button.on:after{opacity:0}
#mainVisual .pager .progress{transform:rotate(-90deg)}
#mainVisual .pager .circle-origin{fill:transparent;stroke:rgb(255, 255, 255);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:all .2s}
#mainVisual .pager button.on .circle-origin{animation:progress 4.5s ease}
@keyframes progress{from{stroke-dashoffset:-38}to{stroke-dashoffset:0}}

/* scroll dowm */
#mainVisual .scroll{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);z-index:101;font-size:12px;font-weight:500;color:#fff;font-family:var(--e-font)}
#mainVisual .scroll .bar{position:absolute;bottom:-150px;left:50%;transform:translateX(-50%);width:1px;height:130px;background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%)}
#mainVisual .scroll .bar:after{content:"";position:absolute;top:0;left:0;width:1px;height:18px;background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);animation:scroll 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1)}
@keyframes scroll{0%{top:0;opacity:1}70%{top:100%;opacity:0}100%{top:0;opacity:0}}

/* 반응형 [s] */
@media (max-width:1024px){
#mainVisual:after{bottom:0px;height:35px}
#mainVisual .main_slide{height:590px}
#mainVisual .main_txt{top:110px}
#mainVisual .main_txt span{font-size:18px}
#mainVisual .main_txt h1{margin:12px 0 28px;font-size:48px}
#mainVisual .scroll{bottom:20%}
#mainVisual .scroll .bar{bottom:-115px;height:95px}
}
@media (max-width:768px){
#mainVisual .main_slide{height:480px}
#mainVisual .main_txt{top:80px}
#mainVisual .main_txt span{font-size:16px}
#mainVisual .main_txt h1{margin:10px 0 24px;font-size:34px}
#mainVisual .pager{gap:12px}
#mainVisual .scroll{bottom:22%}
#mainVisual .scroll .bar{bottom:-90px;height:80px}
}
@media (max-width:480px){
#mainVisual .main_slide{height:230px}
#mainVisual .main_txt{top:60px}
#mainVisual .main_txt span{font-size:14px}
#mainVisual .main_txt h1{margin:8px 0 20px;font-size:20px}
#mainVisual .pager{gap:10px}
#mainVisual .scroll .bar{bottom:-75px;height:65px;display:none}
#mainVisual ul li video{width:100%;height:auto;object-fit:contain}
#mainVisual .scroll{display:none}
}
@media (max-width:380px){
#mainVisual .main_slide{height:200px}
#mainVisual .main_txt{padding:0 20px;top:50px;}
#mainVisual .main_txt span{font-size:13px}
#mainVisual .main_txt h1{margin:6px 0 16px;font-size:16px}
#mainVisual .scroll{bottom:27%}
}
/* 반응형 [e] */