* { margin: 0; padding: 0; }
.section { position: relative; overflow: hidden; }
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.section .bg img { display: block; width: 100%; height: 100%; }
.title { width: 100%; height: 1.1rem; position: absolute; top: 0.4rem; z-index: 8; transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; }
.down { position: absolute; width: 0.41rem; height: 0.25rem; z-index: 7; bottom: 0.5rem; left: 50%; margin-left: -0.205rem; background: url(../images/xz_xia2.png) no-repeat; background-size: contain; }
.down.on { background: url(../images/xz_xia.png) no-repeat; background-size: contain; }
.active .down { -webkit-animation: bounce-down 0.5s linear infinite; -ms-animation: bounce-down 0.5s linear infinite; -moz-animation: bounce-down 0.5s linear infinite; -o-animation: bounce-down 0.5s linear infinite; animation: bounce-down 0.5s linear infinite; }
@-webkit-keyframes bounce-down {
	25% { -webkit-transform: translateY(-3px); }
	50%, 100% { -webkit-transform: translateY(0); }
	75% { -webkit-transform: translateY(3px); }
}
@-moz-keyframes bounce-down {
	25% { -webkit-transform: translateY(-3px); }
	50%, 100% { -webkit-transform: translateY(0); }
	75% { -webkit-transform: translateY(3px); }
}
@-ms-keyframes bounce-down {
	25% { -webkit-transform: translateY(-3px); }
	50%, 100% { -webkit-transform: translateY(0); }
	75% { -webkit-transform: translateY(3px); }
}
@-o-keyframes bounce-down {
	25% { -webkit-transform: translateY(-3px); }
	50%, 100% { -webkit-transform: translateY(0); }
	75% { -webkit-transform: translateY(3px); }
}
@keyframes bounce-down {
	25% { transform: translateY(-3px); }
	50%, 100% { transform: translateY(0); }
	75% { transform: translateY(3px); }
}

