@charset "utf-8";

#mainVisual{margin-top:36px;position:relative;width:100%;}
#mainVisual .inner{display:flex;gap:30px;padding:0 20px} 
#mainVisual .fl-l{position:relative;max-width:1500px;margin:0 auto;width:100%}
#mainVisual .mainSwiper{overflow:initial !important}
#mainVisual .swiper-container .swiper-wrapper{overflow:hidden;border-radius:20px}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{width:100% !important;height:680px;background-size:cover;background-position:center;opacity:0 !important;overflow:hidden}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide::before{position: absolute;z-index:1;content: '';inset:0%;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide-active{opacity:1 !important}
#mainVisual .main_img li.img01{background-image:url('./main_banner01.jpg')}
#mainVisual .main_img li.img02{background-image:url('./main_banner02.jpg')}
#mainVisual .main_img li.img03{background-image:url('./main_banner03.jpg');background-position: bottom !important;}
#mainVisual .main_img li.img04{background-image:url('./main_banner04.jpg');background-position: bottom !important;}
#mainVisual .main_img li.img05{background-image:url('./main_banner05.jpg')}
/* #mainVisual .main_img li.img03{background-image:url('./main_banner03.jpg')} */
#mainVisual .main_img li > a{position:relative;display:block;width:100%;height:100%;z-index:10}
#mainVisual .main_img li > a::after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:-1}
/* #mainVisual .main_img li > a .main_txt{position:absolute;left:128px;bottom:92px;z-index:2;color:#fff} */
#mainVisual .main_txt{position:absolute;width:100%;max-width:1500px;left: 50%;bottom:92px;transform: translateX(-50%);z-index:2;text-align:center;color:#fff}
/* #mainVisual .main_img li > a .main_txt{position:absolute; left:50%;top:50%;transform:translate(-50%,-50%);bottom:initial;padding:0 10px;width:100%;text-align:center;color:#fff; box-sizing:border-box} */
#mainVisual .main_txt .txt{margin-bottom:14px;font-weight:600;font-size:25px}
#mainVisual .main_txt .tit{font-weight:700;font-size:50px}
#mainVisual .main-control{z-index:1;position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:20px;width:135px;height:50px;border-radius:50pt;color:#fff;background-color:#fff;box-shadow:0 4px 4px rgba(0, 0, 0, 0.25)}
#mainVisual .main-control button{all:unset;display:flex;align-items:center;justify-content:center;cursor:pointer}
#mainVisual .main-control button svg{width:17px;stroke:rgba(17,17,17,0.3);transition:all .5s}
#mainVisual .main-control .swiper-pagination-fraction{width:auto;color:#111;font-weight:500;font-size:15px;font-family:var(--sub-font)}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .main-control button:hover svg{stroke:rgba(17,17,17,1)}
}
@media (max-width:1600px){
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{height:clamp(260px, 42.5vw, 680px)}
/* #mainVisual .main_img li > a .main_txt{left:7%;bottom:16%} */
#mainVisual .main_txt{bottom:16%}
#mainVisual .main_txt .txt{margin-bottom:10px;font-size:clamp(15px, 1.56vw, 25px)}
#mainVisual .main_txt .tit{font-size:clamp(20px, 3.125vw, 50px)}
}
@media (max-width:1250px){
#mainVisual{margin-top:30px}
}
@media (max-width:1024px){
#mainVisual .swiper-container .swiper-wrapper,#mainVisual .inner{border-radius:15px}
}
@media (max-width:768px){
#mainVisual{margin-top:20px}
#mainVisual .inner{padding:0 15px} 
#mainVisual .swiper-container .swiper-wrapper,#mainVisual .inner{border-radius:10px}
#mainVisual .main_txt{transform:translate(-50%,-50%);left:50%;top:50%;bottom:initial;padding:0 10px;box-sizing:border-box}
#mainVisual .main-control{bottom:-22.5px;width:130px;height:45px}
#mainVisual .main-control .swiper-pagination-fraction{font-size:14px}
}
@media (max-width:580px){
#mainVisual .main_txt .tit{line-height:1.2}
#mainVisual .main_txt .txt,#mainVisual .main_txt .tit{word-break:keep-all}
#mainVisual .main-control{bottom:-20px;gap:15px;width:115px;height:40px}
}
@media (max-width:480px){
#mainVisual{margin-top:15px}
#mainVisual .main-control{bottom:-17.5px;gap:10px;width:100px;height:35px}
#mainVisual .main-control .swiper-pagination-fraction{font-size:13px}
}
/* 반응형 [e] */