/* ---- banner Style ---- */
.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	direction: ltr;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
}
.swiper-wrapper {
	position: relative;
	width: 100%;
	-webkit-transition-property: -webkit-transform, left, top;
	-webkit-transition-duration: 0s;
	-webkit-transform: translate3d(0px, 0, 0);
	-webkit-transition-timing-function: ease;
	-moz-transition-property: -moz-transform, left, top;
	-moz-transition-duration: 0s;
	-moz-transform: translate3d(0px, 0, 0);
	-moz-transition-timing-function: ease;
	-o-transition-property: -o-transform, left, top;
	-o-transition-duration: 0s;
	-o-transform: translate3d(0px, 0, 0);
	-o-transition-timing-function: ease;
	-o-transform: translate(0px, 0px);
	-ms-transition-property: -ms-transform, left, top;
	-ms-transition-duration: 0s;
	-ms-transform: translate3d(0px, 0, 0);
	-ms-transition-timing-function: ease;
	transition-property: transform, left, top;
	transition-duration: 0s;
	transform: translate3d(0px, 0, 0);
	transition-timing-function: ease;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	position: relative;
	overflow:hidden;
}
#banner_swiper{
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 18px;
	animation: fadeInUp 0.6s ease-out forwards;
	-moz-animation: fadeInUp 0.6s ease-out forwards;
	-webkit-animation: fadeInUp 0.6s ease-out forwards;
	-o-animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
	animation-delay: 1s;
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	-o-animation-delay: 1s;
}
#banner_swiper .swiper-slide{
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
#banner_swiper .swiper-slide img{
	display: none;
}
#banner_swiper .swiper-slide p{
	position: relative;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#banner_swiper .swiper-slide p span{
	position: absolute;
	left: -2.25%;
	padding: 0 2.5%;
	top: 52.88%;
	width: 56.5%;
	height: 106px;
	font-size: 30px;
	color: #fff;
	line-height: 40px;
	background: rgba(1, 76, 131, 0.84);
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	opacity: 0;
	-webkit-transform: translateY(-1000px);
	transform: translateY(-1000px)
}

@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-1000px);
		transform: translateY(-1000px)
	}

	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
		transform: translateY(30px)
	}

	80% {
		opacity: 1;
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-1000px);
		-ms-transform: translateY(-1000px);
		transform: translateY(-1000px)
	}

	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		transform: translateY(30px)
	}

	80% {
		opacity: 1;
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
}

