@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 .arrow .arr:hover{opacity:1}

/* 스크롤다운 */
#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}}