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

/*作品選單*/
.workList{
	position:relative;
	padding-bottom:120px;
	margin:20px 20px 20px 20px;
}
.item{
	float:left;
	width:300px;
	height:200px;
	
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
}
.marginT{margin-top:100px;}


.item a{
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
}

.item a img{
	width:100%;
	height:auto;
	
	-webkit-transition:all 0.6s linear;
	transition:all 0.6s linear;
}

.casename{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.7);
	text-align:center;
	opacity:0;
	
	-webkit-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
}
.casename::before{
	content:'';
	display:inline-block;
	vertical-align:middle;
	width:0;
	height:100%;
}
.name{
	display:inline-block;
	vertical-align:middle;
	color:#333;
}

/*滑入效果*/
.item a:hover .casename{
	opacity:1;
}
.item a:hover img{
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	
	-webkit-transition:all 3s linear;
	transition:all 3s linear;
}


/*作品內頁*/
.work{
	background:#1f1f1f;
	font-size:0.875em;
	overflow:hidden;
}
.fotorama{margin:50px 30px;}

.thumbWrap{
	position:absolute;
	bottom:7px;
	left:50%;
	margin-left:-190px;
	width:380px;
	padding-top:30px;
	text-align:center;
}
.thumbBtn li{
	width:5px;
	height:5px;
	cursor:pointer;
	padding:10px;
	display:inline-block;
}
.thumbBtn li::before{
	content:'';
	background:#999;
	display:block;
	width:100%;
	height:100%;
}
.thumbBtn li.on::before, .thumbBtn li:hover::before{
	background:#fff;
}
.maskThumb{
	position:absolute;
	top:0;
	left:0;
	width:30px;
	height:30px;
	overflow:hidden;
	box-shadow:1px 1px 5px rgba(0,0,0,0.3);
}
.thumbImg{position:relative;}
.thumbImg img{float:left;}

.casename2{
	position:absolute;
	bottom:15px;
	left:30px;
}
.control{
	position:absolute;
	right:30px;
	bottom:15px;
	font-weight:700;
}
.control div{
	display:inline-block;
	vertical-align:middle;
	margin:0 5px;
	height:2em;
	min-width:20px;
	cursor:pointer;
}
.control div.picNum{cursor:default;}
.idPrev{background:url(../images/prev.gif) no-repeat center;}
.idNext{background:url(../images/next.gif) no-repeat center;}
.idAuto{background:url(../images/stop.gif) no-repeat center;}
.idAuto.autoPlay{background:url(../images/play.gif) no-repeat center;}
.idClose{background:url(../images/close.gif) no-repeat center;}
.idClose a{display:block;}
.idPrev, .idNext, .idAuto, .idClose{opacity:0.5;}
.idPrev:hover, .idNext:hover, .idAuto:hover, .idClose:hover{opacity:1;}

.work .share {right:30px;}