@charset "UTF-8";

/*--------------------------------------------------------------------
works.html
example.html
works.css
--------------------------------------------------------------------*/


/*------------about---------------------------------------------------------------*/
div#about div#aboPho {
	width: 400px;
	float: right;
}
div#about div#aboTxt {
	width: 560px;
	float: left;
}


/*------------example---------------------------------------------------------------*/
div#example ul {
	width: 100%;
	margin-bottom: -20px;
	list-style: none;
	overflow: hidden;
}
div#example ul li {
	width: 320px;
	margin-right: 10px;
	margin-bottom: 20px;
	float: left;
}
div#example ul li:nth-child(3n) { margin-right: 0; }
div#example ul li p {
	position: relative;
	height: 240px;
	overflow: hidden;
}
div#example ul li p img {
	position: absolute;
	height: 100%;
	object-fit: cover;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	    -ms-transform: translate(-50% , -50%);
	        transform: translate(-50% , -50%);
}
.object-fit-img { object-fit: cover; }
div#example ul li p + p {
	position: relative;
	height: auto;
	margin-top: 0.35em;
	text-align: center;
	overflow: hidden;
}