@charset "utf-8";

#mainVisual_inner{padding:0 0 0 80px}
#mainVisual{overflow:hidden;position:relative;width:100%;background:#222;border-radius:50px 0 0 0}

/* 텍스트 */
#mainVisual .main_txt{position:absolute;padding:160px 0;left:178px;width:100%;max-width:1400px;color:#fff;z-index:101}
#mainVisual .main_txt span{display:block;color:rgba(255,255,255,0.8);letter-spacing:2px;font-weight:500;font-size:18px}
#mainVisual .main_txt p{margin:60px 0 110px;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;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:before{display:block;content:'';position:absolute;top:0;left:0px;z-index:-1;width:0;height:100%;background:#fff;transition:all .3s}

/* bg */
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7)}
#mainVisual ul li{height:820px;overflow:hidden}
#mainVisual ul li .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:cover;}
#mainVisual ul li .bg01{background-image:url(./main_img01.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img02.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img03.jpg)}

/* progress-bar */
.swiper-progress-bar{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);width:100%;max-width:1400px;height:2px;z-index:9999}
.swiper-progress-bar .slide_progress-bar{overflow:hidden;position:absolute;height:2px;background:rgba(255, 255, 255, 0.25);width:auto;clear:both;opacity:0;bottom:48px;left:0;right:0}
.swiper-progress-bar .slide_progress-bar:after{position:absolute;top:0;left:0;background:#fff;height:100%;width:0;content: ""}
.swiper-progress-bar.active .slide_progress-bar{opacity:1}
.swiper-progress-bar.animate .slide_progress-bar:after{width:120%;transition:width 3.8s linear;transition-delay:unset}

/* 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}    
#mainVisual .main_txt{width:90%;left:90px}
}
@media (max-width:1400px){
#mainVisual_inner{padding:0}
#mainVisual .main_txt{left:70px}
}
@media (max-width:1024px){
#mainVisual{border-radius:0}
#mainVisual ul li{height:640px}
#mainVisual .main_txt{padding:130px 0 100px;left:50%;transform:translateX(-50%);text-align:center}
#mainVisual .main_txt a{margin:0 auto}
#mainVisual .main_txt p{margin:60px 0;font-size:48px}
}
@media (max-width:768px){
#mainVisual ul li{height:460px}
#mainVisual .main_txt{padding:90px 0 95px}
#mainVisual .main_txt > span{font-size:17px}
#mainVisual .main_txt p{margin:30px 0;font-size:30px}
#mainVisual .main_txt a{width:200px;height:60px;font-size:15px}
}
@media (max-width:480px){
#mainVisual ul li{height:430px}    
#mainVisual .main_txt{padding:90px 0}  
#mainVisual .main_txt p{font-size:24px}
#mainVisual .main_txt > span{font-size:14px}
#mainVisual .pager_num span{font-size:12px}
#mainVisual .pager_area{bottom:-60px}
}
@media (max-width:380px){
#mainVisual .main_txt{padding:80px 0}
}