@charset "utf-8";
#mainVisual{position:relative;margin:0 auto;padding:0 70px}

/* 텍스트 */
#mainVisual .txt_area{position:absolute;top:27%;left:50%;z-index:101;transform:translateX(-50%);max-width:1200px;width:100%;color:#fff}
#mainVisual .txt_area .tit{margin:60px 0 40px 0;letter-spacing:-3px;font-size:55px;line-height:65px;font-family:'Noto Sans KR';font-weight:100}
#mainVisual .txt_area .tit b{font-weight:normal;font-family:'Noto Sans KR';font-weight:700}
#mainVisual .txt_area .txt{line-height:26px;color:rgba(255,255,255,0.7);font-size:16px;font-family:'Noto Sans KR';white-space:pre-line}

/* 슬라이더 */
#mainVisual .mainSwiper{height:718px}
#mainVisual .mainSwiper li{width:100%!important;height:100%;background:center no-repeat;border-radius:30px;background-size:cover}
#mainVisual .mainSwiper li.img01{background-image:url(./main_img01.jpg)}
#mainVisual .mainSwiper li.img02{background-image:url(./main_img02.jpg)}
#mainVisual .mainSwiper li.img03{background-image:url(./main_img03.jpg)}

/* 컨트롤러 */
#mainVisual .pager_area{width:100%;max-width:1200px;height:30px;position:absolute;top:29%;left:50%;transform:translateX(-50%);z-index:9999}
#mainVisual .pager_num{position:absolute;left:0;top:-82px;width:45px;height:30px;z-index:9999;font-weight:bold;font-size:13px;font-family:'Poppins'}
#mainVisual .pager_num:after{position:absolute;right:-32px;top:0;content:'03';margin-left:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,0.4);font-family:'Poppins'}
#mainVisual .pager_num span{position:relative;display:none;font-size:13px;font-weight:600;color:#fff;letter-spacing:0;background:none;font-family:'Poppins'}
#mainVisual .pager_num span:after{position:absolute;content:'';left:22px;top:9px;width:30px;height:1px;background:rgba(255,255,255,0.4)}
#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"}

/*btn*/
#mainVisual .txt_area .txt_box{padding:60px 0;display:flex;align-items:center;justify-content:space-between}
#mainVisual .txt_area .txt_box a{overflow:hidden;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 30px;width:170px;height:55px;line-height:55px;border:1px solid #fff;color:#fff;border-radius:30px;text-align:left;font-size:16px;font-family:'Noto Sans KR';font-weight:500}
#mainVisual .txt_area .txt_box a:before{display:block;content:'';position:absolute;top:0;left:0;z-index:-1;width:0;height:100%;background:#fff;transition:all .3s}
#mainVisual .txt_area .txt_box i{font-size:20px}

/*progress-bar*/
.swiper-progress-bar{position:absolute;top:68%;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;height:1px;z-index:9999}
.swiper-progress-bar .slide_progress-bar{overflow:hidden;position:absolute;height:1px;background:rgba(255, 255, 255, 0.2);width:auto;clear:both;opacity:0;bottom:45px;left:0;right:0}
.swiper-progress-bar .slide_progress-bar:after{position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.6);height:100%;width:0;content: ""}
.swiper-progress-bar.active .slide_progress-bar{opacity:1}
.swiper-progress-bar.animate .slide_progress-bar:after{width:115%;transition:width 3.8s linear;transition-delay:unset}
@media(hover:hover){
#mainVisual .txt_area .txt_box a:hover{color:#125ad3}
#mainVisual .txt_area .txt_box a:hover:before{width:100%}
}
@media (max-width:1400px){
#mainVisual{padding:0 20px}
#mainVisual .txt_area{width:80%}	
#mainVisual .pager_area{width:80%}
.swiper-progress-bar{width:80%}
}
@media (max-width:1024px){
#mainVisual{padding:0}
#mainVisual .mainSwiper{height:550px}
#mainVisual .mainSwiper li{border-radius:0}
#mainVisual .txt_area{top:40%;width:90%;}	
#mainVisual .txt_area .tit{margin:0;font-size:42px;line-height:1.25}
#mainVisual .txt_area .txt{font-size:15px;white-space:normal;word-break:keep-all}
#mainVisual .txt_area .txt_box{padding-bottom:0}
#mainVisual .txt_area .txt_box a{flex-shrink:0}
#mainVisual .pager_area{top:45%;width:90%}
.swiper-progress-bar{top:73%;width:90%}
}
@media (max-width:768px){
#mainVisual .mainSwiper{height:480px}
#mainVisual .mainSwiper li.img01{background-position:60% center}
#mainVisual .mainSwiper li.img03{background-position:65% center}
#mainVisual .txt_area .tit{font-size:36px}	
#mainVisual .txt_area .txt{padding-right:15px;font-size:14px;line-height:1.6}	
#mainVisual .txt_area .txt_box{padding-top:40px}
#mainVisual .txt_area .txt_box a{width:150px;height:50px;font-size:14px}
}
@media (max-width:480px){
#mainVisual .mainSwiper{height:420px}
#mainVisual .txt_area .tit{font-size:32px}	
#mainVisual .txt_area .txt_box{padding-top:30px}
#mainVisual .txt_area .txt_box a{width:110px;height:40px;padding:0 15px;font-size:13px}
#mainVisual .txt_area .txt_box a svg{width:18px;height:18px}
#mainVisual .txt_area .txt{font-size:13px}
}