.banner{width: 1100px;max-width: 100%;margin: 20px auto;text-align: center;}
.banner img{max-width: 100%;display: flex;}

.list{width: 1100px;max-width: 100%;margin: 0 auto;}
.list1{display: flex;justify-content: center;box-sizing: border-box;padding: 40px 30px;flex-wrap: wrap;}
.list1 h2{font-size: 32px;}
.list1 pre{text-align: center;}


.list2{box-sizing: border-box;padding: 40px 0px 50px 0;flex-wrap: wrap;}
.list2 h4{text-align: center;font-size: 20px;margin: 30px 0 0 0;color: #666666;}
.list2 ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 40px;}
.list2 ul li{position: relative;}
.list2 ul .l1{width: 100%;margin-bottom: 30px;}
.list2 ul .l1 img{width: 100%;display: flex;}
.list2 ul .l2{width: 37%;}
.list2 ul .l2 img{width: 100%;display: flex;}
.list2 ul .l3{width: 57%;}
.list2 ul .l3 img{width: 100%;display: flex;}


@media only screen and (max-width: 1000px) {	
	.list3 ul li h5{width: 200px;height: 200px;line-height: 200px;font-size: 36px;}
}
@media only screen and (max-width: 900px) {	
	.list3 ul li h5{width: 180px;height: 180px;line-height: 180px;font-size: 32px;}
}
@media only screen and (max-width: 800px) {	
	.list3 ul li h5{width: 160px;height: 160px;line-height: 160px;font-size: 28px;}
}
@media only screen and (max-width: 750px) {	
	.list1{padding: 20px 10px;}
	
	.list1 h2{font-size: 24px;}
	
	.list2{box-sizing: border-box;padding: 20px 10px 50px 10px;flex-wrap: wrap;}
	.list2 ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 20px;}
}
@media only screen and (max-width: 500px) {
	
	
}
@media only screen and (max-width: 400px) {
	
}