@charset "utf-8";

/*
 * File       : menu.css
 * SUMMARY:
 * 01) HEADER
 * 02) SLIDMENU
 */

/* ************************************** *
 * PC VER
 * ************************************** */

/* HEADER */
html{font-size:20px !important}
body{font-size:1rem !important; margin:0; padding:0}  
#header{overflow:hidden; width:100%; background:#fff; border-bottom:1px solid #ddd;}
#header .gnb{height:3rem; padding:0 0 0 10px; box-sizing:border-box; width:1024px; margin:0 auto; position:relative;}
#header .gnb a,#header .lnb a{color:#000}
#header .gnb h1{float:left; padding:0 0 0 0; height:100%;}
#header .gnb h1 a{display:block; width:150px; height:3rem; color:transparent}

#header .gnb > ul{float:right}
#header .gnb > ul{display:block; position:relative; top:56%; transform:translateY(-50%)}

#header .sub_topmenu{display:none;}


/* ************************************** *
 * TABLET PC VER
 * ************************************** */

@media (min-width:768px) and (max-width:1023px){ 
    html{font-size:18px !important}
    body{font-size:1rem !important; margin:0; padding:0}   
        
    #header .sub_topmenu{height:45px; line-height:45px; width:100%; margin:0 auto; padding:0 10px; position:relative; overflow:hidden; display:block}
    #header .sub_topmenu > a.nav_sub_link{display:inline-block; height: 100%; width:calc(100% - 158px)}
    #header .sub_topmenu > a.nav_sub_link .nav_sub_tit{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:600; color:#000; width: calc(100% - 30px);}
    #header .sub_topmenu > a.nav_sub_link > img{height:20px; display:inline-block; vertical-align:top; margin-right:2px; transform:translateY(60%)}        
    #header .sub_topmenu > ul{float:right}
    #header .sub_topmenu > ul > li{display:inline-block; vertical-align:top; position:relative; float:left;}
    #header .sub_topmenu > ul > li > a{display:block; padding:11px}
    #header .sub_topmenu > ul > li img{height:20px}       
}

/* ************************************** *
 * MOBILE VER
 * ************************************** */  
@media (min-width:0) and (max-width:767px){
    html{font-size:16px !important;}
    body{font-size:1rem !important; margin:0; padding:0}
    #header .gnb{height:3rem; padding:0 10px; width:100%; margin:0 auto; overflow:hidden; position:relative; box-sizing:border-box}
    #header .gnb h1{float:left; padding:0 0 0 0;}
    #header .gnb h1 a{width:100px; height:100%;}
        
    #header .sub_topmenu{height:45px; line-height:43px; width:100%; margin:0 auto; padding:0 10px; position:relative; overflow:hidden; display:block}
    #header .sub_topmenu > a.nav_sub_link{display:inline-block; height:100%; width:calc(100% - 50px)}
    #header .sub_topmenu > a.nav_sub_link .nav_sub_tit{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:600; color:#000; width: calc(100% - 30px);}
    #header .sub_topmenu > a.nav_sub_link > img{height:20px; display:inline-block; vertical-align:top; margin-right:2px; transform:translateY(60%)}    
    #header .sub_topmenu > ul{float:right}
    #header .sub_topmenu > ul > li{display:inline-block; vertical-align:top; position:relative; float:left;}
    #header .sub_topmenu > ul > li > a{display:block; padding:11px 6px}
    #header .sub_topmenu > ul > li img{height:20px}
}