.html{
	height: 100%;
	background-color: white;
}

.body {
	height:100%;
	width: 100%;
	margin:0 auto;
	padding:0px;
	background-color: white;
}

#container {
	min-height: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: white;
	text-align: center;
	font-family: 'Times New Roman', serif;
	max-width: 1000px;

}

li {
	list-style: none;
}

a {
	text-decoration: none;
}




#contents{
	float: left;
	margin: 100px auto 30px;
	padding-top: 140px;
	max-width: 1000px;
	height: 100%;
	padding-bottom: 30px;
	margin: 0 auto 3%;
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;


}

#contents img {
	height: 200px;
	width: 300px;
	opacity: 0.7;

}

#items img:hover {
	position: relative;
	bottom: 10px;
	opacity: 1;
}


#items li a {
	display: block;
	width: 100%;
	height: 100%;
	color: black;
}


#items {
	clear: both;
	/*width: auto;*/
	max-width: 1062.5px;
	/*margin: -75px 0 0 -75px;*/
}

#items li {
	float: left;
	overflow: hidden;
	/*width: 33.3333%;
	padding: 0 6.25%;
	margin-bottom: 2px;
	box-sizing: border-box;*/
	/*width: 350px;*/
	width: 29.16%;
	margin: 0 6.25% 6.25% 0;
	/*margin: 75px 0 0 75px;*/
	/*margin: 0 75px 75px 0;*/	
	position: relative;

}

#items li:nth-child(3n) {
	margin-right: 0;
}


/*#items li:nth-child(4n) {
	margin: 0 6.25% 6.25% 0;

}
*/


/* PC */


/* tablet */
@media all and (max-width: 768px) {
	#contents {
		margin-top: 0;
		padding-top: 100px;

	}

	#items li {
		width: 45.57%;

	}

	#items li:nth-child(2n) {
	margin-right: 0;
	}

	#items li:nth-child(4n) {
	margin-left: 6.25%;
	}

	#contents img {
		/*width: 300px;
		height: 200px;*/

	}

	#

}
/* tablet */




/* smartphone */
@media all and (max-width: 480px) {
	#contents {
		margin-top: 0;
		padding-top: 70px;

	}

	.contents img {
		height: 200px;
		width: 300px;
	}


	#items li {
		width: 72.91%;
		/*padding: 0 18.75%;*/
		margin-left: 13.545%;
		}

	#items li:nth-child(4) {
		margin-left: 13.545%;
		
	}






}
/* smartphone */