@charset "utf-8";







#header{position:relative; box-sizing:border-box; padding:15px 0 0 0; background:#111; transition:0.3s; z-index:12;}
#header>.in{}
#header h1{font-size:25px; font-weight:100; margin-bottom:20px; padding-left:15px; font-family: "Cherry Bomb One", cursive;}
#header h1 a{color:#fff; }
#header h1 span{}
#header h1 img{width:100px; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#header .gnb{position:relative;}
#header .gnb ul{display:flex; overflow-x:auto; overflow-y:hidden; white-space:nowrap; box-sizing:border-box; ;}
#header .gnb ul li.d1{ font-size:14px; border-radius:5px; font-weight:300; cursor:pointer; transition:0.3s;}
#header .gnb ul li.d1 span{position:relative; display:flex; align-items:center;; width:100%; height:45px; padding:0 15px; color:#fff;  z-index:10;}
#header .gnb ul li.d1 span:before{display:none;}
#header .gnb ul li.d1 span:after{position:absolute; bottom:-22px; left:50%; width:20px; height:20px; border-top-left-radius:5px; transform:rotate(45deg) translateX(-50%); background:#fff; opacity:0; content:""; transition:0.1s;}
#header .gnb ul li.d1 span i{margin-right:5px;}

#header .gnb ul li.d1.on span{z-index:11;}
#header .gnb ul li.d1.on span:before{ content:"\e9c1";}
#header .gnb ul li.d1.on span:after{opacity:1;}
#header .gnb ul li.d1 .depth02{display:none; position:absolute;  top:60px; left:0; width:100%;}
#header .gnb ul li.d1 .depth02 ul{}
#header .gnb ul li.d1 .depth02 ul li{margin-right:5px;}
#header .gnb ul li.d1 .depth02 ul li a{display:flex; height:35px; align-items:center; color:var(--c1);}
#header .gnb ul li.d1 .depth02 ul li.on p{}

#header .gnb ul li.d1.on .depth02{display:block;}
#header .gnb ul li.d1 .depth02 li.on{}


#header .gnb ul::-webkit-scrollbar {background: #faf5ff; width: 16px; display:none;}
#header .gnb ul::-webkit-scrollbar-thumb {background: #4C4C4C; border-radius: 50px;border: 4px solid #faf5ff;}
#header .gnb ul::-webkit-scrollbar-thumb:hover {background: #B4B4B4;}




@media all and (max-width:767px){
  #header .gnb ul{}
  #header .gnb ul li.d1{margin-right:2px;}
  #header .gnb ul li.d1 + .d1{}
  #header .gnb ul li.d1 span{ }
  #header .gnb ul li.d1.on span{}
  #header .gnb ul li.d1 .depth02 ul li a{border-radius:5px; padding:0 10px; background:#f4f4f4; border-radius:3px;}
  #header .gnb ul li.d1 .depth02 ul li.on a{background:var(--c1); color:#fff;}
}



@media all and (min-width:768px){
  #header{width:250px;  height:100vh; position:sticky; top:0;  text-align:center; }
  #header>.in{height:100%; padding:55px 0; box-sizing:border-box; overflow-y:auto;}
  #header h1{font-size:30px; margin:0 auto 80px auto;; height:50px; padding:0; }
  #header h1 a{}
  #header .gnb{ text-align:left; overflow-y:auto; overflow-x:hidden;}
  #header .gnb ul{display:block; overflow:initial; padding-left:15px;}
  #header .gnb ul li.d1{margin-right:0; font-size:17px; text-align:left;}
  #header .gnb ul li.d1 span{color:#fff; border-radius:0; border:0; padding:0 15px;  height:50px;}
  #header .gnb ul li.d1 span:before{display:inline; position:absolute; top:50%; right:0; transform:translateY(-50%);  width:14px; height:14px; line-height:14px;  font-size:10px;  margin-right:30px;  color:#fff; border-radius:50%; text-align:center;  font-family:'xeicon'; content:"\e9c5";}
  #header .gnb ul li.d1 span:after{top:0; right:-5px; bottom:auto; left:auto; transform:none; width:5px; height:100%; border-bottom-left-radius:15px; border-top-left-radius:15px; transition:0.2s;}
  #header .gnb ul li.d1 span i{margin-right:20px;}
  #header .gnb ul li.d1:hover span:after{opacity:1; right:0;}
  #header .gnb ul li.d1 a{color:#fff;}
  #header .gnb ul li.d1.on span{ }
  #header .gnb ul li.d1.on span:before{}
  #header .gnb ul li.d1.on span:after{opacity:1; right:0;}
  #header .gnb ul li.d1 .depth02{position:static; box-sizing:border-box; padding-left:40px; margin-bottom:15px;}
  #header .gnb ul li.d1 .depth02 ul li{position:relative;}
  #header .gnb ul li.d1 .depth02 ul li:after{position:absolute; top:0; left:-20px; width:1px; height:100%; background:#fff; opacity:0.3; content:""; transition:0.3s;}
  #header .gnb ul li.d1 .depth02 ul li:hover:after{opacity:0.8;}
  #header .gnb ul li.d1 .depth02 ul li.on:after{opacity:1;}
  #header .gnb ul li.d1 .depth02 ul li a{}
  #header .gnb ul li.d1 .depth02 ul li a{color:#fff; opacity:0.8;}
  #header .gnb ul li.d1 .depth02 ul li:hover a{opacity:1;}
  #header .gnb ul li.d1 .depth02 ul li.on a{opacity:1;}
}

@media all and (min-width:1100px){
  #header{width:300px;}
}




































/**/