#album{/* margin-bottom:100px; */overflow: hidden;}
#album li{
    display: inline-block;
    width: calc((100%/3) - 25px);
    margin: 10px;
    vertical-align: top;
}
.bookStyle{overflow:hidden;position:relative}
.bookStyle .info{color:#fff;margin-top: 10px;}
.bookStyle .info h3{text-align:center;font-size: 25px;line-height:110%;transition: all linear 0.3s;}
#album li:hover .bookStyle .info h3{
    transform: translateY(24px);
}
.bookStyle .info h3 a{color: #292929;}
.bookStyle .info h4{text-align:center;color:#acacac;font-size: 14px;line-height:120%;margin: 5px 0;font-weight:400;transition: all linear 0.3s;}
#album li:hover .bookStyle .info h4{
    transform: translateY(-28px);
}
.bookStyle .info h5{text-align:center;display: none;}
.bookStyle .info h5 a{display:inline-block;background: #2b52a0;font-size:14px;color: #ffffff;padding: 10px 50px;font-weight:700;border-radius: 50px;}
.bookStyle .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size: cover;}
.bookStyle .photo a img{width:100%}
#album-info{display:flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:-webkit-flex;flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;-webkit-flex-wrap:wrap}
#album-info::after{content:'';flex-grow:999999999;-moz-flex-grow:999999999;-ms-flex-grow:999999999;-o-flex-grow:999999999;-webkit-flex-grow:999999999;min-width:200px;height:0}

/* 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 5px rgba(0, 0, 0, 0.2);}
#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 */
#bookBox .wall-column { width: calc(100% / 3); }
#bookBox .wall-column .album_box img { width: 100%; }


@media screen and (max-width: 1280px) {
	#bookBox .wall-column { width: 50%; }
}
@media screen and (min-width: 1025px) {
.bookStyle .info h5 a{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
.bookStyle .info h5 a:hover{color:#fff}
.bookStyle .info h5 a span{position:relative;z-index:2}
.bookStyle .info h5 a:after{top:0;position:absolute;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);content:'';display:block;width:100%;height:100%;left:0;background:#292929;z-index:1;/* border-radius: 50px; */}
.bookStyle .info h5 a:hover:after{transform:scale(1,1);transform-origin:left center 0}
}
@media screen and (max-width: 1680px) {
.bookStyle .info h3{/* font-size:70px */}
}
@media screen and (max-width: 1440px) {
.bookStyle .info h3{/* font-size:50px */}
}

@media screen and (max-width: 1280px) {
.bookStyle .info h3{/* font-size:35px */}
.bookStyle .info h4{/* margin:30px 0 20px; *//* font-size:13px; */}

}
@media screen and (min-width: 641px) {
.bookStyle .info{/* position:absolute; *//* width:350px; *//* left:calc((50% - 350px) / 2); *//* top:20%; */}
.bookStyle .photo{/* margin-left:50%; *//* width:50%; */}
#album li:nth-child(even) .info{left:inherit;right:calc((50% - 350px) / 2)}
#album li:nth-child(even) .photo{margin:0}
}
@media screen and (max-width: 640px) {
.bookStyle .info h3{font-size: 20px;}
.bookStyle .info{/* padding:35px 0 50px */}
.bookStyle .info h4{margin:5px 0 20px}
.bookStyle .info h5 a{display:block}
#bookBox .wall-column { width: 100%; }
#album li {    width: calc((100%/2) - 25px);}
}
@media screen and (max-width: 480px) {
.bookStyle .info h3{font-size:18px}
}