#bookList ul,
#photoBox ul{
	overflow:hidden;
	margin: 30px 0;
}
#bookList ul li,
#photoBox ul li{
	position: relative;
	float:left;
	width: 23%;
	margin: 10px 1%;
}
#bookList ul li:nth-child(4){
	margin-right:0;
}
#bookList ul li .photo{
	background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;	
}
#bookList ul li .photo a,
#photoBox ul li a.photo{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	background-image:url(/images/32/index-profile-style.png);
	transition:all ease-in-out 0.2s;
}
#bookList ul li .photo a img,
#photoBox ul li .photo a img{
	display: block;
}
#bookList ul li .info{
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
	padding-bottom: 20px;
}
#bookList ul li .info h3{
	text-align:center;
	font-size:22px;
	width: 80%;
    margin: 0 auto 10px;
}
#bookList ul li .info h3 a{
	color:#fff;
}
#bookList ul li .info p{
	text-align:center;
	width: 80%;
    margin: 0 auto;
	height: 48px;
    overflow: hidden;
}
#bookList ul li .info p a{
	color:#fff;
	font-size:12px
}
#bookList ul li .info p.more{
	display: none;
	transition:all ease-in-out 0.4s;
	margin-top: 0;
}
#bookList ul li .info p.more a{
	color: #fff;
    display: inline-block;
    border: 1px solid #fff;
    padding: 0 15px;
}
#bookList ul li:hover .photo a{
	background-image:url(/images/32/index-profile-style-hover.png);
}
#bookList ul li:hover .info p.more{
	display: block;
	margin-top: 30%;
}
#photoBox ul{
}
@media screen and (max-width: 768px) {
	#bookList ul li,
	#photoBox ul li{
		width: 48%;
	}
}
@media screen and (max-width: 450px) {
	#bookList ul li,
	#photoBox ul li{
		width: 98%;
	}
}