@charset "utf-8";







body.scrolled #header{box-shadow:5px 5px 10px rgba(0,0,0,0.07);}
#header{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:8500; transition:0.3s;}
#header.on{}
#header>.in{position:relative;}
#header .top{padding:5px 15px; border-bottom:1px solid #eee; position:relative;}
#header h1{box-sizing:border-box; padding-left:10px; line-height:1.1;}
#header h1 a{font-size:16px; font-weight:normal;}

#header .mo-toggle{position:absolute; width:14px; height:14px; background:#f9f9f9; top:50%; right:15px; transform:translateY(-50%);}
#header .mo-toggle i{font-size:20px;}
#header .mo-toggle span{position:absolute; background:#333; width:6px; height:6px;}
#header .mo-toggle span:nth-child(1){top:0; left:0;}
#header .mo-toggle span:nth-child(2){top:0; right:0;}
#header .mo-toggle span:nth-child(3){bottom:0; left:0;}
#header .mo-toggle span:nth-child(4){bottom:0; right:0;}

#header .bottom{position:relative;}
#header .bottom:after{position:absolute; bottom:0; left:0; width:100%; height:1px; background:#eee; content:""; z-index:10;}
#header .bottom .text{display:none;}

#header ul{}
#header ul li{}
#header ul li a{}
#header ul li.on{}
#header ul li.on a{}
#header ul li.on a:after{}

#header .gnb{white-space:nowrap; overflow-x:auto;}
#header .gnb:after{}
#header .gnb::-webkit-scrollbar{width:9px; height:9px; opacity:0; display:none;}
#header .gnb::-webkit-scrollbar-button{display:none; height:9px; background:#999;}
#header .gnb::-webkit-scrollbar-thumb{width:9px; height:9px; background:#999; border-radius:5px;}
#header .gnb::-webkit-scrollbar-track{background:#fff;}
#header .gnb ul{padding:0 10px;}
#header .gnb br{display:none;}
#header .gnb ul li{position:relative; margin-right:15px; height:40px; line-height:40px;}
#header .gnb ul li a{display:block; font-size:15px;}
#header .gnb ul li a:after{position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--c1); content:""; z-index:11; opacity:0; transition:0.2s;}
#header .gnb ul li.on{}
#header .gnb ul li.on a{color:var(--c1)}
#header .gnb ul li.on a:after{opacity:1;}
#header .gnb ul li a:hover:after{opacity:0.4;}




@media all and (min-width:768px){

  body.scrolled #header{box-shadow:none;}
  #header{width:250px; height:100%;  padding:20px 30px;   background:#fff;}
  #header>.in{height:100%;}
  #header .top{border-bottom:0; padding:0;}
  #header h1{padding:0; margin-bottom:120px;}
  #header h1 a{font-size:26px; transition:0.3s;}
  #header h1 a:hover{color:#666;}
  #header .mo-toggle{display:none;}
  #header .bottom{position:relative; top:50%; transform:translateY(-50%);}
  #header .bottom:after{display:none;}
  #header .gnb{white-space:normal; overflow:initial;  }
  #header .gnb ul{padding:0;}
  #header .gnb ul li{display:block; margin:0; height:auto; line-height:1.4;}
  #header .gnb ul li.line{margin-left:0;}
  #header .gnb ul li.line:after{display:none;}
  #header .gnb ul li a{display:inline-block; font-size:26px;}
  #header .gnb ul li a{position:relative; ;}
  #header .gnb ul li a:after{position:absolute; bottom:0; left:0; width:0; height:2px;  content: "";   transition: 0.2s;}
  #header .gnb ul li a:hover:after{opacity:1; width:100%;}
  #header .gnb ul li.on{_transform:scale(1.1);}
  #header .gnb ul li.on a{}


}



@media all and (min-height:1100px){

  #header{ }

}































/**/