/* header */
#header {position: absolute; left: 0; top: 0; width: 100%;  z-index: 10; transition: .3s; height: 90px; background-color: #fff;}
#header .header-inner {max-width: 1700px; height: 90px; margin:0 auto; display: flex; justify-content: space-between; position: relative; z-index: 10; align-items: center;}
#header h1 a {display: block;}
#header h1 a::before {content: ''; display: inline-block; width: 334px; height: 44px; background: url("../img/logo.png") no-repeat center; vertical-align: top; transition: .3s;}

#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: 72px;}
#nav .gnb > li > a {font-size: 19px; font-family: 'SCoreDream';  font-weight: 400; color: #000; height: 100%; display: flex; align-items: center; transition: all .3s;}
#nav .gnb > li:hover > a{font-weight: 500; color: #18578f; }
#nav .gnb > li > a::after {content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; min-width: 0; height: 3px; background-color: #18578f; transition: .3s;}
#nav .gnb > li:hover > a::after {width: 140%; min-width: 130px;}
/* #nav .gnb > li > a.active::after {width: 120px; background-color: #e50050;} */

/*child_menu*/
#nav .gnb .lnb {position: absolute; left: 85%; top: 100%; width: 100%; height: 70px; display: none; justify-content: center;}
#nav .gnb .lnb li a {display: flex; align-items: center; white-space: nowrap; font-size: 17px; font-weight: 300; line-height: 70px; color: #444; transition: .3s;}
#nav .gnb .lnb li + li a {padding-left: 60px;}
#nav .gnb .lnb li:hover a {color: #18578f;}
/* #nav .gnb .lnb li a.active {color: #e50050;} */

#nav .gnb > li:nth-child(4) .lnb{left: 115%;}

.lnb-bg {position: absolute; left: 0; top: 100%; width:100%; height: 70px; background: #fff; border-top: 1px solid rgba(0,0,0,.2); z-index: -1; display: none;  box-shadow: 0px 3px 18px 0 rgba(88, 94, 244, 0.06);}

/* hidden-nav */
.toggle-btn {display: block; cursor: pointer; position: relative; margin-left: 25px;}
.toggle-btn::before {content: ''; display: inline-block; width: 27px; height: 27px; background: url("../img/menu.png") no-repeat center; vertical-align: top; transition: .3s;}
/* .toggle-btn span {display: block; background: #000; width: 23px; height: 2px; transition: 250ms;} */
/* .toggle-btn span:nth-child(2) {margin: 5px 0;} */
.close-btn {position: absolute; right: 50px; top: 60px; cursor: pointer;}
.close-btn span {display: block; background: #18578f; 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: 540px; 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-size: 24px; color: rgba(0, 0, 0, .5) !important; transition: .3s; font-family: 'SCoreDream';  font-weight: 400;}
.hidden-gnb > li > a:hover, .hidden-gnb > li > a.active {color: #18578f !important; font-weight: 500;}
.h-lnb {position: absolute; left: 180px; 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:#18578f; border-bottom: 2px solid #18578f;}

#hd_right {display: flex; align-items: center; height: 100%; }
/* lang */
#hd_lang {display: flex; height: 30px; width: 100px;  justify-content: center; align-items: center; margin-left: 60px; position: relative; }
#hd_lang button {display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 300; color:#000; cursor: pointer;  width: 100%; height: 100%;  position: relative; z-index: 2; background-color: transparent; transition: all .3s; border-radius: 15px; border:1px solid #ccc; }
#hd_lang button span {display: block; margin:0 13px 0 8px; padding-bottom: 2px;}
#hd_lang button i {display: block; transition: background-image .3s; }
#hd_lang button .lang_icon {width: 13px; height: 13px; background:url("../img/lang_icon.png") 50%/contain no-repeat;}
#hd_lang button .lang_tri {width: 6px; height: 5px; background:url("../img/lang_tri.png") 50%/contain no-repeat;}
#hd_lang ul {display: none; position: absolute; left: 0; top:100%; width: 100%; background: rgba(0,0,0,.7);  text-align: center; }
#hd_lang li a {font-size: 13px; font-weight: 500; color:rgba(255,255,255,.6); text-transform: uppercase; transition: all .3s ease; width: 100%;
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.4); display: block; }
#hd_lang li a:hover {color:#fff;}
#hd_lang li:last-child a {border-bottom: 0;}

/* scrolled and hover */
#header:hover {background: #fff; border-bottom-color: transparent;}



.blind{display: none;}
/* media query */
@media screen and (max-width: 1800px) {
    #header .header-inner {padding: 0 20px;}
}
@media screen and (max-width: 1700px) {
    #header .header-inner {padding: 0 50px;}
}

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

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

@media screen and (max-width: 1200px) {
    #nav .gnb > li + li {margin-left: 40px;}
    .toggle-btn{margin-left: 15px;}
    #hd_lang{margin-left: 25px;}
    #header h1 a::before{background-size: 280px; width: 280px;}
}

@media screen and (max-width: 1024px) {
    #header {height: 60px; position: fixed;}
    .scrolled #header {background: #fff; border-bottom-color: transparent; box-shadow: 0 0 38px 0 rgb(0 0 0 / 9%);}

    #header .header-inner {height: 60px; justify-content: center; align-items: center;}
    #header h1 a::before {background-size: contain; width: 200px;}
    #nav{display: none;}
}
@media screen and (max-width: 640px) {
    #header h1 a::before {background-size: contain; width: 175px;}
}