/*Content CSS*/
#header_wrap {position: fixed; top:0; left:0; width:240px; height: 100vh; z-index:57; background: none; transition: all 0.3s;
background:transparent;  }
#header {width: 100%; height: 100%; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; position: relative;}
#header #logo {width: 100%;  background: #fff; border-right: 1px solid #ddd; padding: 20px 0;}
#header #logo > a {width: 100%; display: flex; align-items: center; justify-content: center; }
#header #logo ul {display: flex; justify-content: space-between; width: 135px; margin:15px auto 0;}
#header #logo ul li {flex:1;}
#header #logo ul li:first-child {margin-right: 5px;}
#header #logo ul a {width: 100%; padding: 5px 0; display: flex; justify-content: center; align-items: center; background: #445370; transition:all .3s;
font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 1);}
#header #logo ul a:hover {background-color:#000; }
#header #logo ul a.active {background-color: #507242; }


#top_nav .gnb { list-style:none; height:100%; margin-top: 40px; }
#top_nav .gnb > li {display: block; vertical-align:middle; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; position:relative; line-height: 1; }
#top_nav .gnb > li + li {margin-top: 28px; }
#top_nav .gnb > li > a {display: block; width:100%; font-size: 16px; font-weight:400; text-decoration:none;  transition: all 0.3s; color:rgba(255, 255, 255, 0.8);
 position: relative; padding:10px 0 10px 30px;}
#top_nav .gnb > li > a::after{ content: ''; display: block; width: 0; height: 1px; background: #050d00; position: absolute; right:0; top:50%; transform:translateY(-50%); transition: all .3s ease;}
#top_nav .gnb > li > a span {position:relative; }
#top_nav .gnb > li > a span::after {content: ''; display: block; position: absolute; right: -20px; top:4px ; width: 11px; height: 12px; transition: opacity .3s;
background:url("../img/gnb_arrow.png") 50% 50% no-repeat; opacity: 0;}
#top_nav .gnb > li > a:hover {color: #fff; }
#top_nav .gnb > li.active a::after{ width: 20px;}
#top_nav .gnb > li.active a {color:#fff;}
#top_nav .gnb > li.active a span::after {opacity: 1; }

/* #top_nav .gnb > li:hover .snb {display: block;} */


#top_nav .gnb .snb {list-style:none; display:none;}
#top_nav .gnb .snb,.device-md #top_nav .gnb .snb{display: none; position: absolute; left: 240px; top:10px; border-top: 0; z-index:2;  }
#top_nav .gnb .snb li {  text-align:center; margin-bottom: 25px; width: 180px;}
#top_nav .gnb .snb li a { color:#fff; display:block; font-size:15px; font-weight:300; width: 100%; transition: all 0.3s;  text-align: left; padding-left: 30px;
    letter-spacing: -0.5px; color:rgba(255,255,255,.6);}
#top_nav .gnb .snb li a:hover {color:#fff;}
#top_nav .gnb .snb li:last-child {margin-bottom: 0;}

/* hidden_nav */
.hidden_nav {width:205px; height: 100vh;background: rgba(5, 13, 0,.9); background-size:cover; top:0; left:240px; position: absolute; z-index: -1; display: none; }
.hidden_nav.active {display: block;}

#h_info {position: absolute; left:30px; bottom:50px; }
#h_info h1 {font-size:16px; font-weight: 500; color:rgba(255,255,255,.8); font-family: 'Montserrat'; line-height: 1;}
#h_info h2 {font-size:22px; font-weight: 600; color:#e9e9e9; font-family: 'Montserrat'; line-height: 1; margin:15px 0;}
#h_info ul li {font-size:13px; font-weight: 300; color:rgba(255,255,255,.6); line-height: 22px;  }



/*gray*/
/* #header_wrap.gray  { border-bottom: 1px solid #e8e8e8;}
#header_wrap.pink  { border-bottom: 1px solid rgba(255,255,255,0.2);}

#header_wrap.gray #header #logo a { background: url('../img/logo_gray.png')50% 50% no-repeat; background-size: auto 100%;}
#header_wrap.pink #header #logo a { background: url('../img/logo_pink.png')50% 50% no-repeat; background-size: auto 100%;}

#header_wrap.gray #top_nav .gnb > li > a { color:#333}
#header_wrap.pink #top_nav .gnb > li > a { color:#fff} */


/* @media screen and (max-width:1200px) {
    #header_wrap {width: 200px;}
    #header #logo a {text-align: center; padding: 45px 15px;}
    #top_nav .gnb > li > a {height: 55px; line-height: 55px; padding-left: 20px;}
    #top_nav .gnb .snb,.device-md #top_nav .gnb .snb {background: url('../img/navi_tri.png') no-repeat 0 19px;}
    #top_nav .gnb .snb li a {height: 55px; line-height: 55px; padding-left: 20px; font-size: 13px;}

}

@media screen and (max-width:960px) {
    #header_wrap { width: 100%; height: 60px; }
    #header {  width :100%; position:fixed; top:0; height: 60px;}
    #header #logo {height: 60px; line-height: 60px;}
    #header #logo a {width: 100%; padding: 0; padding: 0 20px;}
    #header #logo a img {height: 30px;}
    #top_nav { display:none}

} */