#album{margin-bottom:100px}
.bookStyle{overflow:hidden;position:relative}
.bookStyle .info{color:#fff}
.bookStyle .info h3{text-align:center;font-size: 30px;line-height:110%;}
.bookStyle .info h3 a{/* color:#fff */}
.bookStyle .info h4{text-align:center;color:#acacac;font-size:18px;line-height:120%;margin: 40px 0 40px;font-weight:400;}
.bookStyle .info h5{text-align:center}
.bookStyle .info h5 a{display:inline-block;background: #3f3f3f;font-size:14px;color: #ffffff;padding:15px 50px;font-weight:700;}
.bookStyle .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size: cover;background-color: rgb(255 255 255 / 0%);}
.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}

#album .bList{margin: 0;overflow: hidden;}
#album .bList >div{    float: left;    width: calc(100% / 4);}
#album .bList .mofd{margin: 5px;}
#album .bList .mofd .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#album .bList .mofd .photo a{display:block}
#album .bList .mofd .photo a img{width:100%}
#album .bList .mofd h3{font-size:20px;font-weight:400;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;background-color: #292929;padding: 10px 0;}
#album .bList .mofd h3 a{color: #ffffff;display: block;transition: all linear .2s;}
#album .bList .mofd:hover h3 a{
    opacity: .7;
    letter-spacing: 2px;
}
#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 > div{
    width: calc((100%/3) - 25px);
    margin: 10px;
    display: inline-block;
    vertical-align: top;
    /* height: 270px; */
    overflow: hidden;
}
#bookBox .wall > div a img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#bookBox .wall-column { position: relative; float: left; width: 50%; display: block; box-sizing: border-box; }
#bookBox .wall-column .article {position: relative;margin: 10px 0px;}
#bookBox .wall-column .album_box {}
#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 (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}
.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}
#album .bList >div{
    width: calc(100% / 3);
}
}
@media screen and (max-width: 1280px) {
.bookStyle .info h3{font-size:35px}
.bookStyle .info h4{margin:30px 0 20px;font-size:13px}
#bookBox .wall > div {
    width: calc((100%/2) - 25px);
    /* height: 210px; */
}
}
@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:30px}
.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 .bList >div{
    width: calc(100% / 2);
}
#bookBox .wall-column { width: 100%; }
#album .bList .mofd{    margin: 0 10px 50px 10px;}
}
@media screen and (max-width: 480px) {
#album .bList .mofd{    margin: 0 6px 20px 6px;}
#album .bList .mofd h3{font-size: 16px;}
#bookBox .wall > div {/* height: 100px; */}
.bookStyle .info h3{font-size:25px}

}