header{position:fixed;z-index:991; width:100%; height:100px;display:flex; flex-wrap:wrap}
.sticky{background:rgba(0,0,0,.8)}
header h1{position:absolute;z-index:992;left:3%;width:300px; max-width:300px;line-height:100px;}
header h1 img{vertical-align:middle}
nav {position: relative;width:100%;height:100px;}
.m-gnb{position:absolute; right:0;width:100px;right:3%}
.lang{float:left;width:50px;height:100px;text-align:center; color:#fff}
.lang a{display:inline-block; width:100%; line-height:100px}
.lang a span{width:30px; height:30px; display:inline-block; border:1px solid #fff; line-height:30px; font-size:.7em;;border-radius:100%}
.toggle-nav{float:right;position:relative;width:50px;height:100px;cursor:pointer}
.toggle-nav span.line01{position:absolute;top:50%;left:50%;width:22px;height:20px; border-top:2px solid #fff; border-bottom:2px solid #fff;display:inline-block;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.toggle-nav span.line02{position:absolute; width:18px; margin-left:2px;height:2px;background:#fff;display:inline-block;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);top:50%; left:50%}
/* common */
nav ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align:center;
	font-size:0
}

nav ul li {
	position: relative;
	display:inline-block;
	color: #fff;
	font-size:1.1rem
}


nav ul li a {
	display: inline-block;
	padding:0 1.1em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	font-size:1.2em;
	line-height:100px; width:100%;
}
nav ul li a:hover{color:#0b7cc1}
nav ul ul {
	position: absolute;
	top: 100%;
	left: -2px;
	width:100%;
	min-width:190px;
	background:rgba(7,120,233,1);
}
nav ul li:nth-child(2) ul{min-width:190px}
nav ul ul li {display:block; width:100%;text-align:left}
nav ul ul li:hover{background:rgba(0,0,0,.3); color:#fff}
nav ul ul li a{
line-height:1.5;
font-size:0.9em;
padding:10px 1em !important;
color:#fff;
display:inline-block; width:100%; text-align:left;

}
nav ul ul li:hover a{color:#fff}

nav ul ul ul {
	position: absolute;
	top: -2px;
	left: 100%;
}



/* DEMO #2 */
.nav ul ul {
	visibility: hidden;
	opacity: 0;
	transition: .2s ease-in-out;
}
.nav ul li:hover > ul {
	visibility: visible;
	opacity: 1;
}

.modal_hidden{display:none}
.modalnav-wrap{font-family:'GmarketSans'}
.modalnav-wrap > li{width:100%;display:flex; flex-wrap:wrap;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:30px}
.modalnav-wrap > li > a{font-size:25px;width:150px;padding-top:5px}
.modalnav-wrap > li ul{width:calc(100% - 150px);display:flex; flex-wrap:wrap;}
.modalnav-wrap > li ul li{font-size:18px;font-weight:200;width:33.3%}
.modalnav-wrap > li > ul > li:hover > a{font-weight:500}
.modalnav-wrap > li ul li:before{content:'- ';font-weight:200;line-height:40px}
.modalnav-wrap > li:last-child{border-bottom:0}

@media(max-width:1300px){

nav ul li a{padding:0 1em;font-size:1em}

}

@media(max-width:1024px){
header{display:block;height:80px;width:100%}
header h1{float:left;line-height:80px;width:200px}
header h1 img{width:180px}
.m-gnb{float:right;width:80px;right:3%}
.lang{float:left;width:40px; height:80px}
.lang a{line-height:80px}
.toggle-nav{order:2;float:right;width:40px; height:80px}
.toggle-nav span.line01{width:20px; height:18px;border-top:2px solid #fff; border-bottom:2px solid #fff}
.toggle-nav span.line02{width:20px; height:2px}
nav{display:none}
}

@media(max-width:768px){

header{height:60px;}
header h1{line-height:60px;width:150px}
header h1 img{width:150px}
.m-gnb{float:right;width:90px;right:0}

.lang{width:30px; height:60px; }
.lang a{line-height:60px}
.toggle-nav{width:60px; height:60px}
.modalnav-wrap > li{width:100%;margin-bottom:25px}
.modalnav-wrap > li > a{font-size:18px;width:100%}
.modalnav-wrap > li ul{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:10px;width:100%}
.modalnav-wrap > li ul li{width:50%;letter-spacing:-1px;font-size:.8rem}
}

@media(max-width:400px){
.modalnav-wrap > li ul li{width:50%;}
}