:root { color-scheme:light; --orange:#ff5a00; }
html { scrollbar-gutter:stable; }
.about-container,.about-footer,#about-qr-dialog,#authModal { --ink:#07192b; --muted:#5e6b80; --line:#dce4ed; --blue:#128fd7; --green:#12aa50; font:16px/1.6 "Segoe UI","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; background:#fff; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #248feb; outline-offset:4px; }
button { border:0; }
img { max-width:100%; }
[hidden],.hidden { display:none!important; }
.icon { width:20px; height:20px; flex:0 0 20px; vertical-align:middle; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:1001; background:white; padding:10px; }
.skip-link:focus { top:8px; }
.about-container { width:min(1264px,calc(100% - 96px)); margin-inline:auto; color:var(--ink); }
.brand-logo { object-fit:contain; }
.about-breadcrumb { display:flex; gap:12px; color:var(--muted); font-size:14px; margin:36px 0 20px; }
.about-breadcrumb a:hover { color:var(--orange); }
h1,h2,h3,p { margin:0; }
.about-intro { padding-bottom:28px; border-bottom:1px solid var(--line); }
.about-intro h1 { font-size:44px; line-height:1.25; font-weight:750; margin-bottom:14px; overflow-wrap:anywhere; }
.about-intro p { color:var(--muted); font-size:18px; line-height:1.7; max-width:1100px; }
.about-contacts-section { padding:32px 0 24px; border-bottom:1px solid var(--line); position:relative; }
#about-contact-title { scroll-margin-top:90px; }
.about-main p { overflow-wrap:anywhere; white-space:pre-line; }
.about-container h2 { font-size:30px; line-height:1.3; font-weight:750; }
.about-section-lead { color:var(--muted); margin:8px 0 20px; }
.about-contacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.about-contacts:has(>:only-child) { grid-template-columns:minmax(0,662px); }
.about-contact { min-width:0; border:1px solid var(--line); border-radius:6px; padding:24px; display:flex; gap:24px; align-items:center; background:#fff; }
.about-contact-info { flex:1; min-width:0; }
.about-contact-heading { display:flex; align-items:center; gap:18px; }
.channel-icon { display:grid; place-items:center; width:68px; height:68px; flex:0 0 68px; border-radius:8px; background:var(--blue); }
.channel-icon .icon { width:40px; height:40px; filter:invert(1); }
.wechat .channel-icon { background:var(--green); }
.about-contact h3 { font-size:24px; line-height:1.25; }
.account-value { font-size:19px; font-weight:650; line-height:1.4; margin-top:5px; overflow-wrap:anywhere; }
.about-channel-description { font-size:15px; color:var(--muted); margin:12px 0 22px; min-height:24px; }
.about-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.about-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 18px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--ink); font-size:15px; font-weight:600; line-height:1.4; }
.about-button:hover { background:#f1f5f9; border-color:#acbbcc; }
.about-button.primary { background:#0785ce; color:#fff; border-color:#0785ce; }
.about-button.primary .icon { filter:invert(1); }
.wechat .about-button.primary { background:#0a9345; border-color:#0a9345; }
.about-button.primary:hover { filter:brightness(.94); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; padding:0; }
.about-qr { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 150px; padding:0; background:none; color:var(--muted); font-size:13px; line-height:1.4; }
.about-qr img { width:150px; height:150px; object-fit:contain; background:#fff; }
.about-qr:hover span { color:var(--blue); }
.about-hours { display:flex; justify-content:center; align-items:center; gap:7px; color:var(--muted); font-size:13px; margin-top:17px; overflow-wrap:anywhere; }
.about-hours .icon { width:15px; height:15px; flex-basis:15px; opacity:.6; }
.about-status { min-height:22px; margin-top:6px; font-size:13px; text-align:center; color:#08743a; overflow-wrap:anywhere; }
.about-empty { padding:20px 0; color:var(--muted); }
.about-services-section { padding:38px 0 48px; }
.about-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:32px; }
.about-service { display:flex; flex-direction:column; gap:18px; padding:0 36px; border-left:1px solid var(--line); min-width:0; }
.about-service:first-child { padding-left:0; border:0; }
.about-service:last-child { padding-right:0; }
.about-service>.icon { width:36px; height:36px; flex-basis:36px; filter:invert(41%) sepia(92%) saturate(2612%) hue-rotate(359deg) brightness(102%) contrast(108%); }
.about-service h3 { font-size:19px; line-height:1.4; overflow-wrap:anywhere; }
.about-service p { color:var(--muted); font-size:15px; line-height:1.6; margin:8px 0 10px; }
.about-service a { display:inline-flex; gap:8px; align-items:center; color:#bd4200; font-size:14px; font-weight:600; }
.about-service a:hover { text-decoration:underline; }
.about-service a .icon { width:17px; height:17px; flex-basis:17px; }
.about-audience-band { background:#f3f6fa; padding:42px 0 48px; }
.about-audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 64px; margin-top:34px; }
.about-audience-item { display:flex; gap:24px; min-width:0; }
.about-audience-item>.icon { width:40px; height:40px; flex-basis:40px; filter:invert(41%) sepia(92%) saturate(2612%) hue-rotate(359deg) brightness(102%) contrast(108%); }
.about-audience-item h3,.about-process h3 { font-size:18px; line-height:1.45; overflow-wrap:anywhere; }
.about-audience-item p,.about-process p { margin-top:8px; font-size:15px; line-height:1.7; color:var(--muted); }
.about-process-section,.about-faq-section { padding:42px 0; border-bottom:1px solid var(--line); }
.about-process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding:0; margin:32px 0 0; list-style:none; }
.about-process li { min-width:0; position:relative; }
.about-process li:not(:last-child):not(:nth-child(4n))::after { content:""; position:absolute; height:1px; top:23px; left:70px; right:0; background:var(--line); }
.about-step-number { display:grid; place-items:center; width:46px; height:46px; margin-bottom:22px; border-radius:50%; background:var(--orange); color:white; font-size:15px; font-weight:700; }
.about-faq-list { margin-top:22px; }
.about-faq-item { border-bottom:1px solid var(--line); }
.about-faq-item:first-child { border-top:1px solid var(--line); }
.about-faq-item[open] { background:#f7f9fc; }
.about-faq-item summary { display:flex; align-items:center; gap:22px; cursor:pointer; padding:19px 16px; list-style:none; font-size:16px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.about-faq-item summary::-webkit-details-marker { display:none; }
.about-faq-item summary:hover { color:#bd4200; }
.about-faq-symbol { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid var(--line); border-radius:50%; background:#fff; }
.about-faq-symbol .icon:last-child { display:none; }
.about-faq-item[open] .about-faq-symbol { background:var(--orange); border-color:var(--orange); }
.about-faq-item[open] .about-faq-symbol .icon:first-child { display:none; }
.about-faq-item[open] .about-faq-symbol .icon:last-child { display:block; filter:invert(1); }
.about-faq-answer { padding:0 24px 24px 68px; color:var(--muted); font-size:15px; line-height:1.8; }
.about-footer { border-top:1px solid var(--line); padding:15px 0 24px; color:var(--muted); }
.about-footer-top { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.about-footer .brand { gap:12px; flex-shrink:0; }
.about-footer .brand strong { color:var(--ink); font-size:17px; font-weight:700; line-height:normal; }
.about-footer .brand-mark,.about-footer .brand-logo { width:30px; height:30px; font-size:21px; font-weight:800; line-height:1; box-shadow:none; }
.about-footer nav { display:flex; flex-wrap:wrap; gap:24px; font-size:13px; }
.about-footer p { font-size:12px; line-height:1.8; margin-top:8px; }
.about-footer p span { margin-left:14px; }
#about-qr-dialog { border:1px solid var(--line); border-radius:8px; width:min(540px,calc(100% - 32px)); padding:20px; color:var(--ink); max-height:90dvh; overflow:auto; }
#about-qr-dialog::backdrop { background:#07192bb3; }
.about-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.about-dialog-head h2 { font-size:22px; }
#about-qr-large { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:white; }
#about-qr-caption { text-align:center; color:var(--muted); font-size:14px; margin-top:14px; }
.modal-root { position:fixed; inset:0; z-index:1000; background:#07192b77; display:grid; place-items:center; padding:16px; }
.modal { width:min(430px,100%); max-height:90dvh; overflow:auto; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:0 16px 50px #00132533; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); }
.modal-head h3 { font-size:18px; }
.close { background:#f2f5f8; border-radius:5px; }
.modal-tabs { display:flex; gap:8px; padding:14px 18px 0; }
.modal-tabs button { flex:1; border:1px solid var(--line); background:white; border-radius:5px; padding:8px; color:var(--muted); }
.modal-tabs .active { color:#c84b00; border-color:#ffceb3; background:#fff5ed; }
.form { display:grid; gap:12px; padding:16px 18px 22px; }
.form label { display:grid; gap:5px; font-size:13px; color:var(--muted); font-weight:600; }
.form input { border:1px solid var(--line); border-radius:5px; padding:10px; width:100%; min-width:0; background:#fff; }
.form .auth-remember { display:flex; align-items:center; gap:8px; }
.auth-remember input { width:16px; height:16px; accent-color:var(--orange); }
.code-row { display:flex; gap:8px; }
.code-row input { flex:1; }
.btn { border:1px solid var(--line); border-radius:5px; padding:10px 14px; background:white; color:var(--ink); white-space:nowrap; }
.btn.primary { background:var(--orange); color:white; border-color:var(--orange); font-weight:650; }
.form-message { font-size:13px; overflow-wrap:anywhere; color:#d03535; }
@media(min-width:1600px) { .about-container { width:min(1264px,calc(100% - 120px)); } }
@media(max-width:1250px) { .about-contact { padding:20px; gap:16px; } .about-contact-heading { gap:12px; } .channel-icon { width:50px; height:50px; flex-basis:50px; } .channel-icon .icon { width:30px; height:30px; } .about-qr { flex-basis:116px; } .about-qr img { width:116px; height:116px; } .account-value { font-size:17px; } .about-contact h3 { font-size:22px; } }
@media(max-width:900px) { .about-container { width:calc(100% - 48px); } .about-contacts { grid-template-columns:1fr; } .about-contact { padding:24px; gap:24px; } .about-qr { flex-basis:148px; } .about-qr img { width:148px; height:148px; } .about-contact-heading { gap:18px; } .channel-icon { width:64px; height:64px; flex-basis:64px; } .about-services { grid-template-columns:1fr; gap:22px; } .about-service,.about-service:first-child { padding:0 0 22px; border:0; border-bottom:1px solid var(--line); } .about-service:last-child { border:0; padding-bottom:0; } }
@media(max-width:600px) { .about-container,.about-footer,#about-qr-dialog,#authModal { font-size:14px; } .about-container { width:calc(100% - 32px); } .about-breadcrumb { margin:22px 0 12px; font-size:12px; } .about-intro h1 { font-size:32px; } .about-intro p { font-size:15px; line-height:1.8; } .about-container h2 { font-size:25px; } .about-contact { padding:20px; gap:18px; flex-wrap:wrap; } .about-contact-info { flex-basis:100%; } .about-contact h3 { font-size:23px; } .account-value { font-size:18px; } .about-qr { flex-basis:100%; flex-direction:column; justify-content:center; gap:8px; border-top:1px solid #eef1f5; padding-top:16px; } .about-qr img { width:160px; height:160px; } .about-channel-description { margin-bottom:18px; } .about-actions .primary { flex:1; } .about-hours { font-size:12px; text-align:center; } .about-footer-top { flex-wrap:wrap; gap:14px; } .about-footer nav { gap:18px; } .about-footer p span { display:block; margin-left:0; } .about-service { gap:18px; } }
@media(max-width:900px) { .about-service { flex-direction:row; } .about-audience-grid { gap:28px; } .about-process { grid-template-columns:repeat(2,minmax(0,1fr)); } .about-process li:nth-child(2n)::after { display:none; } #about-contact-title { scroll-margin-top:240px; } }
@media(max-width:768px) { #about-contact-title { scroll-margin-top:84px; } }
@media(max-width:600px) { .about-intro { padding-bottom:24px; } .about-services-section,.about-audience-band,.about-process-section,.about-faq-section { padding-block:30px; } .about-audience-grid { grid-template-columns:1fr; } .about-audience-item { gap:18px; } .about-process { grid-template-columns:1fr; gap:26px; } .about-process li { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:18px; } .about-step-number { width:40px; height:40px; grid-row:1/3; margin:0; } .about-process li::after { display:none; } .about-process p { grid-column:2; margin-top:5px; } .about-faq-item summary { padding:16px 8px; gap:12px; font-size:15px; } .about-faq-answer { padding:0 12px 20px 50px; font-size:14px; } .about-contacts-section { padding-top:24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }