/* Figma iFZSrfkmMqHaTBH5jTZmKG · 172:220 / 172:19, verified 2026-09-07. */
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('/website/tansun/figma/fonts/SourceHanSansSC-VF.otf.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}
:root {
  --ts-brand: #1f3efe;
  --ts-brand-hover: #1934d8;
  --ts-ink: #222;
  --ts-heading: #111;
  --ts-muted: #666;
  --ts-surface: #fff;
  --ts-surface-soft: #f5f8fb;
  --ts-border: #d9d9d9;
  --ts-font: 'Source Han Sans CN', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  --ts-content-width: 1600px;
  --ts-gutter: clamp(20px, 8.333vw, 160px);
  --ts-header-height: 100px;
  --ts-body-size: 16px;
  --ts-body-leading: 1.875;
  --ts-section-space: clamp(56px, 6.25vw, 120px);
  --ts-title-size: clamp(32px, 3.125vw, 60px);
  --ts-hero-size: clamp(40px, 5vw, 96px);
  --ts-button-height: 50px;
  --ts-radius-pill: 30px;
  --ts-focus: 0 0 0 3px #fff, 0 0 0 6px #1f3efe;
}
tansun-site-header { display: block; position: relative; z-index: 1000; flex-shrink: 0; }
.tn-header--managed { height: var(--ts-header-height); overflow: visible; background: var(--ts-surface); font-family: var(--ts-font); }
.tn-header--transparent { background: transparent; }
.tn-header--managed .tn-header__stage { width: 100%; height: var(--ts-header-height); }
.tn-header--managed .tn-header__bar { height: var(--ts-header-height); display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); padding: 0 clamp(24px, 3.125vw, 60px); }
.tn-header--managed .tn-header__logo { position: static; flex: 0 0 160px; height: 54px; }
.tn-header--managed .tn-header__logo img { width: 160px; height: 54px; object-fit: contain; }
.tn-header--managed .tn-header__nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 48px); }
.tn-header--managed .tn-header__nav-item { position: static; min-height: 44px; }
.tn-header--managed .tn-header__nav-item[data-menu-trigger]::after { content: ''; width: 5px; height: 5px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.tn-header--managed .tn-header__nav-item[aria-expanded="true"] { color: var(--ts-brand); }
.tn-header--managed .tn-header__nav-item[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.tn-header--managed .tn-header__search { position: static; flex: 0 0 50px; }
.tn-header--managed .tn-header__contact { position: static; flex: 0 0 140px; background: var(--ts-brand); }
.tn-header--managed .tn-dropdown--managed { top: var(--ts-header-height); height: auto; min-height: 360px; max-height: calc(100dvh - var(--ts-header-height)); overflow-y: auto; padding: 48px var(--ts-gutter); box-shadow: 0 24px 36px rgb(0 0 0 / 8%); border-top: 1px solid var(--ts-border); }
.tn-header--managed .tn-dropdown--managed > .tn-dropdown__title { position: static; margin-bottom: 30px; font-size: 30px; }
.tn-header--managed .tn-managed-columns > .tn-dropdown__column { position: static; }
.tn-header--managed .tn-link-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 60px; margin-top: 20px; }
.tn-header--managed .tn-branch__panel .tn-arrow-link { margin: 12px 0; }
.tn-header--delivered .tn-dropdown { top: var(--ts-header-height); max-height: calc(100dvh - var(--ts-header-height)); overflow-y: auto; box-shadow: 0 24px 36px rgb(0 0 0 / 8%); }
.tn-header--delivered .tn-link-list { display: flex; flex-direction: column; gap: 0; }
.tn-header--delivered .tn-branch__panel .tn-arrow-link { margin: 0; }
.tn-header--delivered .tn-mobile-panel { top: 0; box-shadow: none; }
@media (min-width: 1024px) {
  .tn-header--delivered .tn-branch-list > .tn-arrow-link { min-height: 36px; font-size: 16px; line-height: 36px; }
  .tn-header--delivered .tn-dropdown.is-open { display: flex; gap: clamp(24px, 3vw, 56px); height: auto; min-height: 420px; padding: 48px clamp(24px, 5vw, 96px); }
  .tn-header--delivered .tn-dropdown__title { position: static; flex: 0 0 240px; font-size: 28px; white-space: normal; }
  .tn-header--delivered .tn-dropdown__divider { display: none; }
  .tn-header--delivered .tn-dropdown__column { position: static; flex: 0 1 auto; }
}
.tn-header :is(a, button):focus-visible, .ts-footer :is(a, input, button):focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 4px; }
.ts-footer { position: relative; z-index: 4; width: 100%; flex-shrink: 0; padding: 64px var(--ts-gutter) 32px; background: var(--ts-surface); color: var(--ts-ink); font-family: var(--ts-font); font-size: 14px; line-height: 30px; }
.ts-footer * { box-sizing: border-box; }
.ts-footer a { color: inherit; text-decoration: none; }
.ts-footer a:hover { color: var(--ts-brand); }
.ts-footer h2 { margin: 0 0 30px; font-size: 20px; font-weight: 700; line-height: 30px; }
.ts-footer__friends { max-width: var(--ts-content-width); margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid var(--ts-border); font-size: 16px; }
.ts-footer__friends span + span::before { content: ' | '; margin: 0 16px; color: var(--ts-muted); }
.ts-footer__grid { max-width: var(--ts-content-width); display: grid; grid-template-columns: minmax(320px, 1fr) minmax(160px, .4fr) minmax(270px, .55fr); gap: clamp(32px, 5vw, 100px); margin: 0 auto; padding: 74px 0 80px; }
.ts-footer__subscribe { max-width: 500px; padding-top: 40px; }
.ts-footer .subscribe { position: static; width: 100%; }
.ts-footer__subscribe h2 { margin-bottom: 0; }
.ts-footer__subscribe p { margin: 0; line-height: 24px; white-space: pre-line; }
.ts-footer form { position: relative; top: auto; left: auto; display: flex; width: 100%; height: 67px; align-items: center; gap: 10px; margin-top: 80px; padding: 10px; border-radius: 50px; background: #fff; box-shadow: 0 4px 10px rgb(0 0 0 / 5%); }
.ts-footer form input { width: 100%; min-width: 0; height: 47px; padding: 0 18px; border: 0; background: transparent; color: var(--ts-ink); font: inherit; font-size: 16px; }
.ts-footer form input::placeholder { color: #c4c4c4; }
.ts-footer form button { position: static; flex: 0 0 100px; height: 47px; border: 0; border-radius: 50px; background: var(--ts-brand); color: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.ts-footer form > span { position: absolute; top: calc(100% + 8px); left: 0; font-size: 12px; color: var(--ts-muted); }
.ts-footer__links > a { display: block; }
.ts-footer__contact p { margin: 0; overflow-wrap: anywhere; }
.ts-footer__social { display: flex; gap: 9px; margin-top: 24px; }
.ts-footer__social img { width: 45px; height: 45px; object-fit: contain; }
.ts-footer__bottom { max-width: var(--ts-content-width); display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 0 auto; padding-top: 36px; border-top: 1px solid var(--ts-border); font-size: 16px; line-height: 30px; }
/* Only the original homepage artwork scales; site chrome uses the same viewport layout everywhere. */
.tansun-static-home > tansun-site-header { position: absolute; inset: 0 0 auto; width: 100%; }
.tansun-static-home .psd-page { height: 4915px; }
@media (max-width: 1279px) and (min-width: 1024px) {
  .tn-header--managed .tn-header__bar { gap: 16px; padding: 0 24px; }
  .tn-header--managed .tn-header__nav { gap: 14px; }
  .tn-header--managed .tn-header__nav-item { font-size: 14px; }
  .tn-header--managed .tn-header__contact { flex-basis: 110px; }
  .tn-header--managed .tn-header__search { display: none; }
}
@media (max-width: 1023px) {
  :root { --ts-header-height: 80px; --ts-gutter: 32px; }
  .tn-header--managed .tn-header__nav, .tn-header--managed .tn-header__search, .tn-header--managed .tn-header__contact { display: none; }
  .tn-header--managed .tn-header__bar { padding: 0 24px; }
  .tn-header--managed .tn-mobile-nav { top: var(--ts-header-height); }
  .tn-header--managed .tn-mobile-panel { min-height: 0; max-height: none; padding: 20px 0; border: 0; box-shadow: none; }
  .tn-header--managed .tn-mobile-panel .tn-link-list { grid-template-columns: 1fr; gap: 12px; }
  .ts-footer__grid { grid-template-columns: 1fr 1fr; }
  .ts-footer__subscribe { grid-column: 1 / -1; padding-top: 0; }
  .ts-footer form { margin-top: 32px; }
  .tansun-static-home .psd-page { height: auto; }
}
@media (max-width: 639px) {
  :root { --ts-gutter: 20px; }
  .ts-footer { padding-top: 40px; }
  .ts-footer__grid { grid-template-columns: 1fr; gap: 48px; padding: 40px 0; }
  .ts-footer__friends { padding-bottom: 24px; font-size: 14px; }
  .ts-footer__friends span + span::before { margin: 0 8px; }
  .ts-footer__bottom { justify-content: flex-start; font-size: 12px; }
}