* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}
html,
body {
  font-size: 16px;
  color: #000;
  font-family: "PingFang SC", sans-serif, "Microsoft YaHei";
}
a {
  text-decoration: none;
  color: #000;
}
.shs {
  font-family: "Light";
}
.bg {
  /*background: url(../image/bg.png) center 0 no-repeat #fff;*/
}

.shs .left-quo {
  text-indent: -30px;
  display: inline-block;
  margin-left: 20px;
}

/* #fix-header,  */
#float-header {
  background: #fff;
  box-shadow: 0px 5px 10px 0px #f3f3f3;
  z-index: 9999;
}

#float-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*border-bottom: solid #e2e2e2 1px;*/
}

#fix-header .head-inner,
#float-header .head-inner {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  height: 70px;
}

#float-header .logo {
  float: left;
  position: relative;
  top: 17px;
}

#fix-header .logo {
  float: left;
  position: relative;
  top: 13px;
  cursor: default;
  font-size: 25px;
}

.logo img,
.logo span {
  vertical-align: middle;
}

.logo img {
  width: 34px;
}

#fix-header .logo img {
  width: 34px;
}

.logo .hint {
  background: #ffa729;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  padding: 1px 2px;
  color: #fff;
  border-radius: 2px;
}

#fix-header .head-banner-left {
  list-style: none;
  position: relative;
  top: 13px;
  float: left;
  padding-left: 40px;
}

#fix-header .head-banner-left li {
  float: left;
  color: #999;
  font-size: 16px;
  line-height: 42px;
  opacity: 0.8;
  margin-right: 37px;
  font-weight: 400;
}

#fix-header .head-banner-left li a {
  color: #999;
}

#fix-header .head-banner-left .origin a {
  color: #ffa805;
  opacity: 0.8;
  font-weight: 500;
}

#fix-header .head-banner-right {
  position: relative;
  top: 24px;
  float: right;
  font-size: 14px;
  color: #0079ff;
}
#fix-header .head-banner-right li {
  list-style: none;
  float: right;
  padding-left: 9px;
  margin-right: 20px;
}

#fix-header .head-banner-right li img {
/*   width: 18px; */
  position: relative;
  top: 4px;
}

#fix-header .navi {
  float: right;
  position: relative;
  top: 30px;
}

.navi img,
.navi span {
  vertical-align: middle;
}

.navi img {
  width: 18px;
}

.navi a {
  display: inline-block;
  font-size: 14px;
}

.navi span {
  height: 18px;
  line-height: 18px;
}

.navi .community {
  margin-right: 20px;
}

#float-header .navi {
  float: right;
  position: relative;
  top: 15px;
}

.navi .download_btn {
  background: url(../image/btn_fuceng_lijixiazai.png);
  width: 136px;
  height: 38px;
  background-size: 136px 38px;
  line-height: 38px;
  color: #fff;
  text-align: center;
}

.navi .download_btn_app {
  background: url(../image/a8f36c1247c6e1fa20ec3c89e8505fbb.png);
  width: 136px;
  height: 38px;
  background-size: 136px 38px;
  line-height: 38px;
  color: #fff;
  text-align: center;
  margin-left: 20px;
}

#banner {
  background: url(../image/bd0fc1936d978a2a3b58fec06417c832.png)
    no-repeat center 0;
  background-size: 1920px 735px;
  height: 855px;
  overflow: hidden;
}

#banner .banner-inner {
  width: 1400px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
}

.banner-inner h1 {
  margin-top: 130px;
  font-size: 56px;
  font-weight: normal;
  height: 56px;
  line-height: 56px;
  width: 540px;
  text-indent: -7px;
}

.banner-inner h2 {
  font-size: 18px;
  font-weight: normal;
  margin-top: 17px;
  color: #000000;
  text-indent: -14px;
}

.banner-inner .download_btn {
  margin: 18px 0 10px;
  background: url(../image/3e9d3b07381ff7d45d848158174609fb.png)
    no-repeat;
  background-size: 240px 65px;
  display: inline-block;
  width: 240px;
  height: 65px;
  color: #fff;
  line-height: 72px;
  font-size: 28px;
  vertical-align: bottom;
}

.banner-inner .download_btn:hover {
  background: url(../image/effef684ccbed01eaa4324b9aaf52592.png)
    no-repeat;
  background-size: 240px 65px;
}

