@charset "utf-8";
/* CSS Document */
#toggle-menu{
	display:none;
	/*position: fixed;*/
	margin-right:5px;
	margin-top:5px;
	margin-bottom:5px;
	width:40px;
	height:40px;
	background-image: url(../images/icon/menu.png);
	background-position: center;
	background-size: cover;

	/*background-color:rgba(100,100,100,.9);*/
	color: #fff;
	/*text-align: center;
	line-height: 40px;*/
	/*border-radius: 8px;*/
	transition: all .3s ease-out;
}
#ch1{
	position: absolute;
/*	left: -10000px;
	top: -10000px;*/
	opacity: 0;
}



#menu-container{
	width: auto;
	background-color: rgb(70, 70, 70);
	margin-bottom: 15px;
}
#main-menu{
	width:1200px;
	height:40px;
	margin:0  auto;
	/*background-color:#444;*/
}
#main-menu>ul{
	list-style:none;
}
#main-menu>ul>li{
	width:20%; 
	height:40px;
	float:right;
	/*background-color:rgba(0,0,0,.7);*/
}

#main-menu>ul>li>a{
	display:block;
	width:100%; /* 1200/5: 240px:20% */
	height:40px;
	/* float:right; */
	/*background-color:rgba(0,0,0,1);*/
	background-color: rgb(70, 70, 70);
	/*box-shadow:0 0 0 1px #000 inset;*/
	text-decoration:none;
	color:#ddd;
	text-align:center;
	line-height:40px;
	transition: all .8s linear;
	font-size: 0.8em;
}
#main-menu>ul>li>a:hover{
	color:gold;
}
#main-menu>ul>li>a>input{
	background-color: transparent;
	border: 1px solid #777;
	padding: 0.3em;
	border-radius: 0.4em;
	color:#777;
	width: 80%;
}


@media all and (max-width: 1200px) {
	#main-menu {
		width: 100%;
	}

}


@media all and (max-width: 800px) {
	
	#toggle-menu{
		display:block;
	}
	
	/*#ch1:checked+nav {*/
	#ch1:checked~#menu-container {
		height: 240px;
	}

	#ch1:checked~#toggle-menu{
    transform: rotateZ(-90deg);

	}
	
	#main-menu>ul>li>a>input{
	width: 30%;
	}


	#menu-container{
		height: 0;
		overflow: hidden;
		transition:all .7s ease-in;
	}

	#main-menu>ul>li{
		width:100%;
	}
}