.about-page {
  --about-fluid-width: min(100vw, var(--page-max-width));

  width: 100%;
  overflow: hidden;
  background: #050607;
}

.about-hero {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  overflow: hidden;
}

.about-hero__image {
  width: 100%;
  height: auto;
}

.about-hero__brands {
  position: absolute;
  left: 50%;
  bottom: calc(76 / var(--design-width) * var(--about-fluid-width));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: calc(1120 / var(--design-width) * var(--about-fluid-width));
  font-size: calc(27 / var(--design-width) * var(--about-fluid-width));
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
}

.about-brand-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(48 / var(--design-width) * var(--about-fluid-width));
  padding: 0 calc(10 / var(--design-width) * var(--about-fluid-width));
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: rgb(255 255 255 / 48%);
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.24s ease,
    opacity 0.24s ease,
    text-shadow 0.24s ease,
    transform 0.24s ease;
}

.about-brand-tab::after {
  position: absolute;
  right: 50%;
  bottom: calc(-8 / var(--design-width) * var(--about-fluid-width));
  left: 50%;
  height: calc(4 / var(--design-width) * var(--about-fluid-width));
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow:
    0 0 calc(14 / var(--design-width) * var(--about-fluid-width))
      rgb(58 164 255 / 78%),
    0 0 calc(32 / var(--design-width) * var(--about-fluid-width))
      rgb(58 164 255 / 38%);
  content: "";
  opacity: 0;
  transition:
    left 0.28s ease,
    right 0.28s ease,
    opacity 0.24s ease;
}

.about-brand-tab:hover,
.about-brand-tab:focus-visible {
  color: var(--color-primary);
  text-shadow: 0 0 calc(18 / var(--design-width) * var(--about-fluid-width))
    rgb(58 164 255 / 44%);
  transform: translateY(
    calc(-4 / var(--design-width) * var(--about-fluid-width))
  );
}

.about-brand-tab:hover::after,
.about-brand-tab:focus-visible::after {
  right: 24%;
  left: 24%;
  opacity: 1;
}

.about-brand-tab:focus-visible {
  outline: 2px solid rgb(58 164 255 / 82%);
  outline-offset: calc(8 / var(--design-width) * var(--about-fluid-width));
}

.about-brand-tab:active {
  transform: translateY(
      calc(-1 / var(--design-width) * var(--about-fluid-width))
    )
    scale(0.98);
}

.about-ip {
  position: relative;
  max-width: var(--page-max-width);
  padding-top: calc(70 / var(--design-width) * var(--about-fluid-width));
  padding-bottom: calc(124 / var(--design-width) * var(--about-fluid-width));
  margin-inline: auto;
  overflow: hidden;
}

.about-ip__glow {
  position: absolute;
  z-index: 0;
  width: calc(864 / var(--design-width) * var(--about-fluid-width));
  height: calc(864 / var(--design-width) * var(--about-fluid-width));
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
}

.about-ip__glow--left {
  top: calc(420 / var(--design-width) * var(--about-fluid-width));
  left: calc(-410 / var(--design-width) * var(--about-fluid-width));
  transform: rotate(180deg);
}

.about-ip__glow--gradient-top {
  top: calc(80 / var(--design-width) * var(--about-fluid-width));
  right: calc(0 / var(--design-width) * var(--about-fluid-width));
  width: calc(560 / var(--design-width) * var(--about-fluid-width));
  height: calc(594 / var(--design-width) * var(--about-fluid-width));
  transform: rotate(-18deg);
}

.about-ip__glow--right {
  right: calc(-310 / var(--design-width) * var(--about-fluid-width));
  bottom: calc(-230 / var(--design-width) * var(--about-fluid-width));
  transform: rotate(180deg);
}

.about-series {
  position: relative;
  z-index: 1;
  width: calc(1040 / var(--design-width) * var(--about-fluid-width));
  margin-inline: auto;
}

