body{
	margin: 0;
	background:#eff3f5;
}
a{
	color: #333;
	text-decoration: none;
}
.header{
	width: 80%;
	height:100px;
	margin: 20px auto;
}
.header a{
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #bbbcde;
	font-size: 16px;
	font-weight: 600;
	text-align: center;;
	line-height: 100px;
	color: #fff;
	transition: all .5s ease;
}
.header a:hover{
	background-color: #ff0036;
	box-shadow: 0 0 14px rgba(0,0,0,.1);
}
.content{
	width: 80%;
	margin:20px auto;
	overflow: hidden;
/*	background-color: #fff;*/
}
.content .box-wrap{
	width: 25%;
	box-sizing: border-box;
	padding: 10px 0;
	cursor: pointer;
	float: left;
}
.content .box-wrap .box{
	border-radius: 3px;
	margin: 15px 10px 20px 10px;
	overflow: hidden;
	border-radius: 5px;
	background-color: #fff;
	padding-bottom: 10px;
	transition: all .3s ease;
}
.content .box-wrap .box:hover{
	background-color: #fff;
	box-shadow: 0 0 14px rgba(0,0,0,.2);
	opacity: .8;
}
.content .box-wrap .box img{
	width: 100%;
}
.content .box .title{
	box-sizing: border-box;
	padding: 20px 10px 10px 10px;
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.content .box .tag{
	padding: 0 10px 10px 10px;
	font-size: 12px;
	color: #999;
}
.content .box .date{
	border-top: 1px solid #eee;
	padding: 10px;
	font-size: 12px;
	color: #999;
}
@media screen and (max-width: 720px) {
	.content{width: 98%;}
	.content .box-wrap{width: 50%;}
}