.system-install-page {
  overflow: hidden;
  background: #011b17;
  color: #f3fffb;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  margin-top: 125px;
}

.system-install-page-body #yixing-secondary-header.white-theme {
  background: #071311;
}
.system-install-page-body #yixing-secondary-header.white-theme .yixing-secondary-header-left-gname h1,
.system-install-page-body #yixing-secondary-header.white-theme .yixing-secondary-header-left-tab a {
  color: #fff;
}

.system-install-page *,
.system-install-page *::before,
.system-install-page *::after {
  box-sizing: border-box;
}

.system-install-page [data-asset-key][src=""] {
  visibility: hidden;
}

.system-hero {
  height: 720px;
  background: linear-gradient(180deg, rgba(157, 255, 231, 0.02) 0.15%, rgba(0, 0, 0, 0) 0.15%), linear-gradient(90deg, rgba(157, 255, 231, 0.02) 0.05%, rgba(0, 0, 0, 0) 0.05%);
}

.system-hero__inner {
  position: relative;
  width: 1200px;
  height: 720px;
  margin: 0 auto;
}

.system-hero__copy {
  position: absolute;
  top: 141px;
  left: 0;
  width: 480px;
}

.system-hero__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-top: 4px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.system-hero__title span:last-child {
  color: #65f0d0;
}

.system-hero__description {
  width: 480px;
  margin: 28px 0 0;
  color: #a8c5be;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
}

