*, ::before, ::after { box-sizing: border-box; }

:root { --l1: #ebfdff; --l2: #d3f1f8; --l3: #a8ddf0; --l4: #67b0e3; --l5: #3a78bb; --l6: #274a80; --accent: #1f8fc4; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --ice-w: 560px; --ice-x: 26px; --gap-text: 64px; --pad-x: 44px; --content-max: 1200px; }

.iceberg-page { background: var(--l1); }

/* ===== 页首 Banner：复用 SEO #headerChannel 蓝底图 + 底部弧形分隔（导航区 / 内容区分界） ===== */
#headerChannel { position: relative; width: 100%; overflow: hidden; background: #134b80 url(../img/bg-banner.svg) no-repeat center bottom; background-size: cover; }
/*#headerChannel::before { position: absolute; content: ''; left: 0; right: 0; bottom: -1px; height: 108px; background: url(../img/bg-arc.png) repeat-x 0 bottom; background-size: auto 100%; animation: banner 40s linear infinite; pointer-events: none; }*/
#headerChannel .masthead { color: #fff; padding: 156px var(--pad-x) 120px; }
#headerChannel .brand { color: rgba(255,255,255,0.8); }
#headerChannel .brand .dot { background: #fff; }
#headerChannel .masthead h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,42,92,0.45); }
#headerChannel .masthead .en { color: rgba(255,255,255,0.72); }
#headerChannel .masthead .lede { color: rgba(255,255,255,0.9); }
#headerChannel .masthead .lede strong { color: #fff; }
#headerChannel .scope { background: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.7); }
#headerChannel .scope b { color: #eaf4ff; }
#headerChannel .scope p { color: rgba(255,255,255,0.85); }

@keyframes banner {
    0% { background-position: 0 bottom; }
    100% { background-position: -1920px bottom; }
}

body { color: rgb(10, 35, 52);}

.masthead { position: relative; z-index: 5; max-width: 1400px; margin: 0px auto; padding: 46px var(--pad-x) 32px; }

.brand { display: flex; align-items: center; gap: 9px; font-size: 17.1px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(13, 43, 69, 0.5); margin-bottom: 13px; }

.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.masthead h1 { margin: 0px 0px 8px; font-size: 36.3px; line-height: 1.24; font-weight: 700; letter-spacing: -0.3px; color: rgb(10, 36, 56); }

.masthead .en { font-size: 13.3px; letter-spacing: 4.5px; text-transform: uppercase; color: rgba(13, 43, 69, 0.38); margin-bottom: 15px; }

.masthead .lede { margin: 0px 0px 20px; max-width: 900px; width: 70%;font-size: 16px; line-height: 1.78; color: rgba(13, 43, 69, 0.74); }

.masthead .lede strong { color: rgb(10, 36, 56); }

.scope { border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.6); border-radius: 0px 5px 5px 0px; padding: 12px 18px; margin-bottom: 20px;     max-width: 340px;   position: absolute;   top: 160px;    right: 10px; }

.scope b { display: block; font-size: 20px; color: rgb(15, 109, 156); letter-spacing: 0.6px; margin-bottom: 4px; }

.scope p + p { margin-top: 5px; }

.scope p { margin: 0px; font-size: 14px; line-height: 1.7; color: rgba(13, 43, 69, 0.7); }

.strata { position: relative; z-index: 2; }

.layer { position: relative; overflow: hidden; }

.layer-in { position: relative; z-index: 3; max-width: var(--content-max); margin-top: 0px; margin-right: auto; margin-bottom: 0px; padding: var(--space-6) var(--pad-x) var(--space-6) 0; margin-left: calc(var(--ice-x) + var(--ice-w) + var(--gap-text)); }

.l1 { background: var(--l1); color: rgb(13, 43, 69); }

.l2 { background: var(--l2); color: rgb(12, 41, 66); }

.l3 { background: var(--l3); color: rgb(10, 35, 56); }

.l4 { background: var(--l4); color: rgb(7, 34, 60); }

.l5 { background: var(--l5); color: rgb(234, 241, 250); }

.l5::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 64px; z-index: 0; background: linear-gradient(rgba(103, 176, 227, 0.5) 0%, rgba(58, 120, 187, 0) 100%); pointer-events: none; }

.l5 > .layer-in { position: relative; z-index: 1; }

.chip-groups { display: flex; flex-direction: column; gap: 10px; }

.chip-grp { display: flex; align-items: flex-start; gap: 12px; }

.chip-grp .grp { flex: 0 0 auto; margin-top: 5px; font-size: 11.2px; letter-spacing: 1.6px; font-weight: 600; color: rgb(234, 241, 250); background: rgba(255, 255, 255, 0.14); padding: 2px 8px; border-radius: 3px; }

.chip-grp .chips { flex: 1 1 auto; min-width: 0px; }

.l6 { background: var(--l6); color: rgb(223, 233, 247); }

.l6::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 44px; z-index: 0; background: linear-gradient(rgba(58, 120, 187, 0.45) 0%, rgba(39, 74, 128, 0) 100%); pointer-events: none; }