.banner-inner .download_btn_app {
  margin: 18px 0 10px 30px;
  background: url(../image/42e2d8f18218e2e5eab518d1123619fa.png)
    no-repeat;
  background-size: 240px 65px;
  display: inline-block;
  width: 240px;
  height: 65px;
  color: #fff;
  line-height: 72px;
  font-size: 28px;
}

.banner-inner .download_btn_app:hover {
  background: url(https://pc1.gtimg.com/guanjia/images/03/bd/03bde172e9a38ac28f5b22a705d3e7e6.png)
    no-repeat;
  background-size: 240px 65px;
}

.banner-inner .desc {
  margin-top: 10px;
}

.banner-inner .desc span {
  font-size: 14px;
  margin: 10px 20px 0 0;
  color: #737373;
  display: inline-block;
}

.banner-inner .desc-right {
  display: inline-block;
  width: 360px;
  height: 65px;
  font-size: 14px;
  color: #737373;
  margin: 18px 0 13px 20px;
  vertical-align: bottom;
  line-height: 24px;
}

.banner-inner .desc-right .l-r {
}

.banner-inner .desc a {
  color: #057cff;
  font-size: 14px;
  text-decoration: underline;
}

.banner-inner .desc a:hover {
  color: #2998ff;
}
.banner-inner .desc a:active {
  color: #0a6ad4;
}

/*.l-r{*/
/*position: relative;*/
/*}*/

/*.l-r:after{*/
/*content: '';*/
/*border-right: solid #d6d6d6 1px;*/
/*height: 10px;*/
/*position: absolute;*/
/*right: -30px;*/
/*top: 5px;*/
/*}*/

.banner-inner .desc span:last-child {
  margin-right: 0;
}

.banner-inner .main-pic {
  margin-top: 110px;
  position: relative;
}

.banner-inner .main-pic img {
  display: inline-block;
  width: 571px;
  height: 389px;
  position: relative;
  left: 92px;
}

.banner-left {
  width: 700px;
  float: left;
}

.banner-right {
  float: right;
  margin-right: 0px;
}

.banner-right .ncm {
  height: 30px;
  color: #737373;
  margin-top: 10px;
  font-size: 14px;
  background: url(../image/61f1e1650652aa619cc317995e5106c7.png)
    #fff 0 0 no-repeat;
  background-size: 77px 30px;
  line-height: 30px;
  text-indent: 90px;
  width: 514px;
  border: solid #f9deac 1px;
}

#left-num {
  color: #ff8500;
}

#copy-ncm {
  margin-right: 15px;
  color: #057cff;
  cursor: pointer;
  font-size: 12px;
  float: right;
}

#ncm {
  background: none;
  width: 280px;
  pointer-events: none;
  color: #737373;
  font-size: 14px;
}

.banner-bottom {
  text-align: center;
  clear: both;
  padding-top: 85px;
  font-size: 0;
}

.banner-bottom img {
  width: 155px;
  height: 155px;
}

.banner-navi {
  display: inline-block;
  margin: 0 174px 0 0;
  font-size: 18px;
}
.banner-navi:last-child {
  margin-right: 0;
}

.banner-navi .navi-img {
  position: relative;
}

#usage {
  background: url(../image/470140c3298455a471d72f07f3eb33f5.png)
    no-repeat center 0;
  background-size: 1920px 1249px;
  height: 1020px;
  overflow: hidden;
}

#usage .usage-inner {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

.usage-inner .content {
  overflow: hidden;
  margin-top: 100px;
}

.usage-inner .title {
  font-size: 30px;
  position: relative;
  margin-top: 85px;
}

.usage-inner .title:after,
.usage-inner .title:before {
  content: "";
  border-bottom: solid 1px rgba(226, 226, 226, 0.5);
  width: 425px;
  position: absolute;
  top: 24px;
}

.usage-inner .move-title:after,
.usage-inner .move-title:before {
  width: 340px;
}

.usage-inner .item {
  display: inline-block;
  width: 350px;
  height: 160px;
  margin-right: 50px;
  color: #000;
  font-size: 18px;
}

.usage-inner .item img {
  width: 160px;
}

.usage-inner .item3 {
  margin-right: 0;
}

.usage-inner .subdesc {
  font-size: 14px;
  color: #737373;
  margin-top: 10px;
  line-height: 1.8;
}

