/*Content CSS*/
#header_wrap { width:100%; height:90px; z-index:57; background: transparent; border-bottom:1px solid rgba(255,255,255,.15); position: fixed; left:0; top:0; -webkit-transition:all .3s ease;-moz-transition: all .3s ease; -ms-transition: all .3s ease;
    -o-transition: all .3s ease;transition: all .3s ease; }
#header  { height: 100%; width: 100%; }
#header #logo { padding:0; position: relative; z-index: 2; display: flex; justify-content: center; align-items: center;}
#header #logo a { display:block; width:158px; height:40px; transition: all .3s ease; background: url('../img/logo_w.png?v=250530') 50% 50% no-repeat; }
#header {left:0;top:0px; max-width: 100%; width:100%; z-index:6;-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;}
#header .header-inner {max-width:1780px; padding:0 20px; height:100%; margin:0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; align-items: center; }

#hd_right { display: flex; align-items: center; height: 100%; }

#top_nav {height: 100%; display: flex; align-items: center; }
#top_nav .gnb { list-style:none; display: flex; justify-content: flex-end; padding:0;  height: 100%;}
#top_nav .gnb > li { display:block; width:auto; text-align:center; margin-left:85px; position: relative; height: 100%; }
#top_nav .gnb > li:first-child {margin-left:0;}
#top_nav .gnb > li:last-child { margin-right:57px;}
#top_nav .gnb > li {-webkit-transition: all .4s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; height:100%;}
#top_nav .gnb > li > a {font-size:18px; font-weight: 400; color:#fff; font-family: 'NanumSquare',sans-serif; height: 100%; display: flex; align-items: center; transition: color .3s ease; line-height: 1; }
#top_nav .gnb > li > a::after {position: absolute; bottom: -1px; left:50%; transform:translateX(-50%); content: ""; width: 0px; height: 2px; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -o-transition: all 0.4s; -ms-transition: all 0.3s; transition: all 0.3s; background:#0e4194;}
#top_nav .gnb > li > a:hover::after,
#top_nav .gnb > li.active > a::after  {width:130%; margin-left:0; }
#top_nav .gnb > li > a.active::after {width: 130%; background-color: #0e4194;}
#top_nav .gnb > li > a:hover {color:#0e4194;}
#top_nav .gnb > li.active > a {color:#0e4194; }

/*child_menu*/
#top_nav .gnb .snb {list-style:none; height:70px; position: absolute; left:50%; transform: translateX(-50%); top:90px; }
#top_nav .gnb .snb,
.device-md #top_nav .gnb .snb{display: none; border-top: 0; z-index:2; text-align: center; flex-wrap:nowrap; }
#top_nav .gnb .snb li a { color:#666; display:block; transition: all .3s ease; text-align: left; font-weight: 300; padding-right:55px; white-space: nowrap; font-size:16px; height: 70px; display: flex; align-items: center; }
#top_nav .gnb .snb li:last-child a { padding-right: 0; }
#top_nav .gnb .snb li a:hover {color:#0e4194; text-decoration:none;}
#top_nav .gnb .snb li a.active {color:#0e4194; text-decoration:none; }

