header{position:fixed;top:0;z-index:9991; width:100%;padding:0 5%; height:100px;border-bottom:1px solid rgba(255,255,255,.3);display:flex; flex-wrap:wrap;background:#fff}
header h1{position:absolute;left:5%;z-index:999;max-width:300px;line-height:100px;}
header h1 img{vertical-align:middle}
nav {position: relative;width:100%;height:100px;}
.toggle-nav{position:absolute;width:25px;height:100px;border-left:1px solid rgba(255,255,255,.3);cursor:pointer;right:5%}
.toggle-nav span.line01{position:absolute;top:50%;left:50%;width:25px;height:20px; border-top:2px solid #222; border-bottom:2px solid #222;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:25px; height:2px;background:#222;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: #222;
	font-size:16px
}


nav ul li a {
	display: inline-block;
	padding:0 1.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	font-size:1.25em;
	line-height:100px; width:100%;
	font-weight:500
}
nav ul li a:hover{color:#0778E9}
nav ul ul {
	position: absolute;
	top: 100%;
	left: -2px;
	width:100%;
	min-width:170px;
	background:#0d6fb8;
}
nav ul ul li {display:block; width:100%;text-align:left; color:#fff}
nav ul ul li:hover{background:rgba(0,0,0,.3); color:#fff}
nav ul ul li a{
line-height:50px;
font-size:0.9em;
padding:0 1em;
color:#fff;
display:inline-block; width:100%; text-align:left;
font-weight:400
}
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;
}

.modalnav-wrap{display:flex; flex-wrap:wrap;font-family:"SCDream","Noto Sans KR", "NanumGothic", dotum ,sans-serif;}
.modalnav-wrap > li{width:20%}
.modalnav-wrap > li > a{font-size:25px;}
.modalnav-wrap > li ul{width:100%;margin-top:20px}
.modalnav-wrap > li ul li{font-size:18px;font-weight:200}
.modalnav-wrap > li > ul > li:hover > a{font-weight:500}
.modalnav-wrap > li ul li:before{content:'- ';font-weight:200;line-height:40px}


@media(max-width:1300px){

nav ul li a{padding:0 1.1em;font-size:1.1em}

}

@media(max-width:1024px){
header{justify-content:space-between; height:80px;}
header h1{line-height:80px;padding-left:15px; }
header h1 img{height:45px;line-height:80px;}
.toggle-nav{height:80px}
.toggle-nav span.line01{width:20px; height:18px;border-top:2px solid #222; border-bottom:2px solid #222}
.toggle-nav span.line02{width:20px; height:2px}
nav{display:none}
}

@media(max-width:768px){

.modalnav-wrap > li{width:100%;margin-bottom:25px}
.modalnav-wrap > li > a{font-size:18px}
.modalnav-wrap > li ul{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:10px}
.modalnav-wrap > li ul li{font-size:14px;width:50%;letter-spacing:-1px}
}

@media(max-width:400px){
.modalnav-wrap > li ul li{width:50%}
}