#header {  background-color:rgba(0,0,0,0.5); z-index:100; position:relative; }
#header * { transition-duration:0.3s; }
#header .wrap { position:relative; overflow:hidden; }
#header h1 { font-size:0; float:left; }
#header h1 a { display:inline-block; font-size:0; vertical-align:middle; padding:16px 0 17px; }
#header h1 a img { height:47px !important; }
#header strong { font-size:28px; font-weight:700; color:#fff; font-family:'NanumSquare'; display:inline-block; line-height:80px; float:left; margin:0 0 0 15px; }
#header nav { position:absolute; top:50%; right:-25px; transform:translate(0,-50%); width:100%; }
#header nav ul { text-align:right;}
#header nav ul li { display:inline-block; color:#fff; }
#header nav ul li a { display:inline-block; text-align:center; padding:0 25px; font-size:22px; color:#fff; line-height:26px; font-family:'NanumSquare'; }


#header .mobile_bg { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#302608; display:none; z-index:200; opacity:0.985; }
#header .mobile_bg a { display:block; width:50px; height:50px; border-radius:50%; border:2px solid #fff; position:absolute; top:20px; right:20px; z-index:201; }
#header .mobile_bg a:after { display:block; content:''; width:25px; height:2px; background-color:#fff; transform:rotate(45deg); position:absolute; top:24px; right:12px; }
#header .mobile_bg a:before { display:block; content:''; width:25px; height:2px; background-color:#fff; transform:rotate(-45deg); position:absolute; top:24px; right:12px; }
#header .mobile_berger { position:absolute; float:right; width:33px; height:37px; cursor:pointer; top:50%; transform:translate(0,-50%); right:20px; display:none; }
#header .mobile_berger span { display:block; width:32px; height:2px; background-color:#fff; margin:8px auto; position:absolute; left:50%; transform:translate(-50%,0); }
#header .mobile_berger span:nth-child(1) { top:0; transform:none; right:0; width:30px; left:auto; }
#header .mobile_berger span:nth-child(2) { top:9px; right:0; left:auto; transform:none; width:26px; }
#header .mobile_berger span:nth-child(3) { top:18px; }




@media screen and (max-width:1280px) {
  #header nav { right:25px; }
  #header nav ul li a { font-size:21px; padding:0 20px; }

  #header strong { font-size:21px; }
}

@media screen and (max-width:1125px) {
  #header strong { display:none; }
}

@media screen and (max-width:1024px) {
  #header h1 a img { height:36px !important; }
  #header nav { right:13px; }
  #header nav ul li a { font-size:17px; padding:0 17px; }
}

@media screen and (max-width:768px) {
  #header { margin:0; }
  #header nav { position:fixed; top:50%; right:0; transform:translate(0,-50%); display:none; z-index:201; width:100%; height:50%; }
  #header.mobile nav { display:block; }
  #header.mobile .mobile_bg { display:block; animation:mobile_bg_ani 0.4s 1; }
  #header nav ul { top:50%; left:0; width:100%; transform:translate(0,-50%); text-align:center; position:absolute; }
  #header nav ul li { width:100%; height:60px; overflow:hidden; position:relative; }
  #header nav ul li a { padding:15px 0; font-size:26px; position:absolute; bottom:-100%; left:0; width:100%; text-align:center; transition-duration:1s; }
  #header.mobile nav ul li a { bottom:0; animation:nav_ani 0.5s 1; }
  #header nav ul li a br { display:none; }

  @keyframes mobile_bg_ani {
    0% { opacity:0; }
    100% { opacity:1; }
  }

  @keyframes nav_ani {
    0% { bottom:0; transform:rotateY(-180deg); }
    100% { bottom:0; transform:rotateY(0deg); }
  }

  #header .mobile_berger { display:block; }
}