/* navi */

input[type=checkbox].navi-check { display:none; }

@media screen and (min-width: 1281px) {
	#navi > .container { width:1280px; }
}
@media screen and (max-width: 1280px) and (min-width: 641px) {
	#navi > .container { width:1080px; }
}
@media screen and (max-width: 640px) {
	#navi > .container { width:640px; } 
}

#navi label { font-weight:normal; }

#navi-control {
	display:none; }
#navi > .container {
	padding:0; }
#navi > .container > ul {
	margin:0 0 -2px;
	*zoom: 1; 
	display:table;
	padding:0;
	list-style:none; }

#navi > .container > ul > li {
	padding:0;
	border-bottom:10px #0066cc solid;
	cursor:pointer;
	position:relative;
	vertical-align:top;
	display:table-cell;
	text-align:center;
	list-style:none; }

#navi > .container > ul > li > label {
	display:block;
	padding:16px 0 0; }

#navi > .container > ul > li > a {
	overflow:hidden;
	text-decoration:none;
	display:block;
	color:#ffffff;
	padding:16px 30px; }

#navi > .container > ul > li > a:hover {
	opacity:0.5; }

#navi > .container > ul > li:nth-child(1) a span {
	display:none; }

@media screen and (min-width: 641px) {

	#navi > .container > ul > li:hover {
		background:#003399; }
	#navi > .container > ul > li > ul {
		z-index:20000;
		margin:0;
		padding:0;
		list-style:none;
		position:absolute;
		top:50px;
		background:#003399;
		min-width:240px; }
	#navi > .container > ul > li > ul{
		padding:10px 0;
		visibility: hidden;
		opacity: 0;
		transition: 0s; }

	#navi > .container > ul > li:hover ul{
	  visibility: visible;
	  opacity: 1; }
	#navi > .container > ul > li > ul li a{
	  visibility: hidden;
	  opacity: 0;
	  transition: .5s; }
	#navi > .container > ul > li:hover ul li a{
	  visibility: visible;
	  opacity: 1; }

	#navi > .container > ul > li > ul > li {
		text-align:left;
		color:#fffff;
		padding:5px 20px;
		white-space:nowrap;
		background:#003399; }

	#navi > .container > ul > li > ul > li > a {
		color:#ffffff; }

	#navi > .container > ul > li > a {
		text-align:center;
		font-size:16px; }
	#navi > .container > ul > li > a:hover {
		opacity:1; }
	#navi > .container > ul > li > label {
		text-align:center;
		font-size:16px; }
	#navi > .container > ul > li:nth-child(1) a:before {
		font-size:24px; }
}

@media screen and (min-width: 1280px) {
	#navi > .container > ul > li > ul { left:0; }
}
@media screen and (max-width: 1160px) and (min-width: 1081px) {
	#navi > .container > ul > li:nth-child(2) > ul,
	#navi > .container > ul > li:nth-child(3) > ul,
	#navi > .container > ul > li:nth-child(4) > ul,
	#navi > .container > ul > li:nth-child(5) > ul {
		left:0; }
	#navi > .container > ul > li:nth-child(6) > ul {
		right:0; }
	#navi > .container { width:1080px; }
}
@media screen and (max-width: 1080px) and (min-width: 641px) {
	#navi > .container > ul > li:nth-child(2) > ul,
	#navi > .container > ul > li:nth-child(3) > ul,
	#navi > .container > ul > li:nth-child(4) > ul,
	#navi > .container > ul > li:nth-child(5) > ul {
		left:0; }
	#navi > .container > ul > li:nth-child(6) > ul {
		right:0; }
	#navi > .container { width:1080px; }
}

@media screen and (max-width: 640px) {

	#navi > .container > ul > li:nth-child(1) a span {
		display:inline-block; }

	#navi > .container > ul > li:nth-child(1) a i {
		display:inline-block;
		margin-right:5px; }

	#navi-control {
		padding:10px 10px 10px;
		text-align:left;
		display:block; }
	#navi-open {
		overflow:hidden;
		text-align:center;
		padding:10px;
		font-size:26px;

		border:1px solid #cccccc;
		display:inline-block;
		border-radius:5px;
		cursor:pointer; }
	#navi-open i {
		margin-right:10px; }

	#navi input[type=checkbox].navi-check:checked + ul {
		display:block; }

	#navi > .container > ul {
		display:none; }
	#navi > .container > ul > li > ul {
		display:none; }
	#navi > .container > ul > li {
		width:100%;
		border-top:1px solid #cccccc;
		padding:0;
		font-size:26px;
		display:block; }
	#navi > .container > ul > li > label,
	#navi > .container > ul > li > a {
		font-weight:normal;
		padding:10px 20px;
		display:block;
		text-align:left;
		font-size:20px; }
	#navi > .container > ul > li > ul {
		margin:0;
		color:#003399;
		background:#ffffff;
		width:100%; }
	#navi > .container > ul > li > ul > li {
		width:100%;
		color:#003399;
		background:#ffffff;
		border-top:1px #cccccc dotted; }

	#navi > .container > ul > li > ul > li > a {
		color:#003399;
		background:#ffffff;
		padding:10px 20px;
		display:block;
		text-align:left;
		font-size:20px; }

	#navi > .container > ul > li:nth-child(1) {
		border-left:none; }
	#navi > .container > ul > li:nth-child(1) a:before {
		font-size:18px; }

}