/*Content CSS*/
#header_wrap {position: fixed; top:0; width:240px; height: 100vh; z-index:57; background: none; transition: all 0.3s; background: #111010; }
#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 { }
#header #logo a {width: 100%; padding: 64px 40px 80px; display:block; font-size: 0;}
#header #logo img {}

#top_nav .gnb { list-style:none; height:100%;}
#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;}
#top_nav .gnb > li > a {display: block; width:100%; font-size: 14px; font-weight:300; text-decoration:none;  transition: all 0.3s; color:rgba(255, 255, 255, 0.4);
 position: relative; padding:15px 0 15px 40px;}
#top_nav .gnb > li > a:hover {color: #fff; }
#top_nav .gnb > li > a::after{ content: ''; display: block; width: 0; height: 1px; background: #fff; position: absolute; right:0; top:50%; transform:translateY(-50%);
transition: all .3s ease;}
#top_nav .gnb > li.active a::after{ width: 45px;}
#top_nav .gnb > li.active a {color:#fff;}
/* #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: 200px; top:15px; border-top: 0; z-index:2; padding-left: 40px;}
#top_nav .gnb .snb li {  text-align:center; margin-bottom: 20px; width: 180px;}
#top_nav .gnb .snb li a { color:#fff; display:block; font-size:14px; font-weight: 300; width: 100%; transition: all 0.3s;  text-align: left; padding-left: 35px;
    letter-spacing: -0.5px; color:rgba(255,255,255,.25);}
#top_nav .gnb .snb li a:hover {color:#fff;}
#top_nav .gnb .snb li:last-child {margin-bottom: 0;}

/* hidden_nav */
.hidden_nav {width:180px; height: 100vh;background: url('../img/hidden_nav.jpg') 50% 50% no-repeat; background-size:cover; top:0; left:240px; position: absolute; z-index: -1;
display: none; }
.hidden_nav.active {display: block;}

#h_info {position: absolute; left:40px; bottom:66px; }
#h_info h1 {font-size:12px; font-weight: 500; color:#fff; letter-spacing: -.12px; margin-bottom: 10px; font-family: 'Montserrat'; }
#h_info ul li {font-size:12px; font-weight: 300; color:rgba(255,255,255,.3); line-height: 26px; letter-spacing: -.18px; font-family: 'Montserrat'; }



/*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}

} */