.l6 > .layer-in { position: relative; z-index: 1; }

.l1 .layer-in { padding-top: var(--space-6); padding-bottom: var(--space-6); min-height: 300px; display: flex; flex-direction: column; justify-content: center; }

.layer + .layer { border-top: 1px solid rgba(255, 255, 255, 0.3); }

.l5, .l6 { border-top-color: rgba(120, 180, 225, 0.16); }

.layer-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); flex-wrap: wrap; }

.layer-no { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }

.layer-no span { font-size: 36.3px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; opacity: 0.28; }

.layer-no i { font-style: normal; font-size: 11.7px; letter-spacing: 2.6px; text-transform: uppercase; opacity: 0.5; }

.layer-titles { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; min-width: 0px; }

.layer-titles h2 { margin: 0px; font-size: 22.4px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.3; }

.layer-en { font-size: 11.7px; letter-spacing: 2.8px; text-transform: uppercase; opacity: 0.48; white-space: nowrap; }

.layer-lede { margin: 0 0 var(--space-3); max-width: 100%; font-size: 16px; line-height: 1.75; color: rgba(13, 43, 69, 0.68); }

.l4 .layer-lede { color: rgba(7, 34, 60, 0.74); }

.l5 .layer-lede { color: rgb(255, 255, 255); }

.l6 .layer-lede { color: rgb(242, 247, 252); }

.layer-role { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }

.layer-role span { font-size: 14px; letter-spacing: 1.2px; padding: 2px 7px; border-radius: 3px; background: rgba(255, 255, 255, 0.6); color: rgb(15, 109, 156); font-weight: 600; }

.l4 .layer-role span { background: rgba(255, 255, 255, 0.42); }

.l5 .layer-role span, .l6 .layer-role span { background: rgba(255, 255, 255, 0.18); color: rgb(255, 255, 255); }

.layer-role b { font-size: 14px; opacity: 0.58; font-weight: 400; }

.chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.95; padding: 0px 14px 0px 0px; margin-right: 14px; color: inherit; position: relative; }

.chip::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(31, 143, 196, 0.75); }

.l3 .chip::before { background: rgba(23, 88, 133, 0.7); }

.l4 .chip::before { background: rgba(7, 34, 60, 0.62); }

.l5 .chip::before { background: rgba(226, 240, 252, 0.85); }

.l6 .chip::before { background: rgba(214, 232, 248, 0.8); }

.chip:not(:last-child)::after { content: ""; position: absolute; right: 0px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: currentcolor; opacity: 0.08; }

.subchips { margin-top: var(--space-3); }

.sub-label { font-size: 14px; letter-spacing: 1.2px; margin-bottom: 6px; opacity: 0.55; }

.sub-grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0px; }

.sub { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.9; padding: 0px 12px 0px 0px; margin-right: 12px; position: relative; color: inherit; opacity: 0.85; }

.sub::before { content: ""; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: rgba(190, 228, 252, 0.55); }

.sub:not(:last-child)::after { content: ""; position: absolute; right: 0px; top: 50%; width: 1px; height: 9px; margin-top: -4px; background: currentcolor; opacity: 0.16; }

.ice-halo { position: absolute; left: 0px; top: 0px; bottom: 0px; z-index: 2; width: calc(var(--ice-x) + var(--ice-w) * 2.05); pointer-events: none; background: linear-gradient(100deg, rgba(190, 232, 252, 0.3) 0%, rgba(168, 216, 244, 0.22) 18%, rgba(140, 198, 232, 0.14) 34%, rgba(110, 176, 220, 0.07) 52%, rgba(90, 160, 210, 0.02) 72%, rgba(90, 160, 210, 0) 100%); }

.l1 .ice-halo { background: linear-gradient(100deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0) 100%); }

.l5 .ice-halo { background: linear-gradient(100deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.01) 68%, rgba(255, 255, 255, 0) 100%); }

.l6 .ice-halo { background: linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.07) 22%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.01) 68%, rgba(255, 255, 255, 0) 100%); }

.ice-halo::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: var(--h-bottom,0px); height: var(--h-top,0px); background: linear-gradient(rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 100%); }

.ice-seg { position: absolute; left: 0px; width: 100%; z-index: 6; pointer-events: none; }

.ice-seg .seg-line { position: absolute; left: 3%; right: 3%; top: 0px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.3) 76%, rgba(255, 255, 255, 0) 100%); }

.ice-seg .seg-tag { position: absolute; left: 50%; transform: translateX(-50%); top: 5px; font-size: 10.1px; letter-spacing: 2px; white-space: nowrap; color: rgba(255, 255, 255, 0.82); text-shadow: rgba(4, 30, 52, 0.6) 0px 1px 3px; }

.ice-stage { position: absolute; left: var(--ice-x); top: 0px; bottom: 0px; width: var(--ice-w); z-index: 4; pointer-events: none; }

.ice-col { position: absolute; left: 0px; width: 100%; top: var(--ice-top,0px); }

