.xfm:where(span) { display: inline }
.xfm:where(p, h3, h5) { font-size: inherit; line-height: inherit }
.xfm-skip { position: absolute; left: 12px; top: -60px; z-index: 10002; padding: 10px 16px; background: #fff; color: #000; border-radius: 999px; font: 500 14px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif; text-decoration: none }
.xfm-skip:focus { top: 12px }
.xfm { --xfm-fog: #EEF2F6; --xfm-fog-alt: #E4E9F0; --xfm-card: #FFFFFF; --xfm-cover: #DCE2EB; --xfm-border: #BCC5D2; --xfm-rule: #D3DAE3; --xfm-ink: #0D1726; --xfm-text: #26334A; --xfm-soft: #4A5870; --xfm-mute: #66748A; --xfm-blue: #0a56f9; --xfm-blue-hi: #2f72ff; --xfm-navy: #0B1B3F; --xfm-pad: clamp(18px, 4vw, 72px); --xfm-max: 1600px; --xfm-gap: clamp(16px, 1.8vw, 26px); --xfm-head: var(--xm-header-h, 78px); --xfm-ease: cubic-bezier(.2, .7, .2, 1); background: var(--xfm-fog); color: var(--xfm-ink); font-family: var(--font-family, "Noto Sans SC", "PingFang SC", "Helvetica Neue", Helvetica, "Microsoft YaHei", sans-serif); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
.xfm *, .xfm *::before, .xfm *::after { box-sizing: border-box }
.xfm:where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; padding: 0 }
.xfm:where(ul, ol) { list-style: none }
.xfm:where(a) { color: inherit; text-decoration: none }
.xfm:where(button, input, select) { font: inherit; color: inherit; margin: 0 }
.xfm:where(button) { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: inherit; -webkit-appearance: none; appearance: none }
.xfm:where(img, video, svg) { display: block; max-width: 100% }
.xfm:focus-visible { outline: 2px solid var(--xfm-blue); outline-offset: 3px }
.xfm [hidden] { display: none !important }
.xfm-wrap { max-width: var(--xfm-max); margin-inline: auto; padding-inline: var(--xfm-pad) }
.xfm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.xfm, .xfm section[id], .xfm [data-anchor] { scroll-margin-top: calc(var(--xfm-head) + 16px) }
.xfm-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; --xfm-navy0:#07173a; background: var(--xfm-navy0) }
.xfm.is-empty .xfm-hero { padding-bottom: clamp(48px, 7vw, 96px) }
.xfm-hero__upper { position: relative }
.xfm-hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 46vw 34vw at var(--xfm-lx, 72%) var(--xfm-ly, 300px), rgba(26, 74, 200, .26), rgba(26, 74, 200, 0) 70%) }
.xfm-hero__bg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(to top, var(--xfm-navy0), rgba(7, 23, 58, 0)) }
.xfm-hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--xfm-fog) 0, rgba(238, 242, 246, .86) 26px, rgba(238, 242, 246, .52) 64px, rgba(238, 242, 246, .22) 104px, rgba(238, 242, 246, 0) 150px), linear-gradient(to bottom, rgba(3, 8, 22, .50) 0, rgba(3, 8, 22, 0) 90px) }
.xfm-hero__top { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 54fr); column-gap: 4%; align-items: center; min-height: clamp(470px, 38vw, 620px) }
.xfm-hero__in { padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 44px); min-width: 0 }
.xfm-hero__stage { position: relative; align-self: stretch; min-height: 300px }
.xfm-hero__static { position: absolute; left: 50%; top: 50%; width: min(80%, calc((100% - 0px) * .8)); max-height: 72%; transform: translate(-50%, -50%); opacity: .9 }
.xfm-hero.has-sphere .xfm-hero__static { display: none }
.xfm-hero__eyebrow { font-size: 11.5px; letter-spacing: .2em; font-weight: 500; color: rgba(214, 226, 246, .82) }
.xfm-hero h1 { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(54px, 7.1vw, 112px); line-height: 1.08; font-weight: 500; letter-spacing: .02em; white-space: nowrap; color: #f4f7fc; background: linear-gradient(180deg, #ffffff 20%, #d5e0f2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.xfm .pager-list a:hover { border-color: var(--xfm-ink); }
.xfm .pager-list a.active { background-color: var(--xfm-ink); color: white; }
.xfm[data-view="details"] { background-color: var(--theme-color); color: white; }
.xfm[data-view="details"] hr { color: rgba(255, 255, 255, .25) }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
.xfm-hero h1 { -webkit-text-fill-color: currentColor; background: none }
}
.xfm-hero__lead { max-width: 26.5em; margin-top: clamp(16px, 1.9vw, 28px); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.78; color: rgba(255, 255, 255, .94); text-wrap: pretty }
.xfm-hero__aux { margin-top: 14px; font-size: 14px; letter-spacing: .02em; color: rgba(206, 220, 244, .74) }
.xfm-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(22px, 2.6vw, 36px) }
.xfm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--xfm-blue); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, transform .2s ease }
.xfm .xfm-btn:hover { background: var(--xfm-blue-hi) }
.xfm .xfm-btn:active { transform: scale(.98) }
.xfm .xfm-btn--ghost { background: rgba(120, 160, 255, .08); border: 1px solid rgba(214, 226, 246, .62) }
.xfm .xfm-btn--ghost:hover { background: rgba(120, 160, 255, .18); border-color: #fff }
.xfm-hero:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.xfm-bgtoggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: 2px; padding: 0 14px; border: 1px solid rgba(214, 226, 246, .38); border-radius: 999px; background: rgba(120, 160, 255, .06); font-size: 13px; color: rgba(232, 240, 252, .92); transition: background-color .2s ease, border-color .2s ease }
.xfm-bgtoggle:hover { background: rgba(120, 160, 255, .18); border-color: #fff }
.xfm-bgtoggle i { position: relative; width: 9px; height: 10px; flex: none }
.xfm-bgtoggle i::before, .xfm-bgtoggle i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor }
.xfm-bgtoggle i::before { left: 0 }
.xfm-bgtoggle i::after { right: 0 }
.xfm-bgtoggle[data-state="play"] i::before { width: 0; background: none; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent }
.xfm-bgtoggle[data-state="play"] i::after { display: none }
@media (prefers-reduced-motion:no-preference) {
@keyframes xfmHeroIn {
from { opacity: 0; transform: translateY(10px) }
to { opacity: 1; transform: none }
}
.xfm-hero__in { animation: xfmHeroIn .56s var(--xfm-ease) both }
.xfm-hero.is-in .xfm-hero__in { animation: none }
}
.xfm-hero__bg.xms-sphere-host { --xms-bg-top: #07173a; --xms-bg-bottom: #07173a; --xms-glow: #1a4ac8 }
.xfm-cats { position: relative; width: 100%; padding-block: clamp(10px, 1.4vw, 22px) clamp(30px, 3.4vw, 46px) }
.xfm-cats::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(to bottom, var(--xfm-navy0) 0, #0a2760 55%, #11398a 100%) }
.xfm-cats ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px }
.xfm-cat { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 184px; padding: 18px 18px 16px; border-radius: 18px; overflow: hidden; color: var(--xfm-ink); background: rgba(236, 242, 252, .80); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(13, 35, 80, .10), 0 0 0 1px rgba(13, 35, 80, .16), 0 14px 32px -10px rgba(10, 30, 72, .34); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .26s var(--xfm-ease), box-shadow .26s ease, border-color .26s ease, background-color .26s ease }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
.xfm-cat { background: rgba(244, 247, 252, .93) }
.xfm .xfm-btn--ghost, .xfm-bgtoggle { background: rgba(8, 24, 60, .72) }
}
.xfm-cat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .26s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 62%) }
.xfm-cat > * { position: relative }
.xfm-cat__no { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--xfm-ink); font-variant-numeric: tabular-nums }
.xfm-cat__no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--xfm-blue) }
.xfm-cat__name { margin-top: 10px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.3; font-weight: 600; color: var(--xfm-ink) }
.xfm-cat__en { margin-top: 5px; font-size: 10.5px; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; color: #1F2C42 }
.xfm-cat__desc { margin-top: 10px; padding-right: 40px; font-size: 13.5px; line-height: 1.55; color: #1F2C42 }
.xfm-cat__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(13, 35, 80, .4); color: var(--xfm-ink); transition: transform .26s var(--xfm-ease), background-color .26s ease, color .26s ease, border-color .26s ease }
.xfm-cat__go svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8 }
.xfm-cat__desc { margin-top: auto; padding-top: 12px }
.xfm-cat:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 6px var(--xfm-blue), 0 14px 32px -10px rgba(10, 30, 72, .34); background-color: rgba(248, 250, 253, .78) }
.xfm-cat:focus-visible .xfm-cat__go { transform: translateX(4px); background: var(--xfm-blue); border-color: var(--xfm-blue); color: #fff }
.xfm-cat:active { --ty: 0px; background-color: rgba(232, 238, 247, .74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 2px 8px rgba(13, 35, 80, .14), 0 0 0 1px rgba(13, 35, 80, .22), 0 6px 14px -8px rgba(10, 30, 72, .3) }
@media (hover:hover) and (pointer:fine) {
.xfm-cat:hover { --ty: -4px; border-color: #fff; background-color: rgba(248, 250, 253, .72); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(13, 35, 80, .10), 0 0 0 1px rgba(13, 35, 80, .26), 0 24px 44px -14px rgba(10, 30, 72, .46) }
.xfm-cat:hover::before { opacity: 1 }
.xfm-cat:hover .xfm-cat__go { transform: translateX(4px); background: var(--xfm-blue); border-color: var(--xfm-blue); color: #fff }
}
.xfm-sec { padding-block: clamp(44px, 5vw, 76px); border-top: 1px solid var(--xfm-border) }
.xfm-over > .xfm-sec:first-child, .xfm-over > .xfm-sec[hidden] + .xfm-sec { border-top: 0 }
.xfm-over > .xfm-sec:first-child { padding-top: clamp(28px, 3.2vw, 48px) }
.xfm-sec--alt { background: var(--xfm-fog-alt) }
.xfm-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: clamp(20px, 2.2vw, 30px) }
.xfm-sec__name { min-width: 0; max-width: 44em }
.xfm-sec__no { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .14em; color: var(--xfm-blue); font-variant-numeric: tabular-nums; font-weight: 600 }
.xfm-sec__no::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--xfm-border) }
.xfm-sec__name h2 { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.18; font-weight: 600; letter-spacing: .01em; color: var(--xfm-ink) }
.xfm-sec__name h2:focus, .xfm-hero h1:focus { outline: none }
.xfm-sec__en { margin-top: 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--xfm-mute); font-weight: 500 }
.xfm-sec__intro { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--xfm-mute) }
.xfm-sec__more:empty { display: none }
.xfm-more { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--xfm-ink); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--xfm-ink); white-space: nowrap; transition: background-color .2s ease, color .2s ease }
.xfm .xfm-more:hover { background: var(--xfm-ink); color: #fff }
.xfm-none { padding-block: clamp(56px, 8vw, 120px); text-align: center; font-size: clamp(17px, 1.5vw, 21px); color: var(--xfm-text) }
.xfm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xfm-gap) }
.xfm-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--xfm-card); border: 1px solid var(--xfm-border); border-radius: 10px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease }
.xfm-card__cover { position: relative; aspect-ratio: 16/9; background: var(--xfm-cover); border-bottom: 1px solid var(--xfm-border); overflow: hidden }
.xfm-card[data-ratio="1:1"] .xfm-card__cover { aspect-ratio: 1/1 }
.xfm-lib .xfm-card[data-ratio="1:1"] .xfm-card__cover { aspect-ratio: 16/9; background: #0A0C0F }
.xfm-lib .xfm-card[data-ratio="1:1"] .xfm-card__cover > img { object-fit: contain }
.xfm-card__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--xfm-pos, 50% 50%) }
.xfm-card[data-fit="contain"] .xfm-card__cover > img { object-fit: contain }
.xfm-card__missing { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(16px, 3vw, 32px); color: var(--xfm-ink) }
.xfm-card__missing b { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.25; font-weight: 600 }
.xfm-card__missing i { font-style: normal; font-size: 12.5px; color: var(--xfm-mute) }
.xfm-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(14px, 1.4vw, 20px) }
.xfm-card__origin { align-self: flex-start; margin-bottom: 8px; font-size: 12px; line-height: 1.5; letter-spacing: .06em; font-weight: 500; color: var(--xfm-soft) }
.xfm-card__origin::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--xfm-blue); vertical-align: 1px }
.xfm-card__title { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.35; font-weight: 600; color: var(--xfm-ink) }
.xfm-card__desc { margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--xfm-soft) }
.xfm-card__meta { margin-top: 8px; font-size: 12.5px; color: var(--xfm-mute) }
.xfm-card__meta span + span::before { content: "/"; margin-inline: .6em; opacity: .6 }
.xfm-card__foot { margin-top: auto; padding-top: 12px }
.xfm-card__action { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--xfm-ink) }
.xfm-card__action::after { content: ""; position: absolute; inset: 0; border-radius: inherit }
.xfm-card__action span { text-decoration: underline; text-decoration-color: rgba(13, 23, 38, .35); text-underline-offset: 4px }
.xfm-card[data-media="video"] .xfm-card__action { min-height: 36px; padding: 0 14px 0 12px; border-radius: 6px; background: var(--xfm-blue); color: #fff }
.xfm-card[data-media="video"] .xfm-card__action span { text-decoration: none }
.xfm-card[data-media="video"] .xfm-card__action::before { content: ""; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent }
.xfm-card[data-media="video"] .xfm-card__cover::after { content: ""; position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg !string!!string!%3E%3Cpath !string!!string!/%3E%3C/svg%3E") center/contain no-repeat; box-shadow: 0 2px 10px rgba(0, 0, 0, .25) }
.xfm-card:has(.xfm-card__action:hover) { border-color: var(--xfm-ink); box-shadow: 0 10px 26px -14px rgba(13, 23, 38, .4) }
.xfm-card:has(.xfm-card__action:focus-visible) { outline: 2px solid var(--xfm-blue); outline-offset: 3px }
.xfm-card__action:focus-visible { outline: none }
.xfm-lib { padding-block: clamp(28px, 3.4vw, 48px) clamp(48px, 6vw, 88px) }
.xfm-lib__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 500; color: var(--xfm-ink) }
.xfm-lib__back span { text-decoration: underline; text-decoration-color: rgba(13, 23, 38, .35); text-underline-offset: 4px }
.xfm-lib__head { margin-top: clamp(8px, 1.2vw, 16px) }
.xfm-lib__head h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.12; font-weight: 600; letter-spacing: .01em }
.xfm-lib__head h2:focus { outline: none }
.xfm-lib__intro { margin-top: 12px; max-width: 40em; font-size: 16px; color: var(--xfm-text) }
.xfm-lib__tools { margin-top: clamp(20px, 2.4vw, 32px); padding-block: 16px; border-block: 1px solid var(--xfm-border) }
.xfm-lib__cats { display: flex; flex-wrap: wrap; gap: 8px }
.xfm-lib__cats a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border: 1px solid var(--xfm-border); border-radius: 999px; background: #fff; font-size: 14px; color: var(--xfm-text); transition: background-color .2s ease, color .2s ease, border-color .2s ease }
.xfm-lib__cats a:hover { border-color: var(--xfm-ink) }
.xfm-lib__cats a[aria-pressed="true"] { background: var(--xfm-ink); border-color: var(--xfm-ink); color: #fff; }
.xfm-lib__cats a[xmlns='http://www.w3.org/2000/svg'] { background: var(--xfm-ink); border-color: var(--xfm-ink); color: #fff }
.xfm-lib__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px }
.xfm-lib__search { position: relative; flex: 1 1 260px; max-width: 420px }
.xfm-lib__search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--xfm-border); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg !string!!string!!string!!string!!string!%3E%3Ccircle !string!!string!!string!/%3E%3Cpath !string!/%3E%3C/svg%3E") 12px center/18px no-repeat; font-size: 15px; color: var(--xfm-ink) }
.xfm-lib__search input::placeholder { color: var(--xfm-mute) }
.xfm-lib__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--xfm-soft) }
.xfm-lib__sort select { height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--xfm-border); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg !string!!string!!string!!string!!string!%3E%3Cpath !string!/%3E%3C/svg%3E") right 10px center/16px no-repeat; font-size: 14.5px; color: var(--xfm-ink); -webkit-appearance: none; appearance: none }
.xfm-lib__count { margin-left: auto; font-size: 13.5px; color: var(--xfm-soft); font-variant-numeric: tabular-nums }
.xfm-lib__results { margin-top: clamp(20px, 2.2vw, 30px) }
.xfm-lib__results:focus { outline: none }
.xfm-lib__results[viewBox='0 0 44 44'] .xfm-grid { opacity: .45 }
.xfm-lib__state { padding: clamp(32px, 5vw, 64px) 20px; border: 1px dashed var(--xfm-border); border-radius: 10px; text-align: center; color: var(--xfm-text) }
.xfm-lib__state p { max-width: 36em; margin-inline: auto }
.xfm-lib__state button { margin-top: 16px; min-height: 44px; padding: 0 20px; border: 1px solid var(--xfm-ink); border-radius: 999px; font-size: 14.5px; font-weight: 500; transition: background-color .2s ease, color .2s ease }
.xfm-lib__state button:hover { background: var(--xfm-ink); color: #fff }
.xfm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--xfm-border); font-size: 14px; color: var(--xfm-soft); font-variant-numeric: tabular-nums }
.xfm-pager__list { display: flex; align-items: center; gap: 6px }
.xfm-pager a, .xfm-pager span[aria-disabled], .xfm-pager span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--xfm-border); border-radius: 8px; background: #fff; color: var(--xfm-ink); font-size: 14.5px }
.xfm-pager a:hover { border-color: var(--xfm-ink) }
.xfm-pager span[aria-current] { background: var(--xfm-ink); border-color: var(--xfm-ink); color: #fff; font-weight: 600 }
.xfm-pager span[aria-disabled] { color: #9AA5B5; background: transparent }
.xfm-pager__gap { padding: 0 2px; color: var(--xfm-mute) }
.xfm-pager__compact { display: none }
.xfm-cta { padding-block: clamp(40px, 5vw, 72px); background: var(--xfm-navy); color: #fff }
.xfm-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px }
.xfm-cta h2 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.25; font-weight: 600 }
.xfm-cta__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px }
.xfm-cta:focus-visible { outline-color: #fff }
.xfm-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 5px; transition: text-decoration-color .2s ease }
.xfm .xfm-link:hover { text-decoration-color: #fff }
.xfm-viewer:not([open]) { display: none }
.xfm-viewer { position: fixed; inset: 0; z-index: 10001; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #06080C; color: #fff; overflow: hidden auto; overscroll-behavior: contain }
.xfm-viewer::backdrop { background: #06080C }
.xfm-viewer:focus-visible { outline-color: #6FA0FF }
.xfm-viewer__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding-inline: var(--xfm-pad); background: #06080C; border-bottom: 1px solid #262B33 }
.xfm-viewer__title { font-size: 17px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.xfm-viewer__title:focus { outline: none }
.xfm-viewer__close { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #4A5361; border-radius: 6px; font-size: 14px; color: #fff; transition: border-color .2s ease }
.xfm-viewer__close:hover { border-color: #fff }
.xfm-viewer__body { padding: 20px var(--xfm-pad) 44px }
.xfm-viewer__stage { position: relative; aspect-ratio: var(--xfm-ar, 16/9); width: min(100%, calc((100vh - 240px) * var(--xfm-arn, 1.7778))); width: min(100%, calc((100dvh - 240px) * var(--xfm-arn, 1.7778))); min-width: min(100%, 220px); margin-inline: auto; background: #000; overflow: hidden }
.xfm-viewer__stage > video, .xfm-viewer__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000 }
.xfm-viewer__state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; font-size: 14px; background: rgba(6, 8, 12, .92) }
.xfm-viewer__state > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.xfm-viewer__state button { min-height: 40px; padding: 0 18px; border: 1px solid #4A5361; border-radius: 6px; color: #fff; font-size: 14px; transition: border-color .2s ease }
.xfm-viewer__state button:hover { border-color: #fff }
.xfm-viewer__status { min-height: 1.7em; margin-top: 8px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .66) }
.xfm-viewer__info { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(20px, 4vw, 56px); max-width: 1180px; margin: 8px auto 0; padding-top: 20px; border-top: 1px solid #262B33 }
.xfm-viewer__desc { font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, .86) }
.xfm-viewer__meta { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .6) }
.xfm-viewer__ask { display: inline-flex; align-items: center; min-height: 40px; margin-top: 16px; padding: 0 16px; border: 1px solid #4A5361; border-radius: 999px; font-size: 14px; color: #fff; transition: border-color .2s ease }
.xfm-viewer__ask:hover { border-color: #fff }
.xfm-viewer__rel h3 { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); font-weight: 500; margin-bottom: 10px }
.xfm-viewer__rel ul { display: grid; gap: 8px }
.xfm-viewer__rel button { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 6px; border: 1px solid #2B323C; border-radius: 8px; background: #0D1117; transition: border-color .2s ease }
.xfm-viewer__rel button:hover { border-color: #fff }
.xfm-viewer__rel img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #1A2029 }
.xfm-viewer__rel b { font-size: 14px; font-weight: 500; line-height: 1.4 }
@media (max-width:1180px) {
.xfm-cats ol { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.xfm-cats li { grid-column: span 2 }
.xfm-cats li:nth-child(n+4) { grid-column: span 3 }
.xfm-cat { min-height: 150px }
}
@media (max-width:900px) {
.xfm-hero__top { grid-template-columns: minmax(0, 1fr); min-height: 0 }
.xfm-hero__in { padding-block: clamp(28px, 6vw, 48px) 0 }
.xfm-hero__stage { height: clamp(260px, 62vw, 340px); min-height: 0; margin-top: 6px }
.xfm-hero h1 { font-size: clamp(46px, 13.2vw, 72px) }
.xfm-hero__lead { max-width: 30em }
.xfm-hero__bg { background: radial-gradient(ellipse 92vw 62vw at var(--xfm-lx, 50%) var(--xfm-ly, 520px), rgba(26, 74, 200, .26), rgba(26, 74, 200, 0) 70%) }
}
@media (max-width:1024px) {
.xfm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width:900px) {
.xfm-viewer__info { grid-template-columns: 1fr }
}
@media (max-width:760px) {
.xfm-hero__acts { gap: 10px }
.xfm-hero__acts .xfm-btn { flex: 1 1 0; padding: 0 14px }
.xfm-bgtoggle { margin: 4px 0 0; flex: 0 0 auto }
.xfm-cats ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.xfm-cats li, .xfm-cats li:nth-child(n+4) { grid-column: auto }
.xfm-cats li:last-child { grid-column: 1/-1 }
.xfm-cat { min-height: 142px; padding: 14px 14px 14px; border-radius: 16px }
.xfm-cat__name { font-size: 16px }
.xfm-cat__en { font-size: 10px; letter-spacing: .06em }
.xfm-cat__desc { font-size: 13px; padding-right: 34px }
.xfm-cat__go { right: 12px; bottom: 12px; width: 28px; height: 28px }
.xfm-grid { grid-template-columns: 1fr }
.xfm-lib .xfm-card[d='M18 14l13 8-13 8z'] .xfm-card__cover { aspect-ratio: 16/9 }
.xfm-lib__count { margin-left: 0; flex: 1 1 100% }
.xfm-lib__search { max-width: none; flex-basis: 100% }
.xfm-pager { justify-content: center }
.xfm-pager__list, .xfm-pager__range { display: none }
.xfm-pager__compact { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100% }
.xfm-cta__in { flex-direction: column; align-items: flex-start }
.xfm-cta__acts { width: 100% }
.xfm-cta .xfm-btn { flex: 1 1 100% }
}
@media (max-width:600px) {
.xfm-hero__lead { max-width: none }
.xfm-hero__acts { flex-wrap: nowrap }
.xfm-bgtoggle { flex: 0 0 46px; width: 46px; min-height: 46px; margin: 0; padding: 0; justify-content: center }
.xfm-bgtoggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}
@media (max-width:340px) {
.xfm-cats ol { grid-template-columns: minmax(0, 1fr) }
.xfm-cats li:last-child { grid-column: auto }
}
@media (prefers-reduced-motion:reduce) {
.xfm *, .xfm *::before, .xfm *::after { transition: none !important; animation: none !important }
.xfm-cat { transform: none !important }
}
.xm-header-v2 a.xm-nav-item { color: var(--xm-text-2) }
.xm-header-v2 a.xm-nav-item:hover { color: var(--xm-text) }
.xm-header-v2 a.xm-nav-item.is-current { color: #fff; background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .08) }
.xm-header-v2 a.xm-nav-item.is-current::before { opacity: 1; transform: scale(1) }
.xm-sitemap__col a.is-current { color: #fff }
.xm-contact-modal a:focus-visible, .xm-contact-modal button:focus-visible { outline: 2px solid var(--xm-blue-soft); outline-offset: 2px }
@media(max-width:1080px) {
.xm-header-v2__nav, .xm-mega-wrap, .xm-header-v2__actions > .xm-diagnosis, .xm-sitemap-btn { display: none }
.xm-mobile-btn { display: inline-flex }
.xm-header-v2__bar { height: 64px; gap: 10px }
.xm-header-v2__actions { margin-left: auto }
.xm-logo-svg { width: clamp(140px, 40vw, 160px) }
}
@media(max-width:1280px) {
.xm-header-v2__bar { gap: 12px }
.xm-header-v2__nav { gap: 2px }
.xm-nav-item { padding: 9px 12px; gap: 6px }
.xm-header-v2__actions > .xm-diagnosis .xm-diag-en { display: none }
}
.xfm-vod-player { width: min(100%, var(--vod-width, 1920px)); margin: clamp(24px, 4vw, 48px) auto 0; padding: clamp(12px, 2vw, 20px); background: #06080C; box-shadow: 0 18px 45px rgba(13, 23, 38, .16) }
.xfm-vod-player .prism-player { position: relative; width: 100%; height: auto; aspect-ratio: var(--vod-ratio, 1.777778); min-height: 0; background: #000; border-radius: 8px; overflow: hidden }
.xfm-vod-player__message { min-height: 1.5em; margin: 12px 0 0; color: #ffb4ab; font-size: 14px; text-align: center }
.xfm-vod-player__message:empty { display: none }
.xfm-vod-player .prism-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none !important; }
.xfm-vod-player .prism-player .prism-big-play-btn { position: absolute !important; left: 50% !important; top: 50% !important; z-index: 50 !important; transform: translate(-50%, -50%) !important; margin: 0 !important }
.xfm-vod-player .prism-player .prism-controlbar { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 100 !important; display: flex; align-items: center; height: 46px; }
.xfm-vod-player .prism-player .prism-controlbar-main { position: relative; z-index: 101; display: flex; align-items: center; width: 100%; height: 46px; gap: 10px; }
.xfm-vod-player .prism-player .prism-controlbar-main > * { flex: 0 0 auto; vertical-align: middle; }
.xfm-vod-player .prism-player .prism-progress { flex: 1 1 auto; min-width: 80px; margin: 0 8px; }
.xfm-vod-player .prism-player .prism-time-display, .xfm-vod-player .prism-player .prism-volume, .xfm-vod-player .prism-player .prism-fullscreen-btn, .xfm-vod-player .prism-player .prism-play-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; }
.xfm-vod-player .prism-player .prism-time-display { white-space: nowrap; line-height: 36px; }
.xfm-vod-player .prism-player .prism-icon { vertical-align: middle }
.xfm-detail-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(32px, 5vw, 72px); padding-top: clamp(24px, 4vw, 48px); border-top: 1px solid var(--xfm-border) }
.xfm-detail-intro h2, .xfm-related h2 { margin: 0 0 16px; color: white; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; font-weight: 600 }
.xfm-detail-intro p { color: var(--xfm-mute); font-size: 16px; line-height: 1.8 }
.xfm-detail-category { margin-top: 22px; color: var(--xfm-text) !important; font-size: 13px !important }
.xfm-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.xfm-related-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--xfm-ink); border-radius: 10px; color: white; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.xfm-related-card:hover { transform: translateY(-3px); border-color: var(--xfm-border); box-shadow: 0 12px 26px rgba(13, 23, 38, .15) }
.xfm-related-card__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--xfm-cover) }
.xfm-related-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover }
.xfm-related-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px }
.xfm-related-card__body strong { display: block; overflow: hidden; color: white; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap }
.xfm-related-card__body small { display: -webkit-box; overflow: hidden; color: var(--xfm-soft); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }
@media (max-width:760px) {
.xfm-detail-below { grid-template-columns: 1fr; gap: 36px }
.xfm-related-grid { gap: 8px }
.xfm-related-card__body { padding: 9px }
.xfm-related-card__body strong { font-size: 12px }
.xfm-related-card__body small { font-size: 11px }
}
@media (max-width:420px) {
.xfm-related-grid { gap: 6px }
.xfm-related-card__body { padding: 7px }
.xfm-related-card__body strong { font-size: 11px }
.xfm-related-card__body small { font-size: 10px }
}
#vodTitle { font-size: clamp(20px, 2.2vw, 40px); line-height: 1.25; font-weight: 600; letter-spacing: .01em; color: white }
@media (max-width:760px) {
#vodTitle { font-size: clamp(18px, 4.4vw, 24px) }
}
@media (max-width:420px) {
#vodTitle { font-size: 18px }
}
.is-frame .xfm[data-view="details"] .xfm-lib__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
#vodTitle { margin: 0 }
.xfm-frame-close { display: none; flex: 0 0 auto; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--xfm-border); border-radius: 999px; background: var(--xfm-card); color: var(--xfm-ink); font: 500 14px/1 var(--font-family, sans-serif); cursor: pointer; transition: border-color .2s ease, background-color .2s ease }
.xfm-frame-close:hover { border-color: var(--xfm-ink); background: var(--xfm-fog-alt) }
.xfm-frame-close svg { width: 16px; height: 16px; flex: none }
.is-frame .xfm-frame-close { display: inline-flex }
@media (max-width:420px) {
.xfm-frame-close { height: 34px; padding: 0 12px; font-size: 13px }
.xfm-frame-close svg { width: 14px; height: 14px }
}