.banner {
	width: calc(100% - 80px);
  	margin: 0 auto;
}

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

.main {
	background-color: #FFFFFF;
  padding-bottom: 120px;
  padding-top: 86px;
}

.main ul.product_typelist {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

.main ul.product_typelist li {
  width: calc((100% - 90px) / 3);
  margin: 0 15px;
  margin-bottom: 46px; 
}

.main ul.product_typelist li .pic {
	position: relative;
}

.main ul.product_typelist li .pic img {
  display: block;
  width: 100%;
}

.main ul.product_typelist li p {
  font-family: 'pingfang';
  font-size: 30px;
  color: #1a1512;
  letter-spacing: 2px;
  line-height: 58px;
  font-weight: 600;
  padding-top: 34px;
}

.main ul.product_typelist li span {
  display: block;
  font-family: 'helv';
  font-size: 16px;
  color: #979797;
  line-height: 44px;
  font-weight: 600;
}

.main ul.product_typelist li .pic .layer {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.4s;
	opacity: 0;
	transform: scale(0.7);
}

.main ul.product_typelist li .pic .layer:after {
	content: "";
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	border: 2px solid #FFFFFF;
	position: absolute;
	left: 30px;
	top: 30px;
}

.main ul.product_typelist li:hover span {
  color: #f0741e;
}

.main ul.product_typelist li:hover .pic .layer {
	opacity: 1;
	transform: scale(1);
}

@media screen and (max-width: 1430px ) {
	.banner {
		width: 100%;
	}
}

@media screen and (max-width: 550px ) {
	
	.main {
		padding-top: 20px;
		padding-bottom: 70px;
	}
	
	.main ul.product_typelist {
		margin-left: -5px;
		margin-right: -5px;
	}
	
	.main ul.product_typelist li {
		width: calc((100% - 20px) / 2);
		margin: 0 5px;
		margin-bottom: 10px;
	}
	
	.main ul.product_typelist li p {
		padding-top: 0px;
		font-size: 14px;
		line-height: 32px;
	}
	
	.main ul.product_typelist li span {
		font-size: 14px;
		line-height: 24px;
	}
	
}