/* 全站公共样式：导航、页脚、联系弹窗、节日横幅及基础规则。首页专属样式见 home.css。 */
/* 浮动按钮高于页脚（999），低于节日横幅（1050）和联系弹窗（10000）。 */
.back-to-top { display: block; width: 60px; height: 60px; position: fixed; bottom: 60px; cursor: pointer; z-index: 1001; right: 24px; }
.btn-img { width: 60px; height: 60px; }
.footer { margin: 48px 20px 0px; height: auto; border-radius: 40px; background-color: #FAFDFFCF; border: 1px solid #FFFFFFCC; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; }
#header { position: fixed; top: 10px; left: 50% !important; transform: translateX(-50%); z-index: 1000; transition: opacity 0.3s ease-in-out; width: min(1200px, calc(100% - 32px)) !important; height: 64px !important; }
#header .header-wraper { position: relative; width: 100%; height: 64px !important; background-color: #FFFFFF66; border: 1px solid #FFFFFFCC; border-radius: 80px; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); box-shadow: 0px 4px 24px 0px #51515114; display: grid; grid-template-columns: minmax(190px, 1fr) repeat(4, auto) minmax(132px, 1fr); column-gap: 8px; align-items: center; padding: 0 12px 0 24px; }
#header .header-logo { margin-left: 0; width: auto; height: 32px; }
#header .logo { display: flex; align-items: center; }
#header .logo-text { margin-left: 10px; font-family: Roboto, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; color: #0F1531; white-space: nowrap; }
#header .nav-font-style { display: flex; align-items: center; justify-content: center; font-family: Roboto, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: 0px; text-align: center; color: #0F1531; cursor: pointer; }
#header .banner-btn-a { justify-self: end; }
#header .banner-btn-wrap { position: relative; width: 120px; height: 43px; }
#header .banner-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease; }
#header .banner-btn-hover { opacity: 0; }
#header .banner-btn-wrap:hover .banner-btn-default { opacity: 0; }
#header .banner-btn-wrap:hover .banner-btn-hover { opacity: 1; }
* { box-sizing: border-box; margin:0; padding:0; font-family:'Microsoft YaHei', sans-serif; }
body { font:14px/1.5 \5FAE\8F6F\96C5\9ED1, Tahoma; color:#373737; position: relative; }
a { color:#555; text-decoration:none !important; }
li { list-style-type:none; }
img { border:none; }
.footer-wrap { width: 100%; height: 100%; }
.footer-main { font-size:12px; line-height:1.8em; text-align:center; padding-top:10px; max-width: 1120px; margin: 0 auto; border-top: 1px solid #eee; min-height: 56px; color:#6b7280; }
.footer-main a, .footer-main span { color:#6b7280; padding:0 12px; }
#contact-qrcode-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 16px; }
#contact-qrcode-modal.show { display: flex; }
.contact-qrcode-mask { position: absolute; inset: 0; background: rgba(20, 37, 65, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.contact-qrcode-box { position: relative; width: 440px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 32px 36px 24px; border: 1px solid rgba(255, 255, 255, .94); border-radius: 32px; background: radial-gradient(ellipse at 0 0, #dfedff 0, transparent 58%),
    radial-gradient(ellipse at 100% 12%, #eeebff 0, transparent 52%),
    linear-gradient(180deg, #f5f9ff, #fff 75%); box-shadow: 0 28px 90px rgba(18, 43, 81, .24), inset 0 1px 0 #fff; text-align: center; color: #172b4a; }
#contact-qrcode-modal.show .contact-qrcode-box { animation: contact-enter 220ms ease-out; }
.contact-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 26px 14px; font-size: 14px; font-weight: 600; }
.contact-brand img { display: block; border-radius: 8px; }
#contact-qrcode-description { margin-top: 8px; color: #66758c; font-size: 13px; line-height: 1.8; }
.contact-qrcode-card { width: 254px; max-width: 100%; margin: 24px auto 20px; padding: 18px; border: 1px solid #e5ebf7; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(76, 112, 175, .09), 0 0 0 6px rgba(255, 255, 255, .55); }
.contact-qrcode-img { display: block; width: 100%; height: auto; }
.contact-scan-label { color: #29476b; font-size: 16px; font-weight: 600; line-height: 24px; }
.contact-scan-hint, .contact-mobile-hint { margin-top: 6px; color: #6b7a90; font-size: 12px; line-height: 1.8; }
.contact-mobile-hint { display: none; }
#contact-qrcode-modal .contact-qrcode-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .95); border-radius: 50%; background: rgba(255, 255, 255, .65); color: #667995; transition: background 160ms, color 160ms; }
.contact-qrcode-close::before, .contact-qrcode-close::after { content: ""; position: absolute; top: 16px; left: 10px; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); pointer-events: none; }
.contact-qrcode-close::after { transform: rotate(-45deg); }
#contact-qrcode-modal .contact-qrcode-close:hover { background: #fff; color: #355fac; }
@keyframes contact-enter {
from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .contact-qrcode-box { padding: 28px 20px 22px; border-radius: 28px; }
  #contact-qrcode-description { font-size: 12px; }
  .contact-qrcode-card { margin-top: 22px; }
  .contact-scan-hint { display: none; }
  .contact-mobile-hint { display: block; }
}
/* 固定导航的安全间距；节日横幅出现时，锚点再额外避让横幅高度。 */
:root { --site-header-clearance: 98px; --site-banner-offset: 0px; }
@media (max-width: 1100px) { :root { --site-header-clearance: 136px; }
}
html, body { min-width: 0; }
body { overflow-wrap: break-word; }
button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #355fac; outline-offset: 4px; }
#header .nav-font-style a, #header .nav-font-style button { display: block; }
#header .nav-inner-1 { display: block; padding: 12px 20px; border-radius: 80px; }
#header .nav-font-style :is(a, button):is(:hover, :focus-visible, [aria-current="page"]) .nav-inner-1 { background: #ffffffcc; }
#header .nav-font-style :is(a, button):is(:hover, :focus-visible, [aria-current="page"]) .nav-inner-2 { color: #355fac; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header .header-wraper { background: #fff; }
}
@media (max-width: 1100px) {
  #header { top: 8px; height: 104px !important; }
  #header .header-wraper { height: 104px !important; border-radius: 24px; display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: 38px 44px; column-gap: 0; padding: 10px 8px 4px; background-color: #ffffffd9; }
  #header .logo { grid-column: 1 / -1; width: 100%; justify-content: center; height: 38px; }
  #header .header-logo { margin-left: 0; height: 28px; }
  #header .logo-text { font-size: 17px; }
  #header .nav-font-style { position: static; width: auto; height: 44px; font-size: 14px; }
  #header .nav-inner-1 { display: block; padding: 10px 4px; }
  #header .banner-btn-a { display: none; }
  .back-to-top { right: 12px; bottom: 110px; width: 44px; height: 44px; }
  .back-to-top .btn-img { width: 44px; height: 44px; }
  .footer { margin: 24px 16px 0; border-radius: 20px; padding: 12px 4px; }
  .footer .footer-main { width: 100%; height: auto; }
  .footer-main a { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
#footer-year { padding: 0; }

/* Navigation partnership badge. */
#header .nav-inner-2 { display: block; white-space: nowrap; }
.nav-hot { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    height: 21px; padding: 0 7px; margin-left: 7px; overflow: hidden; isolation: isolate;
    border-radius: 20px; font: 800 10px/1 Arial, 'PingFang SC', sans-serif; letter-spacing: .4px;
    white-space: nowrap; color: #fff; vertical-align: 1px;
    background: linear-gradient(115deg, #6355e9, #bd35d0); box-shadow: 0 2px 10px #8150e84a; }
.nav-hot > svg { display: block; flex-shrink: 0; width: 13px; height: 14px; fill: currentColor; }
.nav-hot > span { position: relative; display: block; line-height: 1; }
.nav-hot::after { content: ""; position: absolute; inset: -6px auto -6px -60%; width: 30%;
    transform: skew(-20deg); background: linear-gradient(90deg, transparent, #ffffff70, transparent);
    animation: nav-hot-shine 3s ease-in-out infinite; }
@keyframes nav-hot-shine {
    0% { left: -60%; }
    55%, 100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-hot::after { animation: none; opacity: 0; }
}
@media (max-width: 1100px) {
    .nav-hot { margin-left: 4px; padding: 0 5px; height: 18px; gap: 2px; font-size: 9px; }
    .nav-hot > svg { width: 10px; height: 12px; }
}

/* Native visibility and keyboard access shared by every page. */
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 11000; padding: 12px 20px; border-radius: 12px; background: #fff; color: #172b4a; }
.skip-link:focus { top: 12px; }
[tabindex="-1"], main [id] { scroll-margin-top: calc(var(--site-header-clearance) + var(--site-banner-offset)); }

/* ===== Mid-Autumn Festival top banner (temporary; remove after the holiday) ===== */
:root { --festival-h: 44px; }
body.has-festival-banner, body:has(.festival-banner:not([hidden])) { --site-banner-offset: var(--festival-h); padding-top: var(--festival-h); }
body.has-festival-banner #header, body:has(.festival-banner:not([hidden])) #header { top: calc(10px + var(--festival-h)); }
.festival-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; height: var(--festival-h); overflow: hidden;
  background:
    radial-gradient(120px 70px at 90% 140%, #ffce6b2e 0, transparent 70%),
    radial-gradient(160px 90px at 8% 170%, #ffce6b24 0, transparent 70%),
    linear-gradient(92deg, #8e0e12 0%, #b32017 40%, #cf3a1d 62%, #a4141a 100%);
  border-bottom: 1px solid #f7d79459;
  box-shadow: 0 3px 14px #7a0c1040; }
.festival-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 28%, #ffe9b355 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, #ffe9b340 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 52% 24%, #ffe9b345 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 72%, #ffe9b338 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 81% 32%, #ffe9b355 50%, transparent 51%); }
.festival-banner-inner { position: relative; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 44px;
  display: flex; align-items: center; justify-content: center; }
.festival-text { display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14.5px; line-height: 1.4;
  letter-spacing: .5px; color: #ffe9bd; text-shadow: 0 1px 2px #7a0c1066; }
.festival-title { font-weight: 700; color: #fff3d6; }
.festival-divider { flex: none; width: 1px; height: 14px; background: #ffe9bd59; }
.festival-blessing { font-weight: 400; }
.festival-blessing-short { display: none; }
.festival-lantern { position: absolute; top: 0; width: 24px; pointer-events: none; transform-origin: top center;
  animation: festival-sway 3.8s ease-in-out infinite; }
.festival-lantern--left { left: max(12px, calc((100% - 1200px) / 2)); }
.festival-lantern--right { right: max(12px, calc((100% - 1200px) / 2)); animation-delay: -1.9s; }
.festival-lantern::before { content: ""; display: block; width: 2px; height: 9px; margin: 0 auto; background: #f7d794b0; }
.festival-lantern::after { content: ""; display: block; width: 20px; height: 15px; border-radius: 50% / 42%;
  background: radial-gradient(circle at 50% 32%, #ffb066, #e5382e 78%);
  box-shadow: inset 0 -2px 4px #a4141acc, 0 2px 6px #7a0c1059; }
@keyframes festival-sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
.festival-close { position: absolute; right: 8px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #ffe3ae; transition: background 160ms, color 160ms; }
.festival-close:hover { background: #ffffff2e; color: #fff; }
.festival-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 1100px) {
  body.has-festival-banner #header, body:has(.festival-banner:not([hidden])) #header { top: calc(8px + var(--festival-h)); }
  .festival-lantern { display: none; }
}
@media (max-width: 720px) {
  .festival-banner-inner { padding: 0 40px 0 14px; }
  .festival-text { font-size: 13px; gap: 8px; }
  .festival-divider, .festival-blessing:not(.festival-blessing-short) { display: none; }
  .festival-blessing-short { display: inline; }
}