.usage-ani {
  text-align: center;
}

.usage-ani img {
  width: 928px;
  height: 667px;
}

.usage-ani .move {
  width: 100%;
  height: 617px;
}

#func {
  height: 1060px;
  overflow: hidden;
}

#func .func-inner {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

.func-inner .content {
  overflow: hidden;
  margin-top: 100px;
}

.func-inner .title {
  font-size: 30px;
  position: relative;
  margin-top: 50px;
}

.func-inner .title:after,
.func-inner .title:before {
  content: "";
  border-bottom: solid 1px rgba(226, 226, 226, 0.5);
  width: 325px;
  position: absolute;
  top: 24px;
}

.func-inner .item {
  display: block;
  width: 315px;
  height: 100px;
  margin: 90px 127px 0 0;
  color: #000;
  font-size: 20px;
  position: relative;
  margin-bottom: 45px;
  text-align: left;
}

.func-inner .content {
  overflow: hidden;
}

.func-inner .content-left {
  width: 70%;
  float: left;
  position: relative;
}

.func-inner .content-left img {
  width: 680px;
  height: 784px;
}

.func-inner .content-right {
  width: 30%;
  float: right;
}

.func-inner .item img {
  width: 96px;
  height: 96px;
  position: absolute;
  left: 0;
  top: 2px;
}

.func-inner .item .subtitle {
  width: 200px;
  font-size: 18px;
  height: 18px;
  line-height: 1;
}

.func-inner .item .subdesc {
  width: 240px;
  font-size: 14px;
  line-height: 1.5;
  color: #737373;
  margin-top: 20px;
}

#slider {
  background: url(../image/470140c3298455a471d72f07f3eb33f5.png)
    no-repeat;
  background-size: 1920px 1249px;
  height: 910px;
  overflow: hidden;
  background-position: center 0;
}
.slider-inner {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

.slider-inner .title {
  font-size: 30px;
  position: relative;
  margin-top: 50px;
}

.slider-inner .title:after,
.slider-inner .title:before {
  content: "";
  border-bottom: solid 1px rgba(226, 226, 226, 0.5);
  width: 325px;
  position: absolute;
  top: 24px;
}

.title:before {
  left: 0;
}
.title:after {
  right: 0;
}

.slider-navi {
  text-align: center;
  margin-top: 50px;
}

.slider-navi span {
  display: inline-block;
  font-size: 18px;
  color: #ababab;
  margin: 0 30px;
  height: 30px;
  cursor: pointer;
}

.slider-navi span.active {
  color: #000;
  border-bottom: solid 3px rgb(255, 180, 33);
}

#slider-content {
  font-size: 18px;
}
#slider-content .ls {
  text-indent: -18px;
  display: inline-block;
  margin: 0 2px 0 14px;
}

#slider-content .info-detail {
  font-size: 14px;
  text-align: center;
  color: #868686;
  margin-top: 30px;
}

#slider-content .info-detail span {
  margin-right: 40px;
  position: relative;
}
#slider-content .info-detail span:last-child {
  margin-right: 0;
}

#slider-content .info-detail span::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  left: -14px;
  top: 6px;
  background: #868686;
}

#slider-left {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
}

#slider-right {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  /*transform: rotate(180deg);*/
}

#compare {
  height: 1145px;
}

#compare .compare-inner {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

.compare-inner .title {
  font-size: 30px;
  position: relative;
  margin-top: 50px;
}

.compare-inner .title:after,
.compare-inner .title:before {
  content: "";
  border-bottom: solid 1px rgba(226, 226, 226, 0.5);
  width: 325px;
  position: absolute;
  top: 24px;
}

.compare-tr {
  font-size: 0;
  margin-top: 30px;
}

.compare-tr > div {
  display: inline-block;
  vertical-align: middle;
}

.compare-tr .tr-1,
.compare-tr .tr-3 {
  width: 337px;
  position: relative;
  text-align: left;
}

.compare-tr .tr-1 span,
.compare-tr .tr-3 span {
  position: absolute;
  top: 50px;
  left: 188px;
  width: 240px;
  text-align: left;
}

.compare-tr .tr-3 span i {
  font-style: normal;
  color: #999;
}

