:root { --v500-ink: #101923; --v500-muted: #53606d; --v500-line: rgba(16, 25, 35, .13); --v500-paper: #f6f8f8; --v500-white: #ffffff; --v500-blue: #075ca8; --v500-blue-deep: #073e72; --v500-green: #087f58; --v500-green-soft: #dcefe8; --v500-radius: 14px; --v500-shadow: 0 24px 70px rgba(12, 32, 49, .10); } body.v500-site { background: var(--v500-paper); color: var(--v500-ink); } html body.v500-site.v500-site main h2::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; margin: 0 !important; animation: none !important; } html body.v500-site.v500-site main .v500-section--dark h2 { color: #eef5f7 !important; } html body.v500-site.v500-site main .v500-final h2 { color: #fff !important; } html body.v500-site.v500-site main > :is( .home-page-nav, .bioten-page-nav, .about-anchor-nav, .knowledge-anchor-nav, .resources-page-nav, .packaging-anchor, .news-business-anchor, .bioten-product-nav, .pl-anchor-nav, .vp-anchor-nav, .article-nav, .solutions-anchor )::before { content: "内容导航" !important; } body.v500-site .site-header { background: rgba(250, 252, 252, .96); } .v500-shell { width: min(1440px, calc(100% - 96px)); margin-inline: auto; } .v500-main { overflow: clip; } .v500-context { position: relative; z-index: 4; border-bottom: 1px solid var(--v500-line); background: rgba(255, 255, 255, .94); } .v500-context__inner { width: min(1440px, calc(100% - 96px)); min-height: 48px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .v500-context ol, .v500-context__next { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--v500-muted); font-size: 12px; letter-spacing: .02em; } .v500-context li:not(:last-child)::after { content: "/"; margin-left: 10px; color: rgba(16, 25, 35, .35); } .v500-context a { color: inherit; text-decoration: none; } .v500-context a:hover, .v500-context a:focus-visible { color: var(--v500-blue); } .v500-context__next { color: var(--v500-blue-deep); font-weight: 650; } .v500-context__next span:last-child { font-size: 16px; } .v500-hero { position: relative; min-height: 620px; padding: 76px 0 64px; display: grid; align-items: center; background: radial-gradient(circle at 78% 22%, rgba(8, 127, 88, .10), transparent 31%), linear-gradient(118deg, #f9fbfb 0%, #f2f7f8 58%, #eef6f4 100%); border-bottom: 1px solid var(--v500-line); } .v500-hero__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr); align-items: center; gap: clamp(52px, 6vw, 104px); } .v500-hero__copy { max-width: 650px; } .v500-kicker { margin: 0 0 18px; color: var(--v500-blue); font-size: 13px; font-weight: 720; letter-spacing: .1em; } .v500-kicker::before { content: ""; display: inline-block; width: 24px; height: 2px; margin: 0 10px 4px 0; background: linear-gradient(90deg, var(--v500-blue), var(--v500-green)); } .v500-hero h1 { max-width: none; margin: 0; font-size: clamp(48px, 4.4vw, 76px); line-height: 1.03; letter-spacing: -.055em; font-weight: 680; text-wrap: balance; word-break: auto-phrase; } .v500-hero__lead { max-width: 42em; margin: 26px 0 0; color: #3d4b58; font-size: 18px; line-height: 1.82; } .v500-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; } .v500-button { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--v500-line); border-radius: 10px; background: rgba(255, 255, 255, .82); color: var(--v500-ink); font-size: 14px; font-weight: 680; text-decoration: none; transition: transform .24s ease, border-color .24s ease, background .24s ease; } .v500-button:hover, .v500-button:focus-visible { transform: translateY(-2px); border-color: rgba(7, 92, 168, .45); background: var(--v500-white); } .v500-button--primary { border-color: var(--v500-blue); background: var(--v500-blue); color: #fff; } .v500-button--primary:hover, .v500-button--primary:focus-visible { border-color: var(--v500-blue-deep); background: var(--v500-blue-deep); } .v500-hero__visual { position: relative; min-height: 460px; margin: 0; overflow: hidden; border: 1px solid rgba(16, 25, 35, .11); border-radius: 18px; background: #e8eeee; box-shadow: var(--v500-shadow); } .v500-hero__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 42%); } .v500-hero__visual img { width: 100%; height: 100%; min-height: 460px; display: block; object-fit: cover; object-position: var(--v500-image-position, 50% 50%); } .v500-hero__caption { position: absolute; z-index: 2; right: 22px; bottom: 18px; left: 22px; display: flex; justify-content: space-between; gap: 24px; color: #fff; font-size: 12px; letter-spacing: .03em; } .v500-facts { position: relative; z-index: 3; margin-top: -1px; border-bottom: 1px solid var(--v500-line); background: #fff; } .v500-facts__grid { min-height: 112px; display: grid; grid-template-columns: repeat(4, 1fr); } .v500-fact { padding: 24px 28px; display: grid; align-content: center; gap: 7px; border-left: 1px solid var(--v500-line); } .v500-fact:last-child { border-right: 1px solid var(--v500-line); } .v500-fact span { color: var(--v500-muted); font-size: 12px; } .v500-fact strong { font-size: 17px; line-height: 1.35; font-weight: 680; } .v500-section { padding: 82px 0; border-bottom: 1px solid var(--v500-line); background: #fff; } .v500-section--soft { background: #f0f4f4; } .v500-section--dark { color: #eef5f7; background: #0d202c; } .v500-section__head { max-width: 920px; display: block; margin-bottom: 38px; } .v500-section__head h2 { max-width: 22ch; margin: 0; font-size: clamp(34px, 2.8vw, 48px); line-height: 1.12; letter-spacing: -.045em; font-weight: 660; text-wrap: balance; } .v500-section__head p, .v500-section__intro { max-width: 760px; margin: 16px 0 0; color: var(--v500-muted); font-size: 16px; line-height: 1.78; } .v500-section--dark .v500-section__head p, .v500-section--dark .v500-section__intro { color: rgba(238, 245, 247, .68); } .v500-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .v500-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v500-card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .v500-card { min-height: 224px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--v500-line); border-radius: var(--v500-radius); background: rgba(255, 255, 255, .92); box-shadow: 0 14px 36px rgba(13, 35, 50, .045); } .v500-card__number { color: var(--v500-blue); font-size: 12px; font-weight: 720; letter-spacing: .08em; } .v500-card h3 { margin: 0 0 14px; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; } .v500-card p { margin: 0; color: var(--v500-muted); font-size: 14px; line-height: 1.78; } .v500-card a, .v500-route a, .v500-text-link { color: var(--v500-blue-deep); font-weight: 680; text-decoration: none; } .v500-card a { margin-top: auto; padding-top: 22px; } .v500-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--v500-radius); overflow: hidden; } .v500-chain article { min-height: 228px; padding: 24px; border-right: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .025); } .v500-chain article:last-child { border-right: 0; } .v500-chain span { color: #62d0ae; font-size: 12px; } .v500-chain strong { margin-top: 62px; display: block; font-size: 19px; line-height: 1.4; } .v500-chain p { margin: 10px 0 0; color: rgba(238, 245, 247, .66); font-size: 13px; line-height: 1.72; } .v500-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .v500-route-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v500-route-grid--4 .v500-route { min-height: 350px; } .v500-route { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--v500-line); border-radius: var(--v500-radius); background: #dfe8e6; } .v500-route img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); } .v500-route:hover img { transform: scale(1.025); } .v500-route::after { content: ""; position: absolute; inset: 18% 0 0; background: linear-gradient(180deg, transparent, rgba(5, 21, 31, .90)); } .v500-route__copy { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; color: #fff; } .v500-route__copy span { font-size: 12px; font-weight: 650; letter-spacing: .04em; opacity: .82; } .v500-route__copy h3 { margin: 8px 0; font-size: 24px; line-height: 1.25; } .v500-route__copy p { margin: 0 0 16px; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.68; } .v500-route__copy a { color: #fff; } .v500-evidence { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; align-items: start; } .v500-evidence__intro h2 { margin: 0; font-size: 40px; line-height: 1.12; letter-spacing: -.04em; } .v500-evidence__intro p { margin: 20px 0 0; color: var(--v500-muted); line-height: 1.82; } .v500-evidence__list { display: grid; border-top: 1px solid var(--v500-line); } .v500-evidence__list article { padding: 20px 0; display: grid; grid-template-columns: 150px 1fr; gap: 24px; border-bottom: 1px solid var(--v500-line); } .v500-evidence__list strong { font-size: 14px; } .v500-evidence__list p { margin: 0; color: var(--v500-muted); font-size: 14px; line-height: 1.72; } .v500-final { padding: 72px 0; background: linear-gradient(112deg, var(--v500-blue-deep), #0a5f70 62%, var(--v500-green)); color: #fff; } .v500-final__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 56px; } .v500-final h2 { margin: 0; font-size: 38px; letter-spacing: -.035em; } .v500-final p { max-width: 760px; margin: 14px 0 0; color: rgba(255, 255, 255, .74); line-height: 1.75; } .v500-final .v500-button { border-color: rgba(255, 255, 255, .42); background: #fff; color: var(--v500-blue-deep); } .v500-site .formal-site-footer { border-top: 0; } .v500-site .footer-inner { width: min(1440px, calc(100% - 96px)); } .v500-site .footer-directory { gap: 38px; } .v500-site .footer-column a { line-height: 1.55; } .v500-map-hero { padding: 72px 0 58px; border-bottom: 1px solid var(--v500-line); background: radial-gradient(circle at 84% 22%, rgba(8, 127, 88, .1), transparent 28%), linear-gradient(120deg, #fbfcfc, #eef5f5); } .v500-map-hero h1 { max-width: 18ch; margin: 0; font-size: 48px !important; line-height: 1.04; letter-spacing: -.045em; } .v500-map-hero p:last-child { max-width: 760px; margin: 20px 0 0; color: var(--v500-muted); font-size: 16px; line-height: 1.76; } .v500-map { padding: 64px 0 80px; background: #fff; } .v500-map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--v500-line); border-bottom: 1px solid var(--v500-line); } .v500-map__group { min-height: 520px; padding: 28px 24px; border-left: 1px solid var(--v500-line); } .v500-map__group:last-child { border-right: 1px solid var(--v500-line); } .v500-map__group > span { color: var(--v500-blue); font-size: 12px; font-weight: 760; letter-spacing: .08em; } .v500-map__group h2 { margin: 28px 0 10px; font-size: 25px !important; letter-spacing: -.025em; } .v500-map__group > p { min-height: 76px; margin: 0 0 26px; color: var(--v500-muted); font-size: 13px; line-height: 1.62; } .v500-map__group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v500-line); } .v500-map__group li { border-bottom: 1px solid var(--v500-line); } .v500-map__group a { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--v500-ink); font-size: 13px; font-weight: 650; line-height: 1.35; text-decoration: none; } .v500-map__group a::after { content: "→"; flex: 0 0 auto; color: var(--v500-blue); } .v500-map__group a:hover, .v500-map__group a:focus-visible { color: var(--v500-blue); } @media (min-width: 1024px) and (max-width: 1280px) { .v500-shell, .v500-context__inner, .v500-site .footer-inner { width: min(1180px, calc(100% - 56px)); } .v500-hero { min-height: 560px; padding-block: 56px; } .v500-hero__grid { grid-template-columns: .9fr 1.1fr; gap: 46px; } .v500-hero h1 { font-size: 48px; } .v500-hero__visual, .v500-hero__visual img { min-height: 400px; } .v500-section { padding-block: 70px; } .v500-card { min-height: 218px; padding: 22px; } .v500-chain article { padding: 20px; } html body.v245-page.v282-site.v500-site #main-content #health-title { font-size: 48px !important; line-height: 1.06 !important; letter-spacing: -0.045em !important; } } @media (max-width: 1023px) { .v500-shell, .v500-context__inner, .v500-site .footer-inner { width: min(100% - 36px, 760px); } .v500-context__next { display: none; } .v500-hero__grid, .v500-section__head, .v500-evidence, .v500-final__inner { grid-template-columns: 1fr; } .v500-hero__grid { gap: 36px; } .v500-hero h1 { font-size: 46px; } .v500-facts__grid, .v500-card-grid { grid-template-columns: repeat(2, 1fr); } .v500-chain { grid-template-columns: 1fr; } .v500-chain article { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); } .v500-chain strong { margin-top: 22px; } .v500-route-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .v500-button, .v500-route img { transition: none; } }