.ice { width: 100%; }

.ice svg { display: block; width: 100%; }

.ice .tip { height: var(--ice-tip,240px); }

.ice .body { height: var(--ice-body,820px); }

.sea-fx { position: absolute; inset: 0px; z-index: 3; pointer-events: none; overflow: hidden; }

.sea-fx .shaft { position: absolute; top: var(--wline,0px); bottom: 0px; width: 150px; background: linear-gradient(rgba(198, 242, 255, 0.2) 0%, rgba(150, 220, 255, 0.1) 26%, rgba(120, 200, 255, 0.035) 58%, rgba(120, 200, 255, 0) 88%); transform-origin: center top; animation: 16s ease-in-out 0s infinite alternate none running shaftDrift; }

.sea-fx .shaft.s1 { left: calc(var(--ice-x) + 26px); }

.sea-fx .shaft.s2 { left: calc(var(--ice-x) + 190px); animation-duration: 21s; animation-delay: -6s; }

.sea-fx .shaft.s3 { left: calc(var(--ice-x) + 330px); animation-duration: 26s; animation-delay: -12s; }

@keyframes shaftDrift {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

.sea-fx .surf { position: absolute; left: 0px; right: 0px; top: calc(var(--wline,0px) - 13px); height: 26px; background-repeat: repeat-x; background-position: 0 0; }

.sea-fx .wave-a { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='26'%20viewBox='0%200%20240%2026'%3E%3Cpath%20d='M0%204%20C40%204%2080%2022%20120%2022%20S200%204%20240%204'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'/%3E%3C/svg%3E"); animation: 9s linear 0s infinite normal none running waveMove; }

.sea-fx .wave-b { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='26'%20viewBox='0%200%20240%2026'%3E%3Cpath%20d='M0%204%20C40%204%2080%2022%20120%2022%20S200%204%20240%204'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.2'/%3E%3C/svg%3E"); animation: 17s linear 0s infinite normal none running waveMove; opacity: 0.5; }

.sea-fx .wave-c { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='26'%20viewBox='0%200%20240%2026'%3E%3Cpath%20d='M0%204%20C40%204%2080%2022%20120%2022%20S200%204%20240%204'%20fill='none'%20stroke='%23addbee'%20stroke-width='1.8'/%3E%3C/svg%3E"); animation: 13s linear 0s infinite normal none running waveMove; opacity: 0.9; }

@keyframes waveMove {
  0% { background-position: 0 0; }
  100% { background-position: -240px 0; }
}

.sea-fx .surf-glare { position: absolute; left: 0px; right: 0px; top: var(--wline,0px); height: 16px; background: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0)); }

.waterline { position: absolute; left: 0px; right: 0px; z-index: 5; pointer-events: none; top: var(--wline,0px); }

.waterline .wl-line { position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.58) 82%, rgba(255, 255, 255, 0.06) 100%); }

.waterline .wl-label { position: absolute; left: var(--ice-x); top: -8px; width: var(--ice-w); text-align: center; font-size: 10.1px; line-height: 1.25; letter-spacing: 4px; text-indent: 4px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(8, 46, 74, 0.34); padding: 1px 0px; border-radius: 2px; backdrop-filter: blur(3px); }

.legend { position: relative; z-index: 6; background: #1f252b; max-width: none; margin: 0px; padding: 30px max(var(--pad-x),calc((100% - 1400px)/2 + var(--pad-x))) 46px; }

.legend-title { font-size: 14px; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(220, 236, 248, 0.55); margin-bottom: 13px; }

.lg-row { display: flex; flex-wrap: wrap; gap: 13px 26px; }

.lg { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 216px; min-width: 30%; }

.lg .sw { flex: 0 0 20px; height: 20px; border-radius: 3px; margin-top: 2px; }

.sw-l1 { background: var(--l1); }
.sw-l2 { background: var(--l2); }
.sw-l3 { background: var(--l3); }
.sw-l4 { background: var(--l4); }
.sw-l5 { background: var(--l5); }
.sw-l6 { background: var(--l6); }

.lg b { display: block; font-size: 16px; font-weight: 600; color: rgb(234, 246, 255); margin-bottom: 1px; }

.lg span { font-size: 14px; color: rgba(220, 236, 248, 0.72); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .sea-fx .shaft, .sea-fx .wave-a, .sea-fx .wave-b { animation: auto ease 0s 1 normal none running none; }
  .sea-fx .shaft { opacity: 0.85; }
}

/* 超大屏（分辨率很大时）：把"冰山图形 + 右侧文字"作为一个整体水平居中，
   对齐同样居中的顶/底文字块。组合自然宽度 = ice-w(560)+gap-text(64)+content-max(1200)=1824，
   组合中心 = ice-x + 912；令其 = 50vw 即整体居中。仅作用于 ≥1920 的视口，
   全分辨率（含窄屏）均显示完整冰山（基础 --ice-w:560），不受影响。 */
@media (min-width: 1920px) {
  :root { --ice-x: calc(50vw - 912px); }
}