@charset "utf-8";

/* 로고 */
.main_logo{position:absolute;top:42px;left:230px;z-index:100}
.sub_logo{position:absolute;top:26px;left:40px}

/* 메인 */
#main_banner_wrap{position:relative;width:50%;height:650px}

/* 상단 번호 */
.main_tel {position:absolute;top:26px;right:100px;width:193px;height:60px;border:1px solid #686868;border-radius:45px;padding-left:20px;box-sizing:border-box;font-size:20px;line-height:60px;text-align:center;color:#fff;font-family:'Nunito',sans-serif;background:url(/sh_img/index/main_banner/tel_icon.png) no-repeat 17% center;z-index:100}

/* 메인 텍스트 */
#main_banner{width:100%}
#main_banner_wrap{position:relative;z-index:100}

#main_banner_wrap .main_txt{display: inline-block;position:absolute;top:110px;left:90px;z-index:9999;color:#111;font-family:'Nunito',sans-serif}
#main_banner_wrap .main_txt .txt01{margin-bottom:60px;font-size:55px;line-height:1.25;opacity:0;word-break: keep-all;font-family:'notokr-bold'}
#main_banner_wrap .main_txt .txt01 span{color:#1582d1}
#main_banner_wrap .main_txt .txt02{font-size:23px;letter-spacing:-0.5px;line-height:36px;color:#333;font-family:'notokr-regular';opacity:0;word-break: keep-all;}
#main_banner_wrap .main_txt .txt02 b{color:#1582d1}

/* 메인 이미지 */
#main_banner_wrap .mainSwiper{width:100%;height:100%}
#main_banner_wrap .mainSwiper ul li{background-repeat:no-repeat;background-position:calc(100% - 80px) calc(100% - 80px);background-color:#d9f2ff}
#main_banner_wrap .mainSwiper .img1{background-image:url(/sh_img/index/main_banner/main_banner_01.png)}
#main_banner_wrap .mainSwiper .img2{background-image:url(/sh_img/index/main_banner/main_banner_02.png)}

/* PAGER */
#main_banner_wrap .swiper-pager {position:absolute;bottom:40px;right:60px;z-index:1}
#main_banner_wrap .swiper-pager span {background:#fff;text-indent:-9999px;display:inline-block;width:10px;height:10px;margin:0 3px;border-radius:0;opacity:1;outline:0}
#main_banner_wrap .swiper-pager span.swiper-pagination-bullet-active {background:#0098c6}

#main_r{display:flex;flex-flow:column;width:50%;font-family:var(--k-font)}
#main_r .r_box{position:relative;flex-shrink:0;padding:60px;color:#fff;background-color:#1582d1}
#main_r .r_box>img{position:absolute;right:60px;top:117px}
#main_r .r_box b{display:block;font-size:35px;font-weight:700;line-height:1.25}
#main_r .r_box b span{display:block}
#main_r .r_box p{margin:25px 0 35px;font-size:20px;line-height:1.45}
#main_r .r_box ul{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
#main_r .r_box ul li{padding:25px 0;border-radius:10px;border:2px solid rgba(255,255,255,.5);font-size:16px;text-align:center;background:rgba(255,255,255,.2);font-family:'notokr-bold'}
#main_r .r_box ul li img{display:block;margin:0 auto 8px}
#main_r .kakao_box{height:100%;background-color:#fbe300}
#main_r .kakao_box a{display:flex;align-items:center;width:100%;height:100%;padding:0 20px}
#main_r .kakao_box a b{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:5px;background-color:#fff}
#main_r .kakao_box a p{padding-left:20px;font-size:18px;color:#381e1f;font-family:'notokr-bold'}
#main_r .kakao_box a span{display:block;padding:8px 20px;font-size:14px;margin-left:auto;border-radius:50px;color:#fff;background-color:#381e1f;font-family:'notokr-medium'}
#main_r .kakao_box a span i{margin-left:5px}

@media (max-width:1400px){
#main_banner_wrap{height:630px}
#main_banner_wrap .main_txt{left:45px;top:80px}
#main_banner_wrap .main_txt .txt01{margin-bottom:45px;font-size:48px}
#main_banner_wrap .main_txt .txt02{font-size:21px}
#main_r .r_box{padding:60px 50px}
#main_r .r_box b{font-size:30px}
#main_r .r_box p{font-size:18px}
#main_r .r_box>img{right:50px;top:110px;width:160px}
}
@media (max-width:1230px){
#main_banner_wrap{height:555px}
#main_banner_wrap .mainSwiper ul li{background-size:45%;background-position:calc(100% - 40px) calc(100% - 80px)}
#main_banner_wrap .main_txt{top:65px}
#main_banner_wrap .main_txt .txt01{margin-bottom:35px;font-size:43px}
#main_r .r_box{padding:50px 40px}
#main_r .r_box b{font-size:25px}
#main_r .r_box p{margin-top:20px;font-size:16px}
#main_r .r_box ul li{padding:20px 0}
#main_r .r_box ul li img{height:30px}
#main_r .r_box>img{right:40px;top:99px;width:135px}
#main_r .kakao_box a p{font-size:17px}
}
@media (max-width:1024px){
#main_banner_wrap{height:505px}
#main_banner_wrap .main_txt{left:30px}
#main_banner_wrap .main_txt .txt01{margin-bottom:25px;font-size:33px}
#main_banner_wrap .main_txt .txt02{font-size:18px}
#main_banner_wrap .mainSwiper .img1{background-size:208px}
#main_banner_wrap .mainSwiper .img2{background-size:180px}
#main_r .r_box{padding:40px 30px}
#main_r .r_box b{font-size:23px}
#main_r .r_box p{margin:15px 0 30px;font-size:15px}
#main_r .r_box ul{gap:10px}
#main_r .r_box ul li{font-size:15px}
#main_r .r_box>img{right:30px;top:97px;width:105px}
#main_r .kakao_box a{padding:0 15px}
#main_r .kakao_box a p{padding-left:15px;font-size:16px}
#main_r .kakao_box a span{padding:6px 15px;font-size:13px}
#main_r .kakao_box a b{width:45px;height:45px}
#main_r .kakao_box a b img{height:25px}
}
@media (max-width:768px){
#main_banner{flex-flow:column}
#main_banner_wrap{width:100%;height:265px}
#main_banner_wrap .mainSwiper ul li{background-position:calc(100% - 40px) center}
#main_banner_wrap .mainSwiper .img1{background-size:165px}
#main_banner_wrap .mainSwiper .img2{background-size:150px}
#main_banner_wrap .main_txt .txt01{margin-bottom:20px;font-size:30px}
#main_banner_wrap .swiper-pager{right:30px;bottom:20px}
#main_r{width:100%}
#main_r .kakao_box a{padding:15px}
}
@media (max-width:480px){
#main_banner_wrap{height:200px}
#main_banner_wrap .main_txt{left:20px;top:50%;transform:translateY(-50%)}
#main_banner_wrap .main_txt .txt01{margin-bottom:10px;font-size:25px}
#main_banner_wrap .main_txt .txt02{font-size:16px}
#main_banner_wrap .mainSwiper ul li{background-position:calc(100% - 20px) center}
#main_banner_wrap .mainSwiper .img1{background-size:115px}
#main_banner_wrap .mainSwiper .img2{background-size:105px}
#main_r .r_box{padding:30px 15px}
#main_r .r_box b{font-size:20px}
#main_r .r_box p{margin:13px 0 25px}
#main_r .r_box ul li{padding:15px 0;font-size:14px}
#main_r .r_box ul li img{height:25px}
#main_r .r_box>img{right:30px;top:73px}
#main_r .kakao_box a{padding:10px}
#main_r .kakao_box a p{font-size:15px}
#main_r .kakao_box a b{width:40px;height:40px}
}
@media (max-width:380px){
#main_banner_wrap{height:180px}
#main_banner_wrap .main_txt .txt01{font-size:23px}
#main_banner_wrap .mainSwiper .img1{background-size:95px}
#main_banner_wrap .mainSwiper .img2{background-size:90px}
#main_r .r_box b{font-size:18px}
#main_r .r_box p{font-size:14px}
#main_r .r_box>img{right:15px;width:95px}
#main_r .r_box ul li{font-size:13px}
#main_r .kakao_box a p{padding-left:10px;font-size:14px}
#main_r .kakao_box a span{font-size:12px}
}