@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;min-height:800px;background:#222;font-family:var(--e-font),var(--k-font)}

/* 텍스트 */
#mainVisual .main_txt{display:flex;flex-flow:column;position:absolute;left:80px;top:45%;z-index:10;color:#fff}
#mainVisual .main_txt .btxt{font-size:62px;font-weight:600;line-height:1.15;white-space:pre-line}
#mainVisual .main_txt .stxt{margin-top:50px;font-size:18px;line-height:1.8;white-space:pre-line}

/* 이미지 */
#mainVisual .main_slide{height:100%}
#mainVisual ul{z-index:1;height:100%}
#mainVisual ul li{overflow:hidden;height:100%}
#mainVisual ul li:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.25)}
#mainVisual ul li .bg{width:100%;height:100%;background:url(./main_img1.jpg) center no-repeat;background-size:cover}
#mainVisual ul li .bg02{background-image:url(./main_img2.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img3.jpg)}

/* 컨트롤 */
#mainVisual .controls{display:flex;align-items:center;gap:35px;margin-top:100px}
#mainVisual .circle{position:relative}
#mainVisual .circle .autoplay-progress{display:flex;align-items:center;justify-content:center;position:relative;width:60px;height:60px}
#mainVisual .circle .autoplay-progress svg{z-index:10;width:100%;height:100%;stroke-width:2px;stroke:#fff;fill:none;stroke-dashoffset:calc(125.6 * (1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}
#mainVisual .circle .autoplay-progress .bg{position:absolute;width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.5)}
#mainVisual .circle .play div{position:absolute;left:50%;top:50%;z-index:10;transform:translate(-50%,-50%)}
#mainVisual .circle .play span{cursor:pointer;font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 40;font-size:18px}
#mainVisual .circle .play div.swiper-pause{display:block}
#mainVisual .circle .play div.swiper-play{display:none}
#mainVisual .circle .play.on div.swiper-pause{display:none}
#mainVisual .circle .play.on div.swiper-play{display:block}
#mainVisual .arrow{display:flex;align-items:center;gap:25px}
#mainVisual .arrow > span{display:flex}
#mainVisual .arrow .arr{cursor:pointer;width:40px;opacity:.6;transition:all .2s}
#mainVisual .arrow .pager{display:flex;align-items:center;justify-content:center;gap:10px;width:43px;font-size:15px;font-weight:600}


/* 스크롤다운 */
#mainVisual .scroll{position:absolute;z-index:10;right:80px;bottom:80px;padding:40px 15px 0 0;font-size:12px;font-weight:600;color:#fff}
#mainVisual .scroll span{display:block;position:absolute;right:0;width:5px;height:5px;border-radius:50%;background:#fff;transition:all .2s;animation:scr_down 3s infinite}
@keyframes scr_down{0%{top:0;opacity:0}20%{opacity:1}100%{top:90%;opacity:0}}

@media(hover:hover){
#mainVisual .arrow .arr:hover{opacity:1}
}
@media(max-width:1280px){
#mainVisual .main_txt{left:50px}    
#mainVisual .scroll{right:50px;bottom:50px}
}
@media(max-width:1024px){
#mainVisual{height:600px;min-height:auto}
#mainVisual .main_txt{top:200px;left:30px}
#mainVisual .main_txt .btxt{font-size:52px}
#mainVisual .main_txt .stxt{margin-top:30px;font-size:16px}
#mainVisual .controls{margin-top:40px}
#mainVisual .scroll{right:30px;bottom:30px}
}
@media(max-width:768px){
#mainVisual{height:450px}
#mainVisual .main_txt{top:150px}
#mainVisual .main_txt .btxt{font-size:38px}
#mainVisual .main_txt .stxt{margin-top:20px;font-size:15px}   
#mainVisual .controls{gap:20px;margin-top:30px}
#mainVisual .circle .autoplay-progress{width:50px;height:50px}
#mainVisual .circle .autoplay-progress .bg{width:44px;height:44px}
#mainVisual .arrow{gap:15px}
#mainVisual .arrow .arr{width:32px}
#mainVisual .arrow .pager{font-size:13px}
}
@media(max-width:480px){
#mainVisual .main_txt{left:20px;top:auto;bottom:55px;padding-right:20px}
#mainVisual .main_txt .btxt{font-size:34px;white-space:normal;word-break:keep-all}
#mainVisual .main_txt .stxt{margin-top:20px;font-size:14px;white-space:normal;word-break:keep-all}   
#mainVisual .controls{margin-top:25px}
#mainVisual .scroll{right:20px;bottom:30px}
}