/* header */
#header {position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .2); z-index: 10; transition: .3s;}
#header .header-inner {max-width: 1700px; height: 100px; margin:0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; align-items: center;}
#header h1 a {position: relative; display: block; width: 237px; height: 67px;}
#header h1 a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .3s;}
#header h1 a img:nth-child(1) {opacity: 1;}
#header h1 a img:nth-child(2) {opacity: 0;}


/* header-top */
#header-top { background:#fff; border-bottom: 1px solid #ddd; }
#header-top .header-inner { height: 60px; }
#header-top h2 { font-size: 20px; font-weight: bold; color: #333; }
#header-top ul { display: flex; align-items: center; }
#header-top ul li { position:relative; height: 100%; padding:0 25px; }
#header-top ul li::after { content:""; position:absolute; right:0; top:4px; width:1px; height: 30px; background:#e9e9e9; }
#header-top ul li:first-child { padding-left: 0; }
#header-top ul li:last-child { padding-right: 0; }
#header-top ul li:last-child::after { display: none; }
#header-top ul li i { display: inline-block; margin-right: 25px; }
#header-top ul li p { font-size: 13px; color: #666; }


/* nav */
#nav {position: relative; display: flex; align-items: center; height: 100%;}
#nav .gnb {display: flex; height: 100%;}
#nav .gnb > li {position: relative; text-align: center;}
#nav .gnb > li + li {margin-left: 58px;}
#nav .gnb > li > a {font-family: 'NanumSquareBold'; font-size: 19px; color: #fff; height: 100%; display: flex; align-items: center; transition: color .3s;}
#nav .gnb > li > a::after {content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: #293be7; transition: .3s;}
#nav .gnb > li > a:hover::after {width: 159px;}
/* #nav .gnb > li > a.active::after {width: 120px; background-color: #293be7;} */

/*child_menu*/
#nav .gnb .lnb {position: absolute; left: 0; top: 100%; width: 100%; display: none;}
#nav .gnb .lnb li a {display: flex; align-items: center; white-space: nowrap; font-size: 16px; font-weight: 300; line-height: 70px; color: #333; transition: .3s;}
#nav .gnb .lnb li + li a {padding-left: 68px;}
#nav .gnb .lnb li:hover a {color: #293be7;}
/* #nav .gnb .lnb li a.active {color: #293be7;} */

#nav .gnb > li:nth-last-child(1) .lnb,
#nav .gnb > li:nth-last-child(2) .lnb { justify-content: flex-end; }

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

/* hidden-nav */
.toggle-btn {display: block; cursor: pointer; position: relative; margin-left: 58px;}
.toggle-btn span {display: block; background: #fff; width: 26px; height: 2px; transition: 250ms;}
.toggle-btn span:nth-child(2) {margin: 8px 0;}
.close-btn {position: absolute; right: 50px; top: 60px; cursor: pointer;}
.close-btn span {display: block; background: #293be7; width: 32px; height: 2px; 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: 520px; height: 100vh; background: #fbfbfb; text-align: left; padding: 160px 70px 70px 70px; z-index: 30;}
.hidden-nav .hidden_gnb {width: 100%;}
.hidden-gnb > li {position: relative; margin-bottom:50px;}
.hidden-gnb > li > a {position: relative; display: block; max-width:240px; font-family: 'NanumSquareBold'; font-size: 26px; 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: 230px; top: 4px; z-index: 2; display: none;}
.h-lnb li {margin-bottom: 25px;}
.h-lnb li a {font-family: 'NanumSquare',sans-serif; 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:#293be7; border-bottom: 2px solid #293be7;}

/* hover */
#header:hover {background: #fff; border-bottom-color: transparent;}
#header:hover h1 a img:nth-child(1) {opacity: 0;}
#header:hover h1 a img:nth-child(2) {opacity: 1;}
#header:hover #nav .gnb > li > a {color: #000;}
#header:hover .toggle-btn span {background: #293be7;}

/* scroll white */
.scrolled #header {background: #fff;box-shadow: 0 0 7px rgb(0 0 0 / 30%); }
.scrolled #header .header-inner { height: 80px; }
.scrolled #header-top .header-inner { height: 60px; }
.scrolled #header h1 a img:nth-child(1) {opacity: 0;}
.scrolled #header h1 a img:nth-child(2) {opacity: 1;}
.scrolled #header #nav .gnb > li > a {color: #000;}
.scrolled #header .toggle-btn span {background: #293be7;}

/* media query */
@media screen and (max-width: 1700px) {
    #header .header-inner {padding: 0 60px;}
}

@media screen and (max-width: 1500px) {
    #nav .gnb > li > a {font-size: 18px;}
    #header h1 a {max-width: 220px;}
}

@media screen and (max-width: 1300px) {
    #nav .gnb > li > a {font-size: 17px;}
    #nav .gnb > li + li {margin-left: 45px;}

    /* header-top */
    #header-top h2 { font-size: 18px; }
    #header-top ul li { padding:0 15px; }
    #header-top ul li i { margin-right: 15px; }

}

@media screen and (max-width: 1200px) {
    #nav .gnb > li + li {margin-left: 40px;}
    #header h1 a {max-width: 180px;}
}

@media screen and (max-width: 1023px) {
    #header {position: fixed;}
    #header .header-inner {height: 60px !important; justify-content: center;}
    .scrolled #header {background: #fff; border-bottom-color: transparent; box-shadow: 0 0 10px rgb(0, 0, 0, 0.15);}
    #nav {display: none;}
    #header h1 a {max-width: 140px;}
    .scrolled #header h1 a img:nth-child(1) {opacity: 0;}
    .scrolled #header h1 a img:nth-child(2) {opacity: 1;}

    /* header-top */
    #header-top { display: none; }
}