:root { --qjs-about-blue: #0066ff; --qjs-about-ink: #17253a; --qjs-about-muted: #78869a; --qjs-about-line: #e6edf6; }
.qjs-about-page { color: var(--qjs-about-ink); background: #fff; }
.qjs-about-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.qjs-about-hero { min-height: 600px; display: flex; align-items: center; background: #edf4ff url('/app/quanjingshuke/about/images/about/banner.webp') center / cover no-repeat; }
.qjs-about-hero-content { padding: 110px 0 68px; }
.qjs-about-hero p, .qjs-about-heading p, .qjs-about-contact-kicker { margin: 0 0 15px; color: var(--qjs-about-blue); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.qjs-about-hero h1 { margin: 0; font-size: 50px; line-height: 1.2; }
.qjs-about-hero span { display: block; margin-top: 30px; color: #59677a; font-size: 21px; }
.qjs-about-intro { padding: 100px 0 112px; background: linear-gradient(180deg, #fff 0, #fff 74%, #f7faff 74%, #f7faff 100%); }
.qjs-about-heading { text-align: center; }
.qjs-about-heading h2, .qjs-about-contact h2 { margin: 0; font-size: 38px; line-height: 1.25; }
.qjs-about-intro-copy { position: relative; z-index: 0; margin-top: 64px; padding: 52px 84px; overflow: hidden; color: #556378; background: #f1f7ff; font-size: 16px; line-height: 2.05; }
.qjs-about-intro-copy::after { position: absolute; z-index: -1; inset: 0; content: ''; opacity: .52; background: url('/app/quanjingshuke/about/images/about/bg-about.png') center / cover no-repeat; }
.qjs-about-intro-copy p { margin: 0; text-indent: 2em; }
.qjs-about-intro-copy p + p { margin-top: 18px; }
.qjs-about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 80px; }
.qjs-about-value { display: flex; min-height: 270px; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background-position: center; background-size: cover; text-align: center; }
.qjs-about-value > div { width: min(75%, 365px); padding: 28px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(4px); }
.qjs-about-value h3 { margin: 0; font-size: 22px; }
.qjs-about-value p { margin: 18px 0 0; color: #5d6b7c; font-size: 15px; line-height: 1.7; }
.qjs-about-value--mission { min-height: 572px; background-image: url('/app/quanjingshuke/about/images/about/bg-card-left.png'); }
.qjs-about-value-stack { display: grid; gap: 30px; }
.qjs-about-value--value { background-image: url('/app/quanjingshuke/about/images/about/bg-card-right-top.png'); }
.qjs-about-value--vision { background-image: url('/app/quanjingshuke/about/images/about/bg-card-right-bottom.png'); }
.qjs-about-honors { padding: 110px 0; scroll-margin-top: 70px; }
.qjs-about-honor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
.qjs-about-honor { min-height: 240px; padding: 0; overflow: hidden; border: 1px solid var(--qjs-about-line); border-radius: 8px; background: #fff; cursor: zoom-in; }
.qjs-about-honor img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.qjs-about-honor:hover img { transform: scale(1.025); }
.qjs-about-contact { padding: 80px 0; background: #0b57d0; color: #fff; }
.qjs-about-contact-layout { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 56px; align-items: center; }
.qjs-about-contact-kicker { color: #a8d0ff; }
.qjs-about-contact h2 { color: #fff; }
.qjs-about-contact h2 + p { max-width: 400px; margin: 20px 0 0; color: #dcecff; line-height: 1.75; }
.qjs-about-contact dl { margin: 0; }
.qjs-about-contact dl div + div { margin-top: 18px; }
.qjs-about-contact dt { margin-bottom: 5px; color: #a8d0ff; font-size: 13px; }
.qjs-about-contact dd { margin: 0; color: #fff; font-size: 16px; line-height: 1.5; }
.qjs-about-contact a { color: inherit; }
.qjs-about-qr-list { display: flex; gap: 20px; }
.qjs-about-qr-list div { display: flex; flex-direction: column; gap: 8px; align-items: center; color: #dcecff; font-size: 12px; }
.qjs-about-qr-list img { width: 112px; height: 112px; background: #fff; object-fit: cover; }
.qjs-about-preview[hidden] { display: none; }
.qjs-about-preview { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 60px 24px 24px; background: rgba(12, 23, 42, .82); }
.qjs-about-preview img { max-width: min(100%, 1100px); max-height: 100%; object-fit: contain; }
.qjs-about-preview button { position: absolute; top: 20px; right: 24px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .2); cursor: pointer; font-size: 20px; }
@media (max-width: 900px) { .qjs-about-contact-layout { grid-template-columns: 1fr 1fr; } .qjs-about-qr-list { grid-column: 1 / -1; } }
@media (max-width: 600px) { .qjs-about-container { width: min(100% - 32px, 1200px); } .qjs-about-hero { min-height: 340px; } .qjs-about-hero-content { padding: 92px 0 52px; } .qjs-about-hero h1 { font-size: 34px; } .qjs-about-hero span { margin-top: 20px; font-size: 16px; } .qjs-about-intro, .qjs-about-honors { padding: 64px 0; } .qjs-about-heading h2, .qjs-about-contact h2 { font-size: 28px; } .qjs-about-intro-copy { margin-top: 40px; padding: 28px 20px; font-size: 15px; line-height: 1.9; } .qjs-about-values, .qjs-about-honor-grid, .qjs-about-contact-layout { grid-template-columns: 1fr; } .qjs-about-values { gap: 20px; margin-top: 48px; } .qjs-about-value--mission { min-height: 360px; } .qjs-about-value { min-height: 210px; } .qjs-about-value-stack { gap: 20px; } .qjs-about-honor-grid { gap: 16px; margin-top: 40px; } .qjs-about-honor { min-height: 0; aspect-ratio: 1.7; } .qjs-about-contact { padding: 58px 0; } .qjs-about-contact-layout { gap: 32px; } .qjs-about-qr-list { grid-column: auto; } }