@charset "utf-8";

#menu {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}
#menu li{
	display: block;
	float: left;
	width: 16.4%;
	margin: 0;
	padding: 0;
}
#menu li a {
	display: block;
	padding: 15px 0 15px;
	background-color: #fff;
	color: #000;
	text-align: center;
	text-decoration: none;
	border-right:1px solid #228B22;
}
#menu li:last-child a{
	border: none;
}
#menu li a:hover{color: #fff;
	background: #228B22;
}
#toggle {
	display: none;
}
@media only screen and (max-width: 768px) {
	#menu li {
		width: 16.6%;
		border-bottom: 1px solid #fff;
	}
}
@media only screen and (max-width: 480px) {
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #228B22;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #228B22;
		color:#fff;
		text-align: center;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #228B22;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
}