@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 18px;
  }
  html .features .swiper-father {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }
  html .features {
    margin-top: 2.92rem;
  }
  html .features .swiper-father {
    width: 100%;
  }
  html .features .features-content {
    width: 90%;
  }
  html .features .features-content .features-list .features-li,
  html .features .features-content .features-list .featuresMore-li {
    width: 25%;
  }
  html .features .features-content .features-list .swiper-slide {
    width: 25%!important;
  }
}
@font-face {
  font-family: 'cloud';
  src: url(../fonts/cloud.65932b.woff);
}
@font-face {
  font-family: 'cloudMore';
  src: url(../fonts/cloudmore.7d298e.woff);
}
@font-face {
  font-family: 'payroll';
  src: url(../fonts/payroll.d32826.woff);
}
.features {
  margin-top: 70px;
  background: #fafbfc;
  box-shadow: 0px 5px 20px 0px rgba(25, 57, 48, 0.08);
}
.features .swiper-father {
  width: 82%;
  margin: auto;
  position: relative;
}
.features .features-content {
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
  padding: 1.38rem 0 1rem;
  text-align: center;
}
.features .features-content .features-list {
  margin-bottom: -1rem;
}
.features .features-content .features-list .features-li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-bottom: 1rem;
}
.features .features-content .features-list .features-li > a {
  display: inline-block;
}
.features .features-content .features-list .features-li > a > .img {
  font-family: cloud;
  font-size: 41px;
  color: #23292e;
}
.features .features-content .features-list .features-li > a > .img.payroll {
  font-family: payroll;
}
.features .features-content .features-list .features-li > a > .text {
  padding-top: 0.63rem;
  font-size: 0.58rem;
  font-weight: 400;
  color: #23292e;
  line-height: 0.83rem;
}
.features .features-content .features-list .features-li > a:hover > .text,
.features .features-content .features-list .features-li > .active > .text,
.features .features-content .features-list .features-li > a:hover > .img,
.features .features-content .features-list .features-li > .active > .img {
  color: #14be4b;
}
.features .features-content .features-list .featuresMore-li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-bottom: 1rem;
}
.features .features-content .features-list .featuresMore-li > a {
  display: inline-block;
}
.features .features-content .features-list .featuresMore-li > a > .img {
  font-family: cloudMore;
  font-size: 41px;
  color: #23292e;
}
.features .features-content .features-list .featuresMore-li > a > .text {
  padding-top: 0.63rem;
  font-size: 0.58rem;
  font-weight: 400;
  color: #23292e;
  line-height: 0.83rem;
}
.features .features-content .features-list .featuresMore-li > a:hover > .text,
.features .features-content .features-list .featuresMore-li > .active > .text,
.features .features-content .features-list .featuresMore-li > a:hover > .img,
.features .features-content .features-list .featuresMore-li > .active > .img {
  color: #14be4b;
}
.features .features-content .features-list .swiper-slide {
  width: 12.5%;
}
.cloud-btn-left {
  background-image: none!important;
  width: 31px;
  height: 31px!important;
  border-top: 2px solid #969B9A;
  border-right: 2px solid #969B9A;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.cloud-btn-right {
  background-image: none!important;
  width: 31px;
  height: 31px!important;
  border-top: 2px solid #969B9A;
  border-right: 2px solid #969B9A;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}