.book_list{
	color:#3c3c3c;
	margin: 20px 0 50px;
	overflow:hidden;
}
.book_list >div{
	float:left;
	width:24%;
	margin:0 0.5% 30px;
}
.book_list .main_book .photo{
	display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-position: 50%;
    background-size: auto 100%;
	margin: 0 auto;
	transition:all ease-in-out 0.5s;
	-moz-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
}
.book_list .main_book:hover .photo{
	transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}
.book_list .main_book h4{
	font-size:18px;
	text-align:center;
	font-weight:normal;
	margin-top: 20px;
}
.book_list .main_book h4 a{
	color:#3c3c3c;
}
.book_list .main_book h4 a:hover{
	color:#000;
}
.book_list .main_book span{
	display:block;
	background:#d2d2d2;
	width:59px;
	height:1px;
	margin:20px auto;
	transition:all ease-in-out 0.5s;
	-moz-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
}
.book_list .main_book:hover span{
	width:70%;
}
.book_list .main_book .detail article{
	font-size:14px;
	text-align:center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
#album .subphto ul li {
	margin: 0 5px 10px;
	width: 23%;
	float: left;
	background-position: center;
    background-size: 150%;
    background-repeat: no-repeat;
	transition:all ease 0.6s;
	background-color: rgba(0, 0, 0, 0.1);
}
#album .subphto ul li:hover {
    background-size: 100%;
	transition:all ease 0.6s;
}
#album .subphto ul li a {
	width: 100%;
	height: 200px;
	line-height:200px;
	display:block;
	overflow: hidden;
}
#album .subphto ul li img {
	width:100%;
}
#album-article{
	color: #5a5959;
}
@media screen and (max-width: 980px) {
	.book_list >div{
	    width: 32%;	
	}
	#album .subphto ul li{
	    margin: 0 1% 10px;
		width: 31%;	
	}
}
@media screen and (max-width: 780px) {
	.book_list >div{
	    width: 49%;	
	}
	#album .subphto ul li a{
		height: 150px;
		line-height: 150px;	
	}
}
@media screen and (max-width: 680px) {
	#album .subphto ul li{
		width: 48%;	
	}
}
@media screen and (max-width: 500px) {
	.book_list >div{
	    width: 99%;	
	}
	#album .subphto ul li a{
		height: 120px;
		line-height: 120px;	
	}
}