#body .mc-col-r-pos.darkalpha_blackbg { background-color: rgba(0,0,0,0.8); color: #fff; overflow: hidden; }
#body .white-link { color: #fff;  font-family: Verdana, Arial, Helvetica, sans-serif; }
#body .white-link:hover { color: #0066cc; }
.col-wrp { width: calc(100% + 15px); display: flex; flex-direction: row; flex-wrap: wrap; }
.col-wrp .col{ /* float: left; */ width: 151px;  margin-right: 15px; display: flex;  flex-direction: column; }
.col-wrp .col .item-flex{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
.col-wrp .col .item-title { min-width: 100%; width: 0; flex-grow: 1; flex-shrink: 0; flex-basis: auto;  }
.col-wrp .col .booklink { min-width: 100%; width: 0; font-size: 11px; padding: 5px; min-height: calc(2.8em + 10px); }
.col-wrp [onclick] { cursor: pointer; }
.img-wrp{ width: 100%; padding-bottom: calc(100% / 151 * 212); }
.img-wrp .img{  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.col-wrp .col .mask { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #ffffff; }
.col-wrp .col .item-container { overflow: hidden; }
.col-wrp .col .item-container .caption { display: block; opacity: 0; position: absolute; bottom: 5px; left: 5px; font-size: 11px; width: calc(100% - 10px); background: #000000; color: #ffffff; padding: 5px; }
.col-wrp .col .item-container:hover .caption { opacity: 1; transition: opacity .5s ease-in-out; }
#body .text14 { font-size: 14px; }
@media only screen and (max-width: 767px) {
	.col-wrp{ width: calc(100% + 10px); }
	.col-wrp .col{ width: calc(33.33% - 10px); margin-right: 10px; }
}
@media only screen and (max-width: 480px) {
	.col-wrp .col{ width: calc(50% - 10px); }
}