/* reset */
html { color: #333; background: #fff; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll; }
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {  margin: 0;  padding: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
audio,canvas,video {  display: inline-block;  *display: inline;  *zoom: 1; }
body,button,input,select,textarea { font: 500 12px '微软雅黑'; line-height: 1.15; }
button,input { *width: auto; *overflow: visible; line-height: 1.15; }
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: inherit; }
fieldset,img { border: 0; }
img { -ms-interpolation-mode: bicubic; }
iframe { display: block; }
ul,ol { list-style: none; }
caption,th { text-align: left; }
q:before,q:after { content: ''; }
a:hover,a:focus { text-decoration: none !important; }
ins,a { text-decoration: none; }
a,input,select,label,button { outline: none; -webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0);}
textarea { overflow: auto; vertical-align: top; }
button[disabled],html input[disabled] { cursor: default; }
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
i{font-style:normal;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
.fl {float: left;}
.fr {float: right;}
.fb{font-weight: normal !important;}
.ml30 { margin-left: 30px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px !important;}
.mt100 {margin-top: 100px !important;}
.mt120 {margin-top: 120px;}
.mt150 {margin-top: 150px !important;}
.mt180 {margin-top: 180px !important;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb100 {margin-bottom: 100px;}
.mauto {margin: 0 auto;}
.pt300 {padding-bottom: 300px !important; clear: both;}
.pt250 {margin-top: 250px !important; clear: both;}
.pt200 {margin-top: 200px; clear: both;}
.pt50 {padding-top: 50px; clear: both;}
.pt100 {margin-top: 100px; clear: both;}
.pb35 {padding-bottom: 35px !important;}
.pb100 {padding-bottom: 100px !important;}
.pb200 {padding-bottom: 200px !important;}
.pb250 {padding-bottom: 250px !important; }
.re {position: relative;}
.tc {text-align: center !important;}
.left{ left: -1%;}
.gray {color: #8b8b8b;}
.black {color: #333;}
.bb {
  border-bottom: 1px solid #f2f2f2;
}

/* common */
header{ text-align:center;  }
header ul{ display: inline-block; vertical-align: bottom;}
header li{ float: left;}
header li a{ color: #333; text-decoration: none; width: 110px; display: inline-block; line-height: 50px; font-size: 16px;transition: all .2s;}
.contactdh .contacta { color: #fff; }
header li.firsta:hover,header li.firsta:active {
  color: #25dbfb !important;
  /* letter-spacing: 5px; */
}

header li.firsta:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          color: #fff;
  border-bottom: 2px solid #fff;
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
          transition: all 280ms ease-in-out;
  width: 0;
}

header li.firsta:hover:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #25dbfb;
  -webkit-transition: width 350ms ease-in-out;
          transition: width 350ms ease-in-out;
  width: 100%;
}

header li.firsta:hover:before {
  bottom: auto;
  top: 0;
  width: 100%;
} 
/*  header li a:after {content: ""; display: block; margin: auto; height: 2px; width: 0; background-color: transparent; transition: all ease .3s;}
header li.on a:after{ width: 100%; background-color: #fff; } */
header .index-menulast-li a{opacity: 0;cursor: default;}
header .header-menu{position: relative; z-index:100;width:90%;margin:15px auto 0 auto;max-width: 1200px;}
header .header-bg{position: absolute; width:100%;height:100%;top:0;transition: all ease .2s;z-index:95}
header.hover .header-bg, header.scroll .header-bg:not(.sub-menu){ /*background: hsla(0,0%,100%,.8);*/ background-color: #fff; }
header.hover{border-bottom-color: rgba(255, 255, 255, 0);}
header.scroll{box-shadow: 0 3px 15px rgba(0,0,0,.1);}
header.hover li a, header.scroll li a{ color: #333 }
.header-menu > ul > li.hover > a:not(.index-logo):after,
header.hover .header-menu > ul > li.on > a:not(.index-logo):after,
header.scroll .header-menu > ul > li.on > a:not(.index-logo):after{ width: 100%; background-color: #3d4474;}
header .menu-logo{ position: absolute;left: 0;padding-top: 10px;}
header .menu-logo a { display: block; float: left; text-align: left; width: 122px;} 
.footer-logo a { display: block; float: left; text-align: left; } 
/* header .menu-logo img:hover{
  transform: scale(1.1);
    -ms-transform:scale(1.1);     IE 9
    -moz-transform:scale(1.1);     Firefox
    -webkit-transform:scale(1.1); Safari 和 Chrome
    -o-transform:scale(1.1);
} */
header .menu-sy{ position: absolute;right: 0; top:3px; background: url("../imgs/button.png") no-repeat bottom;background-size: 80%; padding: 0 0 30px 20px;}
header .menu-language{ display: block; color:#fff; background: -webkit-linear-gradient(180deg, #9193fb, #53b0f9) !important; background:#53b0f9;border-radius: 40px; padding: 12px 40px;max-width: 160px;font-size: 18px;}
header .menu-language1{ display: block; color:#fff; border:1px solid #fff; border-radius: 40px; padding: 10px 38px;max-width: 160px;font-size: 18px;}
header .menu-language:hover {background: -webkit-linear-gradient(180deg, #9fa1fc, #69b9fa) !important;background:#69b9fa;margin-top: -1px;}
header .menu-language:active {background: -webkit-linear-gradient(180deg, #8789ea, #4da4e8) !important;background:#4da4e8;}
header .index-logo {width:127px;position: relative;}
header .index-logo img{position: absolute;top:0;left: 0;transition: all ease .5s;padding: 16px 20px;}
header .index-logo :first-child{opacity: 1}
header .index-logo :last-child{opacity: 0}
header.hover .index-logo :first-child{opacity: 0}
header.hover .index-logo :last-child{opacity: 1}
header.scroll .index-logo :first-child{opacity: 0!important;}
header.scroll .index-logo :last-child{opacity: 1!important;}

.header-menu ul li{position: relative;}
.header-menu ul li ul{position: absolute;left:0; width: 130px; display: none;background: #fff;-moz-box-shadow:0px 0px 10px #f7f7f7; -webkit-box-shadow:0px 0px 10px #f7f7f7; box-shadow:0px 0px 10px #f7f7f7;
}

.header-menu ul li ul li {border-bottom: 1px solid #f1f1f1; }
.header-menu ul li ul li a{font-size: 14px !important; line-height: 40px;}
.header-menu ul li ul li:last-child {border-bottom:none}
.header-menu ul li.hover ul, .header-menu ul li.on ul{display: block;
}
header.hover li ul li.on a{color: #4272fc}
header.hover li ul li.on a:after{background-color: transparent;} 

header .sub-menu{top:71px;border-top: 1px solid transparent; display: none;z-index:90;opacity:0}
header.hover .sub-menu{border-top: 1px solid #e9e9e9;background-color: #fff;display: block;}
header.scroll.hover .sub-menu{box-shadow: 0 3px 15px rgba(0,0,0,.1);}
header ul ul li a:hover, header ul ul li a.on{ color: #25dbfb }
header.hover ul ul li a:not(.index-logo):hover:after, header.hover ul ul li a:not(.index-logo).on:after{ background-color: transparent; }
#header-main-menu > li a i{display: none;}
/* #index-bg-building{position: absolute;z-index: 30;opacity: 0} */
.mode-desktop{display: block!important}
.mode-mobile{display: none!important}
.logoline { background: url("../imgs/logoline.png") no-repeat right 11px;padding-right: 14px; margin-right: 14px;}
.logoline1 { background: url("../imgs/logoline1.png") no-repeat right 11px;padding-right: 14px; margin-right: 14px;}

/*** 侧边菜单 ***/
ul.side-nav{ width: 120px; height: auto; float: left; border-right: 1px solid #eee; margin-top: 13px;}
ul.side-nav a { font-size: 14px; padding-top:20px; padding-bottom: 20px; color: #666; display: block; margin-right: -1px;text-align: right;padding-right: 20px;border-right:2px solid transparent;}
ul.side-nav a.on { color: #79b3ff; border-right:2px solid #79b3ff;}

.news-content{margin-bottom:90px;}

.fixed { width: 100%; position: fixed; z-index: 99999; top: 0;}
.fixedbg {background: #fff;-moz-box-shadow:0px 0px 10px #f7f7f7; -webkit-box-shadow:0px 0px 10px #f7f7f7; box-shadow:0px 0px 10px #f7f7f7;}

/*底部*/
footer{background: #fafafc;}
/*footer{background: #1c1e2a;min-width:auto;}*/
.footer-inner{width:90%;margin:0 auto;padding: 50px 0;max-width: 1128px;}
.footer-phone{font-size: 14px;color: #8b8b8b;margin-top: 46px;opacity: 0.5;}
.footer-inner .contact-icon{margin-top: 20px;}
.footer-inner .contact-icon a.wx:hover .qrCode{display: inline-block;}

.footer-inner .contact-icon a{margin:0 13px 0 3px;opacity: 0.5;transition: all 0.3s ease;}
.footer-inner .contact-icon a:hover{opacity: 1;}
.footer-inner .footer-logo{float: left;margin-top: 10px;width: 30%;}
.footer-inner .footer-list{margin: 10px auto 0 auto; width: 50%; margin-left: 30%;}
.footer-inner .footer-list ul li{float: left;width: 25%;text-align: center; clear: right;}
.footer-list h3>a{color: #8b8b8b;margin-bottom:17px;font-size: 14px;display: inline-block;font-weight: bold; width: 100%;}
.footer-list p>a{color: #8b8b8b;margin-bottom:17px;font-size: 14px;display: inline-block;transition: all 0.3s ease;opacity: 0.5; width: 100%;}
.footer-list p>a:hover{opacity: 1;}


footer .footer-copyright{border-top: 1px solid #000;text-align: center;font-size: 12px;}
footer .footer-copyright span{margin:20px 0 25px 33px;display: inline-block;color: #8b8b8b;opacity: 0.5;}
footer .footer-copyright span a{color: #8b8b8b;transition: all 0.3s ease;}
footer .footer-copyright span:first-child:hover{opacity: 0.5;}
footer .footer-copyright span:hover{opacity: 1;}
footer .beian {text-align: center;padding: 20px 0;}
footer .beian a { color: #8b8b8b;}


.content {width:90%;margin:0 auto;padding: 150px 0 0 0;max-width: 1200px;}
.content h1 {font-size: 66px; font-weight: bold; margin-bottom: 20px;}
.content h2 {font-size: 66px; font-weight: bold; margin-bottom: 40px;}
.content p { width: 53%; line-height: 34px; color: #8b8b8b; font-size: 18px;}

.content1 {width:960px;margin:0 auto;text-align: center;}
.content1 h1 {font-size: 32px; font-weight: bold; margin-bottom: 30px;}
.content1 h2 {font-size: 24px; font-weight: bold; margin-bottom: 20px;}
.content1 p { line-height: 36px; color: #8b8b8b; text-align: left; margin-top: 80px; font-size: 16px;}

.content2 {width:960px;margin:0 auto;text-align: center;}
.content2 h1 {font-size: 20px; font-weight: bold;text-align: left;}
.content2 h2 {font-size: 20px;font-weight: bold;color: #25dbfb;margin-top: 20px;}

.content3 {max-width:1128px;margin:0 auto;text-align: center;}

.content4 {width:90%;margin:0 auto;max-width: 1100px; clear: both;}
.content4 h1,.content5 h1 {font-size: 54px; /* font-weight: bold; */ margin-bottom: 40px;}
.content4 h2,.content4 h3,.content5 h2,.content5 h3 {font-size: 30px;  margin-bottom: 40px; }
.content4 p,.content5 p { line-height: 48px; color: #333; font-size: 24px;}
.content4 span,.content4 pre,.content5 span,.content5 pre { line-height: 48px; color: #8b8b8b; font-size: 18px;}
.content4 pre,.content5 pre  { line-height: 40px;}

.content5 {width:100%;margin:0 auto;max-width: 1200px;}

.content5 h1 {font-size: 40px; font-weight: bold;  margin-bottom: 40px;}

.content5 h4 {font-size: 24px; line-height: 48px;  margin-bottom: 40px; text-align: left; clear: both;}
.content5 h4 i {
  background-image:-webkit-linear-gradient(left,#03d0ff,#028efc); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}
.content5 h5 {font-size: 24px;  margin-bottom: 30px; }
.content5 h6 {font-size: 20px;  margin-bottom: 30px; }

.btns {display: block;text-align: center !important;border-radius: 40px !important; padding: 12px 40px !important;max-width: 160px !important;font-size: 18px !important;}
.btn1 {background: -webkit-linear-gradient(180deg, #03dbff, #028ffc) !important;background:#028ffc;color: #fff !important;}
.btn1:hover {background: -webkit-linear-gradient(180deg, #1bd9fd, #1a9dfe) !important;background: #1a9dfe;-moz-box-shadow:0px 0px 10px rgba(2,142,252,.5) !important; -webkit-box-shadow:0px 0px 10px rgba(2,142,252,.5); box-shadow:0px 0px 10px rgba(2,142,252,.5); margin-top: -1px;}
.btn1:active {-moz-box-shadow:0px 0px 10px rgba(2,142,252,.5) !important; background:#0276d2;-webkit-box-shadow:0px 0px 10px rgba(2,142,252,.5) !important; box-shadow:0px 0px 10px rgba(2,142,252,.5);background: -webkit-linear-gradient(180deg, #02b5d4, #0276d2) !important;}
.btn2 {background: #daf8fd !important;color: #25dbfb !important;}
.btn2:hover {-moz-box-shadow:0px 0px 10px rgba(27,212,254,.2) !important; -webkit-box-shadow:0px 0px 10px rgba(27,212,254,.2) !important; box-shadow:0px 0px 10px rgba(27,212,254,.2);margin-top: -1px;}
.btn2:active {background: #cfecf1 !important; color:#02b4d4 !important;-moz-box-shadow:0px 0px 10px rgba(27,212,254,.2) !important; -webkit-box-shadow:0px 0px 10px rgba(27,212,254,.2) !important; box-shadow:0px 0px 10px rgba(27,212,254,.2) !important;}

.btn3 {background: #ccc !important;color: #fff !important;}

.tab  {background: url("../imgs/line.jpg") repeat-x center 58px;margin: 30px 0 0 0;height: 90px;line-height: 60px; position: relative;}
.tab li {float: left;width: 50%; font-size: 18px; color: #8b8b8b; cursor: pointer;}
.tab li.active {color: #02aafd; height: 78px;line-height: 60px; }
.tab .activebg {background: url("../imgs/tab_active.png") no-repeat; background-size: 100%; width: 50%; height: 30px !important; position: absolute; top: 50px;}

.tabs_item,.banneryd,.titletabbody,.guidebody {
  display: none;
}
.tabs_item:first-child,.titletabbody:first-child,.guidebody:first-child {
  display: block;
}
.zs1 {position: absolute;right: 0; top: 25%;text-align: right;}
.zs2 {position: absolute;left: 0; bottom: 0;text-align: left}
.zs1 img,.zs2 img {width: 60%;}
.site,.help {width:35%;background:#fff;-moz-box-shadow:0px 0px 20px #f1f1f1; -webkit-box-shadow:0px 0px 20px #f1f1f1; box-shadow:0px 0px 20px #f1f1f1;border-radius: 20px;padding: 230px 50px 60px 50px; color: #8b8b8b; font-size: 18px; line-height: 40px; position: relative;}
.site img,.help img {width: 100%;}
.site{ margin-left: 3%;}
.help { margin-right: 3%;}
.site a,.help a {font-size: 20px; text-align: center; display: block; margin-top: 50px;}
.site h1,.help h1 { line-height: 36px; color: #333;font-size: 36px; text-align: center; margin-bottom: 40px;}

.site:hover .kfzanimate3 {
-webkit-animation:kfzanimate1 0.5s both infinite;
-moz-animation:kfzanimate1 0.5s both infinite;
-ms-animation:kfzanimate1 0.5s both infinite;
animation:kfzanimate1 0.5s both infinite;
}
@keyframes kfzanimate1 {
    0% {bottom:30px;}
    50% {bottom:35px;}
    100% {bottom:30px;}
}
@-webkit-keyframes kfzanimate1 {
    0% {bottom:30px;}
    50% {bottom:35px;}
    100% {bottom:30px;}
}

.site:hover .kfzanimate4 {
-webkit-animation:kfzanimate2 0.5s both infinite;
-moz-animation:kfzanimate2 0.5s both infinite;
-ms-animation:kfzanimate2 0.5s both infinite;
animation:kfzanimate2 0.5s both infinite;
}
@keyframes kfzanimate2 {
    0% {top:40px;}
    50% {top:45px;}
    100% {top:40px;}
}
@-webkit-keyframes kfzanimate2 {
    0% {top:40px;}
    50% {top:45px;}
    100% {top:40px;}
}

.help:hover .helpcenter3 {
-webkit-animation:helpcenter1 0.5s both infinite;
-moz-animation:helpcenter1 0.5s both infinite;
-ms-animation:helpcenter1 0.5s both infinite;
animation:helpcenter1 0.5s both infinite;
}
@keyframes helpcenter1 {
    0% {top:50px;}
    50% {top:55px;}
    100% {top:50px;}
}
@-webkit-keyframes helpcenter1 {
    0% {top:50px;}
    50% {top:55px;}
    100% {top:50px;}
}

.help:hover .helpcenter4 {
-webkit-animation:helpcenter2 0.5s both infinite;
-moz-animation:helpcenter2 0.5s both infinite;
-ms-animation:helpcenter2 0.5s both infinite;
animation:helpcenter2 0.5s both infinite;
}
@keyframes helpcenter2 {
    0% {bottom:30px;}
    50% {bottom:35px;}
    100% {bottom:30px;}
}
@-webkit-keyframes helpcenter2 {
    0% {bottom:30px;}
    50% {bottom:35px;}
    100% {bottom:30px;}
}

.kfzanimate,.helpcenter { position: absolute; top: -120px; left: 0; width:280px;z-index: 99; left: 50%; margin-left: -140px;}
.kfzanimate1 {width: 280px; height: 280px; background: url("../imgs/kfzbg1.png") no-repeat;}
.kfzanimate2 {position: absolute;top:70px; z-index: 3; text-align: center; width: 160px; left: 60px;}
.kfzanimate3 {position: absolute;bottom:30px; z-index: 4; right: -40px;}
.kfzanimate4 {position: absolute;top:40px; z-index: 4; left: -20px;}

.helpcenter1 {width: 280px; height: 280px; background: url("../imgs/helpcenterbg1.png") no-repeat;}
.helpcenter2 {position: absolute;bottom:-8px; z-index: 3; text-align: center; width: 176px; left: 60px;}
.helpcenter3 {position: absolute;top:50px; z-index: 4; right: -10px;}
.helpcenter4 {position: absolute;bottom:30px; z-index: 4; left: -10px;}

.href {color: #25dbfb;}
.bottombg {background:#fafafc url("../imgs/zsbg3.jpg") no-repeat top;background-size: 100%;}
.bottombg2 {background: url("../imgs/aggrebg.png") no-repeat top;background-size: 100%; padding-top: 150px; clear: both;}
.indexzsbg1 {background:url("../imgs/indexzsbg1.png") no-repeat bottom;background-size: 100%;}
.indexzsbg2 {background:url("../imgs/indexzsbg2.png") no-repeat center bottom;background-size: 100%;}
.ad {clear: both;height: 100px;padding: 100px 0 50px 0;}
.img img{width: 100%;}
.adzy h3 {font-size: 32px !important; text-align: left;}
.adzy h4 {font-size: 32px !important;margin-top: 30px !important; text-align: left; color: #25dbfb;}
.codemirrorJava {-moz-box-shadow:0px 0px 20px #f9f9f9; -webkit-box-shadow:0px 0px 20px #f9f9f9; box-shadow:0px 0px 20px #f9f9f9;}
.runbg {background: #f1fcfe; width: 100%;height: 30px; border-radius: 0 0 0 8px;}
.runbg .runbutton { background: #02aafd; text-align: center; color: #fff; width: 60px;height: 30px;  display: block; float: right; border-radius: 0 0 8px 0;}
.runbg .runbutton em {font-style: normal;padding-top: 8px;display: block; float: left;}
.arrow-right {
font-size: 0;
line-height: 0;
border-width: 6px;
border-color: #fff;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
margin: 8px 5px 0 12px;
display: block;
float: left;
}

.java {display: none;/* line-height: 26px; text-align: left;font-size: 14px; color: #26b326;font-family: monospace !important;  */}
/* .java div { width:100%; clear: both;}
.java pre { float: left; padding-left: 30px;}
.java span { color: #2f46f6;}
.java em { color: #fb7461; font-style: normal;}
.java b { color: #666; font-weight: normal;}
.java i {color: #5dc89e; width: 36px; text-align: center; background: #f2fef0; display: block; float: left;} */

.runtext {float:left; font-size:12px; color: #8b8b8b; padding-left: 15px; padding-top: 10px;}

.authtext {width: 50%; float: left;  position: relative;}
.aggretext {width: 32%; float: left;  position: relative;}
.aggretext1 {width: 28%; margin-left: 10%; float: left;  position: relative;}
.aggretext2 {width: 25%; padding-left: 20%; float: left;  position: relative;}
.aggretext3 {width: 30%; margin-left: 5%; float: left;  position: relative;}
.aggretext4 {width: 53%;  float: left;  position: relative;}
.authtext1 {width: 30%; float: right;  position: relative; padding-top: 100px;}
.authbg {width: 50%; float: right;  position: relative;}
.aggrebg {width: 68%; float: right;  position: relative;}
.authleftbg1 {width: 50%; float: left;  position: relative;}
.authbg img,.authleftbg1 img,.aggrebg img { width: 100%;}
.authbg1 {position: absolute; left: 14%; bottom: 30%; z-index: 1; 
-webkit-animation:authbg1 2s 0.5s both, authbg11 8s 0.75s both infinite;
-moz-animation:authbg1 2s 0.5s both, authbg11 8s 0.75s both infinite;
-ms-animation:authbg1 2s 0.5s both, authbg11 8s 0.75s both infinite;
animation:authbg1 2s 0.5s both, authbg11 8s 0.75s both infinite;
}
@keyframes authbg1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes authbg1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes authbg11 {
    0% {bottom:30%;}
    50% {bottom:26%;}
    100% {bottom:30%;}
}
@-webkit-keyframes authbg11 {
    0% {bottom:30%;}
    50% {bottom:26%;}
    100% {bottom:30%;}
}
.authbg2 {position: absolute; right: 4%; top: 18%; z-index: 2; 
-webkit-animation:authbg2 1.5s 0.5s both, authbg21 6s 0.75s both infinite;
-moz-animation:authbg2 1.5s 0.5s both, authbg21 6s 0.75s both infinite;
-ms-animation:authbg2 1.5s 0.5s both, authbg21 6s 0.75s both infinite;
animation:authbg2 1.5s 0.5s both, authbg21 6s 0.75s both infinite;
}
@keyframes authbg2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes authbg2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes authbg21 {
    0% {top: 18%;}
    50% {top:20%;}
    100% {top: 18%;}
}
@-webkit-keyframes authbg21 {
    0% {top: 18%;}
    50% {top:20%;}
    100% {top: 18%;}
}

.authsfzbg1 img {width: 80%; margin-left: 15%;}

.authsfzbg2 {
  position: absolute; left: 10%; top: 15%; z-index: 2; 
/* -webkit-animation:authsfzbg2 2s 0.75s both;
-moz-animation:authsfzbg2 2s 0.75s both;
-ms-animation:authsfzbg2 2s 0.75s both;
animation:authsfzbg2 2s 0.75s both; */
}

@keyframes authsfzbg2 {
    0% {opacity: 0;top:0%;}
    100% {opacity: 1;top:15%;}
}
@-webkit-keyframes authsfzbg2 {
    0% {opacity: 0;left:0%;}
    100% {opacity: 1;left:10%;}
}

.authsfzbg3 {
  position: absolute; left: 5%; bottom: 10%; z-index: 2; 
/* -webkit-animation:authsfzbg31 1.5s 1s both;
-moz-animation:authsfzbg31 1.5s 1s both;
-ms-animation:authsfzbg31 1.5s 1s both;
animation:authsfzbg31 1.5s 1s both; */
}

@keyframes authsfzbg31 {
    0% {opacity: 0;bottom:0%;}
    100% {opacity: 1;bottom:10%;}
}
@-webkit-keyframes authsfzbg31 {
    0% {opacity: 0;bottom:0%;}
    100% {opacity: 1;bottom:10%;}
}
.authyhkbg1 img {width: 80%; margin-left: 15%;}

.authyhkbg2 {
  position: absolute; left: 10%; top: 15%; z-index: 2; 
}
.authyhkbg3 {
  position: absolute; right: 0; bottom: 10%; z-index: 2; 
}
.authyhkbg4 {
  position: absolute; left: 10%; top: -10%; z-index: 2; 
}

.authyhkbg4 img { width: 90%;}

.jhanimate1 {position: absolute; top: 0; left: 39%;
-webkit-animation:jhanimate1 1.5s 0.5s both, jhanimate11 2.5s 0.75s both infinite;
-moz-animation:jhanimate1 1.5s 0.5s both, jhanimate11 2.5s 0.75s both infinite;
-ms-animation:jhanimate1 1.5s 0.5s both, jhanimate11 2.5s 0.75s both infinite;
animation:jhanimate1 1.5s 0.5s both, jhanimate11 2.5s 0.75s both infinite;
}
@keyframes jhanimate1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes jhanimate1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes jhanimate11 {
    0% {top: 0; transform: scale(1) }
    50% {top:10px;transform: scale(0.9) }
    100% {top: 0;transform: scale(1) }
}
@-webkit-keyframes jhanimate11 {
    0% {top: 0; transform: scale(1) }
    50% {top:10px;transform: scale(0.9) }
    100% {top: 0;transform: scale(1) }
}
.jhanimate2 {position: absolute; top: 54%; left: 40%;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 35s linear infinite;
}
@keyframes go {
        0%{transform: rotateX(0deg) rotateY(0deg);}
        25%{transform: rotateX(20deg) rotateY(90deg);}
        50%{transform: rotateX(0deg) rotateY(360deg);}
        75%{transform: rotateX(-20deg) rotateY(540deg);}
        100%{transform: rotateX(0deg) rotateY(720deg);}
    
}

.jhanimate3 {position: absolute; top: 45%; left: 45%;
-webkit-animation:jhanimate3 1.5s 0.75s both, jhanimate31 5s 0.75s both infinite;
-moz-animation:jhanimate3 1.5s 0.75s both, jhanimate31 5s 0.75s both infinite;
-ms-animation:jhanimate3 1.5s 0.75s both, jhanimate31 5s 0.75s both infinite;
animation:jhanimate3 1.5s 0.75s both, jhanimate31 5s 0.75s both infinite;
}
@keyframes jhanimate3 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes jhanimate3 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes jhanimate31 {
    0% {top: 45%;}
    50% {top: 40%;}
    100% {top: 45%;}
}
@-webkit-keyframes jhanimate31 {
    0% {top: 45%;}
    50% {top: 40%;}
    100% {top: 45%;}
}
.jhanimate4 {position: absolute; top: 40%; left: 40%;
-webkit-animation:jhanimate4 1.5s 0.75s both, jhanimate41 5s 0.75s both infinite;
-moz-animation:jhanimate4 1.5s 0.75s both, jhanimate41 5s 0.75s both infinite;
-ms-animation:jhanimate4 1.5s 0.75s both, jhanimate41 5s 0.75s both infinite;
animation:jhanimate4 1.5s 0.75s both, jhanimate41 5s 0.75s both infinite;
}
@keyframes jhanimate4 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes jhanimate4 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes jhanimate41 {
    0% {
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    opacity: 1;}
    50% { 
    -webkit-transform:scale(1.2,1.2);
    -moz-transform:scale(1.2,1.2);
    opacity: 0.3;}
    100% {
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    opacity: 1;}
}
@-webkit-keyframes jhanimate41 {
    0% {
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    opacity: 1;}
    50% { 
    -webkit-transform:scale(1.2,1.2);
    -moz-transform:scale(1.2,1.2);
    opacity: 0.3;}
    100% {
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    opacity: 1;}
}

.buttomdiv { padding-bottom: 50px; padding-top: 20px;}

.gongdanyd { display: none !important;}
.indexiframe { height: 450px;}

/*动画*/
.sdiv .indexh1,.sdiv .buttomdiv,.sdiv .buttomdivs,.sdiv .kfzanimate1,.sdiv .helpcenter1{
            -webkit-transform: translateY(50px);
                -ms-transform: translateY(50px);
                    transform: translateY(50px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .indexh1x{
            -webkit-transform: translateY(-50px);
                -ms-transform: translateY(-50px);
                    transform: translateY(-50px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .authsh1,.sdiv .authsh3{
            -webkit-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                    transform: translateX(-50px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .authsh4{
            -webkit-transform: translateX(-70px);
                -ms-transform: translateX(-70px);
                    transform: translateX(-70px);
            -webkit-transition: opacity 0.75s,-webkit-transform 1s;
            transition: opacity 0.75s,-webkit-transform 1s;
            -o-transition: transform 1s,opacity 0.75s;
            transition: transform 1s,opacity 0.75s;
            transition: transform 1s,opacity 0.75s,-webkit-transform 1s;
            opacity:0;
}

.sdiv .authsh5{
            -webkit-transform: translateX(-90px);
                -ms-transform: translateX(-90px);
                    transform: translateX(-90px);
            -webkit-transition: opacity 1s,-webkit-transform 1.25s;
            transition: opacity 1s,-webkit-transform 1.25s;
            -o-transition: transform 1.25s,opacity 1s;
            transition: transform 1.25s,opacity 1s;
            transition: transform 1.25s,opacity 1s,-webkit-transform 1.25s;
            opacity:0;
}

.sdiv .authsh2{
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .authsimg{
            -webkit-transform: translateX(50px);
                -ms-transform: translateX(50px);
                    transform: translateX(50px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .authsimg1.sdiv .authsh4{
            -webkit-transform: translateX(-70px);
                -ms-transform: translateX(-70px);
                    transform: translateX(-70px);
            -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
            transition: opacity 0.5s,-webkit-transform 0.75s;
            -o-transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s;
            transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
            opacity:0;
}

.sdiv .indexh2,.sdiv .sdklist,.sdiv .kfzanimate2,.sdiv .helpcenter2{
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
    transition: opacity 0.5s,-webkit-transform 0.75s;
    -o-transition: transform 0.75s,opacity 0.5s;
    transition: transform 0.75s,opacity 0.5s;
    transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
    opacity:0;
    -webkit-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;           
}

.sdiv .indexp,.sdiv .kfzanimate3,.sdiv .kfzanimate4,.sdiv .helpcenter3,.sdiv .helpcenter4{
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: opacity 0.5s,-webkit-transform 0.75s;
    transition: opacity 0.5s,-webkit-transform 0.75s;
    -o-transition: transform 0.75s,opacity 0.5s;
    transition: transform 0.75s,opacity 0.5s;
    transition: transform 0.75s,opacity 0.5s,-webkit-transform 0.75s;
    opacity:0;
    -webkit-transition-delay: 0.75s;
         -o-transition-delay: 0.75s;
            transition-delay: 0.75s;   
}

.sdiv .indecheck{
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: opacity 1s,-webkit-transform 1.25s;
    transition: opacity 1s,-webkit-transform 1.25s;
    -o-transition: transform 1.25s,opacity 1s;
    transition: transform 1.25s,opacity 1s;
    transition: transform 1.25s,opacity 1s,-webkit-transform 1.25s;
    opacity:0;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;   
}

.sdiv .authsp,.sdiv .authpre{
    -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
            transform: translateX(-30px);
    -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
    transition: opacity 0.5s,-webkit-transform 0.5s;
    -o-transition: transform 0.5s,opacity 0.5s;
    transition: transform 0.5s,opacity 0.5s;
    transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
    opacity:0;
    -webkit-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;   
}

.sdiv .authspan{
  display: block;
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
    transition: opacity 0.5s,-webkit-transform 0.5s;
    -o-transition: transform 0.5s,opacity 0.5s;
    transition: transform 0.5s,opacity 0.5s;
    transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
    opacity:0;
    -webkit-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;   
}

.aggrehtmlbg {background: url("../imgs/aggrehtmlbg.png") no-repeat left 40%; background-size: 90%;}

.sdiv .buttondiv,.sdiv .tab,.sdiv .tab_content {
  -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: opacity 0.75s,-webkit-transform 0.75s;
    transition: opacity 0.75s,-webkit-transform 1s;
    -o-transition: transform 0.75s,opacity 0.75s;
    transition: transform 0.75s,opacity 0.75s;
    transition: transform 0.75s,opacity 0.75s,-webkit-transform 0.75s;
    opacity:0;
    -webkit-transition-delay: 0.75s;
         -o-transition-delay: 0.75s;
            transition-delay: 0.75s;          
}



.sdiv.on .indexh1,.sdiv.on .indexh2,.sdiv.on .indexp,.sdiv.on .buttondiv,.sdiv.on .tab,.sdiv.on .tab_content,.sdiv.on .buttomdiv,.sdiv.on .buttomdivs,.sdiv.on .authsh1,.sdiv.on .authsp,.sdiv.on .authsimg,.sdiv.on .authsimg1,.sdiv.on .authsh2,.sdiv.on .authspan,.sdiv.on .authsh3,.sdiv.on .authpre,.sdiv.on .sdklist,.sdiv.on .kfzanimate1,.sdiv.on .kfzanimate2,.sdiv.on .kfzanimate3,.sdiv.on .kfzanimate4,.sdiv.on .helpcenter1,.sdiv.on .helpcenter2,.sdiv.on .helpcenter3,.sdiv.on .helpcenter4,.sdiv.on .indexh1x,.sdiv.on .authsh4,.sdiv.on .authsh5,.sdiv.on .indecheck{
            -webkit-transform: none;
                -ms-transform: none;
                    transform: none;
            opacity:1;
}

.buttondiv {margin-top:90px;height:30px;padding:1px;}

.scrollDiv {
  height: 84px;/* 必要元素 */
  line-height: 84px;
   margin-bottom: 70px;
  overflow: hidden;/* 必要元素 */
}
.scrollDiv li {
  height: 84px;
  font-size: 80px; 
  font-weight: bold;
}

.contactlog2,.mobilelogo2 {display: none;}

.contactbanner img {width: 100%;}

/*asid_share*/
.asid_share{position:fixed;width:40px;bottom:10%;right:1%;z-index:890;}
*html #asid_share{position:absolute;top:expression(documentElement.scrollTop + "px");margin:300px 0 0 0;}

.asid_share .asid_share_box{width:100%;margin-bottom:5px;background:#ccc;text-align:center; border-radius: 50px;}
.asid_share .asid_share_box:hover {background:#028efc;}
.asid_share .asid_share_box a{display:block;height:40px; color: #444}
.asid_share .asid_share_box a i {padding-top: 8px; display: block; height: 30px;}
.asid_share .asid_share_box a span { color: #fff; visibility: hidden; line-height: 15px; display: block; padding: 5px 0; border-radius: 50px;}
.asid_share .asid_share_box .weixin {position: relative;}
/* .asid_share .asid_share_box a:hover i {display: none;} */
.asid_share .asid_share_box a:hover span{ visibility: visible;background:#028efc;}
.asid_sha_layer{position:absolute;right:47px;bottom:-50px; visibility: hidden; }
.asid_sha_layer img{max-width: none}
.asid_share .asid_share_box .weixin:hover .asid_sha_layer { visibility: visible !important;}

.bottombg1 {background: url("../imgs/authbg.png") no-repeat top;background-size: 100%; margin-top: 60px;
-webkit-animation:authbg 3s both;
-moz-animation: authbg 3s both;
-ms-animation: authbg 3s both;
animation: authbg 3s both;
}
@keyframes authbg {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes authbg {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.banneranimate {position: absolute; top: 0; right: 0; width: 40%; height: auto; z-index: 1;}

.banneranimate img { width: 90%;}
.banneranimate1 {
   text-align: right;
-webkit-animation: fade-in 3s both;
-moz-animation: fade-in 3s both;
-ms-animation: fade-in 3s both;
animation: fade-in 3s both;
}
@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.banneranimate2 { position: absolute;bottom:0; left: 0; z-index: 2;
-webkit-animation: fade-in1 1s 0.5s both;
-moz-animation: fade-in1 1s 0.5s both;
-ms-animation: fade-in1 1s 0.5s both;
animation: fade-in1 1s 0.5s both;
}
@keyframes fade-in1 {
    0% {opacity: 0;bottom:-20px;}
    100% {opacity: 1;bottom:0;}
}
@-webkit-keyframes fade-in1 {
    0% {opacity: 0;bottom:-20px;}
    100% {opacity: 1;bottom:0;}
}

.banneranimate3 { position: absolute;bottom:0; left: 50px; z-index: 3;
-webkit-animation: fade-in2 1s 0.25s both;
-moz-animation: fade-in2 1s 0.25s both;
-ms-animation: fade-in2 1s 0.25s both;
animation: fade-in2 1s 0.25s both;
}

@keyframes fade-in2 {
    0% {opacity: 0;bottom:-20px; left: 0px;}
    100% {opacity: 1;bottom:30px;left: 50px;}
}
@-webkit-keyframes fade-in2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.banneranimate4 { position: absolute;top:28%; right: 8%; z-index: 3;width: 60%;
-webkit-animation:fade-in31 1s 0.5s both, fade-in3 8s 0.75s both infinite;
-moz-animation:fade-in31 1s 0.5s both, fade-in3 8s 0.75s both infinite;
-ms-animation:fade-in31 1s 0.5s both, fade-in3 8s 0.75s both infinite;
animation:fade-in31 1s 0.5s both, fade-in3 8s 0.75s both infinite;
}

@keyframes fade-in3 {
    0% {top:24%;}
    50% {top:28%;}
    100% {top:24%;}
}
@-webkit-keyframes fade-in3 {
    0% {top:24%;}
    50% {top:28%;}
    100% {top:24%;}
}


@keyframes fade-in31 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fade-in31 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.banneranimate5 { position: absolute;top:28%; left: 8%; z-index: 3;width: 35%;
-webkit-animation: fade-in41 1s 0.5s both,fade-in4 6s 0.75s both infinite;
-moz-animation: fade-in41 1s 0.5s both,fade-in4 6s 0.75s both infinite;
-ms-animation: fade-in41 1s 0.5s both,fade-in4 6s 0.75s both infinite;
animation: fade-in41 1s 0.5s both,fade-in4 6s 0.75s both infinite;
}

@keyframes fade-in4 {
    0% {top:44%;}
    50% {top:48%;}
    100% {top:44%;}
}
@-webkit-keyframes fade-in4 {
    0% {top:44%;}
    50% {top:48%;}
    100% {top:44%;}
}

@keyframes fade-in41 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fade-in41 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


.rightanimate {
-webkit-animation: right 0.5s both;
-moz-animation: right 0.5s both;
-ms-animation: right 0.5s both;
animation: right 0.5s both;
}
@keyframes right {
    0% {right: 0;}
    100% {right: 51%;}
}
@-webkit-keyframes right {
    0% {right: 0;}
    100% {right: 51%;}
}

.leftanimate {
-webkit-animation: left 0.5s both;
-moz-animation: left 0.5s both;
-ms-animation: left 0.5s both;
animation: left 0.5s both;
}
@keyframes left {
    0% {left: 0;}
    100% {left: 51%;}
}
@-webkit-keyframes left {
    0% {left: 0;}
    100% {left: 50%;}
}

.saoma { width: 920px; margin: 0 auto; padding-bottom: 100px; overflow: auto;}
.saoma h1 {line-height: 100px; font-size: 30px; color: #333;}
.saoma p {line-height: 40px; font-size: 18px; color: #8b8b8b; padding: 0 12%; text-align: left}
.saoma dt { width: 374px; text-align: center; margin-top: 100px; padding: 50px 0; border-radius: 12px; float: left; background: #fff;-moz-box-shadow:0px 0px 10px #f1f1f1; -webkit-box-shadow:0px 0px 10px #f1f1f1; box-shadow:0px 0px 10px #f1f1f1;}
.saoma dd { width: 374px; text-align: center; margin-top: 200px; padding: 50px 0; border-radius: 12px; float: right; background: #fff;-moz-box-shadow:0px 0px 10px #f1f1f1; -webkit-box-shadow:0px 0px 10px #f1f1f1; box-shadow:0px 0px 10px #f1f1f1;}

.sdklist {
   clear: both;
   margin-right: -60px;
}

.sdklist li { float: left; width: 285px; background: #fff; border-radius: 8px; text-align: center; line-height: 48px; padding: 10px 0; margin-right: 20px; margin-bottom:50px;-moz-box-shadow:0px 0px 10px #f1f1f1; -webkit-box-shadow:0px 0px 10px #f1f1f1; box-shadow:0px 0px 10px #f1f1f1;}
.sdklist li h1 { color: #333; font-size: 24px; margin-bottom: 0;}
.sdklist li p { font-size: 14px;}

.sdklist li:hover dd { color:#028efc !important; }
.sdklist li:hover{
  transform: scale(1.03);
  -ms-transform:scale(1.03);    
  -moz-transform:scale(1.03);     
  -webkit-transform:scale(1.03); 
  -o-transform:scale(1.03);
}
.sdklist dl { width: 86%; margin: 0 auto; border-top:1px solid #f2f2f2; }
.sdklist dl dt { float: left; color: #333; font-size: 20px; padding-left: 5px;}
.sdklist dl dd { float: right; color: #8b8b8b; font-size: 14px; padding-right: 5px;}
.sdklist li i {
  display:inline-block;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.sdklist li em {
  display: inline-block;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  display: none
}
.sdklist li i img.sdklist li em img { width: 80px;}

.sdklist li:hover i {
  display: none;
}

.sdklist li:hover em {
  display: block;
}

.sdkborder {
  border-bottom: 1px solid #e1e1e1;
}

.indexfour {
  display: flex; 
  flex-direction: row ; 
  align-items: center;
  margin-right: -5%;
  margin-top: 100px;
}

.indexfour li {width: 20%; margin-right: 5%;}
.indexfour li:hover .indexfourbg {
  -webkit-animation: indexfourbg 1s both infinite;
-moz-animation: indexfourbg 1s both infinite;
-ms-animation: indexfourbg 1s both infinite;
animation: indexfourbg 1s both infinite;
}
@keyframes indexfourbg {
    0% {transform: scale(1)}
    50% {transform: scale(0.9)}
    100% {transform: scale(1)}
}
@-webkit-keyframes indexfourbg {
    0% {left: 0;}
    100% {left: 50%;}
}
.indexfour li i { display: block; position: relative; width: 110px; height: 120px; margin: 0 auto 40px auto; text-align: center;}
.indexfourbg1 { position: absolute; top: 23%; width: 100%}
.indexfour li h1 { color: #333; font-size: 24px; margin-bottom: 20px; text-align: center;}
.indexfour li p {color: #8b8b8b; font-size: 14px; margin-top: 0; line-height: 24px; height: 80px;}

.greenspot {background: url("../imgs/greenspot.png") no-repeat 25% center;}
.greenspotbg { background-position: 25px center}

.authpre { font-family: "微软雅黑"}
.sytext { margin: 40px auto 0 auto !important; width: 680px !important;}
.aggretext4 li { padding-left: 30px; line-height: 24px;}
.contactwidth1 { width: 47%; }
.contacticon1 { background: url("../imgs/contact-icon1.png") no-repeat left 15px;}
.contacticon2 { background: url("../imgs/contact-icon2.png") no-repeat left 15px;}
.contacticon3 { background: url("../imgs/contact-icon3.png") no-repeat left 15px;}

/*底部波浪*/
.marquee-box{overflow:hidden;width:100%;position:absolute;left:0;top:0}
.marquee{width:8000%;}
.wave-list-box{float:left}
.wave-list-box ul{float:left;overflow:hidden;zoom:1}
.wave-list-box ul li{width:100%;float:left;line-height:30px;list-style:none}
.wave-box{position:relative; height: 100px;}

/*联系我们*/
.contacttext { color: #333;font-size: 18px; border-bottom: 1px solid #dadada; margin-bottom: 50px;width: 90%;}
.contacttext li {margin-bottom: 35px;}
.contacttext li img { vertical-align: middle;}
.contactform {width: 100%;}
.contactform span { display: block; color: #8b8b8b; font-size: 18px;}
.contactform input { width: 100%; border: 1px solid #dadada; border-radius: 4px; line-height: 46px; padding: 0 2%; font-size: 18px; color: #8b8b8b; margin-bottom: 30px;}
.contactform a { width: 120px;}


/*开发指南*/
.titletabbg {background: #f5f5f5; width: 100%; }
.titletabbg ul,.titletabbody,.guideflew {
  width:90%;margin:0 auto;max-width: 1200px;
}
.titletabbg li {
  float: left;
  width: 25%;
  font-size: 18px;
  color: #3b3b3b;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
}

.titletabclick {
  background: -webkit-linear-gradient(180deg, #03dbff, #0299fc);
  color: #fff !important;
}

.guideleft {
  float: left;
  width: 25%;
}

.guideright {
  float: right;
  width: 70%;
}

.guideright h1{
  font-size: 32px;
  color: #3b3b3b;
  font-weight: bold;
  margin-bottom: 50px;
}

.guideright h2{
  font-size: 20px;
  color: #3b3b3b;
  font-weight: bold;
  margin-bottom: 30px;
}

.guideright p {
  color: #2e302f;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 44px;
}

.guideright p a {
  color: #028efc !important;
  text-decoration: underline;
}

.guideright ul {
  margin-bottom: 44px;
}

.guideright li {
  line-height: 36px;
  color: #2e302f;
  font-size: 16px;
  background: url("../imgs/guidebg4.png") no-repeat 10px 16px;
  padding-left: 30px;
}

.guideleft li {
  line-height: 48px;
  font-size: 16px;
  color: #3b3b3b;
  padding-left: 20px;
  cursor: pointer;
}
.guideleftclick {
  background: #edf7ff;
  color: #028efc !important;
}

.guideflew {
  display: flex; 
  flex-direction: row ; 
  align-items: center;
  margin:200px auto 150px auto;
}

.guideflew li {
  background: #fff;
  border-radius: 8px;
  -moz-box-shadow:0px 0px 20px #eee;
  -webkit-box-shadow:0px 0px 20px #eee;
  box-shadow:0px 0px 20px #eee;
  width: 32%;
}

.guideflew li:nth-child(2) {
  margin: 0 3%;
}

.guideflew li:hover {
  transform: scale(1.03);
  -ms-transform:scale(1.03);    
  -moz-transform:scale(1.03);     
  -webkit-transform:scale(1.03); 
  -o-transform:scale(1.03);
}

.guideflew li i {
  display: block;
  margin-top: 58px;
}

.guideflew li h1 {
  clear: both;
  text-align: center;
  color: #3b3b3b;
  font-size: 18px;
  font-weight: bold;
  margin: 50px 0 20px 0;
}

.guideflew li p {
  color: #8b8b8b;
  font-size: 16px;
  text-align: center;
  line-height: 24px;
  padding: 0 12%;
  height: 50px;
}

.guideflew li span {
  color: #02aafd;
  font-size: 16px;
  text-align: center;
  display: block;
  margin: 50px 0 58px 0;
}

.sdkbg {
  background: #f9f9fc;
  margin-top: 100px;
  border-top: 1px solid #dbdbdb;
}


@media (max-width: 1180px) {
  .content h1 {font-size: 56px;}
  .content h2 {font-size: 56px;}
  .greenspot {background: url("../imgs/greenspot.png") no-repeat 20% center;}
}

@media (max-width: 1000px) {
  .content h1 {font-size: 48px;}
  .content h2 {font-size: 48px;}
}

@media (max-width: 900px) {
  .content h1 {font-size: 36px;}
  .content h2 {font-size: 36px;}
  .greenspot {background: url("../imgs/greenspot.png") no-repeat 15% center;}
}

@media (max-width: 767px) {
  .mode-desktop{display: none!important}
  .mode-mobile{display: block!important}
  /*header{min-width: auto;background-color: #fff;position: fixed; width: 55%;right: -56%;left:auto;top:0;bottom: 0;transition: all ease .3s;padding-left: 0; z-index: 99; }*/
  header ul{display: block;width: 100%;margin-top: 50px;}
  .header-menu ul li ul{position:static;display: block;background: #fff;-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;margin: 10px 0;
}
.header-menu ul li ul li {border-bottom: none; }
.header-menu ul li ul li a{font-size: 14px !important; line-height: 30px;color: #444;}
.header-menu ul li.hover ul, .header-menu ul li.on ul{display: block;
}
header.hover li ul li.on a{color: #4272fc}
header.hover li ul li.on a:after{background-color: transparent;} 
  header .menu-sy{top:5px; background: url("../imgs/button.png") no-repeat bottom;background-size: 80%; padding: 0 0 30px 20px;}
  header .menu-language{display: none;}
  header li{width: 100%;text-align: left;}
  header ul li.index-logo-li{position: absolute;top:-50px;padding-left: 10%}
  header .index-logo :first-child{opacity: 0}
  header .index-logo :last-child{opacity: 1}
  header li a{color: #333;width: 80%;display: block;line-height: 35px;padding:0 10%;}
  header li.firsta:hover:after  {border-color:#fff;}
  header li a span{padding-left: 5px;}
  header li li a span{padding-left: 19px;}
  header li a.index-logo img{padding:10px;padding-left: 0;}
  header li a:after{background-color: #e4e4e4;width: 100%;height: 1px;}
  header li li a{line-height: 40px;}
  header li li a:after{background-color: transparent;}
  header li li.on a{color: #4272fc;}
  #header-main-menu > li.on > a:not(.index-logo):after{background-color: #3d4474;}
  header li a.index-logo:after{background-color: transparent;}
  header div {text-align: center;}
  header .menu-language li{width: auto;}
  header .menu-language li a{padding-left: 0; padding-right: 0;width:35px;;text-align: center}
  header .menu-language li a:after{display: none;}
  header .menu-language li a span{padding-left: 0;padding-bottom: 5px;}
  header .menu-language li.on a span, header .menu-language li a:hover span{border-bottom: 1px solid #3d4474}
  #header-main-menu > li a i{display: inline-block;position: absolute;right: 18px; font-style: normal;font-weight: bold;font-size: 20px;transition: all ease .3s;text-align: center;width: 20px;}
  #header-main-menu > li a {padding-left: 20px; }
  #header-main-menu > li.hover a i{transform:rotate(180deg);-webkit-transform:rotate(180deg);}
  header .menu-logo {
    padding: 30px;
    margin-top: -65px;
    margin-left: -30px;
    display: none;
  }
  header .menu-logo a,.footer-logo a {width: auto;}
  header .menu-logo img { height: 15px;}
  .mobile-header-mask{position: fixed;z-index: 95;left: 0;right: 0; top: 0; bottom: 0;background-color: #000; opacity: 0;transition: all ease .2s;display: none;}
  .mobile-header{position: relative;z-index: 9999; text-align: center; padding:10px;transition: all ease .2s;}
  .mobile-header img{vertical-align: middle}
  .mobile-header :first-child{display: inline-block;}
  .mobile-header :last-child{}

  .mobile-header.scroll{background-color: #fff;box-shadow: 0 3px 15px rgba(0,0,0,.1);}
  .mobile-header.scroll :first-child{display: none;}
  .mobile-header.scroll :last-child{display: inline-block;}
  .mobile-header.scroll a {display: inline-block !important;}

  .sidebar-toggle{display: inline-block;background: none;border: none;padding:14px 20px;overflow: hidden;position: absolute;z-index: 150; top:0;right: 0px; z-index: 99999;}
  .sidebar-toggle .icon-bar{width: 18px;height: 2px;display: block; background-color: #000;margin: 3px;vertical-align: middle;transition: all ease .2s;}
  .sidebar-toggle.scroll .icon-bar{background-color: #000;}

  .sidebar-open header{right:0}
  .sidebar-open .sidebar-toggle .icon-bar{background-color: #000;opacity: 0}
  .sidebar-open .sidebar-toggle .icon-bar:first-child{opacity: 1;transform: rotate(-45deg);transform-origin:100% 0;position: relative;top:-1px;}
  .sidebar-open .sidebar-toggle .icon-bar:last-child{opacity: 1;transform: rotate(45deg);transform-origin:100% 100%;position: relative;top:1px;}
  .sidebar-open .mobile-header{opacity: 0;}
  .sidebar-open .mobile-header-mask{opacity: 0.5;display: block;}
  .sidebar-open .index-menulast-li{display: none;}

  nav{position: fixed;top:0;left:0;right: 0;z-index: 100;}

  ul.side-nav{display: none}

  .banner .banner-title{font-size: 26px;padding-bottom:15px;}
  .banner .banner-desc1{font-size: 12px;}
  /*.banner img{content: url("../img/banner/phone-banner.jpg.html");}*/
  .banner .inner{width: 70%;}
  footer{min-width:0px; padding-top: 0px; margin-top: 0px;}
  .footer-inner{height:100%;padding:20px 0 0 0;max-width: auto;}
  .footer-inner .contact-icon{margin-top: 10px;}
  .footer-inner .footer-logo{float: none;text-align: center !important;width: 100% !important;margin: 0 auto !important;padding-bottom:0px; text-align: center;}
  .footer-inner .footer-logo a:nth-child(1) img {height: 20px !important;}
  .footer-inner .footer-logo a:nth-child(2) img {height: 20px !important;}
  .footer-inner .footer-logo a { display: inline-block; float: none;}
  .footer-inner .footer-list{float: none;width: 100%;margin-top: 30px; margin-left: 0;}
  .footer-inner .footer-list ul li{width: 50%;padding-bottom: 15px;}
  .footer-list p>a{margin-bottom: 15px;font-size: 12px; width: auto; padding-left: 10px;}
  .footer-list h3>a{font-size: 12px; text-align: left; width: auto; padding-left: 10px;}



  footer .footer-phone{margin-top: 15px;}
  footer .footer-copyright span{margin:15px 0 0 0;width: 100%;}
  footer .footer-copyright span:last-child{margin:15px 0 15px 0;}
  
  body {
    background-size: 80% !important;
    }
    .mt100,.mt120,.mt150,.mt180 {margin-top: 40px !important;}
    .mt120 {margin-top: 20px !important;}
    .pt300,.pt200,.pt250,.pb250 {margin-top: 100px !important;}
    .pt50,.pt100,.mt50 {margin-top: 0px !important;}
    .pb100,.pb200,.pt300,.pb250 {padding-bottom: 0px !important;}
    .mb100 {margin-bottom: 50px;}
  .content,.content1,.content2,.content3,.content4,.content5 {width:90%;}
  .content { padding-top: 80%;}
  .content h1,.content4 h1,.content5 h1 {font-size: 20px;margin-bottom: 20px;}
  .content h2,.content4 h2,.content4 h3,.content5 h2,.content5 h3,.content5 h4,.content5 h6 {font-size: 16px;margin-bottom: 20px;}
  .content p,.content4 p,.content4 span,.content4 pre,.content5 p,.content5 span,.content5 pre { width: 100%; line-height: 24px; color: #333; font-size: 12px}

.content1 h1 {font-size: 20px; margin-bottom: 20px;}
.content1 h2,.content h2 {font-size: 14px; margin-bottom: 20px;}
.content1 p { line-height: 24px; margin-top: 20px; font-size: 12px}
.content2 h1,.content2 h2 {text-align: center;width: 100%;}

.content h1,.content h2,.content4 h1,.content4 h2,.content4 h3,.content4 p,.content4 span,.content4 pre,.content5 h1,.content5 h2,.content5 h3,.content5 p,.content5 span,.content5 pre,.content p,.content1 p {text-align: center;}
.content5 h5 {font-size: 18px;margin-bottom: 20px;}
.content5 h4 {line-height: 20px; padding-left: 15px; margin-top: 30px;}


.adzy {float: none;}
.adzy h3 {font-size: 14px !important; text-align: center;}
.adzy h4 {font-size: 14px !important;margin-top: 30px !important;text-align: center;}
.adzy a {margin-left: 3%;}
.ad {height: 100px;padding: 0 0 100px 0;}
.help { margin-right: 0; margin-left: 3%;}
.site,.help {width:78%;margin-bottom: 50px;padding: 20px;float: none; font-size: 14px; line-height: 24px;}
.site { margin-bottom: 200px;}

.site a,.help a {font-size: 14px;  margin-top: 20px;}
.site h1,.help h1 { font-size: 18px; margin-bottom: 20px; margin-top: 60px;}
.sitetext { font-size: 14px;}

header li a:hover,
header li a:active {
  letter-spacing: 0;
}

header li a:after,
header li a:before {
  border: none;
}

.btns {padding: 12px 30px !important;font-size: 16px !important;}

.java {font-size: 12px;}

.java pre {padding-left: 20px;word-break:break-all;}

.banneranimate {width: 90%; }
.buttondiv {margin-top:30px;}
.tab li.active {height: 66px;line-height: 60px;}
.width60 { width: 80%; margin: 20px auto 0 auto;}
.width80 { width: 80% !important; margin: 20px auto 0 auto;}
.ml30 {margin-left: 10px;}
.tab .activebg {top: 56px;}

.authtext,.aggretext,.aggretext2,.aggretext3,.aggretext4 {width: 100%; float: none; clear: both;}
.authtext1,.authtext2,.aggretext1,.aggretext3 {width: 100%; float: none; padding-top: 0;margin-top: -380px !important;}
.aggretext1 { margin-left: 0px;margin-top: -380px !important;}
.aggretext3 { margin-left: 0px; margin-top: -320px !important;}
.aggretext2 {padding-left: 0;}
.authbg,.aggrebg {width: 90%; margin: 0 auto;float: none; }
.authleftbg1 {width: 100%; float: none;margin-top: 130px !important; clear: both !important;}
.authwidth,.authwidth1 { width: 70%; margin:0 auto;}
.authwidth1 {margin-top: 50px; clear: both;}
.marginauth {margin-top: 300px !important; clear: both !important;}

.authbg1 img,.authbg2 img { width: 70%;}
.authbg1 { left: 11%;}
.authbg2 { right: -7%;}
.authsfzbg3 img,.authyhkbg3 img { width: 50%;}
.authyhkbg3 {right: -25%;}

.saoma { width: 100%;padding-bottom: 0; }
.saoma h1 {line-height: 50px; font-size: 20px;}
.saoma p {line-height: 24px; font-size: 14px; color: #8b8b8b; padding: 0 12%;}
.saoma dt { width: 80%; margin: 0 auto 30px auto; padding: 30px 0;float: none;}
.saoma dd { width: 80%; margin: 0 auto 30px auto; padding: 30px 0;float: none;}

.bottombg2 {margin-top: 200px;}
.aggrehtmlbg {background: none;}
.authyhkbg4 img { width: 50%;}

.btn2 { float: right !important;}

.sdklist,.indexfour {
  display: block; 
  margin-top: 30px;
  overflow: auto;
}

.sdklist li { float: left; width: 43%; line-height: 30px; margin-right: 18px; margin-bottom: 30px;}
.sdklist li h1 {font-size: 14px;}
.sdklist li p { font-size: 12px;}


.indexfour li {float: left; width: 45%; margin-right: 5%; margin-bottom: 30px;}
.indexfour li i {width: 110px; height: 120px; margin: 0 auto 20px auto;}
.indexfourbg1 { position: absolute; top: 23%; width: 100%}
.indexfour li h1 {font-size: 16px; margin-bottom: 10px;}
.indexfour li p {font-size: 12px; line-height: 20px; text-align: left;}

.asid_share{width:30px;}
.asid_share .asid_share_box a{height:30px;}
.asid_share .asid_share_box a i {padding-top: 6px;}
.asid_share .asid_share_box a i img { width: 20px}
.asid_sha_layer{right:37px;bottom:-55px;}

.buttomdiv { padding-top: 200px !important; padding-bottom: 0;}

.kfzanimate,.helpcenter {top: -120px; width:180px;margin-left: -90px;}
.kfzanimate1 {width: 180px; height: 180px; background-size: 100%;}
.kfzanimate2 {top:50px; width: 100px; left: 40px;}
.kfzanimate3 {bottom:30px; right: -30px; width: 50px;}
.kfzanimate4 {top:40px;left: -20px; width: 50px;}

.helpcenter1 {width: 180px; height: 180px;background-size: 100%;}
.helpcenter2 {bottom:-10px; width: 110px; left: 40px;}
.helpcenter3 {top:50px; right: -10px; width: 30px;}
.helpcenter4 {bottom:30px; left: -10px; width: 30px;}

.wave-box{ height: 50px;}
.wave-box img { height: 50px;}
.jhanimate1 img,.jhanimate2 img,.jhanimate3 img,.jhanimate4 img { width: 35%;}
.jhanimate1 {top: 0; left: 40%;}
@keyframes jhanimate11 {
    0% {top: 0; transform: scale(1) }
    50% {top:5px;transform: scale(1) }
    100% {top: 0;transform: scale(1) }
}
@-webkit-keyframes jhanimate11 {
    0% {top: 0; transform: scale(1) }
    50% {top:5px;transform: scale(1) }
    100% {top: 0;transform: scale(1) }
}
.jhanimate2 {top: 54%; left: 35%;}
.jhanimate3 {top: 45%; left: 45%;}
.jhanimate4 {top: 40%; left: 40%;}

.contacttext { font-size: 12px; margin-bottom: 50px;width: 100%; padding-bottom: 30px;}
.contacttext li {margin-bottom: 10px;}
.contactform {width: 100%;}
.contactform span { font-size: 14px; text-align: left; margin-bottom: 10px; color: #8b8b8b;}
.contactform input { line-height: 36px; padding: 0 2%;margin-bottom: 20px;}
.contactform a { width: 120px;margin: 0 auto;}
.contactimg { display: none;}
.mt30sj {margin-top: 30px; margin-bottom: 0 !important;}

.gongdanyd,.banneryd { display: block !important;}
.gongdanpc,.bannerpc { display: none !important;}
.sytext { width: 100% !important;}
.mauto {max-width: 160px !important;}

.contacticon1,.contacticon2,.contacticon3 { background-size: 15px 15px; background-position: left 5px;}
.lianxi {float: none; margin: 0 auto;}
.indexiframe { height: 210px;}
.contactdh .contacta { color: #333; }
.contactdh .firsta:after,.contactdh .firsta:before {
  color: #25dbfb;
  border: 1px solid #fff;
}
.contacttext span {display: block; text-align: left;}

.logoline { background: url("../imgs/logoline.png") no-repeat right 6px;}
.logoline1 { background: url("../imgs/logoline1.png") no-repeat right 6px;}


.guideflew {
  display: block; 
  overflow: auto;
  margin:50px auto 50px auto;
}

.guideflew li {
  width: 90% !important;
  margin: 0 auto;
}

.guideflew li i {
  padding-top: 30px;
}

.guideflew li h1 {
  margin: 20px 0 20px 0;
}

.guideflew li p {
  font-size: 14px;
}

.guideflew li span {
  font-size: 14px;
  margin: 20px 0 20px 0;
  padding-bottom: 30px;
}

.titletabbg ul,.titletabbody,.guideflew  {
  width: 100% !important;
}

.titletabbg li {
  float: left;
  width: 25%;
  font-size: 12px;
  line-height: 40px;
}
.guideleft li {
  line-height: 16px;
  font-size: 12px;
  padding: 10px 0;
  padding-left: 10px;
}

.guideright h1{
  font-size: 18px;
  padding-top: 10px;
  margin-bottom: 20px;
}
.guideright {
  width: 67%;
  padding-right: 3%;
}

.guideright h2{
  font-size: 14px;
  margin-bottom: 20px;
}

.guideright p {
  font-size: 12px;
  line-height: 22px;
  margin-bottom: 20px;
}

.guideright ul {
  margin-bottom: 20px;
}

.guideright li {
  line-height: 22px;
  font-size: 12px;
  background: url("../imgs/guidebg4.png") no-repeat 5px 10px;
  padding-left: 20px;
}

.pb35 {
  padding-bottom: 20px !important;
}

.guideflew {
  margin:0 auto 50px auto;
}
.guideflew li:nth-child(2) {
  margin: 0 auto;
}
.greenspot {background: url("../imgs/greenspot.png") no-repeat left center;}

.sdkbg {
  margin-top: 50px !important;
}

.sdklist {
   margin-right: -18px;
   margin-left: 3%;
}

.sdklist dl { width: 90%; margin: 0 auto; border-top:1px solid #f2f2f2; }
.sdklist dl dt { font-size: 12px;padding-left: 0;}
.sdklist dl dd { font-size: 12px;padding-right: 0;}

.modaoiframe {display: none;}

}