@charset "utf-8";

/******************
  사이드메뉴
*******************/
#gnb_bg {
  position:absolute; width:100%; height:100%; background:#000; display:none;
  -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); z-index:101;
}
#gnb {
  position:fixed; width:310px; height:100%; top:0; left:-310px; overflow:hidden; z-index:102;
  background-color:#f2f2f2; display:block !important;
}
#gnb .gnb-logo { position:relative; height:60px; background-color:#fff; border-bottom:1px solid #E5E5E5; } 
#gnb .gnb-logo .logo { position:relative; height:50px; width:80%; display:inline-block; }
#gnb .gnb-logo .logo img { position:relative;}
#gnb .gnb-close {
  position:absolute; display:block; width:16px; height:16px;
  border:0px solid red; cursor:pointer; top:20px; right:20px;
}
#gnb .gnb-menu { position:relative; height:100%; background-color:#fff; overflow:hidden; }
#gnb .gnb-menu .wrap-gnb01, #gnb .gnb-menu .wrap-gnb02 {
  position:relative; float:left; height:100%;
}
#gnb .gnb-menu .wrap-gnb01 { width:100px; background-color:purple;}
#gnb .gnb-menu .wrap-gnb02 { width:210px; background-color:#fff; }
#gnb ul { padding:0; margin:0; list-style:none; }
#gnb ul li { padding:0; margin:0; }
#gnb .gnb01 { position:relative; width:100%; height:100%; background-color:#F7F7F7; }
#gnb .gnb01 ul, #gnb .gnb01 li { width:100%; }
#gnb .gnb01 li {
  color:#404040; width:100%; padding:10px; text-align:center; cursor:pointer;
  border-bottom:1px solid #E5E5E5;
}
#gnb .gnb01 li.on { font-weight:600; color:#d9d9da; background-color:#3c3c3c; }


#gnb .wrap-gnb02 {}
#gnb .gnb02 { border-left:1px solid #E5E5E5; overflow-y: scroll; }
#gnb .gnb02 .sm { position:relative; width:100%; padding:20px 15px 0; }
#gnb .gnb02 .title { font-size:18px; font-weight:600; color:#333; padding:10px 5px; border-bottom:1px solid #595757; }
#gnb .gnb02 li { border-bottom:1px solid #E5E5E5; }
#gnb .gnb02 li a { display:inline-block; color:#747474; width:100%; padding:7px 10px; }
#gnb .gnb02 li a:hover, #gnb .gnb01 li a:hover { text-decoration: none}