.system-hero__platforms {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.system-platform {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(157, 255, 231, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #c9e5dd;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}

.system-platform img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.system-platform--win7 {
  width: 103px;
}

.system-platform--win10,
.system-platform--win11 {
  width: 112px;
}

.system-hero__download {
  margin-top: 28px;
}

.system-download-button {
  display: flex;
  align-items: center;
  width: 224px;
  height: 60px;
  gap: 16px;
  padding: 14px 40px;
  border-radius: 8px;
  background: linear-gradient(-90deg, #6fffdE 0%, #fbf46d 100%);
  color: #005d47;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-decoration: none;
  cursor: pointer;
}

.system-download-button img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.system-hero__download p {
  margin: 12px 0 0;
  color: #68877f;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.system-hero__visual {
  position: absolute;
  top: 83px;
  left: 524px;
  width: 726.1873px;
  height: 549.6852px;
  object-fit: contain;
}

.system-experience {
  height: 1900px;
  background: linear-gradient(180deg, #071311 0%, #0B211D 100%);
}

.system-experience__inner {
  position: relative;
  width: 1200px;
  top: 100px;
  height: 1740px;
  margin: 0 auto;
  padding: 0;
}

.system-section-heading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  text-align: center;
}

.system-section-heading p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  color: #65f0d0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 18px;
}

.system-section-heading p::before {
  width: 32px;
  height: 2px;
  background: #238c76;
  content: "";
}

.system-section-heading h2 {
  margin: 12px 0 0;
  color: #ecfff9;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.system-experience__steps {
  position: absolute;
  height: 1590px;
  margin: 0;
  padding: 0;
  top: 150px;
  left: 0;
  width: 100%;
  list-style: none;
}

.system-experience__steps::before {
  position: absolute;
  top: 167px;
  left: 32px;
  width: 1px;
  height: 1280px;
  background: repeating-linear-gradient(to bottom, #65f0d0 0 12px, transparent 12px 24px);
  content: "";
}

.system-experience-step {
  position: relative;
  height: 476px;
  margin-bottom: 80px;
}

.system-experience-step:last-child {
  height: 478px;
  margin-bottom: 0;
}

.system-experience-step__marker {
  position: absolute;
  z-index: 1;
  top: 134px;
  left: 0;
  display: block;
  width: 64px;
  height: 64px;
}

.system-experience-step__marker img {
  display: block;
  width: 64px;
  height: 64px;
}

.system-experience-step__number {
  position: absolute;
  top: 133.5px;
  left: 120px;
  width: 320px;
  height: 55px;
  margin: 0;
  color: #65f0d0;
  font-weight: 700;
  font-size: 68px;
  letter-spacing: -5.44px;
  line-height: 54.4px;
  opacity: 0.22;
}

.system-experience-step__copy {
  position: absolute;
  top: 210px;
  left: 120px;
  width: 264px;
}

.system-experience-step__copy h3 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.system-experience-step__copy p {
  margin: 24px 0 0;
  color: #d9f6ee;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}

.system-experience-step__copy p span {
  display: block;
}

.system-experience-step__preview {
  position: absolute;
  top: 7px;
  left: 480px;
  width: 720px;
  height: 476px;
  object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .system-experience--motion .system-section-heading,
  .system-experience--motion .system-experience-step {
    opacity: 0;
    transform: translateY(32px);
    will-change: opacity, transform;
  }
  .system-experience--motion .system-experience__steps::before {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    will-change: opacity, clip-path;
  }
  .system-experience--motion.system-experience--heading-visible .system-section-heading {
    animation: system-experience-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .system-experience--motion.system-experience--heading-visible .system-experience__steps::before {
    animation: system-experience-timeline-enter 1.2s 0.14s ease-out forwards;
  }
  .system-experience--motion .system-experience-step.system-experience-step--visible {
    animation: system-experience-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .system-experience--motion .system-experience-step:nth-child(1).system-experience-step--visible {
    animation-delay: 0.14s;
  }
  .system-experience--motion .system-experience-step:nth-child(2).system-experience-step--visible {
    animation-delay: 0.2s;
  }
  .system-experience--motion .system-experience-step:nth-child(3).system-experience-step--visible {
    animation-delay: 0.26s;
  }
}
@keyframes system-experience-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes system-experience-timeline-enter {
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
.system-final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 487px;
  padding: 30px;
  background: radial-gradient(84.02% 331.25% at 19% 88%, rgba(65, 200, 255, 0.16) 0%, rgba(65, 200, 255, 0) 28%), radial-gradient(84.16% 331.78% at 81% 10%, rgba(9, 203, 160, 0.2) 0%, rgba(9, 203, 160, 0) 28%), #0B1E1B;
}

.system-final-cta::before,
.system-final-cta::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  will-change: opacity, transform;
  content: "";
}

.system-final-cta::before {
  background: radial-gradient(84.02% 331.25% at 19% 88%, rgba(65, 200, 255, 0.16) 0%, rgba(65, 200, 255, 0) 28%);
  transform-origin: 19% 88%;
}

.system-final-cta::after {
  background: radial-gradient(84.16% 331.78% at 81% 10%, rgba(9, 203, 160, 0.2) 0%, rgba(9, 203, 160, 0) 28%);
  transform-origin: 81% 10%;
}

.system-final-cta__panel {
  position: relative;
  z-index: 1;
  height: 427px;
  border: 1px solid rgba(134, 230, 207, 0.16);
  border-radius: 14px;
}

.system-final-cta__content {
  width: 1200px;
  margin: 0 auto;
  padding-top: 80px;
  text-align: center;
}

.system-final-cta__logo {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  object-fit: contain;
}

.system-final-cta__content h2 {
  margin: 20px 0 0;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.system-final-cta__content > p {
  margin: 20px 0 0;
  color: #9ab7b0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.system-final-cta__content .system-download-button {
  margin: 20px auto 0;
}

@media (prefers-reduced-motion: no-preference) {
  .system-final-cta::before {
    animation: system-final-cta-left-glow 8.6s ease-in-out infinite alternate;
  }
  .system-final-cta::after {
    animation: system-final-cta-right-glow 10.4s ease-in-out -5.2s infinite alternate;
  }
}
@keyframes system-final-cta-left-glow {
  from {
    opacity: 0.38;
    transform: translate3d(-1.5%, 1.8%, 0) scale(0.94);
  }
  to {
    opacity: 0.9;
    transform: translate3d(2.2%, -1.4%, 0) scale(1.07);
  }
}
@keyframes system-final-cta-right-glow {
  from {
    opacity: 0.36;
    transform: translate3d(1.6%, -1.7%, 0) scale(0.95);
  }
  to {
    opacity: 0.92;
    transform: translate3d(-2%, 1.4%, 0) scale(1.08);
  }
}

/*# sourceMappingURL=style.css.map */