.compare-tr .tr-1 a,
.compare-tr .tr-3 a {
  position: absolute;
  bottom: 60px;
  left: 188px;
  width: 120px;
  height: 40px;
  background: #0bd09d;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}
.compare-tr .tr-2 {
  width: 30%;
}

.compare-tr span {
  display: block;
  font-size: 18px;
  color: #000;
}

.compare-td {
  font-size: 18px;
  color: #000;
  width: 720px;
  margin: 50px auto;
  position: relative;
}

.compare-td .yes {
  background: url(../image/424049f118598791ccdeb4a09b8df76a.png)
    no-repeat;
  background-size: 23px 23px;
  width: 23px;
  height: 23px;
  position: absolute;
}

.compare-td .no {
  background: url(../image/84a9ef86c0a5ab06ae73e57d646ceb0f.png)
    no-repeat;
  background-size: 23px 23px;
  width: 23px;
  height: 23px;
  position: absolute;
  right: 0;
}

.compare-td i {
  left: 0;
}
.compare-td b {
  right: 0;
}

#log {
  margin-top: 30px;
  background: #fbfbfb;
  overflow: hidden;
}

#log .log-inner {
  width: 1200px;
  margin: 50px auto;
  text-align: left;
}

.log-inner .title {
  font-size: 18px;
  color: #000;
}

.log-inner .log-list {
  background: #fff;
  padding: 40px 40px 0;
  margin-top: 20px;
  border: solid #f5f5f5 1px;
  line-height: 2;
}

.log-item {
  margin-bottom: 80px;
  display: none;
}

.log-item .gray {
  color: #737373;
  font-size: 14px;
}

.log-item .gxd {
  margin-top: 20px;
}

.log-item .detail {
  font-size: 14px;
}

.log-list .more {
  width: 1050px;
  margin: 0 auto;
  border-top: solid #e8e8e8 1px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
  cursor: pointer;
  padding-right: 22px;
  font-size: 14px;
  color: #737373;
}

.log-list .up:after {
  content: "";
  background: url(../image/up.png) no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 18px;
  right: 494px;
}

.log-list .down:after {
  content: "";
  background: url(../image/down.png) no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 18px;
  right: 494px;
}

.footer {
  font-size: 12px;
  line-height: 1.8em;
  text-align: center;
  padding: 35px 0;
  background: #fbfbfb;
}
.footer a,
.footer span {
  color: #565656;
  text-decoration: none;
  padding: 0 10px;
}
.footer a:hover {
  text-decoration: underline;
}
.footer .copyright {
  color: #9e9e9e;
}

@font-face {
  font-family: "Light";
  src: url("../font/SourceHanSansCN-Light.eot");
  src: url("../font/SourceHanSansCN-Light.eot")
      format("embedded-opentype"),
    url("../font/SourceHanSansCN-Light.woff2") format("woff2"),
    url("../font/SourceHanSansCN-Light.woff") format("woff"),
    url("../font/SourceHanSansCN-Light.ttf") format("truetype"),
    url("../font/SourceHanSansCN-Light.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* animate start*/
.animation_icon_wrap {
  width: 155px;
  height: 155px;
  position: absolute;
  z-index: 99;
  overflow: hidden;
  left: 0;
  top: 0;
  background-size: 4650px 155px;
}

#icon-1 {
  background-image: url(../image/708a62a2d7f349f4ee49712b88b87f10.png);
}

#icon-2 {
  background-image: url(../image/2d47716e3c997f2c68819ee70036ed3a.png);
}

#icon-3 {
  background-image: url(../image/26c88f7f626058c6d0fd12f43f9fff07.png);
}

#icon-4 {
  background-image: url(../image/8b3986740c03c535006f8d9c44a3e7fb.png);
}

.animation_banner_wrap {
  width: 581px;
  height: 399px;
  position: absolute;
  z-index: 99;
  overflow: hidden;
  left: 86px;
  top: -8px;
  background-size: 17430px 399px;
  /* background-image: url(../image/5a972d1cc5a4aa2272593515a369f0bf.png); */
}

.animation_state_wrap {
  /*width: 680px;*/
  /*height: 680px; */
  width: 690px;
  height: 794px;
  position: absolute;
  z-index: 99;
  overflow: hidden;
  /*right: 48px;*/
  /*top: 0;  */
  right: 75px;
  top: -15px;
  /*background-size: 20400px 680px;*/
  background-size: 20700px 794px;
  /*background-image: url(../image/2b2617fbbefa3ca33b00c44f4e0058fc.png);*/
  background-image: url(../image/c44522c4380c2c45b9d445bda4c2e907.png);
}

