#hd {
	position:fixed;
	width:200px;
	height:100%;
	left:0;
	top:0;
	background:#1b201b;
	z-index:20;
	transition:all 0.5s ease;
}

#logo {
	padding:42px 0;
	text-align:center;
}

#gnb > ul > li > a {
	display: block;
    height: 30px;
    padding: 0 0 0 42px;
    font-size: 14px;
    color: #aaa;
    line-height: 30px;
    text-transform: uppercase;
}
#gnb > ul > li > a:hover {
	color:#fff;
	background:#1b201b ;
}
#gnb > ul > li.act> a {
	color:#fff;
	background:#1b201b ;
}
#gnb ul li ul {
	display: none;
    position: absolute;
    top: 0;
    left: 200px;
    width: 150px;
    height: 100%;
    background: #1b201b;
    opacity: 0.5;
}
#gnb ul li.on ul {
	display:block;
	z-index:20;
	opacity:1;
}
#gnb ul li.act ul {
	display:block;
}
.gnb_1dli.no1 ul {
	padding:198px 0 0;
}
.gnb_1dli.no2 ul {
	padding:228px 0 0;
}
.gnb_1dli.no3 ul {
	padding:258px 0 0;
}
.gnb_1dli.no4 ul {
	padding:288px 0 0;
}
.gnb_1dli.no5 ul {
	padding:198px 0 0;
}
.gnb_1dli.no6 ul {
	padding:348px 0 0;
}
.gnb_1dli.no7 ul {
	padding:378px 0 0;
}
.gnb_1dli.no8 ul {
	padding:408px 0 0;
}
#gnb ul li ul li a {
	display: block;
    height: 30px;
    font-size: 13px;
    padding: 0 0 0 25px;
    color: white;
    line-height: 30px;
    text-transform: uppercase;
}
#gnb ul li ul li a:hover {
	background:#6b6b6b;
}
#gnb ul li ul li.active a {
	background:#6b6b6b;
}


@media(max-width: 1024px) {
	#hd {
		width: 100%;
		height: 64px;
		left: 0;
		top: 0;
	}
	#logo {
		position: absolute;
		left: -54px;
		top: 0px;
		padding: 0;
		display: inline-block;
	}
	#logo img {
		width:44px;
	}
	
	#gnb {
		margin-left:64px;
		top:10px;
		position:relative;
	}
	#gnb ul li {
		float:left;
		display:inline-block;
		width:21.2%;
	}
	#gnb ul li.no1 {
		width:36%;
	}
	#gnb > ul > li > a {
		display: block;
		height: 24px;
		padding: 0 ;
		font-size: 13px;
		color: #fff;
		line-height: 24px;
		text-transform: uppercase;
		text-align:center;
		position:relative;
	}
	#gnb > ul > li > a:after {
		content:'|';
		display:block;
		position:absolute;
		top:1px;
		right:0;
	}
	#gnb > ul > li > a:last-child:after,
	#gnb > ul > li.no4 > a:after,
	#gnb > ul > li.act > a:after {
		display:none;
	}
	#gnb ul li ul,
	#gnb ul li.on ul,
	#gnb ul li.act ul {
		display:none;
	}
	#gnb > ul > li > a:hover {
		background:transparent;
	}
}

@media(max-width: 560px) {
	#logo {
		left:10px;
	}
	#gnb {
		margin-left:0px;
	}

	#gnb ul li,
	#gnb ul li.no1 {
		width:auto;
	}
	#gnb ul li {
		margin-right:15px;
	}
	#gnb_1dul {
		margin-left:64px;
	}
	#gnb > ul > li > a {
		font-size:11px;
	}
	#gnb > ul > li > a:after {
		content:'|';
		display:block;
		position:absolute;
		top:-1px;
		right:-10px;
	}
	#gnb > ul > li.no4 > a:after {
		display:block;
	}
	#gnb > ul > li:last-child > a:after {
		display:none;
	}
}