.common-title {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}
.common-des {
  font-size: 0.8rem;
  color: #333;
  text-align: center;
  width: 90%;
  margin: 20px auto 0;
}
.all-button {
  text-align: center;
  margin-top: 1.5rem;
}
.all-button .btn:first-child {
  margin-right: 20px;
}
nav {
  max-width: unset;
}
nav .nav-pc div.nav {
  margin: 20px 0 20px;
}
nav .nav-pc div.nav-menu {
  display: none;
}
nav .nav-pc .nav-tel {
  position: absolute;
  right: min(5rem, 98px);
  top: 50%;
  -webkit-transform: translateY(-40%);
      -ms-transform: translateY(-40%);
          transform: translateY(-40%);
}
nav .nav-pc .nav-demo {
  position: absolute;
  right: 3%;
}
.banner {
  margin-top: 2.75rem;
  padding: 5rem 0 6rem;
  background: url(/pagesWithHtml/assets/banner.4f83b8.png) center no-repeat;
  background-size: cover;
  text-align: center;
}
.banner h1 {
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}
.banner h1 span {
  color: #14BE4B;
}
.banner .des {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #888E8C;
  line-height: 1.5;
}
.banner .des span {
  color: #14BE4B;
  font-weight: bold;
}
.banner .btn {
  margin-top: 30px;
}
.video-banner {
  background: url(/pagesWithHtml/assets/video-banner.c20101.png) center no-repeat;
  background-size: cover;
  text-align: center;
  padding-bottom: 60px;
}
.video-banner video {
  width: 60%;
  max-width: 750px;
  margin-top: -100px;
  min-width: 580px;
}
.four-steps {
  padding: 3.2rem 0;
  background: #F1F3F4 url(/pagesWithHtml/assets/steps-banner.b8d9bc.png) center no-repeat;
  background-size: cover;
}
.four-steps .content {
  width: 80%;
  margin: 50px auto 0;
  display: table;
}
.four-steps .content .left-tab {
  display: table-cell;
  width: 30%;
  vertical-align: top;
}
.four-steps .content .left-tab ul li {
  background: white;
  box-shadow: 0px 10px 34px 0px rgba(210, 210, 210, 0.5);
  padding: 20px;
  position: relative;
}
.four-steps .content .left-tab ul li .index {
  display: inline-block;
  font-size: 1.28rem;
  font-weight: bold;
  color: #333;
  vertical-align: middle;
  background: #F6F7FA;
  border-radius: 50px;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin-right: 20px;
}
.four-steps .content .left-tab ul li .text {
  display: inline-block;
  color: #333;
  vertical-align: middle;
  width: calc(100% - 80px);
}
.four-steps .content .left-tab ul li .text .title {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 5px;
}
.four-steps .content .left-tab ul li .text .des {
  font-size: 0.58rem;
  line-height: 1.2;
}
.four-steps .content .left-tab ul li.active::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 100%;
  background: url(/pagesWithHtml/assets/arrow.7f5a31.png) center no-repeat;
  background-size: cover;
  position: absolute;
  right: -9px;
  top: 0;
}
.four-steps .content .space {
  width: 5%;
}
.four-steps .content .right-content {
  display: table-cell;
  width: 65%;
  vertical-align: top;
  background: white;
  box-shadow: 0px 10px 34px 0px rgba(210, 210, 210, 0.5);
  text-align: center;
}
.four-steps .content .right-content ul li {
  width: 100%;
  display: none;
}
.four-steps .content .right-content ul li:nth-child(1) {
  display: inline-block;
  vertical-align: middle;
}
.four-steps .content .right-content ul li img {
  width: 98%;
  max-height: 330px;
}
.four-steps .content .right-content ul li:last-child {
  margin: 0 auto;
}
.four-steps .content .right-content ul li:last-child img {
  max-height: 330px;
  width: auto;
}
.four-steps .content .right-content .title {
  color: white;
  font-size: 1rem;
  line-height: 2.2;
  background: rgba(20, 190, 75);
  margin-bottom: 0.5rem;
}
.four-steps .content .right-content img {
  width: 100%;
}
.smart-demo {
  padding: 3.2rem 0;
}
.smart-demo .content {
  width: 80%;
  margin: 50px auto 0;
  box-shadow: 0px 10px 34px 0px rgba(210, 210, 210, 0.5);
}
.smart-demo .content .tab {
  display: table;
}
.smart-demo .content .tab li {
  display: table-cell;
  box-shadow: 5px 5px 14px 0px rgba(0, 0, 0, 0.06);
  width: 25%;
  width: 1000px;
  text-align: center;
  padding: 20px 0;
}
.smart-demo .content .tab li .img {
  width: 60px;
  height: 60px;
  text-align: center;
  background: #F6F7FA;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
  border-radius: 6px;
}
.smart-demo .content .tab li .img img {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.smart-demo .content .tab li .img img.active {
  display: none;
}
.smart-demo .content .tab li .title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #333;
}
.smart-demo .content .tab li.active {
  background: #F6F7FA;
}
.smart-demo .content .tab li.active .img {
  background: #39BE4B;
}
.smart-demo .content .tab li.active .img img.normal {
  display: none;
}
.smart-demo .content .tab li.active .img img.active {
  display: inline-block;
}
.smart-demo .content .detail > li {
  color: #333;
  padding: 50px;
  display: none;
}
.smart-demo .content .detail > li:first-child {
  display: block;
}
.smart-demo .content .detail > li .text {
  display: inline-block;
  width: 25%;
  margin-right: 5%;
  vertical-align: top;
  margin-top: 8%;
}
.smart-demo .content .detail > li .text .des {
  line-height: 1.5;
  font-weight: bold;
  font-size: 0.7rem;
}
.smart-demo .content .detail > li .text .sub-title {
  font-weight: bold;
  font-size: 0.7rem;
  margin-bottom: 10px;
  line-height: 1.5;
}
.smart-demo .content .detail > li .text .list p {
  line-height: 1.5;
  font-size: 0.58rem;
  margin-bottom: 5px;
}
.smart-demo .content .detail > li .text .list p::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #14BE4B;
  vertical-align: middle;
  margin-right: 6px;
}
.smart-demo .content .detail > li img {
  width: 70%;
  vertical-align: top;
}
.example {
  padding: 3.2rem 0;
  background: #F8F9FA;
}
.example .content {
  width: 80%;
  margin: 50px auto 0;
}
.example .content .effect {
  display: inline-block;
  width: 25%;
  vertical-align: middle;
}
.example .content .effect li {
  font-size: 0.68rem;
}
.example .content .effect li:last-child {
  margin-top: 30px;
}
.example .content .effect li .item {
  color: #333;
  background: white;
  padding: 20px;
  width: auto;
  display: inline-block;
}
.example .content .effect li .result {
  color: white;
  background: #14BE4B;
  padding: 20px;
  width: auto;
  vertical-align: middle;
  display: table-cell;
}
.example .content .effect li .result::after {
  content: '';
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url(/pagesWithHtml/assets/icon.2176dd.png) center no-repeat;
  background-size: cover;
  position: relative;
  vertical-align: bottom;
  margin-left: 10px;
}
.example .content .indicator {
  display: inline-block;
  width: 75%;
  vertical-align: middle;
  background: white;
  padding: 30px;
  box-sizing: border-box;
}
.example .content .indicator li {
  display: inline-block;
  vertical-align: top;
  width: 49%;
  text-align: center;
}
.example .content .indicator li:first-child {
  margin-right: 2%;
}
.example .content .indicator li:first-child img {
  width: 100%;
}
.example .content .indicator li:last-child {
  text-align: right;
}
.example .content .indicator li:last-child p {
  display: inline-block;
  width: 75%;
}
.example .content .indicator li p {
  font-size: 0.8rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
}
.example .content .indicator li img {
  width: 75%;
}
.clients-comment {
  padding: 3.75rem 0;
  background: url(/pagesWithHtml/assets/clients-banner.07192c.png) center no-repeat;
  background-size: cover;
}
.clients-comment .common-title {
  color: white;
}
.clients-comment .content {
  width: 80%;
  margin: 0 auto;
  margin-top: 3rem;
}
.clients-comment .content > .video {
  display: inline-block;
  width: 45%;
  margin-right: 5%;
  vertical-align: middle;
  text-align: right;
}
.clients-comment .content > .video video {
  width: 80%;
}
.clients-comment .content .client-comment {
  display: inline-block;
  width: calc(50% - 2px);
  vertical-align: middle;
  height: 12rem;
}
.clients-comment .content .client-comment .swiper-wrapper {
  width: 98%;
}
.clients-comment .content .client-comment .swiper-slide .border {
  border: 1px solid #CCCCCC;
  border-radius: 50px;
  position: relative;
  height: calc(100% - 2px);
}
.clients-comment .content .client-comment .swiper-slide .img {
  background: url(/pagesWithHtml/assets/circle.3e1a60.png) no-repeat center;
  background-size: contain;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  vertical-align: middle;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.clients-comment .content .client-comment .swiper-slide .img img {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.clients-comment .content .client-comment .swiper-slide .client {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: bold;
  width: 3rem;
  color: white;
  position: relative;
  left: 3rem;
  top: 50%;
  line-height: 3rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.clients-comment .content .client-comment .swiper-slide .des {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.58rem;
  width: calc(100% - 6rem);
  line-height: 1.5;
  color: white;
  position: absolute;
  left: 6rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.clients-comment .content > .logos {
  margin-top: 30px;
  width: 91%;
  padding-left: 9%;
}
.clients-comment .content > .logos img {
  width: 100%;
}
.company-profile {
  background: #F8F9FA;
  padding: 3.75rem 0 6rem 0;
}
.company-profile .common-title {
  margin-bottom: 2rem;
}
.company-profile .content {
  width: 80%;
  margin: 0 auto;
}
.company-profile .content .detail {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5%;
}
.company-profile .content .detail .icon {
  width: 3.8rem;
}
.company-profile .content .detail .introduction {
  color: #333;
}
.company-profile .content .detail .introduction .title {
  font-size: 0.8rem;
  font-weight: bold;
  height: 0.8rem;
  margin: 1rem 0 0.5rem;
}
.company-profile .content .detail .introduction .title::before {
  content: "";
  width: 4px;
  height: 100%;
  display: inline-block;
  background: #14BE4B;
  vertical-align: top;
  margin-right: 0.5rem;
}
.company-profile .content .detail .introduction .des {
  font-size: 0.6rem;
  line-height: 1.5;
}
.company-profile .content .detail .about {
  width: 100%;
  margin-top: 1.5rem;
}
.company-profile .content > img {
  width: 45%;
  vertical-align: middle;
}
.foot-layer {
  background: #252828 url(/pagesWithHtml/assets/foot-banner.edfae5.png) no-repeat center;
  background-size: cover;
  height: 85px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}
.foot-layer > img {
  position: absolute;
}
.foot-layer .people {
  width: 14%;
  max-width: 210px;
  left: 2%;
  bottom: 0;
}
.foot-layer .text {
  width: 25%;
  max-width: 400px;
  left: 21%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.foot-layer .system {
  width: 18%;
  max-width: 250px;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.foot-layer .code {
  position: absolute;
  width: 8.5%;
  max-width: 135px;
  left: 74%;
  bottom: 4%;
  background: #252828;
  text-align: center;
  padding: 8px;
  border-radius: 5px;
}
.foot-layer .code img {
  width: 100%;
  margin-bottom: 7px;
}
.foot-layer .code p {
  color: white;
  font-size: 12px;
}
.foot-layer .icon {
  position: absolute;
  width: 13px;
  left: 91%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  html .four-steps .content {
    width: 90%;
  }
  html .four-steps .content .right-content img:last-child {
    max-height: 315px;
    width: auto;
    margin: 0 auto;
  }
  html .example .content {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  html .common-des {
    font-size: 14px;
  }
  html .banner .des {
    width: 90%;
    font-size: 14px;
  }
  html .banner .btn {
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    width: 9rem;
  }
  html .video-banner video {
    width: 90%;
    min-width: 0;
    margin-top: -70px;
  }
  html .four-steps .content {
    width: 90%;
  }
  html .four-steps .content .left-tab {
    display: block;
    width: 100%;
  }
  html .four-steps .content .left-tab ul li {
    width: 25%;
    display: table-cell;
    text-align: center;
    padding: 10px;
  }
  html .four-steps .content .left-tab ul li.active .index {
    background: #14BE4B;
    color: white;
  }
  html .four-steps .content .left-tab ul li::after {
    display: none!important;
  }
  html .four-steps .content .left-tab ul li .index {
    display: block;
    margin: 0 auto 5px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  html .four-steps .content .left-tab ul li .text {
    width: 100%;
  }
  html .four-steps .content .left-tab ul li .text .title {
    width: 100%;
    font-size: 14px;
  }
  html .four-steps .content .left-tab ul li .text .des {
    width: 100%;
    font-size: 12px;
  }
  html .four-steps .content .space {
    display: none;
  }
  html .four-steps .content .right-content {
    display: block;
    width: 100%;
    margin-top: 10px;
  }
  html .four-steps .content .right-content img:last-child {
    width: 98%;
    max-height: none;
  }
  html .smart-demo .content {
    width: 90%;
  }
  html .smart-demo .content .tab li .title {
    font-size: 14px;
  }
  html .smart-demo .content .detail .text {
    width: 100%;
    display: block;
    margin-top: 0;
  }
  html .smart-demo .content .detail .text .des {
    font-size: 14px;
  }
  html .smart-demo .content .detail .text .sub-title {
    font-size: 16px;
  }
  html .smart-demo .content .detail .text .list p {
    font-size: 14px;
  }
  html .smart-demo .content .detail img {
    width: 100%;
    margin-top: 20px;
  }
  html .example .content {
    width: 90%;
  }
  html .example .content .effect {
    display: block;
    width: 100%;
    text-align: center;
  }
  html .example .content .effect li {
    display: inline-block;
    margin-top: 0!important;
    text-align: left;
    font-size: 14px;
  }
  html .example .content .effect li:first-child {
    margin-right: 10px;
  }
  html .example .content .indicator {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
  }
  html .example .content .indicator li {
    display: block;
    width: 100%;
  }
  html .example .content .indicator li p {
    font-size: 14px;
  }
  html .clients-comment .content {
    width: 90%;
  }
  html .clients-comment .content .video {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  html .clients-comment .content .video video {
    width: 100%;
  }
  html .clients-comment .content .client-comment {
    width: 100%;
    margin-top: 1rem;
  }
  html .clients-comment .content .client-comment .swiper-slide .client {
    font-size: 14px;
  }
  html .clients-comment .content .client-comment .swiper-slide .des {
    font-size: 12px;
  }
  html .clients-comment .content .logos {
    width: 100%;
    padding-left: 0;
  }
  html .company-profile .content {
    width: 90%;
  }
  html .company-profile .content .detail {
    width: 100%;
  }
  html .company-profile .content .detail .introduction .title {
    font-size: 16px;
  }
  html .company-profile .content .detail .introduction .des {
    font-size: 14px;
  }
  html .company-profile .content .gaia {
    display: block;
    margin: 0 auto;
    width: 65%;
    margin-top: 1rem;
  }
  html .foot-layer {
    display: none;
  }
  html .willing-form {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  html .willing-form #willingForm {
    position: absolute;
    width: 90%;
    background: white;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    border-radius: 10px;
  }
  html body div.mobile-contact > .contact-service {
    display: block;
  }
}
.willing-form {
  display: none;
}