#header_wrap{position:absolute; left:0; top:0; width:100%; z-index:57; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;  border-bottom: 1px solid #ddd; }
#header{width: 100%; background: #fff; -webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease; box-sizing: border-box;}
#header .header_inner {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height:100%; margin:0 auto; z-index: 10;
padding-left: 50px; margin: 0 auto;}
#header .header_right {display: flex; align-items: center;}

/* logo */
#logo {flex-shrink: 0;}
#logo a {display: flex; align-items: center; justify-content: center; position: relative;}

/* top_nav */
/* gnb */
#top_nav{transition: all .5s ease; margin-right: 70px;}
#top_nav .gnb{display: flex; height: 100%;}
#top_nav .gnb > li {text-align: center; max-width: 225px; overflow: hidden; position: relative;}
#top_nav .gnb > li::before{content: ''; display: block; width: calc(100% - 60px); height: 3px; background-color: #fff; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0; transition: .6s;}
#top_nav .gnb > li > a{display: flex; justify-content: center; align-items: center; font-size:21px; color:#000; font-weight:500; word-break: keep-all; height: 100%; transition: all .3s ease; white-space: nowrap; padding: 0 60px; position: relative; z-index: 3;}
 /*snb  */
#top_nav .gnb .snb {overflow: hidden;opacity: 0;transition: all .5s;padding: 26px 0;position: relative; width: 100%;}
#top_nav .gnb .snb::before{content: '';display: block;width: 100%;height: 0;border-radius: 10px;position: absolute;top: -77px;left: 50%;transform: translateX(-50%);background-color: #03508a;z-index: 1;transition: .35s;}
#top_nav .gnb .snb li a {width: 100%; display: flex;align-items: center;justify-content: center;text-align: center;font-weight: 300;font-size:19px;line-height: 1.5;color: #fff;padding: 5px 0;position: relative;z-index: 3;}
#top_nav .gnb .snb li {transition: .3s}
#top_nav .gnb .snb li:last-child{border-bottom: 0;}

 /* hd_right */
#hd_right {display: flex; align-items: center; height: 100%;}
.menu_slider_btn { display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative;  cursor: pointer; width: 90px; height: 90px; background-color: #03508a;}
.menu_slider_btn span { display: block; width: 35px; height: 2px; background: #fff; border-radius: 0px; transition:all .3s; }
.menu_slider_btn span:nth-child(n+2) {margin-top: 5px; }

/* hidden_nav */
#header_wrap .menu_slider_btn2 { display: block; position: absolute; right:0px; top:50px; cursor: pointer; transform: translate(-50%, -50%); width:35px; height: 35px;
display: flex; flex-direction: column; justify-content: center; z-index: 2; align-items: center;}
#header_wrap .menu_slider_btn2 span { display: block; width: 23px; height: 2px; border-radius: 3px; background:#03508a; }
#header_wrap .menu_slider_btn2 span:nth-child(1) { margin:0; transform: rotate(45deg);}
#header_wrap .menu_slider_btn2 span:nth-child(2) { display: none; transform: rotate(45deg); }
#header_wrap .menu_slider_btn2 span:nth-child(3) { margin-top: -2px; transform: rotate(135deg); }

.hidden_nav_box {width :100%; height: 100vh; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; z-index: 9999; position: fixed; display: none;}
.hidden_nav {text-align: center; width: 450px; height: 100vh; position: fixed; top: 0; right: -450px; background: #fbfbfb; z-index: 10000; position: fixed; text-align: left; padding:60px 50px;}
.hidden_nav .hidden_gnb  { width: 100%; }
.h_lm {margin-bottom:30px; padding-bottom: 30px; border-bottom: solid 1px #ddd; position: relative; }
.h_lm > a {display: block; font-size:25px; font-weight: 600; color:#000 !important; transition: all .3s ease; max-width:220px;  position: relative; }
.h_lm:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}

.h_lnb {display: block; margin-top: 20px;}
.h_lnb li {padding: 5px 0px}
.h_lnb li a{font-size: 17px; font-weight: 500; color: #999; transition: color .3s; }
.h_lnb li + li{margin-top: 5px;}
.h_lnb li:hover > a{color: #03508a;}
@media screen and (min-width: 1901px) {
#header .header_inner{padding-left: 90px;}
}
@media screen and (min-width: 1025px) {
#header .header-inner {height: 90px;}
#top_nav {height: 90px;}
#top_nav .gnb > li:hover{overflow: visible;}
#top_nav .gnb > li:hover::before{opacity: 1;}
#top_nav .gnb > li:hover > a{color: #fff; padding-top: 20px;}
#top_nav .gnb > li:hover .snb{opacity: 1; overflow: visible;}
#top_nav .gnb > li:hover .snb::before{height: calc(100% + 80px);}
#top_nav .gnb .snb li a:hover{font-weight: 700;}
}

@media screen and (max-width: 1600px) {
    #header .header_inner{ }
    #top_nav {margin-right: 50px;}
    #top_nav .gnb > li{width: min-content;}
    #top_nav .gnb > li > a{padding: 0 50px;}
    #top_nav .gnb .snb{padding: 15px 0 10px;}
    #top_nav .gnb .snb li a{font-size: 17px; padding: 5px 15px;}
}

@media screen and (max-width: 1400px) {
    #top_nav .gnb > li::before{width: calc(100% - 40px);}
    #top_nav .gnb > li > a{font-size: 20px; padding: 0 40px;}
    #top_nav .gnb .snb li a{font-size: 16px; }

    @media screen and (min-width: 1025px) {
        #top_nav .gnb > li:hover > a{padding-top: 12px;}
    }

}
@media screen and (max-width: 1280px) {
    #header .header_inner{padding-left: 30px;}
    #logo a {width: 200px;}
    #top_nav {margin-right: 20px;}
    #top_nav .gnb > li > a{font-size: 19px; padding: 0 30px;}


}
 @media screen and (max-width: 1024px) {
    #top_nav { display: none; }
    .menu_slider_btn {display: none}

    #logo a {width: 180px;}


    #header_wrap {position: fixed; height: 61px;}
    #header {height: 60px;}
    #header .header_inner { justify-content: center; padding: 0 20px;}

    /* scroll */
    /* .scrolled #header {background-color: #fff; border-bottom-color:#ddd;}
    .scrolled #open-button .hamburger span {background-color: #03508a; } */
}
 @media screen and (max-width: 480px) {
     #logo a {width: 145px;}

 }