*{
	margin: 0;
	padding: 0;
}
.cneter{
	width: 1200px;
	margin: 0 auto;
}
.context{
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
}
.context .big{
	width: 100%;
	border-bottom: 1px solid #000;
}
.context .top{
	display: flex;
	justify-content: space-between;
}
.context .mid{
	display: flex;
	margin: 30px auto;
	width: 1200px;
}
.context .zt{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.context .zt .left{
	margin-right: 20px;
	display: flex;
	width: 500px;
}
.context .zt .lefts{
	margin-right: 20px;
	display: flex;
}
.context .mid img{
	width: 100%;
}
.context .ts{
	width: 60%;
	margin: 0 auto;
	display: inherit;
}
.context .bottom{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
}
.context .bottom img{
	width: 100%;
}
@media screen and (max-width: 768px){
	.cneter{
		width: 570px;
	}
	.big .top img:nth-of-type(1){
		width: 380px;
	}
	.big .top img:last-child{
		width: 180px;
	}
	.list li{
		margin: 0 10px;
		font-size: 12px;
	}
	.context .mid{
		width: 570px;
	}
	.context .zt .left{
		margin-right: 10px;
		display: flex;
		width: 580px;
		height: 320px;
	}
}

@media screen and (min-width: 768px) and (max-width: 992px){
	.cneter{
		width: 750px;
	}
	.big .top img:nth-of-type(1){
		width: 460px;
	}
	.big .top img:last-child{
		width: 290px;
	}
	.list li{
		margin: 0 20px;
		font-size: 14px;
	}
	.context .mid{
		width: 750px;
	}
	.context .zt .left{
		margin-right: 10px;
		display: flex;
		width: 600px;
		height: 430px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px){
	.cneter{
		width: 970px;
	}
	.context .mid{
		width: 970px;
	}
	.context .zt .left{
		margin-right: 10px;
		display: flex;
		width: 590px;
		height: 557px;
	}
}