/* bookList */
#bookList ul { font-size: 0; }
#bookList ul li {position: relative;overflow: hidden;margin: 20px;width: calc((100% / 2) - 40px);display: inline-block;}
#bookList ul li a.photo img { width: 100%; }
#bookList ul li h3 {/* position: absolute; *//* padding: 5px 20px; *//* width: calc(100% - 40px); *//* background: rgba(255, 255, 255, .6); *//* bottom: -99px; *//* left: 0; */margin-bottom: 20px;}
#bookList ul li h3 a {padding: 15px 25px;height: 32px;font-size: 33px;color: #fff;-webkit-line-clamp: 1;}
#bookList .mmoren{
    color: #f2f2f2;
    font-size: 28px;
}
#bookList ul li:hover .immbfo{
	opacity: 1;
}
#bookList .immbfo{
        position: absolute;
        bottom: 152px;
        z-index: 5;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
}

img.BOBOJ{
    width: 50px;
    margin-top: 20px;
}
/* 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% / 2) - 20px);}
	#album-info { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}
@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; }
	#bookList .immbfo{
	    position: relative;
	    bottom: 0;
	    background: #135598;
	    opacity: 1;
	}
	img.BOBOJ{
	    display: none;
	}
	#bookList .mmoren{
	    font-size: 20px;
	}
	#bookList ul li h3 a{
    font-size: 24px;
}
}
@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; }
}
@media screen and (max-width:400px) {
	#bookList ul li { width: calc(100% - 20px); }
}