@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;background:#000}

/* 텍스트 */
#mainVisual .main_txt{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:100vh;color:#fff;z-index:101;text-align:center;overflow:hidden;}
#mainVisual .main_txt .main_tit{margin-bottom:40px;word-break:keep-all}
#mainVisual .main_txt .news{position:relative;margin-bottom:80px;font-size:35px;color:rgba(255,255,255,0.7);font-weight:300;word-break:keep-all}
#mainVisual .main_txt .news em:before{display:inline-block;vertical-align:middle;content:"\f10d";width:25px;height:25px;margin-top:-24px;margin-right:10px;border-radius:3px;font-size:16px;color:rgba(255,255,255,0.8);text-align:center;line-height:25px;font-family:'fontawesome'}
#mainVisual .main_txt .news em:after{display:inline-block;vertical-align:middle;content:"\f10e";width:25px;height:25px;margin-top:-24px;margin-left:10px;border-radius:3px;font-size:16px;color:rgba(255,255,255,0.8);text-align:center;line-height:25px;font-family:'fontawesome'}
#mainVisual .main_txt .news span{display:block;color:rgba(255,255,255,0.6);letter-spacing:.3px;font-weight:500;font-size:18px;font-weight:200}
#mainVisual .main_txt p{font-size:60px;font-weight:100;white-space:pre-line;letter-spacing:0;line-height:1.3}
#mainVisual .main_txt p b{font-weight:700}
#mainVisual .main_txt a{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-evenly;width:225px;height:70px;padding:0 20px;font-size:17px;font-weight:600;border:1px solid #e1e1e1;border-radius:50px;color:#fff;transition:all .3s;z-index:1}
#mainVisual .main_txt a:last-child{width:270px}
#mainVisual .main_txt a:before{display:block;content:'';position:absolute;top:0;left:0px;z-index:-1;width:0;height:100%;background:#fff;transition:all .3s}
#mainVisual .main_txt .txt{font-size:60px;line-height:1.3;word-break:keep-all}
#mainVisual .main_txt .txt span{color:#e90000;font-weight:700}
#mainVisual .main_txt .btn_wrap{display:flex;gap:10px}
#mainVisual .main_txt dl{display:flex;gap:5px;margin-bottom:40px}
#mainVisual .main_txt dl dd{display:block;padding:8px 20px;border-radius:50px;background:rgba(255,255,255,0.2)}

#mainVisual .arrow svg{position:absolute;bottom:50px;left:50%;width:60px;height:60px;stroke-width:1px;transform:translateX(-50%);color:#fff;z-index:999;animation:scroll 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1)}
@keyframes scroll{0%{bottom:30px}100%{bottom:10px}}
#mainVisual.on .arrow{opacity:0}

/* bg */
/* #mainVisual .swiper-wrapper:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100vh} */
#mainVisual .swiper-wrapper li{width:100%;height:100vh;overflow:hidden}
#mainVisual .swiper-wrapper li .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:cover;background-position:center top}
#mainVisual .swiper-wrapper li .bg01{background-image:url(./main_img1.jpg)}
#mainVisual .swiper-wrapper li .bg02{background-image:url(./main_img2.jpg)}
#mainVisual .swiper-wrapper li .bg03{background-image:url(./main_img3.jpg)}

/* pager */
/* #mainVisual .pager_area{width:100%;max-width:1400px;height:30px;position:absolute;bottom:-50px;right:30px;z-index:9999}
#mainVisual .pager_num{position:absolute;right:0;top:-82px;z-index:9999;font-weight:bold;font-size:13px;font-family:var(--enfont)}
#mainVisual .pager_num:after{position:absolute;right:-27px;top:0;content:'/ 03';margin-left: 10px;font-size:13px;font-weight:600;color:rgba(255,255,255,0.6)}
#mainVisual .pager_num span{position:relative;display:none;margin-right:10px;font-size:13px;font-weight:600;color:#fff;letter-spacing:0;background:none}
#mainVisual .pager_num span.swiper-pagination-bullet-active{display:block}
#mainVisual .pager_num span:before{position:absolute;content:""}
#mainVisual .pager_num span:nth-child(1):before{content:"01"}
#mainVisual .pager_num span:nth-child(2):before{content:"02"}
#mainVisual .pager_num span:nth-child(3):before{content:"03"}
#mainVisual .pager_num span:nth-child(4):before{content:"04"}
*/

