* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	text-decoration:none;
	list-style:none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:transparent;
	-webkit-appearance:none;
	-webkit-font-smoothing:antialiased;
	font-family:"microsoft yahei",Arial,Helvetica,sans-serif;
}
.max_box {
	width:100%;
	height:100%;
	background-color:black;
	position:absolute;
}
input[type='checkbox'] {
	width:0;
}
.wrapper {
	width:580px;
	height:130px;
	margin:100px auto;
	padding:0 20px;
}
.wrapper > h3 {
	font-size:16px;
	color:snow;
}
li {
	width:120px;
	height:50px;
	float:left;
	padding:12px 0;
}
li:nth-child(4n+1)  ~ li:nth-child(4n+3) {
	margin-left:20px;
}
label {
	width:125px;
	height:32px;
	display:block;
	cursor:pointer;
}
.check_container {
	width:18px;
	height:18px;
	border:1px solid snow;
	float:left;
	margin-top:6px;
	position:relative;
}
input[type='checkbox']:checked + .check_container:before {
	content:'';
	position:absolute;
	width:3px;
	height:10px;
	border-right:2px solid snow;
	border-bottom:2px solid snow;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	left:6px;
}
input[type='checkbox']:checked + .check_container + span {
	color:lightseagreen;
}
h3 + ul label > span {
	display:block;
	float:left;
	width:107px;
	height:30px;
	line-height:30px;
	color:hotpink;
	text-align:left;
	font-size:16px;
	padding-left:12px;
}