#book{ position:relative; z-index:2}
#book ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 40px;
    overflow: initial;
}
#book .mofd,#book .border .info p{}
#book .border .photo img,#news li .photo a img{width:100%}
#book .border .photo img{aspect-ratio:3.5/3;object-fit: cover;object-position: top;}
#book .border .photo{
    position: relative;
    overflow: hidden;
}
#book .border{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;transition:all linear .1s}
#book .border a{position:absolute;width:100%;height:100%;display:block;top:0;left:0;z-index:3}
#book .border .info{width: 100%;padding: 20px;}
#book .border .info p{display:inline-block;padding:5px 20px;font-size:11pt;border-radius:25px;margin-bottom:15px;font-weight:700}
#book .border .info h3{line-height:110%;text-align: center;position: relative;padding-bottom: 14px;border-bottom: 1px solid #c2c2c2;font-size: 26px;font-weight: 400;letter-spacing: 1px;color: #202020;margin-top: 30px;}
#bookBox .circleStyle{width:100%;height:90%;right:-30%;top:30px;background-image:url(/images/18/dots.png);background-position:50% 50%;z-index:1;border-radius:0}
#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;
	margin-bottom: 70px;
}
#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 10px #c0c0c0; }
#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) {
#book ul li:hover{transform: translate(0,-15px);}
}
@media screen and (max-width: 980px) {
	#book ul{grid-template-columns: repeat(3, 1fr);gap: 20px 20px;}
}
@media screen and (max-width: 768px) {
#book .border .info h3{font-size:20px}
#book .border .info{padding:20px}
}
@media screen and (max-width: 640px) {
#book li,#book li:nth-child(2n){width:100%;padding:0;}
#bookBox .topic{position:relative;width:auto;padding:0 0 70px}
#bookBox .wall-column { width: 100%; }
	#book ul{grid-template-columns: repeat(1, 1fr);gap: 10px 10px;}
}