.about-series + .about-series {
  margin-top: calc(84 / var(--design-width) * var(--about-fluid-width));
}

.about-series--final {
  margin-top: calc(90 / var(--design-width) * var(--about-fluid-width));
}

.about-series__header {
  color: #ffffff;
  text-align: center;
}

.about-series__header h1,
.about-series__header h2 {
  margin: 0;
  font-size: calc(34 / var(--design-width) * var(--about-fluid-width));
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

.about-series__header p {
  margin: calc(18 / var(--design-width) * var(--about-fluid-width)) 0 0;
  font-size: calc(24 / var(--design-width) * var(--about-fluid-width));
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: 0;
}

.about-series__header p + p {
  margin-top: calc(8 / var(--design-width) * var(--about-fluid-width));
}

.about-posters {
  display: grid;
  grid-template-columns: repeat(
    3,
    calc(305 / var(--design-width) * var(--about-fluid-width))
  );
  justify-content: center;
  gap: calc(66 / var(--design-width) * var(--about-fluid-width));
  margin-top: calc(58 / var(--design-width) * var(--about-fluid-width));
}

.about-posters img {
  width: calc(305 / var(--design-width) * var(--about-fluid-width));
  height: calc(404 / var(--design-width) * var(--about-fluid-width));
  object-fit: cover;
  border-radius: calc(8 / var(--design-width) * var(--about-fluid-width));
  transition:
    filter 0.28s ease,
    transform 0.28s ease;
}

.about-posters img:hover {
  filter: brightness(1.1);
  transform: translateY(
    calc(-8 / var(--design-width) * var(--about-fluid-width))
  );
}

.about-footer {
  --about-fluid-width: min(100vw, var(--page-max-width));

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.about-footer::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.about-footer::before {
  background:
    radial-gradient(
      ellipse 95% 190% at 50% 100%,
      #000023 0%,
      #000010 30%,
      #000008 44%,
      #000005 52%,
      rgb(0 0 0 / 0%) 62%
    ),
    radial-gradient(
      ellipse 72% 135% at 50% 0%,
      #000003 0%,
      #000003 36%,
      #000002 62%,
      rgb(0 0 0 / 0%) 88%
    ),
    linear-gradient(
      180deg,
      #010101 0%,
      #010102 12.5%,
      #010107 25%,
      #01010b 37.5%,
      #00000e 50%,
      #000011 62.5%,
      #000014 75%,
      #000016 87.5%,
      #010116 100%
    );
  background-blend-mode: screen, screen, normal;
}

.about-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max-width);
  padding: calc(58 / var(--design-width) * var(--about-fluid-width))
    calc(204 / var(--design-width) * var(--about-fluid-width))
    calc(30 / var(--design-width) * var(--about-fluid-width));
  margin-inline: auto;
}

.about-footer__links {
  display: grid;
  grid-template-columns: repeat(
    4,
    calc(64 / var(--design-width) * var(--about-fluid-width))
  );
  gap: calc(74 / var(--design-width) * var(--about-fluid-width));
}

.about-footer__links section {
  min-width: 0;
}

.about-footer__links h2 {
  margin: 0 0 calc(18 / var(--design-width) * var(--about-fluid-width));
  color: rgb(255 255 255 / 82%);
  font-size: calc(14 / var(--design-width) * var(--about-fluid-width));
  font-weight: 600;
  line-height: 1.4;
}

.about-footer__links a {
  display: block;
  color: rgb(255 255 255 / 48%);
  font-size: calc(11 / var(--design-width) * var(--about-fluid-width));
  font-weight: 400;
  line-height: 1.95;
  transition: color 0.2s ease;
}

.about-footer__links a:hover,
.about-footer__links a:focus-visible {
  color: var(--color-primary);
}

