html,
body {background: #fff;min-height: 100%;}

.w1200{position:relative;}
.abso{position:fixed;left:0px;top:0px;background-color:#fff;}

.head{background:url(../images/bg1.png) center center no-repeat;background-size:100% 100%;height:504px;}
.head .logolay{position:absolute;top:16px;left:0px;}
.head .logolay img{float:left;margin-right:10px;}
.head .logolay span{float:left;height:26px;line-height:26px;color:#fff;font-size:24px;}
.head .headimg{position:absolute;width:100%;background:url(../images/headword.png) center center no-repeat;height:173px;left:0px;top:120px;}
.head .downbtn{cursor:pointer;transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;background:url(../images/downbtn.png) center center no-repeat;width:326px;height:94px;left:50%;margin-left:-163px;top:350px;position:absolute;}
.head .downbtn span{height:66px;line-height:66px;float:left;width:100%;font-size:30px;color:#347aeb;text-align:center;text-indent:30px}
.head .downbtn i{float:left;width:100%;height:28px;line-height:28px;text-align:center;color:#4b5f7c;}
.head .downbtn:hover{transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);}
.iconbanner{height:440px;}
.icos{float:left;width:100%;padding:20px 0px;}
.icos li{float:left;width:200px; -webkit-transition: all .3s;margin-bottom:20px;margin-top:20px;
    -moz-transition: all .3s;
    -ms-transition: all .3s;}
.icos li .img{float:left;height:140px;width:100%;text-align:center;line-height:80px;}
.icos li .img img{cursor:pointer}
.icos li:hover { -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);}
.icos li .word{float:left;width:100%;height:30px;text-align:center;font-size:16px;}

.jieshao{background:url(../images/bg2.jpg) center center no-repeat;height:1750px;background-size:100% 100%;*height:2000px;}
.jieshao .title{height:60px;line-height: 60px;padding:20px 0px;width:100%;text-align:center;font-size:34px;}
.function-img-text {float:left;width:100%;margin-top:80px;
    font-size: 0;
    padding: 60px 0;
}

.function-img {
    display: inline-block;
    width: 50%;
    text-align: center;
}

.function-img-center {
    cursor:pointer;
    position: relative;
    max-width: 100%;
}

.function-img-center .pic {
    display: block;
}

.function-img-center .gif {
    position: absolute;
    left: 0px;
    top: -20%;
}

.function-img-center .gif.pos-2 {
    left:0px;
    top: 10%;
}

.function-text {
    width: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.function-text-center {
  
    text-align: left;
    padding: 65px 0;
}

.function-text-center.pd-45 {
    padding: 45px 0;
}

.function-text-center h3 {
    font-size: 28px;
    color: #373737;
    line-height: 1.5;
}

.function-text-center h4 {
    font-size: 18px;
    color: #6F6F6F;
    line-height: 1.5;
    margin-top: 10px;
}

.function-text-center p {
    font-size: 18px;
    color: #6F6F6F;
    line-height: 1.8;
    margin-top: 10px;
    margin-bottom: 35px;
}

.dwon-btn {
    display: inline-block;
    width: 200px;
    text-align: center;
    font-size: 0;
    background-color: #0089FF;
    border-radius: 4px;transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
}

.dwon-btn span {
    display: inline-block;
    padding-left: 34px;
    line-height: 56px;
    background: url("../images/ico-dwon-white.png") no-repeat left center;
    font-size: 20px;
    color: #fff;
}

.dwon-btn:hover {
    background-color: #2199FF;transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
}

.dwon-btn:active {
    background-color: #0A83EA;
}



.youshi{background:url(../images/bg3.png) center center no-repeat;height:500px;cursor:pointer}
.foot{float:left;width:100%;background-color:#000;color:#fff;text-align:center;height:50px;line-height:50px;font-size:14px;}






.banner-wrapper {
  height: 643px;
  background: url(../images/home_bg_nor_banner2.png) top center no-repeat #fff;  /*background-size: cover;background-size:100% 100%;*/
  /*background: url(../images/home_bg_nor_banner.png) no-repeat center;
  background-size: cover;*/ }
  .banner-wrapper .nav-wrapper {
    height: 85px; }
    .banner-wrapper .nav-wrapper .navbar-left {
      float: left;
      line-height: 85px; }
      .banner-wrapper .nav-wrapper .navbar-left img {
        width: 38px;
        height: 38px;
        vertical-align: middle;
        margin-right: 10px; }
      .banner-wrapper .nav-wrapper .navbar-left .pro-name {
        vertical-align: middle;
        font-weight: 400;
        color: #f8f8f8;
        font-size: 28px; }
    .banner-wrapper .nav-wrapper .navbar-right {
      float: right;margin-right:56px;
      padding-top: 20px; }
      .banner-wrapper .nav-wrapper .navbar-right a {
        line-height: 45px;
        text-align: center; }
        .banner-wrapper .nav-wrapper .navbar-right a .iconfont {
          font-size: 16px;
          margin-right: 15px; }
  .banner-wrapper .banner-content {
    padding-top: 47px; }
    .banner-wrapper .banner-content .banner-left {
      width: 547px;
      float: left; }
      .banner-wrapper .banner-content .banner-left .pro-name {
        font-size: 46px;
        font-weight: 600;
        color: white;
        position:relative;
        margin-bottom: 17px; }
         .banner-wrapper .banner-content .banner-left .pro-name i {
            position:absolute;width:112px;height:45px;right:110px;top:-3px;color:#fff;font-size:20px;background:url(../images/windows.png) left top no-repeat;text-align:center;line-height:28px;font-weight:100;
       }


      .banner-wrapper .banner-content .banner-left .pro-character {
        font-size: 28px;
        font-weight: 400;
        color: white;
        line-height: 25px;letter-spacing:2px;
        margin-bottom: 37px; }
      .banner-wrapper .banner-content .banner-left .pro-fn {
        font-size: 21px;
        font-weight: 400;width:560px;
        color: white;
        line-height: 40px;margin-bottom:20px;
        }
        .banner-wrapper .banner-content .banner-left .pro-fn i{
            display:inline-block;background:url(../images/point.png);width:9px;height:9px;margin-right:10px
        }
       .btn-download {
        width: 180px;
        height: 58px;
        line-height: 58px;
        margin-bottom: 12px; }
        .btn-download .iconfont {
          font-size: 24px;
          margin: 0 20px 0 19px;
          vertical-align: middle; }
      .banner-wrapper .banner-content .banner-left .version-info p {
        font-size: 14px;
        font-weight: 400;
        color: white;
        line-height: 24px; }
    .banner-wrapper .banner-content .banner-right {
      float: right;margin-right: 2px;
    margin-top: 27px;}
      .banner-wrapper .banner-content .banner-right img {
        width: 600px; }

.service-wrapper {
  background: url(../images/home_bg_nor_advantages.png) no-repeat center;
  background-size: cover;
  padding-bottom: 35px; }
  .service-wrapper .module-title {
/*    padding: 94px 0 64px;*/
    font-size: 36px;
    font-weight: 400;
    color: black;
    line-height: 36px;
    text-align: center; }
  .service-wrapper .service-content .fixed-item:first-child img {
    width: 579px;
    height: 412px; }
  .service-wrapper .service-content .fixed-item {cursor:pointer;
    width: 579px;
    height: 412px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap; }
    .service-wrapper .service-content .fixed-item img {
      width: 600px;
      height: 394px; }
    .service-wrapper .service-content .fixed-item p {
      width:470px; }
    .service-wrapper .service-content .fixed-item .service-word {
      white-space: nowrap;
      font-size: 22px;
      font-weight: 500;
      color: black;
      line-height: 22px;
      margin-bottom: 24px;
      height: 22px; }
      .service-wrapper .service-content .fixed-item .service-word .iconfont {
        font-size: 30px;
        margin-right: 15px;
        color: #fff;
        vertical-align: middle; }
    .service-wrapper .service-content .fixed-item .service-word-content {
      font-size:20px;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 40px;
}


.btn-download {
  display: block;
  width: 170px;
  height: 45px;
  background: #0e9cff;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px; }

.btn-download:hover {transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);webkit-transition: all .3s;-webkit-transition: all .3s;
  /*background: linear-gradient(180deg, #fd6b5b 0%, #fc4242 100%);*/
 /* box-shadow: 0px 2px 7px 0px #bc4c59; */}




.btnactive{position:relative;overflow:hidden;}
.btnactive:before{content:"";position:absolute;width:200%;height:500%;left:0%;top:0%;margin-left:-50%;margin-top:-50%;border-radius:50%; background: rgba(0, 0, 0, .1); animation: spread 1.5s infinite both;
        -webkit-animation: spread 1.5s infinite both;
        -moz-animation: spread 1.5s infinite both;
        -o-animation: spread 1.5s infinite both;}

 @keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @-webkit-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @-moz-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @-o-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }

.fidelity-small {
    font-size: 0;
    position: relative;
    margin-top: -110px;
    margin-bottom: 40px;
}

.fidelity-box {
    margin-top: 80px;
    text-align: center;
    padding-bottom: 50px;
    position: relative;
    opacity: 0;float:left;
    filter: alpha(opacity=0);
}

.fidelity-box.active {
    opacity: 1;
    filter: alpha(opacity=100);
}

.fidelity-box.active>img {
    animation: bigimg 1s;
    -webkit-animation: bigimg 1s;
    -moz-animation: bigimg 1s;
    -ms-animation: bigimg 1s;
    position: relative;
}

@keyframes bigimg {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        top: -30px;
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0;
    }
}

@-webkit-keyframes bigimg {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        top: -30px;
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0;
    }
}

@-moz-keyframes bigimg {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        top: -30px;
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0;
    }
}

@-ms-keyframes bigimg {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        top: -30px;
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0;
    }
}

