:root {
  --page-width: 1440px;
  --red: #ff3333;
  --black: #111111;
  --muted: #a8a8a8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: var(--page-width);
  margin: 0;
  background: var(--black);
  color: #ffffff;
  font-family: Inter, "PingFang HK", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  min-width: var(--page-width);
  height: 68px;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(2px);
  transition: background 220ms ease;
}

.site-nav.is-scrolled {
  background: rgba(0, 0, 0, 0.8);
}

.nav-inner {
  position: relative;
  width: var(--page-width);
  height: 68px;
  margin: 0 auto;
}

.brand {
  position: absolute;
  left: 126.96px;
  top: 22.82px;
  width: 118.26px;
  height: 17.57px;
}

.brand-logo {
  position: absolute;
  inset: 0;
  width: 118.26px;
  height: 17.57px;
  transition: opacity 1s ease;
}

.brand-logo-red {
  opacity: 0;
}

.site-nav.is-scrolled .brand-logo-white {
  opacity: 0;
}

.site-nav.is-scrolled .brand-logo-red {
  opacity: 1;
}

.nav-links {
  position: absolute;
  left: 604px;
  top: 23px;
  display: flex;
  gap: 33px;
  align-items: center;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  white-space: nowrap;
}

.nav-links a {
  display: block;
}

.contact-button {
  position: absolute;
  left: 1222px;
  top: 16px;
  display: flex;
  width: 98px;
  height: 36px;
  align-items: center;
  gap: 5px;
  padding: 8px 16px 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.contact-button:hover,
.contact-button:focus-visible {
  border-color: var(--red);
  outline: none;
  background: var(--red);
  color: #ffffff;
}

.contact-button img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.contact-button span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.artboard {
  position: relative;
  width: var(--page-width);
  margin: 0 auto;
  overflow: hidden;
}

.hero-section,
.hero-artboard {
  height: 100vh;
  min-height: 720px;
}

.hero-section {
  position: relative;
  background: #000000;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.84);
}

.hero-title {
  position: absolute;
  left: 125.12px;
  top: 122.35px;
  width: 831.28px;
  height: 213.7px;
}

.hero-cn-title {
  position: absolute;
  left: 126px;
  top: 327px;
  margin: 0;
  font-size: 64px;
  line-height: 120px;
  font-weight: 900;
  white-space: nowrap;
}

.hero-years {
  position: absolute;
  left: 126px;
  bottom: 61px;
  display: grid;
  gap: 0;
}

.hero-years strong {
  color: var(--red);
  font-family: "Arial Black", Impact, Inter, sans-serif;
  font-size: 48px;
  line-height: 58px;
  font-weight: 900;
  -webkit-text-stroke: 0.35px var(--red);
}

.hero-years span {
  margin-top: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 900;
}

.scroll-arrow {
  position: absolute;
  left: 705px;
  bottom: 53px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-arrow img {
  display: block;
  width: 32px;
  height: 22px;
  max-width: none;
  pointer-events: none;
}

.hero-tagline {
  position: absolute;
  left: 1106px;
  bottom: 60px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-tagline span {
  display: block;
}

.hero-tagline em {
  color: var(--red);
  font-style: normal;
}

.about-section,
.about-artboard {
  height: 1748px;
}

.about-section {
  scroll-margin-top: 68px;
  background: var(--black);
}

.about-bg-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1024px;
  background: #111111;
}

.about-title-en {
  position: absolute;
  left: 119.14px;
  top: 131.26px;
  width: 576.84px;
  height: 70.27px;
}

.about-title-cn {
  position: absolute;
  left: 718.4px;
  top: 154.46px;
  width: 186.86px;
  height: 43.92px;
}

.portrait-block {
  position: absolute;
  left: 120px;
  top: 321px;
  width: 424px;
  height: 438px;
}

.portrait-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 424px;
  height: 221px;
  background: linear-gradient(270deg, rgba(65, 0, 0, 0.34) 0%, rgba(255, 51, 51, 0.34) 100%);
}

.portrait {
  position: absolute;
  left: 84px;
  top: 0;
  width: 300px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

.info-cards {
  position: absolute;
  left: 582px;
  top: 321px;
  display: flex;
  gap: 17px;
}

.info-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 188px;
  height: 98px;
  padding: 0 19px;
  border: 1px solid #363636;
}

.info-card-small {
  width: 156px;
}

.info-card span,
.contact-line span {
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}

.info-card strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
}

.bio-copy {
  position: absolute;
  left: 582px;
  top: 471px;
  width: 738px;
  color: #ffffff;
}

.bio-copy h2,
.contact-info h2 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 29px;
  font-weight: 800;
}

.bio-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
}

.contact-info {
  position: absolute;
  left: 582px;
  top: 653px;
  width: 738px;
  height: 98px;
}

.contact-info h2 {
  position: absolute;
  left: 0;
  top: 4px;
}

.contact-line {
  position: absolute;
  top: 56px;
}

.contact-line strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}

.contact-line span {
  color: var(--muted);
}

.contact-line.tel {
  left: 0;
}

.contact-line.email {
  left: 195px;
}

.contact-line.wechat {
  left: 441px;
}

.qr-frame {
  position: absolute;
  right: 0;
  top: 0;
  width: 98px;
  height: 98px;
  overflow: hidden;
  background: #ffffff;
}

.qr-frame img {
  position: absolute;
  left: -11.36%;
  top: -39.52%;
  width: 122.73%;
  height: 167.3%;
  max-width: none;
}

.about-footnote {
  position: absolute;
  top: 852px;
  margin: 0;
  color: #999999;
  font-size: 16px;
  line-height: 19px;
  font-weight: 800;
}

.about-footnote.left {
  left: 120px;
}

.about-footnote.right {
  right: 120px;
}

.portfolio-index {
  position: absolute;
  left: 0;
  top: 929px;
  width: 1440px;
  height: 581px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #320505 0%, #111111 100%);
}

.index-outline {
  position: absolute;
  left: 58px;
  top: 35px;
  width: 1340.09px;
  height: 327.27px;
}

.index-title-en {
  position: absolute;
  left: 124.56px;
  top: 89.18px;
  width: 657.72px;
  height: 46.85px;
}

.portfolio-index h2 {
  position: absolute;
  left: 122px;
  top: 151px;
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 900;
}

.index-cards {
  position: absolute;
  left: 120px;
  top: 281px;
  display: flex;
  gap: 16px;
}

