@charset "utf-8";

#mainVisualWrap{padding:0 5%;margin-top:100px;background:#f5f6f8}
#mainVisual{overflow:hidden;position:relative;height:775px}

/* search_box */
#mainVisual .search_box{position:absolute;right:7%;top:28px;z-index:1;width:20%;height:calc(100% - 60px);padding:24px 20px;border-radius:15px;background:rgba(255,255,255,0.9)}
#mainVisual .search_box.s_box{padding:0;background:none}
#mainVisual .search_box.latest{top:90px;height:auto}
#mainVisual .search_box.latest .g_box{width:100%;height:300px;color:#222;font-family:'LotteMartDreamBold';overflow:hidden}
#mainVisual .search_box.latest .g_box + .g_box{margin-top:16px}
#mainVisual .search_box.latest .g_box .gall_img{overflow:hidden;height:205px;border-radius:10px;border-style:double;border-color:#ccc;border-width:thick;background:#fff}
#mainVisual .search_box.latest .g_box .gall_img img{width:100%}
#mainVisual .search_box.latest .g_box .b_tit{margin-top:14px;height:26px;border:1px solid var(--primary);border-radius:20px;font-size:13px;line-height:26px;text-align:center;font-family:'LotteMartDreamBold';display:inline-block;padding:0 10px;color:var(--primary)}
#mainVisual .search_box.latest .g_box .g_tit{margin-top:10px;font-size:18px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}
#mainVisual .search_box.latest .g_box .g_tit a{color:#222}

#mainVisual .search_box.s_box .form_box{width:100%;margin-bottom:16px;padding-right:10px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);line-height:52px;background:#fff}
#mainVisual .search_box.s_box .form_box span{margin-left:10px;color:#222;font-size:15px;font-family:'notokr-medium'}
#mainVisual .search_box.s_box .sh_input{width:70%;height:40px;padding-left:20px;border:none;border-radius:50px;font-size:14px;color:#777;font-family:'notokr-regular'}

/* 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:1660px){
#mainVisual .search_box.s_box .form_box span{margin-left:4px;font-size:14px}
#mainVisual .search_box.s_box{width:24%}
#mainVisual .search_box.latest{width:24%}
#mainVisual .search_box.latest .g_box .gall_img{height:180px}
}
@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}
#mainVisual .search_box.s_box{top:20px}
#mainVisual .search_box.latest{height:600px;top:80px;padding:14px}
#mainVisual .search_box.latest .g_box{height:274px}
}
@media(max-width:1200px){
#mainVisual .search_box.s_box{top:90px;right:1%}
#mainVisual .search_box.s_box .form_box span{font-size:13px}
#mainVisual .search_box.s_box .sh_input{width:64%;padding-left:10px;font-size:12px}
#mainVisual .search_box.latest{top:150px;right:1%;height:536px}
#mainVisual .search_box.latest .g_box{height:245px}
#mainVisual .search_box.latest .g_box .gall_img{height:138px}
}
@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}

#mainVisual .search_box{width:97%;height:auto;top:auto;bottom:10px;left:14px;right:auto;}
#mainVisual .search_box.s_box{top:auto;right:auto;bottom:86px;width:97%}
#mainVisual .search_box.s_box .sh_input{width:86%;padding-left:24px;font-size:14px}
#mainVisual .search_box.s_box .form_box span{margin-left:15px;font-size:15px}
#mainVisual .search_box.latest{width:97%;height:auto;top:auto;bottom:10px;left:14px;right:auto;padding:14px;border-radius:15px}
#mainVisual .search_box.latest .g_box{float:left;width:calc(50% - 15px);height:auto}
#mainVisual .search_box.latest .g_box + .g_box{margin:0 0 0 15px}
#mainVisual .search_box.latest .g_box .b_tit{margin-top:0;font-size:14px}
#mainVisual .search_box.latest .g_box .g_tit{-webkit-line-clamp:1;font-size:16px}
#mainVisual .search_box.latest .g_box .gall_img{display:none;}
}
@media(max-width:768px){
#mainVisual{height:540px}
#mainVisual .mainSwiper{height:500px}
#mainVisual .txt .txt1{top:auto;bottom:270px;font-size:28px}
#mainVisual .txt .txt2{bottom:176px;font-size:15px}
#mainVisual .txt .en_tit{top:70px}
#mainVisual .main_img:after{bottom:220px}
#mainVisual .swiper-pager{bottom:200px}
#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}
#mainVisual .search_box.s_box{left:0;width:100%;padding:16px;border-radius:0;background:#fff}
#mainVisual .search_box.s_box .form_box{width:100%;margin-bottom:0;border-radius:50px}
#mainVisual .search_box.s_box .sh_input{width:72%}
#mainVisual .search_box.latest{width:100%;left:0;bottom:0;padding:12px;border-radius:0;background:#fff}
#mainVisual .search_box.latest .g_box{width:100%}
#mainVisual .search_box.latest .g_box .b_tit{float:left;margin-right:14px;font-size:13px}
#mainVisual .search_box.latest .g_box .g_tit{margin-top:3px;font-size:15px}
#mainVisual .search_box.latest .g_box .g_tit a{font-family:'notokr-medium'}
#mainVisual .search_box.latest .g_box + .g_box{margin:14px 0 0 0}
}
@media(max-width:480px){
#mainVisual{height:520px}
#mainVisual .mainSwiper{height:450px}
#mainVisualWrap{padding:0}	
#mainVisual .main_img li{border-radius:0}
#mainVisual .txt .txt1{left:20px;bottom:250px;font-size:24px}
#mainVisual .txt .txt1 br{display:none}
#mainVisual .txt .txt2{left:20px;bottom:128px;font-size:13px}
#mainVisual .main_img:after{bottom:192px}
#mainVisual .swiper-pager{left:20px;bottom:172px}
#mainVisual .inq_btn{height:60px;border-radius:20px 0 0;line-height:60px}
#mainVisual .txt .en_tit {font-size:22px;top:70px;left:23px}
#mainVisual .search_box.latest .g_box .b_tit{margin-right:10px;font-size:12px}

}
@media(max-width:390px){
#mainVisual .txt .en_tit{font-size:16px;top:60px;left:23px}
#mainVisual .search_box.s_box .sh_input{width:66%;padding-left:16px}
#mainVisual .search_box.s_box .form_box span{margin-left:10px}
}