@charset "utf-8";

#mainVisualWrap{padding:0 5%;margin-top:100px;background:#f5f6f8}
#mainVisual{overflow:hidden;position:relative;height:775px}

/* mainVisual */
#mainVisual .mainSwiper{height:775px}
#mainVisual .main_img:after{position:absolute;left:0;bottom:244px;width:50%;height:1px;content:'';background-color:rgba(255,255,255,.3)}
#mainVisual .main_img li{width:100%;height:100%;background:center no-repeat;background-size:cover;border-radius:30px}
#mainVisual .main_img li.img01{background-image:url(/sh_img/index/main_banner/img01.jpg)}
#mainVisual .main_img li.img02{background-image:url(/sh_img/index/main_banner/img02.jpg)}
#mainVisual .main_img li.img03{background-image:url(/sh_img/index/main_banner/img03.jpg)}

#mainVisual .txt{position:absolute;left:50%;transform:translateX(-50%);max-width:1140px;width:100%;height:100%;color:#fff;margin:0 auto;z-index:9999}
#mainVisual .txt .en_tit{position:absolute;left:0;top:150px;font-size: 30px;line-height:1.3;color: #fff;letter-spacing:-.3px;word-break:keep-all;font-family: 'LotteMartDreamMedium';}
#mainVisual .txt .txt1{opacity:0;position:absolute;left:0;top:260px;margin-top:30px;font-size:50px;line-height:1.3;color:#fff;letter-spacing:-.3px;word-break:keep-all;font-family:'LotteMartDreamLight'}
#mainVisual .txt .txt1 span{font-family:'LotteMartDreamBold'}
#mainVisual .txt .txt2{opacity:0;position:absolute;left:0;bottom:170px;line-height:24px;font-size:22px;word-break:keep-all;font-family:'notokr-regular';text-decoration: underline;}

#mainVisual .swiper-pager{position:absolute;left:0;bottom:224px;z-index:1002;margin-top:-55px}
#mainVisual .swiper-pager span{display:inline-block;position:relative;width:50px;height:38px;margin:20px 0;border-radius:0;opacity:.5;background:none;transition:all .5s}
#mainVisual .swiper-pager span:after{letter-spacing:-.2px;color:#fff;font-size:15px;font-weight:600;font-family:'LotteMartDreamBold'}
#mainVisual .swiper-pager span:nth-child(1):after{content:'01'}
#mainVisual .swiper-pager span:nth-child(2):after{content:'02'}
#mainVisual .swiper-pager span:nth-child(3):after{content:'03'}
#mainVisual .swiper-pager span.on{width:180px;border-bottom: solid 1px #fff;opacity:1}

#mainVisual .inq_btn{display:block;position:absolute;right:0;bottom:0;z-index:1001;width:268px;height:90px;border-radius:20px 0 20px;font-size:15px;color:#fff;text-align:center;line-height:90px;background:linear-gradient( to right, var(--second) 2%, var(--primary) 80% );font-family:'LotteMartDreamBold'}

@media(hover:hover){
#mainVisual .inq_btn:hover{background:linear-gradient( to right, var(--second) 10%, var(--primary) 90%)}
}
@media(max-width:1320px){
#mainVisualWrap{padding:0 20px}
#mainVisual{height:700px}
#mainVisual .mainSwiper{height:700px}
#mainVisual .txt .txt1{top:240px;left:30px;font-size:45px}
#mainVisual .txt .txt2{left:30px;font-size:18px}
#mainVisual .swiper-pager{left:30px}
#mainVisual .txt .en_tit{font-size:30px;left:40px}
}
@media(max-width:1040px){
#mainVisualWrap{margin-top:71px}
}
@media(max-width:1024px){
#mainVisualWrap{margin:0}
#mainVisual{height:600px}
#mainVisual .mainSwiper{height:600px}
#mainVisual .txt .txt1{top:170px;font-size: 38px;}
#mainVisual .txt .en_tit{font-size:22px;top:100px;left:40px}
}
@media(max-width:768px){
#mainVisual{height:500px}
#mainVisual .mainSwiper{height:500px}
#mainVisual .txt .txt1{top:auto;bottom:240px;font-size:28px}
#mainVisual .txt .txt2{bottom:100px;font-size:15px}
#mainVisual .main_img:after{bottom:180px}
#mainVisual .swiper-pager{bottom:160px}
#mainVisual .swiper-pager span{width:35px;height:30px}
#mainVisual .swiper-pager span:after{font-size:13px}
#mainVisual .swiper-pager span.on{width:120px}
#mainVisual .inq_btn{width:200px;height:70px;line-height:70px}
}
@media(max-width:480px){
#mainVisual{height:450px}
#mainVisual .mainSwiper{height:450px}
#mainVisualWrap{padding:0}	
#mainVisual .main_img li{border-radius:0}
#mainVisual .txt .txt1{left:20px;bottom:240px;font-size:24px}
#mainVisual .txt .txt1 br{display:none}
#mainVisual .txt .txt2{left:20px;bottom:80px;font-size:13px}
#mainVisual .main_img:after{bottom:180px}
#mainVisual .swiper-pager{left:20px;bottom:160px}
#mainVisual .inq_btn{height:60px;border-radius:20px 0 0;line-height:60px}
#mainVisual .txt .en_tit {font-size:22px;top:90px;left:23px}
}
@media(max-width:390px){
#mainVisual .txt .en_tit{font-size:16px;top:60px;left:23px}
}