/* bookList */
#bookList { font-size: 0; }
#bookList li { overflow: hidden; position: relative; display: inline-block; }
#bookList li a.photo { width: 325px; height: 325px; }
#bookList li h3 a { padding: 10px 20px; height: 30px; display: block; font-weight: 400; font-size: 18px; color: #131315; -webkit-line-clamp: 1; }

/* bookBox */
#bookBox .wall { position: relative; overflow: hidden; display: block; }
#bookBox .wall-column { position: relative; float: left; width: calc(100% / 3); display: block; box-sizing: border-box; }
#bookBox .wall-column .article { position: relative; margin: 15px; }
#bookBox .wall-column .album_box { box-shadow: 0 0 10px #c0c0c0; }
#bookBox .wall-column .article a { display: block; }
#bookBox .wall-column .article h3 { position: absolute; width: 100%; bottom: 0; left: 0; }
#bookBox .wall-column .article h3 a { margin: 10px; padding: 10px; background: rgba(255, 255, 255, .7); text-align: center; font-size: 18px; color: #444; }
#bookBox .wall-column .album_box img { width: 100%; }

@media screen and (max-width: 1500px) {
	#bookList li a.photo { width: 320px; height: 320px; }
}
@media screen and (max-width: 1360px) {
	#bookList li a.photo { width: 290px; height: 290px; }
}
@media screen and (max-width: 1360px) {
	#bookList li a.photo { width: 290px; height: 290px; }
}
@media screen and (min-width: 1281px) {
	#bookList li h3 { position: absolute; width: 100%; background: rgba(30, 29, 36, .9); bottom: -50px; left: 0; }
	#bookList li:hover h3 { bottom: 0; }
	#bookList li h3 a { color: #fff; }
}
@media screen and (max-width: 1280px) {
	#bookList li a.photo { margin: 10px; width: calc(30vw - 20px); height: calc(30vw - 20px); }
	#bookList li h3 a { text-align: center; }
	#album-info #bookBox .wall-column { width: 50%; }
}
@media screen and (max-width: 768px) {
	#bookList li a.photo { width: calc(45vw - 20px); height: calc(45vw - 20px); }
	#bookBox .wall-column , #album-info #bookBox .wall-column { width: 100%; }
}
@media screen and (max-width: 480px) {
	#bookList li { display: block; text-align: center; }
	#bookList li a.photo { width: calc(80vw - 20px); height: calc(80vw - 20px); display: inline-block; }
}