.layout{
	background: url(../imgs/img1.jpg);position: relative;
}
.layout .list{
	text-align: center;
}
.layout .list ul{
	font-size: 0;text-align: center;
margin-top: 200px;
}
.layout .list li{
	display: inline-block;width:230px ;
	height:450px ;margin: 0 21px;box-shadow: 0 0 4px 2px rgba(0,0,0,0.3);
}
html,body,.layout{
	height: 100%;
}
.layout .list li a{
	display: block;height: 100%;
	position: relative;transition: all 0.5s;
}
.layout .list li .txt{
	position: absolute;left: 0;right: 0;bottom:45px ;text-align: center;
}
.layout .list li .txt h3{
	font-size:18px ;line-height: 24px;color: #ffffff;
	text-transform: uppercase;transition: all 0.3s;
}
.layout .list li .txt p{
	font-size:14px ;line-height: 24px;color: #fff;transition: all 0.3s;
}
.layout .list li.l1 a{
	background:#009ce8 ;
}
.layout .list li.l2 a{
	background:#f4c212 ;
}
.layout .list li.l3 a{
	background:#f29000 ;
}
.layout .list li.l4 a{
	background:#fde7d2 ;
}
.layout .list li:nth-child(2n) h3,
.layout .list li:nth-child(2n) p{
	color: #3d3d3d;
}
.layout .list li.l1:hover h3,
.layout .list li.l1:hover p{
	color: #009ce8;
}
.layout .list li.l1:hover a{
	background: #fff;
}
.layout .list li.l2:hover h3,
.layout .list li.l2:hover p{
	color: #f4c212;
}
.layout .list li.l2:hover a{
	background: #3d3d3d;
}
.layout .list li.l3:hover h3,
.layout .list li.l3:hover p{
	color: #fde7d2;
}
.layout .list li.l3:hover a{
	background: #fff;
}
.layout .list li.l4:hover h3,
.layout .list li.l4:hover p{
	color: #f4c212;
}
.layout .list li.l4:hover a{
	background: #3d3d3d;
}
.layout .copy{
	position: absolute;left: 0;right: 0;bottom: 20%;z-index: 1;
	text-align: center;font-size: 14px;color: #ffffff;line-height: 1.7;
}
@media only screen and (max-width:750px) {
	.layout{
		width: 100%;margin: 0 auto;overflow: hidden;
	}
	.layout .list li{
		margin: 0;
	}
	.layout .list ul{
		margin: 0;
	}
	.layout .list{
		margin:150px;margin-bottom: 250px;
	}
	.layout.active .list{
		margin:50px 100px 70px;
	}
	.layout .copy{
		bottom: 30px;font-size: 24px;
	}
	.layout .list li .txt h3{
		font-size: 26px;line-height: 1.2;
	}
	.layout .list li .txt p{
		font-size: 24px;line-height: 1.7;
	}
	.layout.active .list .txt h3{
		font-size: 20px;
	}
	.layout.active .list .txt p{
		font-size: 18px;
	}
	.layout.active .copy{
		font-size: 18px;
	}
}