@charset "utf-8";
/* CSS Document */

.title::before, .title::after{
	content:'';
	display:block;
	margin:0px auto;
	height:30px;
	width:1px;
	background:#FFF;
	opacity:0.3;
}
.title::after{
	margin:10px auto 0 auto;
}

.listWrap{
	position:relative;
	margin:20px 0;
	overflow:hidden;
	text-align:center;
}
.workList{
	margin:0 auto;
}
.workList li{
	position:relative;	
	float:left;
	width:298px;
	height:198px;
	overflow:hidden;
	border:solid 1px transparent;
}
.workList a::before{
	position:absolute;
	top:0;
	left:0;
	content:'';
	width:100%;
	height:100%;
	background:#212121;
	display:block;
	z-index:-1;
}
.pic{
	position:relative;
	width:100%;
	display:block;
	background-position:left center;
	background-size:cover;
	opacity:0;
	
	-webkit-transition:opacity 1s linear 1.2s;
	-moz-transition:opacity 1s linear 1.2s;
	-ms-transition:opacity 1s linear 1.2s;
	-o-transition:opacity 1s linear 1.2s;
	transition:opacity 1s linear 1.2s;
}
.workList li:nth-child(3n) .pic{
	-webkit-transition:opacity 1s linear 1.4s;
	-moz-transition:opacity 1s linear 1.4s;
	-ms-transition:opacity 1s linear 1.4s;
	-o-transition:opacity 1s linear 1.4s;
	transition:opacity 1s linear 1.4s;
}
.workList li:nth-child(2n) .pic{
	-webkit-transition:opacity 1s linear 1.6s;
	-moz-transition:opacity 1s linear 1.6s;
	-ms-transition:opacity 1s linear 1.6s;
	-o-transition:opacity 1s linear 1.6s;
	transition:opacity 1s linear 1.6s;
}
.workList li:nth-child(4n) .pic{
	-webkit-transition:opacity 1s linear 1.8s;
	-moz-transition:opacity 1s linear 1.8s;
	-ms-transition:opacity 1s linear 1.8s;
	-o-transition:opacity 1s linear 1.8s;
	transition:opacity 1s linear 1.8s;
}

.workList img{
	width:100%;
	opacity:1;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;	
	transition:all 0.3s linear;
}
.casename{
	position:absolute;
	right:0;
	left:0;
	bottom:-68px;
	height:48px;
	padding:10px 25px;
	background:rgba(33,33,33,0.5);
	z-index:2;
	font-size:0.9em;
	line-height:1.5em;
	text-align:left;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.num{
	font-size:0.8em;
	color:#b5975b;
	margin-left:0px;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.num::after{
	content:'';
	display:inline-block;
	width:30px;
	height:1px;
	background:#b5975b;
}

/*選單滑入效果*/
.workList li:hover img{
	opacity:0;
}
.workList li:hover .casename{
	bottom:0;
}
.workList li:hover .num{
	margin-left:-15px;
}
/*進場動線*/
.innerContent{
	opacity:0;
	
	-webkit-transition:opacity 1s linear 1s;
	-moz-transition:opacity 1s linear 1s;
	-ms-transition:opacity 1s linear 1s;
	-o-transition:opacity 1s linear 1s;
	transition:opacity 1s linear 1s;
}
.showNow .innerContent, .showNow .pic{
	opacity:1;
}

@media screen and (max-width:1100px){
.workList{
	width:900px;
}	
.workList li{
	height:auto;
}
.casename{
	position:static;
	padding:5px 25px;
}
}
@media screen and (max-width:940px){
.workList{
	width:600px;
}	
}
@media screen and (max-width:640px){
.workList{
	width:300px;
}	
}
@media screen and (max-width:320px){
.workList{
	overflow:hidden;
	width:100%;
}
.workList li{
	width:100%;	
	border:none;
}
}

@media screen and (max-height:700px){
.title::before{
	height:15px;
}	
.title::after{
	display:none;
}
}