/*Content CSS*/
#header_wrap { width:100%; height:100px; background-color:transparent; z-index:57; position: absolute; top:0; left:0; border-bottom: 0px solid rgba(255,255,255,.15);}
#header #logo { margin-left:0; padding:0; display: flex; align-items: flex-end;}
#header #logo a { display:block; }
#header #logo img {}
#header {left:0;top:0px; width:100%; z-index:6;height:100px;-webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; margin:0 auto; position: relative; z-index: 2;}
#header .header-inner {width:100%; height:100%; max-width:1740px; margin:0 auto; display: flex; justify-content: space-between; align-content: flex-end; padding:0 20px 20px;}
#header .header-inner .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:29px; left:50%;width:25px;height:20px; background-image:url('../img/cate_more.gif'); margin-left:200px; border:0; display:none}
#header .header-inner .menu.on {background-image: url('../img/cate_close.gif')}
.scrolled #header_wrap  { background-color:#000; border-bottom:none; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; }

#top_nav {display: flex; height:100%; align-items: flex-end;}
#top_nav .gnb { list-style:none; height:100%; display: flex;}
#top_nav .gnb > li {position:relative; display:block; width:auto;  vertical-align:middle; text-align:center; margin-left:80px;}
#top_nav .gnb > li {height:100%;line-height:25px; -webkit-transition: all .4s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
#top_nav .gnb > li > a {display:flex; align-items: flex-end; line-height:25px; height: 100%;  width:100%; color:#fff; font-size:17px; font-weight:700; text-decoration:none;  white-space: nowrap; transition: all .3s ease; font-family: 'NanumSquare',sans-serif;  border-bottom: 2px solid transparent; position: relative; 	}
#top_nav .gnb > li > a:hover {color: #fff;}
#top_nav .gnb > li > a.active {color:#3399ff;}
#top_nav .gnb > li:last-child {margin-right:90px;}
#top_nav .gnb > li:first-child {margin-left:0; }


/*child_menu*/
#top_nav .gnb .snb {list-style:none; display:none; }
#top_nav .gnb .snb,.device-md #top_nav .gnb .snb{display: none;position: absolute; width: 200px; top:100px; border-top: 0; z-index:2;  padding-top: 10px; margin-top: -10px; left:50%; transform:translateX(-50%); background: url('../img/navi_tri.png') no-repeat 50% 0;}
/* .navi_tri {position: absolute; left: 50%; top: -55px; margin-left: -10px; width: 21px; height: 15px;} */
#top_nav .gnb .snb li { font-size:14px; line-height:3.7; border-top:1px solid rgba(255,255,255,.2);background-color: #0053a5; transition: all .3s ease;}
#top_nav .gnb .snb li a { color:#fff; display:block; opacity: 1;  text-align: center; line-height:3.7; font-size:14px; font-weight: 300; transition: all .3s ease;}
#top_nav .gnb .snb li a:hover {color:#fff;  display:block; text-decoration:none;  opacity: 1;}
#top_nav .gnb .snb li:hover a {background-color: #004384;}
#top_nav .gnb .snb li:first-child { border-top:0;}

/* 패밀리 버튼 */
#h_fam_btn {padding-bottom: 15px; position: relative; top:8px; }
#h_fam_btn button {font-size:14px; font-weight: 400; color:#fff; background: transparent; box-shadow: 0; border: none; outline: none;}
#h_fam_btn button img {margin-left:18px; transition: all .4s ease;}
/* #h_fam_btn button.active img {transform: rotate(-180deg);} */
#h_fam_btn > ul {position: absolute; width:200px; top:45px; height: 108px;   background: #fff;  display: none;  background: url('../img/navi_tri.png') no-repeat 50% 0;  padding-top: 10px; margin-top: -10px; left:50%; transform:translateX(-50%);}
#h_fam_btn > ul li {text-align: center; background: #0053a5;  }
#h_fam_btn > ul li a {font-size: 14px; font-weight: 400; color:#fff; letter-spacing: -.5px;  padding:0 8px;  display: block ; border-bottom: 1px solid rgba(255,255,255,.2); transition: all .3s ease; background: #fff; height: 51px; line-height: 51px; white-space: nowrap; background: #0053a5;}
#h_fam_btn > ul li:last-child a {border-bottom-color: transparent;}
#h_fam_btn > ul li a:hover {background: #004384;}



@media screen and (max-width:1700px) {
    #header .header-inner {max-width: 1300px; overflow: hidden;}
    #header_wrap, #header {max-width: 1300px; overflow: hidden;}
    #top_nav .gnb > li { margin-left:60px; overflow: hidden;}
}

@media screen and (max-width:1200px) {

}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 640px) {

}