#products .productList{
	 overflow:hidden;
} 
#products .productList >div{
	float:left;
	width: 24.25%;
	margin-right:1%;
    margin-bottom: 25px;
}
#products .productList >div:nth-child(4n){
	margin-right: 0;
}
#products .p-box{
	position: relative;
	margin: 0 10px;
}
#products .p-box .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#products .p-box h3{
	text-align:center;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.7);
	padding: 5px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#products .p-box h3 a{
	color:#fff;
	font-size:16px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */



.grid-item a{ display:block; position:relative;}
.grid-item a p{position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 40px);
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    text-shadow: 0 0 2px #000, 0 0 2px #000;}

/* 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 (max-width: 980px) {
	
}
@media screen and (max-width: 768px) {
	#products .productList >div,
	#products .productList >div:nth-child(4n){
		width: 32.33%;
		margin-right:1%;
	}
	#products .productList >div:nth-child(3n){
		margin-right: 0;
	}
	
}

@media screen and (max-width: 640px) {
	#products .productList >div,
	#products .productList >div:nth-child(4n),
	#products .productList >div:nth-child(3n){
		width: 49.5%;
	}
	#products .productList >div:nth-child(2n){
		margin-right: 0;
	}

	#bookBox .wall-column { width: 100%; }
}
@media screen and (max-width: 480px) {
	#products .productList >div,
	#products .productList >div:nth-child(4n),
	#products .productList >div:nth-child(3n),
	#products .productList >div:nth-child(2n){
		width: 100%;
		margin-right: 0;
	}
}