@charset "utf-8";

#sh_snb{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;width:100%}
#sh_snb li a{display:block;position:relative;height:60px;padding:0 25px;font-size:15.5px;line-height:60px;letter-spacing:-.2px;color:#999;transition:all .2s}
#sh_snb li:not(.snb_on) a:hover{color:#222}
#sh_snb li.snb_on a{color:#222}
#sh_snb li.snb_on a:after{display:block;content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:2px;background-color:#046fd9}

.area_snb{position:absolute;top:50px;left:-220px;width:200px;letter-spacing:-.3px}
.area_snb .tit{padding:30px 0;font-size:24px;color:#222;text-align:center;background:#e2ebf5}
.area_snb .area{display:flex;flex-wrap: wrap;padding:15px;border-bottom:5px solid #e2ebf5}
.area_snb .area a{width:calc(100% / 3);font-size:15px;color:#888;line-height:1.8;text-align:center}
.area_snb .area a:hover{color:#222}
.area_snb .area a.area_on{color:#046fd9;font-family:'notokr-medium'}
#snb_cs{padding:15px}
#snb_cs dt{font-size:15px;font-family:'notokr-medium'}
#snb_cs dd{font-size:13px;color:#777}
#snb_cs dd.tel{padding:10px 0;font-size:24px;font-weight:700;color:#046fd9;font-family:'Roboto'}

/* 반응형 [s] */
@media (max-width:1570px){
#sh_content.hos_skin{float:right;width:calc(100% - 200px);max-width:100%;margin:0;padding:50px 30px 50px 50px}	
.area_snb{left:-170px}
}
@media (max-width:1024px){
#sh_content.hos_skin{float:none;width:100%;padding:20px 0 40px}	
#sh_snb li a{height:50px;padding:0 15px;font-size:14px;line-height:50px}	
.area_snb{position:relative;top:auto;left:auto;width:100%;margin:20px 0}
.area_snb:after{display:block;content:"";position:absolute;right:0;top:0;width:50px;height:30px;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)}
.area_snb .tit{display:none}
.area_snb .scr_wrap{width:calc(100% - 20px);margin-left:20px;cursor:pointer;overflow-x:scroll;padding:0 0 10px 0}
.area_snb .scr_wrap::-webkit-scrollbar{height:5px}
.area_snb .scr_wrap::-webkit-scrollbar-thumb{border-radius:5px;background-color:#aaa}
.area_snb .scr_wrap::-webkit-scrollbar-track{border-radius:5px;background-color:#eee}
.area_snb .area{display:table;padding:0 50px 0 0;border:none}
.area_snb .area a{display:table-cell;position:relative;width:auto;padding:0 10px;font-size:16px;word-break:keep-all}
.area_snb .area a.area_on:after{display:block;content:"";position:absolute;left:5%;bottom:-3px;width:90%;height:2px;background-color:#046fd9}
#snb_cs{padding:0;margin-top:25px;text-align:center}
#snb_cs dd.tel{padding:10px 0}
}
@media (max-width:768px){
.area_snb{display:none}
}
@media (max-width:480px){
#sh_snb{justify-content:flex-start}
#sh_snb li{flex-basis:50%;border-bottom:1px solid #e1e1e1;text-align:center;background-color:#f7f7f7}	
#sh_snb li:nth-child(odd){border-right:1px solid #e1e1e1}
#sh_snb li a{height:40px;padding:0;font-size:13px;line-height:40px;letter-spacing:-.5px}
#sh_snb li.snb_on{border:none;background-color:#046fd9}
#sh_snb li.snb_on a{color:#fff}
#sh_snb li.snb_on a:after{display:none}
}
/* 반응형 [e] */