.play-state {
  animation-name: frames;
  animation-duration: 2s;
  animation-timing-function: step-start;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes frames {
  0% {
    background-position: 0 0;
  }
  3.4483% {
    background-position: -690px 0;
  }
  6.8966% {
    background-position: -1380px 0;
  }
  10.3448% {
    background-position: -2070px 0;
  }
  13.7931% {
    background-position: -2760px 0;
  }
  17.2414% {
    background-position: -3450px 0;
  }
  20.6897% {
    background-position: -4140px 0;
  }
  24.1379% {
    background-position: -4830px 0;
  }
  27.5862% {
    background-position: -5520px 0;
  }
  31.0345% {
    background-position: -6210px 0;
  }
  34.4828% {
    background-position: -6900px 0;
  }
  37.931% {
    background-position: -7590px 0;
  }
  41.3793% {
    background-position: -8280px 0;
  }
  44.8276% {
    background-position: -8970px 0;
  }
  48.2759% {
    background-position: -9660px 0;
  }
  51.7241% {
    background-position: -10350px 0;
  }
  55.1724% {
    background-position: -11040px 0;
  }
  58.6207% {
    background-position: -11730px 0;
  }
  62.069% {
    background-position: -12420px 0;
  }
  65.5172% {
    background-position: -13110px 0;
  }
  68.9655% {
    background-position: -13800px 0;
  }
  72.4138% {
    background-position: -14490px 0;
  }
  75.8621% {
    background-position: -15180px 0;
  }
  79.3103% {
    background-position: -15870px 0;
  }
  82.7586% {
    background-position: -16560px 0;
  }
  86.2069% {
    background-position: -17250px 0;
  }
  89.6552% {
    background-position: -17940px 0;
  }
  93.1034% {
    background-position: -18630px 0;
  }
  96.5517% {
    background-position: -19320px 0;
  }
  100% {
    background-position: -20010px 0;
  }
}

/* .play-banner {
  animation-name: frameb;
  animation-duration: 0.8s;
  animation-timing-function: step-start;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
} */

@keyframes frameb {
  0% {
    background-position: 0 0;
  }
  3.4483% {
    background-position: -581px 0;
  }
  6.8966% {
    background-position: -1162px 0;
  }
  10.3448% {
    background-position: -1743px 0;
  }
  13.7931% {
    background-position: -2324px 0;
  }
  17.2414% {
    background-position: -2905px 0;
  }
  20.6897% {
    background-position: -3486px 0;
  }
  24.1379% {
    background-position: -4067px 0;
  }
  27.5862% {
    background-position: -4648px 0;
  }
  31.0345% {
    background-position: -5229px 0;
  }
  34.4828% {
    background-position: -5810px 0;
  }
  37.931% {
    background-position: -6391px 0;
  }
  41.3793% {
    background-position: -6972px 0;
  }
  44.8276% {
    background-position: -7553px 0;
  }
  48.2759% {
    background-position: -8134px 0;
  }
  51.7241% {
    background-position: -8715px 0;
  }
  55.1724% {
    background-position: -9296px 0;
  }
  58.6207% {
    background-position: -9877px 0;
  }
  62.069% {
    background-position: -10458px 0;
  }
  65.5172% {
    background-position: -11039px 0;
  }
  68.9655% {
    background-position: -11620px 0;
  }
  72.4138% {
    background-position: -12201px 0;
  }
  75.8621% {
    background-position: -12782px 0;
  }
  79.3103% {
    background-position: -13363px 0;
  }
  82.7586% {
    background-position: -13944px 0;
  }
  86.2069% {
    background-position: -14525px 0;
  }
  89.6552% {
    background-position: -15106px 0;
  }
  93.1034% {
    background-position: -15687px 0;
  }
  96.5517% {
    background-position: -16268px 0;
  }
  100% {
    background-position: -16849px 0;
  }
}
/* animate end*/
/* media query*/
@media screen and (max-width: 1480px) {
  .banner-bottom {
    padding-top: 0 !important;
  }

  #banner {
    height: 780px;
  }
}