:root {
  --color-ink:#102A43;
  --color-blue:#155EEF;
  --color-deep-blue:#0B2F4F;
  --color-image-blue:#176B9A;
  --color-muted-blue:#344F67;
  --color-light-blue:#E3EFF8;
  --color-pale-blue:#EFF6FC;
}

body {
  margin:0;
}
* {
  box-sizing:border-box;
}
html,
body {
  width:100%;
}
.pg {
  width:100%;
  font-family:'Barlow',Helvetica,Arial,sans-serif;
  color:var(--color-ink);
  background:#fff;
  line-height:1.55;
}
h1,h2,h3 {
  font-family:'Barlow Condensed','Barlow',Helvetica,Arial,sans-serif;
  text-transform:uppercase;
  margin:0;
  line-height:.98;
  font-weight:800;
}
p {
  margin:0;
}
a {
  color:inherit;
  text-decoration:none;
}
.w {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}
.sec {
  padding:96px 0;
}
.grn {
  background:var(--color-blue);
  color:#fff;
}
.deep {
  background:var(--color-deep-blue);
  color:#fff;
}
.site-header {
  background:#000;
}
.lite {
  background:var(--color-pale-blue);
}
.hd {
  position:relative;
  overflow:hidden;
}
.court {
  position:absolute;
  inset:24px;
  width:calc(100% - 48px);
  height:calc(100% - 48px);
  z-index:0;
}
.court--portrait {
  display:none;
}
.hd > div.court--portrait {
  border:3px solid #fff;
  background:
    repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 24px) 0 50% / 100% 6px no-repeat,
    linear-gradient(to bottom,transparent 7%,#fff 7% 36%,transparent 36% 64%,#fff 64% 93%,transparent 93%) 50% 0 / 3px 100% no-repeat,
    linear-gradient(to right,transparent 8%,#fff 8% 92%,transparent 92%) 0 36% / 100% 3px no-repeat,
    linear-gradient(to right,transparent 8%,#fff 8% 92%,transparent 92%) 0 64% / 100% 3px no-repeat,
    linear-gradient(to bottom,transparent 7%,#fff 7% 93%,transparent 93%) 8% 0 / 3px 100% no-repeat,
    linear-gradient(to bottom,transparent 7%,#fff 7% 93%,transparent 93%) 92% 0 / 3px 100% no-repeat,
    linear-gradient(to right,#fff,#fff) 0 7% / 100% 3px no-repeat,
    linear-gradient(to right,#fff,#fff) 0 93% / 100% 3px no-repeat;
}
@media (max-width: 900px) {
  .hd > .court:not(.court--portrait) {
    display:none;
  }
  .hd > .court--portrait {
    display:block;
  }
}
.pg:not(.pg--home) .hd > .court {
  display:none;
}
.pg:not(.pg--home) .hd {
  background:
    radial-gradient(ellipse at 82% 50%,rgba(255,210,63,.16),transparent 30%),
    linear-gradient(120deg,#155EEF 0%,#1248B8 52%,#0B2F4F 100%);
}
.pg:not(.pg--home) .hd::after {
  content:"";
  position:absolute;
  top:50%;
  right:clamp(-100px,0vw,32px);
  height:clamp(400px,105vw,460px);
  aspect-ratio:2 / 3;
  background:url("static/assets/racket.svg") center / contain no-repeat;
  opacity:.55;
  pointer-events:none;
  transform:translateY(-50%) rotate(30deg);
}
.pg:not(.pg--home) .hd .panel {
  position:relative;
  border-left:6px solid #FFD23F;
  background:linear-gradient(110deg,rgba(11,47,79,.96),rgba(11,47,79,.82));
  box-shadow:0 20px 55px rgba(5,28,63,.2);
}
.pg:not(.pg--home) .hd .eb {
  display:flex;
  align-items:center;
  gap:12px;
}
.pg:not(.pg--home) .hd .eb::after {
  content:"";
  width:36px;
  height:2px;
  background:#FFD23F;
}
.hd>.in2 {
  position:relative;
  z-index:1;
}
.nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  padding-bottom:20px;
}
.nav-menu {
  display:contents;
}
.nav-toggle {
  display:none;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border:2px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.nav-toggle span {
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  transition:transform 180ms ease, opacity 180ms ease;
}
.nav-toggle:focus-visible {
  outline:3px solid #FFD23F;
  outline-offset:3px;
}
.nav.is-compact.is-open .nav-toggle span:first-child {
  transform:translateY(7px) rotate(45deg);
}
.nav.is-compact.is-open .nav-toggle span:nth-child(2) {
  opacity:0;
}
.nav.is-compact.is-open .nav-toggle span:last-child {
  transform:translateY(-7px) rotate(-45deg);
}
.logo {
  display:flex;
  align-items:center;
  flex:none;
  width:128px;
  height:64px;
}
.logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.links {
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nl {
  padding:4px 0;
  border-bottom:3px solid transparent;
}
.nl:hover {
  color:#FFD23F;
}
.on {
  border-bottom-color:#FFD23F;
  color:#FFD23F;
}
.panel {
  background:var(--color-blue);
  border:3px solid #fff;
  padding:40px;
}
.eb {
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-blue);
  margin-bottom:12px;
}
.grn .eb,.deep .eb,.panel .eb {
  color:#FFD23F;
}
.h1 {
  font-size:clamp(52px,8vw,96px);
}
.h1s {
  font-size:clamp(44px,6vw,72px);
}
.h2 {
  font-size:clamp(38px,5vw,60px);
}
.lead {
  font-size:19px;
  margin-top:20px;
  max-width:560px;
  color:var(--color-muted-blue);
}
.grn .lead,.deep .lead,.panel .lead {
  color:var(--color-light-blue);
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 28px;
  background:#FFD23F;
  color:var(--color-ink);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:0;
  cursor:pointer;
}
.btn:hover {
  background:#fff;
}
.btn2 {
  background:transparent;
  color:inherit;
  border:3px solid currentColor;
}
.btn2:hover {
  background:transparent;
  color:#FFD23F;
}
.btnk {
  background:var(--color-ink);
  color:#fff;
}
.btnk:hover {
  background:#fff;
  color:var(--color-ink);
}
.row {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin-top:32px;
}
.g {
  display:grid;
  gap:24px;
}
.split {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:64px;
  align-items:center;
}
.g>*,
.split>* {
  min-width:0;
}
.box {
  border:3px solid var(--color-blue);
  background:#fff;
  padding:24px;
}
.grn .box,.deep .box {
  border-color:#fff;
  background:transparent;
}
.cell {
  border:1.5px solid #fff;
  padding:28px;
  min-height:140px;
}
.ph {
  position:relative;
  background:var(--color-image-blue);
  border:3px solid #fff;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:20px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  min-height:200px;
  overflow:hidden;
}
.ph svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ph span {
  position:relative;
}
.lite .ph,.sec:not(.grn):not(.deep) .ph {
  border-color:var(--color-blue);
}
.num {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:44px;
  color:#FFD23F;
  line-height:1;
}
.value-title {
  margin-top:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;
  font-weight:700;
  text-transform:uppercase;
}
.value-description {
  margin-top:8px;
  font-size:15px;
  line-height:1.5;
}
.meta {
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-blue);
}
.grn .meta,.deep .meta {
  color:#FFD23F;
}
.net {
  height:30px;
  border-top:6px solid #fff;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 16px);
}
.chip {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 22px;
  border:3px solid var(--color-blue);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.chip.act {
  background:var(--color-blue);
  color:#fff;
}
.in {
  width:100%;
  min-height:52px;
  border:2px solid var(--color-blue);
  padding:0 14px;
  font:inherit;
  background:#fff;
  color:var(--color-ink);
}
.lb {
  display:block;
  font-weight:700;
  font-size:14px;
}
.lb .in {
  margin-top:6px;
}
.ck {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:16px;
}
.ck input {
  width:24px;
  height:24px;
  margin:0;
}
.foot {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  padding:48px 40px;
  font-size:15px;
}
.site-footer {
  border-top:3px solid #fff;
}
.footer-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.footer-logo {
  display:block;
  width:190px;
  height:86px;
  object-fit:cover;
  mix-blend-mode:screen;
}
.footer-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;
  font-weight:800;
  line-height:1.1;
  color:#FFD23F;
  text-decoration:underline;
  text-underline-offset:5px;
  text-transform:uppercase;
}
.footer-copyright {
  margin-top:auto;
  color:var(--color-light-blue);
  font-size:13px;
}
.footer-heading {
  margin-bottom:16px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.06em;
  color:#FFD23F;
  text-decoration:underline;
  text-underline-offset:5px;
  text-transform:uppercase;
}
.footer-section ul {
  display:grid;
  gap:10px;
  margin:0;
  padding:0 0 0 14px;
  list-style:none;
}
.footer-social a {
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
}
.footer-wechat-id {
  display:inline-flex;
  min-height:40px;
  align-items:center;
  gap:4px;
  color:inherit;
  font-size:13px;
  font-weight:700;
}
.footer-wechat-id .social-icon {
  flex:none;
}
.footer-section ul.footer-social {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding-left:14px;
}
.social-icon {
  display:block;
  width:36px;
  height:36px;
}
.site-footer a:hover {
  color:#FFD23F;
}
.site-footer a:focus-visible {
  outline:2px solid #FFD23F;
  outline-offset:4px;
}
@media (max-width: 700px) {
  .w {
    padding-right:24px;
    padding-left:24px;
  }
  .sec {
    padding:64px 0;
  }
  .panel {
    padding:24px;
  }
}
.nav.is-compact {
  justify-content:space-between;
}
.nav.is-compact .nav-toggle {
  display:flex;
}
.nav.is-compact .nav-menu {
  display:none;
  flex-basis:100%;
  width:100%;
}
.nav.is-compact.is-open .nav-menu {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.nav.is-compact .nav-menu .links {
  flex-direction:column;
  gap:0;
}
.nav.is-compact .nav-menu .nl {
  display:block;
  min-height:44px;
  padding:10px 0;
}
.nav.is-compact .nav-menu > .btn {
  width:100%;
}
@media (max-width: 900px) {
  .nav:not(.is-compact) {
    justify-content:space-between;
  }
  .nav:not(.is-compact) .nav-toggle {
    display:flex;
  }
  .nav:not(.is-compact) .nav-menu {
    display:none;
    flex-basis:100%;
    width:100%;
  }
  .nav:not(.is-compact).is-open .nav-menu {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .nav:not(.is-compact) .nav-menu .links {
    flex-direction:column;
    gap:0;
  }
  .nav:not(.is-compact) .nav-menu .nl {
    display:block;
    min-height:44px;
    padding:10px 0;
  }
  .nav:not(.is-compact) .nav-menu > .btn {
    width:100%;
  }
}
@media (max-width: 700px) {
  .links {
    gap:16px;
  }
  .foot {
    padding:36px 24px;
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
  }
  .footer-brand {
    align-items:center;
  }
  .footer-section ul {
    justify-items:center;
    padding-left:0;
  }
  .footer-section ul.footer-social {
    justify-content:center;
    padding-left:0;
  }
}
@media (max-width: 380px) {
  .logo {
    width:112px;
    height:56px;
  }
  .footer-section ul.footer-social {
    flex-direction:column;
  }
}