/*!
 * 站点基础样式（原 site-styles）
 * 由单文件版本拆分，内容未改动。
 */

html.account-route body { background: rgb(40, 92, 134); }
html.account-route body > :not(#account-page) { display: none !important; }
#account-page { display: none; width: 100%; height: 100dvh; border: 0px; }
html.account-route #account-page { display: block; }
html.account-route body { margin: 0px; overflow: hidden; }
html.products-route main > :not(#resources) { display: none !important; }
html.products-route:not(.catalog-ready) main { display: none !important; }
.hero .hero-copy > p { color: rgb(255, 255, 255) !important; }
:root { --muted: #607586; --line: #d7e1e7; --ice: #eef5fb; --ease: cubic-bezier(0.22, 1, 0.36, 1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: rgb(235, 173, 88) solid 3px; outline-offset: 6px; }
button:disabled { cursor: default; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
svg { display: block; }
[hidden] { display: none !important; }
.wrap { width: min(1320px, 100% - 112px); margin: auto; }
p { line-height: 1.85; }
.arrow { display: inline-block; font-size: 24px; font-weight: 400; transition: transform 0.3s; }
.button:hover .arrow, .textlink:hover .arrow { transform: translate(4px, -3px); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; border: 1px solid var(--blue); border-radius: 10px; transition: background 0.25s, box-shadow 0.25s; }
.button:hover { box-shadow: rgba(24, 102, 233, 0.133) 0px 10px 24px; }
.button.secondary { border-color: rgb(173, 189, 201); }
.button.secondary:hover { background: rgba(255, 255, 255, 0.533); }
.button.white { background: rgb(255, 255, 255); color: var(--blue); border-color: rgb(255, 255, 255); }
.textlink { display: inline-flex; align-items: center; gap: 22px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor; border-image: none; background: none; padding: 0px 0px 9px; }
.label { font-size: 16px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 11px; margin-bottom: 23px; }
.label::before { content: ""; width: 7px; height: 7px; background: currentcolor; border-radius: 50%; }
.section-title { margin: 0px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 50px; }
.head p { font-size: 18px; color: var(--muted); max-width: 410px; margin: 0px; }
.nav-shell { height: 86px; position: sticky; top: 0px; z-index: 25; backdrop-filter: blur(16px); border-bottom: 1px solid rgb(237, 240, 243); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; gap: 15px; align-items: center; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px;  place-items: center; color: white; font-size: 20px; box-shadow: rgba(24, 102, 233, 0.11) 0px 5px 12px; }
.nav-links { display: flex; }
.nav-action { display: flex; align-items: center; }
.account { font-size: 14px; }
.nav-action .button { font-size: 15px; padding: 12px 20px; }
.menu { display: none; background: transparent; border: 1px solid var(--line); border-radius: 10px; }
.progress { position: absolute; bottom: -1px; left: 0px; height: 2px; background: var(--blue); width: 0px; transition: width 0.1s linear; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero .label { margin-bottom: 30px; }
.hero h1 { margin: 0px 0px 28px; white-space: nowrap; }
.hero p { max-width: 400px; margin: 0px 0px 38px; }
.hero-actions { display: flex; flex-wrap: wrap; }
.hero-copy > * { animation: entry 0.9s var(--ease) both; }
.hero-copy h1 { animation-delay: 0.08s; }
.hero-copy p { animation-delay: 0.16s; }
.hero-actions { animation-delay: 0.24s !important; }
.case-section { background: rgb(255, 255, 255); }
.scene-tabs { display: flex; border-bottom: 1px solid var(--line); }
.scene-tab { text-align: left; font-size: 21px; }
.scene-tab::after { content: ""; position: absolute; left: 0px; bottom: -1px; height: 3px; background: var(--blue); width: 0px; transition: width 0.4s var(--ease); }
.scene-tab[aria-selected="true"] { font-weight: 700; }
.scene-tab[aria-selected="true"]::after { width: calc(100% - 30px); }
.case-panel { display: grid; grid-template-columns: 64% 36%; background: rgb(244, 247, 249); }
.case-visual { position: relative; background: rgb(220, 231, 233); overflow: hidden; }
.case-visual img { transition: transform 0.9s var(--ease); object-position: center center; }
.case-visual:hover img { transform: scale(1.025); }
.case-visual::after { content: ""; position: absolute; inset: 65% 0px 0px; background: linear-gradient(transparent, rgba(16, 46, 67, 0.25)); }
.case-info { display: flex; flex-direction: column; align-items: start; }
.case-info h3 { line-height: 1.4; letter-spacing: -0.8px; }
.case-info > p { font-size: 17px; color: var(--muted); margin: 0px 0px 28px; }
.case-info .textlink { margin-top: auto; padding-top: 27px; color: var(--blue); }
.identity { background: rgb(234, 243, 252); overflow: hidden; }
.identity .head { margin-bottom: 56px; }
.product-photo { height: 480px; overflow: hidden; border-radius: 10px 0px 0px 10px; background: rgb(220, 231, 238); }
.product-photo img { object-position: 44% 50%; }
.join { padding-bottom: 95px; }
.join .head { margin-bottom: 53px; }
.join-card { padding: 48px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
.join-card::after { content: "→"; position: absolute; right: 30px; bottom: -20px; font-size: 205px; font-weight: 300; line-height: 1; pointer-events: none; }
.join-card .role { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.join-card h3 { margin: 0px 0px 17px; line-height: 1.4; letter-spacing: -0.5px; }
.join-card p { font-size: 18px; margin: 0px 0px 28px; max-width: 420px; }
.join-card button { margin-top: auto; position: relative; z-index: 1; }
.footer { padding: 40px 0px; color: rgb(124, 139, 151); font-size: 13px; }
.footer b { display: block; font-size: 16px; color: rgb(66, 96, 116); margin-bottom: 10px; }
.footer p { margin: 0px; font-size: 13px; }
.footer a:hover { color: var(--blue); }
dialog { border: 0px; padding: 0px; color: var(--ink); box-shadow: rgba(9, 47, 86, 0.22) 0px 30px 100px; }
dialog::backdrop { background: rgba(12, 45, 74, 0.467); backdrop-filter: blur(6px); }
.modal-head { border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0px; z-index: 2; }
.modal-head h2 { margin: 0px; }
.close { border: 0px; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; flex-shrink: 0; }
.modal-body p { font-size: 16px; color: var(--muted); margin: 18px 0px; }
.modal-body h3 { font-size: 23px; margin: 28px 0px 18px; }
.modal-img { height: 340px; border-radius: 10px; overflow: hidden; background: var(--ice); }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; margin-top: 8px; padding: 13px; border: 1px solid rgb(203, 217, 228); border-radius: 10px; color: var(--ink); font-size: 16px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form textarea { height: 110px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: rgb(172, 203, 255) solid 2px; border-color: var(--blue); }
.status { font-size: 15px; color: rgb(39, 131, 109); min-height: 25px; }
.form-actions { display: flex; align-items: center; gap: 20px; }
@keyframes entry {
0% { opacity: 0; transform: translateY(22px); }
100% { opacity: 1; transform: none; }
}

@keyframes glow {
50% { filter: drop-shadow(rgb(129, 184, 255) 0px 0px 8px); }
}
@media (min-width: 1600px) {
.hero { grid-template-columns: 46% 54%; }
.hero-copy { padding-right: 45px; }
.hero { min-height: 790px; }
}
@media (max-width: 1180px) {
.wrap { width: calc(100% - 72px); }
.nav-links { gap: 18px; font-size: 15px; }
.account { display: none; }
.hero-copy { padding-left: 36px; padding-right: 20px; }
.hero h1 { font-size: 49px; }
.hero p { font-size: 18px; max-width: 355px; }
.hero-actions { gap: 10px; }
.hero-actions .button { padding: 15px 17px; font-size: 16px; gap: 15px; }
.case-info { padding: 35px 28px; }
.case-info h3 { font-size: 29px; }
.join-card { padding: 36px; }
.nav-action .button { padding: 12px 15px; }
}
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-links.open { display: flex; position: absolute; top: 85px; left: 0px; right: 0px; background: white; padding: 25px 36px; box-shadow: rgba(23, 52, 71, 0.05) 0px 20px 30px; flex-wrap: wrap; }
.menu { display: block; }
.nav-action .button { display: none; }
.hero { grid-template-columns: 1fr 1fr; }
.hero-copy { padding-top: 60px; padding-bottom: 65px; }
.hero h1 { font-size: 42px; }
.hero { min-height: 640px; }
.hero p { font-size: 17px; }
.hero .label { font-size: 14px; }
.head { align-items: flex-start; flex-direction: column; gap: 20px; }
.section { padding: 80px 0px; }
.case-panel { grid-template-columns: 58% 42%; }
.case-info h3 { font-size: 27px; }
.case-visual { height: 530px; }
.product-photo { height: 510px; }
.join-card h3 { font-size: 26px; }
.join-card p { font-size: 17px; }
}
@media (max-width: 650px) {
html { scroll-padding-top: 73px; }
.wrap { width: calc(100% - 40px); }
.nav-shell { height: 73px; }
.brand-mark { width: 37px; height: 37px; font-size: 17px; border-radius: 10px; }
.hero { display: flex; flex-direction: column; }
.hero-copy { width: 100%; align-items: flex-start; }
.hero .label { font-size: 14px; margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
.hero p { font-size: 17px; max-width: 100%; margin-bottom: 27px; }
.hero-actions .button { padding: 14px 18px; font-size: 16px; }
.section { padding: 68px 0px; }
.section-title { font-size: 34px; letter-spacing: -1px; }
.label { font-size: 15px; margin-bottom: 18px; }
.head { margin-bottom: 32px; gap: 17px; }
.head p { font-size: 17px; }
.scene-tab { line-height: 1.5; }
.scene-tab[aria-selected="true"]::after { width: calc(100% - 13px); }
.case-info h3 { margin-bottom: 13px; }
.case-info > p { font-size: 17px; margin-bottom: 22px; }
.identity .head { margin-bottom: 32px; }
.product-photo { height: 310px; border-radius: 10px 10px 0px 0px; }
.join-card { padding: 32px; min-height: 310px; }
.join-card p { font-size: 17px; }
.join .head { margin-bottom: 33px; }
.contact-form { grid-template-columns: 1fr; }
.contact-form .full { grid-column: auto; }
.form-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
:root { --blue: #235bb5; --ink: #19364e; --deep: #183e70; }
.hero { color: rgb(255, 255, 255); grid-template-columns: 48% 52%; }
.hero .secondary { color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.376); }
.hero .button:not(.secondary) { background: rgb(255, 255, 255); color: rgb(32, 79, 145); border-color: rgb(255, 255, 255); }
.hero h1 { font-size: clamp(42px, 4.15vw, 64px); }
.section { padding: 116px 0px; }
.case-panel { min-height: 555px; border-radius: 10px; }
.case-visual { height: 555px; }
.case-info h3 { font-size: 36px; margin: 24px 0px 35px; }
.case-info .textlink { font-size: 18px; }
.join-card { min-height: 350px; }
html.motion .reveal { opacity: 0; transform: translateY(55px); transition-delay: var(--delay, 0s); }
html.motion .reveal.in-view { opacity: 1; transform: none; }
html.motion .case-panel.reveal { clip-path: inset(0px 10% 0px 0px); transition: clip-path 1.2s var(--ease),
          opacity 0.9s,
          transform 1.2s var(--ease); }
html.motion .case-panel.in-view { clip-path: inset(0px); }
html.motion .case-panel.in-view .case-visual img { animation: scene-unfold 1.5s var(--ease) both; }
@keyframes scene-unfold {
0% { transform: scale(1.13); filter: brightness(0.8); }
100% { transform: scale(1); filter: brightness(1); }
}


@media (max-width: 1000px) {
.hero h1 { font-size: 42px; }
.case-info { padding: 35px 25px; }
.case-info h3 { font-size: 30px; }
.hero-copy { padding-left: 36px; }
.section { padding: 85px 0px; }
}
@media (max-width: 650px) {
.hero-copy { padding: 60px 20px 55px; }
.case-panel { display: flex; flex-direction: column; min-height: 0px; }
.case-visual { width: 100%; }
.case-info { min-height: 335px; padding: 28px; }
.case-info h3 { font-size: 30px; margin: 10px 0px 25px; }
.case-info .textlink { margin-top: 25px; padding-top: 8px; }
.section { padding: 76px 0px; }
.scene-tab { font-size: 17px; }
.modal-img { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
html.motion .reveal { opacity: 1; transform: none; clip-path: none; }
*, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.brand-name { letter-spacing: 0px; font-weight: 700; white-space: nowrap; }
.nav { gap: 24px; }
.nav-links { white-space: nowrap; }
.nav-action { gap: 18px; }
.hero h1 { letter-spacing: 0px; line-height: 1.32; }
.hero-copy { isolation: isolate; }
.case-visual img, .case-visual:hover img { transition: none; transform: none !important; animation: auto ease 0s 1 normal none running none !important; }
.scene-tab span { font-size: 29px; font-weight: 400; color: rgb(120, 148, 178); opacity: 1; font-variant-numeric: tabular-nums; }
.scene-tab b { font-size: 21px; font-weight: 600; }
.scene-tab::after { display: none; }
.scene-tab[aria-selected="true"] { border-color: rgb(29, 70, 121); box-shadow: rgba(24, 62, 112, 0.1) 0px 10px 25px; }
.scene-tab[aria-selected="true"] span { color: rgb(167, 201, 244); }
.case-list { display: flex; flex-direction: column; }
.case-entry { overflow: hidden; }
.case-entry .case-panel { border-radius: 0px; }
.case-entry:nth-child(2n) .case-panel { grid-template-columns: 36% 64%; }
.services { background: rgb(237, 243, 248); }
.services .head { display: block; }
.service-card { position: relative; background: rgb(255, 255, 255); padding: 40px 33px; min-height: 300px; border-top: 2px solid rgb(156, 184, 217); }
.service-card svg { width: 57px; height: 57px; color: rgb(56, 108, 170); margin-bottom: 32px; }
.service-card h3 { font-size: 26px; margin: 0px 0px 18px; }
.service-card p { font-size: 18px; line-height: 1.8; color: rgb(103, 127, 148); margin: 0px; max-width: 290px; }
.service-card:nth-child(2) { --delay: 0.12s; }
.service-card:nth-child(3) { --delay: 0.24s; }
.join { background: linear-gradient(125deg, rgb(22, 57, 97), rgb(35, 79, 134)); color: rgb(255, 255, 255); }
.join .section-title { max-width: none; }
.join-card { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 10px; }
.join-card .role { color: rgb(164, 201, 246); }
.join-card p { color: rgb(193, 210, 231); }
.join-card button { color: rgb(255, 255, 255); }
.join-card::after { color: rgba(255, 255, 255, 0.024); }
.footer { background: rgb(242, 245, 248); }
@keyframes photo-reveal {
0% { clip-path: inset(0px 12% 0px 0px); opacity: 0.4; }
100% { clip-path: inset(0px); opacity: 1; }
}
@media (max-width: 1200px) {
.nav-links { gap: 18px; }
.brand-name { font-size: 18px; }
.nav-action .account { display: none; }
.nav-action .button { padding: 12px 14px; }
.scene-tab { padding: 22px 17px; gap: 12px; }
.scene-tab b { font-size: 19px; }
.service-card { padding: 33px 25px; }
}
@media (max-width: 1050px) {
.nav-links { display: none; }
.nav-links.open { display: flex; position: absolute; top: 85px; left: 0px; right: 0px; background: rgb(255, 255, 255); padding: 24px 36px; box-shadow: rgba(23, 52, 71, 0.05) 0px 20px 30px; }
.menu { display: block; }
.nav-action .button { display: none; }
.hero h1 { font-size: clamp(34px, 4.2vw, 43px); }
.service-card h3 { font-size: 23px; }
.service-card p { font-size: 17px; }
}
@media (max-width: 650px) {
.brand-name { font-size: 14px; max-width: 168px; white-space: normal; line-height: 1.5; }
.brand { gap: 9px; }
.brand-mark { flex-shrink: 0; }
.nav { gap: 10px; }
.nav-links.open { top: 72px; padding: 22px 20px; }
.menu { padding: 9px 11px; font-size: 14px; }
.hero h1 { font-size: clamp(32px, 8.3vw, 46px); letter-spacing: 0px; }
.scene-tab { display: flex; }
.scene-tab span { display: inline; font-size: 24px; }
.scene-tab b { font-size: 17px; }
.case-list { gap: 34px; }
.case-entry:nth-child(2n) .case-visual { order: 0; }
.case-visual { height: 320px; }
.service-card { min-height: 260px; padding: 30px; }
.service-card p { max-width: none; }
.service-card h3 { font-size: 25px; }
.service-card svg { margin-bottom: 22px; }
.service-card:nth-child(n) { --delay: 0s; }
.join .section-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.case-entry.reveal.in-view .case-visual { animation: auto ease 0s 1 normal none running none !important; }
}
.case-entry { background: rgb(255, 255, 255); border: 1px solid rgb(219, 228, 236); border-radius: 10px; scroll-margin-top: 110px; }
.case-entry.expanded { box-shadow: rgba(24, 62, 112, 0.04) 0px 20px 65px; }
.case-entry .case-panel, .case-entry:nth-child(2n) .case-panel { grid-template-columns: 62% 38%; background: rgb(243, 246, 248); min-height: 490px; }
.case-entry:nth-child(2n) .case-visual { order: 0; }
.case-info { padding: 44px; }

.case-entry.reveal.in-view .case-visual { animation: photo-reveal 1s var(--ease) both; }
dialog { width: min(1320px, 100% - 112px); max-width: none; max-height: 92vh; }
.modal-head { padding: 25px 36px; }
.detail-overview { display: grid; grid-template-columns: 58% 42%; background: rgb(237, 243, 248); overflow: hidden; }
.detail-overview .modal-img { height: 410px; border-radius: 0px; }
.detail-summary { padding: 32px; }
.detail-summary > span { color: rgb(102, 133, 162); font-size: 15px; }
.detail-summary h3 { font-size: 30px; margin: 17px 0px !important; }
.detail-summary > p { font-size: 18px; margin: 0px; }
.modal-body:has(.contact-form) { max-width: 750px; margin: auto; }
.join-card h3 { font-size: 28px; }
@media (max-width: 1180px) {
dialog { width: calc(100% - 72px); }
.detail-summary { padding: 25px; }
.detail-summary h3 { font-size: 27px; }
}
@media (max-width: 900px) {
.case-info { padding: 30px; }
.case-entry .case-info h3 { font-size: 29px; }
.detail-overview { grid-template-columns: 1fr; }
.detail-overview .modal-img { height: 340px; }
.detail-summary { padding: 25px; }
}
@media (max-width: 650px) {
dialog { width: calc(100% - 24px); max-height: 94vh; }
.modal-head { padding: 18px; }
.modal-head h2 { font-size: 21px; }
.case-entry .case-panel, .case-entry:nth-child(2n) .case-panel { display: flex; flex-direction: column; min-height: 0px; }
.case-entry .case-visual { height: 300px; }
.case-entry .case-info h3 { margin: 0px 0px 22px; }
.detail-overview .modal-img { height: 230px; }
.detail-summary { padding: 23px; }
.detail-summary h3 { font-size: 25px; }
.join-card h3 { font-size: 27px; }
}
.project-tabs { border-bottom: 1px solid rgb(220, 229, 237); }
.project-tabs button[aria-selected="true"] { border-color: rgb(213, 226, 238); }
.project-tabs button:hover { color: rgb(36, 79, 124); }
.case-list { gap: 0px; }
.recommendations { padding-top: 38px; }
.recommendations > h3 { margin: 0px 0px 24px; }
.recommend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.recommend-product { border: 1px solid rgb(227, 234, 240); border-radius: 10px; }
.recommend-art { display: flex; align-items: center; background: linear-gradient(140deg, rgb(237, 240, 242), rgb(227, 233, 237)); }
.recommend-art svg { width: 100%; height: 200px; }
.recommend-copy p { margin: 0px 0px 23px; line-height: 1.8; }
.recommend-copy .textlink { font-size: 15px; margin-top: auto; color: rgb(55, 104, 151); gap: 12px; }
.modal-body { padding: 34px 36px 36px; }
.detail-section { margin-bottom: 40px; }
.detail-section-heading { display: flex; align-items: center; gap: 17px; margin: 0px 0px 22px; }
.detail-section-heading > span { font-size: 15px; color: rgb(126, 154, 186); border: 1px solid rgb(207, 218, 229); padding: 5px 8px; }
.detail-section-heading > h3 { font-size: 25px; margin: 0px !important; }
.detail-consult { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.detail-consult h3 { margin: 0px 0px 9px !important; }
.detail-consult p { font-size: 16px !important; margin: 0px !important; }
.detail-consult .button { white-space: nowrap; }
.detail-overview { border-radius: 10px; }
@media (max-width: 1050px) {
.recommend-product { grid-template-columns: 38% 62%; }
.recommend-copy { padding: 27px 23px; }
.recommend-copy h4 { font-size: 20px; }
}
@media (max-width: 650px) {
.scene-tabs { margin-bottom: 17px; }
.project-tabs { padding-bottom: 17px; margin-bottom: 22px; }
.recommend-grid { grid-template-columns: 1fr; gap: 18px; }
.recommend-product { grid-template-columns: 40% 60%; min-height: 205px; }
.recommend-copy { padding: 24px 19px; }
.recommend-copy h4 { font-size: 19px; }
.recommend-copy p { font-size: 12px; }
.recommend-art svg { height: 155px; }
.recommendations { padding-top: 30px; }
.modal-body { padding: 23px 16px; }
.detail-section { margin-bottom: 30px; }
.detail-section-heading { gap: 12px; margin-bottom: 18px; }
.detail-section-heading > h3 { font-size: 21px; }
.detail-section-heading > span { font-size: 12px; }
.detail-consult { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 23px; }
.detail-consult h3 { font-size: 22px; }
.detail-consult p { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
.project-enter { animation: auto ease 0s 1 normal none running none; }
}
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
.section-top p { margin: 0px; font-size: 19px; color: rgb(120, 144, 164); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 25px; }
.catalog-card { padding: 0px; border: 0px; background: rgb(255, 255, 255); text-align: left; border-radius: 10px; overflow: hidden; transition: box-shadow 0.25s; }
.catalog-art { height: 245px; display: flex; align-items: center; justify-content: center; }
.catalog-copy { position: relative; }
.catalog-copy h3 { padding-right: 15px; }
.catalog-copy p { margin: 0px; }
.catalog-copy i { font-style: normal; position: absolute; right: 22px; top: 23px; font-size: 23px; color: rgb(94, 130, 159); }
.topics-section { background: rgb(255, 255, 255); }
.topic-feature, .topic-small { position: relative; border-radius: 10px; isolation: isolate; }
.topic-feature { min-height: 595px; }
.topic-feature::after, .industry-topic::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(17, 47, 70, 0.93), transparent 85%); z-index: -1; }
.topic-feature > div { position: absolute; bottom: 44px; left: 40px; right: 30px; }
.topic-layout h3 { font-size: 33px; margin: 0px 0px 14px; font-weight: 600; }
.topic-layout p { margin: 0px 0px 27px; color: rgb(211, 224, 235); font-size: 18px; }
.topic-layout span { font-size: 16px; }
.topic-side { gap: 25px; }
.topic-small { min-height: 285px; padding: 35px; }
.topic-small > div:last-child { position: relative; z-index: 1; }
.mineral-topic { background: rgb(231, 229, 221); color: rgb(66, 88, 102); }
.mineral-topic p { color: rgb(113, 129, 138); }
.industry-topic > img { opacity: 0.5; }
.outcomes-section { color: rgb(255, 255, 255); overflow: hidden; }
.outcomes-layout { display: grid; }
.outcomes-copy > p { color: rgb(194, 213, 232); }
.outcome-uses > div { border-left: 2px solid rgb(138, 178, 219); padding-left: 20px; display: flex; flex-direction: column; }
.outcome-uses span { font-size: 16px; color: rgb(186, 208, 230); }
.document-stage { min-width: 0px; }
.back-paper { background: rgb(217, 230, 240); border: 1px solid rgb(174, 198, 220); position: absolute; left: 0px; right: 40px; top: 0px; height: 450px; border-radius: 10px; padding: 25px 30px; color: rgb(56, 94, 126); }
.back-paper > span { font-size: 18px; }
.back-paper h3 { font-size: 23px; margin-top: 22px; font-weight: 500; }
.back-paper p { font-size: 14px; }
.front-paper { position: relative; background: rgb(255, 255, 255); color: rgb(36, 70, 96); border-radius: 10px; padding: 35px; box-shadow: rgba(12, 38, 53, 0.267) 0px 35px 65px; border-top: 5px solid rgb(107, 161, 206); }
.front-paper h3 { font-size: 32px; line-height: 1.5; font-weight: 600; margin: 34px 0px; }
.front-paper dl { margin: 25px 0px; }
.front-paper dl > div { padding: 16px 0px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgb(225, 233, 239); font-size: 14px; }
.front-paper dt { color: rgb(140, 159, 170); }
.front-paper dd { margin: 0px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; }
.detail-grid > .detail-section { margin: 0px; }
.detail-grid .detail-overview { flex: 1 1 0%; }
.nav-links { gap: 19px; }
@media (max-width: 1100px) {
.catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.topic-layout h3 { font-size: 28px; }
.partner-layout { gap: 45px; }
.detail-grid { gap: 22px 17px; }
.detail-grid .detail-overview .modal-img { height: 300px; }
}
@media (max-width: 800px) {
.outcomes-layout, .partner-layout, .topic-layout { grid-template-columns: 1fr; gap: 45px; }
.topic-feature { min-height: 430px; }
.topic-side { grid-template-columns: 1fr 1fr; gap: 20px; }
.topic-small { padding: 25px; }
.topic-layout h3 { font-size: 27px; }
.topic-layout p { font-size: 16px; }
.document-stage { max-width: 530px; width: 100%; margin: auto; }
.detail-grid { grid-template-columns: 1fr; gap: 28px; }
.section-top { align-items: flex-start; flex-direction: column; gap: 17px; }
}
@media (max-width: 650px) {
.catalog-grid { grid-template-columns: 1fr; gap: 20px; }
.catalog-art { height: 240px; }
.catalog-copy h3 { font-size: 24px; }
.section-top { margin-bottom: 30px; }
.section-top p { font-size: 17px; }
.topic-side { grid-template-columns: 1fr; }
.topic-feature { min-height: 430px; }
.topic-feature > div { left: 27px; bottom: 30px; }
.topic-small { min-height: 265px; }
.outcomes-copy > p, .partner-copy > p { font-size: 17px; }
.outcomes-layout { gap: 40px; }
.document-stage { padding: 55px 0px 0px 17px; }
.back-paper { padding: 20px; right: 23px; }
.back-paper h3 { font-size: 21px; }
.front-paper { padding: 25px 23px; }
.front-paper h3 { font-size: 28px; margin: 25px 0px; }
.front-paper dl > div { font-size: 12px; }
.detail-grid .detail-overview .modal-img { height: 230px; }
.detail-grid .detail-summary h3 { font-size: 25px !important; }
}
@media (prefers-reduced-motion: reduce) {
.document-stage.in-view .front-paper { animation: auto ease 0s 1 normal none running none; }
}
@media (min-width: 1101px) {
.catalog-grid:has(> .catalog-card:nth-child(5)) { grid-template-columns: repeat(6, minmax(0px, 1fr)); }
.catalog-grid:has(> .catalog-card:nth-child(5)) > .catalog-card { grid-column: span 2; }
.catalog-grid:has(> .catalog-card:nth-child(5)) > .catalog-card:nth-child(n+4) { grid-column: span 3; }
}
.case-entry .case-info { padding: 46px 42px; justify-content: flex-start; }
.case-entry .case-info h3 { margin: 0px 0px 35px; }
.case-entry .case-info .textlink { border-color: rgb(132, 169, 206); padding-top: 25px; padding-bottom: 12px; }
.case-entry .case-info .arrow { color: rgb(169, 203, 237); }
.resource-section .section-top { margin-bottom: 45px; }
.detail-grid .detail-section-heading > span { border: 0px; padding: 0px; color: rgb(164, 181, 195); font-size: 13px; }
@media (max-width: 1050px) {
.case-entry .case-info { padding: 33px 27px; }
.case-entry .case-info h3 { font-size: 29px; }
}
@media (max-width: 650px) {
.case-entry .case-info { padding: 30px; }
.case-entry .case-info h3 { font-size: 30px; }
.case-entry .case-info .textlink { font-size: 17px; padding-top: 28px; }
.recommendations > h3 { font-size: 22px; line-height: 1.5; }
.company-footer { padding: 48px 0px 23px; }
}
.outcomes-section { background: linear-gradient(120deg, rgb(23, 54, 93) 0%, rgb(36, 89, 136) 52%, rgb(54, 127, 158) 100%); }
.case-entry, .case-panel, .recommend-product, .catalog-card, .topic-feature, .topic-small, .join-card, .service-card, .detail-overview, .detail-consult, dialog, .front-paper, .back-paper, .recommend-art, .modal-img { border: 0px !important; border-radius: var(--radius) !important; }
.recommend-product { cursor: pointer; }
.recommend-product .recommend-art { border-radius: var(--radius) 0 0 var(--radius) !important; }
.recommend-product:focus-visible { outline: rgb(145, 184, 220) solid 3px; outline-offset: 5px; }
.button, .menu, .close, .contact-form input, .contact-form textarea, .contact-form select { border: 0px !important; border-radius: var(--radius) !important; }
.contact-form input, .contact-form textarea, .contact-form select { background: rgb(234, 240, 245); }
.case-entry { box-shadow: none !important; }
.case-panel { overflow: hidden; }
.case-quantity { display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; }
.case-quantity > span { line-height: 1.5; }
.case-quantity > strong { letter-spacing: 0px; }
.case-quantity small { font-weight: 400; margin-left: 4px; }
.case-entry .case-info h3 { margin-bottom: 35px; }
.case-entry .case-info .textlink { margin-top: auto; }
.scene-tabs { gap: 0px; padding: 8px; border-radius: var(--radius); margin-bottom: 25px; border: 0px !important; }
.scene-tab { flex: 1 1 0%; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 23px 25px; background: transparent; min-height: 110px; position: relative; transition: background 0.3s, color 0.3s; border: 0px !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.scene-tab > span { font-weight: 400; line-height: 1; letter-spacing: 1px; }
.scene-tab[aria-selected="true"] { color: rgb(255, 255, 255); }
.scene-tab[aria-selected="true"]::before { position: absolute; right: 23px; top: 21px; font-size: 21px; color: rgb(175, 212, 233); }
.project-tabs { border: 0px; margin-bottom: 25px; align-items: center; flex-wrap: wrap; counter-reset: projects 0; }
.project-tabs button { counter-increment: projects 1; display: flex; align-items: center; gap: 12px; position: relative; border: 0px !important; border-radius: var(--radius) !important; }
.project-tabs button::before { content: counter(projects, decimal-leading-zero); font-size: 12px; color: rgb(154, 173, 188); font-variant-numeric: tabular-nums; }
.project-tabs button[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; background: rgb(57, 124, 166); border-radius: var(--radius); margin-left: 5px; }
.project-tabs button[aria-selected="true"]::before { color: rgb(85, 134, 170); }
.scene-tabs .scene-tab::after { display: none; }
@media (max-width: 1050px) {
.scene-tab { padding: 20px; min-height: 105px; }
.scene-tab > b { font-size: 21px; }
.scene-tab[aria-selected="true"]::before { right: 17px; }
.case-quantity > b { font-size: 21px; }
.case-quantity > strong { font-size: 25px; }
}
@media (max-width: 650px) {
.scene-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; gap: 4px; }
.scene-tab { padding: 17px 18px; min-height: 96px; gap: 10px; }
.scene-tab > span { font-size: 13px; display: block; }
.scene-tab > b { font-size: 19px; }
.scene-tab[aria-selected="true"]::before { font-size: 18px; top: 14px; right: 16px; }
.project-tabs { gap: 7px; }
.project-tabs button { font-size: 14px; padding: 12px 13px; gap: 8px; }
.project-tabs button::before { font-size: 10px; }
.project-tabs button[aria-selected="true"]::after { width: 4px; height: 4px; margin-left: 1px; }
.case-entry .case-info { min-height: 320px; }
.case-entry .case-info h3 { margin-bottom: 24px; }
.case-quantity { gap: 9px; }
.case-quantity > span { font-size: 15px; }
.case-quantity > b { font-size: 20px; }
.case-quantity > strong { font-size: 25px; }
.case-quantity small { font-size: 19px; }
}
.brand-mark { border-radius: var(--radius) !important; border: 0px !important; }
.project-tabs button::before { display: none !important; }
.outcomes-copy > p { font-size: 21px; max-width: 360px; line-height: 1.8; margin: 26px 0px 34px; }
.outcome-uses { flex-wrap: wrap; margin-bottom: 40px; }
.outcome-uses > div { border: 0px; border-radius: 10px; }
.outcomes-section { padding-top: 110px; padding-bottom: 110px; }
.document-stage .back-paper { padding: 0px; background: transparent; }
.document-stage .front-paper { padding: 0px; background: transparent; box-shadow: rgba(16, 43, 71, 0.25) 0px 35px 70px; }
.document-stage .front-paper dl { margin: 0px; }
@media (max-width: 1050px) {
.outcomes-layout { gap: 45px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 750px) {
.outcomes-copy > p { max-width: none; font-size: 18px; }
.document-stage { max-width: 540px; margin: auto; padding-left: 16px; }
.document-stage .back-paper { right: 24px; }
.outcome-uses { gap: 8px; }
.outcome-uses > div { padding: 11px 13px; }
}
.outcome-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.outcome-uses > div { padding: 23px 12px; align-items: center; gap: 17px; text-align: center; }
.outcome-uses svg { width: 33px; height: 33px; }
.outcome-uses b { white-space: nowrap; }
.resource-section { background: linear-gradient(120deg, rgb(27, 66, 108) 0%, rgb(42, 102, 152) 62%, rgb(59, 137, 173) 100%); }
.resource-section .section-title { color: rgb(255, 255, 255); }
.resource-section .catalog-card { box-shadow: rgba(16, 49, 77, 0.086) 0px 14px 35px; }
.resource-section .catalog-copy { background: rgb(247, 250, 252); }
@media (max-width: 1100px) {
.outcomes-layout { grid-template-columns: 1fr 1fr; }
.outcome-uses { gap: 7px; }
}
.project-tabs { max-width: 100%; border-radius: 10px; }
.project-tabs button { transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.project-tabs button::after { display: none !important; }
.project-tabs button:hover { background: rgb(224, 234, 242); }
.case-quantity { gap: 5px; }
.case-quantity > b { line-height: 1.45; }
.case-quantity > strong { line-height: 1.4; margin-top: 4px; }
.case-quantity > span { margin-bottom: 6px; }
.outcomes-copy .section-title { max-width: 560px; }
.detail-grid { align-items: stretch; grid-template-rows: auto auto; }
.detail-grid > .detail-section { display: flex; flex-direction: column; min-width: 0px; }
.detail-grid > .detail-section > .detail-overview { flex: 1 1 0%; box-shadow: none; height: auto !important; background: rgb(255, 255, 255) !important; }
.detail-grid .detail-overview { display: flex; flex-direction: column; }
.detail-grid .detail-summary { background: rgb(255, 255, 255); flex: 1 1 0%; }
.detail-consult { color: white; }
.detail-consult h3 { color: white !important; }
.document-stage { padding-top: 100px; }
@media (max-width: 750px) {
.project-tabs { display: flex; }
.project-tabs button { padding: 13px 15px; }
.company-footer { padding-top: 42px; }
.detail-consult { padding: 25px !important; }
}
.project-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); width: 100%; gap: 5px; }
.project-tabs button { width: 100%; min-width: 0px; justify-content: center; white-space: normal; line-height: 1.5; padding: 12px 16px; }
.project-dialog { background: rgb(220, 228, 235) !important; }
.modal-body:has(.detail-grid) { background: rgb(220, 228, 235); }
.detail-grid { gap: 24px; }
.detail-grid .detail-section-heading { margin-bottom: 12px; align-items: baseline; gap: 10px; }
.detail-section-heading small { font-weight: 400; }
.detail-grid .detail-overview .modal-img { overflow: hidden; }
.detail-grid .detail-overview .modal-img img { border-radius: 10px 10px 0px 0px !important; }
.detail-grid .detail-summary h3 { margin-bottom: 12px; }
.detail-consult { margin-top: 24px !important; padding: 26px 30px !important; }
.report-switch { display: flex; justify-content: flex-end; }
.report-switch button { border: 0px; border-radius: 10px; }
.document-stage { isolation: isolate; }
.document-stage .front-paper, .document-stage .back-paper { cursor: pointer; }
@media (max-width: 750px) {
.project-tabs { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.project-tabs button { min-height: 58px; }
.report-switch { justify-content: flex-start; margin-bottom: 30px; }
.detail-grid .detail-section-heading > h3 { font-size: 21px; }
.detail-section-heading small { font-size: 11px; }
}
#progress, .progress { display: none !important; }
.id-main { align-items: center; gap: 20px; }
.id-main h3 { line-height: 1.5; margin: 0px 0px 7px; }
.id-main p { font-size: 14px; margin: 0px !important; }
.detail-section-heading > svg { width: 23px; height: 23px; flex: 0 0 auto; color: rgb(48, 95, 123); }
@media (max-width: 1100px) {
.id-main { gap: 12px; }
.id-main h3 { font-size: 20px !important; }
}
@media (max-width: 750px) {
.detail-section-heading > svg { width: 20px; height: 20px; }
}
.nav-action .account { padding: 13px 22px; border-radius: 10px; display: inline-flex !important; border: 0px !important; }
.scene-tab[aria-selected="true"]::before { content: "→" !important; }
.case-photo, .modal-img, .topic-feature, .topic-small { background: linear-gradient(135deg, rgb(213, 225, 232), rgb(183, 203, 216)); }
.id-main { position: relative; }
.id-main > div { min-width: 0px; }
.id-main h3 { font-size: 22px !important; }
.id-chain { position: absolute; right: 0px; }
@media (max-width: 750px) {
.nav-action .account { padding: 11px 13px; }
}
.scene-tab[aria-selected="true"]::before { display: none; }
.detail-section-heading > svg { display: none; }
.id-chain { width: 85px; height: 85px; top: -4px; color: rgb(18, 63, 52); opacity: 0.27; stroke-width: 1.5; }
.catalog-grid, .catalog-grid:has(> .catalog-card:nth-child(5)) { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
.catalog-grid > .catalog-card, .catalog-grid:has(> .catalog-card:nth-child(5)) > .catalog-card { grid-column: auto !important; }
.report-switch { margin-bottom: 16px; }
.document-stage .back-paper { height: 520px; }
@media (max-width: 1100px) {
.catalog-grid, .catalog-grid:has(> .catalog-card:nth-child(5)) { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
}
@media (max-width: 750px) {
.catalog-grid, .catalog-grid:has(> .catalog-card:nth-child(5)) { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
.catalog-copy h3 { line-height: 1.5; }
.id-chain { width: 70px; height: 70px; }
}
:root { --site-blue: #2459b3; --site-gradient: linear-gradient(
          120deg,
          #163961 0%,
          #23588b 62%,
          #3981ae 100%
        ); --site-ink: #273440; --site-text: #485662; --site-muted: #6d7883; --site-soft: #eef1f5; --site-paper: #f7f8fa; --site-white: #fff; --site-on-dark: #cbd9e8; --platform-gradient: var(--site-gradient); }
body { color: var(--site-ink); background: white; }
.section-title { font-size: 40px; letter-spacing: 0px; color: var(--site-ink); }
.section { padding-top: 85px; padding-bottom: 85px; }
.head, .section-top { margin-bottom: 36px; }
.nav-shell { background: rgba(255, 255, 255, 0.937); border: 0px; }
.brand-name { color: var(--site-ink); font-size: 17px; }
.nav-links { font-size: 14px; color: var(--site-text); }
.nav-links a:hover { color: var(--site-blue); }
.nav-action .account { font-size: 14px; font-weight: 500; background: var(--site-blue) !important; color: white !important; }
.nav-action .console {font-size: 14px;
  font-weight: 500;
  color: var(--site-blue) !important; cursor: pointer; 
  border :solid 1px var(--site-blue) !important;
  line-height: 1.5;
  min-height: 45px;
  padding: 10px 25px;
  border-radius: 10px;
}
.button { background: var(--site-blue); color: white; font-size: 16px; line-height: 1.5; font-weight: 500; padding: 15px 25px; min-height: 52px; box-shadow: none; }
.button:hover { background: rgb(30, 77, 155); }
.button.secondary { background: rgb(231, 237, 248); color: var(--site-blue); }
.hero h1 { font-weight: 600; }
.hero h1 span { color: rgb(153, 197, 255); }
.hero p { color: var(--site-on-dark); font-size: 18px; line-height: 1.85; }
.hero .button { background: white; color: var(--site-blue); }
.hero .button.secondary { background: rgba(255, 255, 255, 0.094); color: white; }
.textlink { font-weight: 500; font-size: 15px; }
.case-section, .topics-section { background: white; }
.scene-tabs { background: var(--site-soft); }
.scene-tab { color: var(--site-text); }
.scene-tab > span { color: var(--site-muted); font-size: 14px; }
.scene-tab > b { font-size: 22px; font-weight: 500; }
.scene-tab[aria-selected="true"] { background: var(--site-gradient); }
.scene-tab[aria-selected="true"] > span { color: var(--site-on-dark); }
.scene-tab:hover:not([aria-selected="true"]) { background: rgb(226, 230, 236); }
.project-tabs button { font-size: 15px; color: var(--site-text); background: transparent; }
.case-entry .case-info { color: white; background: var(--site-gradient) !important; }
.case-entry .case-info h3 { color: white; font-size: 32px; font-weight: 500; line-height: 1.5; }
.case-quantity > span { color: var(--site-on-dark); font-size: 14px; }
.case-quantity > b { color: white; font-size: 22px; font-weight: 500; }
.case-quantity > strong { color: white; font-size: 25px; font-weight: 500; }
.case-quantity small { color: var(--site-on-dark); font-size: 18px; }
.case-visual, .modal-img { background: var(--site-soft) !important; }
.recommendations > h3 { font-size: 22px; font-weight: 500; color: var(--site-ink); }
.recommend-product { background: var(--site-paper) !important; }
.recommend-product .recommend-art { background: rgb(232, 236, 240) !important; }
.recommend-copy p { color: var(--site-muted); font-size: 14px !important; }
.recommend-copy button { color: var(--site-blue); font-size: 14px; }
.resource-section, .outcomes-section { background: var(--site-gradient) !important; }
.resource-section .section-title, .outcomes-section .section-title { color: white; }
.catalog-copy { background: rgb(255, 255, 255) !important; }
.catalog-copy > span { color: var(--site-muted); font-size: 13px; }
.catalog-copy h3 { color: var(--site-ink); }
.catalog-copy p { color: var(--site-muted); font-size: 15px; line-height: 1.7; }
.catalog-art { background: var(--site-soft) !important; }
.topic-feature::after, .topic-small::after { background: none !important; }
.topic-feature h3, .topic-small h3 { color: var(--site-ink); font-weight: 500; }
.topic-feature p, .topic-small p { color: var(--site-muted); }
.topic-feature span, .topic-small span { color: var(--site-blue); }
.topic-feature > div, .topic-small > div:last-child { color: var(--site-ink); background: transparent !important; }
.outcome-uses > div { background: rgba(255, 255, 255, 0.07); }
.outcome-uses svg { color: var(--site-on-dark); }
.outcome-uses b { color: white; }
.outcome-action .button { background: white; color: var(--site-blue); }
.report-switch button { color: var(--site-on-dark); }
dialog { background: rgb(220, 226, 233); }
.modal-head { background: white; border: 0px; }
.modal-head h2 { font-size: 22px; font-weight: 500; color: var(--site-ink); }
.modal-body { background: var(--site-soft); }
.detail-grid .detail-section-heading > h3 { font-size: 18px; font-weight: 400; color: var(--site-text); }
.detail-section-heading small { color: var(--site-text); font-size: 12px; }
.detail-grid .detail-summary h3 { color: var(--site-ink); }
.detail-summary p { color: var(--site-muted); }
.id-main { width: 100%; display: block; }
.id-main > div { width: 100%; }
.id-main h3 { max-width: 100%; white-space: nowrap; }
.detail-consult { background: var(--site-gradient) !important; }
.detail-consult h3 { font-size: 23px !important; font-weight: 500; }
.detail-consult p { color: var(--site-on-dark) !important; font-size: 14px; }
.detail-consult .button { background: white; color: var(--site-blue); }
.close { background: rgb(230, 235, 241); color: var(--site-text); }
.contact-form label { color: var(--site-text); font-size: 14px; }
.contact-form input, .contact-form textarea { background: white; color: var(--site-ink); }
.company-footer { padding: 0px; color: white; background: var(--site-gradient) !important; }
.footer-platform { line-height: 1.5; letter-spacing: 0px; color: white; }
.footer-company strong { font-size: 16px; font-weight: 400; color: rgb(237, 243, 250); }
.footer-company address { font-size: 14px; font-style: normal; color: var(--site-on-dark); line-height: 1.8; }
.footer-directory nav { display: grid; grid-template-columns: 80px 1fr; gap: 18px; align-items: baseline; }
.footer-directory h3 { font-size: 12px; color: var(--site-on-dark); font-weight: 400; margin: 0px; }
.footer-directory nav > div { display: flex; flex-wrap: wrap; gap: 9px 23px; }
.footer-directory a { font-size: 12px; color: rgb(215, 227, 239); line-height: 1.8; }
.footer-directory a:hover { color: white; }
.footer-directory a span { display: none; }
.footer-legal { display: flex; line-height: 1.6; }
@media (max-width: 1100px) {
.section-title, .outcomes-copy .section-title, .partner-copy .section-title { font-size: 34px; }
.brand-name { font-size: 15px; }
.case-entry .case-info h3 { font-size: 28px; }
.catalog-copy h3 { font-size: 21px; }
.footer-primary { gap: 30px; }
}
@media (max-width: 750px) {
.section { padding: 60px 0px; }
.section-title, .outcomes-copy .section-title, .partner-copy .section-title { font-size: 29px; }
.brand-name { font-size: 13px; }
.nav-action .account { font-size: 12px; }
.hero p { font-size: 15px; }
.scene-tab > b { font-size: 19px; }
.scene-tab > span { font-size: 12px; }
.project-tabs button { font-size: 13px; }
.case-entry .case-info h3 { font-size: 27px; }
.case-quantity > b { font-size: 20px; }
.case-quantity > span { font-size: 13px; }
.catalog-copy h3 { font-size: 19px !important; }
.catalog-copy p { font-size: 13px !important; }
.catalog-copy > span { font-size: 12px; }
.recommendations > h3 { font-size: 20px; }
.recommend-copy p { font-size: 13px !important; }
.partner-copy > p { font-size: 15px; }
.footer-platform { line-height: 1.6; white-space: normal; }
.footer-company strong { font-size: 14px; }
.footer-company address { font-size: 12px; }
.footer-directory nav { grid-template-columns: 1fr; gap: 12px; }
.footer-directory nav > div { gap: 8px 18px; }
.footer-directory a { font-size: 11px; }
.footer-legal { font-size: 10px; gap: 18px; }
.detail-consult h3 { font-size: 20px !important; }
.detail-consult p { font-size: 13px; }
.id-main h3 { font-size: 20px !important; }
}
@media (max-width: 380px) {
.footer-platform { font-size: 20px; }
.brand-name { font-size: 12px; }
.catalog-copy h3 { font-size: 17px !important; }
.section-title { font-size: 26px; }
.footer-directory nav > div { gap: 8px 15px; }
}
button, input, textarea, select, .case-entry, .case-panel, .recommend-product, .catalog-card, .catalog-art, .topic-feature, .topic-small, .outcome-uses > div, .report-switch, .report-switch button, .detail-overview, .detail-consult, .footer-route, dialog { border-radius: var(--radius) !important; }
.scene-tabs, .scene-tab, .project-tabs, .project-tabs button, .brand-mark, .close { border-radius: var(--radius) !important; }
.case-visual { border-radius: 10px 0px 0px 10px !important; }
.case-info { border-radius: 0px 10px 10px 0px !important; }
.modal-img, .detail-grid .detail-overview .modal-img { border-radius: 10px 10px 0px 0px !important; }
.detail-summary { border-radius: 0px 0px 10px 10px !important; }
.recommend-art { border-radius: 10px 0px 0px 10px !important; }
.catalog-art { border-radius: 10px 10px 0px 0px !important; }
.catalog-copy { border-radius: 0px 0px 10px 10px !important; }
.action-circle { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 16px; background: currentcolor; position: relative; }
.action-circle svg { width: 15px; height: 15px; stroke: var(--arrow-ink, #fff); position: relative; }
.hero .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 0px; --arrow-ink: white; }
.hero .button.secondary { --arrow-ink: var(--site-blue); }
.hero .button.secondary .action-circle { background: rgb(255, 255, 255); }
.hero .button .arrow { display: none; }
.hero .button { min-width: 195px; }
.hero-actions { gap: 14px; }
.project-tabs { padding: 5px; background: rgb(237, 241, 245); }
.project-tabs button { min-height: 52px; }
.project-tabs button:hover:not([aria-selected="true"]) { background: rgb(225, 232, 240); }
.case-entry .case-info .textlink { display: inline-flex; align-items: center; justify-content: space-between; align-self: flex-start; gap: 22px; min-height: 54px; border-radius: 10px; font-size: 15px; box-shadow: rgba(19, 47, 79, 0.08) 0px 8px 24px; background: white !important; color: var(--site-blue) !important; border: 0px !important; padding: 15px 20px !important; }
.case-entry .case-info .textlink .arrow { display: none; }
.case-entry .case-info .textlink::after { content: "+"; font-size: 24px; font-weight: 300; line-height: 1; color: var(--site-blue); }
.case-entry .case-info .textlink:hover { background: rgb(237, 243, 251) !important; }
.footer-primary { padding: 43px 0px 35px; }
.footer-platform { font-weight: 500; }
.footer-company { flex-wrap: wrap; }
.footer-company strong, .footer-company address { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; margin: 0px; line-height: 1.6; }
.footer-routes { margin-top: 2px; }
.footer-route { display: flex; align-items: center; background: rgba(255, 255, 255, 0.067); color: white; border: 0px; font-weight: 400; text-align: left; gap: 15px; }
.footer-route:first-child { background: white; color: var(--site-blue); }
.footer-route .action-circle { width: 25px; height: 25px; margin: 0px; --arrow-ink: #fff; }
.footer-route:first-child .action-circle { background: rgb(232, 238, 249); --arrow-ink: var(--site-blue); }
.footer-route:hover { background: rgba(255, 255, 255, 0.125); }
.footer-route:first-child:hover { background: rgb(237, 243, 251); }
.footer-directory .wrap { padding-top: 19px; padding-bottom: 21px; }
.outcomes-section { padding: 72px 0px; }
.outcomes-layout { align-items: center; }
.outcome-uses b { font-size: 16px; font-weight: 500; }
.report-stack-wrap { position: relative; padding-top: 0px; justify-self: end; }
.report-switch { position: absolute; top: 0px; right: 8px; z-index: 6; margin: 0px; padding: 4px; gap: 3px; background: rgba(255, 255, 255, 0.07); }
.report-switch button { font-size: 12px; padding: 9px 13px; background: transparent; min-height: 36px; }
.report-switch button[aria-pressed="true"] { background: white; color: var(--site-blue); }
.document-stage { position: relative; }
.document-stage .front-paper { z-index: 2; }
.document-stage.in-view .front-paper { animation: auto ease 0s 1 normal none running none !important; }
.document-stage .back-paper { right: 34px; top: 58px; z-index: 1; }
.document-stage.source-front .back-paper { right: 8px; filter: none; }
.document-stage.source-front .front-paper { right: 34px; filter: none; }
.id-main p { color: rgb(196, 216, 208) !important; }
.id-chain { display: none; }
.card-watermark { stroke-width: 1.2; position: absolute !important; right: 25px !important; top: 35px !important; color: rgb(10, 41, 72) !important; }
.id-main { padding-right: 94px; }
.detail-grid .detail-overview .modal-img { background: rgb(232, 237, 243) !important; }
.detail-grid .detail-summary { display: flex; flex-direction: column; gap: 0px; }
.detail-grid .detail-summary h3 { font-weight: 500; line-height: 1.5; font-size: 24px !important; }
.project-amount b { font-size: 25px; font-weight: 400; white-space: nowrap; }
.project-amount small { font-size: 13px; margin-left: 5px; font-weight: 400; }
.detail-grid .detail-overview { background: white !important; }
dialog.contact-dialog { max-height: calc(-40px + 100svh); border-radius: 10px !important; }
.contact-dialog .modal-head { border: 0px; box-shadow: none; position: relative; background: rgb(255, 255, 255) !important; }
.contact-dialog .modal-head h2 { font-size: 16px; font-weight: 400; color: rgb(109, 120, 131); }
.contact-dialog .close { background: rgb(240, 243, 247); }
.contact-layout { display: grid; }
.contact-intro { padding-top: 4px; }
.contact-intro h3 { margin: 0px 0px 18px; }
.contact-intro p { margin: 0px; }
.contact-dialog .contact-form { display: grid; grid-template-columns: 1fr 1fr; margin: 0px; }
.contact-dialog .contact-form label { display: flex; flex-direction: column; line-height: 1.6; }
.contact-dialog input, .contact-dialog textarea { border: 0px; box-shadow: none; width: 100%; min-width: 0px; border-radius: 10px !important; }
.contact-dialog input:focus, .contact-dialog textarea:focus { outline: rgb(184, 204, 228) solid 2px; outline-offset: 2px; }
.contact-dialog textarea { resize: vertical; }
.contact-dialog .form-actions .button { display: flex; justify-content: space-between; align-items: center; }
.contact-dialog .form-actions .action-circle { margin: 0px; background: rgba(255, 255, 255, 0.125); --arrow-ink: white; }
.contact-dialog .status { font-size: 12px; color: rgb(73, 100, 126); line-height: 1.8; min-height: 0px; margin: 0px; }
@media (max-width: 1100px) {
.outcomes-layout { gap: 35px; }
.outcomes-copy .section-title { font-size: 32px; }
.outcome-uses b { font-size: 13px; }
.detail-grid .detail-summary { padding: 23px; }
.detail-grid .detail-summary h3 { font-size: 22px !important; }
.project-amount b { font-size: 23px; }
.card-watermark { width: 72px !important; height: 72px !important; right: 18px !important; }
}
@media (max-width: 750px) {
.hero .button { min-width: 165px; }
.action-circle { width: 23px; height: 23px; margin-left: 12px; }
.hero-actions { gap: 10px; }
.case-visual { border-radius: 10px 10px 0px 0px !important; }
.case-info { border-radius: 0px 0px 10px 10px !important; }
.footer-primary { padding: 34px 0px 28px; }
.footer-company strong, .footer-company address { font-size: 12px; align-items: flex-start; }
.footer-company svg { margin-top: 2px; }
.footer-route { gap: 10px; }
.footer-route .action-circle { width: 22px; height: 22px; }
.outcomes-section { padding: 58px 0px; }
.outcome-uses b { font-size: 13px; }
.report-stack-wrap { justify-self: center; max-width: 520px; }
.report-switch { right: 4px; }
.detail-grid .detail-summary { padding: 24px; }
.detail-grid .detail-summary h3 { font-size: 22px !important; }
.project-amount b { font-size: 25px; }
.id-main { padding-right: 80px; }
}
@media (max-width: 420px) {
.hero .button { min-width: 150px; padding: 13px 15px; }
.report-switch button { font-size: 11px; padding: 8px 11px; }
.project-amount b { font-size: 22px; }
.detail-grid .detail-summary h3 { font-size: 20px !important; }
.detail-grid .detail-summary { padding: 21px; }
.id-main { padding-right: 67px; }
}
.id-main { min-height: 77px; }
.card-watermark { width: 88px !important; height: 88px !important; opacity: 0.18 !important; }
.outcome-action .button { min-height: 57px; display: flex; align-items: center; justify-content: center; }
.footer-platform { grid-area: 1 / 1; }
.footer-routes { margin: 0px; }
.footer-route { min-width: 185px; padding: 15px 20px; font-size: 16px; }
.footer-company { grid-area: 2 / 1 / auto / -1; }
.footer-company strong, .footer-company address, .footer-company .footer-inline-phone { font-weight: 400; color: white; }
.footer-company .footer-inline-phone { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.footer-company svg { color: white; width: 18px; height: 18px; flex: 0 0 auto; }
.footer-inline-phone:hover { text-underline-offset: 4px; }
dialog.contact-dialog { width: min(1320px, -64px + 100vw); max-width: none; background: rgb(255, 255, 255) !important; }
.contact-dialog .modal-body { background: white !important; }
.contact-intro { padding: 10px 0px 0px; display: flex; flex-direction: column; position: relative; min-width: 0px; }
.contact-intro h3 { font-size: 36px; font-weight: 500; line-height: 1.5; margin-bottom: 19px; color: rgb(34, 61, 88); }
.contact-intro p { font-size: 15px; line-height: 1.9; color: rgb(120, 134, 150); max-width: 320px; }
.contact-benefits { margin-top: auto; }
.contact-benefits span { display: flex; align-items: center; gap: 7px; }
.contact-benefits span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.contact-dialog .contact-form { align-content: start; }
.contact-dialog .contact-form label { font-size: 13px; color: rgb(101, 123, 144); gap: 9px; }
.contact-dialog input, .contact-dialog textarea { padding: 15px 17px; background: rgb(243, 246, 249) !important; }
.contact-purpose { grid-column: 1 / -1; border: 0px; min-width: 0px; }
.contact-purpose legend { color: rgb(101, 123, 144); padding: 0px; }
.contact-purpose > div { flex-wrap: wrap; }
.contact-dialog .contact-purpose label { display: block; position: relative; font-size: 13px; cursor: pointer; }
.contact-purpose input { position: absolute; opacity: 0; height: 1px; min-height: 0px; padding: 0px; width: 1px !important; }
.contact-purpose span { display: block; border-radius: 10px; transition: background 0.2s, color 0.2s; }
@media (max-width: 1100px) {
.footer-route { min-width: 155px; font-size: 14px; padding: 14px 17px; }
.footer-platform { font-size: 24px; }
.footer-company { gap: 12px 23px; }
.contact-dialog .modal-body { padding: 30px 35px 38px; }
.contact-intro h3 { font-size: 31px; }
}
@media (max-width: 750px) {
.footer-platform { grid-area: 1 / 1; }
.footer-company { grid-area: 2 / 1; align-items: flex-start; flex-direction: column; }
.footer-routes { justify-content: flex-start; }
.footer-route { min-width: 0px; padding: 15px 17px; }
.footer-company strong, .footer-company address, .footer-company .footer-inline-phone { font-size: 12px; }
.footer-company svg { width: 16px; height: 16px; }
.outcome-action .button { min-height: 53px; }
.contact-intro { padding: 0px; }
.contact-intro h3 { font-size: 29px; margin-bottom: 10px; }
.contact-intro p { font-size: 13px; max-width: none; }
.contact-benefits { gap: 17px; font-size: 11px; }
.contact-dialog .contact-form label { font-size: 12px; }
.contact-dialog input, .contact-dialog textarea { padding: 14px 15px; }
.contact-purpose span { padding: 10px 13px; }
.contact-dialog .form-actions .button { font-size: 14px; }
dialog.contact-dialog { width: calc(-30px + 100vw); max-height: calc(-30px + 100svh); }
}
@media (max-width: 420px) {
.contact-dialog .modal-head { padding: 18px 20px 0px; }
.contact-dialog .contact-form { grid-template-columns: 1fr; }
.contact-dialog .contact-form .full { grid-column: 1; }
.contact-intro h3 { font-size: 27px; }
.contact-benefits { gap: 12px; font-size: 10px; }
.footer-route { font-size: 13px; padding: 14px; }
}
.contact-dialog .modal-body:has(.contact-form) { max-width: none; width: 100%; margin: 0px; }
.contact-dialog .contact-intro h3 { margin: 0px 0px 18px; }
.contact-dialog .contact-intro p { margin: 0px; }
@media (max-width: 750px) {
.contact-dialog .contact-intro h3 { margin-bottom: 10px; }
}
.project-tabs button[aria-selected="true"] { background: rgb(84, 115, 138) !important; color: rgb(255, 255, 255) !important; font-weight: 400 !important; box-shadow: none !important; }
.footer-primary { row-gap: 15px; }
.outcome-action .button { width: 100%; padding: 16px 10px; font-size: 14px; white-space: nowrap; }
.outcome-action .action-circle { margin-left: 8px; width: 20px; height: 20px; }
.id-main { margin-top: 21px; }
.contact-dialog .contact-intro { background: var(--site-gradient); border-radius: 10px; }
.contact-dialog .contact-intro h3 { color: rgb(255, 255, 255); }
.contact-dialog .contact-intro p { color: rgb(212, 224, 236); }
.contact-benefits { color: rgb(229, 238, 245); }
.contact-benefits span::before { background: rgb(168, 197, 223); }
.contact-dialog .contact-form label > small { display: inline; align-self: start; margin-top: -8px; }
.contact-dialog .contact-form small, .contact-purpose legend small { font-size: 11px; color: rgb(138, 149, 159); font-weight: 400; margin-left: 6px; }
.contact-purpose > div { display: grid; }
.contact-purpose span { text-align: center; }
@media (max-width: 1100px) {
.contact-dialog .contact-intro h3 { font-size: 28px; }
}
@media (max-width: 750px) {
.footer-primary { row-gap: 16px; }
.outcome-action { width: calc(33.3333% - 4.66667px); }
.outcome-action .button { font-size: 12px; padding: 15px 5px; }
.outcome-action .action-circle { display: none; }
.contact-dialog .contact-intro p { font-size: 13px; }
.contact-dialog .contact-form { padding: 0px; }
}
.case-navigation { border-radius: 10px; margin-bottom: 28px; }
.case-navigation .scene-tabs { margin: 0px !important; border: 0px !important; }
.case-navigation .scene-tab { border: 0px !important; border-radius: 10px !important; box-shadow: none !important; }
.case-navigation .scene-tab[aria-selected="true"] { background: var(--site-gradient) !important; color: rgb(255, 255, 255) !important; }
.case-navigation .scene-tab::after { display: none !important; }
.case-navigation .scene-tab[aria-selected="true"] span, .case-navigation .scene-tab[aria-selected="true"] b { color: rgb(255, 255, 255) !important; }
.case-navigation .project-tabs button { font-weight: 400 !important; padding: 17px 12px !important; }
.footer-primary { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.footer-summary { min-width: 0px; }
.footer-platform { margin: 0px 0px 17px !important; }
.footer-company { display: flex; flex-direction: column !important; align-items: flex-start !important; margin: 0px !important; }
.footer-company strong, .footer-company address, .footer-company .footer-inline-phone { font-size: 14px; }
.footer-routes { grid-area: 1 / 2; align-self: stretch; display: grid; grid-template-columns: 1fr; gap: 12px; }
.footer-route { min-height: 68px; justify-content: space-between; }
.footer-inline-phone:hover { text-decoration: none !important; }
.contact-dialog .contact-form .field-caption { display: flex; align-items: baseline; gap: 7px; }
.contact-dialog .contact-form .field-caption small { display: inline; margin: 0px; }
.contact-dialog input { padding: 12px 15px; margin-top: 0px; }
.contact-dialog textarea { margin-top: 0px; }
.contact-purpose > div { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.contact-purpose span { font-size: 12px; }
.contact-dialog .form-actions { margin: 3px 0px 0px; }
.contact-dialog .status:empty { display: none; }
@media (max-width: 1100px) {
.contact-purpose > div { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.contact-purpose span { font-size: 11px; }
.footer-routes { min-width: 200px; }
.footer-company strong, .footer-company address, .footer-company .footer-inline-phone { font-size: 13px; }
.contact-layout { gap: 24px; }
.contact-dialog .contact-intro { padding: 28px 22px; }
}
@media (max-width: 750px) {
.case-navigation .scene-tab { font-size: 14px; }
.case-navigation .project-tabs { padding: 6px; }
.footer-primary { grid-template-columns: 1fr; gap: 25px; }
.footer-platform { margin-bottom: 15px !important; }
.footer-routes { grid-area: 2 / 1; grid-template-columns: 1fr 1fr; }
.footer-route { min-height: 63px; }
.footer-company { gap: 7px !important; }
.contact-purpose > div { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.contact-purpose span { font-size: 12px; }
}
.footer-routes { min-width: 195px; }
.case-navigation { padding: 8px; }
.case-navigation .scene-tabs { background: transparent !important; padding: 0px !important; gap: 8px !important; }
.case-navigation .scene-tab { background: transparent !important; padding: 20px 18px !important; }
.case-navigation .project-tabs { border-radius: 0px; background: transparent !important; padding: 12px 0px 0px !important; margin: 8px 0px 0px !important; }
.case-navigation .project-tabs button { background: transparent !important; }
.contact-dialog .modal-head { padding: 22px 30px 0px; }
.contact-layout { grid-template-columns: minmax(0px, 0.64fr) minmax(0px, 1.36fr); }
.contact-dialog .contact-intro p { max-width: 270px; }
.contact-dialog .contact-form > label { color: rgb(82, 100, 119); }
.contact-dialog input { min-height: 49px; background: rgb(241, 244, 247) !important; }
.contact-dialog textarea { background: rgb(241, 244, 247) !important; }
.contact-purpose span { padding: 13px 5px; background: rgb(241, 244, 247); color: rgb(97, 120, 141); }
@media (max-width: 750px) {
.footer-routes { display: flex; min-width: 0px; gap: 10px; }
.footer-route { flex: 0 0 auto; font-size: 13px; }
.case-navigation .scene-tab { padding: 15px 7px !important; }
.case-navigation .project-tabs { padding-top: 10px !important; }
.contact-layout { grid-template-columns: 1fr; }
.contact-dialog .contact-intro p { max-width: none; }
.contact-dialog .modal-head { padding: 20px 22px 0px; }
.contact-dialog .contact-form { gap: 16px 13px; }
}
@media (max-width: 420px) {
.footer-routes { flex-wrap: wrap; }
.contact-dialog .modal-body { padding: 19px; }
.contact-purpose span { padding: 12px 5px; }
}
.case-navigation .project-tabs button { color: var(--site-text) !important; }
.project-dialog .detail-grid { gap: 26px; }
.project-dialog .detail-section-heading { margin: 0px 0px 13px; min-height: 25px; }
.project-dialog .detail-section-heading h3 { font-size: 17px !important; letter-spacing: 0.5px; }
.project-dialog .detail-section-heading small { margin-left: 10px; color: rgb(52, 65, 77); }
.project-dialog .detail-overview { box-shadow: rgba(36, 56, 74, 0.03) 0px 9px 25px; overflow: hidden; }
.project-dialog .detail-summary h3 { line-height: 1.5; font-size: 24px !important; margin: 0px 0px 23px !important; }
.project-dialog .project-amount b { font-weight: 400; }
.project-dialog .detail-consult { padding: 27px 30px; margin-top: 28px; gap: 25px; align-items: center; }
.project-dialog .detail-consult h3 { font-size: 23px !important; margin: 0px 0px 8px !important; }
.project-dialog .detail-consult p { font-size: 14px; color: rgb(214, 225, 235); margin: 0px !important; }
.project-dialog .detail-consult .button { min-height: 54px; white-space: nowrap; }
@media (max-width: 750px) {
.project-dialog .detail-grid { gap: 23px; }
.project-dialog .detail-summary { padding: 23px; }
.project-dialog .detail-summary h3 { font-size: 21px !important; }
.project-dialog .detail-consult { padding: 24px; align-items: flex-start; flex-direction: column; gap: 19px; }
.project-dialog .detail-consult h3 { font-size: 21px !important; }
}
@media (max-width: 420px) {
.project-dialog .project-amount b { font-size: 25px; }
}
.case-navigation .project-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 8px !important; }
.case-navigation .project-tabs button { min-width: 0px; justify-content: center; font-size: 14px; width: 100% !important; flex: 0 0 auto !important; }
.recommend-product { grid-template-columns: 42% minmax(0px, 1fr); min-height: 250px; overflow: hidden; display: grid !important; padding: 0px !important; gap: 0px !important; }
.recommend-product .recommend-art { width: 100%; padding: 28px 18px; display: flex; align-items: center; justify-content: center; }
.recommend-product .recommend-art svg { width: 100%; height: auto; max-height: 190px; }
.recommend-copy { padding: 25px 26px; min-width: 0px; display: flex; flex-direction: column; align-items: flex-start; }
.product-use { font-size: 12px; color: rgb(109, 120, 131); line-height: 1.6; }
.recommend-copy h4 { font-weight: 500; color: var(--site-ink); }
.product-material { line-height: 1.7; color: var(--site-text); overflow-wrap: anywhere; font-size: 13px !important; margin: 0px 0px 20px !important; }
.product-material > span { display: block; font-size: 11px; color: var(--site-muted); margin-bottom: 5px; }
.product-detail-button { align-items: center; justify-content: space-between; gap: 25px; min-height: 42px; margin-top: auto; padding: 10px 14px; background: white; color: var(--site-blue); font-size: 13px; white-space: nowrap; border: 0px !important; display: inline-flex !important; }
.detail-plus { font-size: 20px; font-weight: 300; line-height: 1; }
.catalog-detail-label { display: flex; align-items: center; margin-top: auto; }
.catalog-detail-label > span { font-size: 21px; font-weight: 300; line-height: 1; }
@media (max-width: 1100px) {
.recommend-product { grid-template-columns: 38% minmax(0px, 1fr); }
.recommend-copy { padding: 22px 20px; }
.recommend-copy h4 { font-size: 20px !important; }
.case-navigation .project-tabs button { font-size: 12px; padding: 15px 6px !important; }
}
@media (max-width: 750px) {
.case-navigation .project-tabs { gap: 4px !important; }
.case-navigation .project-tabs button { font-size: 11px; line-height: 1.6; min-height: 64px; padding: 12px 4px !important; }
.recommend-product { min-height: 225px; grid-template-columns: 36% minmax(0px, 1fr); }
.recommend-product .recommend-art { padding: 15px; }
.recommend-copy { padding: 21px; }
.recommend-copy h4 { font-size: 21px !important; }
.catalog-copy { min-height: 225px; }
.catalog-copy .product-material { font-size: 12px !important; }
}
@media (max-width: 420px) {
.recommend-copy { padding: 18px; }
.recommend-copy h4 { font-size: 19px !important; }
.product-material { font-size: 12px !important; }
}
@media (min-width: 751px) {
.contact-dialog .contact-intro p { white-space: nowrap; max-width: none; font-size: 12px; letter-spacing: -0.2px; }
.contact-dialog .contact-intro { padding-left: 23px; padding-right: 23px; }
}
.catalog-copy > span:first-child { letter-spacing: 0.3px; color: rgb(113, 128, 141); }
.catalog-copy h3 { font-weight: 500; }
.catalog-copy .product-material { color: rgb(89, 103, 115); margin-bottom: 24px !important; }
.catalog-detail-label { background: rgb(231, 237, 244); color: rgb(40, 88, 140); min-height: 40px; padding: 10px 14px; gap: 25px; border-radius: 10px; font-size: 13px; }
.recommend-copy .product-material { margin-top: 0px !important; color: rgb(102, 117, 128); }
.product-full { display: grid; }
.product-display { background: linear-gradient(145deg, rgb(230, 236, 238), rgb(212, 223, 227)); padding: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-width: 0px; }
.product-display svg { width: 100%; max-width: 360px; height: 240px; }
.product-display > span { font-size: 13px; color: rgb(96, 114, 127); }
.product-information h3 { color: rgb(39, 60, 77); line-height: 1.4; }
.product-specifications { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 24px; margin: 0px; }
.product-specifications > div { border-top: 1px solid rgb(229, 234, 238); }
.product-specifications dt { color: rgb(123, 135, 144); margin-bottom: 7px; }
.product-specifications dd { color: rgb(48, 72, 91); }
.product-identity > h3 { font-weight: 400; font-size: 18px !important; margin: 0px 0px 15px !important; }
.product-connect { display: flex; justify-content: space-between; align-items: center; gap: 22px; background: var(--site-gradient); padding: 25px 30px; border-radius: 10px; }
.product-connect h3 { color: white; font-weight: 400; font-size: 22px !important; margin: 0px !important; }
.product-connect .button { background: white; color: var(--site-blue); font-size: 14px; white-space: nowrap; }
@media (max-width: 750px) {
.catalog-copy { padding: 18px !important; }
.catalog-copy h3 { font-size: 19px; }
.product-display { padding: 25px; min-height: 240px; gap: 15px; }
.product-display svg { height: 180px; }
.product-information { padding: 26px; }
.product-information h3 { font-size: 25px !important; }
.product-connect { padding: 24px; flex-direction: column; align-items: flex-start; }
.product-connect h3 { font-size: 21px !important; }
}
@media (max-width: 420px) {
.catalog-copy { padding: 15px !important; }
.catalog-detail-label { padding: 10px 12px; }
.product-information { padding: 22px; }
.product-specifications { gap: 0px 15px; }
.product-specifications dd { font-size: 13px; }
}
.project-dialog, .modal-body:has(.detail-grid) { background: rgb(201, 210, 219) !important; }
.project-dialog .id-main { padding-right: 125px; }
.contact-dialog input, .contact-dialog textarea { font-weight: 400; line-height: 1.5; font-size: 15px !important; color: rgb(46, 66, 84) !important; }
.contact-dialog input::placeholder, .contact-dialog textarea::placeholder { color: rgb(117, 130, 143); opacity: 1; }
.contact-dialog .contact-form > label, .contact-purpose legend { font-size: 14px !important; color: rgb(76, 94, 112) !important; }
.catalog-copy > span:first-child, .catalog-copy .product-material, .product-use, .recommend-copy .product-material { color: rgb(98, 113, 127) !important; }
.catalog-copy > span:first-child { font-size: 12px !important; margin-bottom: 5px; }
.catalog-copy h3 { line-height: 1.4; margin: 0px 0px 8px !important; font-size: 22px !important; }
.catalog-copy .product-material { line-height: 1.55; margin: 0px 0px 18px !important; font-size: 13px !important; }
.recommend-copy h4 { line-height: 1.4; margin: 5px 0px 8px !important; font-size: 22px !important; }
.recommend-copy .product-material { margin-bottom: 20px !important; line-height: 1.55; }
.recommend-copy { justify-content: center; }
.catalog-art svg { height: 220px; width: 100%; max-width: 320px; }
.recommend-art svg { max-width: 285px; }
.product-full { grid-template-columns: 1fr 1fr; gap: 25px; }
.product-left { background: white; border-radius: 10px; overflow: hidden; }
.product-left .product-display { padding: 20px; background: linear-gradient(145deg, rgb(232, 237, 239), rgb(220, 229, 232)); }
.product-left .product-display svg { max-width: 350px; }
.product-information h3 { font-size: 27px !important; margin: 7px 0px 12px !important; }
.product-identity { display: flex; flex-direction: column; gap: 0px; }
.product-identity > h3 { display: none; }
.product-connect { grid-column: 1 / -1; }
@media (max-width: 750px) {
.product-full { grid-template-columns: 1fr; gap: 22px; }
.product-connect { grid-column: 1; }
.project-dialog .id-main { padding-right: 100px; }
.contact-dialog input, .contact-dialog textarea { font-size: 14px !important; }
.contact-dialog input::placeholder, .contact-dialog textarea::placeholder { font-size: 13px; }
.catalog-art svg { height: 155px; }
}
@media (max-width: 420px) {
.catalog-copy h3 { font-size: 17px !important; }
.project-dialog .id-main { padding-right: 80px; }
}
.product-full > * { min-width: 0px; }
@media (max-width: 750px) {
.product-identity .id-main { padding-right: 85px; }
}
.outcomes-copy .section-title { line-height: 1.3; letter-spacing: -1.5px; white-space: normal !important; }
.footer-platform { font-size: 26px !important; }
.outcome-action { display: grid; margin-top: 60px; width: 100% !important; }
.outcome-action .report-switch { position: static !important; }
.outcome-action .button, .outcome-action .report-switch button { width: 100%; min-height: 57px; padding: 14px 9px; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.outcome-action .report-switch button { font-weight: 400; }
.report-stack-wrap { padding: 0px !important; }
.document-stage .front-paper, .document-stage .back-paper { aspect-ratio: 210 / 297; }
.contact-dialog .form-actions { grid-column: 1 / -1; grid-row: auto !important; order: 0 !important; }
.contact-dialog .contact-form > .full:has(textarea) { grid-column: 1 / -1; grid-row: auto !important; }
.contact-dialog .form-actions .button { width: 100%; }
@media (min-width: 751px) {
.product-left { display: grid !important; grid-template-rows: 245px 1fr; }
.product-left .product-display { max-height: 245px; height: 245px !important; min-height: 245px !important; }
.product-information { padding: 24px 26px; }
.product-information > h3 { display: none; }
.product-specifications { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 24px; align-content: start; padding: 0px; margin: 0px; }
.product-specifications > div { height: 80px; min-height: 80px; padding: 14px 0px; border-top: 0px; border-bottom: 1px solid rgb(227, 233, 238) !important; }
.product-specifications dt { font-size: 12px; margin-bottom: 7px; line-height: 1.5; }
.product-specifications dd { line-height: 1.5; margin: 0px; font-size: 14px !important; }
.product-information { min-height: 368px; }
}
.resource-section .section-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.all-products { font-size: 14px; gap: 24px; min-height: 50px; padding: 13px 20px; }
.catalog-page #resources { min-height: 70vh; padding-top: 65px; }
.catalog-page .all-products { display: none; }
.catalog-page .catalog-back { display: inline-flex; margin-bottom: 30px; }
@media (max-width: 750px) {
.footer-platform { font-size: 22px !important; }
.outcome-action { margin-top: 45px; }
.outcome-action .button, .outcome-action .report-switch button { font-size: 11px; min-height: 54px; padding: 12px 4px; }
.all-products { min-height: 43px; font-size: 12px; gap: 12px; padding: 11px 13px; }
.resource-section .section-top { align-items: flex-start; }
.resource-section .section-title { font-size: 31px; }
.contact-dialog .contact-form { display: grid; }
.contact-dialog .form-actions { grid-column: 1 / -1 !important; }
}
@media (max-width: 420px) {
.footer-platform { font-size: 20px !important; }
}
.product-left .product-display { width: 100%; }
.report-stack-wrap { width: 100%; max-width: none !important; }
.document-stage .front-paper { right: 0px !important; }
.document-stage .back-paper { left: 0px !important; }
.product-identity .id-main { padding-right: 115px; }
.topic-layout { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; }
.topic-side { display: contents; }
.topic-feature, .topic-small { align-items: stretch; color: var(--site-ink); text-align: left; min-height: 0px !important; border: 0px !important; }
.topic-feature::before, .topic-feature::after, .topic-small::before, .topic-small::after { display: none !important; }
.topic-image { width: 100%; height: 250px; flex: 0 0 auto; background: linear-gradient(145deg, rgb(221, 228, 232), rgb(203, 215, 222)); border-radius: 10px 10px 0px 0px; position: relative !important; }
.topic-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 27px !important; position: static !important; }
.topic-card-copy h3 { font-weight: 500; font-size: 27px !important; margin: 0px 0px 12px !important; }
.topic-card-copy p { line-height: 1.7; font-size: 14px !important; margin: 0px 0px 25px !important; }
.topic-card-action { justify-content: space-between; margin-top: auto; padding: 11px 14px; background: rgb(255, 255, 255); border-radius: 10px; color: var(--site-blue) !important; font-size: 13px !important; border: 0px !important; }
.topic-card-action > span { line-height: 1; font-size: 18px !important; padding: 0px !important; margin: 0px !important; }
@media (max-width: 750px) {
.topic-layout { grid-template-columns: 1fr; gap: 22px; }
.topic-image { height: 235px; }
.topic-card-copy { min-height: 185px; padding: 24px !important; }
.topic-card-copy h3 { font-size: 25px !important; }
.outcome-action .report-switch button { min-height: 46px; }
}
@media (max-width: 420px) {
.document-stage { height: 570px !important; min-height: 570px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 530px !important; }
.product-identity .id-main { padding-right: 75px; }
}
.resource-section .section-title, .outcomes-copy .section-title { font-size: 40px !important; line-height: 1.4 !important; letter-spacing: -1px !important; white-space: nowrap !important; }
.outcomes-layout { grid-template-columns: 1.12fr 1fr; gap: 55px; }
.document-stage { margin-left: 10px; }
.outcome-action .report-switch button { background: transparent; }
.partner-layout { display: grid; grid-template-columns: 1.12fr 1fr; gap: 70px; align-items: center; }
.partner-copy .section-title { font-size: 40px !important; line-height: 1.4; }
.partner-copy > p { font-size: 17px; line-height: 1.8; margin: 25px 0px 35px; color: rgb(98, 113, 127); }
.partner-benefits { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; }
.partner-benefits > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 10px; border-radius: 10px; min-height: 122px; }
.partner-benefits svg { width: 33px; height: 33px; color: rgb(88, 118, 143); }
.partner-benefits b { font-size: 15px; font-weight: 500; color: rgb(51, 74, 93); }
.partner-entry .button { min-height: 57px; font-size: 14px; width: calc(33.3333% - 9.33333px); padding: 14px 8px; background: var(--site-blue); color: rgb(255, 255, 255); white-space: nowrap; }
.partner-entry p { color: rgb(98, 113, 127); margin: 16px 0px 0px; }
.partner-passport { min-width: 0px; }
@media (max-width: 1100px) and (min-width: 751px) {
.resource-section .section-title, .outcomes-copy .section-title { font-size: 32px !important; }
.outcomes-layout { gap: 30px; }
.partner-layout { gap: 35px; }
.partner-copy .section-title { font-size: 34px !important; }
}
@media (max-width: 750px) {
.resource-section .section-title, .outcomes-copy .section-title { font-size: 27px !important; letter-spacing: -1px !important; white-space: nowrap !important; }
.outcomes-layout { grid-template-columns: 1fr; gap: 35px; }
.document-stage { margin-left: 0px; }
.document-stage .front-paper, .document-stage .back-paper { max-width: 450px !important; }
.partner-layout { grid-template-columns: 1fr; gap: 40px; }
.partner-copy .section-title { font-size: 32px !important; }
.partner-benefits { gap: 8px; }
.partner-benefits b { font-size: 12px; }
.partner-entry .button { width: calc(33.3333% - 5.33333px); font-size: 12px; }
.partner-passport { margin: auto; }
.partner-entry p { font-size: 11px; }
}
@media (max-width: 420px) {
.outcomes-copy .section-title { font-size: 23px !important; }
.resource-section .section-title { font-size: 26px !important; }
.partner-passport .id-main { padding-right: 70px; }
}
.case-navigation .project-tabs button[aria-selected="true"] { color: white !important; font-weight: 400 !important; }
.contact-dialog .contact-intro { isolation: isolate; position: relative; overflow: hidden; padding-bottom: 35px; }
.contact-dialog .contact-benefits { position: relative; z-index: 1; gap: 16px; font-size: 12px; }
.contact-dialog .contact-benefits span::before { display: none; }
.contact-dialog .contact-intro h3 { font-weight: 500; letter-spacing: 0px; }
.partner-entry p { line-height: 1.7; letter-spacing: 0px; }
.section-top, .head { align-items: center; }
.button, .footer-route, .product-detail-button, .topic-card-action { font-family: inherit; font-weight: 400; line-height: 1.5; box-sizing: border-box; }
.catalog-copy h3, .recommend-copy h4, .topic-card-copy h3 { letter-spacing: 0px; }
.catalog-copy, .recommend-copy, .topic-card-copy { color: var(--site-ink); }
.catalog-copy .product-material, .recommend-copy .product-material, .topic-card-copy p { color: rgb(98, 113, 127) !important; }
.modal-head h2 { line-height: 1.5; letter-spacing: 0px; }
.footer-company strong, .footer-company address, .footer-company .footer-inline-phone { line-height: 1.5; }
.footer-company { gap: 7px !important; }
@media (max-width: 750px) {
.contact-dialog .contact-intro { min-height: 190px; padding-bottom: 25px; }
.contact-dialog .contact-benefits { margin-top: 25px; padding-top: 0px; }
}
.case-navigation .project-tabs button[aria-selected="true"] { background: linear-gradient(120deg, rgb(57, 129, 174) 0%, rgb(75, 145, 185) 65%, rgb(99, 159, 192) 100%) !important; }
.outcome-action .report-switch button { color: rgb(210, 226, 239); }
.outcome-action .report-switch button:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, 0.043); }
.outcomes-copy .section-title, .partner-copy .section-title { margin-bottom: 36px !important; }
.outcome-uses, .partner-benefits { align-items: stretch; gap: 14px !important; margin: 0px !important; }
.outcome-uses > div, .partner-benefits > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 10px !important; gap: 0px !important; }
.outcome-uses svg, .partner-benefits svg { width: 33px; height: 33px; margin-bottom: 18px; }
.outcome-uses b, .partner-benefits b { margin: 0px; }
.outcome-uses .capability-note, .partner-benefits .capability-note { margin-top: 8px; padding: 0px; }
.outcome-uses .capability-note { color: rgb(197, 215, 231); }
.partner-benefits .capability-note { color: rgb(98, 113, 127); }
.outcome-action, .partner-entry { margin-top: 40px !important; }
.partner-entry p { margin-top: 14px; font-size: 12px; }
.partner-passport { align-self: center; }
.footer-directory { background: rgba(255, 255, 255, 0.024); padding: 24px 0px 0px !important; }
.footer-links { display: grid; grid-template-columns: 95px minmax(0px, 1fr); gap: 24px; align-items: start; padding: 0px !important; }
.footer-links h3 { font-weight: 400; line-height: 1.7; padding: 8px 0px; color: rgb(205, 221, 234); font-size: 13px !important; margin: 0px !important; }
.footer-links > div { display: flex; flex-wrap: wrap; gap: 8px 10px !important; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 8px 13px; color: rgb(216, 229, 239); line-height: 1.5; transition: background 0.2s, color 0.2s; font-size: 12px !important; }
.footer-links a:hover { background: rgba(255, 255, 255, 0.086); color: rgb(255, 255, 255); text-decoration: none; }
.footer-legal { margin-top: 21px; padding-bottom: 12px; gap: 22px; font-size: 11px; color: rgb(184, 206, 222); padding-top: 0px !important; }
@media (max-width: 1100px) and (min-width: 751px) {
.outcome-uses b, .partner-benefits b { font-size: 13px; }
.outcome-uses .capability-note, .partner-benefits .capability-note { font-size: 10px; }
}
@media (max-width: 750px) {
.outcomes-copy .section-title, .partner-copy .section-title { margin-bottom: 27px !important; }
.outcome-uses, .partner-benefits { gap: 8px !important; }
.outcome-uses > div, .partner-benefits > div { min-height: 143px; padding: 21px 6px !important; }
.outcome-uses .capability-note, .partner-benefits .capability-note { margin-top: 7px; white-space: normal; text-align: center; }
.outcome-action, .partner-entry { margin-top: 32px !important; }
.footer-links { grid-template-columns: 1fr; gap: 10px; }
.footer-links h3 { padding: 0px; }
.footer-links > div { gap: 7px !important; }
.footer-links a { padding: 8px 10px; min-height: 33px; font-size: 11px !important; }
.footer-directory { padding-top: 22px !important; }
.footer-legal { margin-top: 18px; }
}
.green-id-label { background: rgb(227, 236, 230); display: inline-flex !important; color: rgb(57, 102, 82) !important; margin: 0px 0px 10px !important; }
.recommend-copy .green-id-label { margin-top: 7px !important; margin-bottom: 3px !important; }
.outcome-uses .capability-note, .partner-benefits .capability-note { max-width: 170px; text-align: center; line-height: 1.6; white-space: normal !important; font-size: 12px !important; }
.outcome-uses > div, .partner-benefits > div { min-height: 190px; }
.partner-benefits b { text-align: center; white-space: normal !important; }
.outcomes-copy .section-title { font-size: 38px !important; }
.topic-card-copy { min-height: 230px; }
.hero-copy > p { line-height: 1.9; }
@media (max-width: 750px) {
.outcome-uses .capability-note, .partner-benefits .capability-note { font-size: 10px !important; }
.outcomes-copy .section-title { font-size: 25px !important; }
.outcome-action { grid-template-columns: 1fr 1.7fr; }
}
.outcome-action > .button { line-height: 1.5; white-space: normal; }
.outcome-action .report-switch { min-width: 0px; }
.outcome-action .report-switch button { min-width: 0px; font-size: 12px; white-space: nowrap; }
.catalog-art, .recommend-art { position: relative; }
.catalog-art > .green-id-label, .recommend-art > .green-id-label { position: absolute; top: 16px; left: 16px; z-index: 1; background: rgb(225, 236, 229); font-weight: 400; display: inline-flex !important; color: rgb(49, 95, 71) !important; margin: 0px !important; }
.catalog-art > .green-id-label { max-width: calc(100% - 32px); }
@media (max-width: 750px) {
.outcome-action > .button { padding: 12px 5px; }
.catalog-art > .green-id-label, .recommend-art > .green-id-label { top: 11px; left: 11px; }
}
.hero .button, .footer-route { width: 210px; min-width: 210px; }
.hero-copy > p { max-width: 560px; }
.product-specifications dd { overflow-wrap: anywhere; }
.product-information { min-width: 0px; }
@media (max-width: 750px) {
.hero .button, .footer-route { width: 180px; min-width: 180px; }
.hero-actions { flex-wrap: wrap; }
.footer-routes { flex-wrap: wrap; }
}
@media (max-width: 420px) {
.hero .button, .footer-route { width: 165px; min-width: 165px; }
}
button, .button, .footer-route, .product-detail-button, .topic-card-action, .catalog-detail-label { white-space: nowrap !important; }
.hero .button { font-size: 15px !important; padding-left: 17px !important; padding-right: 17px !important; }
.hero .button .action-circle { margin-left: 10px; }
.outcome-action > .button { padding-left: 5px; padding-right: 5px; font-size: 12px !important; }
.report-register .trust-item:has(.record-id) { min-height: 93px !important; }
.document-stage .report-register .trust-item:has(.record-id) { min-height: 83px !important; }
@media (max-width: 750px) {
.hero .button { font-size: 13px !important; padding: 14px 12px !important; }
}
@media (max-width: 420px) {
.hero .button { font-size: 12px !important; }
.hero .button .action-circle { width: 21px; height: 21px; margin-left: 7px; }
.outcome-action > .button { font-size: 9px !important; }
.case-navigation .project-tabs button { font-size: 9px !important; }
.document-stage .report-register .trust-item:has(.record-id) { min-height: 78px !important; }
}
.case-navigation .project-tabs button { overflow: hidden; text-overflow: ellipsis; display: block !important; }
.product-left { grid-template-rows: 210px 1fr !important; }
.product-left .product-display svg { height: 190px; }
.project-dialog .detail-consult .button { font-size: 14px; padding: 15px 18px; }
@media (max-width: 750px) {
.project-dialog .detail-consult .button { font-size: 12px; padding: 14px 15px; }
}
.detail-grid .detail-overview .modal-img { flex: 0 0 auto; border-radius: 10px 10px 0px 0px !important; }
.detail-grid .detail-summary { padding: 23px 26px !important; }
.detail-grid .detail-summary h3 { margin: 0px 0px 20px !important; }
.detail-grid .project-amount small { font-size: 12px !important; }
.outcome-uses > div > svg, .partner-benefits > div > svg { width: 34px; height: 34px; overflow: visible; }
.outcome-uses > div > svg path, .partner-benefits > div > svg path { animation-play-state: paused; }
.in-view .outcome-uses > div > svg path, .in-view .partner-benefits > div > svg path { animation-play-state: running; }
.outcome-uses > div:nth-child(2) svg path, .partner-benefits > div:nth-child(2) svg path { animation-delay: 0.45s; }
.outcome-uses > div:nth-child(3) svg path, .partner-benefits > div:nth-child(3) svg path { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
.outcome-uses > div > svg path, .partner-benefits > div > svg path { animation: auto ease 0s 1 normal none running none; stroke-dashoffset: 0; }
}
.partner-benefits > div { background: rgb(243, 246, 248) !important; }
.case-navigation { background: var(--shared-surface) !important; }
.case-navigation .scene-tabs, .case-navigation .project-tabs { background: transparent !important; }
.case-navigation .scene-tab, .case-navigation .project-tabs button { padding-left: 21px !important; text-align: left !important; justify-content: flex-start !important; }
.case-navigation .scene-tab { gap: 10px !important; }
.recommend-copy, .topic-card-copy, .mineral-topic .topic-card-copy, .industry-topic .topic-card-copy { background: var(--shared-surface) !important; }
.topic-feature, .topic-small { background: var(--shared-surface) !important; }
@media (max-width: 750px) {
.case-navigation .scene-tab { padding-left: 12px !important; gap: 6px !important; }
}
.case-navigation .project-tabs button { padding-left: var(--secondary-inset, 48px) !important; }
.topic-feature .topic-image, .topic-small .topic-image { display: block !important; position: relative !important; inset: auto !important; width: 100% !important; background: linear-gradient(135deg, rgb(237, 241, 244), rgb(225, 231, 237)) !important; border-radius: 10px 10px 0px 0px !important; }
.topic-feature, .topic-small { display: flex !important; flex-direction: column !important; padding: 0px !important; overflow: hidden !important; }
.topic-feature .topic-card-copy, .topic-small .topic-card-copy { position: relative !important; inset: auto !important; width: 100% !important; min-height: 230px !important; background: var(--shared-surface) !important; color: rgb(38, 62, 79) !important; padding: 28px !important; }
.topic-feature::before, .topic-feature::after { display: none !important; }
.topic-card-copy h3 { color: rgb(38, 62, 79) !important; }
.topic-card-copy p { color: rgb(98, 113, 127) !important; }
.topic-card-copy .topic-card-action { color: rgb(35, 88, 139) !important; }
@media (max-width: 750px) {
.case-navigation .project-tabs button { padding-left: var(--secondary-inset, 29px) !important; }
.topic-feature .topic-image, .topic-small .topic-image { height: 220px !important; min-height: 220px !important; }
}
.outcome-action > .button, .outcome-action .report-switch button { font-size: 14px !important; font-weight: 400 !important; }
.product-detail-button, .product-detail-button .detail-plus, .catalog-detail-label, .catalog-detail-label span { color: var(--site-blue) !important; }
.outcomes-layout, .partner-layout { grid-template-columns: minmax(0px, 1fr) 611px !important; gap: 45px !important; }
.document-stage { margin: 0px !important; }
.document-stage .front-paper, .document-stage .back-paper { width: 611px !important; max-width: none !important; }
.partner-passport { width: 611px !important; max-width: none !important; }
@media (max-width: 1250px) {
.outcomes-layout, .partner-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
.document-stage { max-width: 650px !important; margin: auto !important; }
.partner-passport { margin: auto !important; }
.document-stage .front-paper, .document-stage .back-paper { max-width: calc(100% - 28px) !important; }
}
@media (max-width: 750px) {
.document-stage { width: 100% !important; }
.document-stage .front-paper, .document-stage .back-paper { width: calc(100% - 24px) !important; }
.partner-passport { width: calc(100% - 24px) !important; }
}
:root { --action-height: 60px; }
.button, .footer-route, .product-detail-button, .catalog-detail-label, .topic-card-action, .report-switch, .report-switch button { border-radius: 10px !important; }
.action-circle { border-radius: 50% !important; }
.outcome-action { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 14px !important; align-items: stretch !important; }
.outcome-action > .button { grid-column: 1; box-sizing: border-box; min-width: 0px !important; width: 100% !important; height: 60px !important; min-height: 60px !important; padding: 12px 6px !important; }
.outcome-action .report-switch { grid-column: 2 / span 2; height: 60px !important; min-height: 60px !important; align-items: stretch !important; }
.outcome-action .report-switch button { box-sizing: border-box; height: 60px !important; min-height: 60px !important; padding: 12px 8px !important; }
.outcomes-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.outcomes-copy .section-title { margin: 0px 0px 40px !important; }
.outcome-uses { flex: 0 0 auto; margin: 0px !important; }
.outcomes-copy .outcome-action { flex: 0 0 auto; margin-top: 130px !important; }
.footer-route { --arrow-ink: #fff; }
.footer-route .action-circle { background: var(--site-blue) !important; }
.footer-route .action-circle svg { stroke: rgb(255, 255, 255) !important; }
.footer-route.secondary .action-circle { background: rgb(255, 255, 255) !important; }
.footer-route.secondary .action-circle svg { stroke: var(--site-blue) !important; }
.button:not(.white):not(.secondary) { --arrow-ink: #fff; }
.button.white, .button.secondary { --arrow-ink: var(--site-blue); }
.button .action-circle svg { stroke: var(--arrow-ink, #fff); }
.form-actions .button .action-circle { background: rgba(255, 255, 255, 0.125); }
.product-detail-button, .catalog-detail-label { color: var(--site-blue) !important; }
.outcome-action .report-switch button:focus-visible, .button:focus-visible, .footer-route:focus-visible { outline: rgb(122, 166, 200) solid 2px; outline-offset: 3px; }
@media (max-width: 1250px) {
.outcomes-copy .outcome-action { margin-top: 85px !important; }
.outcomes-copy .section-title { margin-bottom: 35px !important; }
}
@media (max-width: 750px) {
.outcome-action { gap: 8px !important; }
.outcome-action > .button, .outcome-action .report-switch, .outcome-action .report-switch button { height: 54px !important; min-height: 54px !important; }
.outcome-action > .button { font-size: 11px !important; }
.outcome-action .report-switch button { font-size: 11px !important; padding: 10px 3px !important; }
.outcomes-copy .outcome-action { margin-top: 55px !important; }
.outcomes-copy .section-title { margin-bottom: 30px !important; }
}
.footer-routes .footer-route:nth-child(2) .action-circle { background: rgb(255, 255, 255) !important; }
.footer-routes .footer-route:nth-child(2) .action-circle svg { stroke: var(--site-blue) !important; }
@media (max-width: 750px) {
.outcome-action > .button, .outcome-action .report-switch button { font-size: 12px !important; }
}
.outcome-action .report-switch { display: grid !important; grid-template-columns: 1fr 1fr !important; }
.outcome-action .report-switch button { border: 0px !important; box-shadow: none !important; border-radius: 0px !important; margin: 0px !important; }
.outcome-action .report-switch button:first-child { border-radius: 10px 0px 0px 10px !important; }
.outcome-action .report-switch button:last-child { border-radius: 0px 10px 10px 0px !important; }
.partner-entry { margin-top: 85px !important; }
.topic-card-action, .outcome-action > .button { color: var(--site-blue) !important; }
.outcome-action > .button .action-circle, .partner-entry > .button .action-circle { width: 24px; height: 24px; margin-left: 0px !important; }
.outcome-action > .button .action-circle { background: var(--site-blue) !important; }
.outcome-action > .button .action-circle svg { stroke: rgb(255, 255, 255) !important; }
.partner-entry > .button .action-circle { background: rgb(255, 255, 255) !important; }
.partner-entry > .button .action-circle svg { stroke: var(--site-blue) !important; }
.partner-passport .id-main { padding-right: 125px !important; margin-top: 16px !important; min-height: 64px !important; }
.partner-passport .id-main h3 { font-size: 22px !important; line-height: 1.5 !important; margin: 8px 0px !important; }
.partner-passport .id-main p { font-size: 14px !important; line-height: 1.6 !important; margin: 0px !important; }
@media (max-width: 750px) {
.partner-entry { margin-top: 55px !important; }
.outcome-action > .button, .partner-entry > .button { font-size: 10px !important; gap: 4px !important; padding-left: 4px !important; padding-right: 4px !important; }
.outcome-action > .button .action-circle, .partner-entry > .button .action-circle { width: 17px; height: 17px; }
.outcome-action > .button .action-circle svg, .partner-entry > .button .action-circle svg { width: 11px; height: 11px; }
.partner-passport .id-main { padding-right: 80px !important; }
.partner-passport .id-main h3 { font-size: 21px !important; }
}
body { line-height: 1.65; font-weight: 400; }
button, input, textarea, select { font-family: inherit; }
.section-title { font-weight: 500 !important; line-height: 1.4 !important; }
.catalog-copy h3, .recommend-copy h4, .topic-card-copy h3 { font-weight: 500 !important; line-height: 1.4 !important; }
.catalog-copy .product-material, .recommend-copy .product-material, .topic-card-copy p { font-size: 14px !important; line-height: 1.7 !important; font-weight: 400 !important; }
.outcome-uses b, .partner-benefits b { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; }
.outcome-uses p, .partner-benefits p { font-size: 13px !important; line-height: 1.7 !important; font-weight: 400 !important; }
.button, .footer-route, .topic-card-action, .product-detail-button, .catalog-detail-label, .report-switch button { font-weight: 500 !important; line-height: 1.5 !important; white-space: nowrap !important; }
.topic-card-action, .product-detail-button, .catalog-detail-label { color: var(--site-blue) !important; font-size: 14px !important; }
.outcome-action .report-switch { box-sizing: border-box !important; overflow: hidden !important; }
.outcome-action .report-switch button, .outcome-action .report-switch button:first-child, .outcome-action .report-switch button:last-child { height: 48px !important; min-height: 48px !important; padding: 8px 5px !important; }
.outcome-action .report-switch button[aria-pressed="true"] { background: rgb(255, 255, 255) !important; color: var(--site-blue) !important; box-shadow: rgba(23, 60, 97, 0.07) 0px 2px 6px !important; }
@media (max-width: 750px) {
.catalog-copy h3, .recommend-copy h4 { font-size: 19px !important; }
.catalog-copy .product-material, .recommend-copy .product-material, .topic-card-copy p { font-size: 13px !important; }
.outcome-uses b, .partner-benefits b { font-size: 14px !important; }
.outcome-uses p, .partner-benefits p { font-size: 12px !important; }
.topic-card-action, .product-detail-button, .catalog-detail-label { font-size: 13px !important; }
.outcome-action .report-switch button, .outcome-action .report-switch button:first-child, .outcome-action .report-switch button:last-child { height: 42px !important; min-height: 42px !important; font-size: 12px !important; padding: 7px 3px !important; }
}
.topics-section .topic-card-copy .topic-card-action { color: var(--site-blue) !important; }
.contact-dialog .modal-body { padding: 20px 26px 24px !important; }
.contact-layout { align-items: stretch; gap: 26px !important; }
.contact-dialog .contact-intro { padding: 28px 24px !important; }
.contact-dialog .contact-intro h3 { font-size: 28px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
.contact-dialog .contact-intro p { font-size: 14px !important; line-height: 1.7 !important; }
.contact-benefits { flex-wrap: wrap; line-height: 1.7; display: flex !important; gap: 0px !important; padding-top: 22px !important; font-size: 12px !important; }
.contact-benefits span::before { display: none !important; }
.contact-benefits span + span::before { content: "｜"; color: rgb(169, 192, 213); display: inline !important; position: static !important; background: none !important; margin: 0px 5px !important; }
.contact-dialog .contact-form { gap: 11px 14px !important; padding: 0px !important; }
.contact-dialog .contact-form > label { line-height: 1.5; gap: 5px !important; font-size: 13px !important; }
.contact-dialog input:not([type="checkbox"]) { box-sizing: border-box; height: 40px !important; min-height: 40px !important; padding: 9px 12px !important; font-size: 14px !important; }
.contact-dialog textarea { height: 66px !important; min-height: 66px !important; padding: 9px 12px !important; font-size: 14px !important; }
.contact-dialog input::placeholder, .contact-dialog textarea::placeholder { font-size: 13px !important; }
.contact-purpose { margin: 0px !important; padding: 0px !important; }
.contact-purpose legend { line-height: 1.5; font-size: 13px !important; margin-bottom: 7px !important; }
.registration-layout .contact-purpose > div { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
.contact-purpose > div { gap: 7px !important; }
.contact-purpose label { position: relative !important; min-width: 0px; }
.contact-purpose label > span { align-items: center; justify-content: flex-start; gap: 7px; min-height: 38px; box-sizing: border-box; border-radius: 10px; display: flex !important; padding: 8px 9px !important; font-size: 12px !important; line-height: 1.5 !important; border: 1px solid rgb(219, 227, 234) !important; }
.contact-purpose label > span::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; box-sizing: border-box; border: 1px solid rgb(141, 159, 176); border-radius: 10px; background: white; }
.contact-purpose input:checked + span { background: rgb(228, 237, 249) !important; color: rgb(36, 89, 179) !important; border-color: rgb(36, 89, 179) !important; font-weight: 500 !important; }
.contact-purpose input:checked + span::before { content: "✓"; background: rgb(36, 89, 179); border-color: rgb(36, 89, 179); color: white; font-size: 12px; line-height: 12px; text-align: center; }
.contact-purpose input:focus-visible + span { outline: rgb(36, 89, 179) solid 2px; outline-offset: 2px; }
.contact-dialog .form-actions { margin-top: 3px !important; }
.contact-dialog .form-actions .button { min-height: 46px !important; height: 46px !important; font-size: 14px !important; padding: 10px 14px !important; }
@media (max-width: 750px) {
.contact-dialog .modal-body { padding: 18px !important; }
.contact-layout { gap: 18px !important; }
.contact-dialog .contact-intro { padding: 20px !important; }
.contact-dialog .contact-intro h3 { font-size: 25px !important; }
.contact-benefits { padding-top: 14px !important; }
.registration-layout .contact-purpose label > span { gap: 4px; font-size: 10px !important; padding: 7px 4px !important; }
.contact-purpose label > span::before { width: 12px; height: 12px; }
.contact-dialog .contact-form { grid-template-columns: 1fr 1fr !important; }
.contact-dialog .contact-form > .full { grid-column: 1 / -1 !important; }
}
.contact-benefits span + span::before { flex: 0 0 auto; width: auto !important; height: auto !important; border-radius: 0px !important; }
.contact-purpose label > span { white-space: normal !important; }
.purchase-layout .contact-purpose > div { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
.topics-section .topic-feature:disabled, .topics-section .topic-small:disabled { opacity: 1 !important; cursor: default !important; }
.topics-section .topic-card-action { cursor: default !important; }
@media (max-width: 750px) {
.purchase-layout .contact-purpose label > span { gap: 4px; font-size: 10px !important; padding: 7px 4px !important; }
}
.hero { isolation: isolate; align-items: center; overflow: hidden; position: relative !important; display: flex !important; min-height: 740px !important; background: rgb(27, 63, 98) !important; padding: 70px max(32px, -700px + 50vw) 150px !important; }
.hero-carousel, .hero-blue-veil { position: absolute; inset: 0px; pointer-events: none; }
.hero-carousel { z-index: -3; }
.hero-scene { position: absolute; inset: 0px; background-color: rgb(101, 133, 154); background-size: cover; background-position: center center; }
.hero-scene:nth-child(1) { background-image: radial-gradient(at 85% 28%, rgb(165, 187, 199), transparent 60%), linear-gradient(145deg, rgb(49, 88, 116), rgb(114, 144, 142)); }
.hero-scene:nth-child(2) { background-image: radial-gradient(at 75% 45%, rgb(145, 170, 165), transparent 60%), linear-gradient(145deg, rgb(38, 76, 107), rgb(102, 136, 140)); }
.hero-scene:nth-child(3) { background-image: radial-gradient(at 90% 25%, rgb(177, 184, 189), transparent 65%), linear-gradient(145deg, rgb(56, 93, 123), rgb(125, 146, 158)); }
.hero-scene:nth-child(4) { background-image: radial-gradient(at 75% 60%, rgb(149, 172, 188), transparent 60%), linear-gradient(145deg, rgb(45, 83, 116), rgb(105, 133, 151)); }
.hero-blue-veil { z-index: -2; }
.hero-copy { z-index: 1; position: relative !important; background: none !important; width: min(740px, 100%) !important; padding: 0px !important; margin: 0px !important; }
.hero-copy::before, .hero-copy::after { display: none !important; }
.hero-scene-nav { position: absolute; display: grid; align-items: center; }
.hero-scene-tab { position: relative; text-align: left; min-width: 0px; font-family: inherit; }
.hero-scene-tab:hover { color: rgb(255, 255, 255); }
.hero-scene-tab i { position: absolute; overflow: hidden; border-radius: 10px; }
.hero-scene-tab i::after { content: ""; display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; }
.hero-scene-tab[aria-pressed="true"] i::after { animation: 7s linear 0s 1 normal forwards running hero-scene-progress; }
.hero-scene-tab:focus-visible { outline: rgb(172, 208, 248) solid 2px; outline-offset: 4px; }
@keyframes hero-scene-progress {
100% { transform: scaleX(1); }
}
@media (max-width: 1000px) {
.hero-scene-tab { padding-left: 8px; padding-right: 8px; }
.hero-scene-nav { gap: 8px; }
}
@media (max-width: 750px) {
.hero { min-height: 710px !important; padding: 65px 24px 210px !important; }
.hero-scene-nav { left: 24px; right: 24px; gap: 8px; }
.hero-copy { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scene-tab i::after { animation: auto ease 0s 1 normal none running none !important; }
}
.hero-scene-nav { bottom: 30px; backdrop-filter: blur(18px); grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; }
.hero-scene-tab { color: rgb(183, 202, 218); background: transparent !important; }
.hero-scene-tab + .hero-scene-tab::before { content: ""; position: absolute; left: -3px; top: 18px; bottom: 18px; width: 1px; background: rgba(184, 210, 231, 0.11); }
.hero-scene-tab[aria-pressed="true"] { text-shadow: rgba(213, 232, 246, 0.2) 0px 0px 18px; }
.hero-scene-tab i { left: 20px; right: 20px; bottom: 9px; height: 1px; background: rgba(198, 218, 234, 0.08); }
.hero-scene-tab i::after { background: linear-gradient(90deg, rgba(179, 209, 236, 0.333), rgb(196, 223, 245)); }
@media (max-width: 1000px) {
.hero-scene-tab { font-size: 12px; gap: 3px; }
}
@media (max-width: 750px) {
.hero-scene-nav { bottom: 24px; padding: 4px; grid-template-columns: 1fr 1fr !important; }
.hero-scene-tab:nth-child(3)::before { display: none; }
.hero-scene-tab i { left: 12px; right: 12px; bottom: 7px; }
.hero-blue-veil { background: linear-gradient(90deg, rgba(16, 46, 75, 0.92), rgba(24, 63, 98, 0.66) 75%, rgba(24, 63, 98, 0.333)), linear-gradient(0deg, rgba(16, 46, 75, 0.72), transparent 65%); }
}
.hero { padding-left: max(56px, -660px + 50vw) !important; padding-right: max(56px, -660px + 50vw) !important; }
.hero-scene-nav { left: max(56px, -660px + 50vw) !important; right: max(56px, -660px + 50vw) !important; border: 0px !important; box-shadow: none !important; padding: 5px !important; gap: 4px !important; border-radius: 10px !important; }
.hero-scene-tab { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; min-height: 58px !important; padding: 16px 10px !important; border: 0px !important; border-radius: 10px !important; line-height: 1.5 !important; font-size: 14px !important; font-weight: 400 !important; text-shadow: none !important; transition: background 0.45s, color 0.45s !important; }
.hero-scene-tab::before, .hero-scene-tab::after, .hero-scene-tab i { display: none !important; content: none !important; }
.hero-scene-tab[aria-pressed="true"] { background: rgba(220, 235, 242, 0.14) !important; color: rgb(255, 255, 255) !important; }
.hero-scene-tab:hover { background: rgba(220, 235, 242, 0.08) !important; }
.hero-scene-tab[aria-pressed="true"]:hover { background: rgba(220, 235, 242, 0.14) !important; }
.hero-scene-number { font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.5px !important; color: rgb(169, 191, 208) !important; }
.hero-scene-tab[aria-pressed="true"] .hero-scene-number { color: rgb(213, 230, 242) !important; }
@media (max-width: 1180px) {
.hero { padding-left: 36px !important; padding-right: 36px !important; }
.hero-scene-nav { left: 36px !important; right: 36px !important; }
.hero-scene-tab { font-size: 12px !important; gap: 8px !important; }
}
@media (max-width: 750px) {
.hero-scene-tab { font-size: 11px !important; min-height: 52px !important; padding: 14px 6px !important; gap: 7px !important; }
.hero-scene-number { font-size: 10px !important; }
}
@media (max-width: 650px) {
.hero { padding-left: 20px !important; padding-right: 20px !important; }
.hero-scene-nav { left: 20px !important; right: 20px !important; }
}
.hero-scene { visibility: visible !important; }
.hero-carousel { background: rgb(108, 142, 158); }
@media (prefers-reduced-motion: reduce) {
.hero-scene { transform: none !important; }
}
.hero-scene { filter: brightness(0.94); backface-visibility: hidden; }
.hero-scene.is-active { filter: brightness(1); }
@media (prefers-reduced-motion: reduce) {
.hero-scene, .hero-scene.is-active { filter: none !important; }
}
.hero-scene, .hero-scene.is-active { will-change: opacity; transform: none !important; filter: none !important; transition: opacity 2s ease-in-out !important; }
.hero-scene { opacity: 0 !important; z-index: 0; }
.hero-scene.is-active { opacity: 1 !important; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.hero-scene { transition: opacity 0.3s !important; }
}
.hero-scene { transform-origin: 50% 50%; will-change: opacity, transform; transform: scale(1) !important; transition: opacity 2s ease-in-out, transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.hero-scene.is-active { transform: scale(1.035) !important; transition: opacity 2s ease-in-out, transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
@media (prefers-reduced-motion: reduce) {
.hero-scene, .hero-scene.is-active { transform: none !important; transition: opacity 0.3s !important; }
}
.hero .hero-carousel .hero-scene, .hero .hero-carousel .hero-scene.is-active { will-change: opacity; }
.hero .hero-carousel .hero-scene { opacity: 0 !important; z-index: 0; }
.hero-scene-art { position: absolute; inset: 0px; will-change: transform; }
.hero-scene-art { transform-origin: 50% 50%; transform: scale(1) translate(0px, 0px); }
@media (prefers-reduced-motion: reduce) {
.hero-scene.is-active .hero-scene-art { animation: auto ease 0s 1 normal none running none; transform: none; }
.hero .hero-carousel .hero-scene { transition: opacity 0.3s !important; }
}
.hero .hero-carousel .hero-scene, .hero .hero-carousel .hero-scene.is-active { z-index: 0; transform: none !important; filter: none !important; transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important; opacity: 0 !important; }
.hero .hero-carousel .hero-scene.is-active { opacity: 1 !important; z-index: 1; }
.hero .hero-carousel .hero-scene .hero-scene-art { transform-origin: 65% 45%; animation: auto ease 0s 1 normal none running none !important; }
.hero-blue-veil { background: linear-gradient(90deg, rgba(14, 47, 88, 0.98) 0%, rgba(20, 63, 112, 0.94) 28%, rgba(24, 73, 125, 0.78) 42%, rgba(28, 83, 137, 0.49) 58%, rgba(32, 89, 144, 0.19) 75%, transparent 100%) !important; }
.hero-scene-nav { background: rgba(13, 47, 89, 0.53) !important; }
.hero-scene-tab i { display: none !important; }
.hero .hero-scene-nav { bottom: 30px; }
.hero .hero-scene-tab, .hero .hero-scene-tab:hover, .hero .hero-scene-tab[aria-pressed="true"], .hero .hero-scene-tab[aria-pressed="true"]:hover { background: transparent !important; border: 0px !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0px !important; }
.hero .hero-scene-tab { font-weight: 400 !important; }
.hero .hero-scene-tab[aria-pressed="true"] { color: rgb(237, 245, 252) !important; }
.hero .hero-scene-number { letter-spacing: 0.5px !important; }
@media (max-width: 1000px) {
.hero .hero-scene-nav { gap: 12px !important; }
}
@media (max-width: 750px) {
.hero .hero-scene-nav { bottom: 25px; }
}
.hero .hero-scene-nav { box-sizing: border-box; background: rgba(7, 31, 59, 0.25) !important; backdrop-filter: blur(12px) !important; padding: 4px !important; gap: 4px !important; border: 0px !important; box-shadow: none !important; }
.hero .hero-scene-tab { justify-content: center !important; min-height: 44px !important; padding: 11px 10px !important; gap: 9px !important; border-radius: 10px !important; color: rgba(220, 234, 246, 0.66) !important; background: transparent !important; transition: background 0.35s, color 0.35s !important; }
.hero .hero-scene-tab:hover { background: rgba(222, 237, 249, 0.06) !important; color: rgb(224, 237, 247) !important; }
.hero .hero-scene-tab[aria-pressed="true"], .hero .hero-scene-tab[aria-pressed="true"]:hover { background: rgba(206, 227, 244, 0.13) !important; color: rgb(240, 247, 252) !important; box-shadow: none !important; }
.hero .hero-scene-number { color: rgba(171, 199, 222, 0.6) !important; font-size: 10px !important; line-height: 1.5 !important; }
.hero .hero-scene-tab[aria-pressed="true"] .hero-scene-number { color: rgb(178, 210, 236) !important; }
.hero .hero-scene-tab:focus-visible { outline: rgb(176, 206, 229) solid 2px !important; outline-offset: 2px !important; border-radius: 10px !important; }
@media (max-width: 1000px) {
.hero .hero-scene-tab { font-size: 11px !important; gap: 6px !important; padding: 11px 6px !important; }
}
@media (max-width: 750px) {
.hero .hero-scene-nav { gap: 4px !important; padding: 4px !important; }
.hero .hero-scene-tab { min-height: 40px !important; font-size: 11px !important; padding: 9px 5px !important; }
}
.hero .hero-scene-nav { width: auto !important; left: max(56px, -660px + 50vw) !important; right: max(56px, -660px + 50vw) !important; border-radius: var(--radius, 10px) !important; }
.hero .hero-scene-tab, .hero .hero-scene-tab:hover, .hero .hero-scene-tab[aria-pressed="true"], .hero .hero-scene-tab[aria-pressed="true"]:hover, .hero .hero-scene-tab:focus-visible { border-radius: var(--radius, 10px) !important; }
@media (max-width: 1180px) {
.hero .hero-scene-nav { width: auto !important; left: 36px !important; right: 36px !important; }
}
@media (max-width: 650px) {
.hero .hero-scene-nav { width: auto !important; left: 20px !important; right: 20px !important; }
}
.catalog-page { background: rgb(243, 246, 248) !important; }
.catalog-page #resources { padding: 0px !important; background: rgb(243, 246, 248) !important; color: var(--site-ink) !important; }
.catalog-page-head { padding: 34px 0px 44px; background: var(--site-gradient); color: rgb(255, 255, 255); }
.catalog-page .catalog-back { margin: 0px 0px 26px !important; font-size: 13px !important; color: rgb(200, 219, 237) !important; }
.catalog-page-head h1 { font-size: 42px; font-weight: 500; line-height: 1.35; margin: 0px 0px 16px; }
.catalog-page-head p { font-size: 16px; line-height: 1.7; color: rgb(215, 229, 241); margin: 0px; }
.catalog-page-content { padding-top: 30px; padding-bottom: 55px; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.catalog-filter { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgb(230, 236, 241); }
.catalog-filter button { border: 0px; border-radius: 10px; padding: 12px 15px; background: transparent; color: rgb(102, 120, 136); font-size: 14px; font-weight: 400; line-height: 1.5; }
.catalog-filter button[aria-pressed="true"] { background: rgb(255, 255, 255); color: var(--site-blue); }
.catalog-filter small { font-size: 11px; opacity: 0.65; margin-left: 8px; }
.directory-search { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: white; border-radius: 10px; width: 340px; max-width: 100%; box-sizing: border-box; color: rgb(120, 144, 164); }
.directory-search svg { width: 19px; height: 19px; flex: 0 0 auto; }
.directory-search input { border: 0px; outline: none; width: 100%; min-width: 0px; background: none; font: 13px / 1.5 "Microsoft YaHei", sans-serif; color: rgb(53, 79, 101); }
.directory-search:focus-within { outline: rgb(145, 183, 215) solid 2px; outline-offset: 2px; }
.directory-status { font-size: 12px; color: rgb(117, 132, 147); padding: 22px 0px 15px; }
.catalog-page .catalog-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; }
.catalog-page .catalog-card { overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; text-align: left; background: rgb(255, 255, 255) !important; border: 0px !important; border-radius: 10px !important; box-shadow: none !important; }
.catalog-page .catalog-card:hover { transform: translateY(-4px); box-shadow: rgba(29, 65, 97, 0.05) 0px 12px 30px !important; }
.catalog-page .catalog-art { height: 245px; position: relative; background: linear-gradient(140deg, rgb(232, 238, 241), rgb(220, 230, 235)) !important; }
.catalog-page .catalog-art svg { height: 205px; max-width: 310px; }
.catalog-page .green-id-label { background: rgba(255, 255, 255, 0.863) !important; color: rgb(65, 105, 130) !important; }
.catalog-page .catalog-detail-label { font-size: 12px !important; }
.directory-empty { text-align: center; padding: 70px 0px; }
.directory-empty[hidden] { display: none; }
.directory-empty h3 { font-size: 23px; font-weight: 500; }
.directory-empty p { font-size: 14px; color: rgb(117, 132, 147); }
.directory-empty .button { margin: 20px auto 0px; }
@media (max-width: 1050px) {
.catalog-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
.directory-search { width: 100%; }
.catalog-page .catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 650px) {
.catalog-page-head { padding: 24px 0px 32px; }
.catalog-page-head h1 { font-size: 30px; }
.catalog-page-head p { font-size: 13px; }
.catalog-filter { display: grid; grid-template-columns: 1fr 1fr; }
.catalog-filter button { font-size: 12px; padding: 10px; }
.catalog-page .catalog-grid { grid-template-columns: 1fr; gap: 20px; }
.catalog-page .catalog-art { height: 220px; }
}
.catalog-page, .catalog-page #resources { background: rgb(229, 235, 240) !important; }
.catalog-page-head { position: relative; isolation: isolate; overflow: hidden; }
.catalog-page-head::before { content: ""; position: absolute; inset: 0px; z-index: -1; opacity: 0.13; background-image: linear-gradient(30deg, transparent 48%, rgb(156, 197, 224) 49%, rgb(156, 197, 224) 50%, transparent 51%), linear-gradient(150deg, transparent 48%, rgb(156, 197, 224) 49%, rgb(156, 197, 224) 50%, transparent 51%); background-size: 120px 70px; mask-image: linear-gradient(90deg, transparent 30%, rgb(0, 0, 0)); }
.catalog-page-head::after { content: ""; position: absolute; right: 10%; top: -90px; width: 370px; height: 370px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 195, 223, 0.075), transparent 70%); z-index: -1; }
.catalog-page-head::before, .catalog-page-head::after { display: none !important; }
.catalog-page .catalog-filter { background: rgb(203, 215, 225) !important; }
.catalog-page .catalog-filter button { color: rgb(66, 93, 114) !important; }
.catalog-page .catalog-filter button[aria-pressed="true"] { background: rgb(255, 255, 255) !important; color: var(--site-blue) !important; }
.catalog-page .catalog-filter button:hover { background: rgba(255, 255, 255, 0.376); }
.catalog-page .catalog-filter small { opacity: 0.8; }
.product-information > h3 { display: block !important; }
.product-information > h3 { font-weight: 600 !important; color: rgb(32, 59, 76); }
.product-information > h3 { line-height: 1.5 !important; }
@media (max-width: 500px) {
.product-information { padding: 20px 22px !important; }
}
.product-full { align-items: stretch !important; }
.product-full > .product-identity { align-self: stretch !important; }
.product-full > .product-left { align-self: stretch !important; }
.product-information { display: flex; flex-direction: column; }
.product-information > h3 { flex: 0 0 auto; }
@media (max-width: 750px) {
.product-information { display: block; }
}
@media (min-width: 751px) {
.product-information { grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: auto auto repeat(3, minmax(76px, 1fr)) auto repeat(2, minmax(76px, 1fr)); gap: 0px 24px; display: grid !important; align-content: stretch !important; }
.product-information > h3 { grid-column: 1 / -1; margin: 0px 0px 18px !important; }
.product-information .product-specifications { display: contents !important; }
}
.green-id-label, .catalog-art > .green-id-label, .recommend-art > .green-id-label, .catalog-page .green-id-label { color: rgb(255, 255, 255) !important; font-weight: 400 !important; border: 0px !important; box-shadow: none !important; }
.case-entry .case-visual { min-height: 0px !important; }
.catalog-art, .catalog-page .catalog-art { aspect-ratio: 425 / 250; height: auto !important; min-height: 0px !important; }
.topic-feature .topic-image, .topic-small .topic-image { aspect-ratio: 425 / 250; height: auto !important; min-height: 0px !important; }
.detail-grid .detail-overview .modal-img { aspect-ratio: 610 / 210; height: auto !important; min-height: 0px !important; max-height: none !important; }
.product-left .product-display { aspect-ratio: 610 / 210; height: auto !important; min-height: 0px !important; max-height: none !important; }
@media (min-width: 1432px) {
.hero { min-height: 740px !important; height: 740px !important; }
.case-entry .case-panel, .case-entry:nth-child(2n) .case-panel { grid-template-columns: 820px minmax(0px, 1fr) !important; min-height: 500px !important; }
.case-entry .case-visual { width: 820px !important; }
.catalog-grid, .catalog-grid:has(> .catalog-card:nth-child(5)), .catalog-page .catalog-grid { grid-template-columns: repeat(3, minmax(0px, 425px)) !important; column-gap: 22.5px !important; }
.catalog-art, .catalog-page .catalog-art { width: 425px !important; height: 250px !important; }
.topic-layout { grid-template-columns: repeat(3, minmax(0px, 425px)) !important; gap: 22.5px !important; }
.topic-feature .topic-image, .topic-small .topic-image { width: 425px !important; height: 250px !important; }
.recommend-product { grid-template-columns: 280px minmax(0px, 1fr) !important; }
.recommend-product .recommend-art { width: 280px !important; }
#dialog:not(.contact-dialog) .modal-body { padding-left: 37.5px !important; padding-right: 37.5px !important; }
#dialog:not(.contact-dialog) .detail-grid, #dialog:not(.contact-dialog) .product-full { grid-template-columns: 610px 610px !important; column-gap: 25px !important; }
.detail-grid .detail-overview .modal-img, .product-left .product-display { width: 610px !important; height: 210px !important; min-height: 210px !important; max-height: 210px !important; }
.product-left { grid-template-rows: 210px 1fr !important; }
}
@media (max-width: 1431px) and (min-width: 751px) {
.product-left { grid-template-rows: auto 1fr !important; }
}
@media (max-width: 750px) {
.recommend-product .recommend-art { width: 100% !important; }
.product-left .product-display { min-height: 0px !important; }
}
.case-entry .case-panel { align-items: stretch !important; }
.case-entry .case-visual { min-width: 0px; align-self: stretch !important; height: auto !important; aspect-ratio: auto !important; }
.case-entry .case-visual img { width: 100%; height: 100%; object-fit: cover; }
.recommend-product { align-items: stretch !important; }
.recommend-product .recommend-art { overflow: hidden; align-self: stretch !important; height: 100% !important; aspect-ratio: auto !important; min-height: 250px !important; }
.recommend-product .recommend-art img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1432px) {
.case-entry .case-panel { height: 500px !important; min-height: 500px !important; }
.case-entry .case-visual { height: 500px !important; }
}
@media (min-width: 751px) and (max-width: 1431px) {
.case-entry .case-panel { min-height: 0px !important; }
.case-entry .case-visual { min-height: 320px !important; height: auto !important; }
.recommend-product .recommend-art { min-height: 225px !important; }
}
@media (max-width: 750px) {
.case-entry .case-visual { width: 100% !important; height: auto !important; aspect-ratio: 820 / 500 !important; min-height: 0px !important; }
.recommend-product .recommend-art { height: 100% !important; min-height: 225px !important; }
}
.case-visual, .catalog-art, .recommend-art, .topic-image, .modal-img, .product-display { position: relative !important; overflow: hidden !important; }
.case-visual > img, .catalog-art > img, .recommend-art > img, .topic-image > img, .modal-img > img, .product-display > img, .case-visual > picture, .catalog-art > picture, .recommend-art > picture, .topic-image > picture, .modal-img > picture, .product-display > picture { position: absolute !important; inset: 0px !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important; margin: 0px !important; padding: 0px !important; border-radius: 0px !important; }
.case-visual > picture img, .catalog-art > picture img, .recommend-art > picture img, .topic-image > picture img, .modal-img > picture img, .product-display > picture img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; }
.hero-scene-art { background-size: cover !important; background-position: center center !important; }
.hero-scene-art > img, .hero-scene-art > picture { position: absolute; inset: 0px; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0px !important; object-fit: cover !important; object-position: center center !important; }
.hero-scene-art > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
@media (min-width: 1432px) {
.recommend-product { height: 250px !important; min-height: 250px !important; }
.recommend-product .recommend-art { height: 250px !important; min-height: 250px !important; }
.recommend-copy { padding: 20px 24px !important; }
.recommend-copy h4 { font-size: 21px !important; margin: 8px 0px 12px !important; }
.recommend-copy .product-material { margin-bottom: 12px !important; }
}
button:focus-visible, a:focus-visible { outline-color: var(--site-blue, #285c86); }
@media (max-width: 420px) {
.nav { gap: 8px; }
.brand { gap: 8px; min-width: 0px; flex-shrink: 1; }
.brand > div { min-width: 0px; }
.brand-name { line-height: 1.5; font-size: 12px !important; white-space: normal !important; }
.nav-action { gap: 0px; flex-shrink: 0; }
.menu { padding: 8px 10px; }
}
.document-stage:not(.source-front) .front-paper { z-index: 2; opacity: 1; left: 26px !important; top: 15px !important; }
.document-stage:not(.source-front) .back-paper { z-index: 1; opacity: 0.94; left: 0px !important; top: 15px !important; }
.document-stage.source-front .back-paper { z-index: 3; opacity: 1; left: 26px !important; top: 15px !important; }
.document-stage.source-front .front-paper { z-index: 1; opacity: 0.94; left: 0px !important; top: 15px !important; }
:root { --interaction-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.catalog-card, .recommend-product, .topic-feature, .topic-small, .case-entry, .case-panel, .catalog-art, .recommend-art, .topic-image { transform: none !important; translate: none !important; animation: auto ease 0s 1 normal none running none !important; opacity: 1 !important; transition: none !important; }
.catalog-art svg, .catalog-art img, .recommend-art svg, .recommend-art img, .topic-image svg, .topic-image img { transform: none !important; animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.catalog-card:hover { box-shadow: none !important; }
.recommend-product:hover { background: var(--card-background) !important; }
.project-enter { animation: auto ease 0s 1 normal none running none !important; }
html.motion .reveal, .v6-reveal { opacity: 1 !important; transform: none !important; translate: none !important; animation: auto ease 0s 1 normal none running none !important; }
.button, .textlink, .footer-route, .product-detail-button, .catalog-detail-label, .catalog-filter button, .report-switch button, .hero-scene-tab, .contact-purpose label, .nav-links a, .close { transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)); transition: transform 0.85s var(--interaction-ease) !important; }
.button:hover, .button.secondary:hover, .button.white:hover { background: var(--rest-background) !important; box-shadow: var(--rest-shadow, none) !important; color: var(--rest-color) !important; }
.button:active, .textlink:active, .footer-route:active, .product-detail-button:active { scale: 0.975; transition-duration: 0.25s !important; }
.button, .textlink, .footer-route { transition: transform 0.85s var(--interaction-ease),
          scale 0.5s var(--interaction-ease) !important; }
.action-circle { overflow: hidden; transition: transform 1s var(--interaction-ease) !important; }
.button:hover .action-circle, .footer-route:hover .action-circle { transform: translateX(6px) rotate(-8deg); }
.action-circle svg { transition: transform 1s var(--interaction-ease) !important; }
.button:hover .action-circle svg, .footer-route:hover .action-circle svg { animation: arrow-route 1.25s var(--interaction-ease) both; }
@keyframes arrow-route {
0% { transform: translateX(0px); opacity: 1; }
42% { transform: translateX(22px); opacity: 0; }
43% { transform: translateX(-22px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
.textlink .arrow { transition: transform 1s var(--interaction-ease) !important; }
.textlink:hover .arrow { transform: translateX(9px) !important; }
.product-detail-button:hover, .catalog-detail-label:hover { transform: translateX(5px); }
.close { transition: transform 1s var(--interaction-ease) !important; }
.close:hover { transform: rotate(90deg) !important; }
.nav-links a:hover { transform: translateY(-3px); }
.kinetic-word { display: inline-flex; line-height: 1.5; overflow: hidden; vertical-align: middle; }
.kinetic-letter { position: relative; display: inline-block; transition-delay: calc(var(--letter-index) * 35ms); }
.kinetic-letter::after { content: attr(data-letter); position: absolute; left: 0px; top: 100%; font: inherit; color: inherit; }
.button:hover .kinetic-letter, .button:focus-visible .kinetic-letter { transform: translateY(-100%); }
.report-switch button.interaction-selected, .catalog-filter button.interaction-selected { animation: selection-settle 0.9s var(--interaction-ease); }
@keyframes selection-settle {
0% { scale: 0.965; }
100% { scale: 1; }
}
dialog[open] { animation: dialog-arrive 0.7s var(--interaction-ease); }
dialog[open]::backdrop { animation: 0.65s ease 0s 1 normal none running backdrop-arrive; }
@keyframes dialog-arrive {
0% { opacity: 0; translate: 0px 16px; }
100% { opacity: 1; translate: 0px; }
}
@keyframes backdrop-arrive {
0% { opacity: 0; }
100% { opacity: 1; }
}
.contact-purpose input:checked + span::before { animation: check-arrive 0.65s var(--interaction-ease); }
@keyframes check-arrive {
0% { scale: 0.5; }
100% { scale: 1; }
}
@media (hover: none) {
.button, .textlink, .footer-route { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.kinetic-letter, .button, .textlink, .footer-route, .action-circle, .action-circle svg, .close, dialog[open], dialog[open]::backdrop { animation: auto ease 0s 1 normal none running none !important; transition: none !important; transform: none !important; }
}
.document-stage { perspective: 1600px; --fly-x: 42px; --dive-x: -38px; }
.document-stage .front-paper, .document-stage .back-paper { position: absolute; transform-origin: center center; opacity: 1; left: 26px !important; right: auto !important; top: 15px !important; }
.document-stage:not(.source-front) .front-paper, .document-stage.source-front .back-paper { transform: translate3d(0px, 0px, 30px) rotate(2deg); filter: brightness(1); z-index: 10; box-shadow: rgba(12, 38, 53, 0.3) 0px 28px 60px; cursor: default; }
.document-stage:not(.source-front) .back-paper, .document-stage.source-front .front-paper { transform: translate3d(-18px, -14px, -35px) rotate(-3.5deg) scale(0.985); filter: brightness(0.92); z-index: 2; box-shadow: rgba(12, 38, 53, 0.18) 0px 14px 30px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
.document-stage:not(.is-swapping):not(.source-front) .back-paper:hover, .document-stage:not(.is-swapping).source-front .front-paper:hover { transform: translate3d(-30px, -23px, -12px) rotate(-4.5deg) scale(0.99); filter: brightness(1.02); box-shadow: rgba(12, 38, 53, 0.24) 0px 20px 42px; }
}
.document-stage .front-paper:focus-visible, .document-stage .back-paper:focus-visible { outline: rgb(67, 128, 178) solid 2px; outline-offset: 4px; }
.document-stage.is-swapping .front-paper, .document-stage.is-swapping .back-paper { cursor: wait; transition: none !important; }
.document-stage .cert-coming { z-index: 15 !important; }
.document-stage .cert-going { z-index: 2 !important; }
@media (max-width: 750px) {
.document-stage { --fly-x: 24px; --dive-x: -22px; }
}
@media (prefers-reduced-motion: reduce) {
.document-stage .front-paper, .document-stage .back-paper { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.button, .textlink, .footer-route, .product-detail-button, .catalog-detail-label, .topic-card-action { transform: translateX(0px) !important; }
.case-entry .case-info .textlink:hover, .button:hover, .button.secondary:hover, .button.white:hover, .textlink:hover, .footer-route:hover, .product-detail-button:hover, .catalog-detail-label:hover, .topic-card-action:hover { transform: translateX(5px) !important; }
.topic-card-action { pointer-events: auto; }
.button .kinetic-letter, .button:hover .kinetic-letter, .button:focus-visible .kinetic-letter { transform: none !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
.button .action-circle, .button:hover .action-circle, .footer-route .action-circle, .footer-route:hover .action-circle, .button .action-circle svg, .button:hover .action-circle svg, .footer-route .action-circle svg, .footer-route:hover .action-circle svg, .textlink .arrow, .textlink:hover .arrow, .topic-card-action > span { transform: none !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
.button, .textlink, .footer-route, .product-detail-button, .catalog-detail-label, .topic-card-action { transition: transform 0.8s linear !important; }
@media (prefers-reduced-motion: reduce) {
.button, .textlink, .footer-route, .product-detail-button, .catalog-detail-label, .topic-card-action { transition: none !important; }
}
.case-entry .case-info .textlink, .case-entry .case-info .textlink:hover, .case-entry .case-info .textlink:focus-visible { background: rgb(255, 255, 255) !important; color: var(--site-blue) !important; }
.outcome-action .report-switch button, .case-navigation .scene-tab, .case-navigation .project-tabs button { transition: background 0.35s !important; }
.case-navigation .scene-tab:not([aria-selected="true"]):hover, .case-navigation .scene-tab:not([aria-selected="true"]):focus-visible, .case-navigation .project-tabs button:not([aria-selected="true"]):hover, .case-navigation .project-tabs button:not([aria-selected="true"]):focus-visible { background: rgb(203, 219, 232) !important; }
@media (prefers-reduced-motion: reduce) {
.outcome-action .report-switch button, .case-navigation .scene-tab, .case-navigation .project-tabs button { transition: none !important; }
}
.case-navigation .scene-tab[aria-selected="true"]::after, .case-navigation .project-tabs button[aria-selected="true"]::after { position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; opacity: 0; content: "" !important; display: block !important; width: auto !important; height: auto !important; border: 0px !important; background: rgb(255, 255, 255) !important; transition: opacity 0.35s !important; }
.case-navigation .scene-tab[aria-selected="true"]:hover::after, .case-navigation .project-tabs button[aria-selected="true"]:hover::after { opacity: 0.08; }
.case-navigation .scene-tab, .case-navigation .project-tabs button, .outcome-action .report-switch button { position: relative; isolation: isolate; overflow: hidden; transition: none !important; }
.case-navigation .scene-tab:not([aria-selected="true"]):hover, .case-navigation .project-tabs button:not([aria-selected="true"]):hover, .case-navigation .scene-tab:not([aria-selected="true"]):focus-visible, .case-navigation .project-tabs button:not([aria-selected="true"]):focus-visible { background: transparent !important; }
.outcome-action .report-switch button[aria-pressed="true"]:hover { background: rgb(255, 255, 255) !important; }
.case-navigation .scene-tab::after, .case-navigation .project-tabs button::after { display: none !important; }
.slow-feedback { position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: none !important; }
.nav-links a { display: inline-block; transform-origin: center center; transition: transform 0.3s !important; }
.nav-links a:hover, .nav-links a:focus-visible { transform: scale(1.06) !important; font-weight: 700 !important; }
.outcome-uses > div > svg { transform-origin: center center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s !important; }
.outcome-uses > div:hover > svg { transform: translateY(-3px) scale(1.08); filter: drop-shadow(rgba(36, 89, 179, 0.16) 0px 3px 4px); }
.outcome-uses > div:nth-child(1):hover > svg { transform: translateY(-3px) scale(1.08) rotate(-4deg); }
.outcome-uses > div:nth-child(3):hover > svg { transform: translateY(-3px) scale(1.08) rotate(4deg); }
.outcome-uses > div > svg, .partner-benefits > div > svg { transform-origin: center center; }
.outcome-uses > div:hover > svg, .outcome-uses > div:nth-child(1):hover > svg, .outcome-uses > div:nth-child(3):hover > svg, .partner-benefits > div:hover > svg { filter: none !important; }
.case-navigation .scene-tab[aria-selected="true"] .slow-feedback, .case-navigation .project-tabs button[aria-selected="true"] .slow-feedback, .outcome-action .report-switch button[aria-pressed="true"] .slow-feedback { opacity: 0 !important; }
.menu { align-items: center; justify-content: center; padding: 8px !important; line-height: 1 !important; }
.menu svg { display: block; margin: auto; }
.close, .close:hover, .contact-dialog .close { box-sizing: border-box; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; padding: 0px !important; line-height: 1 !important; transform: none !important; }
.close svg { display: block; transform-origin: center center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important; }
.close:hover svg, .close:focus-visible svg { transform: rotate(90deg); }
.case-navigation .scene-tab[aria-selected="true"] .slow-feedback, .case-navigation .project-tabs button[aria-selected="true"] .slow-feedback, .outcome-action .report-switch button[aria-pressed="true"] .slow-feedback { display: none !important; }
.case-navigation .scene-tab[aria-selected="true"]::before, .case-navigation .scene-tab[aria-selected="true"]::after, .case-navigation .project-tabs button[aria-selected="true"]::before, .case-navigation .project-tabs button[aria-selected="true"]::after { display: none !important; }
.case-navigation .scene-tab[aria-selected="true"]:hover { background: var(--site-gradient) !important; }
.case-navigation .project-tabs button[aria-selected="true"]:hover { background: var(--project-selected-background) !important; }
.close:hover, .contact-dialog .close:hover, .close:focus-visible { background: var(--site-blue) !important; color: rgb(255, 255, 255) !important; transition: background 0.3s, color 0.3s !important; }
.outcome-uses > div > svg, .partner-benefits > div > svg { transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.outcome-uses > div:hover > svg, .outcome-uses > div:nth-child(1):hover > svg, .outcome-uses > div:nth-child(3):hover > svg, .partner-benefits > div:hover > svg { transform: scale(1.2) !important; }
.document-stage:not(.source-front) .back-paper, .document-stage.source-front .front-paper { opacity: 0.55; }
.outcome-action .report-switch { border-radius: var(--radius) !important; padding: 5px !important; gap: 4px !important; }
.outcome-action .report-switch button, .outcome-action .report-switch button:first-child, .outcome-action .report-switch button:last-child { border: 0px !important; border-radius: var(--radius) !important; color: var(--site-blue) !important; background: transparent !important; box-shadow: none !important; }
.outcome-action .report-switch button[aria-pressed="true"], .outcome-action .report-switch button[aria-pressed="true"]:hover { background: var(--site-blue) !important; color: rgb(255, 255, 255) !important; }
.document-stage { transform-style: flat !important; }
.document-stage .front-paper, .document-stage .back-paper { backface-visibility: hidden; will-change: transform, opacity; filter: none !important; box-shadow: rgba(12, 38, 53, 0.24) 0px 22px 48px !important; transition: none !important; }
.document-stage.is-swapping .cert-coming { animation: 1.5s cubic-bezier(0.37, 0, 0.3, 1) 0s 1 normal both running cert-composite-in !important; }
.document-stage.is-swapping .cert-going { animation: 1.5s cubic-bezier(0.37, 0, 0.3, 1) 0s 1 normal both running cert-composite-out !important; }
@keyframes cert-composite-in {
0% { transform: translate3d(-18px, -14px, -35px) rotate(-3.5deg) scale(0.985); opacity: 0; }
100% { transform: translate3d(0px, 0px, 30px) rotate(2deg); opacity: 1; }
}
@keyframes cert-composite-out {
0% { transform: translate3d(0px, 0px, 30px) rotate(2deg); opacity: 1; }
100% { transform: translate3d(-18px, -14px, -35px) rotate(-3.5deg) scale(0.985); opacity: 0.55; }
}
.document-stage:not(.source-front) .front-paper, .document-stage.source-front .back-paper { opacity: 1; }
.document-stage:not(.is-swapping):not(.source-front) .back-paper:hover, .document-stage:not(.is-swapping).source-front .front-paper:hover { transform: translate3d(-18px, -14px, -35px) rotate(-3.5deg) scale(0.985) !important; }
.outcome-action .report-switch button[aria-pressed="false"] { transition: background-color 0.35s !important; }
.outcome-action .report-switch button[aria-pressed="true"] .slow-feedback { display: none !important; }
.outcome-action .report-switch button[aria-pressed="false"]:hover, .outcome-action .report-switch button[aria-pressed="false"]:focus-visible { background: rgb(183, 205, 225) !important; }
.outcome-action > .button, .partner-entry > .button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px 16px !important; }
.outcome-action > .button > .service-label, .partner-entry > .button > .service-label { display: block !important; flex: 0 0 auto !important; width: auto !important; margin: 0px !important; line-height: 1.5 !important; white-space: nowrap !important; }
.outcome-action > .button > .action-circle, .partner-entry > .button > .action-circle { position: static !important; display: grid !important; place-items: center !important; flex: 0 0 24px !important; width: 24px !important; height: 24px !important; margin: 0px !important; padding: 0px !important; align-self: center !important; }
.outcome-action > .button > .action-circle svg, .partner-entry > .button > .action-circle svg { display: block !important; width: 15px !important; height: 15px !important; margin: 0px !important; }
#outcomes .section-title { font-size: var(--shared-title-size, 40px) !important; line-height: var(--shared-title-line, 56px) !important; margin: 0 0 var(--shared-title-gap, 40px) !important; }
.outcome-action .report-switch button .slow-feedback { display: none !important; }
.outcome-action .report-switch { background: rgb(255, 255, 255) !important; border: 0px !important; box-shadow: none !important; }
.document-stage, .report-stack-wrap, .document-stage .front-paper, .document-stage .back-paper { border: 0px !important; outline: 0px !important; }
.catalog-page .catalog-page-head::before, .catalog-page .catalog-page-head::after { display: none !important; }
.brand-mark { flex-direction: column !important; align-items: center !important; justify-content: center !important; font-weight: 400 !important; }
.brand-mark { box-sizing: border-box !important; gap: 2px !important; }
.brand-mark { position: relative !important; display: block !important; overflow: hidden !important; padding: 0px !important; line-height: 1 !important; }
.brand-mark .brand-lockup { display: block !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
.catalog-copy { box-sizing: border-box !important; height: 225px !important; min-height: 225px !important; padding: 25px !important; }
.catalog-grid, .catalog-page .catalog-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 22.5px !important; }
@media (max-width: 1000px) {
.catalog-grid, .catalog-page .catalog-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 20px !important; }
}
@media (max-width: 650px) {
.catalog-grid, .catalog-page .catalog-grid { grid-template-columns: minmax(0px, 1fr) !important; gap: 20px !important; }
}
.catalog-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.catalog-copy > .catalog-detail-label, .catalog-page .catalog-copy > .catalog-detail-label { display: flex !important; align-items: center !important; margin-top: auto !important; margin-bottom: 0px !important; font-size: 14px !important; }
.catalog-copy, .catalog-page .catalog-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; height: 225px !important; min-height: 225px !important; padding: 25px !important; background: rgb(247, 250, 252) !important; }
.partner-passport { will-change: transform; backface-visibility: hidden; isolation: isolate; transform: translateZ(0px) rotate(2deg) !important; }
.partner-benefits > div { isolation: isolate; }
.green-id-label, .catalog-art > .green-id-label, .recommend-art > .green-id-label, .catalog-page .green-id-label { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 23px !important; min-width: 0px !important; min-height: 0px !important; padding: 4px 6px !important; background: rgb(52, 104, 89) !important; border-radius: 10px !important; line-height: 1 !important; overflow: hidden !important; }
.detail-consult .button { min-width: 210px !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; }
.detail-consult .button .action-circle, .topic-card-action .action-circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; border: 1px solid !important; border-radius: 50% !important; margin: 0px !important; }
.detail-consult .button .action-circle svg, .topic-card-action .action-circle svg { width: 15px !important; height: 15px !important; display: block !important; }
.topic-card-action { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.close, .contact-dialog .close, .close:hover, .close:focus-visible { box-sizing: border-box !important; width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; aspect-ratio: 1 / 1 !important; padding: 0px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; transform: none !important; }
.close svg { width: 18px !important; height: 18px !important; }
@media (max-width: 750px) {
.document-stage { height: 928px !important; min-height: 928px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 858px !important; }
}
@media (max-width: 350px) {
.document-stage { height: 970px !important; min-height: 970px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 900px !important; }
}
.product-connect .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 225px !important; }
.product-connect .action-circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; border: 1px solid !important; border-radius: 50% !important; }
.product-connect .action-circle svg { width: 15px !important; height: 15px !important; }
.catalog-page .catalog-page-head { background: linear-gradient(125deg, rgb(22, 59, 104) 0%, rgb(36, 89, 135) 60%, rgb(57, 115, 157) 100%) !important; animation: auto ease 0s 1 normal none running none !important; }
.topic-image > img { z-index: 0 !important; opacity: 1 !important; visibility: visible !important; display: block !important; }
.case-visual, .modal-img { position: relative; overflow: hidden; }
.case-visual > .case-photo, .modal-img > .case-photo { position: absolute !important; inset: 0px !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; display: block !important; z-index: 0 !important; opacity: 1; transform: none !important; }
.hero-camera { position: absolute; inset: 0px; transform-origin: 65% 45%; }
.hero .hero-camera > img { position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.hero .hero-carousel .hero-scene .hero-scene-art { transform: none !important; will-change: auto; }
.hero .hero-carousel .hero-scene { will-change: auto; transform: none !important; }
.hero .hero-carousel .hero-scene.is-active { will-change: opacity; }
.report-stage:not(.is-swapping) .report-paper { will-change: auto !important; }
.document-stage:not(.is-swapping) .front-paper, .document-stage:not(.is-swapping) .back-paper { will-change: auto !important; }
.outcome-uses > div > svg path, .partner-benefits > div > svg path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; animation: auto ease 0s 1 normal none running none !important; }
.footer-phone-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0px; min-width: 0px; }
.footer-phone-group .phone-separator { color: inherit; }
.footer-company .footer-phone-group { color: rgb(255, 255, 255); line-height: 1.5; }
.topics-section .topic-feature, .topics-section .topic-small { cursor: pointer; }
.resource-section .catalog-card .catalog-art, .topics-section .topic-image { overflow: hidden; }
.resource-section .catalog-card .catalog-art > img.product-photo, .topics-section .topic-image > img { transform-origin: 50% 50%; transform: scale(1) !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
@media (max-width: 1050px) {
.detail-grid, .product-full, .outcomes-layout, .partner-layout { min-width: 0px !important; }
.detail-grid > *, .product-full > *, .outcomes-layout > *, .partner-layout > * { min-width: 0px !important; }
}
@media (max-width: 750px) {
html { text-size-adjust: 100%; }
.wrap { max-width: calc(100% - 40px); }
dialog, dialog.contact-dialog { overscroll-behavior: contain; scroll-padding-top: 78px; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; max-height: calc(100dvh - 24px) !important; margin: auto !important; overflow-y: auto !important; }
.modal-head { padding: 16px 18px !important; gap: 12px !important; z-index: 20 !important; }
.modal-head h2 { min-width: 0px; overflow-wrap: anywhere; font-size: 20px !important; line-height: 1.45 !important; }
.modal-body { padding: 16px !important; min-width: 0px !important; overflow: visible !important; }
.close:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
.close:focus-visible { outline: rgb(40, 92, 134) solid 2px !important; outline-offset: 3px !important; box-shadow: none !important; }
.product-full, .detail-grid { display: grid !important; grid-template-columns: minmax(0px, 1fr) !important; gap: 22px !important; }
.product-left, .product-identity, .detail-grid > .detail-section { width: 100% !important; min-width: 0px !important; }
.product-information { height: auto !important; min-height: 0px !important; }
.product-specifications { height: auto !important; min-height: 0px !important; }
.product-specifications > div { min-height: 64px !important; padding: 14px 0px !important; }
.catalog-copy { min-width: 0px !important; }
.catalog-copy h3 { white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.5 !important; }
.catalog-copy p { white-space: normal !important; overflow-wrap: anywhere !important; }
.report-stack-wrap { padding: 0px 12px !important; min-width: 0px !important; }
.document-stage { max-width: 100% !important; }
.partner-passport { width: 100% !important; max-width: 100% !important; transform: none !important; }
.detail-consult, .product-connect { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
.detail-consult .button, .product-connect .button { min-width: 0px !important; max-width: 100% !important; white-space: normal !important; }
.contact-form input, .contact-form textarea, .contact-form select { font-size: 16px !important; min-width: 0px !important; width: 100% !important; }
.contact-layout { grid-template-columns: minmax(0px, 1fr) !important; }
.contact-purpose > div { gap: 8px !important; }
.contact-purpose span { white-space: normal !important; line-height: 1.5 !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 5px !important; }
}
@media (max-width: 380px) {
.catalog-grid { grid-template-columns: minmax(0px, 1fr) !important; }
.contact-form { grid-template-columns: minmax(0px, 1fr) !important; }
.contact-form > * { grid-column: 1 !important; }
.contact-purpose > div { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
.modal-head h2 { font-size: 18px !important; }
}
@media (max-width: 750px) {
dialog.contact-dialog .contact-form { min-width: 0px !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
dialog.contact-dialog .contact-form .full, dialog.contact-dialog .contact-purpose { grid-column: 1 / -1 !important; min-width: 0px !important; }
dialog.contact-dialog .contact-purpose > div { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
dialog.contact-dialog .contact-purpose label { min-width: 0px !important; overflow: hidden !important; }
.document-stage .front-paper { transform: translate3d(0px, 0px, 12px) rotate(0.5deg) !important; }
.document-stage .back-paper { transform: translate3d(-8px, -8px, -20px) rotate(-0.8deg) !important; }
.document-stage.source-front .back-paper { transform: translate3d(0px, 0px, 12px) rotate(0.5deg) !important; }
.document-stage.source-front .front-paper { transform: translate3d(-8px, -8px, -20px) rotate(-0.8deg) !important; }
.document-stage .cert-coming, .document-stage .cert-going { transform: none !important; }
@keyframes cert-composite-in {
0% { opacity: 0.72; transform: translate3d(-8px, -8px, -20px) rotate(-0.8deg); }
55% { opacity: 0.95; transform: translate3d(4px, -3px, 20px) rotate(0.7deg); }
100% { opacity: 1; transform: translate3d(0px, 0px, 12px) rotate(0.5deg); }
}
@keyframes cert-composite-out {
0% { opacity: 1; transform: translate3d(0px, 0px, 12px) rotate(0.5deg); }
55% { opacity: 0.78; transform: translate3d(-6px, 3px, -12px) rotate(-0.4deg); }
100% { opacity: 0.72; transform: translate3d(-8px, -8px, -20px) rotate(-0.8deg); }
}
}
@media (max-width: 380px) {
dialog.contact-dialog .contact-form { grid-template-columns: minmax(0px, 1fr) !important; }
dialog.contact-dialog .contact-purpose > div { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
}
#modal-body .product-display, #modal-body .modal-img { overflow: hidden; isolation: isolate; }
#modal-body .product-display img, #modal-body .modal-img img { transform-origin: center center; }
#modal-body .case-compact { grid-template-rows: auto !important; align-items: start !important; }
#modal-body .case-compact .detail-overview { flex: 0 0 auto !important; height: auto !important; min-height: 0px !important; }
#modal-body .case-compact .detail-summary { padding: 24px !important; }
#modal-body .case-compact .detail-summary > h3 { margin: 0px !important; }
.case-evaluation-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
#modal-body .case-evaluation-heading h4 { margin: 0px !important; font-size: 16px !important; line-height: 1.6 !important; color: rgb(35, 70, 62) !important; }
.case-basis-tag { background: rgb(234, 241, 237); color: rgb(54, 95, 81); padding: 5px 9px; border-radius: 10px; font-size: 11px; line-height: 1.5; }
.case-evidence-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.case-evidence-heading h4 { font-size: 14px; color: rgb(35, 76, 108); margin: 0px; line-height: 1.6; }
.case-evidence-heading small { font-size: 10px; color: rgb(106, 126, 142); }
@media (max-width: 750px) {
#modal-body .case-compact .detail-summary { padding: 20px !important; }
}
.hero-slide { background: rgb(33, 91, 137) !important; }
.catalog-art, .product-display, .topic-image { background: rgb(229, 234, 240) !important; }
#modal-body .case-compact .detail-section-heading .case-preview-mark { line-height: 1.6; white-space: nowrap; font-size: 11px !important; font-weight: 400 !important; color: rgb(100, 119, 137) !important; margin-left: 10px !important; }
@media (max-width: 360px) {
#modal-body .case-compact .detail-section-heading .case-preview-mark { margin-left: 5px !important; font-size: 10px !important; }
}
.xr135-card { box-sizing: border-box; position: relative; display: flex; width: 100%; min-height: 385px; overflow: hidden; border-radius: 10px; isolation: isolate; background: linear-gradient(118deg, rgb(52, 106, 89), rgb(72, 125, 101) 63%, rgb(114, 151, 121)); color: rgb(241, 245, 234); box-shadow: rgba(22, 54, 39, 0.46) 0px 20px 55px -30px; text-align: left; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.xr135-card * { box-sizing: border-box; }
.xr135-card aside { width: 81px; flex: 0 0 auto; background: rgb(41, 83, 63); padding: 26px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 19px; }
.xr135-card aside > .xr135-emblem { width: 29px; height: 29px; color: rgb(226, 237, 217); flex: 0 0 auto; }
.xr135-card aside > span { writing-mode: vertical-rl; font-size: 16px; letter-spacing: 1.8px; line-height: 1.4; font-weight: 600; color: rgb(241, 245, 233); white-space: nowrap; }
.xr135-inner { flex: 1 1 0%; min-width: 0px; padding: 28px 26px; position: relative; isolation: isolate; display: flex; flex-direction: column; }
.xr135-card header { padding-bottom: 16px; position: relative; }
.xr135-number { display: block; text-align: left; }
.xr135-label, .xr135-card dt { font-size: 11px; line-height: 1.5; font-weight: 400; color: rgb(206, 223, 206); }
.xr135-number b { display: block; margin-top: 5px; font: 500 12px / 1.7 Arial, sans-serif; letter-spacing: 0.35px; overflow-wrap: anywhere; color: rgb(241, 245, 234); }
.xr135-product-row { margin: 26px 0px 34px; }
.xr135-product h2 { margin: 6px 0px 0px; font-size: 29px; font-weight: 600; line-height: 1.35; letter-spacing: 0.5px; color: rgb(250, 251, 243); }
.xr135-card dl { margin: 0px; min-width: 0px; }
.xr135-meta { display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 0.8fr) minmax(0px, 1.7fr); gap: 19px; margin-bottom: 23px !important; }
.xr135-card dd { margin: 5px 0px 0px; font-size: 13px; line-height: 1.65; font-weight: 400; color: rgb(241, 245, 234); overflow-wrap: anywhere; }
.xr135-footer { display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 0.8fr) minmax(0px, 1.7fr); column-gap: 19px; border-top: 1px solid rgba(227, 240, 221, 0.3); padding-top: 18px; margin-top: auto; }
.xr135-footer > dl { grid-column: 2 / 4; }
.xr135-status > .xr135-label { display: block; }
.xr135-status b { display: block; margin-top: 6px; color: rgb(241, 245, 234); }
.xr135-field { min-width: 0px; }
@media (max-width: 1180px) {
.xr135-inner { padding: 25px 20px; }
.xr135-card aside { width: 66px; padding-inline: 9px; }
.xr135-card aside > span { font-size: 14px; letter-spacing: 1px; }
.xr135-product h2 { font-size: 26px; }
.xr135-meta, .xr135-footer { gap: 12px; }
.xr135-number b { font-size: 11px; }
}
@media (max-width: 600px) {
.xr135-card { min-height: 380px; }
.xr135-card aside { width: 53px; }
.xr135-card aside > span { font-size: 13px; letter-spacing: 1px; }
.xr135-card aside > .xr135-emblem { width: 23px; height: 23px; }
.xr135-inner { padding: 26px 17px; }
.xr135-product h2 { font-size: 24px; }
.xr135-number b { font-size: 10px; }
.xr135-meta, .xr135-footer { grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 0.8fr) minmax(0px, 1.25fr); gap: 11px; }
.xr135-card dt, .xr135-label { font-size: 10px; }
.xr135-card dd { font-size: 11px; line-height: 1.8; }
.xr135-product-row { margin-bottom: 29px; }
}
.xr135-s2 .xr135-credential-depth { position: absolute; z-index: -1; pointer-events: none; }
.xr135-depth-cube { position: absolute; width: 145px; height: 145px; top: 45px; left: 45px; transform-style: preserve-3d; }
.cube-face { position: absolute; inset: 0px; border: 2px solid rgba(231, 246, 217, 0.55); background: linear-gradient(140deg, rgba(223, 241, 206, 0.13), rgba(43, 89, 63, 0.05)); backface-visibility: visible; }
.cube-face i { position: absolute; inset: 17px; border: 1px solid rgba(229, 245, 211, 0.32); }
.face-front { transform: translateZ(72.5px); }
.face-back { transform: rotateY(180deg) translateZ(72.5px); }
.face-right { transform: rotateY(90deg) translateZ(72.5px); background: rgba(23, 68, 46, 0.14); }
.face-left { transform: rotateY(-90deg) translateZ(72.5px); }
.face-top { transform: rotateX(90deg) translateZ(72.5px); background: rgba(233, 248, 215, 0.18); }
.face-bottom { transform: rotateX(-90deg) translateZ(72.5px); background: rgba(24, 64, 46, 0.16); }
@media (max-width: 600px) {
.xr135-s2 .xr135-credential-depth { width: 200px; height: 200px; right: -47px; top: 65px; opacity: 0.32; }
.xr135-depth-cube { left: 28px; top: 25px; }
}
.xr135-s2 .xr135-credential-depth { width: 215px; height: 240px; }
.xr135-fixed-shield { position: absolute; left: 0px; top: 0px; width: 210px; height: 237px; stroke-width: 2.3; color: rgb(224, 238, 213); filter: drop-shadow(rgba(27, 65, 43, 0.15) 0px 1px 1px); }
.xr135-energy-cube { position: absolute !important; left: 75px !important; top: 82px !important; width: 60px !important; height: 60px !important; }
.xr135-energy-face { position: absolute; inset: 0px; }
.xr135-energy-face i { position: absolute; inset: 11px; border: 1px solid rgba(239, 255, 225, 0.5); }
.xr135-energy-front { transform: translateZ(30px); }
.xr135-energy-back { transform: rotateY(180deg) translateZ(30px); }
.xr135-energy-right { transform: rotateY(90deg) translateZ(30px); }
.xr135-energy-left { transform: rotateY(-90deg) translateZ(30px); }
.xr135-energy-top { transform: rotateX(90deg) translateZ(30px); }
.xr135-energy-bottom { transform: rotateX(-90deg) translateZ(30px); }
@media (max-width: 600px) {
.xr135-s2 .xr135-credential-depth { scale: 0.85; transform-origin: right top; top: -7px !important; right: -37px !important; }
}
.xr135-s2 header { position: relative; border-bottom: 0px !important; }
.xr135-s2 header::after { content: ""; position: absolute; left: 0px; bottom: 0px; height: 1px; background: rgba(227, 240, 221, 0.3); }
.energy-core { position: absolute; inset: 16px; transform: translateZ(0px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255, 255, 218) 0%, rgb(217, 255, 167) 32%, rgba(184, 238, 126, 0.15) 72%); box-shadow: rgba(224, 255, 176, 0.75) 0px 0px 14px, rgba(191, 243, 134, 0.3) 0px 0px 27px; }
@media (max-width: 600px) {
.xr135-s2 header::after { width: calc(100% - 95px); }
}
.xr135-s2 .xr135-fixed-shield { stroke-width: 1.1 !important; filter: none !important; }
.xr135-energy-geometry { position: absolute; inset: 0px; }
.upright-energy-core { position: absolute; pointer-events: none; z-index: 1; }
.xr135-s2 .xr135-credential-depth { right: -5px !important; }
.xr135-energy-cube { transform-style: preserve-3d !important; }
.xr135-energy-geometry { transform-style: preserve-3d !important; }
.xr135-s2 .xr135-fixed-shield { color: rgb(196, 216, 192) !important; opacity: 0.43 !important; }
.xr135-energy-face i { border-color: rgba(210, 234, 218, 0.3) !important; box-shadow: none !important; }
@media (max-width: 600px) {
.xr135-s2 .xr135-credential-depth { right: -15px !important; }
}
.xr135-energy-face i { display: none !important; }
.upright-energy-core { border: 1px solid rgba(223, 243, 222, 0.55); border-radius: 50% !important; background: radial-gradient(at 50% 30%, rgb(244, 251, 239) 0%, rgb(198, 230, 209) 38%, rgba(174, 213, 188, 0.25) 76%) !important; box-shadow: rgba(208, 240, 222, 0.38) 0px 0px 10px, rgba(168, 217, 190, 0.15) 0px 0px 19px !important; }
.xr135-energy-geometry { transform: rotateX(35.2644deg) rotateZ(45deg) !important; transform-origin: 30px 30px 0px !important; }
.xr135-energy-cube { transform-origin: 30px 30px 0px !important; rotate: none !important; }
.xr135-s2 .xr135-credential-depth { perspective: 1800px !important; perspective-origin: 105px 112px !important; }
.upright-energy-core { transform: none !important; rotate: none !important; left: 94px !important; top: 95px !important; width: 22px !important; height: 34px !important; }
.block-chain-symbol { position: absolute; inset: 12px; width: 36px; height: 36px; color: rgb(232, 245, 223); opacity: 0.78; }
.xr135-energy-front, .xr135-energy-back, .xr135-energy-left, .xr135-energy-right { background: linear-gradient(135deg, rgba(207, 237, 209, 0.23), rgba(126, 178, 144, 0.13)) !important; }
.xr135-s2 header::after { width: calc(100% - 195px) !important; }
.xr135-energy-face { backface-visibility: visible !important; border: 1px solid rgba(224, 244, 228, 0.66) !important; }
.xr135-energy-front, .xr135-energy-top { background: linear-gradient(140deg, rgba(224, 243, 228, 0.106), rgba(182, 220, 196, 0.024)) !important; }
.xr135-energy-right, .xr135-energy-bottom { background: rgba(53, 107, 76, 0.06) !important; }
.xr135-circuit-face { position: absolute; inset: 0px; width: 60px; height: 60px; color: rgb(214, 239, 218); }
.xr135-s2 .xr135-credential-depth { opacity: 0.62 !important; }
@media (max-width: 600px) {
.xr135-s2 header::after { width: max(18px, 100% - 170px) !important; }
}
@media (max-width: 360px) {
.xr135-s2 header::after { display: none !important; }
}
.xr135-s2 { background: linear-gradient(118deg, rgb(52, 106, 89) 0%, rgb(72, 125, 101) 63%, rgb(114, 151, 121) 100%) !important; }
.xr135-s2 aside { background: rgb(41, 83, 63) !important; }
.xr135-s2 .xr135-credential-depth { top: 7px !important; }
.xr135-s2 .xr135-fixed-cube-frame { left: 15px !important; top: 18px !important; width: 180px !important; height: 180px !important; color: rgb(204, 223, 198) !important; opacity: 0.4 !important; stroke-width: 1.1 !important; filter: none !important; }
.xr135-s2 .xr135-number .xr135-label, .xr135-s2 dt, .xr135-s2 .xr135-product > .xr135-label, .xr135-s2 .xr135-footer > .xr135-status > .xr135-label { color: rgb(206, 223, 206) !important; }
.xr135-s2 .xr135-number b, .xr135-s2 dd, .xr135-s2 .xr135-footer > .xr135-status b { color: rgb(241, 245, 234) !important; }
.xr135-s2 .xr135-product h2 { color: rgb(250, 251, 243) !important; }
.xr135-s2 aside > span { color: rgb(241, 245, 233) !important; }
@media (max-width: 600px) {
.xr135-s2 .xr135-credential-depth { top: 11px !important; }
}
.xr135-circuit-face { opacity: 0.55 !important; }
.xr135-recycling-face { stroke: none !important; stroke-width: 0 !important; fill: currentcolor !important; }
.xr135-energy-face { background: rgba(155, 205, 183, 0.62) !important; border-color: rgba(220, 241, 230, 0.82) !important; box-shadow: rgba(222, 245, 232, 0.1) 0px 0px 12px inset !important; }
.xr135-energy-front { background: linear-gradient(140deg, rgba(201, 232, 219, 0.76), rgba(119, 180, 155, 0.56)) !important; }
.xr135-energy-top { background: linear-gradient(140deg, rgba(221, 240, 227, 0.8), rgba(163, 208, 184, 0.64)) !important; }
.xr135-energy-right { background: linear-gradient(140deg, rgba(99, 163, 144, 0.65), rgba(66, 125, 111, 0.58)) !important; }
.xr135-energy-left { background: linear-gradient(140deg, rgba(169, 213, 191, 0.7), rgba(113, 176, 151, 0.59)) !important; }
.xr135-energy-back { background: linear-gradient(140deg, rgba(153, 197, 177, 0.65), rgba(99, 158, 136, 0.56)) !important; }
.xr135-energy-bottom { background: linear-gradient(140deg, rgba(89, 146, 125, 0.66), rgba(57, 113, 95, 0.6)) !important; }
.xr135-recycling-face { color: rgb(231, 244, 236) !important; opacity: 0.9 !important; }
.detail-grid .xr135-card, .product-identity .xr135-card { box-shadow: none !important; filter: none !important; }
.xr135-status b { font-size: 13px !important; line-height: 1.65 !important; font-weight: 400 !important; }
dialog .xr135-card, .product-identity, .detail-section:has(> .xr135-card) { box-shadow: none !important; filter: none !important; }
.project-dialog .case-evidence-heading { margin-bottom: 4px !important; padding-bottom: 7px !important; }
.project-dialog .case-evidence-heading h4 { margin: 0px !important; font-size: 13px !important; line-height: 1.5 !important; }
@media (max-width: 600px) {
.xr135-status b { font-size: 11px !important; line-height: 1.8 !important; }
.project-dialog .detail-summary { padding: 16px !important; }
}
dialog .modal-body.project-dialog .detail-grid .detail-overview .detail-summary { box-sizing: border-box !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 12px !important; }
.project-dialog .detail-summary > h3 { margin: 0px !important; font-size: 22px !important; line-height: 1.4 !important; }
.project-dialog .project-amount b { font-size: 22px !important; }
.project-dialog .project-amount small { font-size: 12px !important; margin-left: 4px; }
.project-dialog .case-evidence-heading { padding: 0px 0px 6px !important; margin: 0px !important; }
@media (max-width: 600px) {
.project-dialog .detail-summary { padding: 18px 16px !important; gap: 12px !important; }
.project-dialog .detail-summary > h3 { font-size: 20px !important; }
}
.project-dialog .detail-grid.case-compact { gap: 24px !important; align-items: stretch !important; }
.project-dialog .case-compact > .detail-section { min-width: 0px; display: flex !important; flex-direction: column !important; align-self: stretch !important; height: auto !important; }
.project-dialog .case-compact .detail-section-heading { flex: 0 0 auto; margin-bottom: 20px !important; }
.project-dialog .case-compact .detail-overview { min-height: 0px; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; }
dialog .modal-body.project-dialog .detail-grid .detail-overview .detail-summary { height: auto !important; min-height: 0px !important; flex: 1 1 0% !important; }
.project-dialog .case-identity-column > .xr135-card { flex: 0 0 auto !important; }
.project-dialog .case-identity-column > .detail-consult { width: 100% !important; }
@media (max-width: 800px) {
.project-dialog .detail-grid.case-compact { grid-template-columns: 1fr !important; }
.project-dialog .case-compact .detail-summary { gap: 16px !important; }
.project-dialog .case-identity-column > .detail-consult { flex: 0 0 auto !important; min-height: 160px !important; }
}
.product-identity > .product-connect { margin: 24px 0px 0px !important; width: 100% !important; box-sizing: border-box !important; border-radius: 10px !important; }
.product-information { padding: 18px 22px !important; }
.product-information > h3 { font-size: 21px !important; margin: 0px 0px 12px !important; }
.product-specifications > div { padding: 8px 0px !important; min-height: 0px !important; }
.product-specifications dt { font-size: 11px !important; line-height: 1.5 !important; }
.product-specifications dd { font-size: 12px !important; line-height: 1.55 !important; margin: 3px 0px 0px !important; }
dialog .close, dialog .close:hover, dialog .close:focus-visible { transform: none !important; filter: none !important; backdrop-filter: none !important; }
dialog .close svg { display: block; transform-origin: 50% 50%; shape-rendering: geometricprecision; width: 18px !important; height: 18px !important; transform: rotate(0deg) !important; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important; filter: none !important; will-change: auto !important; }
dialog .close:hover svg, dialog .close:focus-visible svg { transform: rotate(180deg) !important; }
@media (max-width: 600px) {
.product-information { padding: 16px !important; }
}
@media (min-width: 801px) {
.project-dialog .detail-grid.case-compact { align-items: stretch !important; }
.project-dialog .case-compact > .detail-section { height: 100% !important; }
}
.project-dialog .detail-summary { display: flex !important; flex-direction: column !important; }
.project-dialog .case-identity-column > .detail-consult { margin: 18px 0px 0px !important; box-sizing: border-box !important; border-radius: 10px !important; justify-content: space-between !important; }
.project-dialog .case-identity-column .detail-consult > div { min-width: 0px !important; }
.project-dialog .case-identity-column .detail-consult h3 { line-height: 1.35 !important; }
.project-dialog .case-identity-column .detail-consult p { line-height: 1.45 !important; margin: 0px !important; }
.project-dialog .case-identity-column .detail-consult .button { margin: 0px !important; white-space: nowrap !important; }
@media (max-width: 800px) {
.project-dialog .case-identity-column > .detail-consult { flex-direction: column !important; align-items: flex-start !important; }
.project-dialog .case-identity-column .detail-consult .button { align-self: stretch !important; justify-content: space-between !important; }
}
.partner-entry > .button { position: relative; }
.case-navigation .scene-tab { min-height: 54px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
.case-navigation .project-tabs { margin-top: 7px !important; padding-top: 0px !important; }
.case-navigation .scene-tabs { margin-bottom: 0px !important; }
.project-dialog .detail-summary { padding: 12px 20px !important; gap: 10px !important; justify-content: flex-start !important; }
.project-dialog .case-identity-column > .detail-consult { min-height: 0px !important; flex: 0 0 auto !important; height: auto !important; padding: 15px 18px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; align-items: center !important; }
.project-dialog .case-identity-column .detail-consult h3 { font-size: 17px !important; margin: 0px 0px 4px !important; }
.project-dialog .case-identity-column .detail-consult p { font-size: 11px !important; }
.project-dialog .case-identity-column .detail-consult .button { align-self: center !important; flex: 0 0 auto !important; padding: 8px 12px !important; font-size: 12px !important; min-height: 38px !important; }
.product-full .product-information { padding: 14px 20px !important; }
.product-full .product-information > h3 { font-size: 20px !important; margin: 0px 0px 8px !important; }
.product-full .product-specifications { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 0px 18px !important; }
.product-full .product-specifications > div { grid-column: auto !important; padding: 6px 0px !important; }
.product-full .product-specifications dt { margin: 0px !important; font-size: 11px !important; line-height: 1.4 !important; }
.product-full .product-specifications dd { margin: 3px 0px 0px !important; font-size: 12px !important; line-height: 1.4 !important; }
.product-identity > .product-connect { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; min-height: 0px !important; padding: 17px 20px !important; gap: 16px !important; }
.product-identity > .product-connect h3 { font-size: 17px !important; line-height: 1.4 !important; margin: 0px !important; }
.product-identity > .product-connect .button { align-self: center !important; flex: 0 0 auto !important; min-height: 38px !important; padding: 8px 12px !important; font-size: 12px !important; }
@media (max-width: 600px) {
.project-dialog .case-identity-column > .detail-consult, .product-identity > .product-connect { flex-wrap: wrap !important; }
}
#modal-body .product-full .product-left .product-information { display: block !important; height: auto !important; min-height: 0px !important; max-height: none !important; grid-template-rows: none !important; flex: 0 0 auto !important; padding: 12px 18px !important; }
#modal-body .product-full .product-left .product-information .product-specifications { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 0px 18px !important; height: auto !important; min-height: 0px !important; margin: 0px !important; padding: 0px !important; align-content: start !important; }
#modal-body .product-full .product-left .product-information .product-specifications > div { display: block !important; height: auto !important; min-height: 0px !important; grid-column: auto !important; padding: 4px 0px !important; }
#modal-body .product-full .product-left .product-information .product-specifications dt { font-size: 11px !important; line-height: 1.4 !important; margin: 0px !important; color: rgb(123, 135, 144) !important; }
#modal-body .product-full .product-left .product-information .product-specifications dd { line-height: 1.4 !important; margin: 4px 0px 0px !important; color: rgb(48, 72, 91) !important; }
@media (max-width: 600px) {
#modal-body .product-full .product-left .product-information { padding: 12px 14px !important; }
#modal-body .product-full .product-left .product-information .product-specifications { gap: 0px 12px !important; }
}
.catalog-card, .recommend-product, .topic-card, .xr135-card, .detail-overview, .product-information { border-radius: var(--panel-radius) !important; }
.button, input, textarea, .hero-scene-tab, .scene-tab, .project-tabs button { border-radius: var(--control-radius) !important; }
dialog { border-radius: var(--dialog-radius) !important; }
.close, .action-circle { aspect-ratio: 1 / 1; flex-shrink: 0; border-radius: 50% !important; }
.xr135-depth-cube { animation: auto ease 0s 1 normal none running none !important; transform: rotateY(22deg) !important; }
#modal-body.project-dialog .detail-summary { display: block !important; text-align: left !important; }
.case-info-title { margin: 0px 0px 12px !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.4 !important; color: rgb(48, 72, 91) !important; }
.case-info-grid { display: grid; gap: 10px; }
.case-info-row { display: grid; gap: 10px; min-width: 0px; }
.case-info-two { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.case-info-three { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.case-info-cell { box-sizing: border-box; min-width: 0px; min-height: 62px; padding: 10px 12px; background: rgb(238, 243, 246); border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; text-align: left; }
.case-info-label { display: block; margin: 0px; font: 400 11px / 1.4 "Microsoft YaHei", sans-serif; color: rgb(123, 135, 144); }
.case-info-value { display: block; margin: 0px; font: 600 17px / 1.4 "Microsoft YaHei", sans-serif; color: rgb(48, 72, 91); overflow-wrap: anywhere; }
.case-info-value small { font-size: 10px; font-weight: 600; margin-left: 3px; color: inherit; }
.case-proof-cell .case-info-label { font-size: 11px; }
.case-proof-cell .case-info-value, .case-info-status { font: 600 11px / 1.4 "Microsoft YaHei", sans-serif; color: rgb(48, 72, 91); }
.case-info-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; min-width: 0px; }
.case-info-status { white-space: nowrap; flex: 0 0 auto; }
.case-info-bottom > .case-info-value { min-width: 0px; }
@media (max-width: 600px) {
#modal-body.project-dialog .detail-summary { padding: 14px !important; }
.case-info-cell { padding: 9px; min-height: 70px; }
.case-info-label { font-size: 10px; }
.case-info-value { font-size: 15px; }
.case-info-three .case-info-value small { font-size: 9px; }
.case-info-bottom { flex-wrap: wrap; gap: 4px; }
.case-info-title { font-size: 19px !important; }
.case-info-three .case-info-cell { min-height: 76px; }
}
#modal-body.project-dialog .case-info-value, #modal-body.project-dialog .case-info-value small, #modal-body.project-dialog .case-info-status { font-weight: 400; }
#modal-body.project-dialog .detail-consult .button { height: auto !important; padding-top: 13px !important; padding-bottom: 13px !important; }
#modal-body .product-full .product-information > .product-specifications { margin-bottom: 0px; }
#modal-body.project-dialog .detail-summary { padding: 20px !important; }
#modal-body.project-dialog .detail-summary h3.case-info-title { margin: 0px 0px 26px !important; }
#modal-body.project-dialog .case-info-grid { gap: 12px; }
#modal-body.project-dialog .case-info-cell { min-height: 66px; }
#modal-body .product-full .product-information { padding: 20px !important; }
#modal-body .product-full .product-information > .product-specifications { margin-top: 18px !important; }
#modal-body .product-full .product-specifications > div { padding: 10px 0px !important; }
#modal-body .product-connect .button { height: auto !important; min-height: 52px !important; padding-top: 13px !important; padding-bottom: 13px !important; }
@media (max-width: 800px) {
#modal-body.project-dialog .detail-summary, #modal-body .product-full .product-information { padding: 18px !important; }
#modal-body.project-dialog .case-info-cell { min-height: 76px; }
}
@media (min-width: 801px) {
#modal-body .product-full .product-left .product-information { display: flex !important; flex-direction: column !important; padding: 20px !important; }
#modal-body .product-full .product-left .product-information > h3 { flex: 0 0 auto; }
#modal-body .product-full .product-left .product-information > .product-specifications { flex: 1 1 0% !important; margin: 18px 0px 0px !important; grid-template-rows: repeat(4, minmax(0px, 1fr)) !important; align-content: stretch !important; }
#modal-body .product-full .product-left .product-information .product-specifications > div { flex-direction: column; justify-content: center; padding: 9px 0px !important; display: flex !important; }
}
:root { --radius: 10px; --panel-radius: 10px; --control-radius: 10px; --dialog-radius: 10px; }
#modal-body.project-dialog .detail-summary { padding-top: 28px !important; }
#modal-body.project-dialog .detail-summary h3.case-info-title { margin-bottom: 30px !important; }
#modal-body .product-full .detail-section-heading { margin: 0px 0px 18px !important; }
#modal-body .product-full .detail-section-heading h3 { margin: 0px !important; }
#modal-body .product-connect { margin-top: 18px !important; }
#modal-body .product-full .product-left { display: flex !important; flex-direction: column !important; gap: 0px !important; }
#modal-body .product-full .detail-section-heading { height: 30px !important; min-height: 30px !important; flex: 0 0 30px !important; }
#modal-body .product-full .detail-section-heading svg { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
#modal-body .product-full .product-display { flex: 0 0 auto !important; }
#modal-body .product-full .detail-section-heading h3 { font-size: 17px !important; font-weight: 400 !important; color: rgb(72, 86, 98) !important; letter-spacing: 0.5px !important; line-height: 1.65 !important; }
#modal-body .product-full .detail-section-heading { align-items: baseline !important; gap: 10px !important; }
#modal-body .product-full .detail-section-heading .case-preview-mark { font-size: 11px !important; font-weight: 400 !important; color: rgb(100, 119, 137) !important; line-height: 1.6 !important; margin-left: 5px !important; }
#modal-body .product-full .product-left .product-information { width: 100% !important; max-width: none !important; align-self: stretch !important; box-sizing: border-box !important; }
#modal-body .product-full .product-left .product-information > .product-specifications { width: 100% !important; align-self: stretch !important; box-sizing: border-box !important; }
@media (min-width: 801px) {
#modal-body.project-dialog .detail-summary { display: flex !important; flex-direction: column !important; }
#modal-body.project-dialog .detail-summary .case-info-title { flex: 0 0 auto !important; margin-bottom: 20px !important; }
#modal-body.project-dialog .detail-summary .case-info-grid { width: 100%; flex: 0 0 auto; margin-top: auto !important; }
}
#modal-body .product-full .product-left { background: transparent !important; border-radius: 0px !important; overflow: visible !important; }
#modal-body .product-full .product-left > .detail-section-heading { background: transparent !important; }
#modal-body .product-full .product-left .product-display { border-radius: 10px 10px 0px 0px !important; overflow: hidden !important; }
#modal-body .product-full .product-left .product-information { background: rgb(255, 255, 255) !important; border-radius: 0px 0px 10px 10px !important; }
:root { --detail-surface: #eef1f5; --shared-surface: var(--detail-surface); }
.xr135-card .xr135-meta, .xr135-card .xr135-footer { column-gap: 28px !important; }
#modal-body.project-dialog, #modal-body:has(.product-full) { background: var(--detail-surface) !important; }
.case-navigation, .topic-feature, .topic-small, .topic-feature .topic-card-copy, .topic-small .topic-card-copy, .resource-section, .catalog-page, .catalog-page #resources { background: var(--detail-surface) !important; }
.catalog-card, .catalog-page .catalog-card, .resource-section .catalog-copy, .catalog-copy, .catalog-page .catalog-copy { background: rgb(255, 255, 255) !important; }
@media (max-width: 600px) {
.xr135-card .xr135-meta, .xr135-card .xr135-footer { column-gap: 16px !important; }
}
.case-navigation .project-tabs { border-top: 0px !important; }
.catalog-card, .catalog-card:hover, .catalog-page .catalog-card:hover { box-shadow: none !important; }
.catalog-art > .green-id-label, .recommend-art > .green-id-label, .catalog-page .green-id-label { font-size: 11px !important; width: 70px !important; }
.xr135-card .xr135-product-row { margin-top: 22px !important; margin-bottom: 28px !important; }
.xr135-card .xr135-meta { margin-bottom: 20px !important; }
.xr135-card .xr135-footer { padding-top: 15px !important; }
@media (min-width: 801px) {
#modal-body .product-full .product-left .product-information > .product-specifications { margin-top: 10px !important; }
#modal-body .product-full .product-left .product-information .product-specifications dd { margin-top: 6px !important; line-height: 1.5 !important; }
}
body:not(.catalog-page) #resources .section-title { color: var(--site-ink) !important; }
#modal-body.project-dialog .detail-summary .case-info-title, #modal-body .product-full .product-information > h3 { font-weight: 400 !important; }
.outcome-introduction { color: var(--site-text); font-size: 15px; line-height: 1.8; margin: 18px 0px 24px; max-width: 460px; }
.document-stage .front-paper, .document-stage .back-paper { border: 0px !important; padding: 0px !important; background: transparent !important; }
.procurement-cover { position: relative; border-radius: 10px; overflow: hidden; color: rgb(40, 72, 94); display: flex; flex-direction: column; isolation: isolate; }
.cover-source { color: rgb(53, 91, 80); }
.cover-content { position: relative; z-index: 1; }
.cover-caption { opacity: 0.7; }
.cover-content h3 { font-size: 30px; font-weight: 500; line-height: 1.5; margin: 12px 0px; }
.cover-bottom { padding-top: 18px; border-top: 1px solid rgba(45, 78, 98, 0.17); letter-spacing: 0.5px; position: relative; z-index: 1; }
.cover-geometry { position: absolute; pointer-events: none; }
@media (max-width: 600px) {
.procurement-cover { padding: 24px; min-height: 350px; }
.cover-content h3 { font-size: 25px; }
}
.partner-section { background: rgb(255, 255, 255) !important; }
.partner-section .partner-benefits > div { background: rgb(238, 241, 245) !important; }
.document-stage { width: 100% !important; max-width: 420px !important; padding: 0px !important; }
.procurement-cover { min-height: 0px !important; padding: 0px !important; }
.cover-content { background: linear-gradient(125deg, rgb(49, 94, 123), rgb(93, 130, 153)); color: rgb(255, 255, 255); margin: 0px !important; padding: 36px 30px 30px !important; }
.cover-source .cover-content { background: linear-gradient(125deg, rgb(59, 101, 90), rgb(115, 144, 132)); }
.document-stage .cover-content h3 { font-size: 28px !important; font-weight: 400 !important; margin: 14px 0px 12px !important; line-height: 1.4 !important; }
.cover-caption { font-size: 11px; letter-spacing: 2px; }
.cover-bottom { border: 0px; font-size: 11px; color: rgb(102, 121, 137); }
.cover-geometry { top: auto !important; z-index: 0 !important; }
.cover-content, .cover-bottom { position: relative; z-index: 1; }
@media (max-width: 600px) {
.document-stage { max-width: 360px !important; height: 390px !important; min-height: 390px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 350px !important; }
.cover-content { min-height: 202px; padding: 30px 24px 26px !important; }
.document-stage .cover-content h3 { font-size: 25px !important; }
.cover-bottom { padding: 22px 24px; }
}
.partner-benefits > div > svg { color: rgb(40, 109, 172) !important; }
#outcomes, #partners { display: flex; align-items: center; box-sizing: border-box; }
.cover-content { min-height: 205px !important; padding-top: 40px !important; }
.procurement-cover { background: linear-gradient(145deg, rgb(255, 255, 255), rgb(238, 243, 246)) !important; }
.cover-source { background: linear-gradient(145deg, rgb(255, 255, 255), rgb(237, 243, 239)) !important; }
.cover-geometry { width: 250px !important; height: 270px !important; bottom: 64px !important; right: -50px !important; opacity: 0.18 !important; }
.cover-bottom { margin-top: auto; padding: 24px 30px 30px !important; }
.cover-detail { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 48px !important; font-size: 13px !important; padding: 10px 15px !important; background: rgb(225, 234, 240) !important; color: rgb(49, 94, 123) !important; }
.cover-source .cover-detail { background: rgb(225, 235, 229) !important; color: rgb(59, 101, 90) !important; }
.cover-detail .action-circle { width: 26px; height: 26px; --arrow-ink: currentColor; background: transparent !important; color: inherit !important; }
@media (max-width: 600px) {
.document-stage { height: 460px !important; min-height: 460px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 420px !important; }
.cover-bottom { padding: 22px 24px !important; }
}
.outcomes-copy .outcome-action, .partner-copy .partner-entry { margin-top: 36px !important; margin-bottom: 0px !important; }
.outcomes-copy .outcome-uses, .partner-copy .partner-benefits { margin-bottom: 0px !important; }
.partner-entry > .button { top: 0px !important; }
.outcome-action > .button, .partner-entry > .button { min-height: 57px !important; }
.outcomes-layout, .partner-layout { align-items: center !important; }
.outcomes-layout > .report-wrap, .partner-layout > .partner-passport { align-self: center !important; }
@media (max-width: 600px) {
.outcomes-copy .outcome-action, .partner-copy .partner-entry { margin-top: 28px !important; }
}
@media (min-width: 801px) {
#modal-body .case-compact, #modal-body .product-full { min-height: 620px !important; align-items: stretch !important; }
#modal-body .case-compact > .detail-section, #modal-body .product-full > .product-left, #modal-body .product-full > .product-identity { min-width: 0px; display: flex !important; flex-direction: column !important; }
#modal-body .case-compact .detail-overview { flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; }
#modal-body .case-compact .detail-summary, #modal-body .product-full .product-left .product-information { height: auto !important; flex: 1 0 auto !important; }
#modal-body .case-identity-column > .xr135-card, #modal-body .product-identity > .xr135-card { flex: 1 0 385px !important; height: auto !important; }
#modal-body .detail-consult, #modal-body .product-connect { height: 150px !important; min-height: 150px !important; flex: 0 0 150px !important; margin-top: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scene-camera { transform: none !important; }
}
#modal-body .product-full .product-left .product-information .product-specifications > div { align-self: stretch !important; }
#modal-body.project-dialog .case-identity-column > .detail-consult { display: flex !important; flex-flow: row !important; justify-content: space-between !important; gap: 20px !important; padding: 22px 24px !important; }
#modal-body.project-dialog .detail-consult h3 { max-width: 260px; margin: 0px !important; font-size: 18px !important; line-height: 1.65 !important; font-weight: 400 !important; }
#modal-body.project-dialog .detail-consult .button { flex: 0 0 auto !important; min-height: 52px !important; }
@media (max-width: 600px) {
#modal-body.project-dialog .case-identity-column > .detail-consult { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; padding: 22px !important; }
#modal-body.project-dialog .detail-consult h3 { max-width: none; }
#modal-body.project-dialog .detail-consult .button { align-self: stretch !important; }
}
#modal-body.project-dialog .case-identity-column > .detail-consult, #modal-body .product-identity > .product-connect { display: flex !important; padding: 22px 24px !important; }
#modal-body.project-dialog .detail-consult h3, #modal-body .product-identity > .product-connect h3 { max-width: none !important; margin: 0px !important; line-height: 1.65 !important; font-weight: 400 !important; }
#modal-body.project-dialog .detail-consult .button, #modal-body .product-identity > .product-connect .button { font-size: 15px !important; min-height: 52px !important; justify-content: space-between !important; gap: 18px !important; }
@media (max-width: 600px) {
#modal-body.project-dialog .case-identity-column > .detail-consult, #modal-body .product-identity > .product-connect { padding: 20px 16px !important; }
#modal-body.project-dialog .detail-consult h3, #modal-body .product-identity > .product-connect h3 { font-size: clamp(12px, 3.45vw, 18px) !important; }
#modal-body.project-dialog .detail-consult .button, #modal-body .product-identity > .product-connect .button { align-self: stretch !important; }
}
#modal-body .report-brief-note { margin-left: 3px; font-size: 10px !important; font-weight: 400 !important; }
#modal-body.project-dialog .case-identity-column > .detail-consult, #modal-body .product-identity > .product-connect { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important; }
#modal-body.project-dialog .detail-consult h3, #modal-body .product-identity > .product-connect h3 { font-size: 18px !important; white-space: normal !important; }
#modal-body.project-dialog .detail-consult .button, #modal-body .product-identity > .product-connect .button { align-self: flex-end !important; min-width: 160px !important; flex: 0 0 auto !important; }
#modal-body .detail-consult .action-circle svg, #modal-body .product-connect .action-circle svg { stroke: currentcolor !important; opacity: 1 !important; visibility: visible !important; animation: auto ease 0s 1 normal none running none !important; }
#modal-body .product-full .product-left .product-information .product-specifications dd { font-size: 13px !important; }
.hero .hero-camera > img { transform-origin: 65% 45%; will-change: transform; }
@media (max-width: 600px) {
#modal-body .product-full .product-left .product-information .product-specifications dd { font-size: 11px !important; }
#modal-body.project-dialog .detail-consult h3, #modal-body .product-identity > .product-connect h3 { font-size: 14px !important; }
#modal-body.project-dialog .detail-consult .button, #modal-body .product-identity > .product-connect .button { min-width: 0px !important; padding-left: 12px !important; padding-right: 12px !important; gap: 9px !important; }
}
#modal-body .product-identity > .product-connect { align-items: center !important; flex-wrap: nowrap !important; }
#modal-body .product-identity > .product-connect h3 { flex: 1 1 0% !important; min-width: 0px !important; }
#modal-body .product-identity > .product-connect .button { align-self: center !important; }
.action-circle svg, .action-circle svg path { opacity: 1 !important; visibility: visible !important; }
.case-entry .case-visual { overflow: hidden; }
.case-entry .case-visual img { transform-origin: center center; }
.hero .hero-scene-tab { font-size: 14px !important; }
@media (max-width: 1100px) {
.hero .hero-scene-tab { font-size: 12px !important; }
}
@media (max-width: 750px) {
.hero .hero-scene-tab { font-size: 11px !important; }
}
@media (max-width: 420px) {
.hero .hero-scene-tab { font-size: 9px !important; }
}
.green-id-label, .catalog-art > .green-id-label, .recommend-art > .green-id-label, .catalog-page .green-id-label { font-size: 12px !important; width: 74px !important; white-space: nowrap !important; letter-spacing: 0px !important; font-family: "Microsoft YaHei", Arial, sans-serif !important; }
#modal-body.project-dialog .case-identity-column > .detail-consult { align-items: center !important; flex-wrap: nowrap !important; }
#modal-body.project-dialog .detail-consult > div { flex: 1 1 0% !important; min-width: 0px !important; }
#modal-body.project-dialog .detail-consult .button { align-self: center !important; }
#topics.section, #outcomes.section, #partners.section { padding-top: 109px !important; padding-bottom: 109px !important; }
.document-stage { height: 540px !important; min-height: 540px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 500px !important; }
.procurement-cover { height: 100% !important; }
.document-stage .cover-content { min-height: 180px !important; padding: 30px !important; background: linear-gradient(130deg, rgb(40, 85, 119), rgb(87, 131, 155)) !important; }
.document-stage .cover-source .cover-content { background: linear-gradient(130deg, rgb(49, 95, 83), rgb(113, 145, 129)) !important; }
.cover-content::after { content: ""; position: absolute; right: 26px; bottom: 24px; width: 68px; height: 3px; background: rgba(255, 255, 255, 0.27); border-radius: 10px; }
.cover-paper-detail { position: relative; flex: 1 1 0%; min-height: 160px; margin: 24px 30px 0px; color: inherit; opacity: 0.65; }
.cover-paper-heading { display: grid; gap: 9px; }
.cover-paper-heading i { height: 5px; background: currentcolor; opacity: 0.16; width: 42%; border-radius: 10px; }
.cover-paper-heading i:last-child { width: 25%; height: 3px; opacity: 0.11; }
.cover-paper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 21px 0px 18px; }
.cover-paper-grid span { height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(45, 91, 113, 0.075), rgba(45, 91, 113, 0.02)); }
.cover-source .cover-paper-grid span { background: linear-gradient(135deg, rgba(49, 95, 83, 0.08), rgba(49, 95, 83, 0.024)); }
.cover-paper-lines { display: grid; gap: 9px; width: 68%; }
.cover-paper-lines i { height: 1px; background: currentcolor; opacity: 0.12; }
.cover-paper-lines i:last-child { width: 76%; }
.cover-paper-seal { position: absolute; right: 0px; bottom: 0px; width: 70px; height: 70px; opacity: 0.26; }
.procurement-cover .cover-geometry { width: 200px !important; height: 215px !important; right: -62px !important; bottom: 110px !important; opacity: 0.055 !important; }
.document-stage .cover-bottom { padding: 20px 30px 26px !important; }
@media (max-width: 750px) {
#topics.section, #outcomes.section, #partners.section { padding-top: 76px !important; padding-bottom: 76px !important; }
.document-stage { height: 490px !important; min-height: 490px !important; }
.document-stage .front-paper, .document-stage .back-paper { height: 450px !important; }
.document-stage .cover-content { min-height: 160px !important; padding: 26px 24px !important; }
.cover-paper-detail { margin: 20px 24px 0px; min-height: 140px; }
.document-stage .cover-bottom { padding: 18px 24px 22px !important; }
}

/* Shared finishing rules. */
:root {--ui-radius:10px;--ui-focus:#6d9bc1;--ui-feedback:350ms;}
html {scroll-padding-top:90px;}
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible {outline:2px solid var(--ui-focus);outline-offset:4px;}
.button:active,.textlink:active,.footer-route:active {scale:.98!important;}
.button,.textlink,.footer-route {transition:scale 180ms ease!important;}
.contact-purpose input+span,.contact-purpose input+span::before {transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease,opacity 220ms ease!important;}
.contact-form input:focus,.contact-form textarea:focus {outline:2px solid #709ec1!important;outline-offset:2px;}
.contact-form input,.contact-form textarea {transition:background-color 220ms ease,outline-color 220ms ease!important;}
.field-error {color:#994f46;font-size:12px;line-height:1.5;margin-top:6px;}
.contact-form [aria-invalid=true] {outline:1px solid #b76f63!important;}
dialog::backdrop {background:rgba(15,32,48,.44);animation:modal-shade 320ms ease both;}
@keyframes modal-shade {from {background:rgba(15,32,48,0);}to {background:rgba(15,32,48,.44);}}
.nav-links a {transform-origin:center;}
.nav-links a[aria-current=location] {text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px;}
.document-stage .front-paper,.document-stage .back-paper {will-change:auto;}
.document-stage.is-swapping .front-paper,.document-stage.is-swapping .back-paper {will-change:transform,opacity;}
.document-stage:not(.is-swapping):not(.source-front) .back-paper .procurement-cover,
.document-stage:not(.is-swapping).source-front .front-paper .procurement-cover {transition:filter 350ms ease;}
.document-stage:not(.is-swapping):not(.source-front) .back-paper:hover .procurement-cover,
.document-stage:not(.is-swapping).source-front .front-paper:hover .procurement-cover {filter:brightness(1.035);}
.document-stage .cover-content {background:linear-gradient(125deg,#254f70,#477590)!important;}
.document-stage .cover-source .cover-content {background:linear-gradient(125deg,#315b50,#688677)!important;}
.cover-paper-grid {gap:12px;}
.cover-paper-grid span {height:36px;border-radius:4px;background:linear-gradient(180deg,rgba(45,91,113,.06),rgba(45,91,113,.015));}
.cover-paper-detail {opacity:.8;}
.cover-paper-seal {opacity:.2;width:62px;height:62px;}
.cover-content::before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.045) 45.2%,transparent 72%);}
.cover-detail .action-circle {border:1px solid currentColor!important;}

.case-empty {
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 15px;
}