@charset "utf-8";
/* CSS Document */
/*【default】*/
/*------------------------content-----------------------------------*/
	#content{
		width: 100%;
	}
/*-----------------photoBox--------------------*/
	#photoBox{
		width: 1000px;
		margin: 0 auto;
	}
	.photo {
		position: relative;
		width: 300px;
		height: 300px;
		margin: 0 16px 30px 16px;
		float: left;
		overflow:hidden;
	}
/*照片(photo_img)*/
	.photo .photo_img{
		width:300px;
		height:300px;
		transition:transform 0.5s ease;
	}
	.photo:hover .photo_img{
		transform:scale(1.2);
	}
	.photo .photo_img#img1{
		background:url(../img/products/1.jpg) center;
		background-size:cover;
	}
	.photo .photo_img#img2{
		background:url(../img/products/2.jpg) center;
		background-size:cover;
	}
	.photo .photo_img#img3{
		background:url(../img/products/3.jpg) center;
		background-size:cover;
	}
	.photo .photo_img#img4{
		background:url(../img/products/1.jpg) center;
		background-size:cover;
	}
	.photo .photo_img#img5{
		background:url(../img/products/2.jpg) center;
		background-size:cover;
	}
	.cases .photo .photo_img#img1{
		background:url(../img/cases/1.jpg) center;
		background-size:cover;
	}
	.cases .photo .photo_img#img2{
		background:url(../img/cases/2.jpg) center;
		background-size:cover;
	}
	.cases .photo .photo_img#img3{
		background:url(../img/cases/1.jpg) center;
		background-size:cover;
	}
	.cases .photo .photo_img#img4{
		background:url(../img/cases/2.jpg) center;
		background-size:cover;
	}
	.cases .photo .photo_img#img5{
		background:url(../img/cases/1.jpg) center;
		background-size:cover;
	}

/*照片名稱(photo_title)*/
	.photo .photo_title{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		/* height: 20%; */
		background-color: #34495E;
		padding: 10px 0;
		transition: bottom 0.3s ease,opacity 0.5s ease;
	}
	.photo .photo_title h4, #content .photo .photo_title p{
		color: #fff;
		/* margin-top: 18px; */
		transition:color 0.3s ease;
		padding-bottom: 0;
	}
	.photo .photo_title p:before{
		content: "完工日期: ";
	}
	.photo:hover .photo_title h4, #content .photo:hover .photo_title p{
		color:#AACFD0;
	}
	
/*熒幕尺寸【小於】1025時頁面顯示---平板*/
@media (max-width:1024px) {
/*------------------------contentHere-------------------------------*/
/*-----------------photoBox--------------------*/
	#photoBox{
		width: 450px;
	}
	.photo {
		width: 200px;
		height: auto;
		margin: 0 12px 50px 12px;
	}
/*照片(photo_img)*/
	.photo .photo_img {
		width: 200px;
		height: 200px;
	}
/*照片名稱(photo_title)*/
/* 	.photo .photo_title h4 {
		margin-top: 8px;
	} */
}

/*熒幕尺寸【小於】481時頁面顯示---手機*/
@media (max-width: 480px) {
/*------------------------contentHere-------------------------------*/
/*-----------------photoBox--------------------*/
	#photoBox {
		width: 300px;
	}
	.photo {
		margin: 0 50px 50px 50px;
	}
}