.wrapper {
  height: 100vh;
  width: 100%;
  min-width: 5.20833rem;
  background: #FFF;
  display: table;
}
.wrapper .container {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.wrapper .container .img {
  margin: 0 auto;
}
.wrapper .container .img.bgImg {
  width: 3.64583rem;
  height: 2.34375rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.wrapper .container .img.bgImg.img404 {
  background-image: url(/static/imgs/404.png);
}
.wrapper .container .img.bgImg.img500 {
  background-image: url(/static/imgs/500.png);
}
.wrapper .container .tips {
  height: 0.11458rem;
  line-height: 0.11458rem;
  font-size: 0.08333rem;
  font-weight: 400;
  color: #666;
  text-align: center;
}
.wrapper .container .tips .back {
  color: #1890ff;
  transition: color 400ms ease;
}
.wrapper .container .tips .back:hover {
  color: #5cabf5;
}

.mouse {
  position: absolute;
  bottom: 0.25521rem;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.mouse .mouse-body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mouse-icon {
  display: block;
  width: 0.10938rem;
  height: 0.15104rem;
  background-image: url(https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/mouse-icon.png);
  background-size: 100% 100%;
}
.mouse-text {
  color: #ffffff;
  font-size: 0.07292rem;
  margin-left: 0.05208rem;
}

.about {
  background-color: #f8f8f8;
}
.about-banner {
  position: relative;
  width: 100%;
  height: 5.10417rem;
  background-image: url("https://chargespot.oss-accelerate.aliyuncs.com/chargespot/img_about_us.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.about-banner > h1 {
  margin: 0;
  padding-top: 1.45833rem;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.35417rem;
  line-height: 0.46875rem;
  margin-right: 0.15625rem;
}
.about-banner > p {
  text-align: center;
  color: #ffffff;
  font-size: 0.08333rem;
  margin-top: 0.07813rem;
  line-height: 0.11458rem;
  letter-spacing: 0.09375rem;
}
.about-company {
  position: relative;
  width: 100%;
  height: 3.69792rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 0.41146rem;
  box-sizing: border-box;
}
.about-company-img {
  width: 3.16667rem;
  height: 2.25521rem;
  background-image: url("https://chargespot.oss-accelerate.aliyuncs.com/chargespot/img_us.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.about-company-body {
  margin-right: 0.35417rem;
  color: #333333;
}
.about-company-body-title {
  font-size: 0.25rem;
  font-weight: bold;
  line-height: 0.34896rem;
  margin-bottom: 0.15625rem;
}
.about-company-body-content {
  width: 2.85417rem;
  margin-bottom: 0.13021rem;
  font-size: 0.08333rem;
  line-height: 0.14583rem;
  color: #323237;
}
.about-company-body-content.last {
  margin-bottom: 0;
}
.about-company-body-split {
  height: 0.02083rem;
  width: 0.15625rem;
  background: #0591b4;
  margin-top: 0.07813rem;
}
.development {
  position: relative;
  width: 100%;
  height: 4.58333rem;
  background-image: url("/static/img/develop-history2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.development-body {
  color: #FFFFFF;
  text-align: center;
  padding-top: 0.36458rem;
}
.development-body > img {
  width: 1.81771rem;
  height: 0.25521rem;
}
.development-body-title {
  font-size: 0.1875rem;
  margin-top: 0.04688rem;
}
.contact-us {
  padding-top: 0.52083rem;
  padding-bottom: 0.57292rem;
}
.contact-us-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-us-logo > img {
  width: 1.35417rem;
  height: 0.25521rem;
  margin-right: 0.0625rem;
  margin-top: 0.07813rem;
}
.contact-us-logo > span {
  font-size: 0.23958rem;
  color: #404040;
  letter-spacing: 0.01563rem;
}
.contact-us .common-title-sub {
  font-size: 0.1875rem;
  margin-top: 0.04688rem;
  letter-spacing: 0.01042rem;
}
.contact-us-line {
  margin-top: 0.15625rem;
}
.contact-us-line.max {
  margin-top: 0.3125rem;
}
.contact-us-line.max > .contact-us-line-body {
  padding: 0.20833rem;
  background: #FFFFFF;
  box-shadow: 0 0.01042rem 0.10417rem 0 rgba(0, 0, 0, 0.14);
}
.contact-us-line.max .contact-us-line-right {
  margin-left: 0.27604rem;
}
.contact-us-line-body {
  width: 6.25rem;
  padding: 0.20833rem 0 0.20833rem 0.48438rem;
  box-sizing: border-box;
  margin: auto;
}
.contact-us-line-body.border {
  border-bottom: 0.00521rem solid #DDDDDD;
}
.contact-us-line-left {
  width: 1.07292rem;
  font-size: 0.11458rem;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
}
.contact-us-line-left-logo {
  width: 0.17708rem;
  height: 0.18229rem;
  display: inline-block;
  background-image: url("/static/img/about-logo.png");
  background-size: 100% 100%;
  margin-right: 0.08333rem;
}
.contact-us-line-left.big {
  font-size: 0.15625rem;
  line-height: 0.20833rem;
}
.contact-us-line-right {
  flex: 1;
  margin-top: 0.25521rem;
}
.contact-us-line-right-line {
  display: flex;
  min-height: 0.15625rem;
  align-items: center;
}
.contact-us-line-right-line.big {
  position: relative;
  margin-bottom: 0.15625rem;
  min-height: 0.20833rem;
}
.contact-us-line-right-line.big.tel-line {
  margin-bottom: 0;
}
.contact-us-line-right-line.big.address {
  height: 0.39063rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-us-line-right-line.big.address :first-child {
  margin-bottom: 0.07813rem;
}
.contact-us-line-right-line.big > .tel-icon {
  width: 0.08333rem;
}
.contact-us-line-right-line.big > img {
  width: 0.07292rem;
  height: 0.09375rem;
}
.contact-us-line-right-line.big > span {
  font-size: 0.10417rem;
  color: #666666;
  line-height: 0.15104rem;
  margin-left: 0.15104rem;
}
.contact-us-line-right-line.big > span.tel {
  font-size: 0.10417rem;
  background: linear-gradient(-90deg, #13d1a8 0%, #23b7e4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0.01563rem;
  margin-left: 0.14583rem;
}
.contact-us-line-right-line.big .address_pazhou {
  margin-left: 0.22396rem;
}
.contact-us-line-right-line > img {
  width: 0.07292rem;
  height: 0.09375rem;
}
.contact-us-line-right-line > span {
  font-size: 0.10417rem;
  color: #666666;
  line-height: 0.15104rem;
  margin-left: 0.15104rem;
}

.new-video {
  position: fixed;
  display: none;
  width: 6.25rem;
  height: 3.125rem;
  z-index: 99;
  top: 17%;
  left: 22.8%;
}
.new-video .new-video-box {
  background: #000000;
  position: relative;
}
.new-video .new-video-box > .video-react-controls-enabled {
  padding-top: 50% !important;
}
.new-video .new-video-box > .video-react-controls-enabled .video-react-big-play-button {
  display: none;
}
.new-video .new-video-box > .react-video {
  width: 100%;
  height: 100%;
}
.new-video .new-video-box > .video_play {
  width: 0.3125rem;
  height: 0.3125rem;
  background-image: url("/static/img/video_close.png");
  background-size: cover;
  position: absolute;
  top: -0.14583rem;
  right: -0.35417rem;
}
#detail-swiper {
  position: relative;
  width: 6.25rem;
  height: 1.10417rem;
  margin: 0 auto;
  padding: 0.20833rem 0.46875rem;
}
.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-container .swiper-slide {
  text-align: center;
  font-size: 0.09375rem;
  background: #fff;
}
.swiper-container .swiper-slide-card {
  width: 100%;
}
.swiper-container .swiper-slide-card .card-swiper-img {
  width: 100%;
  height: 0.78125rem;
  margin-bottom: 0.08333rem;
}
.swiper-container .swiper-slide-card .new-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-container .swiper-slide-card .new-box .video-play {
  width: 0.15625rem;
  height: 0.15625rem;
  position: absolute;
  top: 35%;
  left: 44.5%;
}
.swiper-container .swiper-slide-card > p {
  padding: 0 0.25521rem 0 0.09896rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swiper-button-prev,
.swiper-button-next {
  width: 0.27083rem;
  height: 0.27083rem;
  border: 0.01042rem solid #00a2ff;
  border-radius: 50%;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 0.13542rem;
  font-weight: bold;
}

.detail {
  padding: 0.625rem 0 0.20833rem;
  background: #F9F9F9;
}
.detail .detail-content {
  width: 6.25rem;
  margin: 0 auto;
}
.detail .detail-content-tab {
  font-size: 0.09896rem;
  color: #333333;
  padding: 0.15625rem 0;
}
.detail .detail-content-tab > a {
  color: #999999;
}
.detail .detail-content-body {
  background: #ffffff;
  box-shadow: 0 0.03125rem 0.05208rem 0 rgba(0, 168, 255, 0.06);
}
.detail .detail-content-body-head {
  border-bottom: 0.00521rem solid #DDDDDD;
  padding-left: 0.56771rem;
  padding-top: 0.20833rem;
}
.detail .detail-content-body-head-title {
  font-size: 0.16667rem;
  color: #323237;
}
.detail .detail-content-body-head-type {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.08333rem;
  margin: 0.20833rem 0 0.13021rem 0;
}
.detail .detail-content-body-head-type .using-type {
  padding: 0.02604rem 0.05208rem 0.02083rem 0.05208rem;
  text-align: center;
  border: 0.00521rem solid #2C84FA;
  border-radius: 0.02083rem;
  color: #2C84FA;
}
.detail .detail-content-body-head-type .using-send {
  margin: 0 0.26042rem;
  display: flex;
  align-items: center;
}
.detail .detail-content-body-head-type .using-send > img {
  width: 0.06771rem;
  height: 0.07292rem;
  margin-right: 0.05208rem;
}
.detail .detail-content-body-head-type .using-time {
  display: flex;
  align-items: center;
}
.detail .detail-content-body-head-type .using-time > img {
  width: 0.06771rem;
  height: 0.07292rem;
  margin-right: 0.04167rem;
}
.detail .detail-content-body-main {
  padding: 0.26042rem 0.56771rem;
  font-size: 0.09375rem;
}
.detail .detail-content-body-main > img {
  width: 100%;
  margin: 0.10417rem 0;
}

.experience .experience-head {
  background: #000;
  height: 0.26042rem;
}
.experience .experience-banner-test {
  font-size: 0.08333rem;
  color: #000000;
}
.experience .experience-banner-one {
  padding-top: 0.52083rem;
  text-align: center;
  position: relative;
}
.experience .experience-banner-one .common-flex > img {
  height: 0.35938rem;
  width: 2.52083rem;
  margin-top: 0.71875rem;
}
.experience .experience-banner-one-top {
  height: 10.26042rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-1@2x.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
.experience .experience-banner-one-btn {
  width: 1.61458rem;
  height: 0.25rem;
  background: linear-gradient(-90deg, #0bfc6e, #63def5);
  border-radius: 0.125rem;
  color: #ffffff;
  font-size: 0.10417rem;
  margin: 0.20313rem auto;
}
.experience .experience-banner-one .common-title-sub {
  color: #000000;
  font-size: 0.3125rem;
  font-weight: bold;
}
.experience .video-bg {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-bg@2x.png");
  background-size: cover;
}
.experience .experience-banner-two {
  padding: 0.72917rem 0 1.26042rem 0;
  position: relative;
}
.experience .experience-banner-two > .device-img {
  display: block;
  width: 1.78125rem;
  height: 0.23958rem;
  margin: 0 auto;
  margin-bottom: 0.05208rem;
}
.experience .experience-banner-two .video-title {
  font-size: 0.33333rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.experience .experience-banner-two .video-wrap {
  padding-top: 0.44271rem;
}
.experience .experience-banner-two .video-wrap .video-react-play-progress:before {
  top: -0.45em;
}
.experience .experience-banner-two .video-wrap .video-react-progress-control:hover .video-react-play-progress:before {
  top: -0.33333333em;
}
.experience .experience-banner-two .video-wrap .video-react-big-play-button {
  display: none;
}
.experience .experience-banner-two .video-wrap .video-box {
  position: relative;
  width: 6.25rem;
  height: 3.125rem;
  border-radius: 0.07813rem;
  margin: 0 auto;
}
.experience .experience-banner-two .video-wrap .video-box .video-box-mask {
  position: absolute;
  width: 100%;
  height: 2.96875rem;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6;
  cursor: pointer;
}
.experience .experience-banner-two .video-wrap .video-box .video-box-mask .video-box-play-btn {
  width: 0.28646rem;
  height: 0.28646rem;
}
.experience .experience-banner-two .video-wrap .video-box .video-react {
  border-radius: 0.07813rem;
  padding-top: 0 !important;
  height: 3.125rem;
}
.experience .experience-banner-two .video-wrap .video-box .video-react .video-react-big-play-button {
  width: 0.41667rem;
  height: 0.41667rem;
  border-radius: 50%;
  background: none;
  border: 0.01042rem solid #00aaee;
}
.experience .experience-banner-two .video-wrap .video-box .video-react .video-react-big-play-button::before {
  top: 0.05208rem;
  font-size: 0.23438rem;
  color: #00aaee;
}
.experience .experience-banner-two .video-wrap .video-box .video-react .video-react-video {
  border-radius: 0.07813rem;
}
.experience .experience-banner-two .video-wrap .video-box .video-react-has-started .video-react-control-bar {
  border-radius: 0 0 0.07813rem 0.07813rem;
}
.experience .experience-banner-three-body {
  width: 8.80208rem;
  padding-bottom: 0.36458rem;
  position: relative;
  margin: 0 auto;
}
.experience .experience-banner-three-body .shadow {
  width: 100%;
  height: 100%;
  background: #985AED;
  opacity: 0.83;
  position: absolute;
}
.experience .experience-banner-three-top {
  padding: 0.72917rem 0.41667rem;
  justify-content: space-between;
}
.experience .experience-banner-three-top-right {
  width: 1.53646rem;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 1;
}
.experience .experience-banner-three-top-right-item {
  width: 0.71354rem;
  height: 0.71354rem;
  border-radius: 0.10417rem;
  margin-bottom: 0.10417rem;
  z-index: 1;
}
.experience .experience-banner-three-top-right-item > img {
  width: 100%;
  height: 100%;
}
.experience .experience-banner-three-top-left .experience-banner-logo .logo5 {
  width: 2.05729rem;
  height: 0.29688rem;
}
.experience .experience-banner-three-top .experience-banner-logo {
  z-index: 1;
}
.experience .experience-banner-three-top .experience-banner-test {
  z-index: 1;
  font-size: 0.41667rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.07292rem 0 0.22917rem 0;
}
.experience .experience-banner-three-top .experience-banner-test-small {
  font-size: 0.10417rem;
  color: #ffffff;
  z-index: 1;
}
.experience .experience-banner-three-list {
  z-index: 99;
}
.experience .experience-banner-three-list-item {
  padding-bottom: 0.44271rem;
  position: relative;
  height: 2.44792rem;
  background-size: cover;
}
.experience .experience-banner-three-list-item .left {
  width: 2.92708rem;
  height: 2.17708rem;
  background: #FFFFFF;
  padding: 0.44271rem 0 0 0.44271rem;
  position: absolute;
  left: 0;
  top: 0.13021rem;
  box-sizing: border-box;
  transition: all 0.8s linear;
}
.experience .experience-banner-three-list-item .left .location {
  font-size: 0.23958rem;
  color: #2B2B2B;
  font-weight: 800;
  display: flex;
  position: relative;
}
.experience .experience-banner-three-list-item .left .location .dingwei-icon {
  display: inline-block;
  width: 0.22917rem;
  height: 0.33854rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fhongkong.png");
  background-size: 100% 100%;
  margin-right: 0.06771rem;
  z-index: 99;
}
.experience .experience-banner-three-list-item .left .location .dingwei-icon.hk-icon {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fhongkong.png");
}
.experience .experience-banner-three-list-item .left .location .dingwei-icon.dj-icon {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fdongjing.png");
}
.experience .experience-banner-three-list-item .left .location .dingwei-icon.tw-icon {
  background-image: url("/static/img/taiwang.png");
}
@keyframes ripple {
  0% {
    top: 0.22396rem;
    left: 0.07813rem;
    width: 0.0625rem;
    height: 0.0625rem;
  }
  100% {
    left: -0.02604rem;
    top: 0.13021rem;
    opacity: 0.05;
    width: 0.25rem;
    height: 0.25rem;
  }
}
.experience .experience-banner-three-list-item .left .tips {
  width: 2.09375rem;
  height: 0.32292rem;
  border: 0.00521rem #985AED solid;
  margin: 0.11458rem 0;
  font-size: 0.14583rem;
  color: #985AED;
  text-align: center;
  line-height: 0.32292rem;
}
.experience .experience-banner-three-list-item .left .join {
  font-size: 0.17708rem;
  width: 2.39583rem;
}
.experience .experience-banner-three-list-item .left1 {
  transform: translateX(0.44271rem);
}
.experience .experience-banner-three-list-item.one .right {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-5.png");
}
.experience .experience-banner-three-list-item.two .right {
  left: 0;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-6.png");
}
.experience .experience-banner-three-list-item.two .left {
  left: auto;
  right: 0;
}
.experience .experience-banner-three-list-item.three .right {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-7.png");
}
.experience .experience-banner-three-list-item .right {
  width: 5.16667rem;
  height: 2.44792rem;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  transition: all 0.8s linear;
}
.experience .experience-banner-three-list-item .right1 {
  transform: translateX(-0.44271rem);
}
.experience .experience-banner-four {
  height: 4.79167rem;
  color: #FFFFFF;
  text-align: center;
  padding-top: 0.88542rem;
  box-sizing: border-box;
  position: relative;
}
.experience .experience-banner-four-text1 {
  font-size: 0.33333rem;
  font-weight: 800;
}
.experience .experience-banner-four-text2 {
  font-size: 0.16667rem;
  margin: 0.125rem 0 0.07292rem 0;
}
.experience .experience-banner-four-text3 {
  font-size: 0.08333rem;
  margin-bottom: 0.41667rem;
}
.experience .experience-banner-four-list-item {
  color: #454545;
  width: 1.19792rem;
  height: 1.41667rem;
  border-radius: 0.07813rem;
  margin-right: 0.06771rem;
  align-items: center;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(102, 102, 102, 0.1);
}
.experience .experience-banner-four-list-item .pay-img {
  font-size: 0.11458rem;
  color: #ccc;
  height: 0.41667rem;
  line-height: 0.41667rem;
}
.experience .experience-banner-four-list-item .pay-img > img {
  width: 0.41667rem;
  height: 0.41667rem;
}
.experience .experience-banner-four-list-item .pay-name {
  margin: 0.14583rem 0 0.11458rem 0;
  font-size: 0.11458rem;
}
.experience .experience-banner-four-list-item .common-btn-bd,
.experience .experience-banner-four-list-item .common-btn-bg {
  width: 0.58854rem;
  height: 0.25rem;
  border-radius: 0.125rem;
}
.experience .experience-banner-four-list-item .common-btn-bd > button,
.experience .experience-banner-four-list-item .common-btn-bg > button {
  width: 0.58854rem;
  height: 0.25rem;
  border-radius: 0.125rem;
}
.experience .experience-banner-four-list-item .common-btn-bg {
  background: linear-gradient(90deg, #73f3ff, #6032f9, #c317ff);
}
.experience .experience-banner-four-list-item .flipped {
  transform-style: preserve-3d;
  transition: transform 1s;
}
.experience .experience-banner-four-list-item .front {
  width: 1.19792rem;
  height: 1.41667rem;
  background: #ffffff;
  border-radius: 0.07813rem;
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  align-items: center;
}
.experience .experience-banner-four-list-item .back {
  width: 1.19792rem;
  height: 1.41667rem;
  background: #ffffff;
  border-radius: 0.07813rem;
  position: absolute;
  align-items: center;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
}
.experience .experience-banner-five {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fexperience-8.png");
  background-size: cover;
  height: 4.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: 1.05729rem;
  margin-bottom: 0.17708rem;
}
.experience .experience-banner-five .common-title {
  color: #ffffff;
  margin-bottom: 0.13542rem;
}
.experience .experience-banner-five-logo {
  color: #ffffff;
  display: flex;
  font-size: 0.29167rem;
  align-items: center;
  margin-bottom: 0.13542rem;
  font-weight: 200;
}
.experience .experience-banner-five-logo > img {
  width: 1.86458rem;
  height: 0.3125rem;
  margin-right: 0.07813rem;
  margin-top: 0.05208rem;
}
.experience .experience-banner-five-text {
  font-size: 0.34375rem;
  color: #ffffff;
  opacity: 1;
  line-height: 0.44271rem;
}
.experience .experience-banner-five .change-text {
  transform: translate(-50%, -50%);
  animation: change 5s;
  -moz-animation: change 5s;
  -webkit-animation: change 5s;
  -o-animation: change 5s;
  opacity: 1;
}
@keyframes change {
  from {
    font-size: 0.0625rem;
    opacity: 0;
    bottom: 0;
  }
  to {
    font-size: 0.34375rem;
    opacity: 1;
    bottom: 1.66667rem;
  }
}
.experience .experience-banner-five-btn {
  width: 0.64583rem;
  height: 0.25rem;
  background: #ffffff;
  color: #454545;
  box-shadow: 0 0.02604rem 0.03125rem 0 rgba(0, 168, 255, 0.24);
  border-radius: 0.125rem;
  font-size: 0.09375rem;
  margin-top: 0.20833rem;
}

.join {
  background: #fff;
}
.join .common-title {
  display: block;
  font-size: 0.29167rem;
}
.join .common-title-sub {
  color: #000000;
  font-size: 0.14583rem;
}
.join-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Ffriend-banner1.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  align-items: center;
}
.join-banner-logo {
  display: flex;
  align-items: center;
  margin-right: 0.15625rem;
}
.join-banner-logo > img {
  width: 1.43229rem;
  height: 0.26042rem;
  margin-top: 0.05208rem;
  margin-right: 0.02604rem;
}
.join-banner-logo > span {
  color: #FFFFFF;
  font-size: 0.20833rem;
}
.join-banner .common-btn {
  display: flex;
  padding: 0.07813rem 0.26563rem;
  background: linear-gradient(-90deg, #0bfc6e, #63def5);
  border-radius: 0.28125rem;
  font-size: 0.09375rem;
  color: #ffffff;
  align-items: center;
  margin-bottom: 0.16667rem;
}
.join-banner > h1 {
  margin: 0;
  padding-top: 0.28646rem;
  padding-bottom: 0.21875rem;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.41667rem;
}
.join-banner > h1 > span {
  font-size: 0.22917rem;
}
.join-banner > p {
  text-align: center;
  color: #ffffff;
  font-size: 0.08333rem;
  margin-top: 0.07813rem;
  line-height: 0.11458rem;
  letter-spacing: 0.09375rem;
}
.join-banner-more {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 0.25rem;
  line-height: 0.25rem;
  background: linear-gradient(30deg, #FF1C41, #8B2981);
  color: #ffffff;
  font-size: 0.07292rem;
  font-weight: bold;
  text-align: center;
}
.join-banner-more .more-btn {
  margin: 0 0.20833rem 0 0.98958rem;
}
.join-banner-more.disappear {
  animation: disappear 3s;
  -moz-animation: disappear 3s;
  -webkit-animation: disappear 3s;
  -o-animation: disappear 3s;
  opacity: 0;
}
@keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#fuwu {
  padding-bottom: 0.17708rem;
}
.advantage-details {
  width: 8.48958rem;
  padding-top: 0.52604rem;
  margin: 0 auto;
  position: relative;
}
.advantage-details-item {
  margin-top: 0.38542rem;
  position: relative;
}
.advantage-details-item .point-list {
  color: #FFFFFF;
  position: relative;
  display: none;
  transition: all 0.5s;
}
.advantage-details-item .point-list.show {
  display: block;
}
.advantage-details-item .point-list-item {
  position: absolute;
  align-items: center;
  opacity: 0;
  transition: all 0.5s;
}
.advantage-details-item .point-list-item .hidden-item {
  display: none;
}
.advantage-details-item .point-list-item.show-country {
  animation: fade_In 0.8s forwards;
}
@keyframes fade_In {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.advantage-details-item .point-list-item > .point-icon {
  width: 0.11979rem;
  height: 0.14583rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fpoint2@2x.png");
  background-size: 100% 100%;
  margin-right: 0.02604rem;
  transition: transform 0.3s linear;
}
.advantage-details-item .point-list-item > .place-name {
  font-size: 0.08333rem;
}
.advantage-details-item .point-list-item:nth-child(1) {
  left: 3.88021rem;
  top: -2.1875rem;
}
.advantage-details-item .point-list-item:nth-child(2) {
  left: 4.16667rem;
  top: -2.36979rem;
}
.advantage-details-item .point-list-item:nth-child(3) {
  left: 3.61979rem;
  top: -1.97917rem;
}
.advantage-details-item .point-list-item:nth-child(4) {
  left: 4.0625rem;
  top: -2.55208rem;
}
.advantage-details-item .point-list-item:nth-child(5) {
  left: 4.76563rem;
  top: -2.52604rem;
}
.advantage-details-item .point-list-item:nth-child(6) {
  left: 3.67188rem;
  top: -1.75521rem;
}
.advantage-details-item .point-list-item:nth-child(7) {
  left: 3.89583rem;
  top: -1.625rem;
}
.advantage-details-item .friend-item-dot {
  position: absolute;
  display: none;
  top: 0.96354rem;
  left: 3.33854rem;
  transition: all 0.5s;
}
.advantage-details-item .friend-item-dot.show {
  display: block;
}
.advantage-details-item .friend-dot:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(-90deg, #3296fa, #3350ee);
  opacity: 0.12;
  border-radius: 50%;
  top: -0.76042rem;
  left: -0.88542rem;
  -webkit-animation: ripple3 3s linear 0s infinite normal;
  animation: ripple3 3s linear 0s infinite normal;
}
.advantage-details-item .friend-dot2:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(-90deg, #3296fa, #3350ee);
  opacity: 0.2;
  border-radius: 50%;
  top: -0.76042rem;
  left: -0.88542rem;
  -webkit-animation: ripple3 3s 1s linear infinite normal;
  animation: ripple3 3s linear 1s infinite normal;
}
.advantage-details-item .friend-dot3:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(-90deg, #3296fa, #3350ee);
  opacity: 0.2;
  border-radius: 50%;
  top: -0.76042rem;
  left: -0.88542rem;
  animation: ripple3 3s linear 2s infinite normal;
  -webkit-animation: ripple3 3s 2s linear infinite normal;
}
@keyframes ripple3 {
  0% {
    top: 1.14583rem;
    left: 0.83333rem;
    width: 0.3125rem;
    height: 0.3125rem;
  }
  100% {
    top: -0.76042rem;
    left: -0.88542rem;
    opacity: 0;
    width: 3.90625rem;
    height: 3.90625rem;
  }
}
.advantage-details-item-left {
  box-sizing: border-box;
  width: 10rem;
  background-size: auto 100%;
  background-position: center left;
  background-repeat: no-repeat;
  transition: all 0.2s;
  border-radius: 0.07813rem;
  overflow: hidden;
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fright-market.png);
}
.advantage-details-item-left-list {
  margin: 0;
  position: relative;
}
.advantage-details-item-left-list.list2 .advantage-details-item-left-list-item {
  background: rgba(0, 0, 0, 0.38);
}
.advantage-details-item-left-list .gradient-bg {
  background: linear-gradient(-25deg, #0350fb, #804fda) !important;
  opacity: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all 0.5s;
}
.advantage-details-item-left-list .gradient-bg > .triangle {
  border: 0.09375rem solid;
  border-color: transparent transparent transparent #0350fb;
  transform: translateX(0.17188rem);
}
.advantage-details-item-left-list-item {
  color: #ffffff;
  background: rgba(13, 13, 13, 0.5);
  height: 1.32292rem;
  width: 2.73438rem;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  transition: transform 0.2s linear;
}
.advantage-details-item-left-list-item.active .icon.market {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fmarketed.png");
}
.advantage-details-item-left-list-item.active .icon.safe {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fsafed.png");
}
.advantage-details-item-left-list-item.active .icon.dingwei {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fdingweied.png");
}
.advantage-details-item-left-list-item .icon {
  width: 0.44792rem;
  height: 0.44792rem;
  border: 0.01042rem solid #FFFFFF;
  border-radius: 50%;
  background-size: 105% 105%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.5s linear;
  opacity: 1;
  z-index: 9;
}
.advantage-details-item-left-list-item .icon.market {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fmarket.png");
}
.advantage-details-item-left-list-item .icon.safe {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fsafe.png");
}
.advantage-details-item-left-list-item .icon.dingwei {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fdingwei.png");
}
.advantage-details-item-left-list-item .text {
  font-size: 0.125rem;
  margin-top: 0.10417rem;
  z-index: 9;
}
.advantage-details-item-left-list .two {
  box-sizing: border-box;
}
.advantage-details-item-right {
  border-radius: 0 0.07813rem 0.07813rem 0;
  overflow: hidden;
  position: relative;
  width: 5.75521rem;
}
.advantage-details-item-right > img {
  width: 5.75521rem;
  height: 3.96875rem;
  position: absolute;
}
.advantage-details-item-right .show {
  animation: activeImg 0.5s linear;
  z-index: 88;
}
@keyframes activeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.advantage-details-item-right .hide {
  animation: unActiveImg 0.5s linear;
  -moz-animation: unActiveImg 2s;
  -webkit-animation: unActiveImg 2s;
  -o-animation: unActiveImg 2s;
}
@keyframes unActiveImg {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.advantage-details .home-banner-two {
  width: 8.48958rem;
  text-align: center;
  background: #F6F6F6;
  margin: 0 auto;
  box-shadow: 0 0.04167rem 0.10417rem 0 #EBF4F8;
  padding: 0.50521rem 0;
  margin-top: 0.41667rem;
  border-radius: 0.07813rem;
}
.advantage-details .home-banner-two-list {
  display: flex;
  justify-content: center;
  position: relative;
}
.advantage-details .home-banner-two-list-bg {
  width: 1.63542rem;
  height: 100%;
  position: absolute;
  border-radius: 0.08333rem;
  top: 0;
  left: 19.2%;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  background: linear-gradient(0deg, rgba(0, 154, 217, 0.8), rgba(0, 184, 255, 0.8));
  box-shadow: 0 0 0.125rem 0 rgba(8, 1, 3, 0.2);
}
.advantage-details .home-banner-two-list-item {
  width: 1.63542rem;
  padding: 0.22396rem 0 0.23958rem 0;
  margin-right: 0.10417rem;
  border-radius: 0.08333rem;
  z-index: 99;
  transition: all 0.5s;
}
.advantage-details .home-banner-two-list-item > .xuhao {
  width: 0.20833rem;
  height: 0.17188rem;
  margin: 0 auto;
  background-size: 100% 100%;
  transition: all 0.5s;
}
.advantage-details .home-banner-two-list-item > .xuhao.xuhao1 {
  width: 0.15625rem;
  height: 0.17188rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F01-black.png");
}
.advantage-details .home-banner-two-list-item > .xuhao.xuhao2 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F02-black.png");
}
.advantage-details .home-banner-two-list-item > .xuhao.xuhao3 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F03-black.png");
}
.advantage-details .home-banner-two-list-item-text1 {
  font-size: 0.10417rem;
  margin: 0.10417rem 0 0.11458rem 0;
}
.advantage-details .home-banner-two-list-item-text2 {
  font-size: 0.05208rem;
  display: inline-block;
  padding: 0.03646rem 0.14583rem 0.03646rem 0.14063rem;
  margin: 0 auto;
  background: #ffffff;
  border: 0.00521rem solid #cccccc;
  border-radius: 0.03646rem;
  color: #454545;
  transition: all 0.5s;
  transform: s;
}
.advantage-details .home-banner-two-list-item-text3 {
  display: inline-block;
  font-size: 0.0625rem;
  color: #666666;
  padding: 0.19271rem 0.10938rem 0.07813rem 0.10938rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 0.05208rem;
  border-bottom: 0.00521rem solid #D9D9D9;
  transition: all 0.5s;
}
.advantage-details .home-banner-two-list-item-text4 {
  font-size: 0.0625rem;
  color: #666666;
  line-height: 0.125rem;
  transition: all 0.5s;
}
.advantage-details .home-banner-two-list-item-text4 > .gouxuan-iconbox {
  display: inline-block;
  margin-right: 0.05208rem;
  width: 0.09375rem;
  height: 0.0625rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fgx-green@2x(1).png");
  transition: all 0.5s;
  background-size: 100% 100%;
}
.advantage-details .home-banner-two-list-item-btn {
  padding: 0.05208rem 0.26042rem;
  background: #ffffff;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(8, 1, 3, 0.06);
  border-radius: 0.28125rem;
  font-size: 0.0625rem;
  color: #454545;
  margin-top: 0.20833rem;
}
.advantage-details .home-banner-two-list .active {
  color: #FFFFFF;
}
.advantage-details .home-banner-two-list .active .home-banner-two-list-item-text3 {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.advantage-details .home-banner-two-list .active .home-banner-two-list-item-text2 {
  border: 0.00521rem solid #fff;
}
.advantage-details .home-banner-two-list .active .home-banner-two-list-item-text4 {
  color: #FFFFFF;
}
.advantage-details .home-banner-two-list .active .home-banner-two-list-item-text4 > .gouxuan-iconbox {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fgx-whithe@2x.png");
}
.advantage-details .home-banner-two-list .active > .xuhao1 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F01-white.png");
}
.advantage-details .home-banner-two-list .active > .xuhao2 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F02-white.png");
}
.advantage-details .home-banner-two-list .active > .xuhao3 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F03-white.png");
}
.advantage-details-content {
  width: 8.48958rem;
  height: 3.95833rem;
  border-radius: 0.07813rem;
  background-size: 100% 100%;
  box-shadow: 0 0.04167rem 0.10417rem 0 #EBF4F8;
  box-sizing: border-box;
  padding: 0.58333rem 0 0 1.06771rem;
  margin-top: 0.43229rem;
  color: #ffffff;
  transition: all 0.5s;
}
.advantage-details-content .common-btn-bg {
  font-weight: 600;
  font-size: 0.09375rem;
  color: #333333;
  background: #ffffff;
  box-shadow: 0 0.05208rem 0.05208rem 0 rgba(0, 0, 0, 0.1);
  opacity: 0.7;
}
.advantage-details-content .common-btn-bg:hover {
  opacity: 1;
}
.advantage-details-content .title-small {
  font-size: 0.15625rem;
  display: flex;
  align-items: center;
}
.advantage-details-content .title-small > .logo {
  width: 1.04167rem;
  height: 0.16146rem;
  margin-top: 0.04167rem;
  margin-right: 0.02604rem;
  background-size: 100% 100%;
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fchargespot_logo_white2.png);
}
.advantage-details-content .title-big {
  font-size: 0.23958rem;
  margin: 0.13542rem 0 0.41667rem 0;
  font-weight: bold;
  color: #ffffff;
}
.advantage-details-content .common-btn-bg {
  width: 0.69792rem;
  height: 0.28125rem;
  line-height: 0.28125rem;
  text-align: center;
  border-radius: 0.14063rem;
  margin-top: 0.41146rem;
}
.advantage-details-content .common-btn-bg:hover {
  background: linear-gradient(90deg, #73f3ff, #6032f9, #c317ff);
}
.advantage-details-content-list {
  display: flex;
  align-items: center;
  height: 1.14583rem;
  width: 2.97917rem;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  position: relative;
}
.advantage-details-content-list-bg {
  position: absolute;
  width: 0.94792rem;
  height: 1.04167rem;
  top: 0.05208rem;
  left: 0;
  padding-top: 0.18229rem;
  box-sizing: border-box;
  background: linear-gradient(-25deg, #7331b7, #9b1a95);
  border-radius: 0.07813rem;
  transition: -webkit-transform 0.5s;
  transition: all 0.5s;
  transition: all 0.5s, -webkit-transform 0.5s;
}
.advantage-details-content-list-bg.bg2 {
  left: -0.04167rem;
  top: 0;
  width: 1.04167rem;
  height: 1.14583rem;
}
.advantage-details-content-list-bg.small2 {
  left: 0.08854rem !important;
}
.advantage-details-content-list-bg.small3 {
  left: 0.15625rem !important;
}
.advantage-details-content-list-bg2 {
  position: absolute;
  top: 0;
  left: -0.02604rem;
  width: 1.02083rem;
  height: 1.14583rem;
  padding-top: 0.18229rem;
  box-sizing: border-box;
  background: linear-gradient(-25deg, #7331b7, #9b1a95);
  border-radius: 0.07813rem;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  opacity: 0;
}
.advantage-details-content-list-item {
  width: 0.94792rem;
  height: 1.04167rem;
  background: #000000;
  opacity: 0.5;
  border-radius: 0.07813rem;
  color: #ffffff;
  padding: 0.13542rem 0 0 0.05208rem;
  box-sizing: border-box;
  transition: all 0.5s;
}
.advantage-details-content-list-item .test1 {
  font-size: 0.16667rem;
  width: 0.23958rem;
  border-bottom: 0.04167rem solid #73F3FF;
  padding-bottom: 0.11458rem;
  transition: all 0.5s;
}
.advantage-details-content-list-item .test1.three {
  border-bottom: 0.04167rem solid #4D53F7;
}
.advantage-details-content-list-item .test2 {
  font-size: 0.14583rem;
  margin: 0.10938rem 0 0.05729rem 0;
}
.advantage-details-content-list-item .test3 {
  font-size: 0.09375rem;
}
.advantage-details-content-list-item.active {
  z-index: 3;
  background: none;
  opacity: 1;
}
.advantage-details-content-list-item.active .test1 {
  border-bottom: 0.04167rem solid #FFFFFF;
}
.advantage-details-content .common-btn-bg {
  background: #ffffff;
  color: #333333;
  opacity: 0.76;
}
.advantage-details-content .common-btn-bg:hover {
  color: #ffffff;
}
.friend-last-banner {
  margin-bottom: 0.17708rem;
}

.card-swiper-container-wrap {
  padding: 0.30208rem 0;
  position: relative;
}
.card-swiper-container-wrap .card-swiper-container {
  position: relative;
  width: 6.25rem;
  margin: 0 auto;
}
.card-swiper-container-wrap .card-swiper-container .card-swiper-pagination {
  position: absolute;
  text-align: center;
  bottom: 0.13542rem;
  z-index: 5;
}
.card-swiper-container-wrap .card-swiper-container .card-swiper-pagination .swiper-pagination-bullet {
  width: 0.04688rem;
  height: 0.04688rem;
  margin: 0 0.0625rem;
  border: 0.01042rem solid #ffffff;
  opacity: 1;
  outline: none;
  background: transparent;
}
.card-swiper-container-wrap .card-swiper-container .card-swiper-pagination .swiper-pagination-bullet-active {
  background: #FFF;
  box-shadow: 0 0 0.01042rem 0.01042rem rgba(255, 255, 255, 0.6);
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide {
  height: 100%;
  position: relative;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card {
  background: #FFF;
  height: 3.51563rem;
  box-shadow: 0 0.02604rem 0.05208rem 0 rgba(0, 112, 192, 0.06);
  border-radius: 0.07813rem;
  padding: 0.09375rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-img,
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video {
  width: 100%;
  height: auto;
  max-height: 3.51563rem;
  border-radius: 0.07813rem;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video > .new-box {
  width: 100%;
  height: 3.51563rem;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video > .new-box .new-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 0.07813rem;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video > .new-box .video-play {
  width: 0.3125rem;
  height: 0.3125rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video > .new-box:hover {
  cursor: pointer;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video > .new-box:hover .video-play {
  opacity: 1;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video .swiper-slide-card-video {
  width: 100%;
  height: 3.51563rem;
  display: none;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video .swiper-slide-card-video > video {
  width: 100%;
  height: auto;
  background: #000000;
  border-radius: 0.07813rem;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video .video-react {
  border-radius: 0.07813rem;
  padding-top: 35% !important;
}
.card-swiper-container-wrap .card-swiper-container .swiper-wrapper .swiper-slide .card-swiper-video .video-react > .video-react-poster {
  border-radius: 0.07813rem;
}
.card-swiper-container-wrap .card-swiper-button {
  outline: none;
  top: 1.81771rem;
  position: absolute;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
  opacity: 0.8;
  width: 0.27083rem;
  height: 0.27083rem;
  border: 0.01042rem solid #00aaee;
  border-radius: 50%;
}
.card-swiper-container-wrap .card-swiper-button:hover {
  background: #00a2ff;
}
.card-swiper-container-wrap .card-swiper-button:before {
  content: "";
  width: 0.08333rem;
  height: 0.08333rem;
  position: absolute;
  border-left: 0.01042rem solid #00AAEE;
  border-bottom: 0.01042rem solid #00AAEE;
}
.card-swiper-container-wrap .card-swiper-button:hover:before {
  border-left: 0.01042rem solid #fff;
  border-bottom: 0.01042rem solid #fff;
}
.card-swiper-container-wrap .card-swiper-button.card-swiper-button-prev {
  left: -0.625rem;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
}
.card-swiper-container-wrap .card-swiper-button.card-swiper-button-prev::before {
  top: 50%;
  left: 40%;
  -webkit-transform: translate(0, -50%) rotate(40deg);
  transform: translate(0, -50%) rotate(40deg);
}
.card-swiper-container-wrap .card-swiper-button.card-swiper-button-next {
  right: -0.625rem;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}
.card-swiper-container-wrap .card-swiper-button.card-swiper-button-next::before {
  top: 50%;
  right: 40%;
  -webkit-transform: translate(0, 50%) rotate(-135deg);
  transform: translate(0, -50%) rotate(-135deg);
}

.home-banner-six {
  margin: 0 auto;
  margin: 0.10417rem 0 0 0;
  padding: 0.52083rem 0;
  background: linear-gradient(-90deg, #131844, #0f0c3a);
  position: relative;
  overflow: hidden;
}
.home-banner-six.home-banner-six-selected {
  background: #00ECFF;
}
.home-banner-six .country-info-name {
  font-size: 0.08333rem;
}
.home-banner-six .country-info-target {
  font-size: 0.0625rem;
}
.home-banner-six .home-banner-six-map {
  position: relative;
}
.home-banner-six .selected-map {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 5;
  background-image: url([object Module]);
}
.home-banner-six .selected-map.show-selected-map {
  display: block;
  animation: show 2s linear;
  -webkit-animation: show 2s linear;
}
@keyframes show {
  0% {
    transform: scale(0.00001);
  }
  100% {
    transform: scale(1);
  }
}
.home-banner-six .selected-map .selected-map-info-wrap {
  position: relative;
  height: 4.19271rem;
  margin: 0.46875rem 1.40625rem;
  padding-top: 0.38542rem;
}
.home-banner-six .selected-map-info {
  position: relative;
  display: none;
  color: #FFFFFF;
  text-align: center;
  width: 1.73438rem;
  height: 1.01042rem;
  background: #00dbf1;
  box-shadow: 0 0.01042rem 0.05729rem 0.00521rem rgba(157, 157, 157, 0.14);
  border-radius: 0.05208rem;
  padding-top: 0.10938rem;
  box-sizing: border-box;
  margin-left: 0.57292rem;
  z-index: 8;
}
.home-banner-six .selected-map-info-logo {
  align-items: center;
  z-index: 9;
}
.home-banner-six .selected-map-info-logo > img {
  width: 0.84375rem;
  height: 0.14583rem;
  margin-top: 0.02604rem;
}
.home-banner-six .selected-map-info-logo > span {
  font-size: 0.13542rem;
}
.home-banner-six .selected-map-info-count {
  font-size: 0.375rem;
  margin-bottom: 0.01042rem;
}
.home-banner-six .selected-map-info-all {
  width: 1.73438rem;
  height: 0.30729rem;
  background: #C2F6FC;
  border-radius: 0 0 0.05208rem 0.05208rem;
  color: #707070;
  text-align: left;
  align-items: center;
}
.home-banner-six .selected-map-info-all .country-emblem {
  width: 0.22917rem;
  height: 0.14583rem;
  margin-right: 0.11979rem;
}
.home-banner-six .selected-map .selected-point-list {
  position: relative;
  color: #000;
  margin: 0.20833rem 0 0 2.25rem;
}
.home-banner-six .selected-map .selected-point-list-item {
  position: absolute;
  width: 0.10417rem;
  height: 0.14063rem;
  background-size: 100% 100%;
  background-image: url("/static/img/point@2x.png");
}
.home-banner-six .selected-map .selected-point-list-country {
  position: absolute;
  display: flex;
  padding-left: 0.08333rem;
  padding-right: 0.15625rem;
  height: 0.36458rem;
  background: #ffffff;
  box-shadow: 0 0.01042rem 0.03125rem 0 rgba(0, 0, 0, 0.14);
  border-radius: 0.18229rem;
  transition: all 0.6s linear;
  top: 0.75521rem;
  left: 0.52083rem;
  align-items: center;
  z-index: 4;
}
.home-banner-six .selected-map .selected-point-list-country.Taiwan {
  top: 0.75521rem;
  left: 0.46875rem;
}
.home-banner-six .selected-map .selected-point-list-country.JAPAN {
  top: 0.72917rem;
  left: 0.39063rem;
}
.home-banner-six .selected-map .selected-point-list-country.Thailand {
  top: 0.72917rem;
  left: 0.49479rem;
}
.home-banner-six .selected-map .selected-point-list-country.JAPAN {
  top: 0.72917rem;
  left: 0.41667rem;
}
.home-banner-six .selected-map .selected-point-list-country.Macau {
  top: 0.78125rem;
  left: 0.20833rem;
}
.home-banner-six .selected-map .selected-point-list-country.KOREA {
  top: 0.83333rem;
  left: 0.26042rem;
}
.home-banner-six .selected-map .selected-point-list-country.Singapore {
  top: 0.70313rem;
  left: 0.46875rem;
}
.home-banner-six .selected-map .selected-point-list-country.Malaysia {
  top: 0.75521rem;
  left: 0.46875rem;
}
.home-banner-six .selected-map .selected-point-list-country.Indonesia {
  top: 0.78125rem;
  left: 0.15625rem;
}
.home-banner-six .selected-map .selected-point-list-country > .left {
  width: 0.27083rem;
  height: 0.32813rem;
  margin-right: 0.05208rem;
}
.home-banner-six .selected-map .selected-point-list-country > .left > img {
  width: 0.27083rem;
  height: 0.32813rem;
}
.home-banner-six .selected-map .selected-point-list-country .right {
  text-align: left;
}
.home-banner-six .selected-map .selected-point-list-country .right-name {
  font-size: 0.07813rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 0.02604rem;
  white-space: nowrap;
}
.home-banner-six .selected-map .selected-point-list-country .right-count {
  font-size: 0.125rem;
  background: linear-gradient(90deg, #40fdfb 0%, #27f03c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
}
.home-banner-six-map {
  height: 4.19271rem;
  border: 0.00521rem solid #002e82;
  border-radius: 0.05208rem;
  z-index: 8;
  position: absolute;
  margin: 0 1.40625rem;
  left: auto;
  right: auto;
  display: flex;
  overflow: hidden;
  /*定义滚动条轨道 内阴影*/
  /*定义滑块 内阴影*/
}
.home-banner-six-map .country_back_btn {
  display: none;
  border: 0.00521rem solid #00ECFF;
  border-radius: 50%;
  width: 0.26042rem;
  height: 0.26042rem;
  position: absolute;
  top: 0.05208rem;
  left: 0.05208rem;
  font-size: 0.125rem;
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fback-icon-blue.png);
  background-size: auto 60%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 77;
  transition: all 0.3;
}
.home-banner-six-map .country_back_btn:hover {
  background-color: #00ECFF;
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fback-icon-white.png);
}
.home-banner-six-map ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.03125rem rgba(0, 46, 130, 0.3);
  -webkit-box-shadow: inset 0 0 0.03125rem rgba(0, 46, 130, 0.3);
  background-color: #FFF;
  border-radius: 0.03125rem;
  -webkit-border-radius: 0.03125rem;
}
.home-banner-six-map ::-webkit-scrollbar {
  width: 0.0625rem;
  /* 纵向滚动条*/
  background-color: #FFF;
  border-radius: 0.03125rem;
  -webkit-border-radius: 0.03125rem;
}
.home-banner-six-map ::-webkit-scrollbar-corner {
  border-radius: 0.03125rem;
}
.home-banner-six-map ::-webkit-scrollbar-thumb {
  position: relative;
  border-radius: 0.03125rem;
  box-shadow: inset 0 0 0.03125rem rgba(0, 0, 0, 0);
  -webkit-box-shadow: inset 0 0 0.03125rem rgba(0, 0, 0, 0);
  background-color: #002E82;
}
.home-banner-six-map.select-map-box {
  border: 0.00521rem solid #f2f2f2;
  border-right: none;
  border-radius: 0.05208rem;
  transition: all 1s;
  /*定义滑块 内阴影*/
}
.home-banner-six-map.select-map-box ::-webkit-scrollbar-thumb {
  position: relative;
  border-radius: 0.03125rem;
  box-shadow: inset 0 0 0.03125rem rgba(0, 0, 0, 0);
  -webkit-box-shadow: inset 0 0 0.03125rem rgba(0, 0, 0, 0);
  background-color: #f0e8e8;
}
.home-banner-six-map .left {
  position: relative;
  font-size: 0.4375rem;
  width: 3.28646rem;
  height: 100%;
  margin: 0 0 0 1.16146rem;
  z-index: 2;
}
.home-banner-six-map .left-box {
  width: 3.28646rem;
  height: 100%;
  background-image: url("/static/img/map@2x.png");
  background-size: 100% 100%;
  color: #ffffff;
  box-sizing: border-box;
  position: relative;
}
.home-banner-six-map .left-box.hidden-select-map {
  display: none;
  animation: hidden 2s linear;
  -webkit-animation: hidden 2s linear;
}
@keyframes hidden {
  0% {
    transform: scale(0.00001);
  }
  100% {
    transform: scale(0.00001);
  }
}
.home-banner-six-map .left-box .left-top {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0.45313rem;
  left: -0.42708rem;
}
.home-banner-six-map .left-box .left-top .power {
  border: 0.01042rem solid #ffffff;
  padding: 0.01563rem;
  box-sizing: border-box;
  width: 0.36458rem;
  height: 0.40625rem;
  margin-right: 0.10417rem;
}
.home-banner-six-map .left-box .point-list-item {
  position: absolute;
}
.home-banner-six-map .left-box .point-list-item > .point-icon {
  width: 0.125rem;
  height: 0.16146rem;
  background-image: url("/static/img/point2@2x.png");
  background-size: 100% 100%;
  margin-right: 0.04688rem;
  transition: transform 0.3s linear;
}
@keyframes hove {
  from {
    width: 0.23438rem;
    height: 0.27083rem;
    transform: translateY(-0.13021rem) translateX(-0.05208rem);
  }
  to {
    width: 0.125rem;
    height: 0.16146rem;
    transform: translateY(0) translateX(0);
  }
}
.home-banner-six-map .left-box .point-list-item > .place-name {
  font-size: 0.08333rem;
  margin-left: 0.05208rem;
}
.home-banner-six-map .left-box .point-list-item.hover > .point-icon {
  transform: scale(2) translateY(-0.04688rem) translateX(0);
}
@keyframes hoved {
  from {
    width: 0.125rem;
    height: 0.17188rem;
    transform: translateY(0) translateX(0);
  }
  to {
    width: 0.23438rem;
    height: 0.28646rem;
    transform: translateY(-0.13021rem) translateX(-0.05208rem);
  }
}
.home-banner-six-map .left-box .point-list-item.hover > .place-name {
  font-size: 0.08333rem;
}
@keyframes placeName {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.11458rem);
  }
}
.home-banner-six-map .left-box .point-list-item:nth-child(1) {
  left: 1.28646rem;
  top: 1.63542rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(2) {
  left: 1.52604rem;
  top: 1.48438rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(3) {
  left: 0.29167rem;
  top: 2.1875rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(4) {
  left: 0.53125rem;
  top: 1.53125rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(5) {
  left: 2.48958rem;
  top: 0.67708rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(6) {
  left: 0.4375rem;
  top: 3.21875rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(7) {
  left: 0.29167rem;
  top: 2.89063rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(8) {
  left: 0.3125rem;
  top: 2.5rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(9) {
  left: 0.43229rem;
  top: 2.78125rem;
}
.home-banner-six-map .left-box .point-list-item:nth-child(10) {
  left: 1.35417rem;
  top: 3.03646rem;
}
.home-banner-six-map .left-box .home-banner-six-logo {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0.98958rem;
  left: -0.42708rem;
}
.home-banner-six-map .left-box .home-banner-six-logo > img {
  width: 1.38021rem;
  height: 0.20833rem;
  margin-top: 0.02604rem;
}
.home-banner-six-map .left-box .home-banner-six-logo > span {
  font-size: 0.1875rem;
}
.home-banner-six-map .right {
  position: absolute;
  right: -0.00521rem;
  height: 3.88021rem;
  padding: 0.15625rem 0.47917rem 0.15625rem 0.05208rem;
  color: #ffffff;
  border-radius: 0.07813rem;
  z-index: 8;
  margin-left: auto;
  overflow-y: scroll;
  width: 2.11458rem;
}
.home-banner-six-map .right .home-banner-six-map-list {
  border-radius: 0.07813rem;
}
.home-banner-six-map .right .home-banner-six-map-item {
  border-radius: 0.26042rem;
  transition: transform 0.5s linear;
  -webkit-transition: transform 0.5s linear;
}
.home-banner-six-map .right .home-banner-six-map-item:not(:last-child) {
  margin-bottom: 0.16667rem;
}
.home-banner-six-map .right .home-banner-six-map-item:hover {
  transform: translate3d(0, -0.02083rem, 0);
}
.home-banner-six-map .right .home-banner-six-map-item:hover .img-box > .bgImg {
  height: 1.00521rem;
}
.home-banner-six-map .right .all {
  width: 1.71354rem;
  height: 1rem;
  overflow: hidden;
  border-radius: 0.07813rem;
}
.home-banner-six-map .right .img-box {
  width: 1.71354rem;
  height: 1.14583rem;
  border-radius: 0.07813rem;
  font-size: 0.25rem;
  position: relative;
  text-align: center;
  align-items: center;
}
.home-banner-six-map .right .img-box > div,
.home-banner-six-map .right .img-box button {
  z-index: 3;
}
.home-banner-six-map .right .img-box > .bgImg {
  width: 1.71354rem;
  height: 1.17188rem;
  border-radius: 0.07813rem;
  position: absolute;
  top: 0;
  left: 0;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.4s;
}
.home-banner-six-map .right .img-box .common-btn {
  width: 0.36458rem;
  height: 0.16667rem;
  border: 0.00521rem solid #ffffff;
  border-radius: 0.07813rem;
  font-size: 0.09375rem;
  margin-top: 0.10417rem;
}
.home-banner-six-map .right .img-box .common-btn:hover {
  border: none;
}
.home-banner-six-map .right .name-box {
  text-align: center;
  color: #000000;
  width: 0.5rem;
  background: #ffffff;
  border-radius: 0 0.07813rem 0.07813rem 0;
}
.home-banner-six-map .right .name-box > img {
  width: 0.28125rem;
  height: 0.17708rem;
  margin: 0 auto;
  transition: 1s all linear;
  -webkit-transition: 1s all linear;
}
.home-banner-six-map .right .name-box .country {
  font-size: 0.0625rem;
  margin: 0.02604rem 0;
  font-weight: bold;
}
.home-banner-six-map .right .name-box .country > span {
  font-size: 0.0625rem;
  display: block;
  margin-top: 0.02083rem;
  font-weight: normal;
}
.home-banner-six .swiper-container {
  width: 6.25rem;
  margin-top: 0.38542rem;
}
.home-banner-six .swiper-container .swiper-pagination {
  bottom: 0.26042rem;
}
.home-banner-six .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 0.07813rem;
  height: 0.07813rem;
  margin: 0 0.05208rem !important;
}
.home-banner-six .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff;
}
.home-banner-six .swiper-container .swiper-wrapper .swiper-slide {
  width: 5.20833rem;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 2.69271rem;
}
.home-banner-six .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body {
  width: 6.14583rem;
  margin: 0 auto;
}
.home-banner-six .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin-right: 0.76563rem;
}
.svg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.25rem;
  padding: 0;
  overflow: hidden;
  padding-right: 1.40625rem;
  z-index: 5;
}
.svg-wrapper .svg-container {
  padding: 0;
  width: 100%;
  height: 5.25rem;
}
.svg-wrapper .svg-wrapper-rect {
  width: 100%;
  height: 5.25rem;
}
.svg-wrapper .svg-wrapper-img {
  position: relative;
  height: 5.25rem;
  left: 0;
  z-index: 3;
  top: 0;
  opacity: 1;
}
.visible #cd-image-1 circle {
  animation: visible-clippath 2.8s linear forwards;
}
.unvisible #cd-image-1 circle {
  animation: visible-clippath-back 1s linear forwards;
}
@keyframes visible-clippath {
  100% {
    r: 2400;
  }
}
@keyframes visible-clippath-back {
  0% {
    r: 1200;
  }
  100% {
    r: 0;
  }
}
.dot:before {
  content: ' ';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 0.02604rem;
  height: 0.02604rem;
  background: linear-gradient(-90deg, #40fdfb, #27f03c);
  opacity: 0.2;
  border-radius: 50%;
  opacity: 0;
}
.dot:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #40fdfb, #27f03c);
  opacity: 0.2;
  border-radius: 50%;
  top: -0.65625rem;
  left: -0.88542rem;
  -webkit-animation: ripple3 3s linear 0s infinite normal;
  animation: ripple3 3s linear 0s infinite normal;
}
.dot2:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #40fdfb, #27f03c);
  opacity: 0.3;
  border-radius: 50%;
  top: -0.65625rem;
  left: -0.88542rem;
  -webkit-animation: ripple3 3s 1s linear infinite normal;
  animation: ripple3 3s linear 1s infinite normal;
}
.dot3:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, #40fdfb, #27f03c);
  opacity: 0.2;
  border-radius: 50%;
  top: -0.65625rem;
  left: -0.88542rem;
  animation: ripple3 3s linear 2s infinite normal;
  -webkit-animation: ripple3 3s 2s linear infinite normal;
}
@keyframes ripple3 {
  0% {
    top: 0.78125rem;
    left: 0.41667rem;
    opcity: 75;
    width: 0.3125rem;
    height: 0.3125rem;
  }
  100% {
    top: -0.65625rem;
    left: -0.88542rem;
    opacity: 0;
    width: 3.04688rem;
    height: 3.04688rem;
  }
}

.hidden {
  display: none;
}
.home {
  background: #f8f8f8;
}
.home .common-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .common-btn > img {
  width: 0.10938rem;
  height: 0.08333rem;
}
.home .home-modal {
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  display: none;
}
.home .home-modal .home-modal-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home .home-modal-body {
  background-color: #ffffff;
  width: 2.8125rem;
  height: 2.9375rem;
  border: 0.00521rem solid #e5e5e5;
  border-radius: 0.04167rem;
}
.home .home-modal-body > p {
  font-size: 0.125rem;
  font-family: Microsoft YaHei;
  color: #000000;
  text-align: center;
  margin-top: 0.06771rem;
  margin-bottom: 0.0625rem;
}
.home .home-modal-body > .home-modal-content {
  font-size: 0.08333rem;
  height: 2.26563rem;
  overflow-y: scroll;
  color: #000000;
  line-height: 0.15625rem;
  padding: 0 0.19792rem;
  white-space: pre-wrap;
}
.home .home-modal-body > .home-modal-content::-webkit-scrollbar {
  display: none;
}
.home .home-modal-body > button {
  width: 2.5rem;
  height: 0.23958rem;
  background: linear-gradient(0deg, #1e9df7, #31e9ff);
  border-radius: 0.11979rem;
  font-size: 0.10417rem;
  margin: 0.06771rem 0.15625rem;
  color: #ffffff;
}
.home .home-modal > span {
  display: inline-block;
  color: #999999;
  font-size: 0.11458rem;
  cursor: pointer;
  position: absolute;
  top: 2%;
  right: 5%;
  user-select: none;
}
.home .home-banner-one {
  position: relative;
  width: 100%;
  height: 100vh;
}
.home .home-banner-one-logo {
  display: flex;
  align-items: center;
  margin-bottom: 0.10417rem;
}
.home .home-banner-one-logo > span {
  font-size: 0.26042rem;
  color: #ffffff;
}
.home .home-banner-one-logo > img {
  width: 1.51042rem;
  height: 0.26042rem;
  margin-top: 0.02604rem;
  margin-right: 0.01042rem;
}
.home .home-banner-one .swiper-button-prev,
.home .home-banner-one .swiper-button-next {
  color: #FFFFFF;
  border: 0.01042rem solid #ffffff;
}
.home .home-banner-one .swiper-button-prev {
  bottom: 0;
  left: auto;
  right: 0.25rem;
}
.home .home-banner-one .swiper-button-next {
  bottom: 0;
  right: 0;
}
.home .home-banner-one .swiper-button-next:after,
.home .home-banner-one .swiper-button-prev:after {
  font-weight: bold;
}
.home .home-banner-one .swiper-button-next:hover,
.home .home-banner-one .swiper-button-prev:hover {
  color: #001214;
  background: #FFFFFF;
}
.home .home-banner-one .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.home .home-banner-one .swiper-container .swiper-tool-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  right: 0;
  position: absolute;
  bottom: 0.51042rem;
}
.home .home-banner-one .swiper-container .swiper-pagination {
  text-align: center;
}
.home .home-banner-one .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 0.05208rem;
  height: 0.05208rem;
  border: 0.01042rem solid #FFFFFF !important;
  margin: 0 0.05208rem !important;
}
.home .home-banner-one .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff;
  box-shadow: 0 0 0.01042rem 0.01042rem rgba(255, 255, 255, 0.6);
}
.home .home-banner-one .swiper-container .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body {
  position: relative;
  width: 100%;
  height: 100%;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner.banner1 {
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fbanner-1.png);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner.banner2 {
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fbanner-2.png);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner.banner3 {
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fbanner-3.png);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner.banner4 {
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fbanner-4.png);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .swiper-slide-banner.banner5 {
  background-image: url(http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fbanner-5.png);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body > img {
  width: 100%;
  height: 100%;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .apply-btn {
  font-size: 0.08333rem;
  position: absolute;
  left: 2.57813rem;
  top: 3.51563rem;
  width: 0.57292rem;
  height: 0.25rem;
  background: #ffffff;
  border-radius: 0.125rem;
  cursor: pointer;
  color: #000000;
  font-weight: bold;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .apply-btn:hover,
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body .apply-btn:active {
  color: #fff;
  background: linear-gradient(90deg, #1162f0, #8c14f1);
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .two .apply-btn,
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .four .apply-btn {
  left: auto;
  right: 3.73958rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex {
  display: flex;
  justify-content: space-between;
  width: 6.25rem;
  margin: 0 auto;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex-right {
  text-align: right;
  color: #FFFFFF;
  position: relative;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex-right .padtop {
  font-size: 0.15625rem;
  line-height: 0.20833rem;
  margin: 0.10938rem 0 0.45313rem 0;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex-right .padtop.right-padtop {
  text-align: right;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex-right .pad-white {
  font-size: 0.09375rem;
  line-height: 0.13021rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide .swiper-slide-body-flex-right .charsport {
  font-size: 0.08333rem;
  transform: rotate(90deg);
  position: absolute;
  bottom: 30%;
  right: -46%;
  letter-spacing: 0.02604rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one > h1 {
  padding-top: 1.34896rem;
  font-size: 0.33333rem;
  font-weight: 600;
  letter-spacing: 0.01563rem;
  color: #FFFFFF;
  line-height: 0.46875rem;
  text-align: center;
  margin-bottom: 0;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list {
  width: 4.4375rem;
  height: 1.10938rem;
  margin: 0.13021rem auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.05208rem;
  display: flex;
  flex-wrap: wrap;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item {
  width: 25%;
  display: flex;
  margin-top: 0.15625rem;
  height: 0.3125rem;
  clear: both;
  white-space: nowrap;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon {
  width: 0.23958rem;
  height: 0.15625rem;
  margin-left: 0.26042rem;
  margin-right: 0.10417rem;
  background-size: 100% 100%;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.china {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/china.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.japan {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/japan.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.thailand {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/thailand.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.germany {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/germany.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.malaysia {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/malaysia.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.singapore {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/singapore.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.arab {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/arab.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item .country-icon.america {
  background-image: url('https://chargespot.oss-accelerate.aliyuncs.com/Cnoffical/images/america.png');
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item-content {
  width: 0.46875rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item-content > p {
  color: #FFFFFF;
  font-size: 0.11458rem;
  font-weight: bold;
  line-height: 0.15625rem;
  margin-bottom: 0.02604rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item-content > span {
  font-size: 0.07292rem;
  color: #ffffff;
  line-height: 0.10417rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .coutry-list-item-content > span:not(:last-child) {
  margin-right: 0.02604rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .country-count {
  width: 0.96875rem;
  height: 0.16667rem;
  margin: 0 auto;
  background: #f4f6f6;
  border-radius: 0.02083rem;
  font-weight: 550;
  font-size: 0.08333rem;
  color: #00909D;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.21354rem;
}
@media screen and (max-width: 1280px) {
  .home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .country-count {
    width: 1.04167rem;
  }
}
@media screen and (max-width: 1000px) {
  .home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .country-count {
    width: 1.19792rem;
  }
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.one .country-count > span {
  margin: 0 0.05208rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two {
  background: #001214;
  padding-top: 1.22917rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two .common-logo {
  margin-bottom: 0.10417rem;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two h3 {
  font-size: 0.26042rem;
  color: #00E0FC;
  letter-spacing: 0.01563rem;
  line-height: 0.3125rem;
  margin-bottom: 0.11979rem;
  text-align: left;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two .text-list {
  font-size: 0.09375rem;
  color: #fff;
  text-align: left;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two .power {
  width: 0.68229rem;
  height: 0.76042rem;
  border: 0.01563rem solid #ffffff;
  padding: 0.06771rem 0 0 0.06771rem;
  box-sizing: border-box;
  margin: 0.22917rem 0 0.14063rem 0;
}
.home .home-banner-one .swiper-container .swiper-wrapper .swiper-slide.two .power > img {
  width: 0.48438rem;
  height: 0.63021rem;
}
.home .home-banner-two {
  position: relative;
  width: 6.25rem;
  text-align: center;
  background: #F6F6F6;
  margin: 0.07292rem auto;
  box-shadow: 0 0.05208rem 0.09375rem 0 rgba(0, 168, 255, 0.1);
  padding: 0.50521rem 0 0.39583rem 0;
  border-radius: 0.05208rem;
}
.home .home-banner-two .common-logo {
  margin: 0 auto;
}
.home .home-banner-two .common-logo > img {
  width: 1.38542rem;
  height: 0.23438rem;
}
.home .home-banner-two-list {
  display: flex;
  justify-content: center;
  margin-top: 0.26042rem;
  position: relative;
}
.home .home-banner-two-list-bg {
  width: 1.63542rem;
  height: 100%;
  position: absolute;
  border-radius: 0.08333rem;
  top: 0;
  left: 8.2%;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  background: linear-gradient(0deg, rgba(0, 154, 217, 0.8), rgba(0, 184, 255, 0.8));
  box-shadow: 0 0 0.125rem 0 rgba(8, 1, 3, 0.2);
}
.home .home-banner-two-list-item {
  width: 1.63542rem;
  padding: 0.22396rem 0 0.23958rem 0;
  margin-right: 0.10417rem;
  border-radius: 0.08333rem;
  align-items: center;
  z-index: 99;
  transition: all 0.5s;
}
.home .home-banner-two-list-item > .xuhao {
  width: 0.20833rem;
  height: 0.17188rem;
  margin: 0 auto;
  background-size: 100% 100%;
  transition: all 0.5s;
}
.home .home-banner-two-list-item > .xuhao.xuhao1 {
  width: 0.15625rem;
  height: 0.17188rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F01-black.png");
}
.home .home-banner-two-list-item > .xuhao.xuhao2 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F02-black.png");
}
.home .home-banner-two-list-item > .xuhao.xuhao3 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F03-black.png");
}
.home .home-banner-two-list-item-text1 {
  font-size: 0.10417rem;
  margin: 0.10417rem 0 0.11458rem 0;
}
.home .home-banner-two-list-item-text2 {
  font-size: 0.05208rem;
  display: inline-block;
  padding: 0.03646rem 0.14583rem 0.03646rem 0.14063rem;
  margin: 0 auto;
  background: #ffffff;
  border: 0.00521rem solid #cccccc;
  border-radius: 0.03646rem;
  color: #454545;
  transition: all 0.5s;
}
.home .home-banner-two-list-item-text3 {
  font-size: 0.0625rem;
  color: #666666;
  padding: 0.19271rem 0.10938rem 0.07813rem 0.10938rem;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 0.05208rem;
  border-bottom: 0.00521rem solid #D9D9D9;
  transition: all 0.5s;
}
.home .home-banner-two-list-item-text4 {
  font-size: 0.0625rem;
  color: #666666;
  line-height: 0.125rem;
  transition: all 0.5s;
}
.home .home-banner-two-list-item-text4 > .gouxuan-iconbox {
  display: inline-block;
  margin-right: 0.05208rem;
  width: 0.09375rem;
  height: 0.0625rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fgx-green@2x(1).png");
  transition: all 0.5s;
  background-size: 100% 100%;
}
.home .home-banner-two-list-item-btn {
  padding: 0.05208rem 0.26042rem;
  background: #ffffff;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(8, 1, 3, 0.06);
  border-radius: 0.28125rem;
  font-size: 0.0625rem;
  color: #454545;
  margin-top: 0.20833rem;
}
.home .home-banner-two-list .active {
  color: #FFFFFF;
}
.home .home-banner-two-list .active .home-banner-two-list-item-text2 {
  border: 0.00521rem solid #fff;
}
.home .home-banner-two-list .active .home-banner-two-list-item-text3 {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.home .home-banner-two-list .active .home-banner-two-list-item-text4 {
  color: #FFFFFF;
}
.home .home-banner-two-list .active .home-banner-two-list-item-text4 > .gouxuan-iconbox {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fgx-whithe@2x.png");
}
.home .home-banner-two-list .active > .xuhao1 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F01-white.png");
}
.home .home-banner-two-list .active > .xuhao2 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F02-white.png");
}
.home .home-banner-two-list .active > .xuhao3 {
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2F03-white.png");
}
.home .home-banner-three {
  position: relative;
  width: 6.25rem;
  margin: 0.15625rem auto;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(0, 168, 255, 0.1);
  padding: 0;
  background: #F6F6F6;
}
.home .home-banner-three-content {
  background: #FFFFFF;
  display: flex;
}
.home .home-banner-three-content-left {
  padding: 1.17188rem 0 1.17188rem 0.625rem;
  color: #323237;
}
.home .home-banner-three-content-left-logo {
  display: flex;
  align-items: center;
  margin-bottom: 0.07813rem;
}
.home .home-banner-three-content-left-logo-img {
  height: 0.19792rem;
}
.home .home-banner-three-content-left-logo > span {
  font-size: 0.19792rem;
}
.home .home-banner-three-content-left-text1 {
  font-size: 0.29167rem;
  font-weight: bold;
  margin-bottom: 0.07813rem;
}
.home .home-banner-three-content-left-text2 {
  font-size: 0.125rem;
  font-weight: bold;
  line-height: 0.20833rem;
}
.home .home-banner-three-content-left-text3 {
  font-size: 0.08854rem;
  margin: 0.10938rem 0;
}
.home .home-banner-three-content-left-btn {
  width: 1.11458rem;
  height: 0.25rem;
  background: linear-gradient(-100deg, #00B4FF, #63DEF5);
  border-radius: 0.125rem;
  color: #FFFFFF;
  font-size: 0.09375rem;
}
.home .home-banner-three-content-right {
  transform: translateX(0.18229rem);
  position: relative;
  overflow: auto;
}
.home .home-banner-three-content-right > img {
  width: 3.10417rem;
  height: 2.57813rem;
  z-index: 9;
}
.home .home-banner-three-content-right .product-container {
  position: relative;
  margin-top: 0.1875rem;
  height: 1.01042rem;
}
.home .home-banner-three-content-right .product-let {
  transition: all 0.1s;
  transform: translate3d(0.19792rem, 0.1875rem, 0);
  z-index: -1;
  position: -webkit-sticky;
  position: sticky;
  top: 0.10417rem;
  white-space: nowrap;
}
.home .home-banner-three-content-right .product-let > img {
  width: 0.3125rem;
  height: 1.01042rem;
  transition: all 0.1s;
}
.home .home-banner-three-content-right .product-let > img:nth-child(1) {
  transform: translate3d(25PX, 0, 0);
  z-index: 1;
}
.home .home-banner-three-content-right .product-let > img:nth-child(2) {
  transform: translate3d(10PX, 0, 0);
  z-index: 2;
}
.home .home-banner-three-content-right .product-let > img:nth-child(3) {
  transform: translate3d(-5PX, 0, 0);
  z-index: 3;
}
.home .home-banner-three-content-right .product-let > img:nth-child(4) {
  z-index: 4;
  transform: translate3d(-20PX, 0, 0);
}
.home .home-banner-three-content-right .product-let > img:nth-child(5) {
  z-index: 5;
  transform: translate3d(-35PX, 0, 0);
}
.home .home-banner-three-content-right .product-right {
  transition: all 0.2s;
  transform: translate3d(-0.25rem, 0, 0);
  z-index: -1;
  white-space: nowrap;
}
.home .home-banner-three-content-right .product-right > img {
  width: 0.3125rem;
  height: 1.01042rem;
  transition: all 0.1s;
}
.home .home-banner-three-content-right .product-right > img:nth-child(1) {
  transform: translate3d(25PX, 0, 0);
  z-index: 1;
}
.home .home-banner-three-content-right .product-right > img:nth-child(2) {
  transform: translate3d(10PX, 0, 0);
  z-index: 2;
}
.home .home-banner-three-content-right .product-right > img:nth-child(3) {
  transform: translate3d(-5PX, 0, 0);
  z-index: 3;
}
.home .home-banner-three-content-right .product-right > img:nth-child(4) {
  z-index: 4;
  transform: translate3d(-20PX, 0, 0);
}
.home .home-banner-three-content-right .product-right > img:nth-child(5) {
  z-index: 5;
  transform: translate3d(-35PX, 0, 0);
}
.home .home-banner-three-content-right .img-up {
  transform: translate3d(0, 0.15625rem, 0);
}
.home .home-banner-three-content-right .img-down {
  transform: translate3d(0, -0.15625rem, 0);
}
.home .home-banner-four {
  width: 6.25rem;
  height: 1.97917rem;
  display: flex;
  margin: 0 auto;
  margin-bottom: 0.14583rem;
  font-size: 0.09375rem;
  color: #ffffff;
}
.home .home-banner-four-btn {
  width: 1.64583rem;
  height: 0.25rem;
  background: #FFFFFF;
  border-radius: 0.125rem;
  margin: 0.41667rem 0 0.57292rem 0;
  color: #000000;
  font-size: 0.09375rem;
}
.home .home-banner-four-left {
  height: 100%;
  width: 4.30208rem;
  margin-right: 0.05208rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Ffriend@2x.png");
  background-size: 100% 100%;
  position: relative;
  align-items: center;
}
.home .home-banner-four-left > img {
  position: absolute;
  top: 0;
}
.home .home-banner-four-left .home-banner-four-big {
  font-size: 0.25rem;
}
.home .home-banner-four-left .home-banner-four-small {
  position: absolute;
  font-size: 0.10417rem;
  text-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.3);
  bottom: 0.18229rem;
  text-align: center;
}
.home .home-banner-four-right {
  height: 100%;
  width: 1.89583rem;
  background-size: 100% 100%;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fusing@2x.png");
  position: relative;
  align-items: center;
}
.home .home-banner-four-right-icon {
  width: 0.25521rem;
  height: 0.25521rem;
  background-size: 100% 100%;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fdongtaiquan@2x.png");
}
.home .home-banner-four-right > img {
  position: absolute;
  top: 0;
}
.home .home-banner-four-right .home-banner-four-small {
  position: absolute;
  font-size: 0.10417rem;
  text-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.3);
  bottom: 0.18229rem;
  text-align: center;
}
.home .home-banner-five {
  position: relative;
}
.home .home-banner-five-body {
  width: 6.25rem;
  height: 3.38542rem;
  background: linear-gradient(225deg, #00ff69, #63def5);
  box-shadow: 0 0.02604rem 0.15104rem 0.00521rem rgba(0, 168, 255, 0.25);
  margin: 0 auto;
  color: #323237;
}
.home .home-banner-five-body-left {
  position: relative;
  width: 3.39063rem;
}
.home .home-banner-five-body-left .logo {
  margin: 12% 0 6% 0;
  width: 0.70313rem;
  height: 0.35417rem;
}
.home .home-banner-five-body-left .product-img {
  position: absolute;
  bottom: 0;
  left: 0.3125rem;
  width: 2.69792rem;
  height: 2.50521rem;
}
.home .home-banner-five-body-right {
  padding-top: 0.71875rem;
}
.home .home-banner-five-body-right-text1 {
  font-size: 0.13542rem;
  font-weight: bold;
}
.home .home-banner-five-body-right-text2 {
  width: 2.18229rem;
  font-size: 0.35417rem;
  margin: 0.11458rem 0 0.32813rem 0;
  font-weight: 800;
}
.home .home-banner-five-body-right-text3 {
  font-size: 0.23958rem;
  color: #0F0F0F;
}
.home .home-banner-five-body-right-text4 {
  color: #0F0F0F;
  font-size: 0.08333rem;
  width: 1.19271rem;
  margin-bottom: 0.10417rem;
  margin-top: 0.03646rem;
  line-height: 0.10417rem;
}
.home .home-banner-five-body-btn {
  padding: 0.07292rem 0.25rem;
  display: inline-block;
  background: #ffffff;
  border-radius: 0.125rem;
  font-size: 0.09375rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0.01042rem 0.05208rem 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.home .home-banner-five-body-btn > img {
  margin-left: 0.08854rem;
  width: 0.10938rem;
  height: 0.08333rem;
}
.home .home-banner-five-body-btn:hover {
  color: #FFFFFF;
  transform: translate3d(0, -0.00521rem, 0);
  background: linear-gradient(90deg, #0bfc6e 0%, #63def5 100%);
}
.home .home-banner6 {
  position: relative;
}
.home .home-banner6-maodianTop {
  top: -0.51042rem;
}
.home .home-banner-seven {
  position: relative;
  padding-top: 0.46875rem;
  padding-bottom: 0.53646rem;
  background-color: #FFFFFF;
}
.home .home-banner-seven-logo {
  width: 1.40625rem;
  margin: 0 auto;
}
.home .home-banner-seven-logo > img {
  width: 1.40625rem;
  height: 0.23438rem;
}
.home .home-banner-seven-title {
  color: #000000;
  font-size: 0.16667rem;
  text-align: center;
  font-weight: bold;
  margin-top: 0.05208rem;
}
.home .home-banner-seven-swiper .swiper-info {
  display: none;
}
.home .home-banner-seven-swiper .poster-item-active > img {
  height: 100%;
}
.home .home-banner-seven-swiper .poster-item > img {
  border-radius: 0.07813rem;
}
.home .home-banner-seven-body {
  width: 5.52083rem;
  height: auto;
  margin: 0 auto;
}
.home .home-banner-seven-footer {
  font-size: 0.10417rem;
  text-align: center;
  margin-top: 0.46875rem;
  color: #000000;
  line-height: 0.125rem;
}
.home .home-banner-seven-footer .loading {
  text-align: center;
  margin-left: 0.36458rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .home-banner-seven-footer .loading > span {
  display: inline-block;
  width: 0.04167rem;
  height: 0.04167rem;
  margin-left: 0.02604rem;
  border-radius: 50%;
  background: #000000;
  animation: load 1.04s ease infinite;
  -webkit-animation: load 1.04s ease infinite;
}
.home .home-banner-seven-footer .loading > span:last-child {
  margin-right: 0;
}
.home .home-banner-seven-footer .loading > span:nth-child(1) {
  animation-delay: 0.13s;
  -webkit-animation-delay: 0.13s;
}
.home .home-banner-seven-footer .loading > span:nth-child(2) {
  animation-delay: 0.26s;
  -webkit-animation-delay: 0.26s;
}
.home .home-banner-seven-footer .loading > span:nth-child(3) {
  animation-delay: 0.39s;
  -webkit-animation-delay: 0.39s;
}
.home .home-banner-seven-footer .loading > span:nth-child(4) {
  animation-delay: 0.52s;
  -webkit-animation-delay: 0.52s;
}
.home .home-banner-seven-footer .loading > span:nth-child(5) {
  animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
}
@keyframes load {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.4);
  }
}
.home .home-banner-seven-card {
  display: flex;
  margin-bottom: 0.10417rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.home .home-banner-seven-card-item {
  transition: all 2s linear;
  -webkit-transition: all 2s linear;
  position: relative;
  transition: all 0.5s;
  width: 1.29167rem;
  height: 0.66667rem;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(0, 112, 192, 0.06);
  border-radius: 0.05208rem;
  margin-bottom: 0.13021rem;
  background: #FFFFFF;
}
.home .home-banner-seven-card-item:hover {
  box-shadow: 0 0.06771rem 0.10417rem 0 rgba(0, 112, 192, 0.14);
  transform: translate3d(0, -0.07813rem, 0);
}
.home .home-banner-seven-card-item-tip {
  position: absolute;
  bottom: 0;
  left: 0;
}
.home .home-banner-seven-card-item > img {
  width: 100%;
  height: 100%;
  border-radius: 0.05208rem;
  box-shadow: 0 0.05208rem 0.07292rem 0 rgba(0, 112, 192, 0.06);
}
.swiper-button-prev,
.swiper-button-next {
  border-radius: 50%;
  width: 0.20833rem;
  height: 0.20833rem;
  line-height: 0.26042rem;
  color: #00a2ff;
  outline: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 0.13542rem;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #fff;
  background: #00a2ff;
}

.product .common-title,
.product .common-title-sub {
  color: #FFFFFF;
}
.product .product-common-btn-bg {
  background: linear-gradient(90deg, #1162f0, #761f99);
  color: #FFFFFF;
}
.product .product-banner-btn-bd {
  padding: 0.01042rem;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(90deg, #c110ff, #8041ff, #8041ff, #6ae6ff);
}
.product .product-banner-btn-bd > button {
  background: #1D1D20;
}
.product .product-banner-btn-bd > button:hover {
  background: none;
  transition: 0.2s all linear;
  -webkit-transition: 0.2s all linear;
  font-weight: bold;
}
.product .product-banner-btn-bd:hover {
  background: linear-gradient(90deg, #78ffff, #805aff, #c41fff);
  transition: 0.2s all linear;
  transform: translate3d(0, -0.00521rem, 0);
  -webkit-transition: 0.2s all linear;
}
.product .product-banner-one {
  width: 100%;
  background: #1A191E;
}
.product .product-banner-one-container {
  width: 5.77083rem;
  margin: 0 auto;
  padding-top: 1.04167rem;
}
.product .product-banner-one-title {
  display: flex;
  margin-bottom: 0.11979rem;
}
.product .product-banner-one-title-left {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.product .product-banner-one-title-left > img {
  width: 2.28646rem;
  display: block;
}
.product .product-banner-one-title-left > h3 {
  font-weight: bold;
  font-size: 0.3125rem;
  color: #FFFFFF;
  margin-top: 0.11979rem;
}
.product .product-banner-one-title-img {
  width: 0.47396rem;
  height: 1.00521rem;
}
.product .product-banner-one-title-img.img2 {
  margin-left: 0.08333rem;
}
.product .product-banner-one .device_item {
  color: #ffffff;
}
.product .product-banner-one .device_item.s5 .device_item_body {
  height: 3.92188rem;
}
.product .product-banner-one .device_item.s10 .device_item_body {
  height: 3.77083rem;
}
.product .product-banner-one .device_item.l20 .device_item_body {
  height: 7.56771rem;
}
.product .product-banner-one .device_item .device_item_body {
  position: relative;
  width: 5.77083rem;
  margin: auto;
}
.product .product-banner-one .device_item .device_item_body .svg_mask {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  height: 2929PX;
  background: #1A191E;
  z-index: 2;
}
.product .product-banner-one .device_item .device_item_body .svg_mask.device_s5_animate {
  animation: show_s5 3s forwards;
  -webkit-animation: show_s5 3s forwards;
}
.product .product-banner-one .device_item .device_item_body .svg_mask.device_s10_animate {
  animation: show_s10 3s forwards;
  -webkit-animation: show_s10 3s forwards;
}
.product .product-banner-one .device_item .device_item_body .svg_mask.device_l20_ll40_animate {
  animation: show_l20_ll40 6s forwards;
  -webkit-animation: show_l20_ll40 6s forwards;
}
@keyframes show_s5 {
  0% {
    top: 0;
  }
  100% {
    top: 753PX;
  }
}
@keyframes show_s10 {
  0% {
    top: 753PX;
  }
  100% {
    top: 1477PX;
  }
}
@keyframes show_l20_ll40 {
  0% {
    top: 1477PX;
  }
  100% {
    top: 2929PX;
  }
}
.product .product-banner-one .device_item .device_item_body .svg_s5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.product .product-banner-one .device_item .device_item_body .svg_s5 .svg_s5_path_1.animate {
  animation: slideDown1 7.6s forwards;
  -webkit-animation: slideDown1 7.6s forwards;
}
.product .product-banner-one .device_item .device_item_body .svg_s5 .svg_s5_path_2.animate {
  animation: slideDown2 7.6s forwards;
  -webkit-animation: slideDown2 7.6s forwards;
}
.product .product-banner-one .device_item .device_item_main {
  position: relative;
  display: flex;
  z-index: 2;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left > img {
  display: block;
  width: 2.06771rem;
  height: 2.03125rem;
  margin-top: 0.91146rem;
  margin-left: 0.26042rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left > p {
  margin-top: 0.20833rem;
  margin-left: 0.46875rem;
  font-size: 0.21875rem;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 0.02083rem 0.05208rem rgba(0, 0, 0, 0.36);
  white-space: nowrap;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left > p > i {
  font-size: 0.22917rem;
  font-weight: bold;
  font-style: normal;
  color: #ffffff;
  text-shadow: 0 0.02083rem 0.05208rem rgba(0, 0, 0, 0.36);
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.s10 > p {
  margin-top: 0.69271rem;
  margin-left: 1.19792rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.s10 > img {
  margin-top: 0.11458rem;
  margin-left: 1.22396rem;
  width: 2.51042rem;
  height: 2.21875rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.l20 > p {
  margin-top: 0.54167rem;
  margin-left: 0.71354rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.l20 > img {
  margin-top: 0.11458rem;
  margin-left: 0.82813rem;
  width: 2.10417rem;
  height: 2.47917rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.ll40 > p {
  margin-top: 1.04167rem;
  margin-left: -0.26042rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_left.ll40 > img {
  margin-top: 0.17188rem;
  margin-left: -0.18229rem;
  width: 2.45313rem;
  height: 2.58333rem;
}
.product .product-banner-one .device_item .device_item_main .slide-left {
  transition: transform 0.8s linear;
  transform: translate3d(0.15625rem, 0, 0);
  -webkit-transition: transform 0.8s linear;
}
.product .product-banner-one .device_item .device_item_main .slide-right {
  transition: 0.8s all linear;
  transform: translate3d(-0.15625rem, 0, 0);
  -webkit-transition: 0.8s all linear;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right {
  padding-left: 1.02604rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right .device_text {
  display: block;
  width: 1.08333rem;
  height: 0.72917rem;
  margin-top: 1.30729rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right .device_logo {
  display: block;
  height: 0.21875rem;
  margin-top: 0.17708rem;
  margin-bottom: 0.0625rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right .device_text_line {
  display: flex;
  font-size: 0.10417rem;
  align-items: center;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right .device_text_line > .tag {
  display: flex;
  width: 0.26042rem;
  height: 0.15104rem;
  background: linear-gradient(-90deg, #1162f0, #73308e);
  border-radius: 0.07813rem;
  font-size: 0.0625rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right .device_text_line > .tag:hover {
  background: linear-gradient(90deg, #78ffff, #805aff, #c41fff);
  font-weight: bold;
  transition: 0.2s all linear;
  transform: translate3d(0, -0.00521rem, 0);
  -webkit-transition: 0.2s all linear;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.s10 {
  padding-left: 0.13021rem;
  width: 1.67188rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.s10 .device_text {
  width: 1.67188rem;
  height: 0.72917rem;
  margin-top: 1.71875rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.l20 {
  padding-left: 0.18229rem;
  width: 1.58854rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.l20 .device_text {
  width: 1.58854rem;
  height: 0.72917rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.ll40 {
  padding-left: 1.22396rem;
}
.product .product-banner-one .device_item .device_item_main .device_item_main_right.ll40 .device_text {
  margin-top: 2.08333rem;
  width: 2.14583rem;
  height: 0.72917rem;
}
@keyframes slideDown {
  0% {
    d: path("M302.000,0.000 L302.000,-0.001 L344.000,-0.001 L344.000,0.000 L302.000,0.000 ZM-0.000,-0.001 L284.000,-0.001 L284.000,0.000 L-0.000,0.000 L-0.000,-0.001 Z");
  }
  100% {
    d: path("M302.000,750.000 L302.000,-0.001 L344.000,-0.001 L344.000,750.000 L302.000,750.000 ZM-0.000,-0.001 L284.000,-0.001 L284.000,750.000 L-0.000,750.000 L-0.000,-0.001 Z");
  }
}
.product .product-banner-btn-bd-wrap {
  display: flex;
  justify-content: center;
  margin-top: 0.27604rem;
}
.product .product-banner-btn-bd-wrap.tag-two {
  margin-left: 0.21354rem;
}
.product .product-banner-btn-bd-wrap.tag-three {
  margin-left: 0.21875rem;
}
.product .product-banner-btn-bd-wrap.tag-four {
  margin-left: 0.24479rem;
}
.product .product-banner-two {
  width: 100%;
  background: #1D1D20;
  padding: 0.52083rem 0 0.55208rem 0;
  position: relative;
  z-index: 3;
}
.product .product-banner-two .product_banner_img {
  margin: 0 auto;
  color: #FFFFFF;
  font-size: 0.26042rem;
  text-align: center;
}
.product .product-banner-two .product_banner_img > .img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.02604rem;
}
.product .product-banner-two .product_banner_img > .img_box > img {
  width: 1.60417rem;
  height: 0.26042rem;
  margin-top: 0.07813rem;
  margin-right: 0.02604rem;
}
.product .product-banner-two-btn {
  display: flex;
  padding: 0.01042rem;
  border-radius: 0.26042rem;
  align-items: center;
}
.product .product-banner-two-btn > button {
  border-radius: 0.0625rem;
  font-size: 0.0625rem;
  padding: 0.03125rem 0.08854rem;
  border-radius: 0.26042rem;
}
.product .product-banner-two-list {
  padding: 0 1.77604rem;
  justify-content: space-between;
}
.product .product-banner-two-list-item {
  padding-top: 0.36458rem;
}
.product .product-banner-two-list-item .device_text_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product .product-banner-two-list-item .tag {
  padding: 0.03646rem 0.08333rem 0.03125rem 0.08333rem;
  display: inline-block;
  border-radius: 0.0625rem;
  font-size: 0.0625rem;
  margin: 0.20313rem 0 0.16667rem 0;
}
.product .product-banner-two-list-item .title {
  font-size: 0.10417rem;
  font-weight: bold;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product .product-banner-two-list-item .title > img {
  position: relative;
  width: 0.625rem;
  height: 0.09896rem;
  top: 0.01042rem;
}
.product .product-banner-two-list-item .title > p {
  margin-left: 0.03125rem;
}
.product .product-banner-two-list-item > .list {
  margin-top: 0.20833rem;
  height: 0.83333rem;
  padding: 0;
}
.product .product-banner-two-list-item > .list > li {
  color: #FFFFFF;
  font-size: 12PX;
  line-height: 0.13542rem;
  list-style: none;
  text-align: center;
}
.product .product-banner-two-list-item .device-img-box {
  height: 1.74479rem;
  background-repeat: no-repeat;
  background-position: bottom left;
}
.product .product-banner-two-list-item .device-img-box.one {
  width: 1.09896rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fproduct-banner-1_1.png");
  background-size: 0.93229rem 0.96354rem;
  background-position: bottom center;
}
.product .product-banner-two-list-item .device-img-box.two {
  width: 1.20313rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fproduct-banner-2.png");
  background-size: 100% 1.01563rem;
}
.product .product-banner-two-list-item .device-img-box.three {
  width: 0.5625rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fproduct-banner-3.png");
  background-size: 0.53125rem 1.70833rem;
}
.product .product-banner-two-list-item .device-img-box.four {
  width: 0.64583rem;
  background-image: url("http://chargespot.oss-cn-hongkong.aliyuncs.com/Cnoffical%2FImgs%2Fproduct-banner-4.png");
  background-size: 0.66667rem 1.74479rem;
}
.product .product-banner-three {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, #0f1734, #300b28);
  padding: 0.64063rem 0 0.26042rem 0;
}
.product .product-banner-three-logo > span {
  color: #FFFFFF;
  font-size: 0.23958rem;
}
.product .product-banner-three-logo > .logo5 {
  width: 1.6875rem;
  height: 0.29167rem;
  margin-top: 0.02604rem;
  margin-right: 0.05208rem;
}
.product .product-banner-three .common-text-middle {
  font-size: 0.20833rem;
  margin-bottom: 0.10417rem;
  opacity: 0.4;
  color: #FFFFFF;
}
.product .product-banner-three .common-title-sub {
  font-size: 0.1875rem;
  margin: 0.07813rem 0 0 0.20833rem;
}
.product .product-banner-three-btn {
  width: 0.67708rem;
  height: 0.26042rem;
  border-radius: 0.13021rem;
  font-size: 0.09375rem;
  transition: all 0.7s linear 0.7s;
}
.product .product-banner-three-btn > button {
  width: 0.67708rem;
  height: 0.26042rem;
  border-radius: 0.13021rem;
  background: #1C1232;
}
.product .product-banner-three-btn.btn-animation {
  opacity: 1;
}
.product .product-banner-three .common-text-big {
  font-size: 0.28125rem;
  font-weight: 800;
  color: #FFFFFF;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.product .product-banner-three .fly-left {
  opacity: 1;
  animation: titleFlyLeft 0.7s linear;
  -moz-animation: titleFlyLeft 0.7s linear;
  -webkit-animation: titleFlyLeft 0.7s linear;
  -o-animation: titleFlyLeft 0.7s linear;
}
@keyframes titleFlyLeft {
  from {
    opacity: 0;
    font-size: 0.0625rem;
  }
  to {
    opacity: 1;
    font-size: 0.28125rem;
  }
}
.product .product-banner-three .common-text-small {
  transition: all 1s linear;
  font-size: 0.125rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 0.21875rem;
  margin: 0.26042rem 0 0.32813rem 0;
  opacity: 0.4;
}
.product .product-banner-three .line .common-text-big {
  opacity: 1;
}
.product .product-banner-three .fly-right {
  opacity: 1;
  animation: titleFlyRight 0.7s linear;
  -moz-animation: titleFlyRight 0.7s linear;
  -webkit-animation: titleFlyRight 0.7s linear;
  -o-animation: titleFlyRight 0.7s linear;
}
@keyframes titleFlyRight {
  from {
    opacity: 0;
    font-size: 0.0625rem;
  }
  to {
    opacity: 1;
    font-size: 0.125rem;
  }
}
.product .product-banner-three-list {
  padding: 0.26042rem 0.15625rem;
}
.product .product-banner-three-list-item {
  width: 3.02083rem;
  height: 3.97396rem;
  background: #000000;
  position: relative;
  overflow: hidden;
}
.product .product-banner-three-list-item:nth-child(2) {
  margin: 0 0.26042rem;
}
.product .product-banner-three-list-item > img {
  position: absolute;
  opacity: 0;
}
.product .product-banner-three-list-item.left > img {
  width: 2.39583rem;
  height: 2.77604rem;
  top: 22%;
  left: 0.58333rem;
}
.product .product-banner-three-list-item.left > img.left-animation {
  animation: flyLeft 3s;
  -moz-animation: flyLeft 3s;
  -webkit-animation: flyLeft 3s;
  -o-animation: flyLeft 3s;
  opacity: 1;
}
@keyframes flyLeft {
  from {
    opacity: 0;
    left: 3.02083rem;
  }
  to {
    opacity: 1;
    left: 0.58333rem;
  }
}
.product .product-banner-three-list-item.center > img {
  width: 2.39583rem;
  height: 3.04688rem;
  bottom: 0;
  left: 0.32292rem;
}
.product .product-banner-three-list-item.right > img {
  width: 1.41667rem;
  height: 2.99479rem;
  left: 0.8125rem;
  top: 0.46875rem;
}
.product .product-banner-three-list-item.right > img.right-animation {
  animation: flyRight 3s;
  -moz-animation: flyRight 3s;
  -webkit-animation: flyRight 3s;
  -o-animation: flyRight 3s;
  opacity: 1;
}
@keyframes flyRight {
  from {
    opacity: 0;
    left: -1.5625rem;
  }
  to {
    opacity: 1;
    left: 0.8125rem;
  }
}
.product .product-banner-three .center-animation {
  animation: flyCenter 3s;
  -moz-animation: flyCenter 3s;
  -webkit-animation: flyCenter 3s;
  -o-animation: flyCenter 3s;
  opacity: 1 !important;
}
@keyframes flyCenter {
  from {
    opacity: 0;
    bottom: -3.04688rem;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}
.product .product-banner-three-content {
  width: 9.54167rem;
  margin: 0 auto;
  height: 4.73438rem;
  color: #FFFFFF;
  align-items: center;
  background: linear-gradient(55deg, #161616, #151532, #2f0b28);
}
.product .product-banner-three-content .right {
  width: 3.28125rem;
}
.product .product-banner-three-content .left > img {
  width: 3.44792rem;
  height: 3.58854rem;
  margin-right: 1.1875rem;
}
.product .product-banner-three-content .product-banner10 {
  width: 3.73958rem !important;
  height: 1.6875rem !important;
  margin-right: 0.77083rem !important;
}
.product .product-banner-three-content .product-banner8 > img {
  width: 3.23438rem;
  height: 3.70313rem;
}
.product .product-banner-three-content .product-banner14 > img {
  width: 4.17188rem;
  height: 2.55208rem;
}
.product .product-banner-three-content-list {
  margin-top: 0.26042rem;
  font-size: 0.125rem;
  opacity: 0.5;
}
.product .product-banner-three-content-list > li {
  margin-bottom: 0.05208rem;
}
.product .product-banner-three-content .pinzhi-box {
  width: 2.6875rem;
  height: 3.13021rem;
  margin-right: 2.1875rem;
  position: relative;
}
.product .product-banner-three-content .pinzhi-box.left > img {
  width: 1.47396rem;
  height: 3.13021rem;
  position: absolute;
  left: 1.5rem;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi {
  z-index: 6;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi1 {
  width: 2.26563rem;
  height: 3.33854rem;
  left: 1.04167rem;
  top: -0.20313rem;
  z-index: 5;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi2 {
  width: 2.86458rem;
  height: 3.23438rem;
  left: 0.71354rem;
  top: -0.17188rem;
  z-index: 4;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi3 {
  width: 3.23438rem;
  height: 2.85938rem;
  left: 0.52083rem;
  top: -0.05208rem;
  z-index: 3;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi4 {
  width: 3.33854rem;
  height: 2.27083rem;
  z-index: 2;
  left: 0.44271rem;
  top: 0.20833rem;
}
.product .product-banner-three-content .pinzhi-box.left > .pinzhi5 {
  width: 3.16667rem;
  height: 1.49479rem;
  left: 0.52083rem;
  top: 0.58333rem;
}
@keyframes changeBig {
  from {
    opacity: 0;
    width: 0.00521rem;
    height: 0.00521rem;
    top: 0.78125rem;
    left: 0.78125rem;
  }
  to {
    opacity: 1;
    width: 2.6875rem;
    height: 2.57813rem;
    top: 0;
    left: 0;
  }
}
.product .product-banner-three-content.last {
  width: 100%;
}
.product .product-banner-three-content-off {
  padding: 0.15625rem 0;
  margin: 0 0.22917rem;
}
.product .product-banner-three-content-off .left {
  width: 5.02604rem;
  height: 3.83854rem;
  margin-left: 0.18229rem;
}
.product .product-banner-three-content-off .left > img {
  width: 100%;
  height: 100%;
}
.product .product-banner-three-content-off .left.product-banner12-left {
  background: linear-gradient(-90deg, #8719dc, #5132d8);
  position: relative;
  overflow: hidden;
}
.product .product-banner-three-content-off .left.product-banner12-left > img {
  width: 3.96875rem;
  height: 2.51563rem;
  position: absolute;
  opacity: 0;
  bottom: 0;
}
.product .product-banner-three-content-off .left.product-banner9-left {
  background: linear-gradient(-90deg, #300B28, #0C132A);
  text-align: center;
}
.product .product-banner-three-content-off .left.product-banner13 {
  background: linear-gradient(-30deg, #27078A, #360F39, #200939, #0B0244);
  align-items: center;
  margin-top: 0.01563rem;
}
.product .product-banner-three-content-off .left.product-banner13 > img {
  width: 3.67708rem;
  height: 3.125rem;
}
.product .product-banner-three-content-off .left .product-banner9 {
  width: 3.82813rem;
  height: 3.83854rem;
}
.product .product-banner-three-content-off .right {
  width: 4.33333rem;
  background: linear-gradient(-90deg, #0C132A, #300B28);
  padding: 0.98958rem 0 0 0.9375rem;
  box-sizing: border-box;
}
.product .product-banner-three-content-off .right.product-banner12-right {
  background: linear-gradient(90deg, #8719dc, #5132d8);
}
.product .product-banner-three-content-off .right.product-banner12-right > .product-banner-three-btn {
  background: linear-gradient(90deg, #c110ff, #8041ff, #8041ff, #6ae6ff);
}
.product .product-banner-three-content-off .right.product-banner12-right > .product-banner-three-btn > button {
  background: #7A1FDB;
}
.product .product-banner-three-content-off .right.product-banner12-right > .product-banner-three-btn > button:hover {
  background: none;
}
.product .product-banner-three-content-off .right.product-banner13-right {
  background: linear-gradient(-30deg, #090056, #1A0739, #310E39, #320D58);
}
.product .product-banner-three-content-off .right.product-banner13-right > .product-banner-three-btn > button {
  background: #230A39;
}
.product .product-banner-three-content-off .right.product-banner13-right > .product-banner-three-btn > button:hover {
  background: none;
}
.product .content-wrap {
  width: 6.14583rem;
  margin: 0 auto;
  padding-top: 0.52083rem;
}
.product .content-wrap .content-box {
  margin-left: auto;
  width: 2.55208rem;
  display: flex;
  flex-direction: column;
}
.product .content-wrap .content-box.right {
  margin-left: 0;
  width: 100%;
  margin-right: auto;
  align-items: center;
  text-align: center;
}
.product .content-wrap .content-box .content-title {
  font-size: 0.25rem;
  color: #333333;
  font-weight: bold;
  line-height: 0.34896rem;
  justify-content: center;
}
.product .content-wrap .content-box .content-title.white {
  color: #FFFFFF;
}
.product .content-wrap .content-box .content-img {
  height: 2.71354rem;
  width: 2.70833rem;
  margin-top: 0.33854rem;
  background-image: url("https://chargespot.oss-accelerate.aliyuncs.com/chargespot/img_battery_design.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.product .content-wrap .content-box .content-descript {
  margin: 0.15625rem 0;
  width: 4.07813rem;
  font-size: 0.08333rem;
  color: #666666;
  font-weight: 500;
  line-height: 0.14583rem;
}
.product .content-wrap .content-box .content-descript.white {
  color: #FFFFFF;
}
.product .content-wrap .content-box .content-split {
  width: 0.15625rem;
  height: 0.02083rem;
  background: #0591b4;
}
.product .content-wrap .content-box .content-split.white {
  background: #FFFFFF;
}
.product .banner-title {
  font-size: 0.25rem;
  color: #333333;
  font-weight: bold;
  text-align: center;
  line-height: 0.34896rem;
  padding-top: 0.52083rem;
}
.product .banner-title.white {
  color: #ffffff;
}
.product .banner-descript {
  width: 3.52604rem;
  font-size: 0.08333rem;
  color: #666666;
  text-align: center;
  line-height: 0.14583rem;
  margin: 0.15625rem auto;
}
.product .banner-descript.white {
  color: #ffffff;
}
.product .banner-descript.white.bottom {
  margin: 0.88542rem auto 0.52083rem auto;
}
.product .banner-descript.max {
  width: 4.27604rem;
}
.product .banner-split {
  background: #0591B4;
  width: 0.15625rem;
  height: 0.02083rem;
  margin: 0 auto;
}
.product .banner-split.white {
  background: #ffffff;
}
.product .content-recycler-imgs {
  display: flex;
  margin-top: 0.79688rem;
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.product .content-recycler-imgs span {
  width: 0.15625rem;
  height: 0.15625rem;
  background-image: url("https://chargespot.oss-accelerate.aliyuncs.com/chargespot/icon_cha.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0.59896rem;
}
@keyframes slideDown2 {
  0% {
    d: path("M390,0c14,0,28,0,42,0c0,249.64,0,499.36,0,749c224.64,240.64,449.36,481.36,674,722c-34.65, 61.37-62.15, 128.17-91, 194c-49.76, 113.55-103.4, 226.64-154, 342c-132.68, 302.48-272, 605.74-399, 912c-17.33, 0-34.67, 0-52, 0 c148.32-339.97, 296.68-680.03, 445-1020c64.99-142.65, 130.01-285.35, 195-428c-219.98-240.64-440.02-481.36-660-722 C390, 499.36, 390, 249.64, 390, 0z");
  }
  100% {
    d: path("M390,0c14,0,28,0,42,0c0,249.64,0,499.36,0,749c224.64,240.64,449.36,481.36,674,722c-34.65, 61.37-62.15, 128.17-91, 194c-49.76, 113.55-103.4, 226.64-154, 342c-132.68, 302.48-272, 605.74-399, 912c-17.33, 0-34.67, 0-52, 0 c148.32-339.97, 296.68-680.03, 445-1020c64.99-142.65, 130.01-285.35, 195-428c-219.98-240.64-440.02-481.36-660-722 C390, 499.36, 390, 249.64, 390, 0z");
  }
}

.coverflow-swiper-container-wrap {
  padding: 0.51042rem 0;
  position: relative;
  background: #F5F5F7;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container {
  position: relative;
  width: 8.17188rem;
  margin: 0 auto;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .coverflow-swiper-container-body {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-slide-shadow-left,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-slide-shadow-right {
  background-image: linear-gradient(to left, rgba(229, 229, 229, 0.4), rgba(229, 229, 229, 0));
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide-prev,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-no-swiping,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide-duplicate-prev {
  transform: translate3d(0, 0, -0.52083rem) rotateX(0deg) rotateY(50deg) !important;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide-next {
  transform: translate3d(0, 0, -0.52083rem) rotateX(0deg) rotateY(-50deg) !important;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide {
  height: 100%;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-next,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev {
  top: 0.625rem;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-card-title,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-card-text {
  display: none;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card {
  background-color: #e5e5e5;
  overflow: hidden;
  cursor: pointer;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .swiper-card-content {
  display: none;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .tile-meida {
  position: relative;
  width: 100%;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .tile-meida .play_video_btn {
  position: absolute;
  width: 0.28646rem;
  height: 0.28646rem;
  background-image: url(/static/img/play_veido_btn.png);
  background-size: 0.26042rem 0.26042rem;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0.70313rem;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.3s;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .tile-meida::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: background-color 250ms ease;
  z-index: 6;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .tile-meida .tile-meida-image .tile-meida-image-box {
  position: relative;
  width: 5.20833rem;
  height: 2.92969rem;
  transition: height 250ms ease;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .swiper-slide-card .tile-meida .tile-meida-image .tile-meida-image-box .tile-meida-image-asset {
  position: absolute;
  top: 0;
  width: 5.20833rem;
  height: 2.92969rem;
  left: 0;
  background-size: 100% auto;
  transition: opacity 1s ease-out, transform 250ms ease, background-size 250ms ease;
  background-position: center center;
  background-repeat: no-repeat;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {
  width: auto !important;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) !important;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-card-title {
  display: block;
  color: #333333;
  font-size: 0.1875rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 0.21875rem;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-card-title-line {
  display: flex;
  margin-top: 0.05208rem;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-card-text {
  display: inline-block;
  margin-right: 0.08333rem;
  font-size: 0.08333rem;
  color: #666666;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card {
  background: #ffffff;
  border-radius: 0.07813rem;
  padding: 0.08333rem;
  padding-bottom: 0;
  position: relative;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card:hover .tile-meida::after {
  background-color: rgba(0, 0, 0, 0.25);
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card:hover .tile-meida.video .play_video_btn {
  opacity: 1;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card:hover .tile-meida .tile-meida-image .tile-meida-image-box .tile-meida-image-asset {
  background-size: 105% auto;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card:hover .swiper-card-content .swiper-card-content-box .swiper-tile-subhead {
  opacity: 1;
  margin-top: 0.08333rem;
  height: 0.29167rem;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card .swiper-card-content {
  display: block;
  position: relative;
  width: 100%;
  height: 0.52083rem;
  box-sizing: border-box;
  background-color: #fff;
  transition: transform 250ms ease;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card .swiper-card-content .swiper-card-content-box {
  position: absolute;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.21354rem 0.06771rem;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 7;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card .swiper-card-content .swiper-card-content-box .swiper-tile-subhead {
  position: relative;
  opacity: 0;
  height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.08333rem;
  line-height: 0.14583rem;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  color: #6e6e73;
  padding: 0;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card .coverflow-swiper-img {
  width: 5.07813rem;
  height: 2.28125rem;
  border-radius: 0.07813rem 0.07813rem 0 0;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .swiper-slide-card .video-play {
  width: 0.3125rem;
  height: 0.3125rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .video-play {
  width: 0.3125rem;
  height: 0.3125rem;
  position: absolute;
  top: 40%;
  left: 32%;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev .video-play {
  left: 64%;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-img,
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-slider-video {
  width: 5.07813rem;
  height: 2.28125rem;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-slider-video {
  position: relative;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-slider-video .new-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 0.07813rem 0.07813rem 0 0;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-slider-video .coverflow-swiper-video {
  width: 5.07813rem;
  height: 2.28125rem;
  display: none;
}
.coverflow-swiper-container-wrap .coverflow-swiper-container .swiper-wrapper .swiper-slide .coverflow-swiper-slider-video .coverflow-swiper-video > video {
  width: 100%;
  height: 100%;
  background: #000000;
  border-radius: 0.07813rem 0.07813rem 0 0;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button {
  outline: none;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
  opacity: 0.8;
  width: 0.27083rem;
  height: 0.27083rem;
  border: 0.01042rem solid #00aaee;
  border-radius: 50%;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button:hover {
  background: #00a2ff;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button:before {
  content: "";
  width: 0.08333rem;
  height: 0.08333rem;
  position: absolute;
  border-left: 0.01042rem solid #00AAEE;
  border-bottom: 0.01042rem solid #00AAEE;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button:hover:before {
  border-left: 0.01042rem solid #fff;
  border-bottom: 0.01042rem solid #fff;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button.coverflow-swiper-button-prev {
  left: -0.5625rem;
  right: auto;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button.coverflow-swiper-button-prev::before {
  top: 50%;
  left: 40%;
  -webkit-transform: translate(0, -50%) rotate(40deg);
  transform: translate(0, -50%) rotate(40deg);
}
.coverflow-swiper-container-wrap .coverflow-swiper-button.coverflow-swiper-button-next {
  right: -0.5625rem;
  left: auto;
}
.coverflow-swiper-container-wrap .coverflow-swiper-button.coverflow-swiper-button-next::before {
  top: 50%;
  right: 40%;
  -webkit-transform: translate(0, 50%) rotate(-135deg);
  transform: translate(0, -50%) rotate(-135deg);
}
.coverflow-new-video {
  position: fixed;
  width: 6.25rem;
  height: 3.125rem;
  z-index: 99;
  top: 28%;
  margin: 0 auto;
  left: 0;
  right: 0;
  background: #000000;
}
.coverflow-new-video .new-video-box {
  position: relative;
}
.coverflow-new-video .new-video-box > .video-react-controls-enabled {
  padding-top: 50% !important;
}
.coverflow-new-video .new-video-box > .video-react-controls-enabled .video-react-big-play-button {
  display: none;
}
.coverflow-new-video .new-video-box > .react-video {
  width: 100%;
  height: 100%;
}
.coverflow-new-video .new-video-box > .video_play {
  width: 0.26042rem;
  height: 0.26042rem;
  background-image: url("/static/img/video_close.png");
  background-size: 100% 100%;
  position: absolute;
  top: -0.13021rem;
  right: -0.28646rem;
}

.using {
  background-color: #E9F0F2;
}
.using .video-react-play-progress:before {
  top: -0.46em;
}
.using .video-react-progress-control:hover .video-react-play-progress:before {
  top: -0.33333333em;
}
.using-head {
  height: 0.52083rem;
}
.using-title {
  background-color: #fff;
}
.using-title-body {
  width: 6.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.using-title-right {
  margin-left: auto;
}
.using-title-right button {
  padding: 0.02604rem 0.16146rem;
  line-height: 0.14583rem;
  color: #333333;
  font-size: 0.09375rem;
  border-radius: 0.09375rem;
  background: #F6F6F6;
  transition: transform 0.2s linear;
}
.using-title-right button:hover {
  transform: translateY(-0.01042rem);
}
.using-title-right button:nth-child(2) {
  margin: 0 0.10417rem;
}
.using-title-right button.active {
  background: #242526;
  color: #fff;
  font-weight: bold;
}
.using-title-left {
  height: 0.625rem;
  line-height: 0.625rem;
  display: flex;
}
.using-title-left > .big {
  font-size: 0.23958rem;
  color: #333333;
  font-weight: bold;
}
.using-title-left > .small {
  font-size: 0.13542rem;
  color: #333333;
  margin-top: 1%;
  margin-left: 0.05208rem;
}
.using .using-waterfall {
  padding: 0 1.92708rem;
}
.using .using-content {
  position: relative;
  padding-top: 0.39063rem;
  background: #f9f9f9;
}
.using .using-content .using-body {
  position: relative;
  width: 6.25rem;
  padding-bottom: 0.46875rem;
  margin: 0 auto;
}
.using .using-content .using-body-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0;
  margin: 0;
  width: 100%;
}
.using .using-content .using-body-list .new-video {
  display: none;
  position: fixed;
  width: 6.25rem;
  height: 3.125rem;
  z-index: 99;
  top: 28%;
  left: 22.5%;
  background: #000000;
}
.using .using-content .using-body-list .new-video .new-video-box {
  position: relative;
}
.using .using-content .using-body-list .new-video .new-video-box > .video-react-controls-enabled {
  padding-top: 50% !important;
}
.using .using-content .using-body-list .new-video .new-video-box > .video-react-controls-enabled .video-react-big-play-button {
  display: none;
}
.using .using-content .using-body-list .new-video .new-video-box > .react-video {
  width: 100%;
  height: 100%;
}
.using .using-content .using-body-list .new-video .new-video-box > .video_play {
  width: 0.26042rem;
  height: 0.26042rem;
  background-image: url("/static/img/video_close.png");
  background-size: 100% 100%;
  position: absolute;
  top: -0.13021rem;
  right: -0.28646rem;
}
.using .using-content .using-body-list-item-link {
  width: 50%;
}
.using .using-content .using-body-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.02604rem;
  margin-bottom: 0.10938rem;
  height: 2.60417rem;
  overflow: hidden;
}
.using .using-content .using-body-list-item::before {
  content: ' ';
  display: table;
}
.using .using-content .using-body-list-item:hover {
  cursor: pointer;
}
.using .using-content .using-body-list-item:hover .tile-meida::after {
  background-color: rgba(0, 0, 0, 0.25);
}
.using .using-content .using-body-list-item:hover .tile-meida.video .play_video_btn {
  opacity: 1;
}
.using .using-content .using-body-list-item:hover .tile-meida .tile-meida-image .tile-meida-image-box .tile-meida-image-asset {
  background-size: auto 105%;
}
.using .using-content .using-body-list-item:hover .using-body-list-item-content {
  justify-content: flex-start;
}
.using .using-content .using-body-list-item:hover .tile-subhead {
  opacity: 1;
  margin-top: 0.08333rem;
  height: 0.25rem;
}
.using .using-content .using-body-list-item .new-box {
  width: 100%;
  height: 1.88542rem;
  position: relative;
}
.using .using-content .using-body-list-item .new-box > .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.3125rem !important;
  height: 0.3125rem;
}
.using .using-content .using-body-list-item .tile-meida {
  position: relative;
  width: 100%;
}
.using .using-content .using-body-list-item .tile-meida .play_video_btn {
  position: absolute;
  width: 0.28646rem;
  height: 0.28646rem;
  background-image: url(/static/img/play_veido_btn.png);
  background-size: 0.26042rem 0.26042rem;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0.59896rem;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.3s;
}
.using .using-content .using-body-list-item .tile-meida::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: background-color 250ms ease;
  z-index: 6;
}
.using .using-content .using-body-list-item .tile-meida .tile-meida-image .tile-meida-image-box {
  position: relative;
  width: 100%;
  height: 1.88542rem;
  transition: height 250ms ease;
}
.using .using-content .using-body-list-item .tile-meida .tile-meida-image .tile-meida-image-box .tile-meida-image-asset {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1.88542rem;
  left: 0;
  background-size: auto 100%;
  transition: opacity 1s ease-out, transform 250ms ease, background-size 250ms ease;
  background-position: center center;
  background-repeat: no-repeat;
}
.using .using-content .using-body-list-item .new-img {
  height: 1.88542rem;
  overflow: hidden;
  border-radius: 0.02604rem;
}
.using .using-content .using-body-list-item .new-img > img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 100%;
}
.using .using-content .using-body-list-item .tile-subhead {
  position: relative;
  opacity: 0;
  height: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 0.0625rem;
  line-height: 0.125rem;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  color: #6e6e73;
  margin: 0 0.125rem;
}
.using .using-content .using-body-list-item-content {
  position: relative;
  padding: 0.125rem;
  width: 100%;
  height: 0.78125rem;
  box-sizing: border-box;
  background-color: #fff;
  transition: transform 250ms ease;
}
.using .using-content .using-body-list-item-content .using-body-list-item-content-box {
  position: absolute;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.125rem 0;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 7;
}
.using .using-content .using-body-list-item-content .tile-head {
  padding: 0 0.125rem;
}
.using .using-content .using-body-list-item-content .tile-head .category-eyebrow {
  letter-spacing: 0em;
}
.using .using-content .using-body-list-item-content .tile-head .category-eyebrow > label {
  color: #0B97CF;
  border-color: #0B97CF;
  font-size: 12PX;
}
.using .using-content .using-body-list-item-content .tile-head .tile-content-headline {
  font-size: 0.10938rem;
  line-height: 1.19048;
  font-weight: 600;
  letter-spacing: 0.011em;
  margin-top: 0.02604rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: black;
}
.using .using-content .using-body-list-item-content .tile-date {
  padding: 0 0.125rem;
  margin-top: 0.08333rem;
  font-size: 12PX;
  line-height: 1.33337;
  font-weight: 400;
  color: #6e6e73;
  letter-spacing: 0em;
}
.using .using-content .using-body-list-item-content .new-type {
  font-size: 0.07292rem;
  color: #0B97CF;
  margin-bottom: 0.06771rem;
}
.using .using-content .using-body-list-item-content .new-title {
  color: #000000;
  font-size: 0.11458rem;
  font-weight: bold;
  line-height: 0.1875rem;
}
.using .using-content .using-body-list-item-content .new-time {
  font-size: 0.07292rem;
  color: #6B6B70;
  margin: 0.05729rem 0 0.04688rem;
}
.using .using-content .using-body-list-item-content .new-abstract {
  line-height: 0.14583rem;
  color: #6B6B70;
  transform: translate3d(0, 0.10417rem, 0);
}
.using .using-content .using-body-list-item-content .new-abstract > p {
  font-size: 0.07292rem;
  word-wrap: break-word;
}
.using .using-content .using-body-list-item:hover {
  box-shadow: 0 0.02083rem 0.16146rem 0.00521rem rgba(0, 0, 0, 0.14);
}
.using .using-content .using-body-list-item:hover.square .new-abstract {
  opacity: 1 !important;
}
.using .using-content .using-body-list-item:hover .new-img {
  animation: showAbstract 0.3s linear;
  -webkit-animation: showAbstract 0.3s linear;
}
@keyframes showAbstract {
  0% {
    height: 1.88542rem;
  }
  100% {
    height: 1.47917rem;
  }
}
@keyframes hiddenAbstract {
  0% {
    height: 1.47917rem;
  }
  100% {
    height: 1.88542rem;
  }
}
.using .using-content .using-body-list .rectangle {
  flex: 1;
  background: #ffffff;
  border-radius: 0.02604rem;
  margin-right: 0.11979rem;
  box-sizing: border-box;
}
.using .using-content .using-body-list .rectangle .new-abstract {
  margin-right: 0.43229rem;
}
.using .using-content .using-body-list .rectangle .new-abstract > span {
  font-size: 0.07292rem;
}
.using .using-content .using-body-list .rectangle2 {
  margin-right: auto;
  margin-left: 0.11979rem;
}
.using .using-content .using-body-list .square {
  background: #ffffff;
  border-radius: 0.02604rem;
  flex: 1;
}
.using .using-content .using-body-list .square .new-abstract {
  opacity: 0;
}
.using .using-content .using-body-list .square > .new-img > img {
  width: 100%;
}
.using .using-content .using-body-list .average-left {
  width: 3.14063rem;
  background: #ffffff;
  border-radius: 0.02604rem;
  margin-right: 0.11979rem;
}
.using .using-content .using-body-list .average-left .using-body-list-item-content {
  padding-right: 0.625rem;
}
.using .using-content .using-body-list .average-left > .new-img > img {
  width: 100%;
}
.using .using-content .using-body-list .average-right {
  width: 2.96875rem;
  background: #ffffff;
  border-radius: 0.02604rem;
}
.using .using-content .using-body-list .average-right > .new-img > img {
  width: 100%;
}
.using .using-content .white_more_mask {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.64063rem;
  background-image: url(/static/img/white_mask_more.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 8;
  width: 100%;
}
.using .using-content .more {
  position: relative;
  color: #1078DB;
  font-size: 0.11458rem;
  text-align: center;
  padding-bottom: 0.40104rem;
  z-index: 9;
  cursor: pointer;
}
@keyframes abstractShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sem-anget-container img {
  display: block;
  width: 100vw;
}
.sem-apply {
  position: relative;
}
.sem-apply-box {
  position: absolute;
  top: 2.08333rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.sem-apply-box .toast-box {
  position: fixed;
  font-size: 0.44792rem;
  color: #FFFFFF;
  width: 6.73438rem;
  height: 0.98958rem;
  background: rgba(1, 1, 1, 0.6);
  border-radius: 0.07813rem;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 1;
}
.sem-apply-box-content {
  background: transparent;
  font-size: 0.39063rem;
}
.sem-apply-box-body {
  width: 85%;
  margin: 0 auto;
}
.sem-apply-box-body .sem-apply-box-input-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.sem-apply-box-body .sem-apply-box-input-item {
  margin-bottom: 0.46875rem;
}
.sem-apply-box-body .sem-apply-box-input-item-label {
  font-weight: bold;
}
.sem-apply-box-body span {
  color: red;
}
.sem-apply-box-body input {
  width: 100%;
  margin-top: 0.10417rem;
  height: 1.04167rem;
  border-radius: 0.26042rem;
  text-indent: 0.15625rem;
  color: #333333;
  border: 0.00521rem solid #cccccc;
}
.sem-apply-box-body input::placeholder {
  font-size: 0.39063rem;
}
.sem-apply-box-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E82D34;
  margin: 0 auto;
  margin-top: 0.26042rem;
  color: #ffffff;
  font-size: 0.39063rem;
  width: 8.85417rem;
  height: 1.14583rem;
  border-radius: 1.04167rem;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 0.00391rem dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -0.00781rem;
  /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

a {
  color: #666666;
  text-decoration: none;
}
html {
  font-size: 16PX;
  font-family: "Noto Sans SC", Helvetica, "PingFangSC", "Microsoft Yahei", Arial, sans-serif;
}
#cnzz_stat_icon_1276191016 {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
font {
  font-size: 100%;
  font-weight: normal;
}
ul,
li {
  list-style-type: none;
}
button {
  background: none;
}
button:hover {
  cursor: pointer;
}
.common-title {
  color: #000000;
  font-size: 0.23958rem;
  text-align: center;
  font-weight: bold;
  line-height: 0.26042rem;
  display: none;
}
.common-logo > img {
  width: 100%;
  height: 100%;
}
.common-title-sub {
  text-align: center;
  margin-top: 0.09896rem;
  color: #404040;
  font-size: 0.15625rem;
  font-weight: bold;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.09375rem;
  color: #A6A6A6;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 0.09375rem;
  color: #A6A6A6;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 0.09375rem;
  color: #A6A6A6;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 0.09375rem;
  color: #A6A6A6;
}
.common-flex {
  display: flex;
  justify-content: center;
}
.common-flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.common-btn {
  cursor: pointer;
}
.common-btn > img {
  margin-left: 0.08854rem;
}
.common-btn:hover {
  color: #ffffff;
  box-shadow: none;
  font-weight: bold;
  transform: translate3d(0, -0.00521rem, 0);
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
  background: linear-gradient(-90deg, #0bfc6e, #63def5);
}
.common-btn-bg {
  background: linear-gradient(90deg, #1162f0, #761f99);
  color: #FFFFFF;
  font-size: 0.09375rem;
}
.common-btn-bg:hover {
  transform: translate3d(0, -0.01042rem, 0);
  transition: transform 0.3s linear;
  -webkit-transition: transform 0.3s linear;
  font-weight: bold;
}
.common-btn-bd {
  font-size: 0.09375rem;
  padding: 0.01042rem;
  color: #454545;
  text-align: center;
  background: linear-gradient(-90deg, #c110ff, #8041ff, #8041ff, #6ae6ff);
}
.common-btn-bd > button {
  background: #ffffff;
}
.common-btn-bd > button:hover {
  background: none;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.common-btn-bd:hover {
  background: linear-gradient(90deg, #78ffff, #805aff, #c41fff);
  box-shadow: 0 0.01042rem 0.05208rem 0 rgba(255, 255, 255, 0.34);
  color: #ffffff;
  transition: transform 0.2s linear;
  transform: translate3d(0, -0.00521rem, 0);
  -webkit-transition: transform 0.2s linear;
}
input,
textarea,
button {
  color: inherit;
  font: inherit;
  margin: 0;
  outline: none;
  border: none;
  line-height: normal;
}
button {
  text-transform: none;
}
.show {
  display: block;
}
.hidden {
  display: none;
}
.maodianTop {
  position: absolute;
  top: -0.49479rem;
  width: 0.52083rem;
  height: 0.52083rem;
}
@font-face {
  font-family: "Century Gothic";
  src: url(/static/font/CenturyGothic.TTF);
}
@font-face {
  font-family: "Noto Sans SC";
  src: url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"');
  font-display: swap;
}
.video-react .video-react-big-play-button {
  width: 0.41667rem;
  height: 0.41667rem;
  border-radius: 50%;
  background: none;
  border: 0.01042rem solid #00aaee;
}
.video-react .video-react-big-play-button::before {
  top: 0.05208rem;
  font-size: 0.23438rem;
  color: #00aaee;
}
.video-react:hover .video-react-big-play-button {
  background: none;
  border: 0.01042rem solid #00aaee;
}


/*# sourceMappingURL=styles.8f694a3e.chunk.css.map*/