@media (hover: hover) {
#mainVisual .main_txt a:hover{color:var(--primary)}
#mainVisual .main_txt a:hover:before{width:100%}
}
@media (max-width:1680px){
#mainVisual_inner{padding:0}    
}
@media (max-width:1400px){
}
@media (max-width:1200px){
#mainVisual .main_txt{width:90%}
#mainVisual .main_txt .main_tit{margin-bottom:35px}
#mainVisual .main_txt p{font-size:55px}
#mainVisual .main_txt .news{margin-bottom:60px;font-size:32px}
#mainVisual .main_txt .txt{font-size:55px}
}
@media (max-width:1024px){
#mainVisual ul li{height:640px}
#mainVisual .main_txt p{font-size:50px}
#mainVisual .main_txt .main_tit{margin-bottom:30px}
#mainVisual .main_txt .news{margin-bottom:50px;font-size:29px}
#mainVisual .main_txt .news em:before, #mainVisual .main_txt .news em:after{font-size:15px}
#mainVisual .main_txt .txt{font-size:50px}
#mainVisual .main_txt .btn_wrap{justify-content:center;margin:0 auto}
#mainVisual .main_txt a:last-child{width:auto}
#mainVisual .main_txt dl{justify-content:center}
}
@media (max-width:768px){
#mainVisual ul li{height:600px}
#mainVisual .main_txt .main_tit{margin-bottom:24px}
#mainVisual .main_txt p{font-size:44px;font-weight:300}
#mainVisual .main_txt .news{margin-bottom:40px;font-size:26px}
#mainVisual .main_txt .news em:before, #mainVisual .main_txt .news em:after{margin:-16px 0 0;font-size:13px}
#mainVisual .main_txt .news span{font-size:16px}
#mainVisual .main_txt .txt{font-size:44px}
#mainVisual .main_txt a{width:200px;height:60px;font-size:15px}
}
@media (max-width:580px){
#mainVisual ul li{height:600px}
#mainVisual .main_txt p{font-size:38px}
#mainVisual .main_txt .news{margin-bottom:30px;font-size:23px}
#mainVisual .main_txt .news em:before, #mainVisual .main_txt .news em:after{font-size:11px}
#mainVisual .main_txt .txt{font-size:38px}
#mainVisual .main_txt a{font-size:14px}
#mainVisual .pager_num span{font-size:12px}
#mainVisual .pager_area{bottom:-60px}
}
@media (max-width:480px){
#mainVisual .swiper-wrapper li .bg03{background-position:25% top}
#mainVisual .main_txt .main_tit{margin-bottom:20px}
#mainVisual .main_txt p{font-size:30px}
#mainVisual .main_txt .news{font-size:20px}
#mainVisual .main_txt .news em:before, #mainVisual .main_txt .news em:after{width:20px;height:22px;font-size:10px}
#mainVisual .main_txt .news span{font-size:14px}
#mainVisual .main_txt .txt{font-size:30px}
#mainVisual .main_txt dl{flex-wrap:wrap;margin-bottom:25px}
#mainVisual .main_txt dl dd{padding:8px 15px;color:rgba(255, 255, 255, 0.8)}
#mainVisual .main_txt a{padding:0 10px}
#mainVisual .main_txt a svg{width:20px}
#mainVisual .main_txt .btn_wrap{flex-direction:column;;}
#mainVisual .main_txt .btn_wrap a{width:100%;height:50px;justify-content:space-between;padding:0 20px}
}

@media (max-width:380px){
#mainVisual .main_txt p{font-size:26px}
#mainVisual .main_txt .news{font-size:17px}
#mainVisual .main_txt .news em:before, #mainVisual .main_txt .news em:after{width:18px;height:20px;font-size:9px}
#mainVisual .main_txt .txt{font-size:26px}
}