.banner2{
	height: 350px;
	background:url(../../images/service2017/banner_img1.jpg) center center no-repeat;;
}
.network,.question,.choose,.contact-box{
	width: 1100px;
	margin: 30px auto 0;
}
.choose{
	margin-top: 100px;
	overflow: hidden;
	}
.tl{
	height: 118px;
	width: 100%;
	float: left;
	text-align: center;
	position: relative;
	padding-top: 30px;
}
.tl h3{
	font:normal 32px/40px "microsoft yahei";
}
.tl i{
	position: absolute;
	width: 55px;
	height: 6px;
	left: 50%;
	background: #76a246;
	top: 80px;
	margin-left: -27px;
}
.tl b{
	display: block;
	margin-top: 18px;
	font:normal 18px/30px arial;
}
.network .content{
	font:normal 18px/38px "microsoft yahei";
	text-align: center;
	padding-bottom: 20px;
}
.network .content b{
	color: #ff6600;
}
.network .content b.ft-22{
	font:normal 22px/42px "microsoft yahei";
}
.network .content b.ft-22-g{
	font:normal 22px/42px "microsoft yahei";
	color: #76a246;
}
.network .content b.ft-28-g{
	font:normal 28px/48px "microsoft yahei";
	color: #76a246;
}
.network .content b.ft-32{
	font:normal 32px/52px "microsoft yahei";
}
.container{
	width: 100%;
	float: left;
	background: #f6f6f6;
}

