:root {
--c-accent: #1677ff;
--c-accent-strong: #0e5fd8;
--c-text: #4e5f78;
--c-muted: #8494a8;
--c-line: #e4ebf4;
--c-tint: #eaf2fd;
--c-hero-bg: linear-gradient(120deg, #001b37, #6b7b8b);
--c-footer-bg: #001b37;
--c-footer-fg: #c9d8ea;
--radius: 12px;
--container: 1320px;
--section-pad: 68px;
--h1-size: 46px;
--h2-size: 33px;
--btn-radius: 6px;
--grid-cols: 4;
--font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, Arial, sans-serif;
}
/* 第二批积木样式（第一批在 blocks.css） */
/* 内页页头 / 面包屑 */
.page-hero { position: relative; padding: 56px 0 40px; background: var(--c-tint); overflow: hidden; }
.page-hero h1 { margin: 12px 0 10px; font-size: 34px; line-height: 1.3; }
.page-hero p { margin: 0; color: var(--c-muted); }
/* 列表页 banner：栏目封面铺成背景，压一层深色遮罩保证文字可读 */
.page-hero--banner { padding: 76px 0 64px; color: #fff; }
.page-hero--banner .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero--banner::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(95deg, rgba(10, 22, 38, .86) 0%, rgba(10, 22, 38, .58) 60%, rgba(10, 22, 38, .32) 100%);
}
.page-hero--banner .wrap { position: relative; z-index: 2; }
.page-hero--banner p, .page-hero--banner .breadcrumb { color: rgba(255, 255, 255, .82); }
/* 列表页标题下的主色短横线，和区块标题统一 */
.page-hero--banner h1::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px 0 0; border-radius: 2px; background: var(--c-accent); }
.page-hero--banner .breadcrumb a:hover { color: #fff; }
.list-block { padding-top: 40px; }
.list-count { margin: 0 0 22px; color: var(--c-muted); font-size: 14px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--c-muted); font-size: 14px; }
.breadcrumb a:hover { color: var(--c-accent-strong); }
.breadcrumb b { font-weight: 500; color: var(--c-text); }
/* 分页 */
/* 分页条可放在标准列表或自定义模板里，样式不依赖特定父级。 */
.ms-pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 40px; }
.ms-pager[aria-label="分页"] a, .ms-pager[aria-label="分页"] span {
min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 12px; border: 1px solid var(--c-line); border-radius: 10px;
background: #fff; color: var(--c-text); font-size: 14px; text-decoration: none; transition: all .18s ease;
}
.ms-pager[aria-label="分页"] a:hover { border-color: var(--c-accent); color: var(--c-accent-strong); transform: translateY(-1px); }
.ms-pager[aria-label="分页"] .ms-pager-current {
background: var(--c-accent); border-color: var(--c-accent); color: #14202f; font-weight: 600;
}
.ms-pager[aria-label="分页"] .ms-pager-prev, .ms-pager[aria-label="分页"] .ms-pager-next { padding: 0 16px; }
.ms-pager[aria-label="分页"] .is-disabled { color: #c2c8d2; background: #fafbfc; }
.ms-pager[aria-label="分页"] .ms-pager-gap { border: 0; background: transparent; color: var(--c-muted); }
/* 卡片补充 */
.card__meta { margin: 0; color: var(--c-muted); font-size: 13px; }
/* 详情页 */
.detail { padding: 48px 0 16px; }
.detail__wrap { max-width: 900px; }
.detail__title { margin: 14px 0 10px; font-size: 34px; line-height: 1.3; }
.detail__meta { margin: 0 0 12px; color: var(--c-muted); font-size: 14px; }
.detail__summary { margin: 0 0 22px; padding: 16px 18px; background: var(--c-tint); border-left: 3px solid var(--c-accent); border-radius: 6px; }
.detail__cover { margin: 0 0 24px; border-radius: var(--radius); width: 100%; max-height: 460px; object-fit: cover; }
.detail__specs { margin-top: 40px; }
.detail__specs h2 { margin: 0 0 16px; font-size: 22px; }
.spec-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.spec-list li { padding: 11px 16px; background: var(--c-tint); border-radius: 8px; font-size: 15px; }
.prose { color: var(--c-text); }
.prose h3 { margin: 30px 0 10px; font-size: 20px; }
.prose h2 { margin: 34px 0 12px; font-size: 24px; }
.prose p { margin: 0 0 14px; }
.prose img { margin: 12px 0; border-radius: var(--radius); }
/* 图文左右 */
.media-text__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.media-text--flip .media-text__media { order: 2; }
.media-text__media img { width: 100%; border-radius: var(--radius); }
.media-text__eyebrow { margin: 0 0 10px; color: var(--c-accent-strong); font-size: 13px; letter-spacing: .08em; }
.media-text__body h2 { margin: 0 0 12px; font-size: 28px; }
.media-text__body > p { margin: 0 0 16px; color: var(--c-muted); }
.media-text__list { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.media-text__list li::before { content: "— "; color: var(--c-accent-strong); }
/* 联系方式 */
.contact-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contact-info__item { padding: 26px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.contact-info__item span { display: block; margin-bottom: 10px; color: var(--c-muted); font-size: 13px; }
.contact-info__item strong { display: block; margin-bottom: 8px; font-size: 20px; }
.contact-info__item p { margin: 0; color: var(--c-muted); font-size: 14px; }
/* 服务流程 */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item { padding: 24px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.steps__no { display: inline-block; margin-bottom: 12px; color: var(--c-accent-strong); font-size: 22px; font-weight: 600; }
.steps__item h3 { margin: 0 0 8px; font-size: 17px; }
.steps__item p { margin: 0; color: var(--c-muted); font-size: 14px; }
/* 常见问题 */
.faq { display: grid; gap: 12px; }
.faq__item { padding: 18px 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "＋"; float: right; color: var(--c-accent-strong); }
.faq__item[open] summary::after { content: "－"; }
.faq__item p { margin: 12px 0 0; color: var(--c-muted); }
/* 认证墙 / 图集 */
.certs, .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.certs__item, .gallery figure { margin: 0; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; text-align: center; }
.certs__item img { height: 64px; margin: 0 auto 10px; object-fit: contain; }
.certs__item figcaption { color: var(--c-muted); font-size: 13px; }
.gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.gallery figcaption { margin-top: 10px; color: var(--c-muted); font-size: 13px; }
/* 规格 / 参数表 */
.table-wrap { overflow-x: auto; }
.spec-table, .compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.spec-table td, .compare-table th, .compare-table td { padding: 13px 16px; border-bottom: 1px solid var(--c-line); font-size: 15px; text-align: left; }
.compare-table th { background: var(--c-tint); font-weight: 600; }
.spec-table tr:last-child td, .compare-table tr:last-child td { border-bottom: 0; }
/* 分类入口行：第一排二级栏目（品牌），下面按栏目铺三级（品类） */
.tag-row { padding: 18px 0; border-bottom: 1px solid var(--c-line); background: #fff; }
.tag-row__inner { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-row__inner a { padding: 7px 16px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 14px; transition: all .18s ease; }
.tag-row__inner a:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.tag-row__all { background: var(--c-tint); }
.tag-row__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tag-row__group-label { min-width: 92px; color: var(--c-muted); font-size: 13px; }
.tag-row__group-label::before { content: "› "; color: var(--c-accent-strong); }
.tag-row__sub { padding: 5px 12px; border-radius: 999px; background: var(--c-tint); font-size: 13px; color: var(--c-text); transition: all .18s ease; }
.tag-row__sub:hover { background: var(--c-accent); color: #14202f; }
/* 下载列表 */
.downloads { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.downloads li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.downloads strong { display: block; font-size: 16px; }
.downloads span { color: var(--c-muted); font-size: 13px; }
/* 悬浮联系 */
.side-contact { position: fixed; right: 18px; bottom: 24px; z-index: 30; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.side-contact__tel { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 14px; }
.side-contact__btn { padding: 12px 20px; border-radius: 999px; background: var(--c-accent); color: #14202f; font-weight: 600; }
/* 轮播（纯 CSS 滚动吸附） */
.carousel__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.carousel__slide { position: relative; flex: 0 0 min(420px, 80%); scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; }
.carousel__slide img { width: 100%; height: 250px; object-fit: cover; }
.carousel__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 16px; background: linear-gradient(transparent, rgba(8, 18, 32, .85)); color: #fff; font-size: 15px; }
/* 团队 */
.person { text-align: center; }
.person img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radius); background: var(--c-tint); }
.person h3 { margin: 14px 0 6px; font-size: 17px; }
.person p { margin: 0; color: var(--c-muted); font-size: 14px; }
/* 搜索 / 表单 */
.search-bar { padding: 32px 0; }
.search-bar__form { display: flex; gap: 10px; max-width: 560px; }
.search-bar__form input { flex: 1; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 15px; }
.inquiry__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.inquiry__form label { display: grid; gap: 6px; font-size: 14px; color: var(--c-muted); }
.inquiry__form input, .inquiry__form textarea { padding: 11px 14px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 15px; font-family: inherit; }
.inquiry__full { grid-column: 1 / -1; }
/* 时间线 */
.timeline { margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--c-line); display: grid; gap: 22px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
.timeline__year { display: block; margin-bottom: 6px; color: var(--c-accent-strong); font-weight: 600; }
.timeline p { margin: 0; color: var(--c-muted); }
/* 价格表 */
.plan { padding: 28px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; text-align: center; }
.plan--featured { border-color: var(--c-accent); box-shadow: 0 16px 34px rgba(19, 40, 63, .12); }
.plan h3 { margin: 0 0 10px; font-size: 18px; }
.plan__price { margin: 0 0 18px; font-size: 28px; font-weight: 600; color: var(--c-accent-strong); }
.plan__price span { font-size: 14px; font-weight: 400; color: var(--c-muted); }
.plan ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--c-muted); font-size: 14px; }
/* 大图列表 */
.wide-list { display: grid; gap: 20px; }
.wide-list__item { display: grid; grid-template-columns: 320px 1fr; gap: 24px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.wide-list__media img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
.wide-list__body h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.45; }
.wide-list__body p { margin: 0 0 14px; color: var(--c-muted); }
.wide-list__more { color: var(--c-accent-strong); font-size: 14px; }
/* 两栏优势 */
.feature-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.feature-2__list { display: grid; gap: 18px; }
/* 视频位 */
.video { position: relative; border-radius: var(--radius); overflow: hidden; }
.video img { width: 100%; height: 420px; object-fit: cover; }
.video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: rgba(8, 18, 32, .35); }
/* 栏目录表还没有内容时的空状态 */
.list-empty { margin: 8px 0 0; padding: 28px 0; text-align: center; color: #8a93a3; font-size: 14px; }
/* 首屏进场动效：纯 CSS，静态站不需要 JS */
@keyframes ms-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.hero__title, .hero__text, .hero__actions { animation: ms-fade-up .62s ease both; }
.hero__text { animation-delay: .1s; }
.hero__actions { animation-delay: .2s; }
.block__head h2 { transition: color .2s ease; }
/* 无障碍：系统开了「减少动效」就全部关掉 */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* 窄屏 */
@media (max-width: 960px) {
.media-text__inner, .feature-2, .wide-list__item, .inquiry__form { grid-template-columns: minmax(0, 1fr); }
.media-text--flip .media-text__media { order: 0; }
.steps, .certs, .gallery, .contact-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.steps, .certs, .gallery, .contact-info__grid { grid-template-columns: minmax(0, 1fr); }
.detail__title, .page-hero h1 { font-size: 26px; }
.hero-carousel__stage { min-height: 420px; }
/* 选择器要带上 .hero-carousel：箭头那一段带这个前缀，光写单类压不住 */
.hero-carousel .hero-carousel__arrow { display: none; }
}
/* 积木样式：只用主题变量（--c-* / --radius / --space），换主题只改变量 */
.block { padding: var(--section-pad, 64px) 0; }
.block--tint { background: var(--c-tint); }
.block__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.block__head h2 { margin: 0 0 10px; font-size: var(--h2-size, 30px); line-height: 1.3; }
.block__head p { margin: 0; color: var(--c-muted); }
.block__head h2::after { content: ""; display: block; width: 44px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--c-accent); }
.block__foot { margin-top: 32px; text-align: center; }
/* 分区小标（官网那种英文小字：CORE CAPABILITIES / FAQ）：富文本正文里也会用到 */
.block__head .eyebrow { margin: 0 0 10px; color: var(--c-accent-strong); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
/* 标签墙：行业覆盖这类纯展示标签 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { padding: 8px 18px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-text); font-size: 14px; }
/* 页头搜索入口：图标 + 文字，窄屏只留图标 */
.site-header__search {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-text);
font-size: 14px; white-space: nowrap; transition: all .18s ease;
}
.site-header__search svg { width: 16px; height: 16px; }
.site-header__search:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
@media (max-width: 1180px) { .site-header__search span { display: none; } }
/* 搜索页：搜索框放大一点，结果用列表页同款卡片 */
.search-page__form { max-width: 680px; margin: 0 auto; }
.search-page__results { margin-top: 26px; }
/* 询盘表单（渲染后台自定义表单）：字段按后台配置铺，验证码与提交状态在这一层收口 */
.inquiry__field { display: grid; gap: 6px; font-size: 14px; color: var(--c-muted); }
.inquiry__field > span:first-child { color: var(--c-text); font-weight: 600; }
.inquiry__captcha { display: flex; gap: 10px; align-items: center; }
.inquiry__captcha input { flex: 1; }
.inquiry__captcha img { width: 132px; height: 46px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; cursor: pointer; }
.inquiry__captcha-retry {
padding: 0 14px; height: 46px; border: 1px dashed var(--c-line); border-radius: 8px;
background: #fff; color: var(--c-muted); font-size: 13px; cursor: pointer;
}
.inquiry__captcha-retry:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.inquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inquiry__actions { align-items: center; }
.inquiry__actions .btn { width: max-content; }
.inquiry__status { font-size: 14px; }
.inquiry__status.is-ok { color: #1f8f4d; }
.inquiry__status.is-error { color: #d4380d; }
.inquiry-modal[hidden] { display: none; }
.inquiry-modal {
position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
background: rgba(18, 25, 34, .48); animation: inquiry-modal-fade-in .2s ease-out;
}
.inquiry-modal__backdrop { position: absolute; inset: 0; cursor: pointer; }
.inquiry-modal__panel {
position: relative; width: min(100%, 430px); padding: 42px 34px 30px; border: 1px solid var(--c-line);
border-radius: 18px; background: #fff; box-shadow: 0 22px 60px rgba(18, 25, 34, .2);
text-align: center; animation: inquiry-modal-rise-in .24s ease-out;
}
.inquiry-modal__close {
position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--c-muted); cursor: pointer;
}
.inquiry-modal__close:hover { background: var(--c-tint); color: var(--c-text); }
.inquiry-modal__close span::before, .inquiry-modal__close span::after {
content: ""; position: absolute; top: 17px; left: 10px; width: 16px; height: 1.5px;
border-radius: 2px; background: currentColor; transform: rotate(45deg);
}
.inquiry-modal__close span::after { transform: rotate(-45deg); }
.inquiry-modal__icon {
display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px;
border-radius: 50%; background: #e9f7ef; color: #1f8f4d;
}
.inquiry-modal__icon span { position: relative; width: 25px; height: 14px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg) translate(2px, -2px); }
.inquiry-modal__message { margin: 0 auto 24px; color: var(--c-text); font-size: 20px; font-weight: 700; line-height: 1.55; }
.inquiry-modal__confirm { min-width: 124px; }
@keyframes inquiry-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes inquiry-modal-rise-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.inquiry-modal, .inquiry-modal__panel { animation: none; }
}
@media (max-width: 560px) {
.inquiry-modal { padding: 16px; }
.inquiry-modal__panel { padding: 38px 24px 24px; }
.inquiry-modal__message { font-size: 18px; }
}
.inquiry__form select { padding: 11px 14px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; }
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 卡片网格：列数由片段参数控制（--grid-cols，默认 4） */
.grid--cards { --grid-cols: 4; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: 20px; }
/* 推荐产品用的小卡片：图矮一点、字小一点，一行四列不显臃肿 */
.card--product .card__media img { height: 150px; }
.card--product .card__body { padding: 16px 18px 20px; gap: 8px; }
.card--product h3 { font-size: 15px; line-height: 1.5; }
.card--product .card__text { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.card--product .card__sku { font-size: 12px; }
@media (max-width: 1180px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--cards { grid-template-columns: minmax(0, 1fr); } }
/* 列表页卡片：一行四列，卡片尺寸按四列收一档，图不至于把标题挤到屏幕外 */
.list-block .grid--4 .card__media img { height: 170px; }
.list-block .grid--4 .card__body { padding: 16px 18px 20px; gap: 8px; }
.list-block .grid--4 .card h3 { font-size: 16px; line-height: 1.5; }
.list-block .grid--4 .card__text {
font-size: 13px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 页头 */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--c-line); }
/* 顶部条：logo 上面那一行（咨询热线 / 联系我们 / 地区语言），和官网一样米色细条 */
.site-topbar { background: var(--c-tint); border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); }
.site-topbar__bar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; }
.site-topbar__left, .site-topbar__right { display: flex; align-items: center; gap: 10px; }
.site-topbar__tel a { color: var(--c-text); font-weight: 600; margin-left: 6px; }
.site-topbar__link { color: var(--c-muted); transition: color .18s ease; }
.site-topbar__link:hover { color: var(--c-accent-strong); }
.site-topbar__sep { color: var(--c-line); }
.site-topbar__region { color: var(--c-text); }
/*
* 导航需要同时容纳 logo、长菜单、搜索和 CTA。主题正文容器可能只有 1100px，
* 英文等长文案会在宽屏上互相覆盖，因此页头单独保留更宽的可用行宽。
*/
.site-header .site-topbar__bar, .site-header .site-header__bar {
width: min(max(var(--container), 1200px), calc(100% - 48px));
}
.site-header__bar { display: flex; align-items: center; gap: 22px; min-height: 74px; flex-wrap: nowrap; }
.site-header__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.site-header__brand img { max-height: 44px; }
.site-header__nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; }
.site-header__nav a:hover { color: var(--c-accent-strong); }
.site-header__tel { font-weight: 600; color: var(--c-accent-strong); white-space: nowrap; }
.site-header__brand { flex: none; }
.site-header__brand span { white-space: nowrap; }
.site-header__cta { padding: 10px 22px; white-space: nowrap; }
/* 页头下拉：FS 风格大菜单（左二级列表 + 右三级卡片） */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item__link { position: relative; padding: 6px 0; }
.nav-item__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--c-accent); transform: scaleX(0); transform-origin: left;
transition: transform .22s ease;
}
.nav-item:hover .nav-item__link::after, .nav-item:focus-within .nav-item__link::after { transform: scaleX(1); }
.nav-item--current > .nav-item__link { color: var(--c-accent-strong); font-weight: 700; }
.nav-item--current > .nav-item__link::after { transform: scaleX(1); }
.nav-item__link.is-active, .nav-item__link[aria-current="page"] { color: var(--c-accent-strong); font-weight: 700; }
.nav-item__link.is-active::after, .nav-item__link[aria-current="page"]::after { transform: scaleX(1); }
.nav-item--drop > .nav-item__link { padding-right: 14px; }
.nav-item--drop > .nav-item__link::before {
content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.nav-item--drop:hover > .nav-item__link::before,
.nav-item--drop:focus-within > .nav-item__link::before { transform: translateY(-30%) rotate(-135deg); }
.nav-mega {
position: absolute; top: calc(100% + 10px); left: -18px; z-index: 40;
display: flex; background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
box-shadow: 0 22px 48px rgba(19, 40, 63, .14); overflow: hidden;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item--drop:hover .nav-mega, .nav-item--drop:focus-within .nav-mega,
.nav-item--drop:hover .nav-drop, .nav-item--drop:focus-within .nav-drop {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* 左：二级列表 */
.nav-mega__side {
width: 200px; padding: 10px; margin: 0; list-style: none; background: #f7f8fa;
border-right: 1px solid var(--c-line);
/* 二级多的时候（产品 15 个品牌）内部滚动，菜单不会顶到屏幕外 */
max-height: min(56vh, 480px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: #c9cfd8 transparent;
}
.nav-mega__side::-webkit-scrollbar { width: 6px; }
.nav-mega__side::-webkit-scrollbar-track { background: transparent; }
.nav-mega__side::-webkit-scrollbar-thumb { background: #c9cfd8; border-radius: 999px; }
.nav-mega__side::-webkit-scrollbar-thumb:hover { background: #aab3c0; }
.nav-mega__item a {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
color: var(--c-text); font-size: 14px; font-weight: 600; transition: all .18s ease;
}
.nav-mega__item a:hover, .nav-mega__item.is-active a {
background: #fff; color: var(--c-accent-strong); box-shadow: 0 8px 20px rgba(19, 40, 63, .08);
}
/* 右：二级栏目面板（二级栏目图 + 全部按钮 + 三级子栏目排列） */
.nav-mega__panels {
/* 面板内容贴顶：和左侧第一项齐平，不要垂直居中显得"二级标题掉到中间" */
display: flex; flex-direction: column; justify-content: flex-start;
min-width: 460px; max-width: min(680px, calc(100vw - 300px)); padding: 10px 24px 18px;
}
.nav-mega__panel { display: none; }
.nav-mega__panel.is-active { display: block; }
.mega-head { display: flex; align-items: flex-start; gap: 16px; }
.mega-head__img { width: 120px; height: 80px; object-fit: contain; background: var(--c-tint); border-radius: 10px; padding: 8px; }
.mega-head__text { display: grid; gap: 8px; justify-items: start; padding-top: 6px; }
.mega-head__title { color: var(--c-text); font-size: 17px; font-weight: 700; }
.mega-all {
display: inline-flex; align-items: center; padding: 7px 18px; width: max-content;
border: 1px solid var(--c-accent); border-radius: 999px; color: var(--c-accent-strong);
font-size: 13px; font-weight: 600; transition: all .2s ease;
}
.mega-all:hover { background: var(--c-accent); color: #17202c; }
/* 分隔线挂在三级链接上：这个二级没有三级时（模块 / 深信服…）面板只有图 + 全部，不留空横线 */
.mega-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.mega-links a {
display: block; padding: 7px 10px; border-radius: 8px; color: var(--c-muted);
font-size: 14px; transition: all .16s ease;
}
.mega-links a:hover { background: var(--c-tint); color: var(--c-accent-strong); }
.mega-links a[aria-current="page"] { background: var(--c-tint); color: var(--c-accent-strong); font-weight: 600; }
/* 只有两级的栏目（例如新闻中心）：简单文字下拉，白卡片 + 两列链接 */
.nav-drop {
position: absolute; top: calc(100% + 10px); left: -18px; z-index: 40;
display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 4px 6px;
min-width: 340px; padding: 14px; background: #fff; border: 1px solid var(--c-line);
border-radius: 14px; box-shadow: 0 22px 48px rgba(19, 40, 63, .14);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-drop__link {
display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
color: var(--c-text); font-size: 14px; font-weight: 600; transition: all .18s ease;
}
.nav-drop__link::before {
content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
background: var(--c-accent); opacity: .45; transition: all .18s ease;
}
.nav-drop__link:hover { background: var(--c-tint); color: var(--c-accent-strong); }
.nav-drop__link:hover::before { opacity: 1; transform: scale(1.2); }
.nav-drop__link.is-active { background: var(--c-tint); color: var(--c-accent-strong); }
.nav-drop__link.is-active::before { opacity: 1; transform: scale(1.2); }
@media (max-width: 1180px) {
.nav-mega__side { width: 168px; }
.nav-mega__panels { min-width: 380px; }
.nav-drop { grid-template-columns: minmax(0, 1fr); min-width: 240px; }
}
/* 首页主视觉轮播（本地 Swiper 驱动）：整屏背景图 + 文案，高度跟内容走 */
.hero-carousel { padding: 0; background: var(--c-hero-bg); color: #fff; }
.hero-carousel .swiper-wrapper { align-items: stretch; }
.hero-carousel__slide { position: relative; display: flex; align-items: stretch; min-height: 520px; }
.hero-carousel__slide::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(10, 22, 38, .88) 0%, rgba(10, 22, 38, .55) 55%, rgba(10, 22, 38, .25) 100%);
}
.hero-carousel__slide:not(:has(.hero-carousel__bg))::after { opacity: .35; }
.hero-carousel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__body { position: relative; z-index: 2; display: flex; align-items: center; max-width: var(--hero-carousel-body, 900px); min-height: 520px; padding: 56px 24px; }
.hero-carousel__copy { width: 100%; max-width: 560px; }
/*
左右箭头：片段库自己画。
Swiper 自带的 `.swiper-button-prev/next` 默认样式（宽 27px / 高 44px / 蓝色 / 贴屏幕 10px / 图标字体画在 ::after 上）
是跟着 `assets/vendor` 在片段库**之后**加载的，同权重选择器一律被它顶掉——之前那版"54px + 毛玻璃"的箭头就是这么失效的。
所以这里的选择器统一带上 `.hero-carousel`，比 Swiper 的默认样式更具体；箭头复用 Swiper 的 class 只是为了给它挂导航事件。
位置：贴着「主宽度」的外侧站——主宽度就是页头 / 导航那一档
（`.site-header__bar` 的 `min(max(var(--container), 1200px), calc(100% - 48px))`，宽屏不低于 1200px），
两侧放不下时依次退到：主宽度内侧（≤1330px）→ 右下角与圆点同排（≤1080px）→ 隐藏（≤640px）。
*/
.hero-carousel {
--hero-carousel-arrow: 52px;
--hero-carousel-body: 900px;
--hero-carousel-column: min(max(var(--container, 1240px), 1200px), calc(100% - 48px));
--hero-carousel-arrow-inset: max(12px, calc((100% - var(--hero-carousel-column)) / 2 - var(--hero-carousel-arrow) - 12px));
}
.hero-carousel .hero-carousel__arrow {
position: absolute; top: 50%; z-index: 3;
width: var(--hero-carousel-arrow); height: var(--hero-carousel-arrow);
margin-top: calc(var(--hero-carousel-arrow) / -2);
padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%;
background: rgba(12, 22, 36, .35); color: #fff; backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(6, 14, 26, .35);
transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* 关掉 Swiper 的图标字体，箭头用 ::before 画的细折线 */
.hero-carousel .hero-carousel__arrow::after { display: none; }
.hero-carousel .hero-carousel__arrow::before {
content: ""; width: 13px; height: 13px;
border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor;
}
.hero-carousel .hero-carousel__prev { left: var(--hero-carousel-arrow-inset); right: auto; }
.hero-carousel .hero-carousel__next { right: var(--hero-carousel-arrow-inset); left: auto; }
/* 折线用边框拼，旋转后中心会偏半个对角线，平移回来才是正的 */
.hero-carousel .hero-carousel__prev::before { transform: translateX(3.7px) rotate(-45deg); }
.hero-carousel .hero-carousel__next::before { transform: translateX(-3.7px) rotate(135deg); }
.hero-carousel .hero-carousel__arrow:hover,
.hero-carousel .hero-carousel__arrow:focus-visible {
background: #fff; border-color: #fff; color: #17202c; box-shadow: 0 14px 32px rgba(6, 14, 26, .4);
}
.hero-carousel .hero-carousel__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* 主宽度两侧放不下两个箭头：退到主宽度内侧，仍是左右两侧（文案列比主宽度窄，压不到字） */
@media (max-width: 1330px) {
.hero-carousel {
--hero-carousel-arrow-inset: max(12px, calc((100% - var(--hero-carousel-column)) / 2 + 12px));
}
}
/*
更窄：文案列几乎占满宽度，左右都会压住标题和按钮——挪到底部右侧，和圆点同一行，大小收一档；
再窄（<=640px）由 blocks-extra.css 整组隐藏，只留圆点 + 手势。
*/
@media (max-width: 1080px) {
.hero-carousel { --hero-carousel-arrow: 44px; }
.hero-carousel .hero-carousel__arrow { top: auto; bottom: 10px; margin-top: 0; }
.hero-carousel .hero-carousel__prev { left: auto; right: 84px; }
.hero-carousel .hero-carousel__next { right: 24px; left: auto; }
}
.hero-carousel__dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; display: flex; gap: 10px; justify-content: center; }
.hero-carousel__dots .swiper-pagination-bullet {
width: 10px; height: 10px; margin: 0 !important; opacity: 1; background: transparent;
border: 1px solid rgba(255, 255, 255, .7); transition: all .25s ease;
}
.hero-carousel__dots .swiper-pagination-bullet:hover { background: rgba(255, 255, 255, .5); }
.hero-carousel__dots .swiper-pagination-bullet-active { width: 26px; border-radius: 999px; background: #fff; }
/* 页头右上角语言切换（和二级菜单同一套交互：悬停 / 键盘 focus 展开） */
.lang-switch { position: relative; flex: none; }
.lang-switch__btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
font: inherit; font-size: 14px; color: inherit; cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
.lang-switch__btn:hover, .lang-switch:focus-within .lang-switch__btn { border-color: var(--c-accent); color: var(--c-accent-strong); }
.lang-switch__globe {
width: 15px; height: 15px; border: 1.6px solid currentColor; border-radius: 50%;
position: relative;
}
.lang-switch__globe::before, .lang-switch__globe::after {
content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.lang-switch__globe::before { width: 100%; height: 1.4px; }
.lang-switch__globe::after { width: 6px; height: 100%; border-radius: 50%; background: none; border-left: 1.4px solid currentColor; border-right: 1.4px solid currentColor; }
.lang-switch__caret {
width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .22s ease;
}
.lang-switch:hover .lang-switch__caret, .lang-switch:focus-within .lang-switch__caret { transform: translateY(1px) rotate(-135deg); }
.lang-drop {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 168px;
display: grid; gap: 2px; padding: 10px; background: #fff; border: 1px solid var(--c-line);
border-radius: 12px; box-shadow: 0 18px 38px rgba(19, 40, 63, .12);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-switch:hover .lang-drop, .lang-switch:focus-within .lang-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-drop__link { padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-size: 14px; transition: background .18s ease, color .18s ease; }
.lang-drop__link:hover { background: var(--c-tint); color: var(--c-accent-strong); }
.lang-drop__link.is-active { color: var(--c-accent-strong); font-weight: 600; background: var(--c-tint); }
/* 主视觉 */
.hero { padding: 96px 0 88px; background: var(--c-hero-bg); color: #fff; }
.hero__inner { max-width: 900px; }
.hero__eyebrow { margin: 0 0 14px; font-size: 14px; letter-spacing: .08em; opacity: .8; }
.hero__title { margin: 0 0 18px; font-size: var(--h1-size, 46px); line-height: 1.2; }
.hero__text { margin: 0 0 28px; font-size: 17px; opacity: .85; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: var(--btn-radius, 999px); border: 1px solid transparent; font-size: 15px; transition: all .2s ease; }
.btn--primary { background: var(--c-accent); color: #14202f; }
.btn--primary:hover { background: var(--c-accent-strong); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(19, 40, 63, .16); }
.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
/* 数据条 */
.stats { padding: 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin: -40px auto 0; position: relative; background-clip: padding-box; }
.stats__item { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; background: #fff; }
.stats__item strong { font-size: 28px; color: var(--c-accent-strong); transition: color .3s ease; }
.stats__item strong.is-counting { letter-spacing: .02em; }
.stats__item span { color: var(--c-muted); font-size: 14px; }
/* 特点三栏 */
.feature { padding: 26px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.feature__icon { display: inline-flex; padding: 4px 12px; margin-bottom: 14px; border-radius: 999px; background: var(--c-tint); color: var(--c-accent-strong); font-size: 13px; }
.feature h3 { margin: 0 0 8px; font-size: 18px; }
.feature p { margin: 0; color: var(--c-muted); font-size: 15px; }
/* 卡片 */
.card { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(19, 40, 63, .12); }
.card--flat { border: 0; background: transparent; }
.card--flat .card__body { padding: 16px 0 0; }
.card__media { display: block; background: var(--c-tint); }
.card__media { overflow: hidden; }
.card__media img { width: 100%; height: 210px; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.card:hover .card__media img { transform: scale(1.05); }
/* 懒加载图片：加载完成后淡入（site-init.js 加 is-loaded 类） */
img[loading="lazy"] { opacity: 0; transition: opacity .45s ease; }
img[loading="lazy"].is-loaded { opacity: 1; }
.card__media--wide img { height: 240px; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.card__tags span { display: inline-block; padding: 3px 10px; border: 1px solid var(--c-accent); color: var(--c-accent-strong); border-radius: 999px; font-size: 12px; }
.card h3 { margin: 0; font-size: 18px; line-height: 1.45; }
.card__sku { margin: 0; color: var(--c-muted); font-size: 13px; letter-spacing: .02em; }
.card__text { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.6; }
/* 新闻 */
.news { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.news time { display: block; margin-bottom: 10px; color: var(--c-muted); font-size: 13px; }
.news h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.5; }
.news p { margin: 0; color: var(--c-muted); font-size: 14px; }
/* 品牌墙 */
.brands { display: flex; flex-wrap: wrap; gap: 20px; }
.brands a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; padding: 18px 12px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.brands img { height: 56px; object-fit: contain; filter: grayscale(1); opacity: .85; transition: all .2s ease; }
.brands a:hover img { filter: none; opacity: 1; }
.brands span { color: var(--c-muted); font-size: 13px; }
/* CTA 条 */
.cta-band { background: var(--c-hero-bg); color: #fff; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 8px; font-size: 28px; }
.cta-band p { margin: 0; opacity: .82; }
/* 页脚 */
.site-footer { padding: 48px 0 32px; background: var(--c-footer-bg); color: var(--c-footer-fg); }
.site-footer__grid { display: flex; gap: 40px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.site-footer__grid .site-footer__qr { margin-left: auto; }
.site-footer__brand strong { display: block; margin-bottom: 10px; font-size: 17px; }
.site-footer__brand p { margin: 0 0 6px; opacity: .78; font-size: 14px; }
.site-footer__brand a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.site-footer__brand a:hover { color: #fff; border-color: #fff; }
.site-footer__brand { max-width: 340px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 14px; opacity: .8; font-size: 14px; }
.site-footer__copy { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); opacity: .62; font-size: 13px; text-align: center; }
/* 窄屏：一列铺开 */
@media (max-width: 960px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__title { font-size: 34px; }
}
@media (max-width: 640px) {
.grid--3, .grid--4, .stats__grid { grid-template-columns: minmax(0, 1fr); }
.block { padding: 48px 0; }
}
/* 中等桌面：收紧导航密度，优先保证每一项和搜索、CTA 都有独立可点击区域。 */
@media (max-width: 1180px) {
.site-header .site-topbar__bar, .site-header .site-header__bar { width: min(var(--container), calc(100% - 48px)); }
.site-header__bar { gap: 16px; }
.site-header__nav { gap: 14px; font-size: 14px; }
.site-header__cta { padding: 9px 16px; font-size: 14px; }
.site-header__search { padding: 8px 10px; }
}
@media (max-width: 1080px) {
.site-topbar__bar { min-height: 34px; font-size: 12px; }
.site-header__cta { display: none; }
}
/* 顶部条里的语言切换：比菜单栏那版小一号，下拉靠右上角展开 */
.site-topbar .lang-switch__btn { padding: 3px 10px; border: 0; background: transparent; font-size: 13px; gap: 6px; }
.site-topbar .lang-switch__btn:hover, .site-topbar .lang-switch:focus-within .lang-switch__btn { border: 0; color: var(--c-accent-strong); }
.site-topbar .lang-switch__globe { width: 13px; height: 13px; border-width: 1.4px; }
.site-topbar .lang-switch__caret { width: 5px; height: 5px; }
.site-topbar .lang-drop { top: calc(100% + 6px); right: 0; }
/* ── 紧凑导航（<=1080px：隐藏桌面导航，导航收进汉堡菜单） ───────────────── */
.ms-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.ms-nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; cursor: pointer; }
.ms-nav-burger span { display: block; height: 2px; width: 22px; background: var(--c-text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.ms-mobile-nav { max-height: 0; overflow: hidden; border-top: 1px solid var(--c-line); background: #fff; transition: max-height .3s ease; }
.ms-mobile-nav__inner { display: grid; gap: 2px; padding: 8px 0 14px; }
.ms-mobile-nav__link, .ms-mobile-nav__group > summary, .ms-mobile-nav__sub > summary {
display: block; padding: 12px 6px; color: var(--c-text); font-size: 15px; border-bottom: 1px solid var(--c-line);
}
.ms-mobile-nav__group, .ms-mobile-nav__sub { border: 0; }
.ms-mobile-nav__group > summary, .ms-mobile-nav__sub > summary {
position: relative; cursor: pointer; list-style: none; font-weight: 600;
}
.ms-mobile-nav__group > summary::-webkit-details-marker, .ms-mobile-nav__sub > summary::-webkit-details-marker { display: none; }
.ms-mobile-nav__group > summary::after, .ms-mobile-nav__sub > summary::after {
content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
transform: rotate(45deg); transition: transform .25s ease;
}
.ms-mobile-nav__group[open] > summary::after, .ms-mobile-nav__sub[open] > summary::after { transform: rotate(-135deg); }
.ms-mobile-nav__sub > summary { padding-left: 22px; font-weight: 500; color: var(--c-muted); }
.ms-mobile-nav__sub .ms-mobile-nav__link { padding-left: 36px; color: var(--c-muted); }
.ms-mobile-nav__link--all { color: var(--c-accent-strong); font-weight: 600; }
.ms-mobile-nav__link.is-active { color: var(--c-accent-strong); font-weight: 700; }
.ms-mobile-nav__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 6px 0; font-size: 14px; color: var(--c-muted); }
.ms-mobile-nav__lang.is-active { color: var(--c-accent-strong); font-weight: 600; }
@media (max-width: 1080px) {
.site-header__nav { display: none; }
.site-header__search { display: none; }
.site-header__cta { display: none; }
.ms-nav-burger { display: flex; }
.site-header__bar { justify-content: space-between; }
/* 展开抽屉：勾上 checkbox 就推开，纯 CSS，不依赖 JS */
.ms-nav-toggle:checked ~ .ms-mobile-nav { max-height: 80vh; overflow-y: auto; }
.ms-nav-toggle:checked ~ .site-header__bar .ms-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ms-nav-toggle:checked ~ .site-header__bar .ms-nav-burger span:nth-child(2) { opacity: 0; }
.ms-nav-toggle:checked ~ .site-header__bar .ms-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* 品牌墙小轮播 */
.brands { overflow: hidden; }
.brands .swiper-wrapper { align-items: stretch; }
.brand-card { width: 180px; height: 104px; margin-right: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(19, 40, 63, .1); border-color: var(--c-accent); }
.brand-card img { max-height: 44px; max-width: 120px; object-fit: contain; }
.brand-card span { color: var(--c-muted); font-size: 13px; }
/* 页脚二维码（站点设置里上传，没上传就不显示） */
.site-footer__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-footer__qr img { width: 96px; height: 96px; object-fit: contain; background: #fff; padding: 6px; border-radius: 10px; }
.site-footer__qr span { color: var(--c-footer-fg); opacity: .8; font-size: 13px; }
/* ── 新闻中心：左边头条大图，右边最新条目列表 ───────────────────────────── */
.news-center { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.news-center .news-item:first-child { grid-row: span 5; border: 0; padding: 0; }
.news-item { display: grid; gap: 0; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--c-line); }
.news-item__media { display: none; }
.news-center .news-item:first-child .news-item__media:has(img) { display: block; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; background: var(--c-tint); }
.news-center .news-item:first-child .news-item__media img { width: 100%; height: 320px; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
/* 头条没封面时不留空位 */
.news-center .news-item:first-child:not(:has(.news-item__media img)) .news-item__body { padding-top: 8px; }
.news-center .news-item:first-child:hover .news-item__media img { transform: scale(1.04); }
.news-item__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--c-muted); font-size: 13px; }
.news-item__meta time { color: var(--c-accent-strong); font-weight: 600; }
.news-item h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.5; }
.news-item h3 a { transition: color .2s ease; }
.news-item h3 a:hover { color: var(--c-accent-strong); }
.news-center .news-item:first-child h3 { font-size: 26px; line-height: 1.4; }
.news-item p { margin: 0 0 10px; color: var(--c-muted); font-size: 14px; }
.news-center .news-item:not(:first-child) p { display: none; }
.news-item__more { color: var(--c-accent-strong); font-size: 14px; }
.news-center .news-item:not(:first-child) .news-item__more { display: none; }
.news-center .news-item:not(:first-child) { padding-left: 0; transition: transform .2s ease, border-color .2s ease; }
.news-center .news-item:not(:first-child):hover { transform: translateX(4px); border-color: var(--c-accent); }
.news-center__foot { grid-column: 1 / -1; text-align: center; margin-top: 8px; }
@media (max-width: 900px) {
.news-center { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.news-center .news-item:first-child .news-item__media img { height: 220px; }
.news-center .news-item:first-child h3 { font-size: 20px; }
}
/* 首屏轮播里的按钮：深色大图上用胶囊形 + 毛玻璃，hover 有反馈 */
.hero-carousel .hero__actions { gap: 14px; margin-top: 6px; }
.hero-carousel .hero__actions .btn {
min-width: 148px; padding: 15px 32px; border-radius: 999px; font-size: 16px; font-weight: 600;
letter-spacing: .02em; transition: all .25s cubic-bezier(.22,.61,.36,1);
}
.hero-carousel .hero__actions .btn--primary {
background: var(--c-accent); color: #17202c; border-color: transparent;
box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.hero-carousel .hero__actions .btn--primary:hover {
background: var(--c-accent-strong); color: #fff; transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
}
.hero-carousel .hero__actions .btn--ghost {
background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff;
backdrop-filter: blur(8px);
}
.hero-carousel .hero__actions .btn--ghost:hover {
background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .85); transform: translateY(-2px);
}
/* 大图上的文字加一点投影，避免压在亮色图上糊掉 */
.hero-carousel__body { text-shadow: 0 2px 18px rgba(6, 14, 26, .45); }
.hero-carousel__body .btn { text-shadow: none; }
/* 左右箭头只在上面「首页主视觉轮播」那一段定义一次，这里不重复写，免得被后来的 Swiper 默认样式顶掉 */
.hero-carousel__dots { bottom: 28px; }
.hero-carousel__dots .swiper-pagination-bullet {
width: 9px; height: 9px; background: rgba(255, 255, 255, .55); border: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.hero-carousel__dots .swiper-pagination-bullet-active {
width: 30px; height: 9px; background: var(--c-accent);
}
@media (max-width: 900px) {
.hero-carousel .hero__actions .btn { min-width: 0; padding: 12px 24px; font-size: 15px; }
}
/*
* 星涌官网（南京星涌网络）主题皮肤。
*
* 这一层只承载「本站点的皮肤与站点专属版式」：
* - 颜色变量、字号、圆角、间距的取值都从主题 tokens 生成的 `--c-*` 派生，后台改色即刻生效；
* - 类名统一 `xy-` 前缀，不和共享片段库（_blocks/blocks.css）里的类名互相影响；
* - 页面里出现的所有图形（首屏背景、产品图、场景图、图标）都是内联 SVG 或 CSS 渐变，
* 不引用任何外链图片，预览与静态产物完全一致，首屏没有外部请求。
*
* 平台约定：`:root{...}` 由 tokens 生成、会被构建器顶掉，所以本站变量写在 `html` 上。
*/
html {
/*
* 主色 / 文字 / 分隔线：全部由主题 tokens 派生，后台改一次全站跟着变。
*
* 主色往深色方向混一档再用：tokens 原色（#1677ff）当文字放在白底上只有 4.1:1，
* 白字压在它上面同样只有 4.1:1，都够不到 AA 的 4.5:1。混成 5.4:1 之后，
* 「蓝字 + 白字按钮 + 徽标」一次解决，配色仍然跟着后台走。
*/
--xy-primary: color-mix(in srgb, var(--c-accent, #1677ff) 80%, #001b37);
--xy-primary-strong: var(--c-accent-strong, #0e5fd8);
--xy-primary-soft: #e8f2fe;
--xy-primary-ring: rgba(22, 119, 255, 0.18);
/* 深色底：顶栏 / 页脚 / 深色版块 */
--xy-navy: var(--c-footer-bg, #001b37);
--xy-navy-2: #042039;
--xy-navy-3: #0a2a4e;
--xy-navy-fg: var(--c-footer-fg, #c9d8ea);
--xy-ink: #0b2038;
--xy-ink-2: #16314f;
--xy-body: var(--c-text, #4e5f78);
/*
* 次要文字：tokens 里的 muted（#8494a8）当小字用只有 3.1:1，达不到 AA。
* 这里往正文色方向压一档（配色改色仍然生效），装饰线 / 箭头也跟着深一点点，不受影响。
*/
--xy-muted: color-mix(in srgb, var(--c-muted, #8494a8) 62%, #2b3d55);
--xy-line: var(--c-line, #e4ebf4);
--xy-line-soft: #eff4fa;
--xy-soft: #f5f9fe;
--xy-soft-2: var(--c-tint, #eaf2fd);
--xy-surface: #ffffff;
/* 绿色徽标压深一档：白字在 #12a150 上只有 3.4:1 */
--xy-green: #0e7d3f;
--xy-orange: #f97316;
--xy-cyan: #38bdf8;
--xy-container: var(--container, 1320px);
--xy-radius: 12px;
--xy-radius-sm: 8px;
--xy-btn-radius: 6px;
--xy-shadow-sm: 0 6px 18px rgba(11, 32, 56, 0.06);
--xy-shadow: 0 12px 32px rgba(11, 32, 56, 0.1);
--xy-shadow-lg: 0 22px 56px rgba(11, 32, 56, 0.16);
--xy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--xy-header-h: 78px;
}
/*
* 老浏览器没有 `color-mix()`：上面两个「压深一档」的变量会变成非法值，
* 那样整站主色 / 次要文字会掉色。这里退回 tokens 原色——可读性差一点，但页面不坏。
*/
@supports not (color: color-mix(in srgb, red 50%, blue)) {
html {
--xy-primary: var(--c-accent, #1677ff);
--xy-muted: var(--c-muted, #8494a8);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body.xy-body {
margin: 0;
background: var(--xy-surface);
color: var(--xy-body);
font-family: var(--font-family, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
font-size: 14px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*
* 基础元素样式只是「没特殊说明时的默认值」：一律用 `:where()` 把权重降到 0，
* 组件类（`.xy-btn` / `.xy-more` 这类）才压得住。不然 `.xy-body a { color: inherit }`
* 会把按钮文字变成继承色（深底上的按钮、深色卡里的链接就是这么变糊的）。
*/
.xy-body :where(img, svg) {
max-width: 100%;
}
.xy-body :where(a) {
color: inherit;
text-decoration: none;
}
/*
* 标题默认色只是「没特殊说明时的底色」，不能压过深色版块自己写的白字：
* 用 `:where()` 把权重降到 0，深色首屏 / 深色区块里的 `.xy-hero__title` 这类规则才生效。
* （预览里渲染端不带 body class，静态产物带 `body.xy-body`——不这么写两边会长得不一样。）
*/
.xy-body :where(h1, h2, h3, h4) {
margin: 0;
color: var(--xy-ink);
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.2px;
}
.xy-body :where(p) {
margin: 0;
}
.xy-body :where(ul) {
margin: 0;
padding: 0;
list-style: none;
}
.xy-body button {
font-family: inherit;
}
/* ---------- 骨架：容器 / 版块 / 栅格 ---------- */
.xy-container {
width: 100%;
max-width: var(--xy-container);
margin: 0 auto;
padding: 0 24px;
}
.xy-section {
/* 首页设计稿采用紧凑节奏：保留标题与卡片呼吸感，减少版块之间的空白。 */
padding: 32px 0;
}
.xy-section--tight {
padding: 24px 0;
}
.xy-section--soft {
background: var(--xy-soft);
}
.xy-section--soft-2 {
background: var(--xy-soft-2);
}
.xy-section--white {
background: var(--xy-surface);
}
.xy-grid {
display: grid;
gap: 16px;
}
.xy-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xy-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xy-grid--5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* ---------- 按钮 ---------- */
.xy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
padding: 0 26px;
border: 1px solid transparent;
border-radius: var(--xy-btn-radius);
background: var(--xy-primary);
color: #fff;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.25s var(--xy-ease),
border-color 0.25s var(--xy-ease),
color 0.25s var(--xy-ease),
box-shadow 0.25s var(--xy-ease),
transform 0.25s var(--xy-ease);
}
.xy-btn:hover {
background: var(--xy-primary-strong);
transform: translateY(-1px);
box-shadow: 0 10px 22px var(--xy-primary-ring);
}
.xy-btn:active {
transform: translateY(0);
}
.xy-btn--sm {
height: 40px;
padding: 0 20px;
font-size: 14px;
}
.xy-btn--lg {
height: 52px;
padding: 0 32px;
font-size: 16px;
}
.xy-btn--outline {
background: #fff;
border-color: var(--xy-primary);
color: var(--xy-primary);
}
.xy-btn--outline:hover {
background: var(--xy-primary-soft);
color: var(--xy-primary-strong);
}
.xy-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
}
.xy-btn--ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
box-shadow: none;
}
.xy-btn--white {
background: #fff;
color: var(--xy-navy);
}
.xy-btn--white:hover {
background: #eaf2fb;
color: var(--xy-navy);
}
.xy-btn--block {
width: 100%;
}
.xy-btn__ico {
width: 16px;
height: 16px;
flex: none;
}
/* 文字链：`查看详情 →` 这类 */
.xy-more {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--xy-primary);
font-size: 14px;
font-weight: 600;
transition: gap 0.25s var(--xy-ease), color 0.25s var(--xy-ease);
}
.xy-more::after {
content: "→";
font-size: 14px;
line-height: 1;
transition: transform 0.25s var(--xy-ease);
}
.xy-more:hover {
color: var(--xy-primary-strong);
}
.xy-more:hover::after {
transform: translateX(4px);
}
/* ---------- 顶部信息条 + 页头 ---------- */
.xy-topbar {
background: var(--xy-navy);
color: #93a9c4;
font-size: 12.5px;
line-height: 1;
}
.xy-topbar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
height: 34px;
}
.xy-topbar__item {
padding: 0 14px;
color: #93a9c4;
transition: color 0.2s var(--xy-ease);
}
.xy-topbar__item:hover {
color: #fff;
}
.xy-topbar__sep {
width: 1px;
height: 11px;
background: rgba(255, 255, 255, 0.22);
}
.xy-topbar__lang {
display: inline-flex;
align-items: center;
gap: 6px;
}
.xy-topbar__lang a.is-active {
color: #fff;
font-weight: 600;
}
.xy-header {
position: sticky;
top: 0;
z-index: 60;
background: #fff;
border-bottom: 1px solid var(--xy-line);
transition: box-shadow 0.3s var(--xy-ease);
}
.xy-header.is-stuck {
box-shadow: 0 10px 30px rgba(11, 32, 56, 0.09);
}
.xy-header__inner {
display: flex;
align-items: center;
gap: 28px;
height: var(--xy-header-h);
}
.xy-logo {
display: inline-flex;
align-items: center;
gap: 10px;
flex: none;
}
.xy-logo__mark {
width: 46px;
height: 46px;
display: block;
}
.xy-logo__text {
display: flex;
align-items: center;
gap: 8px;
}
.xy-logo__cn {
font-size: 26px;
font-weight: 800;
color: var(--xy-ink);
letter-spacing: 1px;
line-height: 1;
}
.xy-logo__en {
font-size: 10.5px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.6px;
color: var(--xy-ink-2);
border-left: 1px solid var(--xy-line);
padding-left: 8px;
}
.xy-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.xy-nav__item {
position: relative;
display: flex;
align-items: center;
height: var(--xy-header-h);
}
.xy-nav__link {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 16px;
color: var(--xy-ink-2);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
transition: color 0.2s var(--xy-ease);
}
.xy-nav__item::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--xy-primary);
transition: left 0.28s var(--xy-ease), right 0.28s var(--xy-ease);
}
.xy-nav__item:hover::after,
.xy-nav__item:focus-within::after,
.xy-nav__item.is-active::after {
left: 16px;
right: 16px;
}
.xy-nav__item:hover .xy-nav__link,
.xy-nav__item.is-active .xy-nav__link {
color: var(--xy-primary);
}
.xy-nav__drop {
position: absolute;
top: 100%;
left: 4px;
min-width: 208px;
padding: 10px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
box-shadow: var(--xy-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.24s var(--xy-ease),
transform 0.24s var(--xy-ease),
visibility 0.24s;
}
.xy-nav__item:hover .xy-nav__drop,
.xy-nav__item:focus-within .xy-nav__drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.xy-nav__drop-link {
display: block;
padding: 9px 12px;
border-radius: var(--xy-radius-sm);
color: var(--xy-ink-2);
font-size: 14px;
white-space: nowrap;
transition: background-color 0.2s var(--xy-ease), color 0.2s var(--xy-ease);
}
.xy-nav__drop-link:hover {
background: var(--xy-soft);
color: var(--xy-primary);
}
.xy-header__aside {
display: flex;
align-items: center;
gap: 14px;
flex: none;
}
.xy-hotline {
display: inline-flex;
align-items: center;
gap: 8px;
}
.xy-hotline__ico {
width: 26px;
height: 26px;
flex: none;
color: var(--xy-primary);
}
.xy-hotline__body {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.xy-hotline__label {
color: var(--xy-muted);
font-size: 11.5px;
}
.xy-hotline__num {
color: var(--xy-primary);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.4px;
}
.xy-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
color: var(--xy-ink-2);
cursor: pointer;
transition: color 0.2s var(--xy-ease), background-color 0.2s var(--xy-ease);
}
.xy-icon-btn:hover {
color: var(--xy-primary);
background: var(--xy-soft);
}
.xy-burger {
display: none;
}
/* ---------- 首屏 ---------- */
.xy-hero {
position: relative;
overflow: hidden;
background: var(--xy-navy);
color: #fff;
isolation: isolate;
}
.xy-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.xy-hero__bg svg,
.xy-hero__bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.xy-hero__grid {
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(120, 180, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(120, 180, 255, 0.07) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 82%);
}
.xy-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
grid-template-areas:
"copy art"
"strip strip";
align-items: center;
gap: 22px 12px;
min-height: 420px;
padding: 40px 0 46px;
}
.xy-hero--channel .xy-hero__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy";
}
.xy-hero--channel .xy-hero__copy {
max-width: 760px;
}
.xy-hero--tall .xy-hero__inner {
min-height: 500px;
}
.xy-hero__copy {
grid-area: copy;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 560px;
}
.xy-hero__title {
/* 标题保持单行优先，避免宽屏首屏被中文换行额外撑高。 */
font-size: clamp(30px, 3.2vw, 46px);
font-weight: 800;
color: #fff;
letter-spacing: 1px;
}
.xy-hero__sub {
margin-top: 14px;
font-size: clamp(15px, 1.35vw, 19px);
font-weight: 600;
color: #dce9fb;
}
.xy-hero__desc {
margin-top: 12px;
max-width: 520px;
color: #a8bdd6;
font-size: 14.5px;
}
.xy-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.xy-hero__art {
grid-area: art;
position: relative;
z-index: 1;
width: 112%;
margin-right: -10%;
justify-self: end;
pointer-events: none;
filter: drop-shadow(0 26px 40px rgba(0, 8, 20, 0.45));
}
.xy-hero__art svg,
.xy-hero__art img {
width: 100%;
height: auto;
display: block;
}
.xy-hero__slogan {
position: absolute;
top: 34px;
right: 24px;
z-index: 3;
text-align: right;
color: #9fb8d6;
font-size: 12px;
font-weight: 700;
letter-spacing: 2.4px;
line-height: 1.6;
}
.xy-hero__slogan strong {
display: block;
color: #fff;
font-size: 14px;
}
.xy-hero__crumb {
margin-bottom: 20px;
}
/* 桌面端面包屑贴近横幅顶部，标题文案继续在首屏中垂直居中。 */
@media (min-width: 1081px) {
.xy-hero__crumb {
position: absolute;
top: 40px;
left: 24px;
max-width: 100%;
margin-bottom: 0;
}
}
/* 首屏下方的能力条 */
.xy-hero__strip {
position: relative;
z-index: 2;
grid-area: strip;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 26px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.xy-strip-item {
display: flex;
align-items: center;
gap: 12px;
}
.xy-strip-item__ico {
width: 34px;
height: 34px;
flex: none;
color: #cfe2ff;
}
.xy-strip-item strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 700;
}
.xy-strip-item span {
color: #93aac6;
font-size: 12.5px;
}
/* ---------- 面包屑 ---------- */
.xy-crumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: #8ea6c4;
}
.xy-crumb a {
color: #8ea6c4;
transition: color 0.2s var(--xy-ease);
}
.xy-crumb a:hover {
color: #fff;
}
.xy-crumb__sep {
color: rgba(255, 255, 255, 0.3);
}
.xy-crumb strong {
color: #fff;
font-weight: 600;
}
.xy-crumb--light,
.xy-crumb--light a {
color: var(--xy-muted);
}
.xy-crumb--light a:hover {
color: var(--xy-primary);
}
.xy-crumb--light strong {
color: var(--xy-ink);
}
/* ---------- 版块标题 ---------- */
.xy-shead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.xy-shead__main {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
.xy-shead__actions {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
}
.xy-shead__title {
font-size: clamp(23px, 2.2vw, 33px);
font-weight: 800;
color: var(--xy-ink);
letter-spacing: 0.5px;
}
.xy-shead__desc {
color: var(--xy-muted);
font-size: 14px;
}
.xy-shead--dark .xy-shead__title {
color: #fff;
}
.xy-shead--dark .xy-shead__desc {
color: #93aac6;
}
.xy-shead--dark .xy-more {
color: #9ec5ff;
}
/* ---------- 产品卡（白底 + 产品图 + 参数 + 双按钮） ---------- */
.xy-pcard {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition:
transform 0.32s var(--xy-ease),
box-shadow 0.32s var(--xy-ease),
border-color 0.32s var(--xy-ease);
}
.xy-pcard:hover {
transform: translateY(-4px);
border-color: #cfe1fb;
box-shadow: var(--xy-shadow);
}
.xy-pcard__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 176px;
padding: 16px;
border-radius: var(--xy-radius-sm);
background: linear-gradient(160deg, #f7fbff 0%, #eef5fd 100%);
overflow: hidden;
}
.xy-pcard__media img,
.xy-pcard__media svg, .xy-pcard__media img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.45s var(--xy-ease);
}
.xy-pcard:hover .xy-pcard__media img,
.xy-pcard:hover .xy-pcard__media svg, .xy-pcard:hover .xy-pcard__media img {
transform: translateY(-4px) scale(1.04);
}
.xy-badge {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 4px;
background: var(--xy-primary);
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
}
.xy-badge--hot {
background: var(--xy-primary);
}
.xy-badge--new {
background: #2f6fd0;
}
.xy-badge--pick {
/* 白字在 #4a7ede 上只有 3.9:1，压深一档；没 color-mix 的老浏览器用回原色 */
background: #4a7ede;
background: color-mix(in srgb, #4a7ede 84%, #001b37);
}
.xy-badge--stock {
background: var(--xy-green);
}
.xy-badge--order {
background: var(--xy-primary);
}
.xy-pcard__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 1;
}
.xy-pcard__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 8px;
padding: 14px 6px 6px;
}
.xy-pcard__title {
font-size: 16px;
font-weight: 700;
color: var(--xy-ink);
line-height: 1.5;
}
.xy-pcard__title a {
transition: color 0.2s var(--xy-ease);
}
.xy-pcard__title a:hover {
color: var(--xy-primary);
}
.xy-pcard__meta {
color: var(--xy-muted);
font-size: 13px;
}
.xy-pcard__meta span + span::before {
content: "|";
margin: 0 8px;
color: var(--xy-line);
}
.xy-specs {
display: flex;
flex-direction: column;
gap: 4px;
margin: 2px 0 0;
}
.xy-specs li {
position: relative;
padding-left: 14px;
color: var(--xy-body);
font-size: 13px;
line-height: 1.7;
}
.xy-specs li::before {
content: "";
position: absolute;
top: 9px;
left: 2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #b6c6d8;
}
.xy-pcard__foot {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 14px;
}
.xy-pcard__foot .xy-btn {
flex: 1 1 0;
height: 40px;
padding: 0 10px;
font-size: 14px;
}
.xy-compare {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--xy-muted);
font-size: 12.5px;
cursor: pointer;
}
.xy-compare input {
width: 14px;
height: 14px;
accent-color: var(--xy-primary);
}
/* ---------- 解决方案卡（图 + 标题 + 说明） ---------- */
.xy-scard {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition:
transform 0.32s var(--xy-ease),
box-shadow 0.32s var(--xy-ease),
border-color 0.32s var(--xy-ease);
}
.xy-scard:hover {
transform: translateY(-4px);
border-color: #cfe1fb;
box-shadow: var(--xy-shadow);
}
.xy-scard__media {
position: relative;
height: 150px;
overflow: hidden;
}
.xy-scard__media svg,
.xy-scard__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s var(--xy-ease);
}
.xy-scard:hover .xy-scard__media svg,
.xy-scard:hover .xy-scard__media img {
transform: scale(1.06);
}
.xy-scard__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 8px;
padding: 16px 18px 18px;
}
.xy-scard__title {
font-size: 17px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-scard__text {
color: var(--xy-body);
font-size: 13.5px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xy-scard__foot {
margin-top: auto;
padding-top: 10px;
}
/* 深色底上的方案卡 */
.xy-card-dark {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
}
.xy-card-dark .xy-scard__title {
color: #fff;
}
.xy-card-dark .xy-scard__text {
color: #a4bbd6;
}
.xy-card-dark .xy-more {
color: #9ec5ff;
}
/* ---------- 特色/能力小卡（图标 + 标题 + 说明） ---------- */
.xy-fcard {
display: flex;
gap: 14px;
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-fcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-fcard__ico {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: none;
border-radius: 50%;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-fcard__ico svg {
width: 26px;
height: 26px;
}
.xy-fcard__title {
font-size: 16px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-fcard__text {
margin-top: 4px;
color: var(--xy-body);
font-size: 13.5px;
}
/* 编号 + 图标的能力条（技术服务能力 / 从规划到交付 / 服务流程） */
.xy-stepcard {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border-radius: var(--xy-radius);
background: #fff;
border: 1px solid var(--xy-line);
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-stepcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-stepcard__ico {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
border-radius: 50%;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-stepcard__ico--bitmap {
width: 64px;
height: 64px;
background: transparent;
}
.xy-stepcard__ico--bitmap img {
display: block;
width: 64px;
height: 64px;
}
.xy-stepcard__no {
color: var(--xy-primary);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.5px;
}
.xy-stepcard__title {
font-size: 15.5px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-stepcard__heading {
display: flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
}
.xy-stepcard__text {
margin-top: 2px;
color: var(--xy-body);
font-size: 13px;
}
.xy-stepcard--plain {
border: 0;
background: transparent;
padding: 0;
}
/* ---------- 产品中心：品牌 Tab / 品牌矩阵 / 产品线 ---------- */
.xy-brandtabs {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
margin-bottom: 16px;
border-bottom: 1px solid var(--xy-line);
background: #fff;
}
.xy-brandtabs__item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 156px;
padding: 10px 20px 8px;
color: var(--xy-ink-2);
font-size: 17px;
font-weight: 600;
transition: color 0.25s var(--xy-ease);
border: 0;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.xy-brandtabs__item + .xy-brandtabs__item::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 22px;
margin-top: -11px;
background: var(--xy-line);
}
.xy-brandtabs__item::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 3px;
background: var(--xy-ink);
transition: left 0.3s var(--xy-ease), right 0.3s var(--xy-ease);
}
.xy-brandtabs__item:hover {
color: var(--xy-primary);
}
.xy-brandtabs__item:hover::after,
.xy-brandtabs__item.is-active::after {
left: 18%;
right: 18%;
}
.xy-brandtabs__item.is-active {
color: var(--xy-ink);
font-weight: 700;
}
/* 品牌矩阵：左侧大牌 + 右侧四宫格 */
.xy-brandgrid {
display: grid;
grid-template-columns: 1.02fr 1fr;
gap: 14px;
}
/* 品牌面板由共享初始化脚本按悬停 / 聚焦切换，默认只显示第一个，避免脚本未加载时整页空白。 */
.xy-brandpanels {
min-width: 0;
padding-top: 16px;
}
.xy-brandpanel {
display: none;
}
.xy-brandpanels:not(.is-ready) .xy-brandpanel:first-child,
.xy-brandpanel.is-active {
display: block;
}
.xy-brandpanel.is-active {
animation: xy-brandpanel-in 0.42s var(--xy-ease) both;
}
@keyframes xy-brandpanel-in {
from {
opacity: 0;
transform: translateX(26px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.xy-brandgrid__side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: min-content;
gap: 12px;
align-content: start;
align-self: start;
align-items: start;
}
.xy-brandlead {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 380px;
padding: 26px;
border-radius: var(--xy-radius);
background: linear-gradient(150deg, #041f3c 0%, #0a2f57 58%, #10406d 100%);
color: #fff;
overflow: hidden;
}
.xy-brandlead__logo {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
font-size: 30px;
font-weight: 800;
letter-spacing: 0.5px;
}
.xy-brandlead__logo img {
display: block;
width: 34px;
height: 34px;
object-fit: contain;
}
.xy-brandlead__desc {
position: relative;
z-index: 2;
margin-top: 8px;
color: #b7cde8;
font-size: 14px;
}
.xy-brandlead__links {
position: absolute;
z-index: 2;
top: 118px;
left: 26px;
display: flex;
flex-direction: column;
gap: 12px;
}
.xy-brandlead__links a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #cfe0f5;
font-size: 14.5px;
transition: color 0.22s var(--xy-ease), transform 0.22s var(--xy-ease);
}
.xy-brandlead__links a::before {
content: "›";
color: #7fb0e8;
font-size: 15px;
}
.xy-brandlead__links a:hover {
color: #fff;
transform: translateX(3px);
}
.xy-brandlead__art {
position: absolute;
right: 0;
bottom: 46px;
z-index: 0;
width: 84%;
height: 57%;
overflow: hidden;
pointer-events: none;
opacity: 0.92;
}
.xy-brandlead__art::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, #082e55 0%, rgba(8, 46, 85, 0.84) 14%, rgba(8, 46, 85, 0.18) 58%, rgba(8, 46, 85, 0) 100%),
linear-gradient(180deg, rgba(8, 46, 85, 0), rgba(2, 19, 38, 0.34));
}
.xy-brandlead__art img,
.xy-brandlead__art svg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
filter: saturate(0.9) contrast(1.04);
transition: transform 0.55s var(--xy-ease), opacity 0.35s var(--xy-ease);
}
.xy-brandlead:hover .xy-brandlead__art img {
transform: scale(1.05);
opacity: 0.96;
}
.xy-brandlead__foot {
position: relative;
z-index: 2;
margin-top: auto;
}
.xy-brandlead__foot .xy-btn {
background: transparent;
border-color: rgba(255, 255, 255, 0.5);
}
.xy-brandlead__foot .xy-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: #fff;
}
/* 品牌卡：文字信息保持左侧层级，品牌图作为右侧背景层铺满卡片高度。 */
.xy-brandcard {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"logo"
"desc"
"links"
"go";
align-content: start;
min-height: 218px;
padding: 22px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-brandcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-brandcard__logo {
grid-area: logo;
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-height: 28px;
font-size: 22px;
font-weight: 800;
color: var(--xy-ink);
letter-spacing: 0.3px;
}
.xy-brandcard__logo img {
display: block;
width: auto;
max-width: 110px;
height: 28px;
object-fit: contain;
object-position: left center;
}
.xy-brandword {
display: inline-flex;
align-items: baseline;
gap: 5px;
color: var(--xy-ink);
line-height: 1;
white-space: nowrap;
}
.xy-brandword strong {
font-size: 21px;
font-weight: 700;
}
.xy-brandword small {
color: var(--xy-muted);
font-size: 9px;
font-weight: 600;
}
.xy-brandword--extreme small {
color: #54a73b;
}
.xy-brandword--ruckus strong {
font-size: 19px;
font-weight: 800;
}
.xy-brandword--ruckus small {
color: #e87536;
}
.xy-brandword--altai strong {
color: #e85148;
font-size: 21px;
font-weight: 650;
}
.xy-brandcard__desc {
grid-area: desc;
position: relative;
z-index: 2;
margin-top: 6px;
color: var(--xy-muted);
font-size: 12.5px;
min-height: 38px;
}
.xy-brandcard__links {
grid-area: links;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.xy-brandcard__links a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--xy-ink-2);
font-size: 13px;
transition: transform 0.22s var(--xy-ease);
}
.xy-brandcard__links a::after {
content: "→";
font-size: 12px;
}
.xy-brandcard__links a:hover {
color: var(--xy-primary);
transform: translateX(3px);
}
/*
* 品牌卡里的产品线是「这个品牌下的分类」，不是各自的落地页：
* 整张卡进入该品牌专区，产品线留给品牌页里的页签做筛选，避免指向别的品牌。
*/
.xy-brandcard__links span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--xy-ink-2);
font-size: 13px;
}
.xy-brandcard__links span::after {
content: "→";
color: var(--xy-muted);
font-size: 12px;
}
.xy-brandcard__go::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
/* 品牌图是卡片右侧的背景层，左侧用渐变留白承载标题和产品线清单 */
.xy-brandcard__art {
position: absolute;
inset: 0 0 0 auto;
z-index: 0;
width: 67%;
margin: 0;
pointer-events: none;
overflow: hidden;
}
.xy-brandcard__art::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 8%, rgba(255, 255, 255, 0.22) 42%, rgba(255, 255, 255, 0) 78%),
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(6, 36, 67, 0.2));
mix-blend-mode: normal;
}
.xy-brandcard__art svg, .xy-brandcard__art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
opacity: 0.9;
filter: saturate(0.92) contrast(0.96);
transition: transform 0.55s var(--xy-ease), opacity 0.35s var(--xy-ease);
}
.xy-brandcard:hover .xy-brandcard__art img {
transform: scale(1.06);
opacity: 0.94;
}
/* 按产品线浏览 */
.xy-linecard {
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-linecard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-linecard__media {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
padding: 12px;
background: linear-gradient(165deg, #f8fbff, #eef5fd);
}
.xy-linecard__media svg, .xy-linecard__media img {
width: 100%;
height: 100%;
transition: transform 0.45s var(--xy-ease);
}
.xy-linecard:hover .xy-linecard__media svg, .xy-linecard:hover .xy-linecard__media img {
transform: translateY(-4px) scale(1.05);
}
.xy-linecard__body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px 14px;
}
.xy-linecard__title {
font-size: 16.5px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-linecard__text {
color: var(--xy-body);
font-size: 13.5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.xy-linecard__foot {
margin-top: 8px;
}
/* ---------- 产品频道：搜索条 ---------- */
.xy-searchband {
background: var(--xy-soft);
padding: 30px 0 26px;
}
.xy-searchbar {
display: flex;
gap: 0;
max-width: 900px;
margin: 0 auto;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
overflow: hidden;
transition: border-color 0.25s var(--xy-ease), box-shadow 0.25s var(--xy-ease);
}
.xy-searchbar:focus-within {
border-color: #b9d4f8;
box-shadow: 0 0 0 4px var(--xy-primary-ring);
}
.xy-searchbar__icon {
display: flex;
align-items: center;
padding: 0 16px;
color: var(--xy-muted);
}
.xy-searchbar__icon svg {
width: 20px;
height: 20px;
}
.xy-searchbar input {
flex: 1 1 auto;
min-width: 0;
height: 52px;
border: 0;
outline: none;
color: var(--xy-ink);
font-family: inherit;
font-size: 15px;
background: transparent;
}
.xy-searchbar input::placeholder {
color: #a9b7c9;
}
.xy-searchbar .xy-btn {
height: 52px;
border-radius: 0;
padding: 0 40px;
}
.xy-hotkeys {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
color: var(--xy-ink-2);
font-size: 13.5px;
}
.xy-hotkeys__label {
color: var(--xy-muted);
}
.xy-chip {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 18px;
border-radius: var(--xy-radius-sm);
background: #fff;
border: 1px solid var(--xy-line);
color: var(--xy-ink-2);
font-size: 13.5px;
transition:
color 0.22s var(--xy-ease),
border-color 0.22s var(--xy-ease),
background-color 0.22s var(--xy-ease),
transform 0.22s var(--xy-ease);
}
.xy-chip:hover {
color: var(--xy-primary);
border-color: #b9d4f8;
background: #f4f9ff;
transform: translateY(-2px);
}
/* ---------- 列表页：筛选 + 工具条 + 卡片 ---------- */
.xy-list {
display: grid;
grid-template-columns: 258px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.xy-filters {
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
}
.xy-filters__head {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 18px;
color: var(--xy-ink);
font-size: 16px;
font-weight: 700;
border-bottom: 1px solid var(--xy-line-soft);
}
.xy-filters__head svg {
width: 18px;
height: 18px;
color: var(--xy-primary);
}
.xy-filter {
border-bottom: 1px solid var(--xy-line-soft);
}
.xy-filter__title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 8px;
color: var(--xy-ink);
font-size: 14px;
font-weight: 700;
}
.xy-filter__list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 18px 14px;
}
.xy-check {
display: flex;
align-items: center;
gap: 9px;
padding: 4px 0;
color: var(--xy-body);
font-size: 13.5px;
cursor: pointer;
transition: color 0.2s var(--xy-ease);
}
.xy-check:hover {
color: var(--xy-primary);
}
.xy-check input {
width: 15px;
height: 15px;
accent-color: var(--xy-primary);
}
.xy-filters__foot {
padding: 16px 18px;
}
.xy-filters__foot button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 42px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink-2);
font-size: 14px;
cursor: pointer;
transition: color 0.22s var(--xy-ease), border-color 0.22s var(--xy-ease);
}
.xy-filters__foot button:hover {
color: var(--xy-primary);
border-color: #b9d4f8;
}
.xy-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.xy-toolbar__count {
color: var(--xy-ink);
font-size: 15px;
}
.xy-toolbar__count strong {
color: var(--xy-primary);
font-size: 17px;
font-weight: 800;
margin: 0 2px;
}
.xy-toolbar__right {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.xy-select {
position: relative;
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 14px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink-2);
font-size: 13.5px;
appearance: none;
cursor: pointer;
transition: border-color 0.22s var(--xy-ease);
}
.xy-select:hover {
border-color: #b9d4f8;
}
.xy-viewtoggle {
display: inline-flex;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
overflow: hidden;
}
.xy-viewtoggle span, .xy-viewtoggle button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 38px;
color: var(--xy-muted);
background: #fff;
border: 0;
cursor: pointer;
}
.xy-viewtoggle span.is-active, .xy-viewtoggle button.is-active {
background: var(--xy-primary);
color: #fff;
}
.xy-productlist--list .xy-grid { grid-template-columns: 1fr; }
.xy-productlist--list .xy-pcard { display: flex; flex-direction: row; }
.xy-productlist--list .xy-pcard__media { width: 200px; flex: 0 0 200px; }
.xy-productlist--list .xy-pcard__body { flex: 1; min-width: 0; }
.xy-productlist--list .xy-pcard__foot { justify-content: flex-end; }
.xy-productlist--list .xy-pcard__foot .xy-btn {
flex: 0 0 auto;
width: auto;
height: 34px;
padding: 0 20px;
font-size: 13px;
}
@media (max-width: 600px) {
.xy-productlist--list .xy-pcard__media { width: 100px; flex-basis: 100px; }
.xy-productlist--list .xy-pcard__foot { flex-wrap: wrap; }
}
.xy-tip {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding: 14px 18px;
border: 1px solid #d3e5fb;
border-radius: var(--xy-radius-sm);
background: #f2f8ff;
color: var(--xy-ink-2);
font-size: 14px;
}
.xy-tip svg {
width: 20px;
height: 20px;
flex: none;
color: var(--xy-primary);
}
.xy-tip .xy-more {
margin-left: auto;
}
.xy-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 34px;
}
.xy-pager a,
.xy-pager span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink-2);
font-size: 14px;
transition:
color 0.22s var(--xy-ease),
border-color 0.22s var(--xy-ease),
background-color 0.22s var(--xy-ease);
}
.xy-pager a:hover {
color: var(--xy-primary);
border-color: #b9d4f8;
background: #f4f9ff;
}
.xy-pager .ms-pager-current {
background: var(--xy-primary);
border-color: var(--xy-primary);
color: #fff;
font-weight: 700;
}
.xy-pager .is-disabled {
color: #c3cedd;
}
.xy-empty {
padding: 60px 20px;
border: 1px dashed var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
color: var(--xy-muted);
text-align: center;
}
/* ---------- 详情页 ---------- */
.xy-detail {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 44px;
align-items: start;
}
.xy-gallery__stage {
display: flex;
align-items: center;
justify-content: center;
height: 360px;
padding: 18px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: linear-gradient(165deg, #f9fcff, #eef5fd);
}
.xy-gallery__stage svg,
.xy-gallery__stage img {
width: 100%;
height: 100%;
object-fit: contain;
}
.xy-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.xy-gallery__thumb {
display: flex;
align-items: center;
justify-content: center;
height: 76px;
padding: 8px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
cursor: pointer;
transition: border-color 0.25s var(--xy-ease), box-shadow 0.25s var(--xy-ease);
}
.xy-gallery__thumb svg,
.xy-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.xy-gallery__thumb:hover {
border-color: #b9d4f8;
}
.xy-gallery__thumb.is-active {
border-color: var(--xy-primary);
box-shadow: 0 0 0 3px var(--xy-primary-ring);
}
.xy-detail__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--xy-muted);
font-size: 13px;
}
.xy-detail__tags span + span::before {
content: "|";
margin-right: 10px;
color: var(--xy-line);
}
.xy-detail__title {
margin-top: 10px;
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 800;
color: var(--xy-ink);
letter-spacing: 0.4px;
}
.xy-detail__sub {
margin-top: 10px;
color: var(--xy-ink-2);
font-size: 17px;
font-weight: 600;
}
.xy-detail__desc {
margin-top: 8px;
color: var(--xy-body);
font-size: 14px;
}
.xy-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 22px 0 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
overflow: hidden;
}
.xy-tile {
padding: 14px 16px;
border-right: 1px solid var(--xy-line);
background: #fff;
}
.xy-tile:last-child {
border-right: 0;
}
.xy-tiles:has(.xy-tile--identity) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-tile--identity strong {
margin-top: 6px;
overflow-wrap: anywhere;
}
.xy-tile strong {
display: block;
margin-top: 6px;
color: var(--xy-ink);
font-size: 17px;
font-weight: 800;
line-height: 1.35;
}
.xy-tile span {
display: block;
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-detail__facts {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
margin-bottom: 20px;
color: var(--xy-body);
font-size: 14px;
}
.xy-detail__facts b {
color: var(--xy-ink-2);
font-weight: 600;
}
.xy-detail__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
/* CSS-only 选项卡：radio + label，预览与静态产物都能用，不依赖任何脚本 */
.xy-tabs {
position: relative;
}
.xy-tabs__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.xy-tabs__nav {
display: flex;
align-items: center;
gap: 0;
border-bottom: 1px solid var(--xy-line);
background: #fff;
}
.xy-tabs__nav label {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 168px;
padding: 16px 22px;
color: var(--xy-ink-2);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: color 0.25s var(--xy-ease);
}
.xy-tabs__nav label::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 3px;
background: var(--xy-primary);
transition: left 0.3s var(--xy-ease), right 0.3s var(--xy-ease);
}
.xy-tabs__nav label:hover {
color: var(--xy-primary);
}
.xy-tabs__panel {
display: none;
padding-top: 34px;
animation: xy-fade-up 0.45s var(--xy-ease) both;
}
#xy-tab-overview:checked ~ .xy-tabs__nav > label[for="xy-tab-overview"],
#xy-tab-spec:checked ~ .xy-tabs__nav > label[for="xy-tab-spec"],
#xy-tab-download:checked ~ .xy-tabs__nav > label[for="xy-tab-download"] {
color: var(--xy-primary);
}
#xy-tab-overview:checked ~ .xy-tabs__nav > label[for="xy-tab-overview"]::after,
#xy-tab-spec:checked ~ .xy-tabs__nav > label[for="xy-tab-spec"]::after,
#xy-tab-download:checked ~ .xy-tabs__nav > label[for="xy-tab-download"]::after {
left: 14%;
right: 14%;
}
.xy-tabs__input:checked + .xy-tabs__nav + .xy-tabs__body .xy-tabs__panel.is-target {
display: block;
}
#xy-tab-overview:focus-visible ~ .xy-tabs__nav > label[for="xy-tab-overview"],
#xy-tab-spec:focus-visible ~ .xy-tabs__nav > label[for="xy-tab-spec"],
#xy-tab-download:focus-visible ~ .xy-tabs__nav > label[for="xy-tab-download"] {
outline: 2px solid var(--xy-primary);
outline-offset: -4px;
}
#xy-tab-overview:checked ~ .xy-tabs__body > .xy-tabs__panel--overview,
#xy-tab-spec:checked ~ .xy-tabs__body > .xy-tabs__panel--spec,
#xy-tab-download:checked ~ .xy-tabs__body > .xy-tabs__panel--download {
display: block;
}
@keyframes xy-fade-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
.xy-overview {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 46px;
}
.xy-overview__body {
color: var(--xy-body);
font-size: 14.5px;
}
.xy-overview__body p + p {
margin-top: 14px;
}
.xy-overview__body h3 {
margin-bottom: 12px;
font-size: 26px;
font-weight: 800;
color: var(--xy-ink);
}
.xy-highlight {
display: flex;
gap: 16px;
padding: 14px 0;
}
.xy-highlight + .xy-highlight {
border-top: 1px solid var(--xy-line-soft);
}
.xy-highlight__ico {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: none;
border-radius: 50%;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-highlight__ico svg {
width: 26px;
height: 26px;
}
.xy-highlight__title {
font-size: 16px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-highlight__text {
margin-top: 4px;
color: var(--xy-body);
font-size: 13.5px;
}
/* 规格表：两列斑马纹 */
.xy-spectable {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.xy-spectable caption {
caption-side: top;
padding-bottom: 14px;
color: var(--xy-ink);
font-size: 26px;
font-weight: 800;
text-align: left;
}
.xy-spectable th,
.xy-spectable td {
padding: 13px 22px;
border: 1px solid #e9f0f8;
text-align: left;
vertical-align: top;
}
.xy-spectable th {
width: 26%;
color: var(--xy-ink-2);
font-weight: 600;
background: #f7fafd;
}
.xy-spectable td {
color: var(--xy-body);
}
.xy-spectable tbody tr:nth-child(odd) th,
.xy-spectable tbody tr:nth-child(odd) td {
background: #f9fbfe;
}
.xy-download-list {
display: grid;
gap: 12px;
}
.xy-download {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
transition: border-color 0.25s var(--xy-ease), box-shadow 0.25s var(--xy-ease);
}
.xy-download:hover {
border-color: #b9d4f8;
box-shadow: var(--xy-shadow-sm);
}
.xy-download__ico {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 10px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-download__name {
color: var(--xy-ink);
font-size: 15px;
font-weight: 600;
}
.xy-download__meta {
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-download .xy-more {
margin-left: auto;
}
/* ---------- 单页（关于我们 / 服务与支持 / 资源中心） ---------- */
.xy-prose {
color: var(--xy-body);
font-size: 14.5px;
line-height: 1.95;
}
.xy-prose h2 {
margin: 34px 0 14px;
font-size: 25px;
}
.xy-prose h3 {
margin: 26px 0 10px;
font-size: 19px;
}
.xy-prose p + p {
margin-top: 14px;
}
.xy-prose ul {
margin: 12px 0;
}
.xy-prose li {
position: relative;
padding-left: 16px;
margin-bottom: 6px;
}
.xy-prose li::before {
content: "";
position: absolute;
top: 10px;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--xy-primary);
}
.xy-pcard-slot[hidden] { display: none !important; }
.xy-product-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 28px 0; }
.xy-product-pagination button { padding: 8px 12px; border: 1px solid var(--xy-line); border-radius: 6px; background: white; color: var(--xy-primary); cursor: pointer; }
.xy-product-pagination button[aria-current="page"] { background: var(--xy-primary); color: white; }
.xy-product-pagination button:disabled { opacity: .45; cursor: default; }
.xy-product-pagination span { width: 100%; text-align: center; }
.xy-prose img {
border-radius: var(--xy-radius);
max-width: 100%;
height: auto;
}
.xy-prose table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
.xy-prose th,
.xy-prose td {
padding: 10px 16px;
border: 1px solid var(--xy-line);
text-align: left;
}
.xy-prose th {
background: var(--xy-soft);
color: var(--xy-ink-2);
}
.xy-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 46px;
align-items: center;
}
.xy-split--reverse .xy-split__media {
order: -1;
}
.xy-lead {
color: var(--xy-ink-2);
font-size: 16px;
line-height: 1.9;
}
.xy-figure {
border-radius: var(--xy-radius);
overflow: hidden;
box-shadow: var(--xy-shadow-sm);
}
.xy-figure svg {
display: block;
width: 100%;
height: auto;
}
/* 数字指标 */
.xy-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.xy-stat {
padding: 22px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
text-align: center;
}
.xy-stat strong {
display: block;
color: var(--xy-primary);
font-size: 34px;
font-weight: 800;
line-height: 1.2;
}
.xy-stat span {
color: var(--xy-muted);
font-size: 13.5px;
}
/* 折叠问答（原生 details，无脚本） */
.xy-faq {
display: grid;
gap: 10px;
}
.xy-faq details {
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
transition: border-color 0.25s var(--xy-ease), box-shadow 0.25s var(--xy-ease);
}
.xy-faq details[open] {
border-color: #b9d4f8;
box-shadow: var(--xy-shadow-sm);
}
.xy-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
color: var(--xy-ink);
font-size: 15px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.xy-faq summary::-webkit-details-marker {
display: none;
}
.xy-faq summary::after {
content: "";
width: 9px;
height: 9px;
flex: none;
border-right: 2px solid var(--xy-muted);
border-bottom: 2px solid var(--xy-muted);
transform: rotate(45deg);
transition: transform 0.28s var(--xy-ease);
}
.xy-faq details[open] summary::after {
transform: rotate(-135deg);
}
.xy-faq__body {
padding: 0 22px 18px;
color: var(--xy-body);
font-size: 13.5px;
}
/* 折叠里只是一句结论，完整解答在详情页：给一个明确的入口 */
.xy-faq__more {
display: inline-flex;
margin-top: 10px;
font-size: 13px;
}
/* ---------- CTA 版块 ---------- */
.xy-cta {
position: relative;
overflow: hidden;
background: var(--xy-navy);
color: #fff;
}
.xy-cta__bg {
position: absolute;
inset: 0;
opacity: 0.9;
}
.xy-cta__bg svg {
width: 100%;
height: 100%;
display: block;
}
.xy-cta__inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 32px;
padding: 24px 220px 24px 0;
}
.xy-cta__title {
font-size: clamp(21px, 1.9vw, 28px);
font-weight: 800;
color: #fff;
}
.xy-cta__desc {
margin-top: 6px;
color: #a6bdd8;
font-size: 14px;
}
.xy-cta__actions {
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
margin-left: auto;
gap: 10px;
}
.xy-cta__slogan {
position: absolute;
right: 24px;
bottom: 26px;
z-index: 2;
color: #6f8dae;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 2px;
text-align: right;
line-height: 1.7;
}
/* ---------- 页脚 ---------- */
.xy-footer {
background: var(--xy-navy);
color: var(--xy-navy-fg);
font-size: 13.5px;
}
.xy-footer__main {
display: grid;
grid-template-columns: minmax(0, 1.55fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
gap: 24px;
padding: 40px 0 30px;
}
.xy-footer__brand .xy-logo__cn {
color: #fff;
}
.xy-footer__brand .xy-logo__en {
color: #dbe7f5;
border-left-color: rgba(255, 255, 255, 0.2);
}
.xy-footer__slogan {
margin-top: 14px;
color: #fff;
font-size: 16px;
font-weight: 700;
}
.xy-footer__text {
margin-top: 8px;
max-width: 320px;
color: #8ba4c2;
font-size: 13px;
line-height: 1.9;
}
.xy-footer__title {
margin-bottom: 12px;
color: #fff;
font-size: 14.5px;
font-weight: 700;
}
.xy-footer__links {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.xy-footer__col {
min-width: 0;
}
.xy-footer__links a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #9db3cd;
transition: color 0.22s var(--xy-ease), transform 0.22s var(--xy-ease);
}
.xy-footer__links a:hover {
color: #fff;
transform: translateX(3px);
}
.xy-contact {
display: flex;
flex-direction: column;
gap: 8px;
}
.xy-contact__row {
display: flex;
align-items: center;
gap: 10px;
color: #c5d6ea;
}
.xy-contact__row svg {
width: 18px;
height: 18px;
flex: none;
color: #7fa6d4;
}
.xy-contact__row a {
min-width: 0;
overflow-wrap: anywhere;
}
.xy-contact__row a:hover {
color: #fff;
}
.xy-socials {
display: flex;
gap: 10px;
margin-top: 6px;
}
.xy-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
color: #d5e3f2;
transition: background-color 0.25s var(--xy-ease), transform 0.25s var(--xy-ease);
}
.xy-socials a:hover {
background: var(--xy-primary);
color: #fff;
transform: translateY(-2px);
}
.xy-socials svg {
width: 18px;
height: 18px;
}
.xy-footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 0 18px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #7d95b3;
font-size: 12.5px;
}
.xy-footer__bar nav {
display: flex;
align-items: center;
gap: 0;
}
.xy-footer__bar nav a {
padding: 0 12px;
color: #9db3cd;
transition: color 0.22s var(--xy-ease);
}
.xy-footer__bar nav a:hover {
color: #fff;
}
.xy-footer__bar nav a + a {
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
/* ---------- 表单 ---------- */
.xy-form {
padding: 26px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.xy-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.xy-field--full {
grid-column: 1 / -1;
}
.xy-field label {
color: var(--xy-ink-2);
font-size: 13.5px;
font-weight: 600;
}
.xy-field input,
.xy-field select,
.xy-field textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink);
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.22s var(--xy-ease), box-shadow 0.22s var(--xy-ease);
}
.xy-field textarea {
min-height: 110px;
resize: vertical;
}
.xy-field input:focus,
.xy-field select:focus,
.xy-field textarea:focus {
border-color: #b9d4f8;
box-shadow: 0 0 0 4px var(--xy-primary-ring);
}
.xy-form__foot {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
}
.xy-form__hint {
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-form__consent {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 18px;
color: var(--xy-ink-2);
font-size: 13px;
}
.xy-form__consent input {
flex: none;
margin-top: 3px;
}
/* ---------- 动画：滚动进场（纯 CSS 滚动驱动，无脚本、无不加载就隐身的风险） ---------- */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.xy-reveal {
animation: xy-reveal-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 26%;
}
@keyframes xy-reveal-in {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: none;
}
}
}
}
@media (prefers-reduced-motion: reduce) {
.xy-body *,
.xy-body *::before,
.xy-body *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 响应式 ---------- */
@media (max-width: 1240px) {
.xy-header__inner {
gap: 16px;
}
.xy-nav__link {
padding: 0 11px;
font-size: 14px;
}
.xy-hotline__num {
font-size: 16px;
}
.xy-footer__main {
grid-template-columns: 1.4fr repeat(2, 1fr);
row-gap: 34px;
}
}
@media (max-width: 1080px) {
.xy-hero__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"copy"
"art"
"strip";
}
.xy-hero__art {
width: 100%;
margin-right: 0;
}
.xy-list {
grid-template-columns: 1fr;
}
.xy-detail,
.xy-overview,
.xy-split {
grid-template-columns: 1fr;
gap: 30px;
}
.xy-split--reverse .xy-split__media {
order: 0;
}
.xy-grid--4,
.xy-grid--5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.xy-nav,
.xy-hotline {
display: none;
}
.xy-burger {
display: inline-flex;
}
.xy-header__aside {
margin-left: auto;
}
.xy-brandgrid,
.xy-brandgrid__side {
grid-template-columns: 1fr;
}
.xy-brandtabs {
overflow-x: auto;
justify-content: flex-start;
}
.xy-brandtabs__item {
min-width: 128px;
font-size: 16px;
padding: 16px 14px 14px;
}
}
@media (max-width: 720px) {
.xy-section {
padding: 32px 0;
}
.xy-container {
padding: 0 16px;
}
/* 小屏页头：logo 与右侧操作组都要收得下来，不然整页会被顶出横向滚动 */
.xy-logo__mark {
width: 38px;
height: 38px;
}
.xy-logo__cn {
font-size: 22px;
}
.xy-logo__en {
display: none;
}
.xy-header__inner {
gap: 10px;
}
.xy-header__aside {
gap: 8px;
}
.xy-header__aside .xy-btn--sm {
height: 36px;
padding: 0 14px;
font-size: 13px;
}
.xy-icon-btn {
width: 34px;
height: 34px;
}
.xy-icon-btn--search {
display: none;
}
.xy-grid--2,
.xy-grid--3,
.xy-grid--4,
.xy-grid--5 {
grid-template-columns: 1fr;
}
.xy-hero__inner {
min-height: 0;
padding: 34px 0 40px;
}
.xy-hero__strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-hero__slogan {
display: none;
}
.xy-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-tile:nth-child(2n) {
border-right: 0;
}
.xy-tile:nth-child(-n + 2) {
border-bottom: 1px solid var(--xy-line);
}
.xy-tabs__nav,
.xy-brandtabs {
overflow-x: auto;
}
.xy-tabs__nav label {
min-width: 120px;
padding: 14px 14px;
font-size: 15px;
}
.xy-form__grid {
grid-template-columns: 1fr;
}
.xy-footer__main {
grid-template-columns: 1fr 1fr;
gap: 26px;
padding: 38px 0 30px;
}
.xy-cta__inner {
flex-direction: column;
align-items: flex-start;
padding-right: 0;
gap: 18px;
}
.xy-cta__actions {
margin-left: 0;
flex-wrap: wrap;
}
.xy-cta__slogan {
display: none;
}
.xy-searchbar .xy-btn {
padding: 0 20px;
}
.xy-shead {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.xy-toolbar__right {
margin-left: 0;
}
}
/* ==========================================================================
栏目化版块（首页 / 频道页 / 单页共用）
========================================================================== */
.xy-container--narrow {
max-width: 900px;
}
.xy-section--dark {
background: linear-gradient(180deg, #04203e 0%, #001b37 100%);
color: #c9d8ea;
}
/* 首页：产品中心左侧主推位（品牌头 + 主推型号 + 标签） */
.xy-brandlead--featured {
justify-content: space-between;
gap: 14px;
}
.xy-brandlead__head {
position: relative;
z-index: 2;
}
.xy-brandlead--featured .xy-brandlead__art {
display: block;
pointer-events: auto;
position: relative;
right: auto;
bottom: auto;
width: 100%;
height: auto;
margin: 6px 0 0;
overflow: visible;
opacity: 1;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
z-index: 1;
}
.xy-brandlead--featured .xy-brandlead__art::after {
display: none;
}
.xy-brandlead--featured .xy-brandlead__art img,
.xy-brandlead--featured .xy-brandlead__art svg {
height: auto;
object-fit: contain;
opacity: 1;
filter: none;
}
@media (min-width: 901px) {
.xy-brandpanel .xy-brandgrid {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
.xy-brandpanel .xy-brandgrid__side {
align-self: stretch;
align-content: stretch;
align-items: stretch;
grid-auto-rows: 1fr;
}
.xy-brandpanel .xy-brandlead--featured .xy-brandlead__art {
flex: 1;
height: auto;
min-height: 160px;
overflow: hidden;
}
.xy-brandpanel .xy-brandlead--featured .xy-brandlead__art img,
.xy-brandpanel .xy-brandlead--featured .xy-brandlead__art svg {
position: absolute;
inset: 0;
height: 100%;
object-fit: contain;
}
.xy-brandpanel .xy-linecard__body {
flex: 1;
}
.xy-brandpanel .xy-linecard__foot {
margin-top: auto;
padding-top: 8px;
}
}
.xy-brandpanel .xy-brandgrid > *,
.xy-brandpanel .xy-linecard {
min-width: 0;
}
.xy-brandpanel .xy-brandlead__product > a,
.xy-brandpanel .xy-linecard__title > a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xy-brandlead--featured .xy-brandlead__foot {
position: relative;
z-index: 2;
margin-top: 6px;
}
.xy-brandlead__product {
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}
.xy-brandlead__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 12px;
}
.xy-brandlead__tags span {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
color: #cfe0f5;
font-size: 12.5px;
}
/* 首页：案例 + 资源 */
.xy-homesplit {
display: grid;
grid-template-columns: 1.12fr 1fr;
gap: 20px;
align-items: stretch;
}
.xy-homesplit__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.xy-featurecase {
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.32s var(--xy-ease), box-shadow 0.32s var(--xy-ease);
}
.xy-featurecase:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-featurecase__media {
position: relative;
flex: 1 1 auto;
min-height: 240px;
}
.xy-featurecase__media svg, .xy-featurecase__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-featurecase__media .xy-badge {
position: absolute;
top: 14px;
left: 14px;
}
.xy-featurecase__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
}
.xy-featurecase__title {
font-size: 19px;
font-weight: 700;
}
.xy-featurecase__text {
color: var(--xy-body);
font-size: 13.5px;
}
.xy-featurecase__body .xy-btn {
align-self: flex-start;
margin-top: 6px;
}
.xy-resource-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.28s var(--xy-ease), box-shadow 0.28s var(--xy-ease);
}
.xy-resource-row:hover {
transform: translateY(-2px);
box-shadow: var(--xy-shadow-sm);
}
.xy-resource-row__media {
width: 128px;
height: 84px;
flex: none;
border-radius: var(--xy-radius-sm);
overflow: hidden;
}
.xy-resource-row__media svg, .xy-resource-row__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-resource-row__body {
flex: 1 1 auto;
min-width: 0;
}
.xy-resource-row__cat {
color: var(--xy-primary);
font-size: 12.5px;
font-weight: 600;
}
.xy-resource-row__title {
margin-top: 4px;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
}
.xy-resource-row__title a:hover {
color: var(--xy-primary);
}
.xy-resource-row__date {
margin-top: 6px;
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-resource-row__go {
flex: none;
color: var(--xy-primary);
font-size: 17px;
transition: transform 0.25s var(--xy-ease);
}
.xy-resource-row:hover .xy-resource-row__go {
transform: translateX(4px);
}
/* 解决方案：左大卡 + 右侧网格 */
.xy-solutiongrid {
display: grid;
grid-template-columns: minmax(0, 3.6fr) repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(210px, auto);
gap: 18px;
}
/* 主推卡占左侧两行，普通卡在右侧按两张、三张分成两行。 */
.xy-solutiongrid > .xy-leadcard {
grid-row: span 2;
}
.xy-solutiongrid > .xy-scard:nth-child(2),
.xy-solutiongrid > .xy-scard:nth-child(3) {
grid-column: span 3;
}
.xy-solutiongrid > .xy-scard:nth-child(n + 4) {
grid-column: span 2;
}
.xy-leadcard {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.32s var(--xy-ease), box-shadow 0.32s var(--xy-ease);
}
.xy-leadcard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-leadcard__media {
position: relative;
flex: 1 1 auto;
min-height: 210px;
}
.xy-leadcard__media svg, .xy-leadcard__media img {
display: block;
width: 100%;
height: 100%;
transition: transform 0.6s var(--xy-ease);
}
.xy-leadcard:hover .xy-leadcard__media svg, .xy-leadcard:hover .xy-leadcard__media img {
transform: scale(1.05);
}
.xy-leadcard__badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
}
.xy-leadcard__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px 20px;
}
.xy-leadcard__title {
color: #fff;
font-size: 20px;
font-weight: 800;
}
.xy-leadcard__text {
color: #b3c7dd;
font-size: 13.5px;
}
.xy-leadcard__tags {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.xy-leadcard__tags span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #cfe0f5;
font-size: 13px;
}
.xy-leadcard__tags svg {
width: 15px;
height: 15px;
color: var(--xy-cyan);
}
.xy-leadcard__body .xy-btn {
align-self: flex-start;
margin-top: 4px;
}
/* 精选内容的主推卡是深底：正文与「跳转全文」都要用浅色，蓝链接在深底上看不清 */
.xy-leadcard .xy-more {
color: #9ec5ff;
}
.xy-leadcard .xy-more:hover {
color: #fff;
}
/* 深色底上的左大卡（首页解决方案 / 解决方案频道页主位） */
/*
* 主推大卡（`.xy-leadcard`）只有两种皮肤：默认深色、`--light` 浅色。
* 底色必须跟着一起走：正文那条从透明压到深色的渐变是按「盖在深色媒体图上」设计的，
* 卡底还是白的时候它会盖在白底上，整条文字带发灰，白字和浅色链接就都糊了。
*/
.xy-leadcard:not(.xy-leadcard--light) {
border-color: transparent;
background: #04182f;
}
.xy-leadcard:not(.xy-leadcard--light) .xy-leadcard__body,
.xy-leadcard--dark .xy-leadcard__body {
background: linear-gradient(180deg, rgba(3, 24, 46, 0.2) 0%, #041a31 62%);
}
.xy-leadcard--light {
border-color: var(--xy-line);
}
.xy-leadcard--light .xy-leadcard__title {
color: var(--xy-ink);
}
.xy-leadcard--light .xy-leadcard__text {
color: var(--xy-body);
}
.xy-leadcard--dark {
background: #04182f;
border-color: transparent;
}
.xy-leadcard--dark .xy-leadcard__title {
color: #fff;
}
.xy-leadcard--feature {
grid-row: span 2;
}
/* 首页解决方案的深色版块里，方案卡贴在深底上 */
.xy-solutions .xy-scard {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
/* 按业务目标 / 行业 / 分类入口 */
.xy-goalcard {
position: relative;
padding: 24px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-goalcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-goalcard__no {
display: block;
color: var(--xy-primary);
font-size: 22px;
font-weight: 800;
letter-spacing: 1px;
}
.xy-goalcard__title {
margin-top: 8px;
font-size: 17px;
font-weight: 700;
}
.xy-goalcard__text {
margin: 8px 0 12px;
color: var(--xy-body);
font-size: 13.5px;
}
.xy-industrycard {
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-industrycard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-industrycard__media {
height: 116px;
}
.xy-industrycard__media svg, .xy-industrycard__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-industrycard h3 {
padding: 14px 16px 0;
font-size: 15.5px;
}
.xy-industrycard p {
padding: 4px 16px 16px;
color: var(--xy-body);
font-size: 13px;
}
/* 成功案例：标杆案例 + 侧边新闻行 */
.xy-casesplit {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 20px;
}
.xy-casesplit--single {
grid-template-columns: minmax(0, 1fr);
}
.xy-casesplit__side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: min-content;
gap: 16px;
align-content: start;
align-self: start;
align-items: start;
}
.xy-newsrow {
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-newsrow:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-newsrow__media {
height: 130px;
}
.xy-newsrow__media svg, .xy-newsrow__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-newsrow__title {
padding: 14px 16px 0;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
}
.xy-newsrow__date {
margin-top: auto;
padding: 10px 16px 16px;
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-newsrow__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px 16px;
}
.xy-newsrow__body .xy-newsrow__title,
.xy-newsrow__body .xy-newsrow__date {
margin: 0;
padding: 0;
}
.xy-newsrow__text {
color: var(--xy-body);
font-size: 13px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 案例详情 / 案例卡 */
.xy-caselead {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 30px;
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-caselead__media {
position: relative;
border-radius: var(--xy-radius-sm);
overflow: hidden;
min-height: 320px;
}
.xy-caselead__media svg, .xy-caselead__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-caselead__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 18px;
background: linear-gradient(180deg, transparent, rgba(2, 18, 34, 0.88));
color: #fff;
font-size: 14px;
}
.xy-caselead__title {
font-size: 23px;
font-weight: 800;
line-height: 1.45;
}
.xy-caselead__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 18px;
}
.xy-caselead__tags span {
padding: 4px 12px;
border-radius: 999px;
background: var(--xy-soft-2);
color: var(--xy-primary);
font-size: 12.5px;
}
.xy-caselead__block {
margin: 14px 0 6px;
font-size: 15.5px;
font-weight: 700;
color: var(--xy-ink);
}
.xy-caselead__text {
color: var(--xy-body);
font-size: 13.5px;
}
.xy-caselead__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 18px 0;
padding: 16px;
border-radius: var(--xy-radius-sm);
background: var(--xy-soft);
}
.xy-metric {
display: flex;
flex-direction: column;
gap: 2px;
}
.xy-metric svg {
width: 22px;
height: 22px;
color: var(--xy-primary);
margin-bottom: 4px;
}
.xy-metric strong {
color: var(--xy-ink);
font-size: 14px;
}
.xy-metric span {
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-metrics {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.xy-metrics--row {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 30px;
}
.xy-metric--big {
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-case-metrics .xy-metric--big {
flex-direction: row;
align-items: center;
gap: 10px;
min-width: 0;
padding: 16px 20px;
}
.xy-case-metrics svg {
flex: none;
margin-bottom: 0;
}
.xy-case-metric__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xy-case-metric__text span {
margin-left: 8px;
}
.xy-case-body {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--xy-line);
}
.xy-case-body__content {
margin-top: 18px;
overflow-wrap: anywhere;
}
.xy-casecard {
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-casecard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-casecard__media {
position: relative;
height: 158px;
}
.xy-casecard__media svg, .xy-casecard__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-casecard__badge {
position: absolute;
top: 12px;
left: 12px;
}
.xy-casecard__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px 18px;
flex: 1 1 auto;
}
.xy-casecard__title {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
.xy-casecard__title a:hover {
color: var(--xy-primary);
}
.xy-casecard__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.xy-casecard__tags span {
padding: 2px 10px;
border: 1px solid var(--xy-line);
border-radius: 999px;
color: var(--xy-muted);
font-size: 12px;
}
.xy-casecard__text {
color: var(--xy-body);
font-size: 13px;
}
.xy-casecard__body .xy-more {
margin-top: auto;
}
/* 分类筛选条（案例行业） */
.xy-caselist .xy-tabbar {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
border-bottom: 1px solid var(--xy-line);
}
.xy-tabbar__nav {
display: flex;
align-items: center;
gap: 4px;
}
.xy-tabbar__nav label {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 16px;
color: var(--xy-ink-2);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: color 0.25s var(--xy-ease);
}
.xy-tabbar__nav label::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 3px;
background: var(--xy-primary);
transition: left 0.3s var(--xy-ease), right 0.3s var(--xy-ease);
}
.xy-tabbar__nav label:hover {
color: var(--xy-primary);
}
.xy-caselist__search {
margin-left: auto;
padding-bottom: 8px;
}
.xy-caselist__search form {
display: flex;
align-items: center;
height: 40px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
overflow: hidden;
}
.xy-caselist__search input {
width: 220px;
height: 100%;
padding: 0 14px;
border: 0;
outline: none;
font-family: inherit;
font-size: 13.5px;
}
.xy-caselist__search button {
width: 46px;
height: 100%;
border: 0;
background: transparent;
color: var(--xy-muted);
cursor: pointer;
}
.xy-caselist__search button svg {
width: 18px;
height: 18px;
}
.xy-caselist__search button:hover {
color: var(--xy-primary);
}
/* ==========================================================================
产品列表页：产品线切换 + 属性筛选（纯 CSS，无脚本）
--------------------------------------------------------------------------
过滤规则靠 :has() 选中「已勾选的条件」，再用 :not([data-*]) 反选出该隐藏的卡片。
多个条件同时生效时各自独立隐藏，效果就是「交集」。
卡片上的 data-* 值由内容字段给出（line / net / speed / ports / series / stock），
选项的 id 与 data-* 的取值一一对应，运营新增型号时按同一套取值填即可命中。
========================================================================== */
.xy-productlist {
display: block;
}
/* 品牌卡片上的产品线标签：按品牌收起不属于它的产品线（品牌名由栏目名给出） */
/*
* 首页「产品中心」右侧只放四条产品线：交换机已经由左边的主推位承担，
* 这里按 data-line 收起它，免得同一屏重复出现（产品频道页的「按产品线浏览」仍然五条都出）。
*/
.xy-home .xy-brandgrid__side .xy-linecard[data-line="switch"] {
display: none;
}
/* 主推位已经占用第一条产品，右侧从同一品牌的第二条开始展示。 */
.xy-brandpanel .xy-brandgrid__side .xy-linecard:first-child {
display: none;
}
.xy-linechips {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 62%;
}
.xy-linechips span {
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #cfe0f5;
font-size: 12.5px;
white-space: nowrap;
}
.xy-brandcard .xy-linechips {
max-width: 100%;
margin: 12px 0 6px;
}
.xy-brandcard .xy-linechips span {
border-color: var(--xy-line);
background: var(--xy-soft);
color: var(--xy-ink-2);
}
.xy-brandcard__go {
grid-area: go;
position: relative;
z-index: 2;
justify-self: start;
margin-top: 12px;
}
[data-brand-name="NVIDIA"] [data-brand]:not([data-brand~="nvidia"]),
[data-brand-name="Extreme"] [data-brand]:not([data-brand~="extreme"]),
[data-brand-name="Aruba"] [data-brand]:not([data-brand~="aruba"]),
[data-brand-name="Ruckus"] [data-brand]:not([data-brand~="ruckus"]),
[data-brand-name="Altai 奥泰尔"] [data-brand]:not([data-brand~="altai"]) {
display: none;
}
/* 产品列表页品牌区：左侧主品牌卡缩短，并按自身内容对齐顶端。 */
@media (min-width: 901px) {
.xy-listpage .xy-brandgrid > .xy-brandlead:not(.xy-brandlead--featured) {
align-self: start;
height: clamp(420px, 34vw, 480px);
min-height: 0;
}
}
/* 品牌卡的产品类别最多露出三行；先按品牌筛选，再由容器裁切，避免顺序影响结果。 */
.xy-brandcard__links {
gap: 4px;
max-height: 68px;
overflow: hidden;
}
.xy-brandcard__links span {
height: 20px;
min-height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xy-subtabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
margin-bottom: 22px;
border-bottom: 1px solid var(--xy-line);
}
.xy-subtabs__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.xy-subtabs__item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
color: var(--xy-ink-2);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: color 0.25s var(--xy-ease);
}
.xy-subtabs__item::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 3px;
background: var(--xy-primary);
transition: left 0.3s var(--xy-ease), right 0.3s var(--xy-ease);
}
.xy-subtabs__item:hover {
color: var(--xy-primary);
}
.xy-subtabs__input:checked + .xy-subtabs__item {
color: var(--xy-primary);
}
.xy-subtabs__input:checked + .xy-subtabs__item::after {
left: 12%;
right: 12%;
}
/* 品牌维度：只显示当前品牌的产品线（品牌卡片上的链接同理） */
.xy-brand-nvidia [data-brand]:not([data-brand~="nvidia"]),
.xy-brand-extreme [data-brand]:not([data-brand~="extreme"]),
.xy-brand-aruba [data-brand]:not([data-brand~="aruba"]),
.xy-brand-ruckus [data-brand]:not([data-brand~="ruckus"]),
.xy-brand-altai [data-brand]:not([data-brand~="altai"]) {
display: none;
}
/* 产品线单选：选中一条产品线后，其它产品线的卡片收起 */
.xy-productlist:has(#xy-line-switch:checked) .xy-pcard-slot:not([data-line~="switch"]),
.xy-productlist:has(#xy-line-nic:checked) .xy-pcard-slot:not([data-line~="nic"]),
.xy-productlist:has(#xy-line-cable:checked) .xy-pcard-slot:not([data-line~="cable"]),
.xy-productlist:has(#xy-line-module:checked) .xy-pcard-slot:not([data-line~="module"]),
.xy-productlist:has(#xy-line-gpu:checked) .xy-pcard-slot:not([data-line~="gpu"]),
.xy-productlist:has(#xy-line-ap:checked) .xy-pcard-slot:not([data-line~="ap"]),
.xy-productlist:has(#xy-line-ac:checked) .xy-pcard-slot:not([data-line~="ac"]),
.xy-productlist:has(#xy-line-outdoor:checked) .xy-pcard-slot:not([data-line~="outdoor"]),
.xy-productlist:has(#xy-line-indoor:checked) .xy-pcard-slot:not([data-line~="indoor"]),
.xy-productlist:has(#xy-line-cpe:checked) .xy-pcard-slot:not([data-line~="cpe"]),
/* 网络类型 / 速率 / 端口数量 / 系列 / 交付状态 */
.xy-productlist:has(#xy-f-net-ib:checked) .xy-pcard-slot:not([data-net~="ib"]),
.xy-productlist:has(#xy-f-net-eth:checked) .xy-pcard-slot:not([data-net~="eth"]),
.xy-productlist:has(#xy-f-speed-100:checked) .xy-pcard-slot:not([data-speed~="100"]),
.xy-productlist:has(#xy-f-speed-200:checked) .xy-pcard-slot:not([data-speed~="200"]),
.xy-productlist:has(#xy-f-speed-400:checked) .xy-pcard-slot:not([data-speed~="400"]),
.xy-productlist:has(#xy-f-speed-800:checked) .xy-pcard-slot:not([data-speed~="800"]),
.xy-productlist:has(#xy-f-port-16:checked) .xy-pcard-slot:not([data-ports~="16"]),
.xy-productlist:has(#xy-f-port-32:checked) .xy-pcard-slot:not([data-ports~="32"]),
.xy-productlist:has(#xy-f-port-64:checked) .xy-pcard-slot:not([data-ports~="64"]),
.xy-productlist:has(#xy-f-series-quantum:checked) .xy-pcard-slot:not([data-series~="quantum"]),
.xy-productlist:has(#xy-f-series-spectrum:checked) .xy-pcard-slot:not([data-series~="spectrum"]),
.xy-productlist:has(#xy-f-stock-1:checked) .xy-pcard-slot:not([data-stock~="1"]),
.xy-productlist:has(#xy-f-stock-0:checked) .xy-pcard-slot:not([data-stock~="0"]) {
display: none;
}
/* 案例行业的分类筛选：同样的思路，按 data-industry 收起 */
.xy-caselist:has(#xy-case-ai:checked) .xy-casecard:not([data-industry~="ai"]),
.xy-caselist:has(#xy-case-dc:checked) .xy-casecard:not([data-industry~="dc"]),
.xy-caselist:has(#xy-case-lab:checked) .xy-casecard:not([data-industry~="lab"]),
.xy-caselist:has(#xy-case-campus:checked) .xy-casecard:not([data-industry~="campus"]),
.xy-caselist:has(#xy-case-gov:checked) .xy-casecard:not([data-industry~="gov"]) {
display: none;
}
.xy-caselist #xy-case-all:checked ~ .xy-tabbar__nav > label[for="xy-case-all"],
.xy-caselist #xy-case-ai:checked ~ .xy-tabbar__nav > label[for="xy-case-ai"],
.xy-caselist #xy-case-dc:checked ~ .xy-tabbar__nav > label[for="xy-case-dc"],
.xy-caselist #xy-case-lab:checked ~ .xy-tabbar__nav > label[for="xy-case-lab"],
.xy-caselist #xy-case-campus:checked ~ .xy-tabbar__nav > label[for="xy-case-campus"],
.xy-caselist #xy-case-gov:checked ~ .xy-tabbar__nav > label[for="xy-case-gov"] {
color: var(--xy-primary);
}
.xy-caselist #xy-case-all:checked ~ .xy-tabbar__nav > label[for="xy-case-all"]::after,
.xy-caselist #xy-case-ai:checked ~ .xy-tabbar__nav > label[for="xy-case-ai"]::after,
.xy-caselist #xy-case-dc:checked ~ .xy-tabbar__nav > label[for="xy-case-dc"]::after,
.xy-caselist #xy-case-lab:checked ~ .xy-tabbar__nav > label[for="xy-case-lab"]::after,
.xy-caselist #xy-case-campus:checked ~ .xy-tabbar__nav > label[for="xy-case-campus"]::after,
.xy-caselist #xy-case-gov:checked ~ .xy-tabbar__nav > label[for="xy-case-gov"]::after {
left: 12%;
right: 12%;
}
.xy-pcard-slot {
display: flex;
}
.xy-pcard-slot > .xy-pcard {
width: 100%;
}
.xy-compare-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink-2);
font-size: 13.5px;
}
.xy-compare-btn svg {
width: 16px;
height: 16px;
color: var(--xy-muted);
}
/* 产品列表页右栏与 pagination 对齐 */
.xy-productlist__main {
min-width: 0;
}
.xy-status {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 4px;
background: var(--xy-primary);
color: #fff;
font-size: 12.5px;
font-weight: 600;
}
/* 交付状态是「深底 + 白字」的徽标：别被 `.xy-detail__facts b` 的正文色压过去 */
.xy-detail__facts .xy-status {
color: #fff;
}
/* ==========================================================================
服务与支持
========================================================================== */
.xy-svccard {
display: flex;
flex-direction: column;
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-svccard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-svccard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-svccard__ico svg {
width: 24px;
height: 24px;
}
.xy-svccard__title {
margin-top: 14px;
font-size: 16.5px;
}
.xy-svccard__text {
margin-top: 6px;
color: var(--xy-body);
font-size: 13px;
}
.xy-svccard__media {
margin: 14px 0 10px;
height: 130px;
border-radius: var(--xy-radius-sm);
overflow: hidden;
}
.xy-svccard__media svg, .xy-svccard__media img {
display: block;
width: 100%;
height: 100%;
transition: transform 0.5s var(--xy-ease);
}
.xy-svccard:hover .xy-svccard__media svg, .xy-svccard:hover .xy-svccard__media img {
transform: scale(1.05);
}
.xy-svccard .xy-more {
margin-top: auto;
}
/* 服务流程：五步 + 输出框 */
.xy-flow {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.xy-flow__step {
position: relative;
padding: 18px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-flow__step::after {
content: "›";
position: absolute;
top: 50%;
right: -11px;
z-index: 2;
color: #c3d2e2;
font-size: 20px;
transform: translateY(-50%);
}
.xy-flow__step:last-child::after {
display: none;
}
.xy-flow__step .xy-stepcard__ico {
width: 46px;
height: 46px;
}
.xy-flow__step .xy-stepcard__no {
margin-top: 12px;
}
.xy-flow__out {
margin-top: 14px;
padding: 10px 12px;
border-radius: var(--xy-radius-sm);
background: var(--xy-soft);
color: var(--xy-body);
font-size: 12.5px;
}
.xy-flow__out b {
color: var(--xy-ink-2);
}
/* 技术能力：左大卡 + 右四格 */
.xy-capability {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 20px;
align-items: stretch;
}
.xy-capability__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.xy-capcard {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-capcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-capcard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-capcard__ico svg {
width: 22px;
height: 22px;
}
.xy-capcard h3 {
font-size: 16px;
}
.xy-capcard p {
margin-top: 4px;
color: var(--xy-body);
font-size: 13px;
}
.xy-capcard__art {
width: 100%;
height: 92px;
margin-top: auto;
}
/* 快速获得支持 */
.xy-supportcard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-supportcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-supportcard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-supportcard__ico svg {
width: 23px;
height: 23px;
}
.xy-supportcard h3 {
font-size: 17px;
}
.xy-supportcard p {
color: var(--xy-body);
font-size: 13.5px;
}
.xy-supportcard .xy-btn {
align-self: flex-start;
margin-top: 6px;
}
.xy-supportcard__art {
height: 96px;
margin-top: 6px;
}
.xy-supportcard__art svg, .xy-supportcard__art img {
width: 100%;
height: 100%;
}
.xy-servicequery {
display: flex;
align-items: center;
gap: 18px;
margin-top: 22px;
padding: 20px 24px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-servicequery__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: none;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-servicequery__title {
color: var(--xy-ink);
font-size: 16px;
font-weight: 700;
}
.xy-servicequery__text {
color: var(--xy-muted);
font-size: 13px;
}
.xy-servicequery__form {
display: flex;
gap: 12px;
margin-left: auto;
}
.xy-servicequery__form input {
width: 260px;
height: 44px;
padding: 0 14px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
font-family: inherit;
font-size: 14px;
outline: none;
}
.xy-servicequery__form input:focus {
border-color: #b9d4f8;
box-shadow: 0 0 0 4px var(--xy-primary-ring);
}
/* 服务承诺 / 能力卡（无边框版） */
.xy-rescard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-rescard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-rescard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-rescard__ico svg {
width: 23px;
height: 23px;
}
.xy-rescard h3 {
font-size: 16.5px;
}
.xy-rescard p {
color: var(--xy-body);
font-size: 13px;
}
.xy-rescard--card {
padding: 0;
overflow: hidden;
}
.xy-rescard--card h3 {
padding: 14px 18px 0;
font-size: 16px;
line-height: 1.55;
}
.xy-rescard--card h3 a:hover {
color: var(--xy-primary);
}
.xy-rescard__media {
position: relative;
height: 146px;
}
.xy-rescard__media svg, .xy-rescard__media img {
display: block;
width: 100%;
height: 100%;
}
.xy-rescard__media .xy-badge {
position: absolute;
bottom: 12px;
left: 16px;
}
.xy-rescard__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 18px 18px;
margin-top: auto;
}
.xy-rescard__date {
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-rescard--row {
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.xy-rescard--row h3 {
margin-top: 8px;
font-size: 17px;
line-height: 1.5;
}
.xy-rescard--row .xy-badge {
margin-top: 2px;
}
.xy-rescard--row .xy-more {
margin-top: 8px;
}
/* ==========================================================================
资源中心
========================================================================== */
.xy-resourcefeature {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 20px;
}
.xy-resourcefeature__side {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 18px;
}
/* 咨询中心：沿用新闻列表的信息层级，日期替代左侧图片，右侧只保留阅读入口。 */
.xy-consultation__list {
border-top: 1px solid var(--xy-line);
}
.xy-consultation__item {
display: grid;
grid-template-columns: 132px minmax(0, 1fr) 38px;
gap: 24px;
align-items: center;
min-height: 112px;
padding: 18px 0;
border-bottom: 1px solid var(--xy-line);
transition: background-color 0.22s var(--xy-ease), padding 0.22s var(--xy-ease);
}
.xy-consultation__item:hover {
padding-right: 8px;
padding-left: 8px;
background: rgba(255, 255, 255, 0.74);
}
.xy-consultation__date {
color: var(--xy-primary);
font-size: 17px;
font-weight: 700;
letter-spacing: 0;
white-space: nowrap;
}
.xy-consultation__body {
min-width: 0;
}
.xy-consultation__body .xy-badge {
margin-bottom: 7px;
}
.xy-consultation__body h3 {
font-size: 17px;
line-height: 1.45;
}
.xy-consultation__body h3 a:hover {
color: var(--xy-primary);
}
.xy-consultation__body p {
max-width: 820px;
margin-top: 6px;
overflow: hidden;
color: var(--xy-body);
font-size: 13.5px;
line-height: 1.65;
text-overflow: ellipsis;
white-space: nowrap;
}
.xy-consultation__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--xy-line);
border-radius: 50%;
color: var(--xy-primary);
font-size: 20px;
transition: color 0.22s var(--xy-ease), background-color 0.22s var(--xy-ease), border-color 0.22s var(--xy-ease), transform 0.22s var(--xy-ease);
}
.xy-consultation__arrow:hover {
border-color: var(--xy-primary);
background: var(--xy-primary);
color: #fff;
transform: translateX(3px);
}
.xy-typecard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px 20px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-typecard:hover {
transform: translateY(-4px);
box-shadow: var(--xy-shadow);
}
.xy-typecard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--xy-primary-soft);
color: var(--xy-primary);
}
.xy-typecard__ico svg {
width: 22px;
height: 22px;
}
.xy-typecard h3 {
font-size: 16px;
}
.xy-typecard p {
color: var(--xy-body);
font-size: 13px;
}
.xy-typecard .xy-more {
margin-top: auto;
}
.xy-downloadbar {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 16px;
}
.xy-downloadbar__group {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--xy-ink-2);
font-size: 13.5px;
}
.xy-downloadbar__group .xy-select {
min-width: 190px;
}
.xy-downloadtable {
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
}
.xy-downloadtable__head,
.xy-downloadtable__row {
display: grid;
grid-template-columns: 2.1fr 1.1fr 1fr 0.9fr 0.7fr;
gap: 16px;
align-items: center;
padding: 14px 22px;
}
.xy-downloadtable__head {
background: var(--xy-soft-2);
color: var(--xy-ink-2);
font-size: 13.5px;
font-weight: 700;
}
.xy-downloadtable__row {
border-top: 1px solid var(--xy-line-soft);
color: var(--xy-body);
font-size: 13.5px;
transition: background-color 0.22s var(--xy-ease);
}
.xy-downloadtable__row:hover {
background: var(--xy-soft);
}
.xy-downloadtable__name {
display: flex;
align-items: center;
gap: 10px;
color: var(--xy-ink);
font-weight: 600;
}
.xy-downloadtable__name svg {
width: 18px;
height: 18px;
flex: none;
color: var(--xy-primary);
}
/* ==========================================================================
关于星涌 / 单页
========================================================================== */
.xy-figure--soft {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: linear-gradient(150deg, #07203c 0%, #04182f 100%);
}
.xy-meaning {
position: relative;
border-radius: var(--xy-radius);
background: linear-gradient(160deg, #06203c 0%, #01101f 100%);
overflow: hidden;
}
.xy-meaning svg {
display: block;
width: 100%;
height: auto;
}
.xy-meaning__caption {
position: absolute;
left: 0;
right: 0;
bottom: 16px;
color: #fff;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.xy-meaning__caption span {
color: #8fb4dc;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
}
.xy-note {
margin-top: 26px;
padding: 22px 26px;
border-left: 3px solid var(--xy-primary);
border-radius: 0 var(--xy-radius) var(--xy-radius) 0;
background: #fff;
color: var(--xy-body);
font-size: 14px;
}
.xy-note__title {
margin-bottom: 8px;
font-size: 17px;
}
/* 方案架构：五段产品横排 + 说明 */
.xy-arch {
padding: 26px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
.xy-arch__row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.xy-arch__node {
padding: 12px;
border-radius: var(--xy-radius-sm);
background: var(--xy-soft);
text-align: center;
}
.xy-arch__node svg {
display: block;
width: 100%;
height: 92px;
}
.xy-arch__label {
margin-bottom: 8px;
color: var(--xy-ink-2);
font-size: 12.5px;
font-weight: 600;
}
.xy-arch__notes {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--xy-line);
}
.xy-arch__notes p {
color: var(--xy-muted);
font-size: 12px;
}
.xy-arch__notes strong {
display: block;
color: var(--xy-ink-2);
font-size: 13px;
}
.xy-compcard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-compcard:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-compcard__media {
height: 120px;
border-radius: var(--xy-radius-sm);
background: linear-gradient(165deg, #f8fbff, #eef5fd);
overflow: hidden;
}
.xy-compcard__media svg, .xy-compcard__media img {
width: 100%;
height: 100%;
}
.xy-compcard__title {
font-size: 16px;
}
.xy-compcard .xy-more {
margin-top: auto;
}
.xy-contactband {
padding: 52px 0 60px;
background: linear-gradient(180deg, #04203e 0%, #001b37 100%);
}
.xy-contactband__head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 26px;
}
.xy-contactband__head p {
color: #93aac6;
font-size: 14px;
}
.xy-contactcard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--xy-radius);
background: rgba(255, 255, 255, 0.03);
}
.xy-contactcard__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(84, 169, 255, 0.16);
color: #7fbcf7;
}
.xy-contactcard__ico svg {
width: 23px;
height: 23px;
}
.xy-contactcard h3 {
color: #fff;
font-size: 17px;
}
.xy-contactcard p {
color: #9db3cd;
font-size: 13.5px;
}
.xy-contactcard .xy-btn {
align-self: flex-start;
margin-top: 8px;
}
.xy-contactcard .xy-contact__row {
margin-top: 6px;
}
.xy-contactband--soft {
background: var(--xy-soft);
}
.xy-contactband--soft .xy-contactcard {
border-color: var(--xy-line);
background: #fff;
}
.xy-contactband--soft .xy-contactcard h3 {
color: var(--xy-ink);
}
.xy-contactband--soft .xy-contactband__head p,
.xy-contactband--soft .xy-contactcard p {
color: var(--xy-body);
}
.xy-contactband--soft .xy-contactcard .xy-contact__row {
color: var(--xy-ink);
}
.xy-contactband--soft .xy-contactcard__ico {
background: var(--xy-soft-2);
color: var(--xy-primary);
}
.xy-contactband--soft .xy-contact__row svg,
.xy-contactband--soft a.xy-contact__row:hover {
color: var(--xy-primary);
}
.xy-meaning + * {
margin-top: 0;
}
.xy-prose--page {
padding: 30px 34px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
}
/* 首屏右侧竖排说明（服务与支持页用） */
.xy-hero__sidenote {
position: absolute;
top: 50%;
right: 24px;
z-index: 3;
display: flex;
align-items: center;
color: #9fb8d6;
font-size: 13px;
letter-spacing: 1.6px;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: translateY(-50%);
}
/* ==========================================================================
表单（询价 / 需求提交）
========================================================================== */
.xy-captcha {
display: flex;
align-items: center;
gap: 12px;
}
.xy-captcha input {
max-width: 200px;
}
.xy-captcha img {
height: 44px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
cursor: pointer;
}
.xy-captcha__retry {
height: 44px;
padding: 0 14px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-muted);
font-size: 12.5px;
cursor: pointer;
}
.xy-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.xy-modal[hidden] {
display: none;
}
.xy-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
}
.xy-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 18, 34, 0.55);
backdrop-filter: blur(2px);
}
.xy-modal__panel {
position: relative;
z-index: 2;
width: min(420px, calc(100vw - 40px));
padding: 30px;
border-radius: var(--xy-radius);
background: #fff;
box-shadow: var(--xy-shadow-lg);
text-align: center;
animation: xy-fade-up 0.35s var(--xy-ease) both;
}
.xy-modal__close {
position: absolute;
top: 10px;
right: 14px;
border: 0;
background: transparent;
color: var(--xy-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.xy-modal__message {
color: var(--xy-ink);
font-size: 16px;
font-weight: 600;
}
.xy-modal__confirm {
margin-top: 20px;
}
/* 星涌搜索页：单列结果，栏目路径位于每条结果左上角。 */
.xy-search-page {
min-height: 560px;
}
@media (max-width: 720px) {
.xy-search-page { min-height: 440px; }
}
.xy-search-page .xy-searchbar {
max-width: 100%;
margin: 20px 0 0;
}
.xy-search-page .xy-searchsummary {
margin: 16px 0 4px;
}
.xy-search-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
scroll-margin-top: 110px;
}
.xy-search-result {
min-width: 0;
padding: 20px 0;
border-bottom: 1px solid var(--xy-line);
overflow-wrap: anywhere;
}
.xy-search-result__channel {
margin-bottom: 6px;
color: var(--xy-primary);
font-size: 12.5px;
font-weight: 600;
}
.xy-search-result__title {
color: var(--xy-ink);
font-size: 18px;
line-height: 1.5;
}
.xy-search-result__title a:hover {
color: var(--xy-primary);
}
.xy-search-result__meta {
margin-top: 6px;
color: var(--xy-muted);
font-size: 13px;
}
.xy-search-result__summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 8px;
color: var(--xy-body);
font-size: 14px;
line-height: 1.7;
}
.xy-search-pages {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
.xy-search-pages[hidden] {
display: none;
}
.xy-search-pages__status {
flex-basis: 100%;
margin-bottom: 4px;
color: var(--xy-muted);
font-size: 13px;
text-align: center;
}
.xy-search-pages button {
min-width: 36px;
min-height: 36px;
padding: 6px 10px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius-sm);
background: #fff;
color: var(--xy-ink);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.xy-search-pages button:hover:not(:disabled),
.xy-search-pages button[aria-current="page"] {
background: var(--xy-primary);
border-color: var(--xy-primary);
color: #fff;
}
.xy-search-pages button:disabled {
opacity: 0.45;
cursor: default;
}
/* 页脚公开页面：法律、隐私与按真实栏目生成的网站地图。 */
.xy-utility-page {
padding-bottom: 56px;
background: #f5f8fc;
}
.xy-utility-page svg {
width: 20px;
height: 20px;
flex: none;
}
.xy-utility-hero {
position: relative;
overflow: hidden;
padding: 28px 0 48px;
color: #fff;
background: radial-gradient(ellipse at 82% 40%, rgba(29, 125, 242, .23), transparent 52%), linear-gradient(115deg, #031b33, #0b3153);
}
.xy-utility-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(171, 207, 244, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 207, 244, .035) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(90deg, transparent, #000);
}
.xy-utility-hero .xy-container {
position: relative;
z-index: 1;
}
.xy-utility-hero__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.xy-utility-hero__copy { min-width: 0; }
.xy-utility-hero__eyebrow {
display: flex;
align-items: center;
gap: 12px;
color: #a6c9ed;
font-size: 11px;
letter-spacing: .12em;
}
.xy-utility-hero__eyebrow span {
width: 24px;
height: 1px;
background: #5da6f0;
}
.xy-utility-hero h1 {
margin: 10px 0 12px;
color: #fff;
font-size: 40px;
line-height: 1.3;
letter-spacing: .03em;
}
.xy-utility-hero__description {
max-width: 660px;
color: #c5d8ec;
font-size: 14px;
line-height: 1.9;
}
.xy-utility-hero__art {
display: grid;
place-items: center;
width: 132px;
height: 132px;
flex: none;
margin-right: 42px;
border: 1px solid rgba(124, 178, 234, .22);
border-radius: 30px;
box-shadow: 0 0 0 16px rgba(119, 182, 255, .035), 0 0 0 34px rgba(119, 182, 255, .025);
background: linear-gradient(135deg, rgba(148, 201, 255, .12), rgba(24, 83, 142, .04));
}
.xy-utility-hero__art svg {
width: 62px;
height: 62px;
color: #9bcfff;
}
.xy-utility-page__layout {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
align-items: start;
gap: 28px;
padding-top: 32px;
}
.xy-utility-page__sidebar {
position: sticky;
top: 106px;
}
.xy-utility-page__sidecard {
padding: 24px 14px 14px;
border: 1px solid var(--xy-line);
border-radius: 12px;
background: #fff;
}
.xy-utility-page__sideheading {
margin: 0 12px 20px;
color: var(--xy-ink);
font-size: 16px;
font-weight: 600;
}
.xy-utility-page__sideheading span {
display: block;
margin-top: 5px;
color: var(--xy-muted);
font-size: 10px;
font-weight: 400;
letter-spacing: .14em;
}
.xy-utility-page__breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
color: #9db8d1;
font-size: 12px;
}
.xy-utility-page__breadcrumb a:hover { color: #fff; }
.xy-utility-page__breadcrumb [aria-current] { color: #dceafa; }
.xy-utility-page__nav {
display: grid;
gap: 6px;
font-size: 14px;
}
.xy-utility-page__nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
border-radius: 7px;
color: var(--xy-body);
transition: background .2s ease, color .2s ease;
}
.xy-utility-page__nav a[aria-current="page"],
.xy-utility-page__nav a:hover {
color: var(--xy-primary);
background: #edf5ff;
}
.xy-utility-page__nav a[aria-current="page"] { font-weight: 600; }
.xy-utility-page__nav .xy-utility-page__arrow { width: 16px; height: 16px; margin-left: auto; }
.xy-utility-page__shortcuts { margin: 24px 26px; }
.xy-utility-page__shortcuts p { margin-bottom: 12px; color: var(--xy-muted); font-size: 12px; }
.xy-utility-page__shortcuts a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--xy-body); font-size: 12px; }
.xy-utility-page__shortcuts svg { width: 14px; height: 14px; }
.xy-utility-page__shortcuts a:hover { color: var(--xy-primary); }
.xy-utility-page__main { min-width: 0; }
.xy-utility-page__paper {
padding: 36px 40px;
border: 1px solid var(--xy-line);
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 24px rgba(19, 52, 85, .035);
}
.xy-utility-page__document-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 24px;
border-bottom: 1px solid var(--xy-line);
}
.xy-utility-page__document-head p { margin-bottom: 6px; color: var(--xy-primary); font-size: 10px; letter-spacing: .15em; }
.xy-utility-page__document-head h2 { color: var(--xy-ink); font-size: 22px; }
.xy-utility-page__document-head > svg { width: 30px; height: 30px; color: #abc6e6; }
.xy-utility-page__body {
margin-top: 24px;
color: var(--xy-body);
font-size: 14px;
line-height: 2;
counter-reset: utility-section;
overflow-wrap: anywhere;
}
.xy-utility-page__intro {
padding: 16px 20px;
border-left: 3px solid #6ba9f3;
border-radius: 0 6px 6px 0;
background: #f5f9ff;
}
.xy-utility-page__body h2 {
display: flex;
align-items: baseline;
gap: 12px;
margin: 32px 0 12px;
color: var(--xy-ink);
font-size: 18px;
line-height: 1.6;
}
.xy-utility-page__body h2::before {
content: counter(utility-section, decimal-leading-zero);
counter-increment: utility-section;
flex: none;
color: var(--xy-primary);
font-size: 12px;
font-weight: 500;
}
.xy-utility-page__body p + p { margin-top: 12px; }
.xy-utility-page__body a { color: var(--xy-primary); text-underline-offset: 3px; }
.xy-utility-page__body a:hover { text-decoration: underline; }
.xy-utility-page__body .xy-region + .xy-region { margin-top: 24px; }
.xy-utility-page__contact {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 32px;
padding: 22px;
border: 1px solid #e1edf9;
border-radius: 8px;
background: #f5f9fd;
overflow-wrap: anywhere;
}
.xy-utility-page__contact > div { min-width: 0; }
.xy-utility-page__contact h2 { margin: 0 0 8px; color: var(--xy-ink); font-size: 16px; }
.xy-utility-page__contact p { color: var(--xy-body); font-size: 12px; line-height: 1.9; }
.xy-utility-page__contact-description { margin-bottom: 12px; }
.xy-utility-page__contact a { color: var(--xy-primary); }
.xy-utility-page__contact-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px; color: var(--xy-primary); background: #e7f1ff; }
.xy-utility-page__endnote {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
color: var(--xy-muted);
font-size: 11px;
}
.xy-utility-page__endnote svg { width: 14px; height: 14px; }
.xy-body:has(.xy-utility-page) .xy-float-tools { display: none; }
.xy-sitemap__overview {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0;
color: var(--xy-body);
font-size: 13px;
}
.xy-sitemap__overview a { display: flex; align-items: center; gap: 7px; color: var(--xy-primary); }
.xy-sitemap__overview svg { width: 16px; height: 16px; }
.xy-utility-page a:focus-visible {
outline: 2px solid var(--xy-primary);
outline-offset: 4px;
border-radius: 3px;
}
.xy-sitemap {
column-count: 2;
column-gap: 16px;
}
.xy-sitemap__group {
break-inside: avoid;
min-width: 0;
margin-bottom: 16px;
padding: 20px;
border: 1px solid var(--xy-line);
border-radius: 8px;
background: linear-gradient(150deg, #f8fbff, #fff 65%);
overflow-wrap: anywhere;
}
.xy-sitemap__group h3,
.xy-sitemap__group h3 a {
display: flex;
align-items: center;
gap: 10px;
color: var(--xy-ink);
font-size: 15px;
}
.xy-sitemap__group h3 a { width: 100%; }
.xy-sitemap__group h3 a:hover { color: var(--xy-primary); }
.xy-sitemap__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 7px; color: var(--xy-primary); background: #eaf3ff; }
.xy-sitemap__icon svg { width: 18px; height: 18px; }
.xy-sitemap__group .xy-sitemap__arrow { width: 15px; height: 15px; margin-left: auto; color: #7898bc; }
.xy-sitemap__group ul {
display: grid;
gap: 4px;
margin: 14px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--xy-line);
list-style: none;
font-size: 13px;
}
.xy-sitemap__item {
padding-left: calc(var(--map-depth, 0) * 12px);
}
.xy-sitemap__group ul a { display: block; padding: 6px 8px; border-radius: 4px; color: var(--xy-body); }
.xy-sitemap__group ul a:hover { color: var(--xy-primary); background: #edf5ff; }
.xy-sitemap__entry a { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--xy-line); color: var(--xy-muted); font-size: 12px; }
.xy-sitemap__entry a:hover { color: var(--xy-primary); }
@media (max-width: 1000px) {
.xy-utility-page__layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
.xy-utility-page__paper { padding: 28px; }
.xy-sitemap { column-count: 1; }
}
@media (max-width: 720px) {
.xy-utility-page { padding-bottom: 32px; }
.xy-utility-hero { padding: 20px 0 32px; }
.xy-utility-page__breadcrumb { margin-bottom: 24px; }
.xy-utility-hero h1 { font-size: 30px; }
.xy-utility-hero__eyebrow { font-size: 9px; gap: 8px; }
.xy-utility-hero__description { font-size: 13px; }
.xy-utility-hero__art { display: none; }
.xy-utility-page__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
.xy-utility-page__sidebar { position: static; min-width: 0; }
.xy-utility-page__sidecard { padding: 6px; border-radius: 8px; }
.xy-utility-page__sideheading, .xy-utility-page__shortcuts { display: none; }
.xy-utility-page__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.xy-utility-page__nav a { justify-content: center; gap: 6px; padding: 12px 4px; font-size: 12px; white-space: nowrap; }
.xy-utility-page__nav svg { width: 15px; height: 15px; }
.xy-utility-page__nav .xy-utility-page__arrow { display: none; }
.xy-utility-page__paper { padding: 24px 20px; border-radius: 8px; }
.xy-utility-page__document-head { padding-bottom: 20px; }
.xy-utility-page__document-head h2 { font-size: 19px; }
.xy-utility-page__document-head > svg { width: 24px; height: 24px; }
.xy-utility-page__body { font-size: 13px; }
.xy-utility-page__body h2 { font-size: 16px; gap: 9px; }
.xy-utility-page__intro { padding: 12px 14px; }
.xy-utility-page__contact { padding: 16px; gap: 10px; }
.xy-utility-page__contact-icon { width: 30px; height: 30px; }
.xy-utility-page__contact h2 { font-size: 14px; }
.xy-sitemap__group { padding: 16px; }
}
/* 共享搜索脚本使用的卡片样式。 */
.xy-searchresults .card {
display: flex;
flex-direction: column;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: #fff;
overflow: hidden;
transition: transform 0.3s var(--xy-ease), box-shadow 0.3s var(--xy-ease);
}
.xy-searchresults .card:hover {
transform: translateY(-3px);
box-shadow: var(--xy-shadow-sm);
}
.xy-searchresults .card__media img {
width: 100%;
height: 150px;
object-fit: cover;
}
.xy-searchresults .card__body {
padding: 16px 18px 18px;
}
.xy-searchresults .card__meta {
color: var(--xy-primary);
font-size: 12.5px;
}
.xy-searchresults .card h3 {
margin: 6px 0 8px;
font-size: 16px;
line-height: 1.5;
}
.xy-searchresults .card h3 a:hover {
color: var(--xy-primary);
}
.xy-searchresults .card__text {
color: var(--xy-body);
font-size: 13px;
}
.xy-searchsummary {
margin: 18px 0 22px;
color: var(--xy-muted);
font-size: 14px;
}
.xy-searchbar--page {
max-width: 100%;
margin-bottom: 8px;
}
/* ==========================================================================
新增版块的响应式
========================================================================== */
/*
* 卡片封面统一加一层「摄影感」压暗：矢量场景图偏平，叠一层自上而下的深蓝渐变 + 内阴影后，
* 观感更接近设计稿里的机房照片，也能让卡片上的白色角标更清楚。
*/
.xy-newsrow__media,
.xy-industrycard__media,
.xy-svccard__media,
.xy-resource-row__media,
.xy-compcard__media {
position: relative;
}
.xy-scard__media::after,
.xy-casecard__media::after,
.xy-leadcard__media::after,
.xy-newsrow__media::after,
.xy-rescard__media::after,
.xy-industrycard__media::after,
.xy-featurecase__media::after,
.xy-svccard__media::after,
.xy-resource-row__media::after,
.xy-compcard__media::after,
.xy-caselead__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(3, 18, 34, 0.05) 0%, rgba(3, 18, 34, 0.26) 100%);
box-shadow: inset 0 0 44px rgba(3, 18, 34, 0.22);
}
/* 图标统一尺寸：标记里只写 ``，尺寸在这里定，
免得漏掉一处就退化成浏览器默认的 300×150 大图。 */
.xy-stepcard__ico svg,
.xy-servicequery__ico svg,
.xy-filters__foot button svg,
.xy-download__ico svg {
width: 22px;
height: 22px;
}
.xy-stepcard__ico svg {
width: 24px;
height: 24px;
}
.xy-filters__foot button svg {
width: 16px;
height: 16px;
}
.xy-download__ico svg {
width: 20px;
height: 20px;
}
@media (max-width: 1240px) {
.xy-arch__row,
.xy-arch__notes {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xy-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xy-flow__step:nth-child(3n)::after {
display: none;
}
.xy-homesplit,
.xy-resourcefeature {
grid-template-columns: 1fr;
}
}
@media (max-width: 1080px) {
.xy-solutiongrid,
.xy-capability,
.xy-casesplit,
.xy-caselead {
grid-template-columns: 1fr;
}
.xy-solutiongrid > .xy-leadcard,
.xy-solutiongrid > .xy-scard {
grid-column: auto;
grid-row: auto;
}
.xy-capability__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-flow__step::after {
display: none;
}
.xy-downloadtable__head {
display: none;
}
.xy-downloadtable__row {
grid-template-columns: 1fr 1fr;
row-gap: 8px;
}
}
@media (max-width: 900px) {
/* 案例分类条 + 搜索框：小屏换成两行，别把页面顶出横向滚动 */
.xy-caselist .xy-tabbar {
flex-wrap: wrap;
gap: 6px;
}
.xy-tabbar__nav {
max-width: 100%;
overflow-x: auto;
}
.xy-caselist__search {
width: 100%;
margin-left: 0;
padding-bottom: 12px;
}
.xy-caselist__search form {
width: 100%;
}
.xy-caselist__search input {
flex: 1 1 auto;
width: auto;
}
.xy-casesplit__side,
.xy-capability__grid,
.xy-metrics--row,
.xy-caselead__metrics {
grid-template-columns: 1fr;
}
.xy-servicequery {
flex-wrap: wrap;
}
.xy-servicequery__form {
width: 100%;
margin-left: 0;
}
.xy-servicequery__form input {
flex: 1 1 auto;
width: auto;
}
.xy-arch__row,
.xy-arch__notes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.xy-flow {
grid-template-columns: 1fr;
}
.xy-hero__sidenote {
display: none;
}
.xy-prose--page {
padding: 22px 18px;
}
.xy-resource-row__media {
width: 96px;
height: 68px;
}
.xy-consultation__item {
grid-template-columns: 88px minmax(0, 1fr) 32px;
gap: 12px;
min-height: 0;
padding: 16px 0;
}
.xy-consultation__item:hover {
padding-right: 4px;
padding-left: 4px;
}
.xy-consultation__date {
font-size: 13px;
}
.xy-consultation__body h3 {
font-size: 15px;
}
.xy-consultation__body p {
display: -webkit-box;
overflow: hidden;
font-size: 12.5px;
line-height: 1.55;
text-overflow: ellipsis;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.xy-consultation__arrow {
width: 30px;
height: 30px;
font-size: 17px;
}
}
/* ==========================================================================
文章型详情：资源中心文章 / 资料下载 / 常见问题
正文与侧栏都按内容字段渲染（分类、日期、摘要、正文、要点、资料信息），
新增栏目只要挂在这套版式上，运营填内容即可，模板不用改。
========================================================================== */
.xy-article {
padding-bottom: 0;
}
.xy-article__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
align-items: start;
margin-top: 18px;
}
.xy-article__main {
min-width: 0;
padding: 34px 36px 38px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: var(--xy-surface);
}
.xy-article__head {
display: flex;
align-items: center;
gap: 12px;
}
.xy-article__date {
color: var(--xy-muted);
font-size: 13px;
}
.xy-article__title {
margin: 14px 0 0;
color: var(--xy-ink);
font-size: 30px;
font-weight: 700;
line-height: 1.35;
}
.xy-article__lead {
margin: 14px 0 0;
padding-left: 14px;
border-left: 3px solid var(--xy-primary);
color: var(--xy-body);
font-size: 15px;
line-height: 1.9;
}
.xy-article__body {
margin-top: 22px;
}
.xy-article__points {
margin-top: 28px;
padding: 22px 24px;
border-radius: var(--xy-radius-sm);
background: var(--xy-soft);
}
.xy-article__points-title {
margin: 0 0 14px;
color: var(--xy-ink);
font-size: 17px;
font-weight: 700;
}
.xy-article__points-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.xy-article__points-list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--xy-body);
font-size: 14.5px;
line-height: 1.75;
}
.xy-article__points-list svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 3px;
color: var(--xy-primary);
}
/* 资料型内容：文件信息与获取入口 */
.xy-doc {
display: flex;
gap: 20px;
margin-top: 28px;
padding: 24px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: linear-gradient(160deg, #f8fbff, #eef5fd);
}
.xy-doc__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--xy-primary);
color: #fff;
}
.xy-doc__icon svg {
width: 26px;
height: 26px;
}
.xy-doc__main {
min-width: 0;
}
.xy-doc__title {
margin: 0;
color: var(--xy-ink);
font-size: 18px;
font-weight: 700;
}
.xy-doc__meta {
display: flex;
flex-wrap: wrap;
gap: 12px 34px;
margin: 14px 0 0;
}
.xy-doc__meta div {
display: flex;
align-items: baseline;
gap: 10px;
}
.xy-doc__meta dt {
color: var(--xy-muted);
font-size: 13px;
}
.xy-doc__meta dd {
margin: 0;
color: var(--xy-ink-2);
font-size: 14px;
font-weight: 600;
}
.xy-doc__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
/* 侧栏：相关内容 + 技术支持 */
.xy-article__side {
display: grid;
gap: 18px;
align-content: start;
position: sticky;
top: calc(var(--xy-header-h) + 18px);
}
.xy-asidecard {
padding: 22px;
border: 1px solid var(--xy-line);
border-radius: var(--xy-radius);
background: var(--xy-surface);
}
.xy-asidecard__title {
margin: 0 0 14px;
color: var(--xy-ink);
font-size: 16px;
font-weight: 700;
}
.xy-asidelist {
display: grid;
gap: 14px;
margin: 0 0 14px;
padding: 0;
list-style: none;
}
.xy-asidelist li {
display: grid;
gap: 4px;
}
.xy-asidelist a {
color: var(--xy-ink-2);
font-size: 14px;
line-height: 1.6;
transition: color 0.22s var(--xy-ease);
}
.xy-asidelist a:hover {
color: var(--xy-primary);
}
.xy-asidelist span {
color: var(--xy-muted);
font-size: 12.5px;
}
.xy-asidecard--cta {
border-color: transparent;
background: linear-gradient(160deg, #041f3c, #10406d);
}
.xy-asidecard--cta .xy-asidecard__title {
color: #fff;
}
.xy-asidecard--cta .xy-asidecard__text {
margin: 0 0 16px;
color: #b7cde8;
font-size: 13.5px;
line-height: 1.8;
}
@media (max-width: 1024px) {
.xy-article__grid {
grid-template-columns: 1fr;
}
.xy-article__side {
position: static;
}
}
@media (max-width: 720px) {
.xy-article__main {
padding: 22px 18px 26px;
}
.xy-article__title {
font-size: 24px;
}
.xy-doc {
flex-direction: column;
}
}
/* ---------- 真实图片替换 SVG 的通用 object-fit 规则 ---------- */
/* 所有 __media / __art 容器里的 ![]()
默认 cover（对应 preserveAspectRatio xMidYMid slice） */
[class*="__media"] > img,
[class*="__media"] img,
[class*="__art"] > img,
[class*="__art"] img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* 产品卡：产品图需要完整显示，用 contain */
.xy-pcard__media img {
object-fit: contain;
}
/* hero 主视觉：自然宽高，不裁切 */
.xy-hero__art img {
object-fit: contain;
width: 100%;
height: auto;
}
/* hero 背景：填满容器 */
.xy-hero__bg img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
/* 缩略图库：保持 contain 不扭曲 */
.xy-gallery__thumb img,
.xy-gallery__stage img {
object-fit: contain;
}
.xy-pcard__text,
.xy-linecard__text,
.xy-scard__text,
.xy-casecard__text,
.xy-leadcard__text,
.xy-featurecase__text,
.xy-caselead__caption,
.xy-resource-row__text,
.xy-news-row__text,
.xy-brandcard__desc,
.xy-news-row small,
.card--product .card__text,
.list-block .grid--4 .card__text,
.list-block .card__text,
.xy-searchresults .card__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.xy-overview--imported {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
margin-bottom: 32px;
}
.xy-overview--imported .xy-overview__body {
line-height: 1.85;
overflow-wrap: anywhere;
}
.xy-overview--imported .xy-highlights {
border-left: 1px solid var(--xy-line);
padding-left: 40px;
}
.xy-overview--text-only {
grid-template-columns: minmax(0, 1fr);
}
.xy-overview--text-only .xy-overview__body {
max-width: 900px;
}
.xy-overview--text-only .xy-highlights {
display: none;
}
.xy-source-parameters {
overflow-x: auto;
color: var(--xy-body);
font-size: 14px;
line-height: 1.85;
overflow-wrap: anywhere;
}
.xy-source-parameters p,
.xy-source-parameters > div {
margin: 0 0 16px;
}
.xy-source-parameters table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
}
.xy-source-parameters td,
.xy-source-parameters th {
padding: 12px 16px;
border: 1px solid var(--xy-line);
text-align: left;
}
.xy-source-parameters tr:nth-child(odd) {
background: var(--xy-soft);
}
.xy-source-parameters img {
max-width: 100%;
height: auto;
}
@media (max-width: 760px) {
.xy-overview--imported {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.xy-overview--imported .xy-highlights {
border-left: 0;
padding-left: 0;
}
}