.index-card {
  display: block;
  position: relative;
  width: 288px;
  height: 390px;
  border: 1px solid #303030;
  border-radius: 20px;
  background: #1d1d1d;
  color: #ffffff;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.index-card:hover,
.index-card:focus-visible {
  transform: translateY(-16px);
  border-color: #703232;
  outline: none;
  background: linear-gradient(180deg, #932424 0%, #4a0e0e 100%);
  box-shadow: 0 0 20px rgba(236, 30, 30, 0.3), inset 0 0 17.9px rgba(255, 16, 16, 0.3);
}

.index-thumb {
  position: absolute;
  left: 19px;
  top: 19px;
  width: 248px;
  height: 248px;
  border-radius: 8px;
  background: #d9d9d9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.index-card:nth-child(1) .index-thumb {
  background-image: url("./assets/index-thumbs/app.png?v=1");
}

.index-card:nth-child(2) .index-thumb {
  background-image: url("./assets/index-thumbs/web.png?v=1");
}

.index-card:nth-child(3) .index-thumb {
  background-image: url("./assets/index-thumbs/operations.png?v=1");
}

.index-card:nth-child(4) .index-thumb {
  background-image: url("./assets/index-thumbs/aigc.png?v=1");
}

.index-card-copy {
  position: absolute;
  left: 24px;
  top: 282px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.index-card-copy strong {
  font-size: 76px;
  line-height: 92px;
  font-weight: 900;
}

.index-card-copy h3 {
  margin: 21px 0 4px;
  font-size: 28px;
  line-height: 34px;
  font-weight: 900;
  white-space: nowrap;
}

.index-card-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 300;
  text-transform: uppercase;
}

.case-section {
  scroll-margin-top: 68px;
  background: var(--black);
}

.portfolio-placeholder {
  scroll-margin-top: 68px;
  background: #111111;
}

.placeholder-artboard {
  height: 720px;
  border-top: 1px solid #252525;
  background:
    linear-gradient(180deg, rgba(53, 5, 5, 0.32) 0%, rgba(17, 17, 17, 0) 50%),
    #111111;
}

.placeholder-kicker {
  position: absolute;
  left: 120px;
  top: 132px;
  margin: 0;
  color: var(--red);
  font-size: 48px;
  line-height: 58px;
  font-weight: 900;
  text-transform: uppercase;
}

.placeholder-artboard h2 {
  position: absolute;
  left: 120px;
  top: 201px;
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 900;
}

.case-intro-artboard {
  height: 2251px;
  background: #111111;
}

.case-hero-gradient {
  position: absolute;
  left: -2px;
  top: -1px;
  width: 1442px;
  height: 454px;
  background: linear-gradient(180deg, #083429 0%, #111111 100%);
}

.helin-word-bg {
  position: absolute;
  left: 0;
  top: 105px;
  width: 1437.15px;
  height: 169px;
}

.helin-hero-mockups {
  position: absolute;
  left: 651px;
  top: 174px;
  width: 703px;
  height: 632px;
  object-fit: cover;
}

.case-kicker {
  position: absolute;
  top: 51px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
}

.case-kicker.left {
  left: 120px;
}

.case-kicker.left img {
  width: 14px;
  height: 14px;
}

.case-kicker.left span {
  margin-left: 12px;
}

.case-kicker.right {
  left: 1182px;
  gap: 12px;
}

.case-kicker.right img {
  width: 42.5px;
  height: 12.12px;
}

.case-main-title {
  position: absolute;
  left: 120px;
  top: 232px;
  margin: 0;
  font-size: 96px;
  line-height: 115px;
  font-weight: 900;
}

.case-subtitle {
  position: absolute;
  left: 120px;
  top: 366px;
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
}

.case-intro-copy {
  position: absolute;
  left: 120px;
  top: 471px;
  width: 528px;
  margin: 0;
  font-size: 18px;
  line-height: 34px;
}

.case-detail-panel {
  position: absolute;
  left: 0;
  top: 806px;
  width: 1440px;
  height: 820px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #0a1f1a 0%, #111111 100%);
}

.case-block {
  position: absolute;
  width: 1200px;
  height: 299px;
}

.case-background {
  left: 120px;
  top: 930px;
}

.case-objectives {
  left: 120px;
  top: 1348px;
}

.case-block-card {
  position: absolute;
  z-index: 1;
  width: 899px;
  height: 298px;
  border: 1px solid #454545;
  background: #1e1e1e;
}

.case-background .case-block-card {
  left: 0;
  top: 0;
}

.case-objectives .case-block-card {
  left: 301px;
  top: 0;
}

.case-block-card h3 {
  position: absolute;
  left: 41px;
  top: 36px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.teal-rule {
  position: absolute;
  display: block;
  width: 69px;
  height: 8px;
  background: #0bf4c9;
}

.case-block-card .teal-rule {
  left: 43px;
  top: 91px;
}

.case-block-card p {
  position: absolute;
  left: 41px;
  top: 112px;
  width: 514px;
  margin: 0;
  font-size: 18px;
  line-height: 34px;
}

.case-objectives .case-block-card h3,
.case-objectives .case-block-card p {
  left: 332px;
}

.case-objectives .case-block-card .teal-rule {
  left: 334px;
}

.case-block-image {
  position: absolute;
  z-index: 2;
  width: 299px;
  height: 299px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.case-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-background .case-block-image {
  left: 600px;
  top: 0;
}

.case-objectives .case-block-image {
  left: 301px;
  top: 0;
}

.case-objectives .case-block-image img {
  object-position: center bottom;
}

.case-en-title {
  position: absolute;
  z-index: 3;
  display: block;
  object-fit: contain;
}

.case-project-title {
  left: 632px;
  top: 96px;
  width: 567px;
  height: 192px;
}

.case-objectives-title {
  left: 0;
  top: 74px;
  width: 509px;
  height: 212px;
}

.design-entry-points {
  position: absolute;
  left: 120px;
  top: 1798px;
  width: 1200px;
}

.design-entry-points h3 {
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.design-entry-points > .teal-rule {
  left: 0;
  top: 51px;
}

.entry-cards {
  position: absolute;
  left: 0;
  top: 101px;
  display: grid;
  grid-template-columns: repeat(4, 282px);
  gap: 24px;
}

.entry-card {
  position: relative;
  height: 214px;
}

.entry-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 46px;
  width: 282px;
  height: 168px;
  border: 1px solid #404040;
}

.entry-card strong {
  position: absolute;
  right: 16px;
  top: 0;
  color: #3d3d3d;
  font-size: 98px;
  line-height: 119px;
  font-weight: 900;
}

.entry-card h4 {
  position: absolute;
  left: 30px;
  top: 75px;
  margin: 0;
  color: #0bf4c9;
  font-size: 24px;
  line-height: 29px;
  font-weight: 800;
}

.entry-card p {
  position: absolute;
  left: 30px;
  top: 117px;
  width: 225px;
  margin: 0;
  font-size: 16px;
  line-height: 30px;
}

.showcase-artboard {
  height: 1660px;
  background: #111111;
}

.showcase-script-bg {
  position: absolute;
  left: 0;
  top: 316px;
  width: 1440px;
  height: 416px;
  pointer-events: none;
}

.phone-stack {
  position: absolute;
  left: 520.34px;
  top: 98px;
  width: 400px;
  height: 815px;
}

.phone-screen,
.phone-frame {
  position: absolute;
  object-fit: cover;
}

.phone-screen.home {
  left: 21px;
  top: 18px;
  width: 357.84px;
  height: 778px;
  border-radius: 47px;
}

.phone-screen.opened {
  left: 21px;
  top: 16px;
  width: 360px;
  height: 782px;
  border-radius: 35px;
}

.phone-frame {
  left: 0;
  top: 0;
  width: 400px;
  height: 815px;
}

.note-card {
  position: absolute;
  width: 540px;
  height: 118px;
  border-radius: 10px;
  color: #000000;
  padding: 26px 38px;
}

.note-card span {
  display: block;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}

.note-card strong {
  display: block;
  margin-top: 22px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
}

.note-core {
  left: 198.34px;
  top: 1396px;
  background: #4ff78a;
}

.note-style {
  left: 259.22px;
  top: 1209.13px;
  background: #1cccb7;
  transform: rotate(-15.76deg);
}

.note-product {
  left: 697.62px;
  top: 1334.84px;
  background: #fee156;
  transform: rotate(13.83deg);
}

.loop-arrow {
  position: absolute;
  left: 934.28px;
  top: 1027.47px;
  width: 137.94px;
  height: 324.21px;
  transform: rotate(-9.94deg);
}

.specs-artboard {
  height: 2267px;
  background: #111111;
}

.specs-top-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 820px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #191f1e 0%, #111111 100%);
}

.personas-section,
.font-specs,
.color-specs {
  position: absolute;
  left: 120px;
  width: 1200px;
}

.personas-section {
  top: 81px;
  height: 625px;
}

.section-eyebrow {
  margin: 0;
  color: #1cccb7;
  font-size: 48px;
  line-height: 58px;
  font-weight: 900;
  text-transform: uppercase;
}

.personas-section h2,
.font-specs h2,
.color-specs h2 {
  margin: 6px 0 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 900;
}

.personas-copy {
  position: absolute;
  left: 456px;
  top: 226px;
  width: 659px;
  margin: 0;
  font-size: 16px;
  line-height: 30px;
}

.persona-card {
  position: absolute;
  overflow: hidden;
}

.persona-card img {
  position: absolute;
  max-width: none;
}

.persona-card span {
  position: absolute;
  z-index: 2;
  color: #ffffff;
  font-size: 24px;
  line-height: 29px;
  font-weight: 900;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.18);
}

.persona-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
}

.persona-fresh {
  left: 0;
  top: 184px;
  width: 388px;
  height: 441px;
  border-radius: 140px 140px 140px 0;
}

.persona-fresh img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-fresh::after {
  height: 150px;
  background: linear-gradient(180deg, rgba(17, 224, 172, 0) 0%, #1cccb7 100%);
}

.persona-fresh span {
  left: 16px;
  bottom: 12px;
}

.persona-trader,
.persona-social {
  top: 403px;
  width: 388px;
  height: 222px;
  border-radius: 127px 127px 0 127px;
}

.persona-trader {
  left: 406px;
}

.persona-social {
  left: 812px;
}

.persona-trader img {
  width: 554px;
  height: 312px;
  left: -96px;
  top: -18px;
}

.persona-social img {
  width: 520px;
  height: 293px;
  left: -45px;
  top: -35px;
}

.persona-trader::after {
  height: 111px;
  background: linear-gradient(180deg, rgba(254, 225, 86, 0) 0%, #fee156 100%);
}

.persona-social::after {
  height: 111px;
  background: linear-gradient(180deg, rgba(79, 247, 138, 0) 0%, #4ff78a 100%);
}

.persona-trader span,
.persona-social span {
  right: 21px;
  bottom: 12px;
}

.font-specs {
  top: 882px;
  height: 342px;
}

.font-card {
  position: absolute;
  top: 94px;
}

.font-card.pingfang {
  left: 0;
  width: 456px;
}

.font-card.alimama {
  left: 600px;
  width: 589px;
}

.font-card strong {
  display: block;
  font-size: 64px;
  line-height: 90px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.font-card.pingfang strong {
  font-weight: 200;
  letter-spacing: 1px;
}

.font-card span {
  display: block;
  margin-top: 10px;
  font-size: 32px;
  line-height: 45px;
}

.font-card.alimama span {
  font-weight: 900;
}

.font-card p {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 28px;
}

.color-specs {
  top: 1400px;
  height: 725px;
}

.color-card {
  position: absolute;
  border-radius: 30px;
  color: #000000;
}

.color-card > span {
  position: absolute;
  left: 40px;
  top: 40px;
  font-size: 28px;
  line-height: 39px;
}

.color-card div {
  position: absolute;
  left: 40px;
  bottom: 40px;
}

.color-card strong {
  display: block;
  font-size: 24px;
  line-height: 34px;
  font-weight: 900;
}

.color-card p {
  margin: 0;
  font-size: 24px;
  line-height: 34px;
}

.color-primary,
.color-secondary {
  left: 0;
  width: 635px;
  height: 298px;
}

.color-primary {
  top: 109px;
  background: #1cccb7;
}

.color-secondary {
  top: 427px;
  background: #4ff78a;
}

.color-yellow,
.color-bg {
  left: 655px;
  width: 545px;
  height: 192px;
}

.color-yellow {
  top: 109px;
  background: #fee156;
}

.color-bg {
  top: 321px;
  background: #f5f5f5;
}

.color-yellow > span,
.color-bg > span,
.color-dark > span,
.color-gray > span {
  left: 24px;
  top: 24px;
  font-size: 24px;
  line-height: 34px;
}

.color-yellow div,
.color-bg div,
.color-dark div,
.color-gray div {
  left: 24px;
  bottom: 25px;
}

.color-yellow strong,
.color-yellow p,
.color-bg strong,
.color-bg p,
.color-dark strong,
.color-dark p,
.color-gray strong,
.color-gray p {
  font-size: 20px;
  line-height: 28px;
}

.color-dark,
.color-gray {
  top: 533px;
  height: 192px;
}

.color-dark {
  left: 655px;
  width: 263px;
  border: 1px solid #c3c3c3;
  background: #121212;
  color: #ffffff;
}

.color-gray {
  left: 938px;
  width: 262px;
  background: #999999;
  color: #ffffff;
}

.page-display-artboard {
  height: 3067px;
  background: #111111;
}

.page-display-polygon {
  position: absolute;
  left: 627px;
  top: -336px;
  width: 972px;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.page-display-eyebrow {
  position: absolute;
  left: 120px;
  top: 121px;
}

.page-display-title {
  position: absolute;
  left: 120px;
  top: 185px;
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 900;
}

.page-phone,
.online-phone,
.online-result-phone {
  position: absolute;
  z-index: 3;
  max-width: none;
}

.page-display-home {
  left: 237px;
  top: 333px;
  width: 380px;
  height: 775px;
}

.page-copy {
  position: absolute;
  z-index: 3;
  color: #ffffff;
}

.page-copy h3 {
  margin: 0 0 15px;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.page-copy h3 span {
  color: #0bf4c9;
}

.page-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
}

.page-display-home-copy {
  left: 696px;
  top: 355px;
  width: 570px;
}

.tabbar-card {
  position: absolute;
  z-index: 3;
  left: 777px;
  top: 615px;
  width: 465px;
  height: 266px;
  border-radius: 40px;
  background: #ffffff;
  color: #212121;
}

.tabbar-card img {
  position: absolute;
  left: 48px;
  top: 38px;
  width: 370px;
  height: 80px;
}

.tabbar-card h3 {
  position: absolute;
  left: 193px;
  top: 152px;
  margin: 0;
  color: #212121;
  font-size: 16px;
  line-height: 19px;
  font-weight: 800;
}

.tabbar-card p {
  position: absolute;
  left: 59px;
  top: 180px;
  width: 348px;
  margin: 0;
  color: #212121;
  font-size: 14px;
  line-height: 24px;
}

.page-display-share {
  left: 823px;
  top: 998px;
  width: 380px;
  height: 774px;
}

.page-display-share-copy {
  left: 198px;
  top: 1278px;
  width: 534px;
}

.page-display-explore-panel {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 1584px;
  width: 1440px;
  height: 1076px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #0a1f1a 0%, #111111 100%);
}

.page-display-explore-word {
  position: absolute;
  z-index: 2;
  left: 23.63px;
  top: 1655px;
  width: 1388.37px;
  height: 233.44px;
  max-width: none;
  pointer-events: none;
}

.page-display-nearby-machine {
  left: 132px;
  top: 1861px;
  width: 360.51px;
  height: 734.21px;
}

.page-display-nearby-copy {
  left: 599px;
  top: 1957px;
  width: 650px;
}

.page-display-nearby-circle {
  left: 546px;
  top: 2212px;
  width: 360.51px;
  height: 734.21px;
}

.page-display-nearby-feed {
  left: 959px;
  top: 2212px;
  width: 360.51px;
  height: 734.21px;
}

.explore-page-label {
  position: absolute;
  left: 132px;
  top: 2907px;
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-artboard {
  height: 2442px;
  background: #111111;
}

.online-top-panel {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1076px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #0a1f1a 0%, #111111 100%);
}

.online-word {
  position: absolute;
  z-index: 2;
  left: 7px;
  top: 26px;
  width: 1408px;
  height: 290px;
  max-width: none;
  pointer-events: none;
}

.online-copy {
  position: absolute;
  z-index: 3;
  width: 291px;
  color: #ffffff;
}

.online-copy h3 {
  margin: 0 0 15px;
  color: #0bf4c9;
  font-size: 24px;
  line-height: 29px;
  font-weight: 800;
}

.online-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
}

.online-select-copy {
  left: 161px;
  top: 272px;
}

.online-machine-copy {
  left: 575px;
  top: 1050px;
}

.online-interaction-copy {
  left: 993px;
  top: 272px;
}

.online-result-copy {
  left: 139px;
  top: 1522px;
  width: 319px;
}

.online-arrow {
  position: absolute;
  z-index: 3;
  max-width: none;
}

.online-arrow-select {
  left: 285px;
  top: 411px;
  width: 32px;
  height: 32px;
}

.online-arrow-interaction {
  left: 1127px;
  top: 411px;
  width: 25.51px;
  height: 31.53px;
}

.online-arrow-machine {
  left: 708px;
  top: 970.34px;
  width: 25.51px;
  height: 31.53px;
}

.online-select-phone {
  left: 120px;
  top: 477px;
  width: 360.51px;
  height: 734.21px;
}

.online-machine-phone {
  left: 540px;
  top: 188px;
  width: 360.51px;
  height: 734.21px;
}

.online-interaction-phone {
  left: 959px;
  top: 477px;
  width: 360.51px;
  height: 734.21px;
}

.online-long-arrow {
  position: absolute;
  z-index: 3;
  left: 1046px;
  top: 1257px;
  width: 173px;
  height: 301px;
  max-width: none;
}

.online-bingo-panel {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 1792px;
  width: 1200px;
  height: 507px;
  border-radius: 60px;
  background: linear-gradient(180deg, #4ff78a 0%, #1cccb7 100%);
}

.online-bingo-word {
  position: absolute;
  z-index: 2;
  left: 162px;
  top: 1924px;
  width: 1117px;
  height: 204px;
  max-width: none;
}

.online-result-phone {
  left: 520.34px;
  top: 1407px;
  width: 400px;
  height: 815px;
}

.trade-profile-artboard {
  height: 2570px;
  background: #111111;
}

.feature-copy {
  position: absolute;
  z-index: 4;
  color: #ffffff;
}

.feature-copy h3 {
  margin: 0 0 15px;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.feature-copy h3 span {
  color: #0bf4c9;
}

.feature-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
}

.trade-word-image {
  position: absolute;
  z-index: 1;
  left: 8.98px;
  top: 667px;
  width: 1431px;
  height: 316px;
  max-width: none;
}

.trade-phone-image,
.auction-phone-image,
.profile-phone-image {
  position: absolute;
  z-index: 3;
  width: 380px;
  height: 774px;
  max-width: none;
}

.trade-phone-image {
  left: 300px;
  top: 474px;
}

.auction-phone-image {
  left: 754px;
  top: 333px;
}

.trade-module-copy {
  left: 166px;
  top: 120px;
  width: 647px;
}

.profile-panel {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 1424px;
  width: 1440px;
  height: 1003px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #0a1f1a 0%, #111111 100%);
}

.profile-word-image {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 1501.56px;
  width: 1440px;
  height: 263.24px;
  max-width: none;
}

.profile-module-copy {
  left: 166px;
  top: 1707px;
  width: 595px;
}

.profile-phone-image {
  left: 886px;
  top: 1633px;
}

.icon-spec-card {
  position: absolute;
  z-index: 4;
  left: 165px;
  top: 1975px;
  width: 599px;
  height: 344px;
  border-radius: 40px;
  background: #ffffff;
  color: #000000;
}

.icon-spec-card h4 {
  position: absolute;
  left: 45px;
  top: 35px;
  margin: 0;
  font-family: "Arial Black", Impact, "Inter", sans-serif;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: 0.25px #000000;
}

.icon-spec-card p {
  position: absolute;
  left: 50px;
  top: 82px;
  width: 501px;
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.icon-spec-grid {
  position: absolute;
  left: 46px;
  top: 205px;
  display: flex;
  gap: 27px;
}

.icon-spec-item {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid #d8d8d8;
  background: #ffffff;
}

.icon-spec-item img {
  display: block;
  width: 64.27px;
  height: 64.27px;
  object-fit: contain;
}

.assets-overview-artboard {
  height: 2636px;
  background: #111111;
}

.assets-gradient-panel {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 311px;
  width: 1440px;
  height: 974px;
  background: linear-gradient(
    180deg,
    #111111 0%,
    #33554d 32.69%,
    #33554d 60.58%,
    #111111 100%
  );
}

.assets-word-image {
  position: absolute;
  z-index: 1;
  left: 20.06px;
  top: 656.15px;
  width: 1401.87px;
  height: 259.85px;
  max-width: none;
}

.assets-copy {
  left: 243px;
  top: 90px;
  width: 934px;
}

.assets-copy h3 {
  color: #0bf4c9;
}

.assets-copy h3 span {
  color: #ffffff;
}

.asset-task-image,
.asset-recharge-image {
  position: absolute;
  z-index: 3;
  max-width: none;
}

.asset-task-image {
  left: 94.49px;
  top: 380.21px;
  width: 978.08px;
  height: 978.08px;
}

.asset-recharge-image {
  left: 451.48px;
  top: 300.18px;
  width: 988.52px;
  height: 1030.72px;
}

.overview-heading {
  position: absolute;
  z-index: 3;
  left: 120px;
  top: 1405px;
}

.overview-heading p,
.overview-heading h2 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-heading p {
  color: #1cccb7;
  font-size: 48px;
  line-height: 58px;
}

.overview-heading h2 {
  margin-top: 6px;
  color: #ffffff;
  font-size: 36px;
  line-height: 44px;
}

.overview-carousel-wrap {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 1589px;
  width: 1440px;
  height: 729px;
}

.overview-carousel-wrap::before,
.overview-carousel-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  width: 180px;
  height: 729px;
  pointer-events: none;
}

.overview-carousel-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
}

.overview-carousel-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
}

.overview-carousel {
  width: 100%;
  height: 729px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000000 8%,
    #000000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000000 8%,
    #000000 92%,
    transparent 100%
  );
}

.overview-carousel::-webkit-scrollbar {
  display: none;
}

.overview-carousel.is-dragging {
  cursor: grabbing;
}

.overview-track {
  display: flex;
  width: max-content;
  gap: 40px;
  padding-top: 33px;
}

.overview-track img {
  width: 276px;
  height: 600px;
  flex: 0 0 auto;
  border-radius: 34px;
  object-fit: cover;
  object-position: top center;
  transition: transform 220ms ease;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.overview-track img:hover {
  transform: translateY(-33px);
}

.zhaixing-intro-artboard {
  height: 2993px;
  background: #111111;
}

.zhaixing-intro-bg {
  position: absolute;
  left: -2px;
  top: -1px;
  width: 1442px;
  height: 454px;
  background: linear-gradient(180deg, #150834 0%, #111111 100%);
}

.zhaixing-bg-word {
  position: absolute;
  left: 0;
  top: 105px;
  width: 1437.15px;
  height: 169px;
  max-width: none;
}

.zhaixing-top-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-transform: uppercase;
}

.zhaixing-top-label span {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.zhaixing-top-label span:first-child {
  background: #ffffff;
}

.zhaixing-top-label b {
  font-weight: 400;
}

.zhaixing-ui-label {
  left: 120px;
  top: 51px;
  gap: 6px;
}

.zhaixing-ui-label b {
  margin-left: 12px;
}

.zhaixing-app-label {
  left: 1154px;
  top: 51px;
  gap: 12.5px;
}

.zhaixing-app-vector {
  width: 42.5px;
  height: 12.12px;
  max-width: none;
  flex: 0 0 auto;
}

.zhaixing-hero-copy {
  position: absolute;
  z-index: 3;
  left: 120px;
  top: 232px;
  width: 528px;
}

.zhaixing-hero-copy h2 {
  margin: 0;
  color: #ad81ff;
  font-family: "Alimama ShuHeiTi", "Alimama_ShuHeiTi", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 96px;
  line-height: 115px;
  font-weight: 900;
}

.zhaixing-subtitle {
  margin: 19px 0 0;
  color: #ffffff;
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
}

.zhaixing-description {
  margin: 57px 0 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 34px;
  font-weight: 400;
}

.zhaixing-hero-phone {
  position: absolute;
  z-index: 4;
  max-width: none;
  box-sizing: border-box;
  border: 5px solid #787878;
  border-radius: 50px;
  object-fit: cover;
  object-position: center center;
}

.zhaixing-home-phone {
  z-index: 5;
  left: 740px;
  top: 202px;
  width: 326px;
  height: 706px;
}

.zhaixing-profile-phone {
  z-index: 4;
  left: 977px;
  top: 226px;
  width: 336px;
  height: 728px;
}

.zhaixing-lower-panel {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 806px;
  width: 1440px;
  height: 2187px;
  border-radius: 80px;
  background: #221e2e;
}

.zhaixing-heading {
  position: absolute;
  z-index: 7;
  left: 120px;
}

.zhaixing-heading p,
.zhaixing-heading h3 {
  margin: 0;
  font-weight: 900;
}

.zhaixing-heading p {
  color: #ad81ff;
  font-size: 48px;
  line-height: 58px;
  text-transform: uppercase;
}

.zhaixing-heading h3 {
  margin-top: 6px;
  color: #ffffff;
  font-size: 36px;
  line-height: 44px;
}

.zhaixing-objectives-heading {
  top: 891px;
}

.zhaixing-guidelines-heading {
  top: 1665px;
}

.zhaixing-objective-card {
  position: absolute;
  z-index: 7;
  top: 1053px;
  width: 580px;
  height: 445px;
  border-radius: 0;
  background: transparent;
  color: #000000;
  padding: 0;
}

.zhaixing-objective-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 65px;
  width: 580px;
  height: 380px;
  border-radius: 50px;
  background: #ffffff;
}

.objective-audience {
  left: 120px;
}

.objective-earnings {
  left: 740px;
}

.zhaixing-objective-card h4 {
  position: absolute;
  z-index: 2;
  left: 53px;
  top: 114px;
  margin: 0;
  font-size: 36px;
  line-height: 43px;
  font-weight: 900;
}

.zhaixing-objective-card em {
  position: absolute;
  z-index: 1;
  left: 53px;
  top: 136px;
  color: #e8e8e8;
  font-size: 48px;
  line-height: 58px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.zhaixing-objective-card p {
  position: absolute;
  z-index: 2;
  left: 53px;
  top: 211px;
  width: 463px;
  margin: 0;
  font-size: 18px;
  line-height: 36px;
  font-weight: 400;
}

.zhaixing-objective-card strong {
  font-weight: 900;
}

.objective-icon {
  position: absolute;
  z-index: 2;
  max-width: none;
  pointer-events: none;
}

.objective-female {
  left: 364px;
  top: 0;
  width: 195px;
  height: 195px;
}

.objective-wallet {
  left: 373.2px;
  top: 16.4px;
  width: 177.45px;
  height: 164.1px;
}

.zhaixing-guide-card {
  position: absolute;
  z-index: 7;
  top: 1872px;
  width: 540px;
  height: 400px;
  overflow: hidden;
  border-radius: 50px;
}

.guide-spacing {
  left: 177px;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.guide-spacing img {
  position: absolute;
  left: 120px;
  top: 0;
  width: 300px;
  height: 346px;
  max-width: none;
  object-fit: cover;
}

.guide-spacing-label {
  position: absolute;
  left: 0;
  width: 540px;
  color: #000000;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.guide-spacing-margin {
  top: 125px;
}

.guide-spacing-radius {
  top: 160px;
}

.guide-phone {
  left: 723px;
  background: #8444f7;
}

.guide-phone img {
  position: absolute;
  left: 161px;
  top: 79px;
  width: 737px;
  height: 515px;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.zhaixing-color-card {
  position: absolute;
  z-index: 7;
  left: 177px;
  top: 2278px;
  width: 1086px;
  height: 571px;
  border-radius: 50px;
  background: #f5f0ff;
  color: #000000;
  padding: 0;
}

.zhaixing-color-card h4 {
  position: absolute;
  z-index: 2;
  margin: 0;
  left: 57px;
  top: 47px;
  font-size: 36px;
  line-height: 43px;
  font-weight: 900;
}

.zhaixing-color-card em {
  position: absolute;
  left: 57px;
  top: 69px;
  color: #e3dcef;
  font-size: 48px;
  line-height: 58px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.zhaixing-color-card div {
  position: absolute;
  display: grid;
  place-content: center;
  color: #ffffff;
  text-align: center;
  font-weight: 900;
}

.zhaixing-color-card span {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.zhaixing-color-card strong {
  display: block;
  margin-top: 0;
  font-size: 32px;
  line-height: 39px;
}

.zhaixing-color-main {
  left: 57px;
  top: 182px;
  width: 486px;
  height: 280px;
  border-radius: 40px;
  background: #8744f7;
}

.zhaixing-color-blue {
  left: 543px;
  top: 182px;
  width: 234px;
  height: 280px;
  border-radius: 40px;
  background: #4c44f6;
}

.zhaixing-color-dark {
  left: 777px;
  top: 182px;
  width: 234px;
  height: 140px;
  border-radius: 40px;
  background: #201c3b;
}

.zhaixing-color-yellow {
  left: 777px;
  top: 322px;
  width: 234px;
  height: 140px;
  border-radius: 40px;
  background: #fdcb2b;
}

.zhaixing-display-artboard {
  height: 3806px;
  background: #111111;
}

.zhaixing-display-hero-bg {
  position: absolute;
  left: -2px;
  top: 0;
  width: 1442px;
  height: 642px;
  overflow: hidden;
  border-radius: 80px 80px 0 0;
  background: #362560;
}

.zhaixing-display-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/figma-zhaixing-11-bg-fill.png") center bottom / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

.zhaixing-display-word {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 321px;
  width: 1428px;
  height: 214.02px;
  max-width: none;
}

.zhaixing-display-polygon {
  position: absolute;
  z-index: 0;
  left: 264px;
  top: 186px;
  width: 1652px;
  height: 1539px;
  max-width: none;
}

.zhaixing-display-heading {
  position: absolute;
  z-index: 3;
  left: 120px;
  top: 77px;
}

.zhaixing-display-heading p,
.zhaixing-display-heading h2 {
  margin: 0;
  font-weight: 900;
}

.zhaixing-display-heading p {
  color: #ad81ff;
  font-size: 48px;
  line-height: 58px;
  text-transform: uppercase;
}

.zhaixing-display-heading h2 {
  margin-top: 6px;
  color: #ffffff;
  font-size: 36px;
  line-height: 44px;
}

.zhaixing-display-label {
  position: absolute;
  z-index: 3;
  left: 1187px;
  top: 96px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-transform: uppercase;
}

.zhaixing-display-label span {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.zhaixing-display-label span:first-child {
  background: #ffffff;
}

.zhaixing-display-label b {
  margin-left: 12px;
  font-weight: 400;
}

.zhaixing-home-panel {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 529px;
  width: 1440px;
  height: 422px;
  border-radius: 80px;
  background: #18171e;
}

.zhaixing-display-copy {
  position: absolute;
  z-index: 4;
  width: 567px;
  color: #ffffff;
}

.zhaixing-display-copy h3 {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
}

.zhaixing-display-copy h3 span {
  color: #ad81ff;
}

.zhaixing-display-copy p {
  margin: 19px 0 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.zhaixing-home-copy {
  left: 154px;
  top: 645px;
}

.zhaixing-feature-copy {
  left: 156px;
  top: 1244px;
}

.zhaixing-hand-phone {
  position: absolute;
  z-index: 4;
  left: 825px;
  top: 231px;
  width: 530px;
  height: 720px;
  max-width: none;
  object-fit: cover;
  object-position: top center;
}

.zhaixing-display-phone {
  position: absolute;
  z-index: 4;
  max-width: none;
  box-sizing: border-box;
  border: 5px solid #ffffff;
  border-radius: 50px;
  object-fit: cover;
  object-position: center center;
}

.zhaixing-discover-phone {
  left: 869px;
  top: 1077px;
  width: 370px;
  height: 800px;
  border-color: #787878;
}

.zhaixing-message-phone {
  left: 228px;
  top: 1717px;
  width: 370px;
  height: 801px;
}

.zhaixing-match-panel {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 2073px;
  width: 1433px;
  height: 1733px;
  border-radius: 80px 80px 0 0;
  background: #8744f7;
}

.zhaixing-screen-label {
  position: absolute;
  z-index: 5;
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
  text-align: center;
}

.zhaixing-message-label {
  left: 365px;
  top: 1633px;
}

.zhaixing-match-label {
  left: 956px;
  top: 2133px;
}

.zhaixing-matching-label {
  left: 365px;
  top: 2765px;
}

.zhaixing-success-label {
  left: 872px;
  top: 3219px;
}

.zhaixing-match-phone {
  left: 819px;
  top: 2217px;
  width: 393px;
  height: 852px;
}

.zhaixing-message2-phone {
  left: 819px;
  top: 2268px;
  width: 370px;
  height: 801px;
  border-color: #787878;
}

.zhaixing-matching-phone {
  left: 228px;
  top: 2849px;
  width: 370px;
  height: 803px;
}

.zhaixing-success-card {
  position: absolute;
  z-index: 4;
  left: 819px;
  top: 3293px;
  width: 393px;
  height: 359px;
  max-width: none;
  box-sizing: border-box;
  border: 5px solid #ffffff;
  border-radius: 40px;
  object-fit: cover;
  object-position: center center;
}

.zhaixing-profile-artboard {
  height: 1709px;
  background: #111111;
}

.zhaixing-profile-polygon {
  position: absolute;
  z-index: 0;
  left: 264px;
  top: -59px;
  width: 1652px;
  height: 1539px;
  max-width: none;
  opacity: 1;
}

.zhaixing-profile-hero-bg {
  position: absolute;
  z-index: 1;
  left: -2px;
  top: 0;
  width: 1442px;
  height: 432px;
  overflow: hidden;
  border-radius: 80px 80px 0 0;
  background: #1e1337;
}

.zhaixing-profile-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/zhaixing-figma/figma-zhaixing-12-bg-fill.png") center bottom / cover no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0.44;
}

.zhaixing-profile-word {
  position: absolute;
  z-index: 2;
  left: 5px;
  top: 172px;
  width: 1428px;
  height: 214.02px;
  max-width: none;
  pointer-events: none;
}

.zhaixing-profile-copy {
  position: absolute;
  z-index: 4;
  left: 154px;
  top: 551px;
  width: 570px;
  color: #ffffff;
}

.zhaixing-profile-copy h3,
.zhaixing-signup-copy h3,
.zhaixing-mbti-copy h3 {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
}

.zhaixing-profile-copy h3 span,
.zhaixing-signup-copy h3 span,
.zhaixing-mbti-copy h3 span {
  color: #ad81ff;
}

.zhaixing-profile-copy p,
.zhaixing-signup-copy p,
.zhaixing-mbti-copy p {
  margin: 19px 0 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.zhaixing-profile-popup-phone {
  position: absolute;
  z-index: 4;
  left: 910px;
  top: 106px;
  width: 360px;
  height: 779px;
  max-width: none;
  box-sizing: border-box;
  border: 5px solid #707070;
  border-radius: 50px;
  object-fit: cover;
  object-position: top center;
}

.zhaixing-constellation-heading {
  position: absolute;
  z-index: 3;
  left: 157px;
  top: 987px;
}

.zhaixing-constellation-heading p,
.zhaixing-constellation-heading h2 {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
}

.zhaixing-constellation-heading p {
  color: #ad81ff;
  font-size: 48px;
  line-height: 58px;
}

.zhaixing-constellation-heading h2 {
  margin-top: 6px;
  color: #ffffff;
  font-size: 36px;
  line-height: 44px;
}

.zhaixing-constellation-image {
  position: absolute;
  z-index: 3;
  left: 213px;
  top: 1214px;
  width: 1013px;
  height: 335px;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.zhaixing-signup-artboard {
  height: 3642px;
  background: #111111;
}

.zhaixing-signup-copy,
.zhaixing-mbti-copy {
  position: absolute;
  z-index: 4;
  color: #ffffff;
}

.zhaixing-signup-copy {
  left: 182px;
  top: 104px;
  width: 587px;
}

.zhaixing-mbti-copy {
  left: 120px;
  top: 1249px;
  width: 667px;
}

.zhaixing-signup-word {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 228px;
  width: 1200px;
  height: 226.31px;
  max-width: none;
  pointer-events: none;
}

.zhaixing-signup-mockups {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.zhaixing-signup-mockups::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 620px;
  height: 520px;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0) 0%,
    rgba(17, 17, 17, 0.28) 32%,
    rgba(17, 17, 17, 0.72) 66%,
    #111111 100%
  );
  pointer-events: none;
}

.signup-mockup {
  position: absolute;
  z-index: 1;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.signup-mockup-1 {
  left: 120px;
  top: 416px;
  width: 460px;
  height: 335px;
}

.signup-mockup-2 {
  left: 489px;
  top: 694px;
  width: 460px;
  height: 335px;
}

.signup-mockup-5 {
  left: 120px;
  top: 694px;
  width: 460px;
  height: 335px;
}

.signup-mockup-3 {
  left: 496px;
  top: 435px;
  width: 461px;
  height: 335px;
}

.signup-mockup-4 {
  left: 860px;
  top: 703px;
  width: 460px;
  height: 335px;
}

.zhaixing-mbti-grid {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.zhaixing-mbti-row {
  position: absolute;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.mbti-row-01 {
  left: 210px;
  top: 1507px;
  width: 1019px;
  height: 228px;
}

.mbti-row-02 {
  left: 210px;
  top: 1771px;
  width: 1019px;
  height: 228px;
}

.mbti-row-03 {
  left: 211px;
  top: 2036px;
  width: 1019px;
  height: 228px;
}

.mbti-row-04 {
  left: 212px;
  top: 2300px;
  width: 1017px;
  height: 228px;
}

.zhaixing-overview-heading {
  position: absolute;
  z-index: 3;
  left: 120px;
  top: 2687px;
}

.zhaixing-overview-heading p,
.zhaixing-overview-heading h2 {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
}

.zhaixing-overview-heading p {
  color: #ad81ff;
  font-size: 48px;
  line-height: 58px;
}

.zhaixing-overview-heading h2 {
  margin-top: 6px;
  color: #ffffff;
  font-size: 36px;
  line-height: 44px;
}

.zhaixing-overview-carousel-wrap {
  top: 2871px;
  height: 633px;
}

.zhaixing-overview-carousel-wrap::before,
.zhaixing-overview-carousel-wrap::after {
  height: 633px;
}

.zhaixing-overview-carousel {
  height: 633px;
}

.zhaixing-overview-track {
  gap: 36px;
  padding-top: 33px;
}

.zhaixing-overview-track img {
  width: 276px;
  height: 600px;
  border-radius: 40px;
  object-position: top center;
}

.souyouji-artboard {
  overflow: hidden;
  background: #12171e;
}

.souyouji-intro-artboard {
  height: 2928px;
  background: #111111;
}

.souyouji-hero-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1284px;
  overflow: hidden;
}

.souyouji-hero-laptop {
  position: absolute;
  left: 0;
  top: -42px;
  width: 1440px;
  height: 1326px;
  max-width: none;
  object-fit: cover;
}

.souyouji-hero-screen {
  position: absolute;
  left: 336px;
  top: 484px;
  width: 779px;
  height: 498px;
  overflow: hidden;
  border-radius: 6px;
}

.souyouji-hero-screen img {
  position: absolute;
  left: 0;
  top: 0;
  width: 779px;
  height: 2364px;
  max-width: none;
}

.souyouji-top-label {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-transform: uppercase;
}

.souyouji-web-label {
  left: 120px;
  top: 45px;
  gap: 6px;
}

.souyouji-web-label span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
}

.souyouji-web-label b,
.souyouji-name-label b {
  margin-left: 12px;
  font-weight: 400;
}

.souyouji-name-label {
  left: 1182px;
  top: 45px;
  gap: 5px;
}

.souyouji-name-label i {
  display: block;
  width: 10.5px;
  height: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #ffffff;
}

.souyouji-hero-title {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 167px;
  width: 1440px;
  text-align: center;
  color: #ffffff;
}

.souyouji-hero-title h2 {
  margin: 0;
  font-family: "Arial Black", "Microsoft YaHei", sans-serif;
  font-size: 64px;
  line-height: 77px;
  font-weight: 900;
}

.souyouji-hero-title p {
  margin: 11px 0 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 200;
  letter-spacing: 4.16px;
}

.souyouji-hero-title em,
.souyouji-section-heading span,
.souyouji-project-heading span,
.souyouji-count-heading span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 2px 12px 1px;
  border-radius: 16px 16px 16px 2px;
  background: #ff8c2d;
  color: #ffffff;
  font-size: 20px;
  line-height: 24px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.souyouji-hero-title em {
  left: 906px;
  top: 0;
  width: 60px;
  padding-left: 0;
  padding-right: 0;
  font-size: 24px;
  line-height: 29px;
}

.souyouji-website-word {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 348px;
  width: 1432.85px;
  height: 251px;
  max-width: none;
  opacity: 0.85;
}

.souyouji-project-panel {
  position: absolute;
  left: 0;
  top: 1284px;
  width: 1440px;
  height: 1644px;
  background: #ffffff;
}

.souyouji-orange-ring {
  position: absolute;
  left: 878px;
  top: 1490px;
  width: 1332px;
  height: 1332px;
  max-width: none;
}

.souyouji-project-heading {
  position: absolute;
  left: 120px;
  top: 1437px;
  z-index: 2;
  color: #000000;
  font-family: "Arial Black", Impact, Inter, sans-serif;
  font-size: 96px;
  line-height: 116px;
  font-weight: 900;
}

.souyouji-project-heading p {
  margin: 0;
}

.souyouji-project-heading span {
  left: 515px;
  top: 8px;
  width: 99px;
  padding-left: 0;
  padding-right: 0;
  font-family: Inter, "Microsoft YaHei", sans-serif;
}

.souyouji-project-copy {
  position: absolute;
  z-index: 2;
  left: 120px;
  width: 560px;
  color: #000000;
}

.souyouji-project-copy h3 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.souyouji-project-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.souyouji-concept-copy p + p {
  margin-top: 0;
}

.souyouji-goal-copy {
  top: 1942px;
}

.souyouji-concept-copy {
  top: 2384px;
}

.souyouji-home-artboard {
  height: 3375px;
}

.souyouji-home-word {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 1434px;
  height: 184.2px;
  max-width: none;
  opacity: 0.55;
}

.souyouji-home-copy {
  position: absolute;
  left: 252px;
  top: 150px;
  width: 948px;
  color: #ffffff;
}

.souyouji-home-copy h2 {
  margin: 0 0 27px;
  font-size: 32px;
  line-height: 39px;
  font-weight: 800;
}

.souyouji-home-copy h2 span {
  color: #ff8c2d;
}

.souyouji-home-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.souyouji-home-frame-bg {
  position: absolute;
  left: 246px;
  top: 453px;
  width: 947px;
  height: 566px;
  border-radius: 54px;
  background: #505562;
}

.souyouji-home-page-shot {
  position: absolute;
  left: 262px;
  top: 469px;
  width: 915px;
  height: 2772px;
  overflow: hidden;
  border-radius: 40px;
}

.souyouji-home-page-shot img {
  width: 915px;
  height: 2772px;
  max-width: none;
  object-fit: fill;
}

.souyouji-pages-artboard {
  height: 4495px;
}

.souyouji-pattern-panel {
  position: absolute;
  overflow: hidden;
  border-radius: 80px 80px 0 0;
  background:
    linear-gradient(180deg, rgba(41, 45, 48, 0.98) 0%, rgba(18, 23, 30, 0.92) 100%),
    url("./assets/souyouji-figma/souyouji-bg-pattern.png") center top / cover no-repeat;
}

.souyouji-gif-panel {
  left: 0;
  top: 0;
  width: 1440px;
  height: 643px;
}

.souyouji-section-heading {
  position: absolute;
  z-index: 2;
  color: #ffffff;
}

.souyouji-section-heading h2 {
  margin: 0;
  font-family: "Arial Black", Impact, Inter, sans-serif;
  font-size: 96px;
  line-height: 116px;
  font-weight: 900;
}

.souyouji-section-heading p {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 40px;
  font-weight: 400;
}

.souyouji-gif-heading {
  left: 120px;
  top: 131px;
  width: 1200px;
}

.souyouji-gif-heading span {
  left: 797px;
  top: 7px;
  width: 99px;
  padding-left: 0;
  padding-right: 0;
}

.souyouji-ad {
  position: absolute;
  left: 120px;
  width: 1200px;
  max-width: none;
  border-radius: 10px;
  object-fit: cover;
}

.souyouji-ad-app {
  top: 464px;
  width: 1190.7px;
  height: 80px;
}

.souyouji-ad-client {
  top: 744px;
  height: 81px;
}

.souyouji-ad-lottery {
  top: 1025px;
  height: 81px;
}

.souyouji-ad-caption {
  position: absolute;
  left: 0;
  width: 1440px;
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}

.caption-app {
  top: 568px;
}

.caption-client {
  top: 849px;
}

.caption-lottery {
  top: 1130px;
}

.souyouji-main-panel {
  position: absolute;
  left: 0;
  top: 1386px;
  width: 1440px;
  height: 930px;
  border-radius: 80px;
  background: #ffffff;
}

.souyouji-main-pattern {
  left: 0;
  top: 1385px;
  width: 1440px;
  height: 643px;
  opacity: 0.18;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%),
    url("./assets/souyouji-figma/souyouji-bg-pattern.png") center top / cover no-repeat;
}

.souyouji-main-heading {
  left: 0;
  top: 1548px;
  width: 1440px;
  color: #000000;
  text-align: center;
}

.souyouji-main-heading span {
  left: 1073px;
  top: 0;
  width: 99px;
  padding-left: 0;
  padding-right: 0;
}

.souyouji-page-shot,
.souyouji-popup-shot {
  position: absolute;
  margin: 0;
}

.souyouji-page-shot > div {
  overflow: hidden;
  background: #eeeeee;
}

.souyouji-page-shot img,
.souyouji-popup-shot img,
.souyouji-overview-card img {
  display: block;
  max-width: none;
}

.souyouji-vip-one {
  left: 210px;
  top: 1831px;
}

.souyouji-vip-two {
  left: 210px;
  top: 2647px;
}

.souyouji-vip-one > div,
.souyouji-vip-two > div {
  width: 990px;
  height: 580px;
  border: 15px solid #494949;
  border-radius: 40px;
}

.souyouji-vip-one img {
  width: 990px;
  height: 885px;
}

.souyouji-vip-two img {
  width: 990px;
  height: 1337px;
}

.souyouji-game-list {
  left: 130px;
  top: 3463px;
}

.souyouji-game-detail {
  left: 742px;
  top: 3463px;
}

.souyouji-game-list > div,
.souyouji-game-detail > div {
  position: relative;
  width: 548px;
  height: 873px;
  border: 10px solid #494949;
  border-radius: 20px;
}

.souyouji-game-list img {
  width: 548px;
  height: 1037px;
}

.souyouji-game-detail > div > img:first-child {
  width: 548px;
  height: 1219px;
}

.souyouji-detail-thumb {
  position: absolute;
  left: 85px;
  top: 22px;
  width: 248px;
  height: 140px;
  object-fit: cover;
}

.souyouji-page-shot figcaption,
.souyouji-popup-shot figcaption {
  margin: 30px 0 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
}

.souyouji-popups-artboard {
  height: 3742px;
}

.souyouji-popup-pattern,
.souyouji-overview-pattern {
  left: 0;
  top: 0;
  width: 1440px;
  height: 643px;
  opacity: 0.38;
}

.souyouji-popup-heading,
.souyouji-overview-heading {
  left: 0;
  top: 163px;
  width: 1440px;
  text-align: center;
}

.souyouji-popup-heading span {
  left: 1132px;
  top: 0;
  width: 84px;
  padding-left: 0;
  padding-right: 0;
}

.souyouji-popup-shot {
  width: 1096px;
  height: 616px;
}

.souyouji-popup-shot::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -10px;
  border: 10px solid #828282;
  border-radius: 35px;
  pointer-events: none;
}

.souyouji-popup-shot img {
  width: 1096px;
  height: 616px;
  border-radius: 25px;
  object-fit: cover;
}

.popup-register {
  left: -30px;
  top: 424px;
}

.popup-login {
  left: 388px;
  top: 1249px;
}

.popup-profile {
  left: -30px;
  top: 2074px;
}

.popup-prize {
  left: 388px;
  top: 2899px;
}

.souyouji-overview-artboard {
  height: 2171px;
}

.souyouji-overview-heading span {
  left: 1160px;
  top: 0;
  width: 104px;
  padding-left: 0;
  padding-right: 0;
}

.souyouji-overview-grid {
  position: absolute;
  left: -501px;
  top: 456px;
  width: 2169px;
  height: 1700px;
}

.souyouji-overview-card {
  position: absolute;
  width: 548px;
  height: 308px;
  overflow: hidden;
  border: 6px solid #828282;
  border-radius: 25px;
  background: #eeeeee;
}

.souyouji-overview-card img {
  width: 100%;
}

.ov-01 { left: 423px; top: 0; }
.ov-02 { left: 1011px; top: 0; }
.ov-03 { left: 1599px; top: 0; }
.ov-04 { left: 294px; top: 348px; }
.ov-05 { left: 882px; top: 348px; }
.ov-06 { left: 1470px; top: 348px; }
.ov-07 { left: 149px; top: 696px; }
.ov-08 { left: 737px; top: 696px; }
.ov-09 { left: 1325px; top: 696px; }
.ov-10 { left: 1913px; top: 696px; }
.ov-11 { left: 0; top: 1044px; }
.ov-12 { left: 588px; top: 1044px; }
.ov-13 { left: 1176px; top: 1044px; }
.ov-14 { left: 1764px; top: 1044px; }
.ov-15 { left: 445px; top: 1392px; }
.ov-16 { left: 1033px; top: 1392px; }
.ov-17 { left: 1621px; top: 1392px; }

.ov-01 img { height: 1661px; }
.ov-04 img { height: 719px; }
.ov-06 img { height: 443px; }
.ov-08 img { height: 904px; }
.ov-09 img { height: 722px; }
.ov-12 img { height: 467px; }
.ov-13 img { height: 518px; }
.ov-14 img { height: 755px; }
.ov-15 img { height: 558px; }
.ov-16 img { height: 1203px; }

.souyouji-overview-fade {
  position: absolute;
  left: 0;
  top: 1393px;
  width: 1440px;
  height: 778px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 100%);
}

.souyouji-count-heading {
  position: absolute;
  left: 0;
  top: 1965px;
  width: 1440px;
  color: #ffffff;
  text-align: center;
}

.souyouji-count-heading h2 {
  margin: 0;
  font-family: "Arial Black", Impact, Inter, sans-serif;
  font-size: 96px;
  line-height: 116px;
  font-weight: 900;
}

.souyouji-count-heading span {
  left: 1044px;
  top: 0;
  width: 117px;
  padding-left: 0;
  padding-right: 0;
}

.operation-artboard {
  background: #111111;
  overflow: hidden;
}

#case-operations-intro {
  margin-top: 100px;
}

#case-operations-platform {
  margin-bottom: 100px;
}

.operation-intro-artboard {
  height: 3438px;
}

.operation-newbie-artboard {
  height: 3026px;
}

.operation-newgame-artboard {
  height: 4313px;
}

.operation-platform-artboard {
  height: 1922px;
}

.operation-top-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 643px;
  overflow: hidden;
  border-radius: 80px 80px 0 0;
  background: #111111;
}

.operation-top-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 100%);
  pointer-events: none;
}

.operation-top-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000000 0%, #000000 62%, rgba(0, 0, 0, 0) 100%);
}

.operation-hero-title {
  position: absolute;
  left: 128px;
  top: 169px;
}

.operation-hero-title h2 {
  margin: 0;
  font-size: 96px;
  line-height: 106px;
  font-weight: 900;
}

.operation-hero-title span {
  position: absolute;
  left: 369px;
  top: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 32px;
  padding-top: 1px;
  border-radius: 16px 16px 16px 2px;
  background: #ff3333;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.operation-hero-copy {
  position: absolute;
  left: 134px;
  top: 442px;
  width: 528px;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 34px;
  font-weight: 400;
}

.operation-hero-mockup {
  position: absolute;
  left: 740px;
  top: 120px;
  width: 580px;
  height: 586px;
  max-width: none;
}

.operation-section-title {
  position: absolute;
  left: 120px;
  color: #ffffff;
}

.operation-section-title p,
.operation-section-title h3,
.operation-mobile-title h3 {
  margin: 0;
  font-weight: 900;
}

.operation-mobile-title h3 {
  -webkit-text-stroke: 1.2px currentColor;
  paint-order: stroke fill;
}

.operation-section-title p {
  font-size: 48px;
  line-height: 58px;
}

.operation-section-title h3 {
  margin-top: 6px;
  font-size: 36px;
  line-height: 44px;
}

.operation-return-title {
  top: 893px;
}

.operation-return-title p {
  color: #a66dfb;
}

.operation-newbie-title,
.operation-newgame-title,
.operation-platform-title {
  top: 101px;
}

.operation-newbie-title p {
  color: #f34f33;
}

.operation-newgame-title p {
  color: #33f0f3;
}

.operation-platform-title p {
  color: #ffe570;
}

.operation-web-shot {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.operation-return-web {
  left: 225px;
  top: 1099px;
  width: 990px;
  height: 1190px;
  border-radius: 40px;
}

.operation-mobile-title {
  position: absolute;
  color: #ffffff;
}

.operation-return-mobile-title {
  left: 183px;
  top: 2437px;
}

.operation-return-mobile-title h3,
.operation-newbie-mobile-title h3 {
  font-size: 160px;
  line-height: 180px;
  font-weight: 900;
}

.operation-return-mobile-panel {
  position: absolute;
  left: 225px;
  top: 2913px;
  width: 990px;
  height: 405px;
  overflow: hidden;
  border-radius: 40px;
  background: #7754bd;
}

.operation-return-mobile-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(44px);
  opacity: 0.72;
  transform: scale(1.18);
}

.operation-return-mobile-mockup {
  position: absolute;
  left: 400px;
  top: 2553px;
  width: 639px;
  height: 683px;
  max-width: none;
}

.operation-return-mobile-label {
  position: absolute;
  left: 954px;
  top: 3242px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
  text-transform: uppercase;
}

.operation-newbie-web {
  left: 225px;
  top: 308px;
  width: 990px;
  height: 1079px;
  border-radius: 40px;
}

.operation-diagonal {
  position: absolute;
  pointer-events: none;
}

.operation-diagonal-red {
  left: -633px;
  top: 1900px;
  width: 2810px;
  height: 630px;
  background: #f34f33;
  transform: rotate(-30deg);
  transform-origin: center;
}

.operation-newbie-mobile-title {
  left: 120px;
  top: 1516px;
}

.operation-phone-crop {
  position: absolute;
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 50px;
  background: #ffffff;
}

.operation-phone-crop img {
  position: absolute;
  left: 0;
  max-width: none;
}

.operation-newbie-phone {
  top: 2020px;
  width: 365px;
  height: 780px;
}

.operation-newbie-phone.phone-01,
.operation-newgame-phone.phone-01 {
  left: 127px;
}

.operation-newbie-phone.phone-02,
.operation-newgame-phone.phone-02 {
  left: 537px;
}

.operation-newbie-phone.phone-03,
.operation-newgame-phone.phone-03 {
  left: 947px;
}

.operation-newbie-phone img {
  width: 365px;
  height: 2341px;
}

.operation-newbie-phone.phone-01 img {
  top: 0;
}

.operation-newbie-phone.phone-02 img {
  top: -724px;
}

.operation-newbie-phone.phone-03 img {
  top: -1288px;
}

.operation-newgame-bottom {
  position: absolute;
  left: 0;
  top: 2424px;
  width: 1440px;
  height: 1889px;
  border-radius: 80px;
  background: #1b2220;
}

.operation-newgame-web {
  left: 222px;
  top: 292px;
  width: 996px;
  height: 2522px;
  border-radius: 40px;
}

.operation-newgame-mobile-title {
  left: 222px;
  top: 2948px;
}

.operation-newgame-mobile-title h3 {
  font-size: 96px;
  line-height: 116px;
}

.operation-newgame-mobile-label {
  position: absolute;
  left: 1058px;
  top: 3123px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 900;
}

.operation-newgame-phone {
  top: 3314px;
  width: 365px;
  height: 780px;
}

.operation-newgame-phone img {
  width: 365px;
  height: 2937px;
}

.operation-newgame-phone.phone-01 img {
  top: 0;
}

.operation-newgame-phone.phone-02 img {
  top: -1298px;
}

.operation-newgame-phone.phone-03 img {
  top: -2157px;
}

.operation-platform-cream {
  position: absolute;
  left: 0;
  top: 519px;
  width: 1440px;
  height: 1403px;
  border-radius: 80px;
  background: #fffbdf;
}

.operation-flag {
  position: absolute;
  width: 1151px;
  height: 1151px;
  pointer-events: none;
}

.operation-flag img {
  position: absolute;
  left: 133px;
  top: 133px;
  width: 884px;
  height: 884px;
  max-width: none;
}

.operation-flag-left {
  left: -358px;
  top: 631px;
}

.operation-flag-left img {
  transform: rotate(-22deg);
}

.operation-flag-right {
  left: 643px;
  top: 475px;
}

.operation-flag-right img {
  transform: rotate(-158deg) scaleY(-1);
}

.operation-platform-web {
  left: 222px;
  top: 322px;
  width: 995px;
  height: 617px;
  border: 10px solid #ffffff;
  border-radius: 40px;
}

.operation-platform-mobile-panel {
  position: absolute;
  left: 217px;
  top: 1299px;
  width: 1001px;
  height: 425px;
  overflow: hidden;
  border-radius: 50px;
  background: #ffd145;
}

.operation-platform-mobile-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.operation-platform-mobile-title {
  left: 271px;
  top: 1369px;
}

.operation-platform-mobile-title h3 {
  font-size: 118px;
  line-height: 142px;
}

.operation-platform-phone {
  position: absolute;
  left: 756px;
  top: 1039px;
  width: 378px;
  height: 776px;
}

.operation-platform-screen {
  position: absolute;
  left: 17px;
  top: 13px;
  width: 344px;
  height: 749px;
  overflow: hidden;
}

.operation-platform-screen img {
  position: absolute;
  left: 0;
  top: -23px;
  width: 344px;
  height: 1114px;
  max-width: none;
}

.operation-platform-frame {
  position: absolute;
  inset: 0;
  width: 378px;
  height: 776px;
  max-width: none;
  pointer-events: none;
}

.aigc-section {
  scroll-margin-top: 68px;
  background: #111111;
}

.aigc-artboard {
  overflow: hidden;
  background: #111111;
  color: #ffffff;
}

.aigc-artboard img {
  max-width: none;
}

.aigc-red-glow-img {
  position: absolute;
  width: 723px;
  height: 383px;
  pointer-events: none;
}

.aigc-heading {
  position: absolute;
}

.aigc-heading h3 {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  line-height: normal;
  font-weight: 900;
}

.aigc-heading span {
  display: inline-flex;
  width: 54px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 5px 6px 3px;
  border-radius: 14px 14px 14px 3px;
  background: #ffb338;
  color: #000000;
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  vertical-align: top;
}

.aigc-heading p {
  margin: 41px 0 0;
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
}

.aigc-cover-artboard {
  height: 1981px;
}

.aigc-cover-glow {
  left: 909px;
  top: 417px;
}

.aigc-creative-word-img {
  position: absolute;
  left: 10px;
  top: 257px;
  width: 1430.13px;
  height: 182px;
  pointer-events: none;
}

.aigc-cover-title {
  position: absolute;
  left: 50%;
  top: 118px;
  width: 760px;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
}

.aigc-cover-title h2 {
  margin: 0;
  font-size: 120px;
  line-height: 1.02;
  font-weight: 900;
}

.aigc-cover-title h2 span {
  color: #e43030;
  font-size: 200px;
  line-height: 0.9;
}

.aigc-cover-title p {
  margin: 42px 0 0;
  font-size: 32px;
  line-height: normal;
  font-weight: 400;
  letter-spacing: 6.4px;
}

.aigc-tool-icon {
  position: absolute;
  display: block;
  object-fit: cover;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}

.aigc-tool-gemini {
  left: 278px;
  top: 196px;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  transform: rotate(-26.1deg);
}

.aigc-tool-jimeng {
  left: 173px;
  top: 394px;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 2px solid #323232;
  border-radius: 18px;
  transform: rotate(-13deg);
}

.aigc-tool-gpt {
  left: 1092px;
  top: 216px;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  transform: rotate(-11deg);
}

.aigc-tool-codex {
  left: 1106px;
  top: 362px;
  width: 119px;
  height: 119px;
  border-radius: 32px;
  transform: rotate(21deg);
}

.aigc-cover-copy {
  position: absolute;
  left: 181px;
  top: 684px;
  width: 1070px;
  margin: 0;
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
}

.aigc-case-word-img {
  position: absolute;
  left: 219.64px;
  top: 1224px;
  width: 1001.36px;
  height: 276.42px;
  pointer-events: none;
}

.aigc-case-card {
  position: absolute;
  left: 170px;
  top: 1411px;
  width: 1100px;
  height: 393px;
  color: #000000;
}

.aigc-case-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.aigc-case-card p {
  position: absolute;
  left: 60px;
  top: 32px;
  z-index: 1;
  margin: 0;
  font-size: 32px;
  line-height: normal;
  font-weight: 700;
}

.aigc-case-card h3 {
  position: absolute;
  left: 60px;
  top: 132px;
  z-index: 1;
  margin: 0;
  font-size: 96px;
  line-height: normal;
  font-weight: 1000;
  text-shadow: 0.7px 0 0 #000000, -0.7px 0 0 #000000, 0 0.7px 0 #000000, 0 -0.7px 0 #000000;
}

.aigc-case-card span {
  position: absolute;
  left: 60px;
  top: 272px;
  z-index: 1;
  display: flex;
  height: 52px;
  align-items: center;
  padding: 9px 26px;
  border: 2px solid #000000;
  border-radius: 59px;
  font-size: 28px;
  line-height: normal;
}

.aigc-cover-phone {
  position: absolute;
  left: 775px;
  top: 1167px;
  width: 286px;
  height: 583px;
  box-shadow: none;
  transform: rotate(7.02deg);
}

.aigc-cover-phone-screen {
  position: absolute;
  left: 11px;
  top: 11px;
  z-index: 1;
  width: 264px;
  height: 566px;
  overflow: hidden;
  border-radius: 38px;
  object-fit: cover;
  object-position: top center;
}

.aigc-cover-phone-frame {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.aigc-concept-artboard {
  height: 2469px;
}

.aigc-mascot-card {
  position: absolute;
  left: 120px;
  top: 182px;
  width: 536px;
  height: 536px;
  object-fit: cover;
  border-radius: 50px;
}

.aigc-concept-heading {
  left: 716px;
  top: 189px;
  width: 602px;
}

.aigc-concept-heading p {
  margin-top: 29px;
}

.aigc-turnaround-card {
  position: absolute;
  left: 708.54px;
  top: 443px;
  width: 609.46px;
  height: 275px;
  overflow: hidden;
  border-radius: 50px;
  background: #ffffff;
}

.aigc-turnaround-inner {
  position: absolute;
  left: 63.71px;
  top: 0;
  width: 481.99px;
  height: 275px;
  overflow: hidden;
  border-radius: 50px;
}

.aigc-turnaround-inner img {
  position: absolute;
  left: 0;
  top: -13.17%;
  width: 100%;
  height: 131.45%;
  object-fit: fill;
}

.aigc-sticker-word {
  position: absolute;
  left: 22px;
  top: -90px;
  color: #ffffff;
  font-family: "Arial Black", Impact, Inter, "PingFang SC", sans-serif;
  font-size: 98px;
  line-height: normal;
  font-weight: 1000;
  -webkit-text-stroke: 0.8px #ffffff;
  text-transform: uppercase;
}

.aigc-sticker-copy {
  position: absolute;
  left: 120px;
  top: 1085px;
  width: 668px;
  height: 389px;
  border-radius: 50px;
  background: #ffc338;
  color: #000000;
}

.aigc-sticker-copy h3 {
  position: absolute;
  left: 54px;
  top: 85px;
  margin: 0;
  font-size: 40px;
  line-height: normal;
  font-weight: 900;
}

.aigc-sticker-copy p {
  position: absolute;
  left: 54px;
  top: 151px;
  width: 370px;
  margin: 0;
  font-size: 20px;
  line-height: 36px;
}

.aigc-sticker-card {
  position: absolute;
  left: 594px;
  top: 955px;
  width: 724px;
  height: 519px;
  overflow: hidden;
  border-radius: 50px;
  background: #ffffff;
}

.aigc-sticker-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.aigc-logo-heading {
  left: 153px;
  top: 1691px;
  width: 1127px;
}

.aigc-logo-frame {
  position: absolute;
  left: 296px;
  top: 1959px;
  width: 870px;
  height: 328px;
}

.aigc-logo-border {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 838px;
  height: 280px;
  border: 2px solid #dddddd;
}

.aigc-logo-icon-crop {
  position: absolute;
  left: 69px;
  top: 58px;
  width: 176px;
  height: 173px;
  overflow: hidden;
}

.aigc-logo-icon-crop img {
  position: absolute;
  left: 0;
  top: 0;
  width: 733px;
  height: 173px;
  object-fit: fill;
}

.aigc-logo-text {
  position: absolute;
  left: 267px;
  top: 58px;
  margin: 0;
  color: #ffffff;
  font-family: "Alimama ShuHeiTi", "Alimama_ShuHeiTi", "Arial Black", "PingFang SC", sans-serif;
  font-size: 128px;
  line-height: normal;
  font-weight: 900;
  white-space: nowrap;
}

.aigc-logo-frame i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #d9d9d9;
}

.aigc-logo-frame i:nth-of-type(1) {
  left: -2px;
  top: -2px;
}

.aigc-logo-frame i:nth-of-type(2) {
  left: 836px;
  top: -2px;
}

.aigc-logo-frame i:nth-of-type(3) {
  left: -2px;
  top: 278px;
}

.aigc-logo-frame i:nth-of-type(4) {
  left: 836px;
  top: 278px;
}

.aigc-logo-frame b {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.aigc-logo-frame b:nth-of-type(1) {
  left: 13px;
  top: 13px;
}

.aigc-logo-frame b:nth-of-type(2) {
  left: 827px;
  top: 13px;
}

.aigc-logo-frame b:nth-of-type(3) {
  left: 13px;
  top: 269px;
}

.aigc-logo-frame b:nth-of-type(4) {
  left: 827px;
  top: 269px;
}

.aigc-logo-cursor {
  position: absolute;
  left: 843px;
  top: 284px;
  width: 27px;
  height: 44px;
  object-fit: cover;
}

.aigc-system-artboard {
  height: 1970px;
}

.aigc-vi-heading {
  left: 153px;
  top: 100px;
  width: 1127px;
}

.aigc-vi-layout img,
.aigc-prototype-main,
.aigc-prototype-small {
  position: absolute;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
}

.aigc-vi-1 {
  left: 120px;
  top: 345px;
  width: 388px;
  height: 549px;
}

.aigc-vi-2 {
  left: 518px;
  top: 345px;
  width: 390px;
  height: 550px;
}

.aigc-vi-3 {
  left: 918px;
  top: 345px;
  width: 192px;
  height: 271px;
  border-radius: 20px 0 0 0;
}

.aigc-vi-4 {
  left: 1119px;
  top: 345px;
  width: 191px;
  height: 270px;
  border-radius: 0 20px 0 0;
}

.aigc-vi-5 {
  left: 918px;
  top: 624px;
  width: 192px;
  height: 271px;
  border-radius: 0 0 0 20px;
}

.aigc-vi-6 {
  left: 1119px;
  top: 625px;
  width: 191px;
  height: 270px;
  border-radius: 0 0 20px 0;
}

.aigc-prototype-main {
  left: 121px;
  top: 1123px;
  width: 506px;
  height: 675px;
}

.aigc-prototype-heading {
  left: 688px;
  top: 1127px;
  width: 598px;
}

.aigc-prototype-heading p {
  margin-top: 31px;
}

.aigc-prototype-small {
  top: 1379px;
  width: 315px;
  height: 420px;
}

.aigc-prototype-small-1 {
  left: 654px;
}

.aigc-prototype-small-2 {
  left: 999px;
}

.aigc-ui-artboard {
  height: 4626px;
}

.aigc-ui-heading {
  left: 153px;
  top: 100px;
  width: 1127px;
}

.aigc-phone-label {
  position: absolute;
  left: 153px;
}

.aigc-phone-label strong,
.aigc-phone-label span {
  display: block;
  margin: 0;
  font-size: 24px;
  line-height: normal;
  font-weight: 700;
}

.aigc-phone-label span {
  color: #535353;
}

.aigc-splash-label {
  top: 394px;
}

.aigc-goal-label {
  top: 1182px;
}

.aigc-night-label {
  top: 1970px;
}

.aigc-screen-row {
  position: absolute;
  display: flex;
  align-items: flex-start;
}

.aigc-screen-row img {
  object-fit: cover;
  object-position: top center;
  max-width: none;
}

.aigc-splash-row {
  left: 153px;
  top: 492px;
  gap: 30px;
}

.aigc-splash-row img {
  width: 257px;
  height: 552px;
}

.aigc-goal-row {
  left: 305px;
  top: 1280px;
  gap: 24px;
}

.aigc-goal-row img {
  width: 266px;
  height: 552px;
  border-radius: 35px;
}

.aigc-night-row {
  left: 155px;
  top: 2062px;
  gap: 30px;
}

.aigc-night-row img {
  width: 259px;
  height: 594px;
  border: 2px solid #6e6e6e;
  border-radius: 28px;
}

.aigc-h5-heading {
  left: 153px;
  top: 2920px;
  width: 1127px;
}

.aigc-h5-grid {
  position: absolute;
  left: 254px;
  top: 3121px;
  display: grid;
  grid-template-columns: 290px 288px 288px;
  gap: 41px 26px;
}

.aigc-h5-grid img {
  width: 288px;
  height: 659px;
  object-fit: cover;
  object-position: top center;
}

.aigc-h5-grid img:nth-child(1),
.aigc-h5-grid img:nth-child(4) {
  width: 290px;
}

.aigc-h5-grid img:nth-child(n + 4) {
  height: 653px;
}

.aigc-summary-artboard {
  height: 688px;
}

.aigc-summary-glow {
  left: 790px;
  top: 319px;
}

.aigc-summary-artboard h2 {
  position: absolute;
  left: 50%;
  top: 186px;
  z-index: 1;
  margin: 0;
  transform: translateX(-50%);
  font-size: 64px;
  line-height: normal;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.aigc-summary-artboard h2 span {
  color: #ef4545;
}

.aigc-summary-word {
  position: absolute;
  left: 718px;
  top: 231px;
  z-index: 0;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.06);
  font-size: 64px;
  line-height: normal;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.aigc-summary-copy {
  position: absolute;
  left: 186px;
  top: 355px;
  width: 1067px;
  margin: 0;
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
}