.question .content{
	padding-top: 10px;
}
.question .content ul li{
	width: 520px;
	float: left;
	height: 160px;
	padding-left: 30px;
}
.question .content ul li i{
	background: url(../../images/service2017/question-icon.jpg) no-repeat;
	width: 90px;
	height: 100px;
	float: left;
}
.question .content ul li i.icon1{
	background-position: 0 0;
}
.question .content ul li i.icon2{
	background-position: 0 -100px;
}
.question .content ul li i.icon3{
	background-position: 0 -200px;
}
.question .content ul li i.icon4{
	background-position: 0 -300px;
}
.question .content ul li .txt-rt{
	float: left;
	margin-left: 20px;
	width: 410px;
}
.question .content ul li .txt-rt span{
	font:normal 24px/26px "microsoft yahei";
	color: #ff6600;
}
.question .content ul li .txt-rt p{
	font:normal 16px/26px "microsoft yahei";
	margin-top: 10px;
}
.service_items{
	width: 1100px;
	margin: 40px auto 0;
	overflow: hidden;
}
.service_items ul {
	margin-left: -30px;
	width: 1160px;
	margin-top: 10px;
}
.service_items ul li{
	width: 240px;
	float: left;
	height: 202px;
	margin: 0 72px;
}
.service_items ul li:hover i{
	-webkit-animation: icon-bounce 0.5s alternate;
  -moz-animation: icon-bounce 0.5s alternate;
  -o-animation: icon-bounce 0.5s alternate;
  animation: icon-bounce 0.5s alternate;

}
@keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-webkit-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-moz-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-o-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
.service_items ul li i{
	width: 100px;
	height: 88px;
	display: block;
	margin: 0 auto;
}
.service_items ul li i.icon1{
	background: url(../../images/service2017/icon.png) 10px 5px no-repeat;
}
.service_items ul li i.icon2{
	background: url(../../images/service2017/icon.png) -135px 5px no-repeat;
}
.service_items ul li i.icon3{
	background: url(../../images/service2017/icon.png) -285px 5px no-repeat;
}
.service_items ul li i.icon4{
	background: url(../../images/service2017/icon.png) 10px -190px no-repeat;
}
.service_items ul li i.icon5{
	background: url(../../images/service2017/icon.png) -135px -190px no-repeat;
}
.service_items ul li i.icon6{
	background: url(../../images/service2017/icon.png) -285px -190px no-repeat;
}
.service_items ul li span{
	text-align: center;
	margin-top: 4px;
	width: 100%;
	display: inline-block;
	font:normal 24px/36px "microsoft yahei";
	color: #76a246;
}
.service_items ul li p{
	font:normal 16px/22px "microsoft yahei";
	color: #666;
	margin-top: 10px;
}
.network .hd{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 20px;
	font:normal 36px/70px "microsoft yahei";
	color: #ff6600;
}
.video{
	height: 360px;
	width: 100%;
	float: left;
	background: #76a246;
	position: relative;
}
.video .videoBg{
	background: #ffb600;
	width: 720px;
	height: 390px;
	margin-left: -390px;
	position: absolute;
	left: 50%;
	top: 37px;
}
.choose-box{
	height: 355px;
	width: 1250px;
	float: left;
	background: url(../../images/service2017/chooseBg.png) 0 0 no-repeat;
}
.choose-box .box{
	float: left;
	width: 300px;
	margin-left: 68px;
	margin-right: 62px;
}
.choose-box .box .hd{
	height: 100px;
	position: relative;
	padding-top: 30px;
	font:normal 30px/44px "microsoft yahei";
	color: #fff;
	text-align: center;
}
.choose-box .box .hd p{
	font: bold 24px/30px arial;
	margin-bottom: 28px;
}
.choose-box .box ul{
	height: 203px;
	padding-top: 20px;
}
.choose-box .box ul li{
	font:normal 16px/36px "microsoft yahei";
	position: relative;
	text-align: left;
	margin-left: 40px;
	width: 245px;
	color: #fff;
	padding-left: 15px;
}
.choose-box .box-y ul li{
	width: 200px;
}
.choose-box .box ul li i{
	position: absolute;
	height: 1px;
	width: 6px;
	top: 18px;
	left: 0;
}
.choose-box .box .hd i{
	position: absolute;
	width: 146px;
	height: 1px;
	background: #fff;
	opacity: 0.6;
	filter:alpha(opacity=60);
	margin-left: -73px;
	top: 78px;
	left: 50%;
}
.choose-box .box-y{
	margin-right: 0;
	margin-left: 27px;
}
.brand {
	width: 1270px;
	margin: 20px auto 0;
}
.brand .tl {
    height: 105px;
}
.brand .brand-list {
	overflow: hidden;
	padding: 10px;
}
.brand ul {
	margin: 0 -11.5px;
}
.brand ul li {
	width: 20%;
	padding: 11.5px;
	box-sizing: border-box;
	float: left;
}
.brand ul li .item1 {
	background: #fff;
	box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.2);
	position: relative;
	height: 124px;
	overflow: hidden;
}
.brand ul li .item1 img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.brand ul li .item1 .content {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	background: rgba(117,162,69,0.9);
}
.brand ul li .item1 .content p {
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	margin-top: 50px;
	text-align: center;
}
.brand ul li .item1 .content span {
	display: block;
	text-align: center;
	width: 82px;
	height: 22px;
	line-height: 22px;
	color: #fff;
	font-size: 14px;
	margin: 15px auto 0;
	border: 1px solid #fff;
}
.brand ul li .item1:hover .content {
	height: 100%;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.brand .brand-more {
	text-align: center;
	margin-top: 28px;
}
.brand .brand-more a {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}
.brand .brand-more a i {
	display: inline-block;
	width: 11px;
	height: 12px;
	background: url(../../images/service2017/brand-more.png) 0 0 no-repeat;
	vertical-align: middle;
	margin-left: 8px;
}
.brand .brand-more a i.fz {
	transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-o-transform:rotate(180deg);
}
.ft-container{
	height: 600px;
	width: 100%;
	margin-top: 60px;
	float: left;
	background: url(../../images/service2017/ft-banner.jpg) center 0 no-repeat;
}
.ft-container .tl{
	color: #fff;
}
.contact-box{
	height: 460px;
	margin-top: 20px;
}
.contact-box ul{
	width: 1100px;
	float: left;
	padding-top: 20px;
}
.contact-box ul li{
	height: 71px;
	width: 90px;
	border-radius: 50%;
	background: #ffb600;
	color: #fff;
	margin: 0 46px;
	float: left;
	text-align: center;
	padding-top: 19px;
	font:normal 22px/26px "microsoft yahei";
}
.contact-box .qq-contact{
	text-align: center;
}
.contact-box .qq-contact a{
	height: 64px;
	width: 226px;
	margin-top: 56px;
	text-align: center;
	font:normal 22px/64px "microsoft yahei";
	color: #fff;
	border-radius: 40px;
	display: inline-block;
	background-color: #ffb600;
}
.contact-box .qq-contact p{
	font:normal 16px/52px "microsoft yahei";
	color: #fff;
}
.ft-container .ft{
	height: 120px;
	background: #76a246;
	text-align: center;
}
.ft-container .ft span{
	display: inline-block;

	height: 45px;
	background: url(../../images/service2017/phone-email.png) 0 0 no-repeat;
	font:normal 22px/45px "microsoft yahei";
	color: #fff;
	margin: 38px 20px 0 20px;
	padding-left: 64px;
}
.ft-container .ft span.email{
	background: url(../../images/service2017/phone-email.png) 0 bottom no-repeat;
}
/* 20210728    onlineExhibition */
.onlineExhibition{
	height: 582px;
	background: url(../../images/service2017/service1-Banner.png) top center no-repeat;
	padding: 37px 0 39px 0;
}
.onlineExhibition .main{
	width: 1120px;
	margin: 0 auto;
	overflow: hidden;
}
.onlineExhibition .left{
	float: left;
	width: 712px;
}
.onlineExhibition .title{
	height: 38px;
	line-height: 38px;
	padding-bottom: 10px;
	position: relative;
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.onlineExhibition .title b{
	font-size: 28px;
	color: #fff;
	margin-right: 10px;
}
.onlineExhibition .title a{
	float: right;
	height: 36px;
	line-height: 36px;
	width: 136px;
	border: 1px solid #fff;
	border-radius: 4px;
	font-size: 18px;
	color: #fff;
	text-align: center;
}
.onlineExhibition .title a:hover{
	background-color: #ff7e05;
	border-color: #ff7e05;
}

.onlineExhibition .title::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 59px;
	height: 5px;
	background-color: #fff;
}
.onlineExhibition .left .LiveVideo{
	height: 400px;
	overflow: hidden;
	border-radius: 4px;
}
.onlineExhibition .left .LiveVideo .swiper-slide{
	height: 400px;
	position: relative;
}
.onlineExhibition .left .LiveVideo .swiper-slide a.images{
	display: block;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.onlineExhibition .left .LiveVideo .swiper-slide a.images img{
	width: 100%;
	max-height: none;
}
.onlineExhibition .left .LiveVideo .swiper-pagination-bullet-active{
	width: 18px;
	background-color: #ffb600;
	border-radius: 20px;
}
.onlineExhibition .left .LiveVideo em{
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-block;
	width: 114px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border-radius: 15px;
	font-size: 18px;
	font-style: normal;
	color: #fff;
	z-index: 9;
}
.onlineExhibition .left .LiveVideo em.zb{
	background-color: #52c6f5;
}
.onlineExhibition .left .LiveVideo a.play{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	background: url(https://www.hbzhan.com/Templates/Service/images/service2017/play.png) no-repeat;
}
.onlineExhibition .left .LiveVideo i.bg{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(102,102,102,.4);
}
.onlineExhibition .left ul{
	overflow: hidden;
	width: calc(100% + 13px);
	margin-top: 14px;
}
.onlineExhibition .left li{
	float: left;
	width: 25%;
	box-sizing: border-box;
	padding-right: 13px;
	position: relative;
	border-radius: 6px;
}
.onlineExhibition .left li a.images{
	display: block;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 6px;
}
.onlineExhibition .left li a.images img{
	width: 100%;
	max-height: none;
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
	border-radius: 6px;
}
.onlineExhibition .left li a.images img:hover {
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}
.onlineExhibition .left li em{
	position: absolute;
	top: 10px;
	right: 24px;
	display: inline-block;
	width: 72px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 15px;
	font-size: 14px;
	font-style: normal;
	color: #fff;
	background-color: #7fbd67;
}
.onlineExhibition .right{
	float: right;
	width: 354px;
	padding-left: 10px;
}
.onlineExhibition .right .title{
	margin-bottom: 22px;
}
.onlineExhibition .right ul{
	border-left: 1px solid #a0c591;
	padding-left: 23px;
}
.onlineExhibition .right li i.time{
	display: block;
	width: 230px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background-color: #b2d4a4;
	color: #fff;
	font-size: 16px;
	border-radius: 2px;
	position: relative;
	font-style: normal;
}
.onlineExhibition .right li i.time em{
	position: absolute;
	left: -30.5px;
	top: 4px;
	width: 14px;
	height: 14px;
	background:url(https://www.hbzhan.com/Templates/Service/images/service2017/hover0.png) no-repeat;
}
.onlineExhibition .right li.first i.time em{
	left: -34px;
	top: 2px;
	width: 21px;
	height: 21px;
	background:url(https://www.hbzhan.com/Templates/Service/images/service2017/hover1.png) no-repeat;
}
.onlineExhibition .right li h3{
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	font-size: 18px;
	margin: 8px 0 12px 0;
}
.onlineExhibition .right li h3 a{
	color: #fff;
}
.onlineExhibition .right li h3:hover a{
	color: #f3bc97;
}
.onlineExhibition .right li .rightItem a.images{
	display: block;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	position: relative;
}
.onlineExhibition .right li .rightItem a.images img{
	width: 100%;
	max-height: none;
}
.onlineExhibition .right li .rightItem a.images i.play{
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 54px;
	height: 54px;
	background: url(https://www.hbzhan.com/Templates/Service/images/service2017/play.png) no-repeat;
	background-size: 100%;
}
.onlineExhibition .right li .rightItem p{
	margin: 10px 0 12px 0;
}
.onlineExhibition .right li .rightItem p a{
	display: inline-block;
	height: 34px;
	line-height: 34px;
	width: 100px;
	text-align: center;
	font-size: 16px;
	border-radius: 16px;
	color: #fff;
}
.onlineExhibition .right li .rightItem p a:nth-child(1){
	background-color: #52c6f5;
	margin-right: 15px;
}
.onlineExhibition .right li .rightItem p a:nth-child(2){
	background-color: #ffb600;
	margin-right: 15px;
}
.onlineExhibition .right li .rightItem p a:nth-child(3){
	background-color: #8fd86e;
}