.about-footer__brand {
  position: absolute;
  top: calc(60 / var(--design-width) * var(--about-fluid-width));
  right: calc(233 / var(--design-width) * var(--about-fluid-width));
  width: calc(209 / var(--design-width) * var(--about-fluid-width));
}

.about-footer__brand img {
  width: 100%;
  height: auto;
}

.about-footer__copyright {
  max-width: calc(760 / var(--design-width) * var(--about-fluid-width));
  margin: calc(22 / var(--design-width) * var(--about-fluid-width)) 0 0;
  color: #6b747a;
  font-size: calc(11 / var(--design-width) * var(--about-fluid-width));
  font-weight: 400;
  line-height: 1.7;
}

.about-footer__copyright p {
  margin: 0;
}

.about-footer__copyright p + p {
  margin-top: calc(4 / var(--design-width) * var(--about-fluid-width));
}

.about-footer__record {
  white-space: nowrap;
}

.about-footer__beian {
  display: inline-flex;
  align-items: center;
  gap: calc(4 / var(--design-width) * var(--about-fluid-width));
  vertical-align: middle;
}

.about-footer__beian img {
  width: calc(14 / var(--design-width) * var(--about-fluid-width));
  height: auto;
  flex: 0 0 auto;
}

.about-footer__copyright a {
  transition: color 0.2s ease;
}

.about-footer__copyright a:hover,
.about-footer__copyright a:focus-visible {
  color: #c3d7e5;
}

@media (max-width: 1199px) {
  .about-hero__brands {
    bottom: 38px;
    width: min(92%, 720px);
    font-size: 18px;
  }

  .about-brand-tab {
    min-height: 40px;
    padding-inline: 8px;
  }

  .about-brand-tab::after {
    bottom: -8px;
    height: 2px;
    box-shadow: 0 0 12px rgb(58 164 255 / 68%);
  }

  .about-brand-tab:hover,
  .about-brand-tab:focus-visible {
    text-shadow: 0 0 12px rgb(58 164 255 / 44%);
    transform: translateY(-3px);
  }

  .about-brand-tab:focus-visible {
    outline-offset: 6px;
  }

  .about-brand-tab:active {
    transform: translateY(-1px) scale(0.98);
  }

  .about-ip {
    padding: 52px 20px 80px;
  }

  .about-ip__glow {
    width: 624px;
    height: 624px;
  }

  .about-ip__glow--left {
    top: 440px;
    left: -340px;
  }

  .about-ip__glow--gradient-top {
    top: 34px;
    right: -260px;
    width: 460px;
    height: 488px;
  }

  .about-ip__glow--right {
    right: -330px;
    bottom: 40px;
  }

  .about-series {
    width: 100%;
  }

  .about-series + .about-series,
  .about-series--final {
    margin-top: 70px;
  }

  .about-series__header h1,
  .about-series__header h2 {
    font-size: 26px;
  }

  .about-series__header p {
    margin-top: 14px;
    font-size: 18px;
  }

  .about-posters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
  }

  .about-posters img {
    width: 100%;
    height: auto;
    aspect-ratio: 305 / 404;
    border-radius: 8px;
  }

  .about-footer__inner {
    min-height: auto;
    padding: 48px 24px 40px;
  }

  .about-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
  }

  .about-footer__links h2 {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .about-footer__links a,
  .about-footer__copyright {
    font-size: 12px;
  }

  .about-footer__record {
    white-space: normal;
  }

  .about-footer__beian {
    gap: 4px;
  }

  .about-footer__beian img {
    width: 14px;
  }

  .about-footer__brand {
    position: static;
    width: 180px;
    margin-top: 34px;
  }

  .about-footer__copyright {
    margin-top: 28px;
  }
}

@media (max-width: 640px) {
  .about-hero__brands {
    bottom: 24px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    font-size: 16px;
  }

  .about-brand-tab {
    min-height: 34px;
  }

  .about-posters {
    grid-template-columns: 1fr;
    max-width: 305px;
    margin-inline: auto;
  }
}