/*Content CSS*/
#header_wrap { width:100%; height:105px; z-index:57; background: #fff; left:0; top:0; position: absolute; 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; box-shadow: 0 0 27px 0 rgba(0, 19, 47, 0.17); }
#header  { height: 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:100%; padding:0 0 0 110px; height:100%; margin:0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; align-items: center; }
#header #logo { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; }
#header #logo a { display:block; }

.hd_right { display: flex; height: 100%; }

#top_nav {height: 100%; display: flex; }
#top_nav .gnb { list-style:none; display: flex; justify-content: flex-end; height: 100%;}
#top_nav .gnb > li { display:block; text-align:center; margin-left:70px; position: relative; height: 100%; }
#top_nav .gnb > li:first-child {margin-left:0;}
#top_nav .gnb > li:last-child {margin-right:70px;}

#top_nav .gnb > li {-webkit-transition: all .3s 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:20px; font-weight:400; color:#000; height: 100%; display: flex; width: 100%; align-items: center; justify-content: center; white-space: nowrap; }
#top_nav .gnb > li > a::after {position: absolute; bottom: -1px; left:50%; transform:translateX(-50%); content: ""; width: 0; height: 2px; background-color: #287fd7; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.4s;
-ms-transition: all 0.3s; transition: all 0.3s; }
#top_nav .gnb > li > a.active {color:#287fd7; }
#top_nav .gnb > li > a:hover::after,
#top_nav .gnb > li.active > a::after  { width:120px; }

/*child_menu*/
#top_nav .gnb .snb { height:70px; width:100%; position: absolute; left:0; top:105px; }
#top_nav .gnb .snb,
.device-md #top_nav .gnb .snb { display: none; border-top: 0; z-index:2; text-align: center; flex-wrap:nowrap; justify-content: center;}
#top_nav .gnb .snb li a { color:#000; display:block; transition: all .3s ease; text-align: left; font-weight: 300; padding:0 28px; letter-spacing: -.5px; white-space: nowrap; font-size:16px; height: 70px; display: flex; align-items: center; }
#top_nav .gnb .snb li:first-child a { padding-left: 0; }
#top_nav .gnb .snb li:last-child a { padding-right: 0; }
#top_nav .gnb .snb li a:hover {color:#287fd7; }

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

/* hidden_nav */
.menu_slider_btn {cursor: pointer; position: relative; top:0; padding-top:0; height: 100%; width: 110px; display: flex; align-items: center; transition: all .3s ease;
justify-content: center; flex-direction: column; background: transparent; border-left:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); }
.subpage .menu_slider_btn {border-bottom: 0; }
.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: #287fd7; 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:120px 70px 0 70px;}
.hidden_nav .hidden_gnb  {  width: 100%; }
.h_lm {margin-bottom:40px; position: relative; }
.h_lm > a {display: block; font-size:30px; font-weight: 400; color:rgba(0,0,0,.5) !important; transition: all .3s ease; max-width:240px;  position: relative; }
.h_lm > a:hover,
.h_lm > a.active {color:rgba(0,0,0,1) !important;}
.h_snb {display: none; position: absolute; left:240px; top:7px; z-index: 2;}
.h_snb li {margin-bottom:20px;}
.h_snb li a {font-size:19px; font-weight: 400; color:#bbb; transition: all .3s ease; border-bottom:2px solid transparent; padding:2px 0; white-space: nowrap; }
.h_snb li a:hover {padding:2px 15px; border-bottom:2px solid #287fd7; color:#287fd7;}

/* hd_right */
#btn_area { width: 110px; height: 105px; display: flex; align-items: center; height: 100%; background-image: linear-gradient(to left, #072c7d, #46c7ff); }





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

    #header .header-inner { padding: 0 0 0 40px; }
    #header #logo a img { width:280px; }

    #top_nav .gnb > li { margin-left: 50px; }
    #top_nav .gnb > li:last-child { margin-right: 50px; }
    #top_nav .gnb > li > a { font-size: 19px; }

}