.snb_bg {width:100%; height: 70px; background: #fff; position: absolute; left:0; top:90px; z-index: -1; display: none; border-bottom:1px solid #eee;}

/* hidden_nav */
.menu_slider_btn { display: block; cursor: pointer; position: relative; top:1px; width: 23px; }
.menu_slider_btn span { display: block; background: #fff; width: 23px; height: 2px; border-radius: 0px; transition: 0.25s margin 0.25s, 0.25s transform; }
.menu_slider_btn span:nth-child(2) {margin: 5px 0; }

.menu_slider_btn2 { display: block; cursor: pointer; transform: translate(-50%, -50%); position: absolute; right:60px; top:80px;}
.menu_slider_btn2 span { display: block; background: #0e4194; width: 25px; height: 2px; border-radius: 3px; transition: 0.25s margin 0.25s, 0.25s transform;}
.menu_slider_btn2 span:nth-child(1) { margin-top: 0; margin-bottom: -0; transform: rotate(45deg);}
.menu_slider_btn2 span:nth-child(2) { transform: rotate(45deg); display: none; }
.menu_slider_btn2 span:nth-child(3) { margin-top: -2px; transform: rotate(135deg); }

.hidden_nav_box {width :100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; z-index: 9999; position: fixed; display: none;}
.hidden_nav {text-align: center; width: 640px; height: 100vh; position: absolute; top: 0; right: -640px; background: #fbfbfb; z-index: 10000; position: fixed; text-align: left;
    padding:140px 70px 0 70px;}
.hidden_nav .hidden_gnb  {  width: 100%; }
.h_lm {margin-bottom:50px; position: relative; }
.h_lm > a {display: block; font-size:26px; font-weight: 700; color:rgba(0,0,0,.5) !important; transition: all .3s ease; max-width:250px;  position: relative; font-family: 'NanumSquare',sans-serif; }
.h_lm > a:hover, .h_lm > a.active {color:rgba(0,0,0,1) !important;}
.h_snb {display: none; position: absolute; left:250px; top:5px; z-index: 2;}
.h_snb li {margin-bottom:20px;}
.h_snb li a {font-size:18px; font-weight: 400; color:#707070; transition: all .3s ease; border-bottom:2px solid transparent; padding:2px 0; font-family: 'NanumSquare',sans-serif;
white-space: nowrap; }
.h_snb li a:hover {padding:2px 15px; border-bottom:2px solid #0e4194; color:#0e4194;}

/* hd_btn_wr */
#hd_btn_wr {display: flex; align-items: center; height: 100%; border-left: 1px solid rgba(255,255,255,.2); padding-left: 57px;
 transition: all .3s; }

/* select_link */
.select_link{color: #fff; text-align: center; position: relative; margin-right:25px;}
.select_link_default {position:relative;text-align: left; border: none; background: transparent; color:#fff;  width: 100px; height: 30px; border-radius: 14.5px ; background-color: rgba(255,255,255,.07); display: flex; align-items: center ; justify-content: center; line-height: 30px; transition: all .3s ease; border:1px solid transparent; }
.select_link_default > .selected {font-weight: 300;font-size: 12px; line-height: 30px; display: flex; align-items: center;  }
.select_link_default .h_lang_icon {display: inline-block; width: 13px; height: 13px; background: url('../img/h_lang.png') 50% 50% no-repeat; transition: all .3s ease; margin-right: 8px;}
.select_link_default .h_lang_down {display: inline-block; width:6px; height: 5px; background: url('../img/h_lang_down.png') 50% 50% no-repeat; transition: all .3s ease; margin-left: 10px; }

.select_link_default:focus {outline: none;}
.select_link_default > img {margin-left:8px; position: relative; top:-2px; }
.select_link_default > i { color:#fff; margin-left:15px ;}

.select_link .select_list {display:none;position: absolute; top:30px;width: 100%;box-sizing: border-box;background-color: rgba(0,0,0,.8); z-index: 100;
text-align: left;}
.select_link.on .select_list {display: block;}
.select_list > li:first-child {border-bottom: 1px solid rgba(255,255,255,.2);}
.select_list > li > a {display: block;padding: 5px 0 5px 8px; color: #fff; text-decoration: none; cursor:pointer; font-size:12px;
text-transform: uppercase; font-weight: 500; }


/* white header */
#header_wrap:hover {background-color: #fff; border-bottom-color: #ddd; }
#header_wrap:hover #logo a {background-image:url('../img/logo_b.png?v=250530'); }
#header_wrap:hover #top_nav .gnb > li > a {color:#000; }
#header_wrap:hover #top_nav .gnb > li.active > a {color:#0e4194; }
#header_wrap:hover #top_nav .gnb > li > a:hover {color:#0e4194; }
#header_wrap:hover #hd_btn_wr { border-left-color:#ddd; }
#header_wrap:hover .menu_slider_btn span {background: #000; }

#header_wrap:hover .select_link_default {background-color: rgba(0,0,0,0); color:#000; border-color:#ddd; }
#header_wrap:hover .select_link_default .h_lang_icon {background-image:  url('../img/h_lang_b.png');}
#header_wrap:hover .select_link_default .h_lang_down {background-image:  url('../img/h_lang_down_b.png');}

/* c4 white header */
.w_hd #header_wrap {background-color: #fff; border-bottom-color: #ddd; }
.w_hd #header_wrap #logo a {background-image:url('../img/logo_b.png?v=250530'); }
.w_hd #header_wrap #top_nav .gnb > li > a {color:#000; }
.w_hd #header_wrap #top_nav .gnb > li.active > a {color:#0e4194; }
.w_hd #header_wrap #top_nav .gnb > li > a:hover {color:#0e4194; }
.w_hd #header_wrap #hd_btn_wr { border-left-color:#ddd; }
.w_hd #header_wrap .menu_slider_btn span {background: #000; }

.w_hd #header_wrap .select_link_default {background-color: rgba(0,0,0,0); color:#000; border-color:#ddd; }
.w_hd #header_wrap .select_link_default .h_lang_icon {background-image:  url('../img/h_lang_b.png');}
.w_hd #header_wrap .select_link_default .h_lang_down {background-image:  url('../img/h_lang_down_b.png');}{ }



@media screen and (max-width: 1300px) {
    #top_nav .gnb > li { margin-left: 50px; }

    #hd_btn_wr { padding-left: 30px; }
    #top_nav .gnb > li:last-child { margin-right: 30px; }

    #top_nav .gnb > li > a { font-size: 17px; }
    #top_nav .gnb .snb li a { font-size: 15px; padding-right: 40px; }
}

@media screen and (max-width: 1024px) {
    #hd_right { display: none; }
    #header .header-inner { justify-content: center; }

    #header_wrap { height: 60px; }
    #header #logo a { height: 27px; background-size: contain; }
}
