/* header */
#header {position: absolute; left: 0; top: 0; width: 100%; height: 100px; border-bottom: 1px solid rgba(255, 255, 255, .4); z-index: 10; transition: .3s;}
#header .header-inner {max-width: 1600px; height: 100%; margin:0 auto; display: flex; position: relative; z-index: 10; align-items: center; padding: 0 50px;}
#header h1 a {display: block; width: 151px; height: 22px; background: url("../img/logo.png") 50% / cover no-repeat; transition: .3s;}
.header-inner .gnb {display: flex; height: 100%; margin-left: 460px;}
.header-inner .gnb > li {position: relative; text-align: center;}
.header-inner .gnb > li > a {display: flex; justify-content: center; align-items: center; width: 180px; height: 100%; font-size: 20px; font-weight: 500; color: #fff; transition: .3s; position: relative; z-index: 2; border-bottom: solid 1px transparent}
.header-inner .gnb > li > a::before{content: ''; display: block; width: 100%; height: 0; position: absolute; top: 99px; left: 0; background-color: #007af7; z-index: -1; transition-delay: .1s; transition: .2s;}
.header-inner .gnb > li > a::after{content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 100%; left: 0; background-color: rgba(255,255,255,.3); z-index: 1; opacity: 0; transition: .3s;}
.header-inner .gnb > li:hover > a{background-color: #007af7;}
.header-inner .gnb > li:hover > a::before{height: 280px;}
.header-inner .gnb > li:hover > a::after{opacity: 1;}

/*child_menu*/
.header-inner .gnb .lnb {position: absolute; left: 0; top: 100%; width: 100%; height: 280px; display: none; z-index: 2;}
.header-inner .gnb .lnb li a {display: block; font-size: 17px; font-weight: 300; color: #1d1d1f; transition: .3s; padding: 17px 0;}
.header-inner .gnb .lnb li:first-child a{padding-top: 23px;}
.header-inner .gnb .lnb li:hover a{font-weight: 500;}
/* .header-inner .gnb .lnb li:last-child a{padding-bottom: 34px;} */

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


.toggle-btn {display: block; cursor: pointer; width: 90px; height: 100px; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; right: 0;}
.toggle-btn::before {content: ''; display: block; width: 28px; height: 27px; background: url("../img/menu_h.png") no-repeat center; vertical-align: top; transition: .3s;}
#header.s1 .toggle-btn::before{background-image: url("../img/menu.png")}

.close-btn {position: absolute; right: 50px; top: 60px; cursor: pointer;}
.close-btn span {display: block; background: #0074f7; width: 32px; height: 3px; border-radius: 3px; transition: 250ms;}
.close-btn span:nth-child(1) {margin-top: 0; margin-bottom: -0; transform: rotate(45deg);}
.close-btn span:nth-child(2) {transform: rotate(45deg); display: none;}
.close-btn span:nth-child(3) {margin-top: -2px; transform: rotate(135deg);}

.hidden-nav-box {position: fixed; left: 0; top: 0; width :100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 20; display: none;}
.hidden-nav {position: fixed; right: -640px; top: 0; width: 540px; height: 100vh; background: #fbfbfb; text-align: left; padding: 160px 70px 70px 70px; z-index: 51;}
.hidden-nav .hidden_gnb {width: 100%;}
.hidden-gnb > li {position: relative; margin-bottom:50px;}
.hidden-gnb > li > a {position: relative; display: block; max-width:120px; font-size: 24px; font-weight: 600; color: rgba(0, 0, 0, .5) !important; transition: .3s;}
.hidden-gnb > li > a:hover, .hidden-gnb > li > a.active {color: rgba(0, 0, 0, 1) !important;}
.h-lnb {position: absolute; left: 150px; top: 4px; z-index: 2; display: none;}
.h-lnb li {margin-bottom: 25px;}
.h-lnb li a {font-size: 18px; font-weight: 400; color: #707070; border-bottom: 2px solid transparent; padding: 2px 0; white-space: nowrap; transition: .3s;}
.h-lnb li a:hover {padding: 2px 15px; color:#0074f7; border-bottom: 2px solid #0074f7;}


/* scrolled and hover */
@media screen and (min-width: 1025px) {
    #header:hover {background: #fff; border-bottom-color: rgb(221, 221, 221,.4);}
    #header:hover h1 a{background-image: url("../img/logo_h.png");}
    #header:hover .header-inner .gnb > li > a {color: #1d1d1f;}
    #header:hover .header-inner .gnb > li:hover > a{color: #fff;}
    #header:hover .header-inner .gnb > li:hover > a + .lnb li a{color: #fff;}
    #header:hover .header-inner .toggle-btn::before {background-image: url("../img/menu_h.png");}

}

/* media query */
@media screen and (max-width: 1700px) {
    #header .header-inner {justify-content: space-between;}
    .header-inner .gnb{margin-left: 0; margin-right: 40px;}
    .header-inner .gnb > li > a{width: 160px;}
}
@media screen and (max-width: 1400px) {
    .header-inner .gnb > li > a{width: 135px; font-size: 18px;}
    .header-inner .gnb .lnb li a{font-size: 15px;}
}
@media screen and (max-width: 1280px) {
    .header-inner .gnb > li > a{width: 130px; font-size: 17px;}
    .header-inner .gnb .lnb li a{letter-spacing: -.4px;}
}
@media screen and (max-width: 1024px) {
    #header {height: 60px; position: fixed;}
    #header .header-inner {justify-content: center; padding: 0 20px;}
    #header h1 a{width: 130px; height: 19px;}
    .header-inner .gnb{display: none;}
    .scrolled #header {background: #fff; border-bottom-color: #ddd; }
    .scrolled #header h1 a{background-image: url("../img/logo_h.png"); }
    .toggle-btn{display: none;}
}