@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;padding:0 45px}
#mainVisual *{word-break:keep-all}

/* 텍스트 */
#mainVisual .main_txt{position:absolute;z-index:10;bottom:100px;padding-left:120px;color:#fff;font-family:'Play', 'Pretendard'}
#mainVisual .main_txt .txt01{font-size:40px;text-transform:uppercase;font-family:"Work Sans", sans-serif;font-weight:600}
#mainVisual .main_txt .txt02{margin-top:15px;font-size:18px;font-weight:500;opacity:.8}
#mainVisual .main_txt ul{display:flex;gap:15px;margin-top:60px}
#mainVisual .main_txt a{position:relative;display:flex;align-items:center;width:105px;padding:15px 20px;border:2px solid #fff;border-radius:50px;font-size:17px;font-weight:700;color:#fff;transition:all .3s}
#mainVisual .main_txt a svg{display:none;position:absolute;right:13px;width:23px;transition:all .3s}

/* 스와이퍼 */
#mainVisual .main_slide{overflow:hidden;width:100%;height:750px;border-radius:50px}
#mainVisual .main_slide ul{height:100%}
#mainVisual .main_slide ul li{width:100%;height:100%;background:center no-repeat;background-size:cover}
#mainVisual .main_slide ul li.bg01{background-image:url('./main01.jpg')}
#mainVisual .main_slide ul li.bg02{background-image:url('./main02.jpg')}
#mainVisual .main_slide ul li.bg03{background-image:url('./main03.jpg')}

#mainVisual .line{position:relative;display:flex;align-items:center;gap:35px;margin-top:100px}
#mainVisual .pager{width:auto;font-size:0}
#mainVisual .pager span{font-size:17px;font-weight:600;color:rgba(255,255,255,.5)}
#mainVisual .pager span:first-child{position:relative;margin-right:15px;padding-right:15px;color:#fff}
#mainVisual .pager span:first-child:after{position:absolute;content:'';top:5px;right:0;width:2px;height:10px;background:rgba(255,255,255,.5)}

/* progress */
#mainVisual .cir_inner{display:flex;align-items:center;justify-content:center}

.autoplay-progress{position:relative;width:70px;height:70px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--swiper-theme-color)}
.autoplay-progress svg{z-index:10;width:100%;height:100%;stroke-width:4px;stroke:#fff;fill:none;stroke-dashoffset:calc(125.6 * (1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}
.autoplay-progress .bg{position:absolute;width:64px;height:64px;border-radius:50%;border:5px solid rgba(255,255,255,.5)}

#mainVisual .play{position:absolute;z-index:10}
#mainVisual .play span{cursor:pointer;font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 40}
#mainVisual .play div.swiper-pause{display:block}
#mainVisual .play div.swiper-play{display:none}
#mainVisual .play.on div.swiper-pause{display:none}
#mainVisual .play.on div.swiper-play{display:block}

@media(hover:hover){
#mainVisual .main_txt a:hover{width:140px;color:#111;background:#fff}
#mainVisual .main_txt a:hover svg{display:block}
}

/* 반응형 [s] */
@media (max-width:1440px){
#mainVisual{padding:0 25px}
#mainVisual .main_slide{height:600px}
#mainVisual .main_txt{bottom:75px;padding-left:100px}
#mainVisual .main_txt .txt01{font-size:40px}
#mainVisual .main_txt ul{margin-top:45px}
#mainVisual .line{margin-top:70px}
}
@media (max-width:1024px){
#mainVisual{padding:0 15px}
#mainVisual .main_slide{height:530px}
#mainVisual .main_txt{padding-left:75px}
#mainVisual .main_txt .txt01{font-size:35px}
#mainVisual .main_txt .txt02{line-height:1.5;font-size:17px}
#mainVisual .main_txt ul{margin-top:30px}
#mainVisual .main_txt a{width:97px;font-size:15px}
#mainVisual .line{margin-top:50px}
#mainVisual .main_txt .txt01 br{/* display:none; */}
}
@media (max-width:768px){
#mainVisual .main_txt{padding:0 50px}
#mainVisual .main_slide ul li{filter:brightness(.5)}
#mainVisual .main_txt .txt01{font-size:28px}
}
@media (max-width:580px){
#mainVisual .main_txt .txt01{font-size:27px}
}
@media (max-width:480px){
#mainVisual{width:95%;margin:0 auto;padding:0}
#mainVisual .main_slide{height:400px;border-radius:20px}
#mainVisual .main_txt{width:100%;left:50%;bottom:unset;top:50%;padding:0 20px;text-align:center;transform:translate(-50%, -50%)}
#mainVisual .main_txt .txt01{font-size: 20px;}

#mainVisual .main_txt .txt02{padding:0 20px;margin-top:7px;font-size:14px}
#mainVisual .main_txt ul{justify-content:center}
#mainVisual .line{justify-content:center;margin-top:30px}
}
/* 반응형 [e] */