.banner {
	width: 100%;
}

.banner img {
	display: block;
	width: 100%;
}

.main {
	background-color: #FFFFFF;
	padding-top: 60px;
	padding-bottom: 140px;
}

.main .contact {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.main .contact .l,
.main .contact .r {
	width: 50%;
	box-sizing: border-box;
	padding: 0 95px;
	padding-top: 30px;
	padding-bottom: 50px;
}

.main .contact .l {
	background-color: #f7f7f7;
}

.main .contact .r {
	background-color: #eeeeee;
}

.main .contact .l h5,
.main .contact .r h5 {
	font-size: 25px;
	color: #1a1919;
	font-weight: bold;
	line-height: 81px;
}

.main .contact .l p,
.main .contact .r p {
	font-family: 'pingfang';
	font-size: 18px;
	color: #000000;
	line-height: 36px;
	padding: 2px 0px;
}

.main .map_box {
	box-sizing: border-box;
  	padding: 20px;
  	background-image: url(../images/contact_bg.jpg);
  	background-repeat: no-repeat;
  	background-position: center center;
}
 
.main #map {
  width: 100%;
  height: 540px;
  
}

@media screen and (max-width: 1430px) {
	.main .contact .l, .main .contact .r {
		padding: 0 40px;
		padding-top: 30px;
		padding-bottom: 50px;
	}
}

@media screen and (max-width: 550px ) {
	
	.main {
		padding-top: 20px;
		padding-bottom: 70px;
	}
	
	.main .contact {
		flex-flow: row wrap;
	}
	
	.main .contact .l, .main .contact .r {
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
	}
	
	.main .contact .l h5, .main .contact .r h5 {
		font-size: 18px;
		line-height: 42px;
	}
	
	.main .contact .l p, .main .contact .r p {
		font-size: 16px;
		line-height: 32px;
	}
	
	.main .map_box {
		padding: 10px;
	}
	
	.main #map {
		height: 240px;
	}
	
	
}