@charset "utf-8";

#top_nav_wrap{position:relative;width:100%;padding:0 10%;display:flex;justify-content:space-between;align-items:center;height:100px;z-index:99}
#r_menu{display:flex}

/* 대분류  */
#top_nav{display:flex;align-items:center;position:absolute;left:18%;top:50%;transform:translateY(-50%);font-family:var(--k-font)}
#top_nav > li{position:relative}
#top_nav > li > a{display:block;padding:0 30px;letter-spacing:0;font-size:17px;font-weight:700;line-height:100px;color:#111;transition:all .2s}

/* 소분류 */
#top_nav > li > ul{display:none;position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:1002;min-width:150px;width:auto;padding:15px 10px 15px;background-color:#000;text-align:center}
#top_nav > li > ul > li{padding:5px 0}
#top_nav > li > ul > li a{font-size:15px;color:#ddd;transition:all .2s}
#top_nav > li > ul > li a:hover{color:#fff}

.top_tel{font-family:var(--k-font)}
.top_tel .tel_list{display:flex;font-size:15px}
.top_tel .tel_list li{display:flex;align-items:center;gap:5px;color:#666}
.top_tel .tel_list li+li{margin-left:10px;padding-left:10px;border-left:1px solid #e1e1e1}
.top_tel .tel_list li i{margin-right:5px;color:var(--primary)}
.top_tel .tel_list li p{font-weight:700;color:#111}
.top_tel .btn_list{display:flex;justify-content:right;gap:10px;margin-top:18px}
.top_tel .btn_list li a{padding:8px 25px;border-radius:50px;font-size:16px;color:#fff;background-color:#333}
.top_tel .btn_list li:nth-child(2) a{background-color:var(--primary)}


/*#top_nav_wrap{position:relative;min-width:1070px;width:100%;height:72px;line-height:1.5;background:rgba(255,255,255,.7)}*/
.sub_logo{position:absolute;top:30px;left:40px}

/*메인 탑메뉴 스타일*/
#main_hd_wrapper{position:fixed;left:-52%;width:353px;height:100%;background:#26272b;z-index:200}
#main_top, #main_top *, #main_top:before, #main_top:after{box-sizing:border-box}
#main_top > ul{margin-top:104px}
#main_top li.bmenu:hover{background-color:rgb(22, 22, 25)}
#main_top li.bmenu > a{display:block;position:relative;width:100%;height:50px;padding-left:30px;font-size:17px;line-height:50px;color:#b1b1b1;letter-spacing:-0.3px;transition:all .2s}
#main_top li.bmenu > a:after{display:block;position:absolute;top:0;right:28px;content:"\f105";font-size:20px;font-weight:normal;color:#666666;font-family:FontAwesome;transform:rotate(90deg)}
#main_top li.bmenu > a.active:after{transform:rotate(-90deg)}
#main_top li.bmenu > ul.smenu{display:none;padding-bottom:10px}
#main_top li.bmenu > ul.smenu li a{display:block;width:100%;padding-left:30px;font-size:15px;line-height:32px;color:#9d9d9d;transition:all .2s}
#main_top li.bmenu > ul.smenu li a:hover{color:#fff}
#sh_hd_wrapper .top_contact{padding:30px}
#sh_hd_wrapper .top_contact li{position:relative;padding-left:18px;margin-bottom:7px;font-size:14px;color:#919193}
#sh_hd_wrapper .top_contact li.tel:before{display:block;position:absolute;top:4px;left:0;content:"\f095";color:#b8b8bb;font-family:FontAwesome}
#sh_hd_wrapper .top_contact li.address:before{display:block;position:absolute;top:2px;left:0;content:"\f041";color:#b8b8bb;font-family:FontAwesome}
#sh_hd_wrapper .top_contact li.email:before{display:block;position:absolute;top:4px;left:0;content:"\f0e0";font-size:11px;color:#b8b8bb;font-family:FontAwesome}

/*서브 탑메뉴 스타일 */
#sub_hd_wrapper{position:relative;width:100%;height:81px;background:rgba(255,255,255,.9);}
#sub_top, #sub_top *{box-sizing:border-box}
#sub_top .top_nav{position:absolute;top:30px;right:30px;visibility:visible}
#sub_top .top_nav:after{display:block;content:"";visibility:hidden;clear:both}
#sub_top .top_nav > li{float:left;position:relative;padding:0 20px 28px}
#sub_top .top_nav > li > a{display:block;font-size:16px;letter-spacing:-0.3px;color:#777;transition:all .2s;font-family:'notokr-medium'}
#sub_top .top_nav > li > ul{display:none;position:absolute;top:70%;left:0;z-index:1002;min-width:145px;width:auto;border:1px solid #e7e7e7;border-radius:2px;background-color:#fff}
#sub_top .top_nav > li > ul > li{float:none;padding:10px 20px;transition:all .2s}
#sub_top .top_nav > li > ul > li:hover{background-color:#f7f7f7}
#sub_top .top_nav > li > ul > li a{position:relative;font-size:13px;color:#666;transition:all .2s}
#sub_top .top_nav > li > ul > li a:hover{color:#222}

/* 메뉴 전체보기 버튼 ----------------------------------------- */
#allmn_btn_wrap{position:absolute;top:0;left:0;width:100%;z-index:1002}
#allmn_btn_wrap, #allmn_btn_wrap *{box-sizing:border-box}
#allmn_btn{display:block;position:relative;width:100%;height:100px;cursor:pointer;background:url(/sh_img/hd/top_menu/open_allmn.png) center no-repeat;transition:all .1s}
#allmn_btn.active{z-index:200;background:url(/sh_img/hd/top_menu/close_allmn.png) center no-repeat}
#allmn_btn .cross_btn{position:relative}
#allmn_btn.active span{background-color:transparent}
#allmn_btn.active span:before{width:2px;height:16px;border-radius:0;-webkit-transform:translateY(10px) translateX(0) rotate(45deg);-ms-transform:translateY(10px) translateX(0) rotate(45deg);transform:translateY(10px) translateX(0) rotate(45deg)}
#allmn_btn.active span:after{width:2px;height:16px;border-radius:0;-webkit-transform:translateY(-10px) translateX(0) rotate(-45deg);-ms-transform:translateY(-10px) translateX(0) rotate(-45deg);transform:translateY(-10px) translateX(0) rotate(-45deg)}

/* 좌측 메뉴 */
#r_qm {position:absolute;top:100px;width:100%}
#r_qm ul li {width:100%;height:100px;border-bottom:1px solid #e4e4e4}
#r_qm ul li:first-child {border-top:1px solid #e4e4e4}
#r_qm ul li.sms_link {background:url(/sh_img/hd/top_menu/gnb_icon01.png) no-repeat center 35%}
#r_qm ul li.sms_link_02 {background:url(/sh_img/hd/top_menu/gnb_icon02.png) no-repeat center 35%}
#r_qm ul li.sms_link_03 {background:url(/sh_img/hd/top_menu/gnb_icon03.png) no-repeat center 35%}
#r_qm ul li.sms_link_04 {background:url(/sh_img/hd/top_menu/gnb_icon04.png) no-repeat center 35%}
#r_qm ul li>a {display:block;width:100%;height:100%;font-size:14px;letter-spacing:-0.3px;color:#808080;font-family:'notokr-regular';line-height:10;text-align:center}
#r_qm .quick_sms_wrap{display:none;position:absolute;left:115px;top:1px;z-index:1000}

/* 반응형 메뉴 [s] */
#topmenuM{display:none;position:relative;width:100%;padding:15px;line-height:1.8;background-color:#fff;font-family:'notokr-regular'}

/* 로고 */
#m_logo{position:relative}
#m_logo a{display:inline-block}
#m_logo img{max-height:40px}

/* 상단 버튼 및 오픈메뉴 */
#m_navBtn{position:absolute;top:18px;right:15px;z-index:5;width:30px;height:30px}
#m_navBtn span{display:block;position:relative;top:50%;transform:translateY(-50%);width:100%;height:2px}
#m_navBtn span:before, #m_navBtn span:after{display:block;content:"";position:absolute;top:-6px;width:30px;height:2px;background-color:#222;-webkit-transition:all .1s;transition:all .1s}
#m_navBtn span:after{top:6px;width:16px;right:0;background-color:#1573a2}
#m_navBtn.on{position:fixed}
#m_navBtn.on span:before{top:0;right:-4px;transform:rotate(45deg)}
#m_navBtn.on span:after{top:0;right:-4px;width:30px;transform:rotate(-45deg);background-color:#222}
#navWrap{display:none;position:fixed;left:0;top:0;z-index:4;width:100%;height:100%;background-color:rgba(0,0,0,.7)}
#navWrap .inner{overflow-y:scroll;opacity:0;position:fixed;right:-40px;top:0;z-index:6;min-width:300px;width:75%;height:100%;padding:60px 0;background-color:#fff;-webkit-transition:all .1s;transition:all .1s}
#navWrap.on .inner{opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s}
#navWrap .inner:before, #navWrap .inner:after{opacity:0;display:block;position:fixed;top:0;right:-40px;z-index:1;content:"";min-width:300px;width:70%;height:60px;background-color:#fff;-webkit-transition:all .1s;transition:all .1s}
#navWrap .inner:after{top:auto;bottom:0}
#navWrap.on .inner:before, #navWrap.on .inner:after{opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s}
#navWrap .inner .mo_hd_copy{position:fixed;right:0;bottom:15px;z-index:2;min-width:300px;width:70%;font-size:12px;text-align:center;color:#888}
#navWrap .user_tip{padding:10px 20px;background-color:#f5f5f5}
#navWrap .user_tip li{display:inline-block}
#navWrap .user_tip li+li{margin-left:10px}

/* 대분류 */
#topmenuM .m_lnb .m_bmenu{display:block;position:relative;width:100%;height:52px;padding:0 20px;border:none;border-bottom:1px solid #ddd;background:none;font-size:16px;line-height:52px;color:#222;text-align:left;font-family:'notokr-medium'}
#topmenuM .m_lnb .m_bmenu:after{float:right;content:"\f107";font-family:'fontawesome'}
#topmenuM .m_lnb .m_bmenu.on:after{content:"\f106"}

/* 소분류 */
#topmenuM .m_smenu{display:none;padding:15px 20px;border-bottom:1px solid #ddd;background-color:#f2f3f5}
#topmenuM .m_smenu li a{font-size:14px;color:#777}

@media (max-width:1530px){
#top_nav_wrap{padding:0 30px 0 147px}
#top_nav{left:295px}
#top_nav > li > a{padding:0 20px}
.top_tel{margin-top:-15px}
}
@media (max-width:1230px){
#top_nav_wrap{padding:0 20px 0 95px}
#top_logo img{height:55px}
#top_nav{left:215px}
#top_nav > li > a{font-size:16px}
.top_tel .tel_list{font-size:14px}
.top_tel .btn_list{gap:5px}
.top_tel .btn_list li a{padding:5px 15px;font-size:15px}
}
@media (max-width:1024px){
#topMenu{display:none}
#top_nav_wrap{display:none}
#topmenuM{display:block}	
}
/* 반응형 메뉴 [e] */