@charset "utf-8";
/* 네비 */
#navi{font-size:12px; background-color:#fff; min-width:320px;}
#navi ul
,#navi li{padding:0; margin:0;list-style-type:none;list-style-position:inside; background-color:transparent;}
#navi  li{float:left; margin:0 2px;}
#navi  li.on a{font-weight:bold; }

#navi fieldset{border:1px dotted #999; border-width:1px 0 0 0; margin:2px;padding:0}
#navi legend{font-weight:bold; padding:2px 3px; background-color:#FFF;
background-color:#fff;border:1px dotted #999;border-radius: 0.5em;
border-width:0px 1px;
}
#navi fieldset{float:left;}
#navi fieldset li{
min-width:3em; max-width:7em; height:18px; margin:1px; padding:0; font-size:11px;word-break:break-all; text-align:center;
line-height:16px;
font-size:12px;
white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
}
#navi fieldset li.clearB{width:0 ;height:0 ; padding:0; margin:0; border-width:0;}
#navi fieldset li a{display:block; padding:0 1px; line-height:16px;
border-bottom:2px solid #ccc;
}
#navi  li.admin-menu a{
	border-bottom-color:red;
}
#navi fieldset li a:hover
,#navi fieldset li a:focus
,#navi  li.on a{ 
text-decoration:none;
color:#009; border-bottom-color:#039;
}

.showMobile{ display:none;}
.mobileGap{height:44px;}

#navi fieldset li a{
-webkit-transition: ALL 0.5s ease-out;
-moz-transition: ALL 0.5s ease-out;
}


/* - 메뉴토클 */
#navi fieldset .toggles{overflow:hidden;font-size:12px;float:right; display:none}
.toggles div{cursor:pointer;}
#navi fieldset .toggles-on{border-color:green}
#navi fieldset .toggles-off{border-color:blue;}
.toggles-off .toggle-off{display:none;}
.toggles-on .toggle-on{display:none;}

/* 반응형 */
@media screen and (min-width:1001px) {
	#navi fieldset .toggles{display:none;}
	#navi.on .toggle{}
	#navi.off .toggle{}
	.showMobile{ display:none;}

}
@media screen and (max-width:1000px) {
	#navi{position:fixed;top:0;left:0; width:100%;z-index:1000; box-shadow:0px 5px 20px 0px #999;}
	/* 변화 */
	#navi{transition: background-color 1s ease-out;}
	#navi.off{ background-color:#FFF; }
	#navi.on{ background-color:#ffe; 
	}
	#navi legend{transition: background-color 1s ease-out;}
	#navi.on legend{background-color:#ffe;}
	#navi fieldset .toggles{display:block}
	#navi.off .toggle{display:none}
	#navi fieldset{float:none;}
	.showMobile{ display:block;}
}

/* 메뉴건너뛰기 */
#skip{position:absolute;top:0;left:0;width:100%;text-align:right;z-index:99999}
#skip a{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} 
#skip a:focus { position:static; width:auto; height:auto; } 

.nav{text-align:right; font-size:11px;}