/* bookList */
#bookList ul {font-size: 0;margin-top: 60px;}
#bookList ul li { position: relative; overflow: hidden; margin: 20px; width: calc((100% / 3) - 40px); display: inline-block; }
#bookList ul li a.photo img { width: 100%; }
#bookList ul li h3 {position: absolute;padding: 10px 20px;width: calc(100% - 40px);background: #ffffff;bottom: -99px;left: 0;}
#bookList ul li h3 a {padding: 0;height: 32px;font-size: 19px;color: #222;-webkit-line-clamp: 1;text-align: center;}

/* album-info */
#album-info {display: grid;grid-template-columns: repeat(3, 1fr);}
#album-info .album_box {margin: 0 20px 40px;}
#album-info .album_box img{height: 300px;width: 100%;min-width: 100%;object-fit: cover;}
						
@media screen and (min-width:1281px) {
	#bookList ul li:hover a.photo img {background: rgb(0 0 0 / 50%);}
	#bookList ul li:hover h3 { bottom: 0; }
}
@media screen and (max-width:1280px) {
	#bookList ul li {margin: 10px;width: calc((100% / 3) - 20px);}
}
@media screen and (max-width: 1024px) {
	#album-info {    grid-template-columns: repeat(2, 1fr);}
	#album-info .album_box{margin: 0 10px 20px;}
}
@media screen and (max-width:980px) {
	#bookList ul li { margin: 20px; width: calc(50% - 40px); }
	#bookList ul li h3 { bottom: 0; }
}
@media screen and (max-width:640px) {
	#bookList ul li { margin: 20px 10px; width: calc(50% - 20px); }
}
@media screen and (max-width:500px) {
	#bookList ul li h3{
    position: relative;
}
	#bookList ul { text-align: center; }
	#bookList ul li { width: calc(80% - 20px); }
	#album-info {grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width:400px) {
	#bookList ul li { width: calc(100% - 20px); }
}