@charset "utf-8";
#top_nav_wrap{margin:0 auto}
.h_bg{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
.h_bg.active{display:block !important}
#top_center{overflow:hidden;opacity:1;display:flex;align-items:center;justify-content:space-between;margin:0 auto;width:100%;max-width:1300px;height:110px;transition:height 0.4s ease, opacity 0.4s ease}
#top_center.hidden{padding:0 !important;height:0 !important;opacity:0;pointer-events:none}

.h_t_search_box{display:flex;align-items:center;height:100%;padding:0 20px;width:417px;height:50px;border:2px solid var(--primary);border-radius:50pt;box-sizing:border-box}
.h_t_search_box .h_s_Sel{height:100%}
.h_t_search_box .h_s_Sel1{width:80px}
.h_t_search_box .h_s_Sel2{width:71.5%;box-sizing:border-box}
.h_t_search_box .h_s_Sel select{width:100%;height:100%;border:none;background:#fff url("./h_t_select_arrow.png") no-repeat right center;font-family:var(--prefont);-webkit-appearance:none;-moz-appearance:none;outline:0}
.h_t_search_box .h_s_Sel1 select{color:var(--primary);font-weight:700;font-size:15px}
.h_t_search_box .h_s_Sel2 select{padding-left:20px;color:#a2a2a2;font-weight:500;font-size:14px}
.h_t_search_box .searchBtn{margin-left:10px;width:calc(100% - 352px);height:20px;border:none !important;background:transparent url("./h_t_search_icon.png") no-repeat center}

.h_t_phon .p_txt_box{display:flex;align-items:center;margin-bottom:10px}
.h_t_phon .p_txt_box > span{display:inline-block}
.h_t_phon .p_txt_box .p_icon{margin-right:10px;width:27px;height:27px;border-radius:50%;background:#ebeef3 url("./h_t_phon.png") no-repeat center}
.h_t_phon .p_txt_box .p_txt{color:#888;font-weight:700;font-size:16px}
.h_t_phon .phon_num{color:#111;font-weight:700;font-size:30px}

/* 대분류  */
#b_menu{position:relative;z-index:10;background:var(--primary)}
#b_menu:after{position:absolute;top:65px;left:0;content:"";display:none;width:100%;height:200px;background:#fff}
#b_menu.active::after{display:block !important}

#bot_center{position:relative;width:1300px;margin:0px auto}
#top_nav{display:flex;align-items:center;width:1300px;margin:0 auto}
#top_nav > li{position:relative;padding:0 30px}
#top_nav > li:first-child{padding-left:0}
#top_nav > li > a{display:block;line-height:65px;color:#fff;font-weight:700;font-size:17px}

/* 소분류 */
#top_nav > li > ul{display:block;position:absolute;width:100%;z-index:1002}
#top_nav > li > ul > li{padding:5px 0;font-family:notokr-regular}
#top_nav > li > ul > li a{font-size:14px;color:#222;font-weight:700;font-size:16px;transition:all .2s}

.sub_ul_wrap{position:relative;display:none;width:100%;z-index:9}
.sub_ul_wrap.active{display:flex !important}
.sub_ul_wrap > ul{margin-right:54px;padding-left:10px;text-align:left;height:200px;box-sizing:border-box}
.sub_ul_wrap > ul > li{width:100%}
.sub_ul_wrap > ul > li > a{display:inline-block;padding:15px 0 10px;font-size:16px;font-weight:600} 
.sub_ul_wrap > ul > li > ul > li{display:block;margin:10px 0}
.sub_ul_wrap > ul > li > ul > li a{font-size:15px;color:#888;font-weight:400;position:relative;line-height:20px}

.sub_right{display:flex;flex-grow:1}
.sub_right > li{text-align:center}
.sub_right > li:nth-child(n+2){padding-left:10px}
.sub_right > li:last-child{border-right:none}

.h_m_btn{position:absolute;top:25px;right:0;text-align:center;border:none;background:transparent;width:25px;height:16px;outline:0}
.h_m_btn .line{position:absolute;top:50%;transform:translateY(-50%);display:block;width:23px;height:2px;background-color:#fff;transition:all .5s}
.h_m_btn .line1{top:0;transform:initial}
.h_m_btn .line3{bottom:0;transform:initial;top:initial}
.h_m_btn.active .line1{transform:rotate(45deg);top:50%}
.h_m_btn.active .line2{opacity:0}
.h_m_btn.active .line3{transform:rotate(-45deg);bottom:auto;top:50%}

/* 반응형 메뉴 [s] */
#topmenuM{display:none;position:relative;width:100%;padding:12px 15px;line-height:1.8;background-color:#fff;font-family:'notokr-regular'}
#topmenuM .write a{display:flex;align-items:center;justify-content:center;margin-left:40px;gap:12px;width:164px;height:50px;font-size:15px;font-weight:600;color:#fff;background:#111;border-radius:50px;transition:all 0.2s}
#topmenuM .write a svg{width:16px}

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

/* 상단 버튼 및 오픈메뉴 */
#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:var(--primary)}
#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}

/* 반응형 [s] */
@media (max-width:1400px){
#top_center{max-width:initial;width:95%}
#bot_center{width:95%}
#top_nav > li{padding:0 25px}
.sub_ul_wrap > ul{padding-left:0;margin-right:57px}
.sub_ul_wrap > ul > li{width:auto}
.sub_ul_wrap > .sub_right{margin-right:0}
.sub_ul_wrap > .sub_right > li{margin-right:57px}
.sub_ul_wrap > .sub_right > li:last-child{margin-right:0}
}
@media (max-width:1200px){
#b_menu{display:none}
#top_center.hidden{height:110px!important;opacity:1}
.h_t_search_box{display:none}
.h_t_phon{display:none}
#top_nav_wrap{display:none}
#topmenuM{display:block;padding:0;border-bottom:1px solid #e1e1e1}
#topmenuM .topmenuM_center{position:relative;display:flex;justify-content:space-between;align-items:center;width:95%;height:80px;margin:0 auto}
#topmenuM .write{display:none}
#m_navBtn{top:50%;transform:translateY(-50%);right:0;height:19px}
#m_navBtn.on{top:18px;right:15px;transform:none}
#m_logo img{width:160px;max-height:initial}
}
@media (max-width:768px){
#topmenuM .topmenuM_center{width:100%;padding:0 20px;height:70px}
#m_navBtn{right:20px}
#m_logo img{width:140px}
}
@media (max-width:480px){
#topmenuM .topmenuM_center{height:60px}
#m_logo img{width:120px}
}
/* 반응형 [e] */