body {
  min-height: 100vh;
  background: #fff url('https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg.jpg') no-repeat center top /100% 98%;
  /* background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg2.png) no-repeat center top; */
}

.is-mobile-only {
  display: none;
}

h1 {
  position: absolute;
  width: 10px;
  overflow: hidden;
  padding-left: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
}

.page-sy-download {
  // position: fixed;
  // width: 100vw;
  // height: 100vh;
  // left: 0;
  // top: 0;
}


.animation-block {
  opacity: 0;
  transform: translateY(20%);
  // transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1),
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1);

}

.animation-block.is-visible {
  opacity: 1;
  transform: translateY(0);

}

.btn-linear-border {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: .4rem;
  border-radius: 22px;
  text-align: center;
  color: #1174C6;
  font-size: 1.4rem;
  background: linear-gradient(to right, #3ddede, #1174c6);
  transform: perspective(0);
  transition: transform linear .2s;
}

.btn-linear-border:hover {
  transform: translate3d(0, -8%, 0);
}

.btn-linear-border::before {
  content: "";
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  top: 1px;
  left: 1px;
  border-radius: 22px;
  // background: linear-gradient(45deg, red, blue); /* 渐变背景 */
  z-index: -1;
  /* 确保阴影在内容之下 */
  border-radius: inherit;
  /* 继承父元素的边框圆角 */
  background: #fff;
}

.btn-linear-border:hover {
  color: #fff;
}

.btn-linear-border:hover::before {
  opacity: 0;
}

.btn-download-small {
  width: 10.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
}

.btn-download-big {
  width: 14rem;
  height: 4.4rem;
  line-height: 4.4rem;
  font-size: 1.6rem;
}

.main-container {
  overflow: hidden;

}

.section {
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  /* background: rgba(255, 255, 255, .8); */
}

.text-linear {
  background: linear-gradient(to right, #2FCED0 0%, #23C3D1 42.48046875%, #1174C6 100%) right center /150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-linear-gold {
  background: linear-gradient(-90deg, #F0830F, #FFD254) right center /150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  font-size: 3.6rem;
  text-align: center;
  line-height: 1em;
  font-weight: bold;
  transform: translateY(100%);
  // opacity: 0;
  // transform: translateY(20px);
  // // transition: opacity 0.6s ease-out, transform 0.6s ease-out;

  // transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1),
  //   transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1);
}

.section-title.is-visible {
  // opacity: 1;
  // opacity: 1;
  // transform: translateY(0);
}

.section-title .style-blue {}

.section-sub-title {
  margin: 2.6rem 0 0;
  font-size: 1.8rem;
  color: #666;
  line-height: 2.6rem;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1),
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.1);
}

.section-sub-title.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-sub-title em {
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(90deg, #2FCED0, #22CBDA, #1174C6) right center /150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2rem;
  font-weight: bold;
}

.svg-box {
  // width: 1200px;
  // margin: auto;
  // position: absolute;
  // top: 181px;
  // left: -15px;
  z-index: 5
}

.text-box {
  width: 584px;
  height: 72px;
  font-size: 7.2rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  clip-path: url(#svgTextPath);
  color: white;
  // background: #3DCD58;
  background: linear-gradient(to right, #2FCED0 0%, #23C3D1 42.48046875%, #1174C6 100%) right center /150%;
  // opacity: 0;
  // transform: translateX(-100%);
  // animation: leftIn 0.8s;
  // animation-delay: 0.7s;
  // animation-fill-mode: forwards
}

.text-box2 {
  width: 557px;
  height: 174px;
  position: relative
}

.dot {
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 0%;
  top: 0%;
  opacity: 0.9;
  transform: translate(-50%, -50%)
}

// .dot:nth-child(1) {
//   width: 150px;
//   height: 150px;
//   background: rgba(98, 255, 131, 0.7);
//   z-index: 8
// }

// .dot:nth-child(2) {
//   width: 300px;
//   height: 300px;
//   background: rgba(30, 255, 178, 0.7);
//   z-index: 7
// }

// .dot:nth-child(3) {
//   width: 500px;
//   height: 500px;
//   background: rgba(15, 141, 103, 0.7);
//   z-index: 6
// }

.dot:nth-child(1) {
  width: 150px;
  height: 150px;
  background: #1ecf94;
  z-index: 8
}

.dot:nth-child(2) {
  width: 300px;
  height: 300px;
  background: #1cccc3;
  z-index: 7
}

.dot:nth-child(3) {
  width: 500px;
  height: 500px;
  background: #129bf7;
  z-index: 6
}

.text-box2.ani1 {
  animation: roundAni 5s linear infinite;
  transform-origin: 50% -10%
}

.text-box2.ani3 {
  animation: roundAni2 12s linear infinite
}

.text-box2.ani2 {
  animation: roundAni3 8s linear infinite
}

@keyframes roundAni {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes roundAni

/* Safari 和 Chrome */
  {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes roundAni2 {
  0% {
    transform: translate(600px, 350px)
  }

  25% {
    transform: translate(450px, -300px)
  }

  50% {
    transform: translate(300px, 350px)
  }

  75% {
    transform: translate(150px, -300px)
  }

  100% {
    transform: translate(0, 0)
  }
}

@keyframes roundAni3 {
  0% {
    transform: translate(0, 0)
  }

  33% {
    transform: translate(600px, 0)
  }

  66% {
    transform: translate(0px, 200px)
  }

  100% {
    transform: translate(600px, 350px)
  }
}

.section1 {
  display: flex;
  align-items: stretch;
  ;
  width: 100%;
  max-width: 151.6rem;
  // height: 60rem;
  padding-top: 11rem;
  gap: 1rem;
  /* background: rgba(255, 255, 255, .8); */
  // background: #fff;
  box-sizing: border-box;
}

.section1 .col-left {
  position: relative;
  flex: none;
  margin: 0 0 0 6.2rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity ease-in-out 1s;
}

.section1.is-active .col-left {
  opacity: 1;
}

.section1.is-active .col-left .logo {
  width: 36.5rem;
}

.section1 .slogan {
  height: 72px;
  margin: 3.2rem 0 0;
  font-weight: bold;
  font-size: 7.2rem;
  color: #2297C7;
  line-height: 7.2rem;
  background: linear-gradient(to right, #2FCED0 0%, #23C3D1 42.48046875%, #1174C6 100%) right center /150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
  // opacity: .6;
}


// .section1 .slogan {
//   margin: 3.2rem 0 0;
//   font-weight: bold;
//   font-size: 7.2rem;
//   color: #2297C7;
//   line-height: 7.2rem;
//   background: linear-gradient(to right, #2FCED0 0%, #23C3D1 42.48046875%, #1174C6 100%) right center /150%;
//   -webkit-background-clip: text;
//   -webkit-text-fill-color: transparent;
//   // opacity: .6;
//     // width: 478px;
//     // height: 210px;
//     // font-size: 7.2rem;
//     font-weight: bold;
//     text-transform: uppercase;
//     position: relative;
//     overflow: hidden;
//     // clip-path: url(#svgTextPath);
//     color: white;
//     // background: #3DCD58;
//     opacity: 0;
//     transform: translateX(-100%);
//     animation: leftIn 0.8s;
//     animation-delay: 0.7s;
//     animation-fill-mode: forwards;
// }

/* .section1 .logo,
.section1 .slogan,
.section1 .sub-slogan,
.section1 .btn-download-wrap,
.section1 .title {
  opacity: .5;
  transition: transform ease-in-out .6s, opacity ease-in-out .6s;
  transform: translate3d(-1200px, 0, 0);
}

.section1.is-active .logo,
.section1.is-active .slogan,
.section1.is-active .sub-slogan,
.section1.is-active .btn-download-wrap,
.section1.is-active .title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section1.is-active .logo {
  transition-duration: .4s;
} */

.section1.is-active .slogan {
  // transition-delay: .1s;
  // transform: translate3d(-50%, 0, 0);
}

/* .section1.is-active .title {
  transition-delay: .2s;
}

.section1.is-active .sub-slogan {
  transition-delay: .3s;
}

.section1.is-active .btn-download-wrap {
  transition-delay: .4s;
} */


@keyframes leftIn {
  from {
    opacity: 0;
    transform: translateX(-100%)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.section1 .title {
  position: relative;
  margin: 3.4rem 0 0;
  font-size: 3.6rem;
  color: #333333;
  line-height: 3.5rem;

}

.section1 .title em {
  position: absolute;
  left: 26.8rem;
  bottom: 90%;
  width: 5rem;
  height: 2.8rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-icon.png) no-repeat center top /100% 100%;
}

.section1 .sub-slogan {
  margin: 2rem 0 0;
  font-size: 2.2rem;
  color: #666;
  line-height: 2.2rem;
}
.section1 .btn-wrap {
  font-size: 2.2rem;
}
.section1 .btn-wrap {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.section1 .tips-bowser {
  margin: 2rem 0 0;
  font-size: 14px;
  color: #666;
  font-size: 14px;
  word-break: break-all;
  white-space: break-spaces;
  // text-align: center;
}

.section1 .tips-bowser .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 2px 0 4px;
  vertical-align: baseline;
}

.section1 .tips-bowser > a {
  margin:0 4px;
  color: #4091ce;
  text-decoration: underline;
}

.section1 .btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: green;
  width: 21.5rem;
  height: 5.6rem;
  margin: 6rem 0 0;
  color: #FFFFFF;
  font-size: 1.8rem;
  background: linear-gradient(121deg, #3DDEDE 0%, #1174C6 100%);
  box-shadow: 0px .6rem 1.2rem 0px rgba(51, 185, 200, 0.27);
  border-radius: .4rem;
  transition: transform linear .2s;
}

.section1 .btn-download:hover {
  transform: translate3d(0, -10%, 0);
}

.section1 .btn-download .iconfont {
  display: inline-block;
  font-size: 2.2rem;
  line-height: 1em;
  transform: translate3d(0, .2rem, 0);
  // transition: linear .2s;
}

// .section1 .btn-download:hover .iconfont {
//   transform: translate3d(.5rem, .2rem, 0);

// }

.section1 .col-right {
  position: relative;
  flex: 1;
  width: 83.8rem;
}

.section1 .col-right img {
  position: absolute;
  width: 115%;
  left: -7.5%;
  top: 50%;
  opacity: 0;
  transform: translate3d(0, -16%, 0);
  transition: ease-in-out 1s;
}

.section1.is-active .col-right img {
  opacity: 1;
  transform: translate3d(0, -26%, 0);
}

.section1 .copy-link {
  position: relative;
  display: flex;
  width: 68.6rem;
  height: 6.8rem;
  margin: 8.8rem auto 0;
  background: #ffffff80;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  border: 1px solid #E6EFF580;
  visibility: hidden;
}

.copy-link {
  transform: translateY(100%);
  transition-delay: .2s;
}

.section1 .copy-link .txt-link {
  display: block;
  flex: 1;
  padding: 0 1.2rem 0 2rem;
  font-size: 2.4rem;
  color: #333333;
  overflow: hidden;
  line-height: 6.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section1 .copy-link .btn {
  flex: none;
  width: 23.6rem;
  height: 6.8rem;
  font-size: 2.4rem;
  color: #FFFFFF;
  line-height: 2.8rem;
  background: linear-gradient(121deg, #3DDEDE 0%, #1174C6 100%);
  border-radius: .6rem;
}

.section1 .copy-link .btn::after {
  border: none;
}

.section2 {
  position: relative;
  // display: flex;
  // align-items: flex-start;
  width: 100%;
  max-width: 156rem;
  // height: 70rem;
  margin: 27.2rem auto 0;
  /* background: rgba(255, 255, 255, .8); */
}

.section2 .section-sub-title {
  margin: 2.6rem 0 0;
  padding: 0 3rem;
  color: #222222;
  font-size: 1.8rem;
  line-height: 2.6rem;
  text-align: center;
}

.list-section2 {
  display: flex;
  justify-content: center;
  gap: 11.4rem;
  margin: 7.6rem 0 0;


}

.list-section2 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32.3rem;
  height: 26rem;
  background: linear-gradient(171deg, #EEF7FF 8%, #FCFEFF 81%);
  border-radius: 1rem;

}

.list-section2 .item .icon {
  width: 7.5rem;
  height: auto;
}

.list-section2 .item1 {
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-mian.png) no-repeat center top /cover;
}

.list-section2 .item2 {
  transition-delay: .2s;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-zhuan.png) no-repeat center top /cover;
}

.list-section2 .item3 {
  transition-delay: .4s;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-data.png) no-repeat center top /cover;
}

.list-section2 .item .title {
  margin: 3.2rem 0 0;
  font-weight: bold;
  font-size: 2rem;
  color: #333333;
  line-height: 3.2rem;

}

.list-section2 .item .desc {
  margin: 1.6rem 0 0;
  font-size: 1.6rem;
  color: #666;
  line-height: 2.4rem;
}

.section3 {
  width: 100%;
  max-width: 156rem;
  margin: 13rem auto 0;

}

.section3 .wrap {
  display: flex;
  align-items: flex-start;
  margin: 7.4rem auto 0;
  /* background: rgba(255, 255, 255, .8); */
  /* overflow: hidden; */
  width: 100%;
  max-width: 124rem;
  gap: 2rem;
  /* padding: 2rem; */
}

.section3 .col-left {
  flex: 1;
}

.list-video-introduce {}

.list-video-introduce .item {
  position: relative;
  padding: 1.8rem .8rem 1.2rem 2rem;
  cursor: pointer;
  overflow: hidden;
}

.list-video-introduce .item.is-active {
  // border-left: .4rem solid #33cee8;
  border-radius: 1rem;
  background: #f4faff;
}

.list-video-introduce .item.is-active::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background: #33CEE8;
}

.list-video-introduce .item:not(:last-child)::after {
  position: absolute;
  content: '';
  width: 48.2rem;
  height: 1px;
  left: 2.1rem;
  bottom: 0;
  // background: #e7eeee;
  background: linear-gradient(to right, #e7eeee 60%, rgba(255, 255, 255, 0));
}

.list-video-introduce .item .title {
  display: inline-block;
  font-weight: bold;
  font-size: 2.2rem;
  color: #333333;
  line-height: 1em;
}

.list-video-introduce .item.is-active .title {
  background: linear-gradient(to right, #2FCED0 0%, #23C3D1 42.48046875%, #1174C6 100%) right center /150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.list-video-introduce .item .sub-title {
  margin: 1.3rem 0 0;
  font-size: 1.6rem;
  color: #666;
  line-height: 2.4rem;
}

.list-video-introduce .item .btn {
  display: inline-block;
  margin: 1.2rem 0 .4rem;
}

.section3 .col-right {
  position: relative;
  flex: none;
  width: 59rem;
  height: 36.9rem;
  box-sizing: border-box;
}


.section3 .col-right .video-wrap {
  position: absolute;
  // left: .6rem;
  // top: .6rem;
  // width: calc(100% - 1.2rem);
  // height: calc(100% - 1.2rem);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: .6em;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(117deg, #3DDEDE, #1174C6);
  box-shadow: 0px 4px 14px 0px rgba(17, 152, 208, 0.3);
  opacity: 0;

}

.section3 .col-right .video-wrap::before {
  position: absolute;
  content: "";
  width: calc(100% - 1.6rem);
  height: calc(100% - 1.6rem);
  left: .8rem;
  top: .8rem;
  border-radius: 10px;
  background: #fff;
}

.section3 .col-right .video-wrap.is-active {
  opacity: 1;
}

.section3 .col-right video {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 4px;
  z-index: 2;
}

.section3 .col-right .video-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 4px;
  z-index: 3;
}

.section3 .col-right .video-poster .pic-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 4px;
}

.section3 .col-right .video-poster .icon-video {
  position: absolute;
  width: 10rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: .5rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 5rem;
  border-radius: 100%;
  text-align: center;
  color: #fff;
  border: 1rem solid #fff;
  // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  // filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

.section4 {
  /* width: 156rem; */
  margin: 12.8rem auto 0;
  padding: 4.4rem 0 3.6rem;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-process.jpg) no-repeat center top /cover;
}

.list-process {
  display: flex;
  justify-content: center;
  gap: 14rem;
  margin: 5rem 0 0;
  padding: 0 3.2rem;
}

.list-process .step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-process .step .icon {
  width: 12rem;
  height: 12rem;
  border-radius: 100%;
  background: #eef7ff;
}

.list-process .step1 .icon {
  background: #eef7ff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/step1.png) no-repeat center center /47%;
}

.list-process .step2 .icon {
  background: #eef7ff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/step2.png) no-repeat center center /47%;
}

.list-process .step3 .icon {
  background: #eef7ff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/step3.png) no-repeat center center /47%;
}

.list-process .step4 .icon {
  background: #eef7ff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/step4.png) no-repeat center center /47%;
}

.list-process .step5 .icon {
  background: #eef7ff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/step5.png) no-repeat center center /47%;
}

.list-process .step:not(:last-child)::before {
  position: absolute;
  content: '';
  width: 2.4rem;
  height: 2rem;
  left: 100%;
  margin: 5rem 0 0 5.7rem;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/icon-step.png) no-repeat center center /contain;

}

.list-process .step .title {
  margin: 2rem 0 0;
  font-size: 1.8rem;
  color: #666;
  text-align: center;
  line-height: 2.6rem;
}

.section5 {
  width: 100%;
  max-width: 156rem;
  padding-top: 12.8rem;
  /* background: rgba(255, 255, 255, .8); */
}

.section5 .pic-introduce {
  display: block;
  width: 92rem;
  margin: 3rem auto 0;
}

.section6 {
  width: 100%;
  max-width: 156rem;
  padding: 13rem 0 0;
  /* background: rgba(255, 255, 255, .8); */
}

.section6 .block {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 120rem;
  gap: 2.6rem;
  margin: 3rem auto;
  padding: 3rem 2rem;
  background: #F7FBFF;
  border-radius: 1rem;
  box-sizing: border-box;
  transition: transform ease-in-out .6s, opacity ease-in-out .6s;
  // transform: translate3d(-12%,0,0);
  // opacity: .5;
}

// .section6 .block.is-active {
//   transform: translate3d(0,0,0);
//   opacity: 1; 
// }
// .section6 .block2 {
//   transform: translate3d(12%,0,0);
//   transition-delay: .2s;
// }
// .section6 .block3 {
//   transform: translate3d(-12%,0,0);
//   transition-delay: .6s;
// }
// .section6 .block4 {
//   transform: translate3d(12%,0,0);
//   transition-delay: .6s;
// }
.section6 .block:first-of-type {
  margin-top: 7.8rem;
}

.section6 .block .col-context {
  flex: 1;
  // transform: translate3d(0, 30%, 0);
  // transition: transform ease-in-out .6s, opacity ease-in-out .6s;
  // opacity: .6;
}

// .section6 .block.is-active .col-context {
//   transform: translate3d(0, 0, 0);
//   opacity: 1;
// }

// .section6 .block:nth-of-type(2) .col-context {
//   transition-delay: .6s;
// }

// .section6 .block:nth-of-type(3) .col-context {
//   transition-delay: 1.2s;
// }

// .section6 .block:nth-of-type(4) .col-context {
//   transition-delay: 1.8s;
// }

.section6 .block .col-context .title {
  font-weight: bold;
  font-size: 3rem;
  color: #333333;
  line-height: 3.2rem;
}

// .section6 .block.is-active .col-context .title {
//   transform: translate3d(0,0,0);
// }

.section6 .block .col-context .context {
  margin: 1.6rem 0 0;
  font-size: 1.8rem;
  color: #666;
  line-height: 2.7rem;
}

// .section6 .block.is-active .col-context .context {
//   transform: translate3d(0,0,0);
// }

.section6 .block .col-context .btn {
  display: inline-block;
  margin: 3rem 0 0;
  // transform: translate3d(10%,0,0);
  // transition:transform ease-in-out .6s,opacity ease-in-out .6s;
}

// .section6 .block.is-active .col-context .btn {
//   transform: translate3d(0,0,0);
// }


.section6 .block .col-pic {
  flex: none;
  width: 57rem;
  padding: .6rem;
  box-sizing: border-box;
  // background: linear-gradient(180deg, #21A4E360 0%, rgba(61,249,249,.6) 100%);
  // box-shadow: 0px .4rem 1.2rem 0px rgba(0,0,0,0.16);
  border-radius: 6px;
  // background-image: linear-gradient(180deg, #3DF9F900 0%, #21A4E360 100%);
  background: linear-gradient(0deg, #21A4E360 0%, rgba(61, 249, 249, 0) 100%);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
  transition: opacity ease-in-out .4s;
  // opacity: 0.6;
}

// .section6 .block.is-active .col-pic {
//   opacity: 1;
// }

// .section6 .block:nth-of-type(2) .col-pic {
//   transition-delay: .6s;
// }

// .section6 .block:nth-of-type(3) .col-pic {
//   transition-delay: 1.2s;
// }

// .section6 .block:nth-of-type(4) .col-pic {
//   transition-delay: 1.8s;
// }

.section6 .block .col-pic img {
  width: 100%;
}

.version-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 11rem 0 0;
}

.version-list img {
  width: 59rem;
  // transition: transform ease-in-out .6s, opacity ease-in-out .4s;
  /* transform: translateY(10%); */
  // opacity: .5;
}

// .version-list img.is-active {
//   transform: translate3d(0, 0, 0);
//   opacity: 1;
// }

/* .version-list img.version-flagship {
  transition-delay: .2s;
} */

.section7 {
  /* width: 156rem; */
  margin: 7.4rem 0 0;
  padding: 6.2rem 0 7.6rem;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-footer.jpg) no-repeat center top /cover;
}

.section7 .wrap {
  display: flex;
  justify-content: center;
  margin: 6rem 0 0;
  gap: 15.4rem;
}

.section7 .wrap .col-left {
  // width: 47.5rem;
  font-size: 2.4rem;
  color: #333;
  line-height: 2.4rem;
}

.section7 .wrap .col-left .list .item {
  position: relative;
  padding: 1.2rem 0 1.2rem 1.5rem;
}

.section7 .wrap .col-left .list .item::before {
  position: absolute;
  content: '';
  width: .8rem;
  height: .8rem;
  left: -.5rem;
  top: 50%;
  margin-top: -.4rem;
  border-radius: 100%;
  background: #1174c6;
}

.section7 .wrap .col-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 31.8rem;
  height: 12.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .3);
}

.section7 .qrcode-wrap {
  width: 12.6rem;
  height: 12.6rem;
  padding: .3rem;
  box-sizing: border-box;
  // background: #FFFFFF;
  box-shadow: 0px .4rem .8rem 0px rgba(39, 111, 172, 0.2);
  border-radius: 1rem;
  // border-image: linear-gradient(-48deg, #007ADF, #A1FAEE) 2 2;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-qrcode.png) no-repeat center top /cover;
}

.section7 .qrcode-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;

}

.section7 .concat-info .name {
  font-weight: bold;
  font-size: 2.4rem;
  color: #333333;
  line-height: 2.4rem;
}

.section7 .concat-info .phone {
  font-size: 2.4rem;
  color: #333333;
  line-height: 2.4rem;
}

.section7 .name {
  font-weight: bold;
  font-size: 2.4rem;
  color: #333333;
  line-height: 2.4rem;
}

.section7 .phone {
  margin: 1.8rem 0 0;
  font-size: 2.4rem;
  color: #333333;
  line-height: 2.4rem;
}

.wx-code-concat {
  position: fixed;
  right: 17.2rem;
  top: 50%;
  left: 50%;
  margin-left: 77.8rem;
  width: 120px;
  height: 160px;
  padding: 30px 20px 0;
  transform: translate3d(0, -50%, 0);
  box-sizing: border-box;
  background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-qrcode-right.png) no-repeat center top /contain;
  z-index: 9;
}

