.blind:after { display: none; }
#album { overflow: hidden; margin-bottom: 50px; }
.bookStyle { position: relative; overflow: visible; width: calc(50% - 201px); margin: 0 100px 50px; float: left; }
.bookStyle:nth-child(even) { margin-top: 100px; }
.bookStyle .photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.bookStyle .photo a img { width: 100%; height: 100%; object-fit: cover; }
.bookStyle .info { z-index: 2; left: -100px; width: 52%; text-align: right; top: 30%; position: absolute; }
.bookStyle .info h3 { font-size: 40px; text-align: right; writing-mode: initial; margin: 0; background: #166691; position: relative; }
.bookStyle .info h3 a { color: #fff; display: inline-block; width: auto; height: auto; padding: 4px 10px; font-weight: 400; line-height: 120%; position: relative; z-index: 2; }
.bookStyle .info h4 { font-size: 20px; line-height: 120%; text-align: right; background: #000; color: #fff; display: inline-block; padding: 6px 12px; font-weight: 400; margin-top: 5px; writing-mode: initial; }
.bookStyle .photo, .bookStyle .info h3 a, .bookStyle .info h4, .bookStyle .info h3 { transition: all linear .3s; }
.main-article.moreW .workframe { width: 90%; }
.main-article #describe { overflow: hidden; }
.main-article.moreW article { margin: 10px; overflow: hidden; }
#community { padding: 50px 10px; overflow: hidden; }

.grid-item a { display: block; position: relative; margin: 10px; }
.grid-item a p { position: absolute; bottom: 0; left: 0; width: calc(100% - 40px); padding: 10px 20px; color: #fff; background: #0000006b; }

/* bookBox */
#bookBox .wall { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; }
#bookBox .wall-column { position: relative; float: left; width: 100%; display: flex; flex-wrap: wrap; }
#bookBox .wall-column .article { position: relative; margin: 15px; }
#bookBox .wall-column .album_box { box-shadow: 0 0 10px #c0c0c0; display: flex; width: calc(33.3% - 31px); }
#bookBox .wall-column .article a { display: block; object-fit: cover; width: 100%; }
#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 */
#bookBox .wall-column .album_box img { width: 100%; height: 400px; object-fit: cover; }

@media screen and (max-width: 1280px) {
	#bookBox .wall-column .album_box { width: calc(50% - 31px); }
}
@media screen and (min-width: 1025px) {
	.bookStyle:hover .photo { width: 110%; height: 110%; left: -5%; top: -5%; }
	.bookStyle .info h3:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; z-index: 1; transform: scale(0, 1); transform-origin: right center 0; transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); }
	.bookStyle:hover .info h3:after { transform: scale(1, 1); transform-origin: left center 0; }
}
@media screen and (max-width: 1024px) {
	.bookStyle { width: calc(50% - 101px); margin: 0 50px; }
	.bookStyle .info { left: -50px; }
	.bookStyle .info h3 { font-size: 30px; }
	.bookStyle .info h4 { font-size: 15px; }
}
@media screen and (max-width: 768px) {
	.bookStyle:nth-child(even) { margin-top: 50px; }
	.bookStyle .info h3 { font-size: 22px; }
	.bookStyle .info h4 { font-size: 12px; }
}
@media screen and (max-width: 640px) {
	#bookBox .wall-column .album_box { width: calc(50% - 7px); margin: 3px 3px; }
	#bookBox .wall-column .album_box img { height: 215px; }
	.bookStyle { width: calc(70% - 101px); margin: 20px 50px; float: none; }
	.bookStyle:nth-child(even) { margin: 0 0 0 50px; margin-left: calc(30% + 50px); }
	.bookStyle .info { width: 137px; }
	.main-article.moreW .workframe { width: 100%; }
	#bookBox .wall-column { width: 100%; }
}
@media screen and (max-width: 480px) {
	.bookStyle { width: calc(80% - 41px); margin: 20px 20px; }
	.bookStyle:nth-child(even) { margin: 0 0 0 20px; margin-left: calc(20% + 20px); }
}