<dl class="select-gnb nav-gnb">
	<dt>
		<button type="button">포털 바로가기</button>
	</dt>
	<dd>
		<ul>
			<li><a href="${_context}/main.do" class="on">대표포털</a></li>
			<li><a href="${_context}/tour/main.do">문화관광</a></li>
			<li><a href="${_context}/reservation/main.do">통합예약</a></li>
		</ul>
		<button type="button" class="ui-close">닫기</button>
	</dd>
</dl>

<dl class="select-gnb nav-sns">
	<dt>
		<button type="button">SNS 바로가기</button>
	</dt>
	<dd>
		<ul>
			<li><a href="#" target="_blank"><img src="/common/img/common/ico_youtube.png" alt="" /><span class="blind">유튜브</span></a></li>
			<li><a href="#" target="_blank"><img src="/common/img/common/ico_blog.png" alt="" /><span class="blind">네이버 블로그</span></a></li>
			<li><a href="#" target="_blank"><img src="/common/img/common/ico_facebook.png" alt="" /><span class="blind">페이스북</span></a></li>
			<li><a href="#" target="_blank"><img src="/common/img/common/ico_twitter.png" alt="" /><span class="blind">트위터</span></a></li>
		</ul>
		<button type="button" class="ui-close">닫기</button>
	</dd>
</dl>

$('.select-gnb button').on('click', function(){
	$(this).closest('.select-gnb').toggleClass('open')
});

.select-gnb dt {display:none;}
.select-gnb li {display:block; position:relative; float:left; }
.select-gnb .ui-close {display:none;}
.nav-gnb li {display:block; position:relative;}
.nav-gnb li + li:before {content:""; display:block; position:absolute; width:1px; height:18px; background:#dee2eb; left:-1px; top:50%; margin-top:-9px;}
.nav-gnb li a {display:block; position:relative; color:#333; font-size:16px; padding:0 25px; line-height:42px; z-index:1;}
.nav-gnb li a.on {background:#2292e9; color:#fff;}
.nav-sns {float:right;}
.nav-sns a {display:block; padding:12px 7px 0;}
.nav-sns span {display:block; position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; text-indent:-999px;}

@media all and (max-width:850px) {
	.select-gnb {display:block; position:relative; float:left; width:120px;}
	.select-gnb ~ .select-gnb {float:right;} 
	.select-gnb dt {display:block; position:relative; z-index:0;}
	.select-gnb dd {display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #dee2eb; z-index:1;}
	.select-gnb.open dd {display:block;}
	.select-gnb dd .close {display:block; position:absolute; top:-38px; left:0; right:0; opacity:0; z-index:1;}
	.select-gnb button {display:block; position:relative; width:100%; height:38px; padding:0 15px 0 5px; font-size:13px;}
	.select-gnb button:after {content:"▼"; display:block; position:absolute; top:50%; right:0px; font-size:.5em; transform:translateY(-50%); -webkit-transform:translateY(-50%); opacity:.5;}
	.select-gnb.open button:after {content:"▲";}
	.select-gnb li {float:none;}
	.nav-gnb li a {font-size:13px; line-height:35px; padding:0 10px;}
	.nav-sns span {display:inline-block; position:relative; top:auto; left:auto; width:auto; height:auto; text-indent:0; vertical-align:middle;}
	.nav-sns dd {right:-55px;}
	.nav-sns a {display:block; position:relative; padding:0 10px 0 35px; line-height:35px; font-size:13px;}
	.nav-sns img {display:block; position:absolute; left:5px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
}
@media all and (max-width:400px) {
	.select-gnb {width:90px}
	.select-gnb button,
	.select-gnb li a {font-size:11px;}
	.nav-gnb dd {right:-20px;}
	.nav-sns {width:120px;}
	.nav-sns dd {right:0px;}	
}