/*Content CSS*/
.header-wrap {position: absolute; left:0; top:0; width:100%; height: 90px; background: #fff; z-index:10; transition: .3s;}
.header-wrap::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(to left, #5369f0, #2595be); opacity: 1; transition: .3s;}
.header-wrap.active::before {opacity: 0;}
#header  {position: relative; width:100%; height: 100%; margin:0 auto;}
.header-inner {position: relative; max-width: 1700px; height:100%; margin:0 auto; display: flex; justify-content: space-between; align-items: center; z-index: 1;}
#header h1 a {position: relative; display: block;}

#gnb {position: absolute; left: 50%; transform: translateX(-50%); height: 100%;}
#gnb > ul {display: flex; justify-content: center; height: 100%;}
#gnb > ul > li {position: relative; white-space: nowrap;}
#gnb > ul > li + li {margin-left: 54px;}
#gnb > ul > li > a {height: 100%; display: flex; align-items: center; font-family: 'NanumSquare',sans-serif; font-size: 18px; font-weight: 700; color: #000; transition: .3s;}
#gnb > ul > li > a::after {content: ''; position: absolute; left:50%; bottom: -1px; transform:translateX(-50%); width: 0; height: 4px; background: linear-gradient(to left, #5369f0, #2595be); transition: .3s;}
.header-wrap:hover #gnb > ul > li > a {color: #000;}
#gnb > ul > li > a:hover::after, #gnb > ul > li.active > a::after {width: 100%;}

/*child_menu*/
#gnb .sub-menu {position: absolute; left:0; top: 90px; width:100%; height: 70px;}
#gnb .sub-menu,.device-md #gnb .sub-menu {display: none; flex-wrap:nowrap; align-items: center;}
#gnb .sub-menu li a {display: flex; align-items: center; font-size: 14px; font-weight: 300; color: #333; white-space: nowrap; transition: .3s;}
#gnb .sub-menu li + li {margin-left: 57px;}
#gnb .sub-menu li a:hover, #gnb .sub-menu li a.active {color: #0090ff;}

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

/*right*/
#header .right{display: flex; align-items: center;}

/* top-menu */
.top-menu {display: flex; align-items: center;}
.top-menu li + li {margin-left: 19px; transition: .3s;}
.top-menu li span {font-family: 'NanumSquare', sans-serif; font-size: 20px; font-weight: 700; color: #fff; margin-left: 15px; vertical-align: middle; transition: .3s;}
.header-wrap:hover .top-menu li span {color: #000;}

/* hidden-nav */
.open-btn {cursor: pointer; margin-left: 20px;}
.open-btn span {display: block; background: #000; width: 23px; height: 2px; transition: 0.25s margin 0.25s, 0.25s transform;}
.open-btn span:nth-child(2) {margin: 5px 0;}
#header_wrap:hover .open-btn span {background: #000;}
.close-btn {cursor: pointer; transform: translate(-50%, -50%); position: absolute; right: 50px; top: 60px;}
.close-btn span {display: block; background: #3e7dda; width: 34px; height: 2px; border-radius: 3px; transition: 0.25s margin 0.25s, 0.25s transform;}
.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 {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: 550px; height: 100vh; position: absolute; top: 0; right: -640px; background: #fbfbfb; z-index: 10000; position: fixed; text-align: left; padding: 160px 60px 0 60px;}
.hidden-nav .hidden_gnb {width: 100%;}
.h_lm {margin-bottom: 60px; position: relative;}
.h_lm > a {display: block; font-size: 25px; font-weight: 500; color: rgba(0,0,0,.7); transition: .3s; max-width:200px; position: relative; font-family: 'NanumSquare', sans-serif; white-space: nowrap;}
.h_lm > a:hover, .h_lm > a.active {color:rgba(0,0,0,1) !important;}
.h_snb {display: none; position: absolute; left: 260px; top:5px; z-index: 2;}
.h_snb li {margin-bottom:20px;}
.h_snb li a {font-size: 20px; font-weight: 400; color:#707070; transition: .3s; border-bottom: 2px solid transparent; padding:2px 0; font-family: 'NanumSquare',sans-serif;}
.h_snb li a:hover {padding:2px 15px; border-bottom:2px solid #3e7dda; color:#3e7dda;}