#banner_swiper .swiper-slide-active p span {
	animation: bounceInDown 1.2s ease-out forwards;
	-moz-animation: bounceInDown 1.2s ease-out forwards;
	-webkit-animation: bounceInDown 1.2s ease-out forwards;
	-o-animation: bounceInDown 1.2s ease-out forwards;

}
#banner_swiper .pagination{
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
#banner_swiper  .swiper-pagination-switch{
	float: left;
	border-top-width: 7px;
	border-top-style: solid;
	border-top-color: #cccccc;
	width: 25%;
	padding:10px 1.5% 12px;
	height: 81px;
	line-height: 24px;
	font-size:18px;
	color: #333;
	position: relative;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: left;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	cursor: pointer;

}
#banner_swiper .swiper-pagination-switch::before{
	content: "";
	position: absolute;
	top:10px;
	left: 0;
	height: 52px;
	width: 1px;
	background: #ccc;
}
.swiper-active-switch{
	font-weight: bold;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+1){
	border-top-color: #c0333e;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+1)::before{
	background: #c0333e;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+1).swiper-active-switch{
	color: #c0333e;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+2){
	border-top-color: #cccccc;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+2)::before{
	background: #ccc;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+2).swiper-active-switch{
	color: #666;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+3){
	border-top-color: #014c83;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+3)::before{
	background: #014c83;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n+3).swiper-active-switch{
	color: #014c83;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n){
	border-top-color: #8fc320;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n)::before{
	background: #8fc320;
}
#banner_swiper  .swiper-pagination-switch:nth-child(4n).swiper-active-switch{
	color: #8fc320;
}
@media (max-width:1024px) {
	#banner_swiper .swiper-slide p span{
		width: 56.5%;
		height: 72px;
		font-size: 24px;
		line-height:32px;
	}
	#banner_swiper  .swiper-pagination-switch{
		border-top-width: 5px;
		padding:10px 1.5% 12px;
		height:57px;
		line-height: 20px;
		font-size:15px;
	
	}
	#banner_swiper .swiper-pagination-switch::before{
		height: 30px;
		top: 10px;
	}
}
@media (max-width:768px) {
	#banner_swiper .swiper-slide p span{
		width: 65%;
		height: 62px;
		font-size: 18px;
		line-height:24px;
	}
	#banner_swiper  .swiper-pagination-switch{
		border-top-width: 3px;
		padding:8px 1.5% 10px;
		height:45px;
		line-height: 18px;
		font-size:14px;
	}
	#banner_swiper .swiper-pagination-switch::before{
		height:24px;
		top: 8px;
	}
}
@media (max-width:475px) {
	#banner_swiper .swiper-slide p span{
		width: 65%;
		height: 48px;
		font-size: 15px;
		line-height:20px;
	}
	#banner_swiper  .swiper-pagination-switch{
		border-top-width: 3px;
		padding:5px 1.5% 5px;
		height:33px;
		line-height: 15px;
		font-size:13px;
	}
	#banner_swiper .swiper-pagination-switch::before{
		height:20px;
		top: 5px;
	}
}
/* ---- 大标题 Style ---- */
.mainhead{
	height: 51px;
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}
.mainhead::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 1px;
	width: 100%;
	line-height: 0px;
	font-size: 0px;
	background: #e8e9ea;
}
.darkhead::before{
	background:#116fb9;
}
.mainhead h1{
	display: inline-block;
	border-bottom: 1px solid #035393;
	height: 51px;
	line-height: 50px;
	padding: 0 12px;
	font-size: 24px;
	color: #014c83;
	font-weight: normal;
	position: relative;
	z-index: 1;
}
.darkhead h1{
	color: #fff;
	border-bottom: 1px solid #fff;
}
.mainhead a.more{
	position: absolute;
	bottom: 1px;
	right: 50%;
	margin-right: -600px;
	height: 22px;
	line-height: 22px;
	padding: 0 22px 0 0;
	font-size: 14px;
	color: #bbb;
	background: url(../image/icon.png) right center no-repeat;
}
.mainhead a.more:hover{
	text-decoration: none;
	background: url(http://www.zgpipes.com/skin/images/icon_blue.png) right center no-repeat;
}
.darkhead a.more:hover{
	text-decoration: none;
	background: url(../image/icon.png) right center no-repeat;
}
.mainhead a.more::before {
	color: #014c83;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	pointer-events: none;
}
.darkhead a.more::before{
	color: #fff;
}
.mainhead a.more:hover::before,
.mainhead a.more:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}
@media (max-width:1220px) {
	.mainhead a.more{
		right: 10px;
		margin-right:0;
	}
}
@media (max-width:1024px) {
	.mainhead{
		height: 45px;
		margin-bottom: 32px;
	}
	.mainhead h1{
		height: 45px;
		line-height: 44px;
		padding: 0 10px;
		font-size: 20px;
	}
	.mainhead a.more{
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	}
}
@media (max-width:768px) {
	.mainhead{
		height: 35px;
		margin-bottom: 18px;
	}
	.mainhead h1{
		height: 35px;
		line-height: 34px;
		padding: 0 18px;
		font-size: 18px;
	}
}
/* ---- 视频 Style ---- */
.videoBox{
	width: 48.75%;
	float: left;
	height: 320px;
	position: relative;
	overflow: hidden;
}
.videoBox video {
	object-fit: fill;
	width: 100%;
	height: 100%;
}
.videoBox .videobg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.videoBox p{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height:62px;
	line-height: 62px;
	font-size: 16px;
	color: #fff;
	padding: 0 13px;
	background: rgba(0, 0, 0, 0.7);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.videoBox .btn{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -38px;
	margin-top: -38px;
	width: 77px;
	height: 77px;
	background: url(http://www.zgpipes.com/skin/images/video_btn.png) no-repeat;
	background-size: 100% 100%;
	z-index: 1;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.videoBox:hover .btn{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.phoneVideo{
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	display: none;
	margin-bottom: 3px;
}
.phoneVideo .videobg{
	width: 100%;
	height: auto;
}

.phoneVideo p{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height:32px;
	line-height: 32px;
	font-size: 14px;
	color: #fff;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.7);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.phoneVideo .btn{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -22px;
	margin-top: -22px;
	width: 44px;
	height: 44px;
	background: url(http://www.zgpipes.com/skin/images/video_btn.png) no-repeat;
	background-size: 100% 100%;
	z-index: 1;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.phoneVideo:hover .btn{
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
@media (max-width:1024px) {
	.videoBox{
		height: 274px;
	}
	.videoBox p{
		height:44px;
		line-height: 44px;
		font-size: 15px;
		padding: 0 10px;
	}
	.videoBox .btn{
		margin-left: -30px;
		margin-top: -30px;
		width: 60px;
		height: 60px;
	}
}
@media (max-width:768px) {
	.videoBox{
		width: 100%;
		height: auto;
		margin-bottom: 3%;
	}
	.videoBox p{
		height:30px;
		line-height: 30px;
		font-size: 13px;
		padding: 0 8px;
	}
	.videoBox .btn{
		margin-left: -20px;
		margin-top: -20px;
		width: 40px;
		height: 40px;
	}
	.phoneVideo{
		display: none;
	}
}
/* ---- 新闻 Style ---- */
.newsBox{
	width: 48.25%;
	float: right;
}
.headlines{
	border-bottom:1px dotted #b0b0b0;
	padding: 0 0 18px;
	margin: 0 0 15px; 
}
.headlines h1{
	height: 32px;
	line-height: 32px;
	font-size: 18px;
	color: #014c83;
	font-weight: normal;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.headlines h1 a{
	color: #014c83;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.headlines h1 a:hover{
	text-shadow: 0 1px 1px rgba(1, 76, 131, 0.7);
	text-decoration: none;
}
.headlines p{
	height: 40px;
	line-height: 20px;
	text-indent: 2em;
	font-size: 14px;
	color: #999;
	overflow: hidden;
}
.newsList li{
	height: 30px;
	padding: 0 106px 0 22px;
	line-height: 30px;
	position: relative;
	font-size: 14px;
	color: #333;
	background: url(../image/icon.png) left center no-repeat;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.newsList li a:hover{
	text-decoration: none;
}
.newsList li:hover{
	background-position: 7px center;
}
.newsList li:hover a{
	color: #014c83;
	text-shadow: 0 1px 1px rgba(1, 76, 131, 0.7);
} 
.newsList li span{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	color: #999;
}
@media (max-width:1024px) {
	.headlines{
		padding: 0 0 15px;
		margin: 0 0 12px; 
	}
	.headlines h1{
		height: 28px;
		line-height: 28px;
		font-size: 16px;
	}
	.headlines p{
		height: 36px;
		line-height: 18px;
		font-size: 12px;
	}
	.newsList li{
		height: 26px;
		padding: 0 85px 0 18px;
		line-height: 26px;
		font-size: 14px;
		background: url(../image/icon.png) left center no-repeat;
	}
	.newsList li span{
		height: 26px;
		line-height: 26px;
		font-size: 12px;
	}
}
@media (max-width:768px) {
	.newsBox{
		width: 100%;
	}
	.headlines{
		padding: 0 0 10px;
		margin: 0 0 10px; 
	}
	.headlines h1{
		height: auto;
		line-height: 22px;
		font-size: 15px;
		padding: 3px 0;
		overflow: auto;
		white-space: normal;
		text-overflow: normal;
		-o-text-overflow: normal;
	}
	.headlines p{
		height: auto;
		display: none;
	}
	.newsList li{
		height: auto;
		padding: 4px 0px 4px 12px;
		line-height: 20px;
		font-size: 14px;
		background: url(../image/icon.png) left 11px no-repeat;
		background-size: 6px auto;
		overflow: auto;
		white-space: normal;
		text-overflow: normal;
		-o-text-overflow: normal;
	}
	.newsList li:hover{
		background-position: 3px 11px;
	}
	.newsList li span{
		display: none;
		height: 28px;
		line-height: 28px;
		font-size: 11px;
	}
}
/* ---- 产品中心 Style ---- */
.productBox{
	background: url(../image/product_bg.jpg) center top repeat-x;
	background-size: auto 76.5%;
	padding: 40px 0 0;
	margin: 0 0 60px;
}
.showSwiper{
	max-width:1200px;
	position:relative;
	padding: 0 32px;
	margin: 0 auto;
	}
.showSwiper .swiper-container{
	width:100%;
	margin:0 auto;}
.showSwiper .swiper-container{
	padding:0px;}
.showSwiper .swiper-slide{
	padding:0px 16px;}
.showSwiper .con{
	width:100%;
	
}
.showSwiper .con *{
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.showSwiper .con .pic{
	overflow: hidden;
	width: 100%;
}
.showSwiper .con .pic img{
	width:100%;
	height:100%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}
.showSwiper .con:hover img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);}
.showSwiper .con .detail{
	position: relative;
	background: #014c83;
	padding: 2.88% 4.3% 19.6%;
}
.showSwiper .con:hover .detail{
	background: #c0313f;
}
.showSwiper .con .detail::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 0 auto;
	width: 34px;
	height: 34px;
	background: url(../image/product_icon.png) no-repeat;
	background-size: 100% 100%;
	opacity: 0.23;
}
.showSwiper .con .detail h2{
	height: 45px;
	line-height: 44px;
	font-size: 18px;
	color: #5da6dc;
	border-bottom: 1px solid #11629d;
	text-align: center;
	font-weight: normal;
	margin-bottom: 4.4%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.showSwiper .con .detail h2 a{
	color: #5da6dc;
}
.showSwiper .con .detail h2 a:hover{
	text-decoration: none;
}
.showSwiper .con:hover .detail h2{
	color: #fff;
	border-bottom: 1px solid #cc3947;
}
.showSwiper .con:hover .detail h2 a{
	color: #fff;
}
.showSwiper .con .detail p{
	height: 48px;
	line-height: 24px;
	overflow: hidden;
	font-size: 14px;
	color: #3e84b8;
}
.showSwiper .con:hover .detail p{
	color: #fff;
}
.showSwiper .show-left,.showSwiper .show-right {
	position:absolute;
	top:50%;
	margin-top:-34px;
	height:67px;
	width:35px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:9;
	cursor:pointer;}
.showSwiper .show-left{
	left:-24px;
	background-image: url(../image/arrow_prev.png);
}
.showSwiper .show-right{
	right:-24px;
	background-image:url(../image/arrow_next.png);
}
@media (max-width:1220px) {
	.showSwiper .show-left,.showSwiper .show-right {
		margin-top:-29px;
		height:57px;
		width:30px;
	}
	.showSwiper .show-left{
		left:0px;
	}
	.showSwiper .show-right{
		right:0px;
	}
}
@media (max-width:1024px) {
	.productBox{
		padding: 30px 0 0;
		margin: 0 0 45px;
	}
	.showSwiper{
		padding: 0 24px;
		}
	.showSwiper .swiper-slide{
		padding:0px 12px;
	}

	.showSwiper .con .detail::before{
		bottom:10px;
		width: 24px;
		height:24px;
	}
	.showSwiper .con .detail h2{
		height: 35px;
		line-height: 34px;
		font-size: 16px;
	}

	.showSwiper .con .detail p{
		height: 40px;
		line-height: 20px;
		font-size: 12px;
	}
	.showSwiper .show-left,.showSwiper .show-right {

		margin-top:-23px;
		height:46px;
		width:24px;
	}
}
@media (max-width:768px) {
	.productBox{
		padding: 20px 0 0;
		margin: 0 0 30px;
	}
	.showSwiper{
		padding: 0 20px;
		}
	.showSwiper .swiper-slide{
		padding:0px 10px;
	}

	.showSwiper .con .detail::before{
		bottom:8px;
		width: 24px;
		height:24px;
	}
	.showSwiper .show-left,.showSwiper .show-right {
		margin-top:-19px;
		height:38px;
		width:20px;
	}
}
@media (max-width:375px) {
	.productBox{
		padding: 16px 0 0;
		margin: 0 0 24px;
	}
	.showSwiper .con .detail{

		padding: 2.88% 4.3% 12%;
	}

}
/* ---- 工程案例 Style ---- */
.caseList{
	margin-bottom: 4.75%;
}
.caseList li{
	float: left;
	margin-bottom: 3px;
	padding-left: 3px;
	width: 20.166%;
}
.caseList li:first-child{
	padding-left: 0px;
	width: 39.5%;
}
.caseList li a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.caseList li img{
	width: 100%;
	height: 100%;
}
.caseList li .popup{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 40px;
	background: rgba(0, 0, 0, 0.8);
	overflow: 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	overflow: hidden;
}
.caseList li:hover .popup{
	height: 100%;
	padding: 10% 0;
}
.caseList li .popup h2{
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 0 10px;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.caseList li:hover .popup h2{
	font-size: 15px;
	margin-bottom: 2%;
}
.caseList li .popup p{
	font-size: 12px;
	color: #fff;
	line-height: 24px;
	padding: 0 5%;
}
@media (max-width:1024px) {

	.caseList li{
		width: 25.261%;
	}
	.caseList li:first-child{
		width: 49.478%;
	}
	.caseList li:nth-last-child(1){
		display: none;
	}
	.caseList li:nth-last-child(2){
		display: none;
	}
}
@media (max-width:768px) {
	.caseList li{
		padding-left: 2px;
		padding-right: 2px;
		width: 33.3333%;
	}
	.caseList li:first-child{
		width: 100%;
		padding-left: 2px;
		padding-right: 2px;
	}
	.caseList li:nth-last-child(1){
		display: block;
	}
	.caseList li:nth-last-child(2){
		display: block;
	}

}
@media (max-width:620px) {
	.caseList li{
		width: 50%;
	}
	.caseList li .popup{
		height: 32px;
	}
	.caseList li:hover .popup{
		padding: 3% 0;
	}
	.caseList li .popup h2{
		height: 32px;
		line-height: 32px;
		padding: 0 6px;
		font-size: 13px;
	}
	.caseList li:hover .popup h2{
		font-size: 14px;
	}
	.caseList li .popup p{
		font-size: 11px;
		line-height: 20px;
		padding: 0 3%;
	}
}
/* ---- 荣誉 Style ---- */
.honorBox{
	background: #014c83;
	padding:42px 0;
	position: relative;
	overflow: hidden;
}
.qualification{
	float: left;
	width: 45%;
	position: relative;
	padding: 0 0 16px;
}
.qualification::before{
	content: "";
	position: absolute;
	right: 0px;
	top: 11%;
	height: 78%;
	width: 1px;
	font-size: 0px;
	line-height: 0px;
	background: #4c8ebf;
}
.qualification h1{
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 15px;
}
.qualification h1 a{
	color: #fff;
}
.qualification h1 a:hover{
	text-decoration: none;
}
.qualification .pic{
	float: left;
	width: 31.48%;
	height: 118px;
	overflow: hidden;
}
.qualification .pic img{
	width:100%;
	height:100%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}
.qualification .pic:hover img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.qualification p{
	width: 65.93%;
	float: right;
	line-height: 24px;
	color: #fff;
	font-size: 12px;
	padding-right: 12.222%;
	word-break: break-all;
}
.prizes{
	width: 54%;
	float: right;
	font-size: 0;
}
.prizes li {
	position: relative;
	width: 23%;
	margin-right: 2%;
	margin-bottom: 2%;
	display: inline-block;
	vertical-align: top;
	-webkit-perspective: 200px;
			perspective: 200px;
	-webkit-transform-origin: 50% 50% 70px;
			transform-origin: 50% 50% 70px;
			cursor: pointer;
}
.prizes li a{

	height: 100%;
}
.prizes li:nth-child(4n){
	margin-right: 0;
} 
.prizes .w {
	font-size: medium;
	font-size: initial;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -48px;
			transform-origin: 50% 50% -48px;
	will-change: transform;
	-webkit-animation: 200ms ease-out 0ms 1 normal forwards paused;
			animation: 200ms ease-out 0ms 1 normal forwards paused;
}
  
.prizes .f,
.prizes .b {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: white;
	-webkit-transition: none;
	transition: none;
}
  
.prizes .f {
	background-color: #fff;
	background: -webkit-linear-gradient(#b9a769, #a08e4a);
	background: linear-gradient(#b9a769, #a08e4a);
	-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0)
}
  
.prizes .f > img{
	width: 100%;
	height: 100%;
 }
  
 .prizes .b {
	padding: 4%;
	font-size: 14px;
	line-height: 22px;
	color: #9a3435;
	background-image: -webkit-radial-gradient(circle, #b9a769, #a08e4a 160%);
	background-image: radial-gradient(circle, #b9a769, #a08e4a 160%);
	-webkit-transform: translate3d(0,0,-1px);
			transform: translate3d(0,0,-1px);  
	display: -webkit-box;  
	display: -ms-flexbox; 
	display: none;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	text-shadow: 0px 1px 2px rgba(154,52,53,0.6);
	text-align: center;
}
.prizes .b h3{
	font-size: 14px;
	line-height: 20px;
}
.prizes .in-top .b,
.prizes .out-top .b {
	-webkit-transform-origin: 0% 100%;
			transform-origin: 0% 100%;
	-webkit-transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
			transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
			 display: flex;
}
  
.prizes .in-right .b,
.prizes .out-right .b {
	-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
	-webkit-transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
			transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
			 display: flex;
}
  
.prizes .in-bottom .b,
.prizes .out-bottom .b {
	-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
	-webkit-transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
			transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
			 display: flex;
}
  
.prizes .in-left .b,
.prizes .out-left .b {
	-webkit-transform-origin: 100% 0;
			transform-origin: 100% 0;
	-webkit-transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
			transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
			 display: flex;
}
  
.prizes .in {
}
  
.prizes .in-top .w{
	-webkit-animation-name: in-top;
			animation-name: in-top;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .in-right .w{
	-webkit-animation-name: in-right;
			animation-name: in-right;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .in-bottom .w{
	-webkit-animation-name: in-bottom;
			animation-name: in-bottom;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .in-left .w{
	-webkit-animation-name: in-left;
			animation-name: in-left;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .out {
}
  
.prizes .out-top .w{
	-webkit-animation-name: out-top;
			animation-name: out-top;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .out-right .w{
	-webkit-animation-name: out-right;
			animation-name: out-right;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .out-bottom .w{
	-webkit-animation-name: out-bottom;
			animation-name: out-bottom;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
  
.prizes .out-left .w{
	-webkit-animation-name: out-left;
			animation-name: out-left;
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
.prizesPhone{
	display: none;
}
@-webkit-keyframes in-top {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}
  
@keyframes in-top {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}
 @-webkit-keyframes out-top {
	from {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
	to   {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-top {
	from {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
	to   {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
  
@-webkit-keyframes in-right {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}
  
@keyframes in-right {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}
@-webkit-keyframes out-right {
	from  {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-right {
	from  {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
  
@-webkit-keyframes in-bottom {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}
  
@keyframes in-bottom {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}
@-webkit-keyframes out-bottom {
	from  {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-bottom {
	from  {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
  
@-webkit-keyframes in-left {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}
  
@keyframes in-left {
	from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
	to    {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}
@-webkit-keyframes out-left {
	from  {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-left {
	from  {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
	to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
.honorPopup{
	display: none;
}
@media (max-width:1024px) {
	.honorBox{
		padding:30px 0;
	}
	.qualification{
		padding: 0;
	}
	.qualification h1{
		height: 40px;
		line-height: 40px;
		font-size:18px;
		margin-bottom: 0px;
	}
	.qualification .pic{
		height: 118px;
	}
	.qualification p{
		line-height: 20px;
		font-size: 12px;
		padding-right: 6%;
	}

	.prizes li:nth-child(4n){
		margin-right: 0;
	} 
	 .prizes .b {
		padding: 4%;
	}
	.prizes .b h3{
		font-size: 12px;
		line-height: 16px;
	}

}
@media (max-width:768px) {
	.honorBox{
		padding:20px 0 10px;
	}
	.qualification{
		padding: 0;
		width: 100%;
		margin: 0 0 4%;
	}
	.qualification::before{
		display: none;
	}
	.qualification h1{
		height: 40px;
		line-height: 40px;
		font-size:18px;
		margin-bottom: 0px;
	}
	.qualification .pic{
		height: 118px;
	}
	.qualification p{
		line-height: 24px;
		font-size: 14px;
		padding-right:0;
	}
	.prizes{
		width: 100%;
		display: none;
	}
	.prizesPhone{
		display: block;
		float: left;
		width: 100%;
		padding:0 30px;
		margin-bottom: 12px;
		position: relative;
	}
	.prizesPhone .swiper-slide .pic{
		padding: 0 5px;
	}
	.prizesPhone .swiper-slide .pic img{
		width: 120px;
		height: 80px;
	}
	.prizesPhone .pagination{
		display: none;
	}
	.prizesPhone .prizes-left,
	.prizesPhone .prizes-right{
		position: absolute;
		top: 50%;
		margin-top: -19px;
		width: 20px;
		height: 38px;
	}
	.prizesPhone .prizes-left{
		left: 0px;
		background: url(../image/arrow_prev.png) no-repeat;
		background-size: 100% 100%;
	}
	.prizesPhone .prizes-right{
		right: 0px;
		background: url(../image/arrow_next.png) no-repeat;
		background-size: 100% 100%;
	}
	.honorPopup{
		display: block;
		width: 100%;
		position: absolute;
		bottom: 110%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #014c83;
		z-index: 1;
	}
	.honorPopup_in{
		animation: honorPopup_in 0.25s ease-out forwards;
		-moz-animation: honorPopup_in 0.25s ease-out forwards;
		-webkit-animation: honorPopup_in 0.25s ease-out forwards;
		-o-animation: honorPopup_in 0.25s ease-out forwards;
	}
	@-webkit-keyframes honorPopup_in {
		0% {
			bottom: 110%;
		}
		100% {
			bottom: 106px;
		}
	}
	
	@keyframes honorPopup_in {
		0% {
			bottom: 110%;
		}
		100% {
			bottom: 106px;
		}
	}
	.honorPopup .inner{
		position: relative;
		width: 94%;
		background:rgba(255, 255, 255, 0.5);
		border-radius: 10px;
		height: 90%;
		margin: 12px auto 0;
		/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
	}
	.honorPopup .inner::before{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -4px;
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid rgba(255, 255, 255, 0.5); 
	}
	.honorPopup .inner img{
		max-width: 80%;
		max-height: 88%
	}
	.honorPopup .inner span.close{
		position: absolute;
		width: 18px;
		height: 18px;
		right: 20px;
		top: 20px;
		background: url(http://www.zgpipes.com/skin/images/close.png) no-repeat;
		background-size: 100% 100%;
	}
}
@media (max-width:480px) {
	.honorBox{
		padding:16px 0 5px;
	}
	.qualification{
		padding: 0;
		width: 100%;
		margin: 0 0 4%;
	}
	.qualification h1{
		height: 32px;
		line-height: 32px;
		font-size:16px;
		margin-bottom: 0px;
		text-align: center;
	}
	.qualification .pic{
		display: none;
	}
	.qualification p{
		width: 100%;
		line-height: 24px;
		font-size: 14px;
		padding-right:0;
	}
	.prizes{
		width: 100%;
	}
	.prizes li{
		width: 32%;
		margin-right: 2%;
	}
	.prizes li:nth-child(4n){
	margin-right: 2%;
	}
	.prizes li:nth-child(3n){
		margin-right: 0%;
	}
	.honorPopup .inner span.close{
		width: 13px;
		height: 13px;
		right: 12px;
		top: 12px;
	}
}
@media (max-width:375px) {
	.qualification p{
		line-height: 22px;
		font-size: 12px;
	}
	.prizes li{
		width: 48.5%;
		margin-right: 3%;
		margin-bottom: 3%;
	}
	.prizes li:nth-child(4n){
	margin-right: 3%;
	}
	.prizes li:nth-child(3n){
		margin-right: 3%;
	}
	.prizes li:nth-child(2n){
		margin-right: 0;
	}
}


.imgpopup{
	visibility: hidden;
	position: fixed;
	z-index: 9999;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.imgpopup img{
	max-width: 90%;
}
.imgpopup i{
	position: absolute;
	width: 22px;
	height: 22px;
	right: 20px;
	top: 20px;
	background: url(http://www.zgpipes.com/skin/images/close.png) no-repeat;
	background-size: 100% 100%;
}