/* 左侧导航 */
#fullPage-nav { display: none; font-size: 12px; }
#fullPage-nav li { width: 80px; height: 21px; margin: 10px 0 0; vertical-align: middle; }
#fullPage-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url(../images/dot.png) 5px 5px no-repeat; }
#fullPage-nav li .active { background-position: 0 bottom; }
#fullPage-nav span { display: none; }
.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px; }
.left_nav { position: fixed; left: 0.6rem; top: 50%; margin-top: -0.97rem; z-index: 10000;display: none;}
.left_nav ul { width: 0.27rem; height: 1.94rem; background: url(../images/xz_hd.png) no-repeat; background-size: cover; position: relative; }
.left_nav ul li { width: 0.2rem; }
.left_nav ul li a { font-size: 0.16rem; color: #393939; position: absolute; }
.left_nav ul li a.a0 { left: -0.3rem; top: 0.25rem; }
.left_nav ul li a.a1 { left: -0.3rem; top: 0.53rem; }
.left_nav ul li a.a2 { left: -0.3rem; top: 0.81rem; }
.left_nav ul li a.a3 { left: -0.3rem; top: 1.09rem; }
.left_nav ul li a.a4 { left: -0.3rem; top: 1.37rem; }
.left_nav ul li a em { width: 0.07rem; display: inline-block; height: 0.07rem; background: #a2a2a2; vertical-align: 0.02rem; border-radius: 50%; margin: 0 0.08rem; }
.left_nav ul li a:hover { color: #00aade; }
.left_nav ul li a:hover em { background: #00aade; }

/*index*/
.top_nav { position: absolute; width: 100%; height: 0.7rem; background: rgba(0, 0, 0, 0.7); z-index: 5; }
.logo { position: absolute; width: 1.27rem; height: 2.03rem; display: block; top: 0; left: 1.29rem; z-index: 6; }
.logo img { width: 100%; }
.top_nav ul { float: right; margin-right: 0.65rem; }
.top_nav ul>li { width: 0.88rem; height: 0.7rem; float: left; margin: 0 0.3rem; position: relative; }
.top_nav ul>li>a { width: 100%; height: 100%; display: block; text-align: center; line-height: 0.7rem; color: #fff; font-size: 0.18rem; }
.top_nav ul>li:hover>a { color: #00aade; }
.case ol { position: absolute; background: rgba(0, 0, 0, .3); left: -0.085rem; display: none; }
.case ol li { width: 1.05rem; height: 0.4rem; background: url(../images/nav_bg2.png) no-repeat 50% 100%; }
.case ol li:last-child { background: none; }
.case ol li a { font-size: 0.14rem; color: #dddddd; height: 100%; width: 100%; display: block; text-align: center; line-height: 0.4rem; }
.case ol li a:hover { color: #00aade; }
.index-imgList { height: 100%; position: relative; }
.index-imgList li a { display: block; width: 100%; height: 100%; }
.index-imgList li a h5 { position: absolute; font-size: 0.7rem; z-index: 15; text-align: center; left: 50%; top: 0rem; opacity: 0; line-height: 1.2rem; color: #fff; font-weight: normal; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.active.on .index-imgList li a h5 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; top: 2.8rem; opacity: 1; }
.index-imgList li a h6 { position: absolute; font-size: 0.3rem; z-index: 15; text-align: center; left: 50%; top: 7rem; opacity: 0; color: #fff; font-weight: normal; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.active.on .index-imgList li a h6 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; top: 5.8rem; opacity: 1; }
.index-imgList li.cur { display: block; }
.index-btnList li { width: 1.1rem; height: 0.06rem; margin: 0 0.06rem; background: #b7b7b7; cursor: pointer; text-indent: 9999px; float: left; }
.index-btnList li.on { background: #00aade; }
.index-btnList { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.index-imgList li a>img { width: 100%; }
.section .bg1 { position: absolute; bottom: 0; }
.section .bg1 img { width: 100%; }
.clients { width: 16.6rem; margin: 1.8rem auto 0; }
.clients li { width: 3.72rem; height: 2.58rem; overflow: hidden; display: block; float: left; position: relative; margin: 0 0.57rem 0.5rem 0;}
.clients li:nth-child(4n) { margin-right: 0; }
.clients li>span strong { font-size: 0.2rem; display: block; line-height: 0.4rem; font-weight: normal; }
.clients li>span p { font-size: 0.14rem; }
.clients li img { width: 100%; transition: all 0.8s; -webkit-transition: all 0.8s; -ms-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; }
.clients li span { display: none; width: 3.28rem; /*height: 0.96rem;*/ position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); color: #fff; padding: 0 0.22rem 0.1rem; }
.clients li a img { position: absolute;left:0;top:0;}
.clients li a img.img {opacity: 1;}
.clients li:hover a img.img {opacity: 0;}
.wd_c { width: 2.88rem; height: 1.77rem; position: absolute; left: 50%; top: 2.45rem; margin-left: -1.44rem; }
.index_2 { width: 12rem; height: 100%; position: absolute; left: 50%; top: 2.2rem; margin-left: -6rem; }
.wd_1 { position: relative; }
.wd_1 .wd_in { position: absolute; left: 1.4rem; cursor: pointer; }
.wd_1 .wd_in .sp_1 { width: 2.16rem; height: 2.16rem; position: absolute; display: block; background: url(../images/wd_h1.png) no-repeat; background-size: cover; z-index: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); }
.wd_1 .wd_in .sp_2 { width: 1.93rem; height: 1.93rem; position: absolute; display: block; background: url(../images/wd_1.png) no-repeat; background-size: cover; margin: 0.12rem; z-index: 3; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.wd_1 .wd_in:hover .sp_2 { background: url(../images/wd_1_1.png?r=20161021) no-repeat; background-size: cover; }
.wd_1 .wd_in:hover .sp_1 { background: url(../images/wd_h2.png) no-repeat; background-size: cover; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
.wd_1 .wd_in .sp_3 { width: 2.5rem; height: 2.76rem; position: absolute; display: block; background: url(../images/xz_bg1.png) no-repeat; background-size: cover; z-index: 2; left: 0.48rem; top: 0.14rem; }
.wd_1 .wd_in em { width: 0.22rem; height: 0.32rem; display: block; background: url(../images/wd_dj.png) no-repeat; background-size: contain; position: absolute; top: 2.24rem; left: 1rem; -webkit-animation: bounce-scale 0.5s linear infinite; -ms-animation: bounce-scale 0.5s linear infinite; -moz-animation: bounce-scale 0.5s linear infinite; -o-animation: bounce-scale 0.5s linear infinite; animation: bounce-scale 0.5s linear infinite; }
.wd_1 .wd_txt { position: absolute; left: 0rem; opacity: 0; top: 2.8rem; font-size: 0.16rem; color: #333333; width: 3.4rem; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.wd_1 .wd_txt.on { left:1.1rem; opacity: 1; }
.active2 .wd_1 .wd_txt { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; opacity: 1; left: 1.1rem; }
.wd_2 { position: relative; }
.wd_2 .wd_in { position: absolute; left: 4.9rem; top: 1.8rem; cursor: pointer; }
.wd_2 .wd_in .sp_1 { width: 2.16rem; height: 2.16rem; position: absolute; display: block; background: url(../images/wd_h1.png) no-repeat; background-size: cover; z-index: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); }
.wd_2 .wd_in:hover .sp_1 { background: url(../images/wd_h2.png) no-repeat; background-size: cover; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
.wd_2 .wd_in:hover .sp_2 { background: url(../images/wd_2_1.png?r=20161021) no-repeat; background-size: cover; }
.wd_2 .wd_in .sp_2 { width: 1.93rem; height: 1.93rem; position: absolute; display: block; background: url(../images/wd_2.png) no-repeat; background-size: cover; margin: 0.12rem; z-index: 3; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.wd_2 .wd_in .sp_3 { width: 2.5rem; height: 2.76rem; position: absolute; display: block; background: url(../images/xz_bg1.png) no-repeat; background-size: cover; z-index: 2; left: 0.48rem; top: 0.14rem; }
.wd_2 .wd_in em { width: 0.22rem; height: 0.32rem; display: block; background: url(../images/wd_dj.png) no-repeat; background-size: contain; position: absolute; top: 2.24rem; left: 0.94rem; -webkit-animation: bounce-scale 0.5s linear infinite; -ms-animation: bounce-scale 0.5s linear infinite; -moz-animation: bounce-scale 0.5s linear infinite; -o-animation: bounce-scale 0.5s linear infinite; animation: bounce-scale 0.5s linear infinite; }
.wd_2 .wd_txt { position: absolute; left: 3rem; opacity: 0; top: 4.5rem; font-size: 0.16rem; color: #333333; width: 3.4rem; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.wd_2 .wd_txt.on { left: 4.66rem; opacity: 1; }
.active2 .wd_2 .wd_txt { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9; opacity: 1; left: 4.66rem; }
.wd_3 { position: relative; }
.wd_3 .wd_in { position: absolute; left: 8.5rem; cursor: pointer; }
.wd_3 .wd_in .sp_1 { width: 2.16rem; height: 2.16rem; position: absolute; display: block; background: url(../images/wd_h1.png) no-repeat; background-size: cover; z-index: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); }
.wd_3 .wd_in:hover .sp_1 { background: url(../images/wd_h2.png) no-repeat; background-size: cover; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
.wd_3 .wd_in .sp_2 { width: 1.93rem; height: 1.93rem; position: absolute; display: block; background: url(../images/wd_3.png) no-repeat; background-size: cover; margin: 0.12rem; z-index: 3; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; }
.wd_3 .wd_in:hover .sp_2 { background: url(../images/wd_3_1.png?r=20161021) no-repeat; background-size: cover; }
.wd_3 .wd_in .sp_3 { width: 2.5rem; height: 2.76rem; position: absolute; display: block; background: url(../images/xz_bg1.png) no-repeat; background-size: contain; z-index: 2; left: 0.48rem; top: 0.14rem; }
.wd_3 .wd_in em { width: 0.22rem; height: 0.32rem; display: block; background: url(../images/wd_dj.png) no-repeat; background-size: cover; position: absolute; top: 2.24rem; left: 1rem; -webkit-animation: bounce-scale 0.5s linear infinite; -ms-animation: bounce-scale 0.5s linear infinite; -moz-animation: bounce-scale 0.5s linear infinite; -o-animation: bounce-scale 0.5s linear infinite; animation: bounce-scale 0.5s linear infinite;}
.wd_3 .wd_txt { position: absolute; left:6.5rem;top: 2.8rem;opacity: 0; font-size: 0.16rem; color: #333333; width: 3.4rem; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.wd_3 .wd_txt.on { left:8.3rem; opacity: 1; }
.active2 .wd_3 .wd_txt { transition-delay: 1.1s; -webkit-transition-delay: 1.1s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 1.1s; opacity: 1; left:8.3rem; }

@-webkit-keyframes bounce-scale {
	25% { -webkit-transform: scale(1.1); }
	50%, 100% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(0.9); }
}
@-o-keyframes bounce-scale {
	25% { -webkit-transform: scale(1.1); }
	50%, 100% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(0.9); }
}
@-ms-keyframes bounce-scale {
	25% { -webkit-transform: scale(1.1); }
	50%, 100% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(0.9); }
}
@-moz-keyframes bounce-scale {
	25% { -webkit-transform: scale(1.1); }
	50%, 100% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(0.9); }
}
@keyframes bounce-scale {
	25% { -webkit-transform: scale(1.1); }
	50%, 100% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(0.9); }
}
.wd_txt em { width: 0.63rem; height: 0.04rem; display: block; background: #00aade; margin: 0 0 0.18rem 0.05rem; }
.wd_txt ul li { margin-bottom: 0.3rem; }
.wd_txt ul li i { width: 0.07rem; height: 0.07rem; display: inline-block; border-radius: 50%; background: #999999; vertical-align: 0.03rem; margin-right: 0.03rem; }
.wd_txt>a { width: 0.92rem; height: 0.26rem; display: block; background: #00aade; text-align: center; line-height: 0.26rem; color: #fff; font-size: 0.14rem; margin-top: 0.1rem; }
.map { height: 100%; width: 100%; margin: 0 auto; position: relative; }
.map img { height: 100%; width: 100%; }
.gm-style-mtc { position: relative; top: 1.5rem; }
.index_4 { position: absolute; width: 15rem; height: 100%; left: 50%; top: 3.2rem; margin-left: -7.5rem; }
.index_4 ul li { cursor: pointer; color: #fff; float: left; width: 2.3rem; margin: 0 0.35rem; color: #393939; position: relative; }
.index_4 ul li span { width: 1.6rem; height: 1.6rem; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; background-size: cover; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); }
.index_4 ul li:hover span { background-size: cover; display: block; }
.index_4 ul li span:before { position: absolute; content: ''; width: 1.78rem; height: 1.78rem; left: -0.09rem; top: -0.09rem; }
.index_4 ul li:hover span:before { -webkit-animation: spinAround 9s linear infinite; -moz-animation: spinAround 9s linear infinite; -ms-animation: spinAround 9s linear infinite; -o-animation: spinAround 9s linear infinite; animation: spinAround 9s linear infinite; background: url(../images/xz_au_bg.png) no-repeat; background-size: cover; }
@-webkit-keyframes spinAround {
	from { -webkit-transform: rotate(0deg) }
	to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinAround {
	from { -moz-transform: rotate(0deg) }
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spinAround {
	from { -moz-transform: rotate(0deg) }
	to { -moz-transform: rotate(360deg); }
}
@-o-keyframes spinAround {
	from { -moz-transform: rotate(0deg) }
	to { -moz-transform: rotate(360deg); }
}
@keyframes spinAround {
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg); }
}
.index_4 ul li em { display: block; width: 0.5rem; height: 0.03rem; background: #969696; margin-left: 0.9rem; margin-bottom: 0.2rem; }
.index_4 ul li h5 { font-size: 0.26rem; margin-bottom: 0.1rem; text-align: center; margin-top: 1.8rem; color: #666; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.index_4 ul li p { font-size: 0.16rem; padding: 0 0.05rem; line-height: 0.28rem; color: #888; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.index_4 ul li:hover h5 { color: #333; }
.index_4 ul li:hover p { color: #3dbfbe; }
.au_1 span { background: url(../images/xz_au1.png) no-repeat; }
.au_2 span { background: url(../images/xz_au2.png) no-repeat; }
.au_3 span { background: url(../images/xz_au3.png) no-repeat; }
.au_4 span { background: url(../images/xz_au4.png) no-repeat; }
.au_5 span { background: url(../images/xz_au5.png) no-repeat; }
.au_1:hover span { background: url(../images/xz_au1_2.png) no-repeat; }
.au_2:hover span { background: url(../images/xz_au2_2.png) no-repeat; }
.au_3:hover span { background: url(../images/xz_au3_2.png) no-repeat; }
.au_4:hover span { background: url(../images/xz_au4_2.png) no-repeat; }
.au_5:hover span { background: url(../images/xz_au5_2.png) no-repeat; }
.au_1:hover em { background: #3dbfbe; }
.au_2:hover em { background: #3dbfbe; }
.au_3:hover em { background: #3dbfbe; }
.au_4:hover em { background: #3dbfbe; }
.au_5:hover em { background: #3dbfbe; }
.bg_op { width: 100%; height: 1.65rem; position: absolute; top: 0; background: rgba(0, 0, 0, .8); }
.bb { position: relative; width: 1.68rem; height: 0.64rem; background: url(../images/wd_center2.png) no-repeat; left: 50%; top: 2.45rem; margin-left: -0.82rem; background-size: contain; }
.bb:before, .bb:after { content: " "; display: block; position: absolute; width: 2.4rem; height: 1.2rem; top: -0.28rem; left: -0.36rem; border: 2px solid #00aade; z-index: 10; box-sizing: border-box; -webkit-animation: clipAni 3s infinite linear; -moz-animation: clipAni 3s infinite linear; -ms-animation: clipAni 3s infinite linear; -o-animation: clipAni 3s infinite linear; animation: clipAni 3s infinite linear; }
.bb:before { -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -ms-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; }
@-webkit-keyframes  clipAni {
	0%, 100% { clip: rect(0, 2.4rem, 1.2rem, 2.3rem); }
	25% { clip: rect(0, 2.4rem, 0.03rem, 0); }
	50% { clip: rect(0, 0.03rem, 1.2rem, 0); }
	75% { clip: rect(1.1rem, 2.4rem, 1.2rem, 0); }
}
@-o-keyframes  clipAni {
	0%, 100% { clip: rect(0, 2.4rem, 1.2rem, 2.3rem); }
	25% { clip: rect(0, 2.4rem, 0.03rem, 0); }
	50% { clip: rect(0, 0.03rem, 1.2rem, 0); }
	75% { clip: rect(1.1rem, 2.4rem, 1.2rem, 0); }
}
@-moz-keyframes  clipAni {
	0%, 100% { clip: rect(0, 2.4rem, 1.2rem, 2.3rem); }
	25% { clip: rect(0, 2.4rem, 0.03rem, 0); }
	50% { clip: rect(0, 0.03rem, 1.2rem, 0); }
	75% { clip: rect(1.1rem, 2.4rem, 1.2rem, 0); }
}
@-ms-keyframes  clipAni {
	0%, 100% { clip: rect(0, 2.4rem, 1.2rem, 2.3rem); }
	25% { clip: rect(0, 2.4rem, 0.03rem, 0); }
	50% { clip: rect(0, 0.03rem, 1.2rem, 0); }
	75% { clip: rect(1.1rem, 2.4rem, 1.2rem, 0); }
}
@keyframes  clipAni {
	0%, 100% { clip: rect(0, 2.4rem, 1.2rem, 2.3rem); }
	25% { clip: rect(0, 2.4rem, 0.03rem, 0); }
	50% { clip: rect(0, 0.03rem, 1.2rem, 0); }
	75% { clip: rect(1.1rem, 2.4rem, 1.2rem, 0); }
}

/*about*/
.about_1 { width: 12rem; height: 100%; position: absolute; left: 50%; margin-left: -6rem; top: 1.1rem; }
.about_1 a { position: absolute; display: block; width: 2.22rem; height: 2.57rem; transition: all 0.4s; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; }
.about_1 a:hover { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }
.about_1 a img { width: 100%; }
.ab1_1 { left: 1.2rem; top: 0.3rem; }
.ab1_2 { left: 3.67rem; top: 0.3rem; }
.ab1_3 { left: 6.14rem; top: 0.3rem; }
.ab1_4 { left: 8.61rem; top: 0.3rem; }
.ab1_5 { left: 0; top: 2.35rem; }
.ab1_6 { left: 2.42rem; top: 2.35rem; }
.ab1_7 { left: 4.89rem; top: 2.35rem; }
.ab1_8 { left: 7.36rem; top: 2.35rem; }
.ab1_9 { left: 9.85rem; top: 2.35rem; }
.ab1_10 { left: 1.2rem; top: 4.42rem; }
.ab1_11 { left: 3.67rem; top: 4.42rem; }
.ab1_12 { left: 6.14rem; top: 4.42rem; }
.ab1_13 { left: 8.61rem; top: 4.42rem; }
.og_1 { width: 15.24rem; height: 4.58rem; display: block; position: absolute; top: 2.35rem; left: 50%; margin-left: -7.62rem; }
.og_1 img { width: 100%; }
.about_3 { width: 12rem; height: 100%; position: absolute; left: 50%;/* top: 2rem; */ margin-left: -6rem; }
.active .about_3 ul li.ab3_1 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; margin-top: 2rem; opacity: 1; }
.active .about_3 ul li.ab3_2 { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; margin-top: 2rem; opacity: 1; }
.active .about_3 ul li.ab3_3 { transition-delay: 1.1s; -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -ms-transition-delay: 1.1s; -o-transition-delay: 1.1s; margin-top: 2rem; opacity: 1; }
.about_3 ul li { width: 3.3rem; height: 5.65rem; background: url(../images/zs_bg1.png) no-repeat; margin-top: 4rem; background-size: cover; opacity: 0; float: left; margin-right: 0.14rem; text-align: center; padding: 0 0.3rem; color: #fff; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; cursor: pointer; }
.about_3 ul li:nth-child(3n) { margin-right: 0; }
.about_3 ul li.ab3_1 span { width: 1.16rem; height: 1.16rem; display: inline-block; margin-top: 0.78rem; background: url(../images/zs_1.png) no-repeat; background-size: cover; }
.about_3 ul li.ab3_2 span { width: 1.33rem; height: 1.21rem; display: inline-block; margin-top: 0.78rem; background: url(../images/zs_2.png) no-repeat; background-size: cover; }
.about_3 ul li.ab3_3 span { width: 1.42rem; height: 1.13rem; display: inline-block; margin-top: 0.78rem; background: url(../images/zs_3.png) no-repeat; background-size: cover; }
.about_3 ul li>h5 { font-size: 0.24rem; margin-bottom: 0.2rem; }
.about_3 ul li>p { font-size: 0.16rem; text-align: left; margin-bottom: 0.3rem; position: relative; }
.about_3 ul li>p em { width: 0.06rem; height: 0.06rem; display: block; background: url(../images/zs_bg3.png) no-repeat; background-size: cover; position: absolute; left: -0.1rem; top: 0.06rem; }
.about_3 ul li:hover { height: 5.86rem; background: url(../images/zs_bg2.png) no-repeat; background-size: cover; transform: translateY(-0.21rem); -webkit-transform: translateY(-0.21rem); -moz-transform: translateY(-0.21rem); -ms-transform: translateY(-0.21rem); -o-transform: translateY(-0.21rem); color: #333;/*	box-shadow:0px -1px 5px #333;*/ }
.about_3 ul li:hover>p em { background: url(../images/zs_bg4.png) no-repeat; background-size: cover; }
.about_3 ul li.ab3_1:hover span { width: 1.16rem; height: 1.16rem; background: url(../images/zs_1_2.png) no-repeat; background-size: cover }
.about_3 ul li.ab3_2:hover span { width: 1.33rem; height: 1.21rem; background: url(../images/zs_2_2.png) no-repeat; background-size: cover }
.about_3 ul li.ab3_3:hover span { width: 1.42rem; height: 1.13rem; background: url(../images/zs_3_2.png) no-repeat; background-size: cover }
.about_4 { width: 12rem; height: 100%; position: absolute; left: 50%; margin-left: -6rem; top: 2rem; transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; }
.ab4_1 li { width: 2.98rem; height: 1.48rem; border-right: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; float: left; text-align: center; }
.ab4_1 li a { width: 2.70rem; height: 1.2rem; display: inline-block; margin-top: 0.15rem; }
.ab4_1 img { width: 100%; }
.ab4_1 li:nth-child(4n) { border-right: none; }
.ab4_1 li:nth-child(13) { border-bottom: none; }
.ab4_1 li:nth-child(14) { border-bottom: none; }
.ab4_1 li:nth-child(15) { border-bottom: none; }
.ab4_1 li:nth-child(16) { border-bottom: none; }

/*case*/
.case_top .bg img { width: 100%; }
.case_body { width: 16.6rem; margin: 0 auto; }
.case_l { width: 3.2rem; float: left; text-align: center; }
.case_l>img { width: 1.81rem; height: 1.16rem;margin-left: 0.6rem; margin-top: 0.3rem; margin-bottom: 0.4rem; }
.bt.case_l>img{ width: 1.39rem;height: 1.45rem;margin-left:1rem; }
.jr.case_l>img{ width: 1.18rem;height: 1.16rem;margin-left:1rem; }
.sl.case_l>img{ width: 0.96rem;height: 1.38rem;margin-left:1.2rem; }
.ty.case_l>img{ width: 1.39rem;height: 0.85rem;margin-left:1rem; }

.case_l>h5 { font-size: 0.18rem; color: #313030; display: table; margin: 0.15rem 0 0.15rem 0; border-left: 0.03rem solid #bf9d5b; padding-left: 0.06rem; line-height: 0.2rem; }
.bt.case_l>h5 {  border-left: 0.03rem solid #eb5e18;}
.jr.case_l>h5 {  border-left: 0.03rem solid #0068b7;}
.sl.case_l>h5 {  border-left: 0.03rem solid #009e4a;}
.ty.case_l>h5 {  border-left: 0.03rem solid #00468e;}

.case_l>p { font-size: 0.14rem; color: #2b2b2b; text-align: left; text-indent: 0.28rem; line-height: 0.24rem; }
.a_pc {	/*text-align: left;*/ margin: 0.3rem 0 0.15rem 0; overflow: hidden; }
.a_pc span { width: 0.63rem; height: 0.56rem; display: inline-block; background: url(../images/case_pc.png) no-repeat; background-size: cover; vertical-align: -0.06rem;}
.jr.a_pc span{ background: url(../images/case_pc_jr.png) no-repeat; background-size: cover;}
.sl.a_pc span{ background: url(../images/case_pc_sl.png) no-repeat; background-size: cover;}
.ty.a_pc span{ background: url(../images/case_pc_ty.png) no-repeat; background-size: cover;}
.bt.a_pc span{ background: url(../images/case_pc_bt.png) no-repeat; background-size: cover;}

.a_pc a { font-size: 0.14rem; display: inline-block;width: 100%;text-align: center;}
.a_pc a p{ margin: 0.1rem 0; font-size: 0.18rem; color: #333; }
.a_pc a i { font-size: 0.14rem; width: 1.2rem; height: 0.24rem; display: inline-block; background: #bf9d5b; color: #fff; line-height: 0.24rem; border-radius: 0.12rem; }
.jr.a_pc a i{ background:#0068b7; }
.sl.a_pc a i{ background:#94c120; }
.ty.a_pc a i{ background:#aaa; }
.bt.a_pc a i{ background:#eb5e18; }

.a_m { text-align: left; overflow: hidden; }
.a_m span { width: 0.26rem; height: 0.54rem; display: inline-block; background: url(../images/case_m.png) no-repeat; background-size: cover; vertical-align: -0.07rem; margin-left: 0.05rem;}
.bt.a_m span { background: url(../images/case_m_bt.png) no-repeat; background-size: cover;}
.jr.a_m span { background: url(../images/case_m_jr.png) no-repeat; background-size: cover;}
.sl.a_m span { background: url(../images/case_m_sl.png) no-repeat; background-size: cover;}
.ty.a_m span { background: url(../images/case_m_ty.png) no-repeat; background-size: cover;}

.a_m a { font-size: 0.18rem;margin-top: 0.3rem; display: inline-block;color: #333; float: left;width: 100%;text-align: center; }
.a_m a p{ margin: 0.1rem 0; }
.a_m a i { font-size: 0.14rem; width: 1.2rem; height: 0.24rem; display: inline-block; background: #bf9d5b; color: #fff; line-height: 0.24rem; border-radius: 0.12rem; }
.bt.a_m a i { background: #eb5e18;}
.jr.a_m a i { background: #0068b7;}
.sl.a_m a i { background: #94c120;}
.ty.a_m a i { background: #aaa;}

.app { display: inline-block; font-size: 0.14rem; float: left; }
.app img { width: 1.52rem; height: 1.52rem; }
.wx { display: inline-block; font-size: 0.14rem;}
.wx img { width: 1.52rem; height: 1.52rem; }
.case_r { width: 12.56rem; float: right; }
.case_r .img { margin-top: 0.95rem; width: 100%; margin-bottom: 0.25rem; }
.case_r .img img { width: 100%; }
.a_m_pc_c{ width: 2.4rem;height: 0.02rem;display:block;background: url(../images/case_pc_m_c.png) no-repeat;background-size: cover;margin: 0.4rem 0.3rem; }

.scroll-left { width: 100%; height: 3.5rem; }
.scroll-left .tempWrap { width: 12.6rem; overflow: hidden; }
.scroll-left .tempWrap ul li { float: left; margin-right: 0.2rem; position: relative; cursor: pointer; }
.scroll-left .tempWrap ul li:hover .see_all { top: 0; left: 0; }
.tempWrap ul li img { width: 3rem; /*height: 2.26rem;*/ }
.scroll-left .hd { height: 0.78rem; }
.scroll-left .hd>p { font-size: 0.2rem; color: #9f9d9d; margin-top: 0.23rem; float: left; }
.scroll-left .hd .next, .hd .prev { width: 0.32rem; height: 0.32rem; display: block; background: url(../images/icon_next.png) no-repeat; background-size: cover; float: right; margin-top: 0.23rem; cursor: pointer; }
.scroll-left .hd .prev { background: url(../images/icon_prev.png) no-repeat; background-size: cover; margin-right: 0.24rem; }
.scroll-left .hd .next:hover { background: url(../images/icon_next2.png) no-repeat; background-size: cover; }
.scroll-left .hd .prev:hover { background: url(../images/icon_prev2.png) no-repeat; background-size: cover; }
.scroll-left .see_all { -webkit-transition: all 4.4s; position: absolute; width: 100%; height: 100%; background: url(../images/case_bg.png) no-repeat; background-size: cover; bottom: -2.26rem; left: 0; }
.scroll-left .see_all a{ width: 100%;height: 100%;display: block;}
.scroll-left .see_all.jj{ background: url(../images/case_bg_jj.png) no-repeat; background-size: cover; }
.scroll-left .see_all.bt{ background: url(../images/case_bg_bt.png) no-repeat; background-size: cover; }
.scroll-left .see_all.jr{ background: url(../images/case_bg_jr.png) no-repeat; background-size: cover; }
.scroll-left .see_all.ty{ background: url(../images/case_bg_ty.png) no-repeat; background-size: cover;}
.scroll-left .see_all.sl{ background: url(../images/case_bg_sl.png) no-repeat; background-size: cover; }
.case_bot { position: relative; margin-top: 1rem; }
.case_bot img { width: 100%; }
.case_bot .footer { position: relative; }
.case_bot .footer .qq { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_qq2.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 4.55rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .qq.on { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_qq.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 4.55rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .wx { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_wx2.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 6.31rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .wx.on { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_wx3.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 6.31rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .tel { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_tel2.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 8.07rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .tel.on { width: 1.24rem; height: 1.24rem; position: absolute; background: url(../images/xz_tel.png) no-repeat; background-size: contain; display: block; bottom: 0.85rem; left: 8.07rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; }
.case_bot .footer .tel:hover { background: url(../images/xz_tel_2.png) no-repeat; background-size: contain; }
.case_bot .footer .tel.on:hover { background: url(../images/xz_tel_2.png) no-repeat; background-size: contain; }
.case_bot .footer .wx:hover { background: url(../images/xz_wx.png) no-repeat; background-size: contain; }
.case_bot .footer .qq.on:hover { background: url(../images/xz_qq3.png) no-repeat; background-size: contain; }
.case_bot .footer .qq:hover { background: url(../images/xz_qq3.png) no-repeat; background-size: contain; }
.case_bot .footer .fot_p { position: absolute; display: block; font-size: 0.14rem; color: #fff; top: 1rem; left: 9.4rem; }
.case_bot .footer .fot_p2 { position: absolute; display: block; width: 8rem; height: 0.26rem; font-size: 0.18rem; color: #fefefe; bottom: 0.15rem; left: 50%; margin-left: -4rem; text-align: center; line-height: 0.26rem; }
.case_bot .footer .fot_p2 a{ color: #fff; }
.case_bot .footer .fot_p2 a:hover{ color: #00aade; }
/*service*/
.scroll { width: 100%; height: 100%; overflow: hidden; }
.scroll  ul li { width: 100%; position: relative; }
.scroll ul li img { width: 100%; height: 100%; }
.scroll ul li img.img { width: 12rem; /*height: 6.52rem;*/ position: absolute; left: 50%; bottom: -40%; display: block; opacity: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.active.on .scroll ul li img.img { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; bottom: -4%; opacity: 1; }
.active.on .scroll ul li.li_2 img.img { bottom: -11%;}
.active.on .scroll ul li.li_4 img.img { bottom: 6%;}
.scroll .next { width: 0.52rem; height: 0.87rem; display: block; background: url(../images/ser_l.png) no-repeat; background-size: cover; cursor: pointer; position: absolute; top: 4rem; left: 1.3rem; z-index: 10; }
.scroll .prev { width: 0.52rem; height: 0.87rem; display: block; background: url(../images/ser_r.png) no-repeat; background-size: cover; cursor: pointer; position: absolute; top: 4rem; z-index: 10; right: 1.3rem; }
.title2 { position: absolute; z-index: 15; text-align: center; left: 50%; top: 0; opacity: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); color: #333; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.section1 .title2.on { position: absolute; z-index: 15; text-align: center; top: 0; opacity: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); color: #333; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.active.on .title2.on { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; opacity: 1; top: 1.28rem; }
.active .title2 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; opacity: 1; top: 0.55rem; }
.title2 h5 { font-size: 0.48rem; margin-bottom: 0.15rem; }
.title2 p { font-size: 0.24rem; }
.gf { transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transform: scale(0.5, 0.5); opacity: 0; }
.gf_1 { width: 5.7rem; height: 5.75rem; position: absolute; left: 50%; margin-left: -2.85rem; top: 2.4rem; transition: all 2000s linear; -webkit-transition: all 2000s linear; -moz-transition: all 2000s linear; -ms-transition: all 2000s linear; -o-transition: all 2000s linear; }
.gf_1_2 { width: 2.83rem; height: 0.23rem; position: absolute; left: 50%; margin-left: -1.415rem; top: 8rem; }
.gf_1_1 { width: 2.31rem; height: 2.31rem; position: absolute; left: 50%; margin-left: -1.155rem; top: 4.13rem; }
.gf_2 { width: 2.51rem; height: 0.89rem; position: absolute; bottom: 0.5rem; left: 7rem; z-index: 20; }
.gf_3 { width: 1.15rem; height: 1.21rem; position: absolute; bottom: 1.2rem; left: 7.2rem; z-index: 11; }
.gf_4 { width: 1.7rem; height: 1.5rem; position: absolute; bottom: 1.18rem; left: 6.3rem; z-index: 10; }
.gf_5 { width: 0.72rem; height: 1.26rem; position: absolute; bottom: 1.28rem; left: 6.17rem; z-index: 9; }
.gf_6 { width: 1.58rem; height: 1.03rem; position: absolute; bottom: 0.5rem; left: 10.8rem; z-index: 11; }
.gf_7 { width: 1.67rem; height: 1.80rem; position: absolute; bottom: 0.49rem; left: 10.1rem; z-index: 10; }
.gf_8 { width: 3.12rem; height: 1.83rem; position: absolute; bottom: 0.9rem; left: 10.8rem; z-index: 9; }
.gf_9 { width: 1.2rem; height: 1.64rem; position: absolute; bottom: 1.2rem; left: 13.05rem; z-index: 8; }
.gf_10 { width: 2.3rem; height: 2.44rem; position: absolute; bottom: 0.76rem; left: 13.7rem; z-index: 7; }
.gf_11 { width: 2.65rem; height: 1.18rem; position: absolute; bottom: 1.45rem; left: 4.2rem; z-index: 8; }
.gf_12 { width: 2.25rem; height: 1.4rem; position: absolute; bottom: 2.3rem; left: 5.25rem; z-index: 7; }
.gf_13 { width: 2.35rem; height: 2.29rem; position: absolute; bottom: 2.6rem; left: 3.8rem; z-index: 7; }
.gf_14 { width: 1.13rem; height: 0.91rem; position: absolute; bottom: 2.72rem; left: 15.08rem; z-index: 6; }
.gf_15 { width: 1.12rem; height: 1.18rem; position: absolute; bottom: 2.75rem; left: 13.2rem; z-index: 6; }
.gf_16 { width: 1.9rem; height: 1.51rem; position: absolute; bottom: 2.9rem; left: 12.2rem; z-index: 5; }
.gf_17 { width: 1.78rem; height: 1.66rem; position: absolute; bottom: 3rem; left: 13.8rem; z-index: 5; }
.gf_18 { width: 1.59rem; height: 3.49rem; position: absolute; bottom: 2.9rem; left: 5.6rem; z-index: 6; }
.gf_19 { width: 1.97rem; height: 1.38rem; position: absolute; bottom: 3.6rem; left: 14.6rem; z-index: 4; }
.gf_20 { width: 3.34rem; height: 2.49rem; position: absolute; bottom: 3.8rem; left: 12.6rem; z-index: 3; }
.gf_21 { width: 3.18rem; height: 2.25rem; position: absolute; bottom: 3.35rem; left: 3.1rem; z-index: 6; }
.active .gf_1 { width: 5.7rem; height: 5.75rem; position: absolute; left: 50%; margin-left: -2.85rem; top: 2.4rem; transform: rotateZ(72000deg); -webkit-transform: rotateZ(72000deg); -moz-transform: rotateZ(72000deg); -ms-transform: rotateZ(72000deg); -o-transform: rotateZ(72000deg); }
.active .gf { transform: scale(1, 1); -webkit-transform: scale(1, 1); -ms-webkit-transform: scale(1, 1); -moz-webkit-transform: scale(1, 1); -o-webkit-transform: scale(1, 1); opacity: 1; }
.active .gf_2 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; }
.active .gf_3 { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; }
.active .gf_4 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; }
.active .gf_5 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; }
.active .gf_6 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; }
.active .gf_7 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; }
.active .gf_8 { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; }
.active .gf_9 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; }
.active .gf_10 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; }
.active .gf_11 { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; }
.active .gf_12 { transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -ms-transition-delay: 1.4s; -o-transition-delay: 1.4s; }
.active .gf_13 { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -ms-transition-delay: 1.6s; -o-transition-delay: 1.6s; }
.active .gf_14 { transition-delay: 1.3s; -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -ms-transition-delay: 1.3s; -o-transition-delay: 1.3s; }
.active .gf_15 { transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; }
.active .gf_16 { transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -ms-transition-delay: 1.4s; -o-transition-delay: 1.4s; }
.active .gf_17 { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -ms-transition-delay: 1.6s; -o-transition-delay: 1.6s; }
.active .gf_18 { transition-delay: 1.8s; -webkit-transition-delay: 1.8s; -moz-transition-delay: 1.8s; -ms-transition-delay: 1.8s; -o-transition-delay: 1.8s; }
.active .gf_19 { transition-delay: 1.8s; -webkit-transition-delay: 1.8s; -moz-transition-delay: 1.8s; -ms-transition-delay: 1.8s; -o-transition-delay: 1.8s; }
.active .gf_20 { transition-delay: 2s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; }
.active .gf_21 { transition-delay: 2s; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; }
.service_4 { position: absolute; width: 12rem; height: 100%; left: 50%; top: 3rem; margin-left: -6rem; transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; }
.service_4 ul li { color: #fff; float: left; width: 2.44rem; margin: 0 0.28rem; position: relative; }
.service_4 ul li span { border-radius: 50%; cursor: pointer; width: 2.44rem; height: 2.44rem; display: inline-block; transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; background-size: cover; }
.service_4 ul li span:hover { background-size: cover; }
.service_4 ul li h5 { font-size: 0.22rem; margin-bottom: 0.1rem; text-align: center; bottom: -2rem; position: relative; opacity: 0; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.service_4 ul li p { font-size: 0.14rem; padding: 0 0.05rem; bottom: -2rem; position: relative; opacity: 0; transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; }
.active .service_4 ul li p, .active .service_4 ul li h5 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s; opacity: 1; bottom: 0; }
.hq_1 span { background: url(../images/hq_1.png) no-repeat; }
.hq_2 span { background: url(../images/hq_2.png) no-repeat; }
.hq_3 span { background: url(../images/hq_3.png) no-repeat; }
.hq_4 span { background: url(../images/hq_4.png) no-repeat; }
.hq_1 span:before, .hq_2 span:before, .hq_3 span:before, .hq_4 span:before { pointer-events: none; position: absolute; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; }
.hq_1 span:hover, .hq_2 span:hover, .hq_3 span:hover, .hq_4 span:hover { background: rgba(255, 255, 255, 1); color: #702fa8; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3); }
.hq_1 span:hover:before { width: 2.44rem; height: 2.44rem; display: block; border-radius: 50%; background: url(../images/hq_1_2.png) no-repeat; background-size: cover; -webkit-animation: toRightFromLeft 0.5s forwards; -moz-animation: toRightFromLeft 0.5s forwards; -ms-animation: toRightFromLeft 0.5s forwards; -o-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; }
.hq_2 span:hover:before { width: 2.44rem; height: 2.44rem; display: block; border-radius: 50%; background: url(../images/hq_2_2.png) no-repeat; background-size: cover; -webkit-animation: toRightFromLeft 0.5s forwards; -moz-animation: toRightFromLeft 0.5s forwards; -ms-animation: toRightFromLeft 0.5s forwards; -o-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; }
.hq_3 span:hover:before { width: 2.44rem; height: 2.44rem; display: block; border-radius: 50%; background: url(../images/hq_3_2.png) no-repeat; background-size: cover; -webkit-animation: toRightFromLeft 0.5s forwards; -moz-animation: toRightFromLeft 0.5s forwards; -ms-animation: toRightFromLeft 0.5s forwards; -o-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; }
.hq_4 span:hover:before { width: 2.44rem; height: 2.44rem; display: block; border-radius: 50%; background: url(../images/hq_4_2.png) no-repeat; background-size: cover; -webkit-animation: toRightFromLeft 0.5s forwards; -moz-animation: toRightFromLeft 0.5s forwards; -ms-animation: toRightFromLeft 0.5s forwards; -o-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; }
@-webkit-keyframes toRightFromLeft {
	49% { -webkit-transform: translate(100%); }
	50% { opacity: 0; -webkit-transform: translate(-100%); }
	51% { opacity: 1; }
}
@-moz-keyframes toRightFromLeft {
	49% { -moz-transform: translate(100%); }
	50% { opacity: 0; -moz-transform: translate(-100%); }
	51% { opacity: 1; }
}
@-ms-keyframes toRightFromLeft {
	49% { -moz-transform: translate(100%); }
	50% { opacity: 0; -moz-transform: translate(-100%); }
	51% { opacity: 1; }
}
@-o-keyframes toRightFromLeft {
	49% { -moz-transform: translate(100%); }
	50% { opacity: 0; -moz-transform: translate(-100%); }
	51% { opacity: 1; }
}
@keyframes toRightFromLeft {
	49% { transform: translate(100%); }
	50% { opacity: 0; transform: translate(-100%); }
	51% { opacity: 1; }
}