@charset "utf-8";
/* CSS Document */
.projects-title { /*font-family: Helvetica_4;*/ font-size: 20px; line-height: 120px; font-weight: bold; margin: 0px; letter-spacing: 1px; text-align:center }
.projects-gallery { background-color: #F7F7F7; margin: 70px 0 0; padding: 0px 0px 70px; }
.projects { line-height: 22px;}
	.projects li { float: left; width: calc((100% - 30px) / 4); margin: 0 10px 10px 0; }
		.projects a { overflow: hidden; position: relative; display: block; padding-top: 69.57%; background-size: auto 100%; background-position: 50%; color: #FFF; }
			.projects p { opacity: 0; transition: opacity 0.3s; position: absolute; left: 0px; right: 0px; top: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height:100%; width:100%; background-color:#333; }
			.projects span { opacity: 0; transition: opacity 0.3s; position: absolute; left: 18px; right: 18px; top: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
				.projects b { font-family: Helvetica_1; display: block; margin-bottom: 1px; font-weight: normal; }
			.project-image { transition: transform 1s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: 50%; }
		.projects a:hover .project-image { transform: scale(1.05); }
		.projects a:hover p { opacity: 0.4; }
			.projects a:hover span { opacity: 1; }
	.projects li:nth-of-type(4n) { margin-right: 0; }
.more { 	margin: 55px 0px 0px 0px;text-align:center}
.more span{
	color: #999999;
	border: #cecece 1px solid;
	text-align: center;
	letter-spacing: 1px;
	padding:15px 80px 15px 80px;
}
@media screen and (max-width: 900px){
.projects-title { /*font-family: Helvetica_4;*/ font-size: 16px; line-height: 80px; font-weight: bold; margin: 0px; letter-spacing: 1px; text-align:center }
.projects-gallery { background-color: #F7F7F7; margin: 20px 0 0; padding: 0px 0px 20px; }
	.projects { font-size: 12px; line-height: 18px; }
/*		.projects li { width: calc((100% - 10px) / 2); margin: 0 10px 10px 0; }
		.projects li:nth-of-type(2n) { margin-right: 0; }  */
		.projects li { width: 100%; margin: 0 0 20px 0; }
		.projects li:nth-of-type(2n) { margin-right: 0; }
		.projects li:nth-of-type(3n) { margin-right: 0; }
		.projects span { opacity: 1; left: 10px; right: 10px; bottom: 9px; }
		.projects b { margin-bottom: 0; }
.more {	margin: 25px 0px 20px 0px;text-align:center}
.more span{	padding:15px 80px 15px 80px;}
}