body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,legend, input, textarea, p, blockquote, th, td {margin:0; padding:0;}
figure,figcaption {display: inline-block; margin: 0; padding: 0;}
body {color:#2e2e2e; font-size:14px;   font-family: PingHei,'PingFang SC',STHeitiSC-Light,"微软雅黑",Arial,sans-serif;}
ul, ol, li {list-style:none}
img {border:0;}
a {text-decoration:none; border:none;outline:none; cursor:pointer }
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0); -webkit-appearance: none}
.both {width: 100%; clear: both; line-height: 0; overflow: hidden;}
.h20 {height: 20px} .h30 {height: 30px} .h40 {height: 40px} .h50 {height: 50px} .h90 {height: 90px}
.ico-home  { margin-right: 6px; margin-bottom: 4px; width: 20px; height: 18px; background: url("../images/ico-home.png") no-repeat right top; vertical-align: middle; display: inline-block}
.t-indent24 {text-indent: 24px;}.t-indent32 {text-indent:32px;}.t-indent48 {text-indent: 48px;}

/* top begin */
.zt-wr {margin: 0 auto; width: 1200px;}
.zt-wr2 {margin: 0 auto; width: 1070px;}
.border-bottom {border-bottom: 1px solid #f5f6f7;}
.zt-head {height: 80px; overflow: hidden; }
.zt-head .zt-wr {position: relative;}
.zt-head .logo { margin-top:15px; float: left;}
.zt-nav { width: 74%; padding-top: 27px; font-size: 18px; text-align: right; float: right; position: absolute; top:0; right: 0; z-index: 21; }
.zt-nav a { margin-left: 40px; line-height: 38px; color: #2e2e2e; display: inline-block; position: relative}
.zt-nav a:hover { color: #2ac7eb;}
.zt-nav a.active {color: #2ac7eb;}
.zt-nav a.active i { width: 10px; height: 3px; background-color: #2ac7eb; display: inline-block; position: absolute; top: 0; left:2px; animation:navAnimation 0.25s  1 ease; animation-fill-mode: forwards;}
.zt-nav a.aone.active i {left:27px;}
.zt-nav a.active .ico-home {background-position: left top;}
@keyframes navAnimation{
    from { top:-30px;}
    to {top:0;;}
}

.zt-banner-top { min-width: 1200px; width: 100%; font-size: 0; line-height: 0;  position: relative;}
.zt-banner-top img {width: 100%;}
.zbt-1 { width: 100%; position: absolute; left: 0; top:0; z-index: 2;opacity: 0;   animation:zbt1 0.02s 0.5s 1 linear;  animation-fill-mode: forwards; }
.zbt-2 { width: 100%; position: absolute; left: 0; top:25%; z-index: 3; opacity: 0;transform: scale(0.5);  animation:zbt2 0.8s 1s 1 ease-in; animation-fill-mode: forwards;  }
.zbt-3 {width: 20%; height: 25%; background: url("../images/banner-top-3.png") no-repeat center top; background-size: contain;  position: absolute; right: 50%; top:4%; margin-right:-28%; z-index: 3;
    opacity:0; animation:zbt3 0.1s 4.1s 1 ease; animation-fill-mode: forwards;}
.zbt-31 {width: 20%; height: 36%; background: url("../images/banner-top-31.png") no-repeat center top; background-size: contain;  position: absolute; right: 50%; top:-4%; margin-right:-32%; z-index: 4;
    opacity:0; animation:zbt31 1.8s 2.5s 1 ease; animation-fill-mode: forwards;  }
@keyframes zbt1{
    from { top:0px;opacity: 1;}
    to {top:8.5%;;opacity: 1;}
}
@keyframes zbt2{
    0% { top:0;opacity: 0;transform: scale(0.5);}
    100% {top:25%;;opacity: 1;transform: scale(1);}
}
@keyframes zbt31{
    0% {opacity: 0;transform:translate(200px,-60px) }
    20% {transform:translate(0px,0px); opacity: 1;  }
    30% {transform:translate(20px,-20px); opacity: 1;}
    40% {transform:translate(0px,0px); opacity: 1; }
    90% {transform:translate(0px,0px); opacity: 1; }
    100% {transform:translate(200px,-60px); opacity: 0;}
}
@keyframes zbt3{
    0% { opacity: 0;}
    100% {opacity: 1;}
}

.zt-sunbox {height: 128px;background: url("../images/line_02.jpg") no-repeat bottom center;}
.zt-sunbox ul li {width: 25%; float: left; text-align: center; color: #626262;}
.zt-sunbox ul li span { padding: 25px 0 0;  font-size: 22px; display: block}
.zt-sunbox ul li span b { font-size: 36px;  margin: 0 6px 2px 0; color: #2ac7eb;}
.zt-sunbox ul li p { padding: 5px 0 0; font-size: 20px;}
.zt-sunbox ul li p img {margin-right: 6px; vertical-align: middle;}

.zt-onebg { background: url("../images/line-01.png") repeat-x left top;}
.zt-onebg  h2 { padding: 20px 0 12px; font-size: 48px; font-weight: normal;  color: #6a6a6a; text-align: center}
.zt-onebg  h4 { text-align: center; line-height: 0;}
.zt-onebg  h4 img {margin: 0 6px;}
.zt-onebg  h5 { padding: 18px 0; text-align: center; font-size: 24px; font-weight: normal; position: relative;}
.zt-onebg  h5 i { width: 150px; height: 3px;background: url("../images/line_03.png") repeat-x left bottom; display: inline-block; position: absolute; bottom: 0; left: 50%; margin-left: -75px; }
.ztone-ul {margin: 40px 0 0; clear: both;}
.ztone-ul li {margin: 0 0 75px 0; width: 252px; height: 270px; border: 1px solid  #bfbfbf; border-radius: 6px; text-align: center; float: left; position: relative;}
.ztone-ul li.zo1 { margin-right: 156px;}
.ztone-ul li.zo3 { float: right}
.ztone-ul li a {display: block; overflow:hidden;}
.ztone-ul li .top-en { width: 100%; position: absolute; top:-11px; left: 0; z-index: 1; }
.ztone-ul li h3 {padding: 16px 0 0; height: 40px; font-size: 24px; color: #0991fc; font-weight: normal;}
.ztone-ul li b {padding: 14px 0 20px;  color: #2e2e2e; font-size:22px; font-weight: normal; display: block;}
.ztone-ul li span {width: 118px; height: 32px; line-height: 32px; text-align: center; color: #fff; border-radius: 4px; background-color: #0991fc; display: inline-block;}
.ztone-ul li.zo2 h3 {color: #fc7d16;}
.ztone-ul li.zo2 span {background-color:#fc7d16; }
.ztone-ul li.zo3 h3 {color: #2ac7eb;}
.ztone-ul li.zo3 span {background-color:#2ac7eb; }
.ztone-ul li:hover {border-color: #0991fc }
.ztone-ul li.zo2:hover {border-color: #fc7d16 }
.ztone-ul li.zo3:hover {border-color: #2ac7eb }
.ztone-ul li span:hover {background-color: #f60;animation:aHover 0.3s 1  linear;}
.ztone-ul li:hover .simg {animation:ztImg 1.5s  infinite  linear;}

.zttilte { clear: both; overflow: hidden;}
.zttilte dt {width: 138px; height: 104px; background: url("../images/line_04.png") no-repeat right top; float: left}
.zttilte dt img {margin-top: 4px;}
.zttilte dd { margin-left: 160px; }
.zttilte dd b {padding: 13px 0 10px; font-size: 40px; color: #6a6a6a; font-weight: normal; display: block}
.zttilte dd b strong {color:#2ac7eb; font-weight: normal;}
.zttilte dd p {font-size: 18px; line-height: 180%}
.zttilte dd  a {color:#2ac7eb;}
.zttilte dd  a:hover {color: #f60;animation:aHover 0.3s 1  linear;}

.zt-two { padding: 72px 0 68px; clear: both; overflow: hidden; text-align: center}
.zt-two li {width: 25%; height: 194px; float: left; position: relative;}
.zt-two li a {display: block;}
.zt-two li b { padding:18px 0 5px; font-size:18px; font-weight:normal; color: #626262; display:block;}
.zt-two li span { width: 120%; font-size: 11px; color: #626262;  text-transform:uppercase; position: absolute; left: 50%; margin-left: -60%;}
.zt-two li i { width: 112px; height: 1px; background-color: #2ac7eb; position: absolute; bottom: 0; left: 50%; margin-left: -56px;}
.zt-two li.zt2 i {background-color: #ebb62d}
.zt-two li.zt3 i {background-color: #259efc}
.zt-two li.zt4 i {background-color: #86d13f}
.zt-two li:hover img {animation:ztImg 1.5s  infinite  linear;}
.zt-two li:hover b ,.zt-two li:hover span {color: #2ac7eb; }
.zt-two li.zt2:hover b ,.zt-two li.zt2:hover span {color: #ebb62d; }
.zt-two li.zt3:hover b ,.zt-two li.zt3:hover span {color: #259efc; }
.zt-two li.zt4:hover b ,.zt-two li.zt4:hover span {color: #86d13f; }

.zt-three { padding: 50px 0; clear: both; overflow: hidden;}
.zt-three .ztt { padding: 0; width:345px; border: 1px solid #81d4f5;float: left; overflow: hidden;}
.zt-three .ztt-left {margin-right: 13px;}
.zt-three .ztt-right {float: right;}
.zt-three .ztt .tbg { width: 100%; height: 186px; background-color: #81d4f5;  text-align: center; position: relative; margin-top: -1px;}
.zt-three .ztt .tbg h3 { padding-top: 32px; font-size: 36px; color: #fff; font-weight: normal; }
.zt-three .ztt .tbg h3 span { color: #fc7609;}
.zt-three .ztt .op {width: 160px; height: 160px; border-radius: 100%; background-color: #fff; position: absolute; bottom: -80px; left:50%; margin-left: -80px; z-index: 1; opacity: 0.25; }
.zt-three .ztt .timg { width: 140px; height: 140px; border-radius: 100%; text-align: center; background-color: #fff; position: absolute; bottom: -70px; left:50%; margin-left: -70px; z-index: 2 }
.zt-three .ztt .timg img {margin-top: 26px;}
.zt-three .ztt .timg img.img2 {margin-left: 15px;}
.zt-three .ztt .timg img.img3 {margin-left:5px;}
.zt-three .zcn {padding: 80px 24px 0; height:135px; color: #000002;}
.zt-three .ztt .zb {height:200px; background-color: #effcff; text-align: center;}
.zt-three .ztt .zb  img {max-width: 100%;}
.zt-three .ztt .zb a { margin: 6px auto 0; width: 134px; height: 42px; line-height: 42px; color: #fff; background-color: #f60; display: inline-block ; box-shadow:0 0 7px rgba(163, 177, 182, .5); border-radius: 3px; }
.zt-three .ztt .zb a:hover {background-color: #81d4f5;animation:aHoverBule 0.3s 1  linear;}
.zt-three .ztt:hover .op{animation:zttOP 2.4s  infinite  linear;}
@keyframes zttOP{
    0% {transform:scale(1.2) }
    50% {transform:scale(1);}
    100% {transform:scale(1.2);}
}

.zt-four { margin: 0 0 50px; background-color: #f5f6f7;clear: both; overflow: hidden;}
.zt-four .zttilte { margin: 48px 0 80px 65px;}
.zt-fourleft { margin: 0 0 90px 65px; width: 500px; height: 245px; float: left; border: 1px solid #bfbfbf; position: relative}
.zt-fourleft .tname { padding: 0 20px; background-color: #f5f6f7; font-size: 20px; font-weight: normal; position: absolute; top: -15px; left: 24px; }
.zt-fourleft .cp {margin: 20px 20px; padding: 10px 25px; height: 180px; font-size: 16px; line-height: 30px; background-color: #fff;}
.zt-fourleft .btn { width: 502px; height: 50px; line-height: 50px; background-color:#2ac7eb; border-radius: 3px; text-align: center; font-size: 26px; color: #fff; font-weight: normal; display: block;  position: absolute; bottom: -2px; left: -1px;}
.zt-fourleft .btn:hover {background-color: #f60;animation:aHover 0.3s 1  linear;}

.zt-fourmid { width: 134px; height: 250px; position: relative; float: left; }
.zt-fourmid .line45 { width: 120px; height: 265px; background: url("../images/zt-13.png") no-repeat; display: inline-block; position: absolute; left: 13px; top: -46px;}
.zt-fourmid .four-animation { width: 80px; height: 80px; display: inline-block; background: url("../images/zt-12.png") no-repeat;position: absolute; left: 33px; top: 47px;
    animation:fourAanimation 1s 0s infinite linear; }
.zt-fourmid .ft { width: 80px; height: 80px; text-align: center; line-height: 20px; position: absolute; left: 33px; top: 65px; }
@keyframes fourAanimation{
    0% {transform:rotate(0deg) }
    100% {transform:rotate(360deg);}
}
.zt-fourright { margin-left: 0; width: 460px; float: right;}
.zt-fourright .zfr-t {margin:20px 0 0; padding:0 10px;height: 225px;  font-size: 16px; line-height: 30px; background-color: #fff; overflow: hidden;}
.zt-fourright .zfr-t span{ margin: 10px 0; display: block;}

.ztfive-list { margin: 50px 0; clear: both;}
.ztfive-list ul li {width: 330px; height: 360px; float: left; border: 1px solid #dfdfdf; position: relative; overflow: hidden;}
.ztfive-list ul li.zf-l {margin-right: 38px;}
.ztfive-list ul li.zf-r {float: right}
.ztfive-list ul li b {padding:20px 0 15px; text-align: center; font-size: 20px; line-height: 100%; font-weight: normal; display: block;}
.ztfive-list ul li b i {margin-right:10px; width: 2px; height: 18px; vertical-align: middle; background-color: #2ac7eb; display: inline-block;}
.ztfive-list ul li p {padding: 0 18px; text-align: justify; line-height: 30px; font-size: 16px; }
.ztfive-list ul li a {width: 96%; height: 50px; line-height: 50px; background-color:#2ac7eb; border-radius: 3px; text-align: center; font-size: 20px; color: #fff; font-weight: normal; display: block;  position: absolute; bottom:-60px; left: 2%; z-index: 3}
.ztfive-list ul li a:hover {background-color: #f60;animation:aHover 0.3s 1  linear; }
.ztfive-list ul li .backbg { z-index: 2; bottom: -105%;}
.backbg { width: 100%; height: 100%; background-color: #000; position: absolute; left: 0; bottom: 0; opacity: 0.2}


.ztfive-title { margin-bottom:40px;height: 80px; text-align: center; font-size: 48px;  color: #6a6a6a; position: relative;}
.ztfive-title i { width: 150px; height: 1px; background-color: #2ac7eb; position: absolute; left: 50%; bottom: 0; margin-left: -75px;}
.ztf-imglist  {clear: both; overflow: hidden;}
.ztf-imglist li { margin-bottom: 65px; width: 270px; float: left; text-align: center;}
.ztf-imglist li.zf-l {margin-right:130px}
.ztf-imglist li.zf-r {float: right;}
.ztf-imglist li span { width: 100px; height: 100px; border: 1px solid #dfdfdf; border-radius: 3px; display: inline-block;}
.ztf-imglist li span img {margin-top: 25px;}
.ztf-imglist li b { margin-bottom: 15px; padding:30px 0 0; height:55px; font-size: 18px; color: #2ac7eb; font-weight: normal; display: block; position: relative;}
.ztf-imglist li b i { width:38px;  height: 1px; background-color: #aaefff; border-top: 1px solid #ccf5ff; display: inline-block; position: absolute; left: 50%; bottom: 0; margin-left: -19px;}
.ztf-imglist li a {width: 170px; height: 50px; line-height: 50px; background-color: #2ac7eb;  border-radius: 3px; text-align: center; font-size: 20px; color: #fff; font-weight: normal; display: inline-block;  }
.ztf-imglist li a:hover {background-color: #f60; animation:aHover 0.2s 1  linear;animation-fill-mode: forwards;   }
.ztf-imglist li:hover span img {animation:ztImg 1.5s  infinite  linear;}


.zt-sixpic { clear: both; text-align: center;}
.zt-sixpic p { padding: 35px 0 50px;}
.zt-sixpic p a { margin: 6px auto 0; width: 300px; height: 96px; line-height: 96px; font-size: 30px; letter-spacing: 2px; color: #fff; background-color: #2ac7eb; display: inline-block ; box-shadow:0 0 7px rgba(163, 177, 182, .5); border-radius: 3px; }
.zt-sixpic p a:hover {background-color: #f60; animation:aHover 0.2s 1  linear;}
.btn-border-blue { padding: 0 30px; height: 50px; line-height: 48px; color: #2ac7eb; background-color: #e4f7ff; border:1px solid #2ac7eb; text-align: center; font-size:30px; border-radius: 3px; display: inline-block; }
.btn-border-blue:hover {background-color: #f60; border-color: #f60; color:#fff; animation:aborderBuelHover 0.2s 1  linear;}
.btn-border-blue2 { padding: 0 30px; height: 50px; line-height: 48px; color: #2ac7eb;  border:1px solid #2ac7eb; text-align: center; font-size:26px; border-radius: 3px; display: inline-block; }
.btn-border-blue2:hover {background-color: #f60; border-color: #f60; color:#fff; animation:aborderBuelHover 0.2s 1  linear;}
.btn-blue {padding: 0 5%; width: 90%; height: 50px; line-height: 48px; color: #fff; background-color: #2ac7eb; text-align: center; font-size:20px; border-radius: 3px; display: inline-block; }
.btn-blue:hover {background-color: #f60;animation:aHover 0.3s 1  linear; }
.btn-large { padding:0 20px;min-width:260px; width: auto; height:78px;  line-height: 78px; font-size: 26px; letter-spacing: 2px; box-shadow: 0 0 7px rgba(163, 177, 182, .5);}
.btn-blue-yellow {padding: 0 15px; min-width: 66px; height: 24px; line-height: 24px; color: #ffa022; font-weight: bold; background-color: #d7f9ff; border: 2px solid #2ac7eb; text-align: center; font-size:15px; border-radius: 3px; display: inline-block; }
.btn-blue-yellow:hover {background-color: #f60;border-color: #f60; color:#fff;animation:btnBlueYellowHover 0.3s 1  linear; }
@keyframes aHover {
    0% {background-color: #2ac7eb; }
    100% { background-color: #f60;  }
}
@keyframes aHoverBule {
    0% {background-color: #f60; }
    100% {background-color: #2ac7eb;  }
}
@keyframes aborderBuelHover {
    0% {background-color: #e4f7ff; }
    100% {background-color: #f60;border-color: #f60; color:#fff; }
}
@keyframes btnBlueYellowHover {
    0% {background-color: #d7f9ff; }
    100% {background-color: #f60;border-color: #f60; color:#fff; }
}
.zt-seven {background-color: #2ac7eb; text-align: center;  clear: both;}
.zt-seven h2 {padding: 42px 0 0; font-size: 48px; color: #fff; font-weight: normal}
.zt-seven h4 {margin-bottom: 60px; padding:5px 0 20px; font-size: 22px; color: #fff; font-weight: normal; position: relative;}
.zt-seven h4 i {width: 150px; height: 1px; background-color: #fff; border-bottom: 1px solid #8ae0f4; display: inline-block; position: absolute; left: 50%; bottom: 0; margin-left: -75px;}
.zt-seven ul {padding-bottom: 10px;}
.zt-seven ul li { margin: 0 0.5% 25px; width: 18.7%; float:left;}
.zt-seven ul li a { height: 50px; line-height: 48px; background-color: #48ceed; font-size: 15px; color: #fff; border: 4px solid #fff; border-radius: 30px; font-size: 18px; display: block;}
.zt-seven ul li a:hover {background-color: #f60;  animation:ahoverSeven 0.2s 1  linear;}
@keyframes ahoverSeven {
    0% {background-color: #48ceed; }
    100% {background-color: #f60;  }
}

.zt-eight {clear: both; background-color: #f5f6f7;}
.zt-eight ul {padding: 60px 0 50px; }
.zt-eight ul li {width: 25%; float: left;}
.zt-eight ul li .pimg { width: 70px; height: 70px; border-radius: 70px; background-color: #fff; display: inline-block; float: left;}
.zt-eight ul li p { margin-left: 90px;}
.zt-eight ul li p b { padding: 8px 0; display: block; font-size: 20px; font-weight: normal;}
.zt-eight ul li p span {font-size: 14px;}
.zt-eight ul li.ze1 { width: 23%}
.zt-eight ul li.ze2 { width: 28%}
.zt-eight ul li.ze3 { width: 28%}
.zt-eight ul li.ze4 { width: 21%}
.zt-foot { padding-bottom: 160px; text-align: center; font-size: 16px;}
.zt-foot2 {padding-bottom:30px; text-align: center; font-size: 16px}

.service-box { width: 100%; min-width: 1200px; height: 110px; background: url("../images/zx-bg.jpg") no-repeat bottom center; position: relative; position: fixed; left: 0; bottom: 0; z-index: 20}
.service-box .zt-wr {height: 128px; position: relative; overflow: inherit}
.service-box .zx1 {position: absolute; top: -82px;}
.service-box .zxt {  padding:24px 0 0 164px; float: left;}
.service-box .zx-r { width: 480px; float: right; text-align:center}
.service-box .z-phone { padding: 10px 0 0; height: 54px; line-height: 54px;}
.service-box .z-phone b { font-size: 28px; color: #dc3028; font-weight:bold}
.service-box .zxbtn { width: 140px; height: 40px; line-height: 40px; background-color: #dc3028; font-size: 16px; color: #fff;  border-radius: 6px; display:inline-block; box-shadow:0 0 7px rgba(163, 177, 182, .5);}
.service-box .zxbtn:hover {background-color: #f60;  animation:zxBtn 0.2s 1  linear;}
@keyframes zxBtn {
    0% {background-color: #dc3028; }
    100% {background-color: #f60;  }
}
.phone-animation { margin:0 10px 8px; width: 38px; height: 44px; vertical-align: middle; position: relative; display: inline-block;}
.phone-animation em { width: 100%; height: 100%; display: inline-block; background-image: url("../images/zx-3.png"); background-repeat: no-repeat; position: absolute; left: 0; top:0;}
.phone-animation .z1 {background-position: left top; animation:zta 0.1s 2s infinite linear; animation-fill-mode: forwards;  }
.phone-animation .z2 {background-position: -39px top; opacity: 0; animation:zta2 2s infinite linear; }
.phone-animation .z3 {background-position: -78px top; opacity: 0;  animation:zta3 2s infinite linear;  }
.phone-animation .z4 {background-position: -117px top; opacity: 0;  animation:zta4 2s infinite linear;  }
@keyframes zta2 {
    0% {opacity: 0; }
    10% {opacity: 1; }
    90% {opacity: 1;  }
    100% {opacity: 0;  }
}
@keyframes zta3 {
    0% {opacity: 0; }
    30% {opacity: 0; }
    40% {opacity: 1; }
    90% {opacity: 1;  }
    100% {opacity: 0;  }
}
@keyframes zta4 {
    0% {opacity: 0; }
    50% {opacity: 0; }
    60% {opacity: 1; }
    90% {opacity: 1;  }
    100% {opacity: 0;  }
}

@keyframes ztImg{
    0% { transform:translate(0,0) }
    20% { transform:translate(0,3px) }
    50% { transform:translate(0,10px) }
    100% {transform:translate(0,0)}
}

.zt-right { width: 162px; height: 310px; position: fixed;  right: 10px;top: 20%; z-index: 21 }
.zt-right a {display: block; cursor: pointer;}
.zt-home { width: 59px; height: 59px; background: url("../images/ico-home2.png") no-repeat; display:none; position: fixed; right: 60px; bottom: 130px; z-index: 21 ;  }
.zt-home:hover { opacity: 0.6;}
.zt-home.ft {bottom: 20px;}