* {
	margin:0;
	padding:0;
}
ul li {
	list-style:none;
}
.wrap {
	width:530px;
	height:530px;
	background:#ddd;
	margin:100px auto;
	padding-top:20px;
}
.wrap > p {
	text-indent:1em;
	font-size:25px;
	font-weight:bold;
	color:#fff;
}
.wrap .list {
	position:relative;
	margin:50px 0 0 100px;
}
.wrap .list li {
	float:left;
}
.wrap .list li input {
	position:relative;
	z-index:-1;
}
.wrap .list li label {
	display:block;
	width:80px;
	height:50px;
	background:#6A9E52;
	text-align:center;
	line-height:50px;
	font-size:18px;
	color:#fff;
	cursor:pointer;
	border-radius:3px 3px 0 0;
	border:10x solid #6A9E52;
	transition:.3s;
}
.wrap .list li input:checked ~ div {
	display:block;
}
.wrap .list li input:checked + label {
	margin-top:-5px;
	padding-top:5px;
	background:#376B1F;
}
.wrap .list li label:hover {
	background:#508437;
	text-decoration:underline;
}
.wrap .list li div {
	position:absolute;
	top:68px;
	left:-40px;
	width:400px;
	height:220px;
	background:#376B1F;
	padding-top:20px;
	display:none;
}
.wrap .list li div p {
	margin:10px 0 20px 20px;
	color:#fff;
	font-size:18px;
}