.fidelity-box.active .fidelity-small img:nth-child(1) {
    animation: smallimg1 5s forwards;
    -webkit-animation: smallimg1 5s forwards;
    -moz-animation: smallimg1 5s forwards;
    -ms-animation: smallimg1 5s forwards;
    position: relative;
}

@keyframes smallimg1 {
    0%,
    20% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    40%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-webkit-keyframes smallimg1 {
    0%,
    20% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    40%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-moz-keyframes smallimg1 {
    0%,
    20% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    40%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-ms-keyframes smallimg1 {
    0%,
    20% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    40%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

.fidelity-box.active .fidelity-small img:nth-child(2) {
    animation: smallimg2 5s forwards;
    -webkit-animation: smallimg2 5s forwards;
    -moz-animation: smallimg2 5s forwards;
    -ms-animation: smallimg2 5s forwards;
    position: relative;
}

@keyframes smallimg2 {
    0%,
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    50%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-webkit-keyframes smallimg2 {
    0%,
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    50%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-moz-keyframes smallimg2 {
    0%,
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    50%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-ms-keyframes smallimg2 {
    0%,
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    50%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

.fidelity-box.active .fidelity-small img:nth-child(3) {
    animation: smallimg3 5s forwards;
    -webkit-animation: smallimg3 5s forwards;
    -moz-animation: smallimg3 5s forwards;
    -ms-animation: smallimg3 5s forwards;
    position: relative;
}

@keyframes smallimg3 {
    0%,
    40% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    60%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-webkit-keyframes smallimg3 {
    0%,
    40% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    60%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-moz-keyframes smallimg3 {
    0%,
    40% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    60%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-ms-keyframes smallimg3 {
    0%,
    40% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    60%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

.fidelity-box.active .fidelity-small img:nth-child(4) {
    animation: smallimg4 5s forwards;
    -webkit-animation: smallimg4 5s forwards;
    -moz-animation: smallimg4 5s forwards;
    -ms-animation: smallimg4 5s forwards;
    position: relative;
}

@keyframes smallimg4 {
    0%,
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    70%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-webkit-keyframes smallimg4 {
    0%,
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    70%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-moz-keyframes smallimg4 {
    0%,
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    70%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

@-ms-keyframes smallimg4 {
    0%,
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
    }
    70%,
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
    }
}

.fidelity-box.active .swich-icon {
    opacity: 0;
    filter: alpha(opacity=0);
    animation: swith 2s 1s forwards infinite;
    -webkit-animation: swith 2s 1s forwards infinite;
    -moz-animation: swith 2s 1s forwards infinite;
    -ms-animation: swith 2s 1s forwards infinite;
}

@keyframes swith {
    0% {
        opacity: 1;
        filter: alpha(opacity=1);
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes swith {
    0% {
        opacity: 1;
        filter: alpha(opacity=1);
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes swith {
    0% {
        opacity: 1;
        filter: alpha(opacity=1);
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

@-ms-keyframes swith {
    0% {
        opacity: 1;
        filter: alpha(opacity=1);
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}


.swich-icon {
    position: absolute;
    top: 120px;
    left: 50%;
    width: 64px;
    height: 68px;
    margin-top: -34px;
    margin-left: -32px;
    background: url("../images/icon_gbzhuan.png") no-repeat;
}

.fidelity-box>img {
    display: block;
    margin: 0 auto;
}