#content{position: relative;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding: 25px 0;}
#content .img{
    width: 50%;
    animation-name: fadeInLeft;
    -webkit-animation-name: fadeInLeft;
    overflow: hidden;
}
#content .img a{
    height: 100%;
    background-size: cover;
    outline: 1px solid #ffffff6b;
    outline-offset: -36px;
}
#content .img img{
    width: 100%;
    height: 400px;
}
#content #describe{
    width: 40%;
}
#content #describe .booktitle h2{
    display: block;
    font-size: 31px;
    margin-bottom: 20px;
    color: #0c5397;
}


/* bookList */
#bookList ul { font-size: 0; }
#bookList ul li {
    position: relative;
    overflow: hidden;
    margin: 20px;
    width: calc((100% / 3) - 40px);
    display: inline-block;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
} 
#bookList ul li a.photo img{width: 100%;}
#bookList ul li h3 {padding: 5px 20px;width: calc(100% - 40px);background: #fff;bottom: -99px;left: 0;}
#bookList ul li h3 a {padding: 15px 25px;height: 59px;font-size: 19px;color: #222;-webkit-line-clamp: 2;}
#bookList ul li:hover h3{
	-webkit-transform: translate(0px,-25px);
    -moz-transform:translate(0px,-25px);
    transform: translate(0px,-25px);
}

/* album-info */
#album-info {-moz-column-count: 4;-moz-column-gap: 15px;-webkit-column-count: 4;-webkit-column-gap: 15px;column-count: 4;column-gap: 15px; }
#album-info .album_box {margin: 0 0 15px; }
      
@media screen and (min-width:1281px) {
#bookList ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
#bookList ul li:hover h3 { bottom: 0; }
}
@media screen and (max-width:1280px) {
 #bookList ul li { margin: 20px 10px;width: calc((100% / 3) - 20px); }
 #album-info {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3; }
}
@media screen and (max-width:1024px){#bookList ul li h3 a{
    height: 52px;
}}

@media screen and (max-width:980px) {
 #bookList ul li { margin: 20px;width: calc(50% - 40px); }
 #bookList ul li h3 {bottom: 0; }
 #album-info {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2; }
#content{
    flex-direction: column;
}
    #content .img{
    width: 85%;
}
    #content #describe{
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}
@media screen and (max-width:640px) {
 #bookList ul li { margin: 20px 10px;width: calc(50% - 20px); }
}
@media screen and (max-width:500px) {
 #bookList ul { text-align: center; }
 #bookList ul li {width: calc(80% - 20px); }
 #album-info {-moz-column-count: 1;-webkit-column-count: 1;column-count: 1; }
#content .img img{
    height: 238px;
}
    #content #describe .booktitle h2{
    font-size: 25px;
}
}
@media screen and (max-width:400px) {
 #bookList ul li { width: calc(100% - 20px); }
};