@charset "utf-8";
/* 
font-size
px to rem

55px 3.436rem
40px 2.5rem
35px 2.186rem
30px 1.875rem
28px 1.75rem
24px 1.5rem
22px 1.375rem
20px 1.25rem
19px 1.188rem
18px 1.125rem
17px 1.063rem
16px 1rem
15px 0.938rem
14px 0.875rem
13px 0.813rem
12px 0.75rem

*/


/* header - top */
header{width: 100%;font-family: 'ibm-plex-sans-kr', "sans-serif";box-shadow: 2px 2px 5px rgba(0,0,0,.08);}
header .top_wrap, header .bottom_wrap{height: 100%;}
header .top_wrap{overflow: hidden;width: 100%;height: 50px;font-size: 0.875em;font-weight: 500; border-bottom: 1px solid #dadee7}
header .top_wrap .top{display: inline-block;}
header .top_wrap .user{display: inline-block;width:auto;height: 100%;}
header .top_wrap .user li{float:left;margin-right: 15px;}
header .top_wrap .user li::after{content: url(..//image/round_icon.png);display: inline-block;margin-left: 15px;}
header .top_wrap .user li:last-of-type::after {display: none;}
header .top_wrap .user li a{line-height: 50px;color: #999;}
header .top_wrap .user li a img{display: inline-block;vertical-align: middle;margin-right: 5px;}

header .top_wrap .header .top_wrap .btn_allmenu_icon{display: inline-block;vertical-align: top;width: 50px;height: 50px;background-position: 50% 50%;background-repeat: no-repeat;}
header .top_wrap .user, header .top_wrap .btn_allmenu_icon{border-right:1px solid rgba(255,255,255,0.2)}

/* header - bottom /gnb */
header .bottom_wrap{width: 100%; height: 90px;border-bottom: 1px solid #dadee7;background: #fff;}
header .bottom_wrap .btn{float:left;vertical-align: top;width: 40px;height: 62px;background-position: 50% 50%;background-repeat: no-repeat;}
header .bottom_wrap h1{max-width:220px;float: left;margin-right: 50px;}
header .bottom_wrap h1 .header_logo{display: block;}
header .bottom_wrap h1 .header_logo img{display: block;max-width:220px;margin-top: 15px;}
header .bottom_wrap nav{width: calc(100% - 270px);max-width:900px;float: right;}
header .bottom_wrap nav .gnb{width: 100%;float: right;}
header .bottom_wrap .gnb > li{width:13%;min-width:60px; white-space:nowrap;  float: right; margin-left: 2%;}
header .bottom_wrap .gnb > li > a{position: relative;display: block;width: auto;text-align: left;line-height: 88px;padding: 0 10px;font-size: 1.375rem; font-weight: 600; border-bottom:2px solid transparent}
header .bottom_wrap .mem_h1 {display: none;}
 

/* submenu */
header .bottom_wrap .gnb .lnb{display: block;position: absolute;z-index: 999999;padding: 30px 0;}
header .bottom_wrap .gnb .lnb > li{display: block; min-width:117px;}
header .bottom_wrap .gnb .lnb > li > a{display: block;text-align: left;font-size: 0.938rem;line-height: 20px;margin-bottom: 14px;color:#8a8989;padding:0 10px;}
header .lnb_bg_wrap{position: absolute;z-index: 999998;top:140px;right: 0; left: 0;width: 100%;background:#fff;height: 390px;box-shadow: 0px 15px 27px rgba(0,0,0,0.04); border-bottom: 1px solid #d9e1e8;}

/* lnb close */
header .bottom_wrap .gnb .lnb{display: none;}

/* mob_topmenu */
.mob_full_menu_wrap {display: none;}
.lnb_bg_wrap{display: none;}




/******************************************* media */
@media screen and (max-width: 800px) {

/* header - top */
header {height: 75px;z-index: 999997;position: fixed;top:0;background-color: #fff;border-bottom: 1px solid #ddd;    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px;}
header  .top_wrap{position: absolute; top: 25px ; right: 20px; border: none;}
header  .bottom_wrap{position: absolute;top: 6px ;left: 15px;}

header .top_wrap{width: auto;}
header .top_wrap.templete_bg_color{background: transparent !important;}
header .top_wrap .top{display: inline-block;}
header .top_wrap .user{display: none;}
header .top_wrap .btn{display: inline-block;vertical-align: top;width: 24px;height: 27px;background-position: 50% 50%;background-repeat: no-repeat; background-size: contain;}

header .btn_login_icon{background-image: url(..//image/icon_login_mob.png);}
header .btn_allmenu_icon{background-image: url(..//image/icon_menu_mob.png); margin-left: 12px;}
header .top_wrap .user, header .top_wrap .btn_allmenu_icon{border-right:0}

/* header - bottom /gnb */
header .bottom_wrap{width: auto; height: 50px;border-bottom:0;background: transparent;}
header .bottom_wrap h1{width:150px;float: left;margin-right: 0px;}
header .bottom_wrap h1 .header_logo{display: block;}
header .bottom_wrap h1 .header_logo img{width:100%;max-width:115px;margin-top: 15px;}
header .bottom_wrap nav{display: none;} 
header .bottom_wrap nav .gnb{width: 100%;float: right;}
header .bottom_wrap .gnb > li{width:18%;min-width:125px;float: left;margin-left: 2%;}
header .bottom_wrap .gnb > li > a{position: relative;display: block;width: auto;text-align: left;line-height: 88px;padding: 0 10px;font-size: 1.25rem;border-bottom:2px solid transparent}

/* submenu */
header .bottom_wrap .gnb .lnb{display: block;position: absolute;z-index: 999999;padding: 30px 0;}
header .bottom_wrap .gnb .lnb > li{display: block;}
header .bottom_wrap .gnb .lnb > li > a{display: block;text-align: left;font-size: 0.938rem;line-height: 20px;margin-bottom: 14px;color: #666;padding:0 10px}
header .lnb_bg_wrap{position: absolute;z-index: 999998;top:140px;right: 0; left: 0;width: 100%;background:#fff;height: 290px;box-shadow: 10px 2px 27px rgba(0,0,0,0.08);}
header .lnb_bg_wrap .lnb_bg_box{position: relative;width:30%;height: 100%;background-position: top 0px left 0px;background-repeat: no-repeat;}
header .lnb_bg_wrap .lnb_bg_box .lnb_bg_con{position: absolute;right:0;width: 270px;height: 100%;padding-top: 50px;}
header .lnb_bg_wrap .lnb_bg_box .lnb_bg_con:nth-of-type(1){z-index: 1;}
header .lnb_bg_wrap .lnb_bg_box .lnb_bg_con p{text-align: center;font-size: 1.875rem;}
header .lnb_bg_wrap .lnb_bg_box .lnb_bg_con img{position:absolute;bottom:20px; right:50px;}

/* lnb close */
header .bottom_wrap .gnb .lnb{display: none;}
.lnb_bg_wrap{display: none;}

/* mob full menu */
.mob_full_menu_wrap {display:none; position: fixed; right: 0px; top: 0; z-index: 9999999; width: 68vw; height: 100%; background: #fff; box-sizing: border-box; right: -50%;}
.mob_full_menu_wrap .user { background-color: #163381; height: 50px; line-height: 45px; color: #fff; padding: 0 15px;}
.mob_full_menu_wrap .user a img {width: 14px; margin-right: 10px; vertical-align: middle;}
.mob_full_menu_wrap .user a span {font-size: 0.813rem; }
.mob_full_menu_wrap .user a.line::after{content: ''; display: inline-block; width: 1px; height: 15px; background-color:#fff; opacity: 0.2; margin: 0 9px 0 14px; vertical-align: middle;}
.mob_full_menu_wrap .user .btn_mob_close {float: right;}
.mob_full_menu_wrap .user .btn_mob_close img {width: 15px; height: 15px; margin-right: 0;}

.mob_full_menu_wrap .menu_1dep {height:auto;border-bottom: 1px solid #e7e8ec; color: #333;}
.mob_full_menu_wrap  ul ul {display: none;}
.mob_full_menu_wrap .menu_1dep .title { display: block;  padding: 15px; height:auto; font-size: 1.125rem; background-image: url(..//image/ico_arr_off.png); background-position: top 50% right 15px ; background-repeat: no-repeat; background-size: 11px;}
.mob_full_menu_wrap .menu_1dep.on .title {background-color: #7ba3c4; color: #fff;  background-image: url(..//image/ico_arr_on.png);}
.mob_full_menu_wrap .sub_menu{ background-color: #f5f7fb; color: #333; padding: 15px 0;}
.mob_full_menu_wrap .sub_menu li {line-height: 2.1; font-size: 1.063rem; padding: 0 17px; font-weight: 400; }
/*.mob_full_menu_wrap .menu {display:inline-block; float: right; padding:15px 0 14px 0;}*/
.mob_dim {display: none;   position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(5, 4, 14, 0.75); z-index: 9999998;}

}