/*book*/
#articleBox { padding: 0 25px; }

.book-content { display: flex; flex-wrap: wrap; }
.book-item { width: 30%; position: relative; overflow: hidden; margin: 0 1.58% 30px; }
.book-item a.photo { width: 100%; background-size: cover; filter: brightness(0.7); transition: ease .3s; display: block; }
.book-item:hover a.photo { filter: brightness(1); transform: scale(1.1); }
.book-item .info { width: 100%; padding-right: 30px; padding-left: 15px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.book-item .info::after { content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: yellow; }
.book-item .info h3 { text-align: right; }
.book-item .info .title { color: #fff; font-size: 28px; letter-spacing: 2px; line-height: 1.1; text-align: right; -webkit-line-clamp: 1; }
.book-item .info .bookline { display: block; width: 100%; height: 1px; background: rgba(238, 238, 238, 0.7); margin: 20px 0px; }
.book-item .info .btn { width: 100%; color: #fff; letter-spacing: 2px; transition: ease .3s; font-weight: bold; display: inline-block; margin: 0px; }
.book-item:hover .info .btn { letter-spacing: 6px; }

/* bookBox */
#bookBox .wall { position: relative; overflow: hidden; display: block; }
#bookBox .wall-column { position: relative; float: left; width: 50%; 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; }

/* album-info */
#album-info #bookBox .wall-column { width: calc(100% / 3); }
#bookBox .wall-column .album_box img { width: 100%; }

@media screen and (max-width: 1280px) {
	#album-info #bookBox .wall-column { width: 50%; }
	.book-item .info .title { font-size: 24px; }
}
@media screen and (max-width: 1024px) {
	#articleBox { padding: 0px; }
}
@media screen and (max-width: 768px) {
	.book-item { width: 46%; }
	.book-item .info .title { font-size: 20px; }
}
@media screen and (max-width: 640px) {
	#bookBox .wall-column, #album-info #bookBox .wall-column { width: 100%; }
}
@media screen and (max-width: 580px) {
	.book-item { width: 100%; }
}