body,figure,figcaption,p,h4{
	margin:0;
	padding:0;
	border:0;
	font-family:'微软雅黑';
}
.all{
	width:100%;
	height:100%；
}
img{
	width:1260px;
	height:780px;
}
figure{
	position:relative;
	width:33.33%;
	height:350px;
	float:left;
	overflow:hidden;
}
figcaption{
	position:absolute;
	top:0;
	left:0;
}
figure img{
	transition:all 0.4s;
	opacity:0.8;
}
figure figcaption p,h4,span,div{
	transition:all 0.4s;
}
@media screen and (max-width:600px){
	figure{width:100%;}
}
@media screen and (min-width:601px) and (max-width:1000px){
	figure{width:50%;}
}
@media screen and (min-width:1001px){
	figure{width:33.33%}
}

.photo_1 figcaption{
	padding:20px;
}
.photo_1 figcaption p{
	background:#fff;
	margin-top:2px;
}
.photo_1 figcaption p{
	text-align:center;
	transform:translate(-190px,0);
}
.photo_1 figcaption p:nth-of-type(1){
	transition-delay:0.05s;
}
.photo_1 figcaption p:nth-of-type(2){
	transition-delay:0.15s;
}
.photo_1 figcaption p:nth-of-type(3){
	transition-delay:0.25s;
}
.photo_1:hover figcaption p{
	transform:translate(0,0);
}
.photo_1:hover img{
	transform:translate(-50px,0);
	opacity:0.5;
}

.photo_2 figcaption{
	width:100%;
	height:100%;
}
.photo_2 figcaption h4{
	margin-top:15%;
	margin-left:15%;
}
.photo_2 figcaption p
{margin-left:15%;
	transform:translate(0,-50px);
	opacity:0;
}
.photo_2 figcaption div{
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	transform:translate(0,-350px) rotate(0deg);
	border:1px solid #fff;
}
.photo_2:hover figcaption div{
	transform:translate(0,0) rotate(360deg);
}
.photo_2:hover img{
	opacity:0.5;
}
.photo_2:hover figcaption p{
	transform:translate(0,0);
	opacity:1;
}

.photo_3 figcaption{
	top:30%;
	left:15%;
}

.photo_3 figcaption p{
	transform:skew(90deg);
}
.photo_3 figcaption h4{
	transform:skew(90deg);
	transition-delay:0.2 s;
}
.photo_3:hover img{
	opacity:0.5;
}
.photo_3:hover figcaption p{
	transform:skew(0deg);
}
.photo_3:hover figcaption h4{
	transform:skew(0deg);
}

.photo_4 figcaption{
	width:100%;
	height:100%;
}
.photo_4 figcaption h4{
	margin-top:15%;
	margin-left:15%;
	transform:scale(1.2,1.2);
	opacity:0;
}
.photo_4 figcaption p{
	margin-top:5px;
	margin-left:15%;
	transform:scale(1.2,1.2);
	opacity:0;
}
.photo_4 figcaption div{
	position:absolute;
	border:1px solid #fff;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	transform:scale(1.2,1.2);
	opacity:0;
}
.photo_4:hover figcaption div{
	transform:scale(1,1);
	opacity:1;
}
.photo_4:hover img{
	opacity:0.5;
	transform:scale(1.2,1.2);
}
.photo_4:hover p{
	transform:scale(1,1);
	opacity:1;
}
.photo_4:hover h4{
	transform:scale(1,1);
	opacity:1;
}

.photo_5{
	
}
.photo_5 figcaption{
	width:100%;
	height:100%;
}
.photo_5 figcaption h4{
	margin-top:15%;
	margin-left:15%;
	transform:translate(0,50px);
	opacity:0;
}
.photo_5 figcaption div{
	position:absolute;
	top:0;
	left:0;
	width:130%;
	height:100%;
	background:#fff;
	margin-top:77.7%;
}
.photo_5 figcaption div ul{
	float:right;
	margin-top:5%;
	margin-right:30%;
	transform:rotate(15deg);
}
.photo_5:hover figcaption h4{
	transform:translate(0,0);
	opacity:1;
}
.photo_5:hover figcaption div{
	transform:rotate(-15deg);
	transform-origin:0 0;
}

.photo_6{}

.photo_6 figcaption{
	width:100%;
	height:100%;
}
.photo_6 figcaption h4{
	margin-top:10%;
	margin-left:10%;
}
.photo_6 figcaption p{
	margin-top:10%;
	margin-left:25%;
	transform:translate(0,30px);
	opacity:0;
}
.photo_6 figcaption .one{
	position:absolute;
	width:80%;
	height:60%;
	top:20%;
	left:10%;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	opacity:0;
}
.photo_6 figcaption .two{
	position:absolute;
	width:60%;
	height:80%;
	top:10%;
	left:20%;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	opacity:0;
}
.photo_6:hover figcaption .one{
	animation:myone 0.8s 1;
	opacity:1;
}
.photo_6:hover figcaption .two{
	animation:mytwo 0.8s 1;
	opacity:1;
}
.photo_6:hover figcaption h4{
	transform:translate(80px,40px);
}
.photo_6:hover figcaption p{
	transform:translate(0,0);
	opacity:1;
}
@keyframes myone{
	0%{
		width:0;
	}
	30%{
		width:20%;
	}
	60%{
		widht:40%;
	}
	90%{
		width:60%;	
	}
	100%{
		width:80%;
	}
}
@keyframes mytwo{
	0%{
		height:0;
	}
	30%{
		height:20%;
	}
	60%{
		height:40%;
	}
	90%{
		height:60%;	
	}
	100%{
		height:80%;
	}
}

footer address{
	padding:20px;
}