.wx-code-concat > img {
  width: 100%;
}


@media screen and (max-width:1796px) {
  .wx-code-concat {
    left: auto;
    margin-left: auto;
    right: 1rem;
  }
}

@media screen and (min-width:1280px) {
  .section1 .slogan {}
}

@media screen and (max-width:750px) {
  .page-sy-download {
    padding-bottom: 11.2rem;
  }
  body {
    background: #fff url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-mobile.jpg) no-repeat center top /100%;
  }

  .is-pc-only {
    display: none;
  }

  .is-mobile-only {
    display: inline-block;
  }

  .section-title {
    font-size: 4.2rem;
    line-height: 6.2rem;
  }

  .section2 .section-sub-title {
    font-size: 2.4rem;
    line-height: 3.6rem;
    color: #666;
  }

  .section2 .section-sub-title em {
    font-size: 2.8rem;
  }

  .section1 {
    flex-direction: column;
    gap: 0;
    padding-top: 6.3rem;
  }

  .section1 .col-left .logo {
    margin-bottom: 5.2rem;
  }

  .section1 .slogan {
    margin: 0;
  }

  .section1 .title {
    margin-top: 4.7rem;
  }

  .section1 .col-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }

  .section1 .col-left .logo {
    width: 10.4rem;
  }

  .section1 .col-right {
    flex: none;
    width: 100%;
    height: 38.2rem;
    margin-top: 6rem;
  }

  .section1 .col-right img {
    width: 110%;
    left: -5%;
  }

  // .section1 .btn-download {
  //   display: none;
  // }

  .section1 .copy-link {
    visibility: visible;
  }

  .section2 {
    position: relative;
    margin-top: 10.2rem;
  }

  .list-section2 {
    margin-top: 6.8rem;
    gap: 1.8rem;
  }

  .list-section2 .item .title {
    margin-top: 3.6rem;
    font-size: 2.6rem;
  }

  .list-section2 .item .desc {
    margin-top: 2rem;
    font-size: 2rem;
  }

  .section3 {
    margin-top: 10.9rem;
  }

  .section3 .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 3.8rem;
    margin-top: 4rem;
  }

  .section3 .col-left {
    position: relative;
    z-index: 1;
  }

  .section3 .col-right {
    width: auto;
    margin: 0 1.2rem;
    height: 49rem;
    box-sizing: border-box;
    padding: 10.7rem 2rem 2rem;
    background: #F4FAFF;
    border-radius: 16px;
  }

  .section3 .col-right .video-wrap {
    width: calc(100% - 4rem);
    top: 10.7rem;
    left: 2rem;
    border-radius: 8px;
    height: 36.3rem;
    padding: .5rem;
    box-shadow: none;
  }

  .section3 .col-right video {

    /* width: calc(100% - 4rem);
    height: 27.4rem; */

    width: 100%;
    height: 100%;


    border-radius: 6px;
  }

  .list-video-introduce {
    display: flex;
    justify-content: space-between;
    padding: 0 1.2rem;
  }

  .list-video-introduce .item {
    position: static;
    padding: 0;
    border-radius: 0;
  }

  .list-video-introduce .item.is-active {
    border: none;
    background: none;
  }

  .list-video-introduce .item.is-active::before {
    display: none;
  }

  .list-video-introduce .item .title {
    position: relative;
    padding: 2.7rem 0;
    font-size: 2.4rem;
    white-space: nowrap;
  }

  .list-video-introduce .item.is-active .title::after {
    content: '';
    position: absolute;
    width: 14.1rem;
    left: 50%;
    bottom: 0;
    height: 4px;
    transform: translate3d(-50%, 0, 0);
    background: #33cee8;
  }

  .list-video-introduce .item .btn {
    display: none !important;
  }

  .list-video-introduce .item .sub-title {
    position: absolute;
    width: calc(100% - 6.4rem);
    left: 3.2rem;
    top: 13.6rem;
    margin-top: 0;
    display: none;
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .list-video-introduce .item.item.is-active .sub-title {
    display: block;
  }

  .list-video-introduce .item:not(:last-child)::after {
    display: none;
  }

  .list-process {
    gap: 4.6rem;
  }

  .list-process .step {
    flex: 1;
  }

  .list-process .step .icon {
    width: 10rem;
    height: 10rem;

  }

  .list-process .step:not(:last-child)::before {
    width: 1.6rem;
    height: 1.2rem;
    margin: 4.4rem 0 0 1.5rem;
  }

  .list-process .step .title {
    margin-top: 1.4rem;
    line-height: 3rem;
    font-size: 2rem;
  }

  .section4 {
    margin-top: 10.9rem;
    padding: 0;
    background: none;
  }

  .section5 {
    padding-top: 7.6rem;
  }

  .section-sub-title {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .section5 .pic-introduce {
    width: 68.6rem;
  }

  .section6 {
    padding: 10rem 1.5rem 0;

  }

  .section6 .block {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5.8rem;
    padding: 4rem 3.2rem 4.2rem;
    border-radius: 16px;
    border: 1px solid #E6EFF5;
    background: linear-gradient(0deg, #F4FAFF, rgba(255, 255, 255, 0));
  }

  .section6 .block:nth-of-type(2n) {
    flex-direction: column-reverse;
  }

  .section6 .block .col-pic {
    flex: 1;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 6px 20px 0px rgba(46, 142, 197, 0.26);

  }

  .section6 .block .col-context {
    text-align: center;
    // transform: translate3d(0, 20%, 0);
  }

  .section6 .block .col-context .title {
    font-size: 2.8rem;
  }


  .section6 .block .col-context .context {
    margin-top: 3rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .section6 .block:first-of-type {
    margin-top: 6.8rem;
  }

  .section6 .block .col-context .btn {
    display: none;
  }

  .version-list {
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    gap: 1rem;
  }

  .version-list img {
    flex: 1;
    width: 0;
  }

  .section7 {
    margin-top: 8.8rem;
    padding: 4.2rem 3.2rem 5.4rem;
    background: url(https://zydmall-tinyapp.oss-cn-shenzhen.aliyuncs.com/web/images/software/bg-footer.jpg) no-repeat right bottom / cover;
  }

  .section7 .wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3.8rem;
    // padding: 0 3.2rem;
    gap: 5.1rem;
  }

  .section7 .wrap .col-left {
    flex: 1;
    width: 100%;
    padding: 2.6rem 4.2rem;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid #E6EFF5;
  }

  .section7 .qrcode-wrap {
    width: 15rem;
    height: 15rem;
  }

  .section7 .wrap .col-right {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    text-align: center;
    background: none;
  }

  .section7 .concat-info .name {
    font-size: 2.8rem;
  }

  .section7 .concat-info .phone {
    font-size: 2.8rem;
  }

  .sy-bottom-bar {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12.2rem;
    padding-bottom: 1rem;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #ffffff90;
    backdrop-filter: blur(30px);
    border: 1px solid #fff;
    box-shadow: 0px -4px 4px 0px #0000001A;
  }

  .sy-bottom-bar .btn {
    width: 40rem;
    height: 8rem;
    border-radius: 4px;
    color: #fff;
    font-size: 2.8rem;
    background: linear-gradient(299.73deg, #006DFF 34.37%, #39E2E2 100.77%);
  }
  .layer-business-code {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 10.8rem;
    left: 0;
    top: 0;
    background: #00000099;
    backdrop-filter: blur(10px);
    z-index: 9999;
  }
  .layer-business-code .layer-business-code-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .layer-business-code .code-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    width: 54.6rem;
    height: 49rem;
    border-radius: 20px;
    padding: 2.4rem;
    box-sizing: border-box;
    background: linear-gradient(360deg, #FFFFFF 2.24%, #88D4FF 99.18%);
    z-index: 2;
  }

  .layer-business-code .code-wrap .title-concat {
    width: 38.2rem;
  }

  .layer-business-code .code-wrap .business-qrcode {
    width: 28rem;
    height: 28rem;
    margin: .4rem;
    border-radius: 4px;
    padding: .8rem;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 4px 4px 0px #50BBF536;

  }

  .layer-business-code .code-wrap p {
    font-size: 4rem;
    line-height: 5.2rem;
    color: #666;
  }
}