/* ==========================================================================
   官网主题重构 - 公共设计系统
   会员中心风格：蓝白、卡片化、轻阴影、4/8/12px 圆角
   ========================================================================== */
:root {
  --color-primary: #1A56DB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: #EEF4FF;
  --gradient-primary: linear-gradient(135deg, #2D5FFE 0%, #4C7DFF 100%);
  --color-success: #059669;
  --color-warning: #FAAD10;
  --color-danger: #F13939;
  --color-price: #F0142F;
  --bg-page: #F3F5F9;
  --bg-card: #FFFFFF;
  --text-primary: #1E2736;
  --text-secondary: #4E5969;
  --text-tertiary: #8692B0;
  --border-color: #E6E7EB;
  --divider-color: #EEEEEE;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --shadow-card: 0 1px 4px rgba(21, 34, 50, 0.08);
  --shadow-hover: 0 8px 24px rgba(21, 34, 50, 0.10);
  --content-width: 1280px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg-page) !important;
  color: var(--text-primary);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.65;
}
a { color: var(--text-secondary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-primary) !important; }
img { max-width: 100%; }

.section-content {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 72px 20px !important;
  box-sizing: border-box;
}
.section-p { padding-left: 20px; padding-right: 20px; }
.section-title { text-align: center; }
.section-title h2 { margin: 0; font-size: 32px; line-height: 1.3; font-weight: 600; color: var(--text-primary); letter-spacing: -.02em; }
.section-title .section-desc { margin-top: 14px; color: var(--text-tertiary) !important; font-size: 15px !important; }
.section-bg { color: #fff; }
.section-bg .section-title h2 { color: #fff; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230,231,235,.85);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(21,34,50,.08); }
.nav-shadow { box-shadow: none !important; }

/* ==========================================================================
   首页（有 Hero 轮播）的导航处理
   --------------------------------------------------------------------------
   需求：
     1. Hero 轮播从 y=0 铺起（导航悬浮在图片上方，盖住图片顶部 64px）；
     2. 页面在顶部时，导航是**毛玻璃**（半透明白 + 背景模糊，轮播图透出）；
     3. 向下滚动时，背景随滚动深度**逐步变白**，最终接近实底白；
        模糊全程常驻——深层内容从导航底下穿过时仍保持毛玻璃质感。

   实现要点：
     1. position: fixed（不占文档流高度，Hero 能顶到页面最上方）——导航从
        头到尾都悬浮在视口顶部，滚动过程中位置不会跳变。
     2. 透明度 / 描边 / 阴影全部由 common/redesign.js 按滚动深度
        逐帧写入 --nav-glass-* 变量，本文件只负责消费：
          --nav-glass-alpha  背景不透明度（0.42 → 0.97）
          --nav-glass-blur   背景模糊半径（恒定 12px，毛玻璃常驻）
          --nav-glass-line   底部分隔线透明度
          --nav-glass-shadow 投影强度
     3. 变量的缺省值就是「顶部毛玻璃态」：首屏在 JS 执行前不会先闪白底。
     4. 背景必须写 background-color（longhand），不要用 background
        （shorthand）——shorthand 与 !important 组合在本文件踩过层叠
        相互覆盖的坑，改动前先读这段注释。
   ========================================================================== */
body[data-hero] .site-header {
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(255, 255, 255, var(--nav-glass-alpha, 0.42)) !important;
  backdrop-filter: blur(var(--nav-glass-blur, 12px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--nav-glass-blur, 12px)) saturate(180%);
  border-bottom-color: rgba(230, 231, 235, var(--nav-glass-line, 0));
  /* 阴影必须带 !important：header 元素上还挂着 .nav-shadow
     （box-shadow: none !important），不带的话阴影永远被压掉 */
  box-shadow: 0 6px 20px rgba(21, 34, 50, var(--nav-glass-shadow, 0)) !important;
  /* 参数由 JS 逐帧驱动，这里不再叠加属性过渡，避免两层动画产生迟滞感 */
  transition: none;
}
.site-nav { height: 64px; padding-top: 0 !important; padding-bottom: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 28px; }

/* --------------------------------------------------------------------------
   导航对齐修复
   --------------------------------------------------------------------------
   症状：一级菜单掉到导航条下面（第二行），右侧「登录 / 立即注册」按钮与菜单不齐。

   根因有两条，都在 common.css 里（它是重构前的旧样式，先于 redesign.css 加载）：
     1. `.nav-header .nav-left { display:flex; flex-wrap: wrap; }`
        特异性 0,2,0 高于本文件的 `.nav-left`（0,1,0），且 flex-wrap:wrap 会让
        菜单在宽度不够时折到第二行。
     2. `.nav-menu .nav-item { padding: 0 20px; height: 72px }`、
        `.nav-header .nav-left .nav-icon img { width:135px; margin-right:50px }`
        这些旧尺寸和新版导航（图标+间距）不匹配，合计把左区撑到 136px 高。

   处理：把导航相关规则统一提升到 `.site-nav` 作用域下（特异性 0,2,0 起），
   并显式关掉 flex-wrap 与旧的内外边距。
   -------------------------------------------------------------------------- */
.site-nav .nav-left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 30px;
  height: 64px;
  min-width: 0;
}
.site-nav .nav-icon { display: flex; align-items: center; height: 64px; }
.site-nav .nav-icon img {
  height: 34px;
  max-height: 34px;
  width: auto;
  margin-right: 0;
  display: block;
}
.site-nav .nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 26px;
  height: 64px;
}
.site-nav .nav-menu a {
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 2px solid transparent;
}
.site-nav .nav-menu .nav-item {
  height: auto;
  padding: 0;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 0;
}
.site-nav .nav-menu a:hover .nav-item { color: var(--color-primary); }
.site-nav .nav-right { display: flex; align-items: center; gap: 16px; height: 64px; }
.site-nav .nav-right .control { margin: 0; color: var(--text-secondary); font-size: 14px; }
.site-nav .nav-right .btn { height: 38px; padding: 0 18px; }
.nav-right .control { color: var(--text-secondary); font-size: 14px; }
.nav-right .control:hover { color: var(--color-primary); }
.nav-right .btn { height: 38px; padding: 0 16px; }
.head-img { width: 34px; height: 34px; line-height: 34px; border-radius: 50%; text-align: center; color: #fff; font-weight: 600; font-size: 13px; background: var(--gradient-primary); }
.login-in { position: relative; display: flex; align-items: center; cursor: pointer; }
/* common.css 旧版给 .login-in 定死 72px 高、登录菜单 top:72px（特异性更高），
   导航降至 64px 后必须在这里压掉，否则用户区比导航条高、菜单位置悬空 */
.site-nav .login-in { height: 64px; }
.site-nav .login-in .login-menu { top: 100%; }
.login-in .name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.login-menu { display: none; position: absolute; right: 0; top: 44px; min-width: 160px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-m); box-shadow: var(--shadow-hover); padding: 8px; }
.login-in:hover .login-menu { display: block; }
.login-menu-item { padding: 9px 10px; border-radius: var(--radius-s); color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.login-menu-item:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.real-name { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
.no-real-name { background: #FFF7E6; color: #D46B08; }

/* Nav dropdown
   面板高度为 0 时不能有任何可见描边/阴影，否则导航下方会露出一条白线：
   · 本文件的 border-top 已移除（height:0 时 1px 边框照样渲染）
   · common.css 旧版 .nav-cont 的 top:72px / box-shadow 在这里一并压掉
   打开态的分隔线改挂在内层 .nav-cont-menu 上（它只在展开时才 display:block） */
.nav-cont { top: 64px; height: 0; overflow: hidden; transition: height .22s ease; background: #fff; box-shadow: none; }
.nav-cont .section-content { padding: 0 !important; max-width: var(--content-width); }
.nav-cont-menu { display: none; padding: 22px 0; border-top: 1px solid var(--divider-color); }
.nav-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; }
.nav-item-box { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-m); transition: background .2s ease; }
.nav-item-box:hover { background: var(--color-primary-soft); }
.nav-item-box img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.item-box-title .title { color: var(--text-primary); font-size: 14px; font-weight: 500; }
.nav-item-box:hover .item-box-title .title { color: var(--color-primary); }
.item-box-title .desc { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }

.menu-toggle { display: none; width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: var(--radius-s); background: #fff; padding: 9px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text-primary); margin: 4px 0; }

/* Side tools */
.aside-tools { position: fixed; right: 16px; bottom: 80px; z-index: 900; }
.tools-list { display: flex; flex-direction: column; gap: 8px; }
.tools-item { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); display: grid; place-items: center; cursor: pointer; }
.tools-item > img { width: 22px; height: 22px; object-fit: contain; }
.tools-box { display: none; position: absolute; right: 58px; top: 0; min-width: 190px; padding: 14px; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-hover); border: 1px solid var(--border-color); }
.tools-item:hover .tools-box { display: block; }
.tools-box-s h5 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
.tools-box-s p { margin: 4px 0; color: var(--text-tertiary); font-size: 12px; }
.tools-box-s .button { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border-radius: var(--radius-s); background: var(--color-primary); color: #fff; font-size: 12px; }
/* Buttons */
.btn, .btn2, .btn-normal, .btn-normal-light, .btn-dark, .btn-orgin,
.product-btn, .shop-car-btn, .buy-cloud, .buy-dcim-btn {
  border-radius: var(--radius-s) !important;
  transition: all .2s ease !important;
}
.btn, .btn2 { height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px !important; line-height: 1; }
.btn-normal, .product-btn, .buy-cloud, .buy-dcim-btn { color: #fff !important; background: var(--color-primary) !important; border: 1px solid var(--color-primary) !important; box-shadow: 0 4px 10px rgba(26,86,219,.16); }
.btn-normal:hover, .product-btn:hover, .buy-cloud:hover, .buy-dcim-btn:hover { background: var(--color-primary-hover) !important; border-color: var(--color-primary-hover) !important; color: #fff !important; transform: translateY(-1px); }
.btn-normal-light { background: #fff !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
.btn-normal-light:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-dark { background: #111827 !important; color: #fff !important; border-color: #111827 !important; }
.btn-orgin { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border: 1px solid transparent !important; }
.link-hover:hover { color: var(--color-primary) !important; }

/* Cards */
.box-shadow, .box-shadow-light,
.service-box, .practice-box, .brand-box, .cert-item,
.news-cont, .product-item, .article-card, .limit-table,
.document-cont, .document-menu, .feedback-box, .contact-box-card,
.partner-card, .solution-card, .agent-box, .recuit-content .recuit-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all .22s ease !important;
  box-sizing: border-box;
}
.service-box:hover, .practice-box:hover, .brand-box:hover, .cert-item:hover,
.news-cont:hover, .product-item:hover, .article-card:hover,
.partner-card:hover, .solution-card:hover, .agent-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(26,86,219,.22) !important;
}
.service-title, .product-item h4, .product-item .title-desc { color: var(--text-primary); }

/* Tags / price */
.banner-tag, .product-text-item, .tag, .product-active-text {
  border-radius: 999px !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(26,86,219,.16) !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
}
.price, .price-text, .product-price, .product-price-box .price { color: var(--color-price) !important; }
.origin-price { color: var(--text-tertiary) !important; }

/* Forms */
input, textarea, select, .form-control {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-s) !important;
  outline: none !important;
  background: #fff !important;
  color: var(--text-primary) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,.10) !important;
}
.input-search-text, .input-search-select { border-radius: var(--radius-s) !important; }

/* Footer */
.footer { background: #0F1B33 !important; color: rgba(255,255,255,.72) !important; }
.footer-promise { background: #fff; }
.footer-promise .promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 24px !important; padding-bottom: 24px !important; }
.footer-promise .promise-box { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.footer-promise .promise-box img { width: 28px; height: 28px; object-fit: contain; }
.footer-main { background: #0F1B33 !important; color: rgba(255,255,255,.72); }
.footer-main .section-content { padding-top: 48px !important; padding-bottom: 24px !important; }
.footer-content .footer-nav { display: grid; grid-template-columns: 1fr 240px; gap: 40px; }
.footer-nav-left { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.footer-nav-head { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.footer-nav-item { margin-bottom: 10px; font-size: 13px; }
.footer-nav-item a, .footer-nav-item { color: rgba(255,255,255,.66); }
.footer-nav-item a:hover { color: #fff !important; }
.qr-code { margin-top: 14px; }
.qr-code img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: var(--radius-s); padding: 4px; }
.footer-link { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.5); font-size: 12px; }
.footer-link a { margin-left: 12px; color: rgba(255,255,255,.6); }
.footer-record { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.45); font-size: 12px; }
.footer-record .left-info { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-record a { color: rgba(255,255,255,.5); }

/* Page blocks */
.banner-cont { border-radius: 0; overflow: hidden; }
.banner-cont .swiper-slide { height: 500px !important; background: linear-gradient(180deg, #F4F7FF 0%, #EEF4FF 100%) !important; }
.banner-cont .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-cont .swiper-pagination-bullet { width: 28px; height: 4px; border-radius: 999px; background: rgba(26,86,219,.22); opacity: 1; }
.banner-cont .swiper-pagination-bullet-active { background: var(--color-primary); }
.banner .banner-s { background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-hover); }
.banner-s .banner-list .banner-item:hover { background: var(--color-primary-soft); }
.banner-s .banner-list .banner-item:hover h5 { color: var(--color-primary); }

.server-banner, .server-banner2 {
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, #F8FAFF 0%, #EEF4FF 100%) !important;
  border: 1px solid rgba(26,86,219,.08);
  margin-top: 20px;
}
.server-banner .section-content, .server-banner2 .section-content { padding-top: 76px !important; padding-bottom: 76px !important; }
.server-banner-desc, .server-banner-desc2 { color: var(--text-secondary) !important; font-size: 15px !important; }

.product-hot, .product-list, .product-detail { background: transparent; }
.hot { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-l); padding: 20px; box-shadow: var(--shadow-card); }
.gallery-thumbs .swiper-slide.title { color: var(--text-secondary); font-size: 15px; padding: 10px 14px; border-radius: var(--radius-s); cursor: pointer; }
.gallery-thumbs .swiper-slide.title.active { color: #fff; background: var(--color-primary); }
.country-item { border-radius: var(--radius-s); color: var(--text-secondary); }
.country-item.active { color: var(--color-primary); background: var(--color-primary-soft); }
.product-item { overflow: hidden; }
.product-item-top { padding: 20px 22px 0; }
.product-item-bottom { background: #fff; border-top: 1px solid var(--divider-color); }
.product-config p { margin: 8px 0; }
.config-lable { color: var(--text-tertiary); }
.config-value { color: var(--text-primary); }
.product-price-box { border-top: 1px solid var(--divider-color); padding-top: 14px; }
.product-price-box .price { font-size: 22px; font-weight: 600; }
.product-price-box .origin-price { font-size: 12px; }
.product-text { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Products / pricing tables */
.pricing-table, .table, table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.pricing-table th, .table th, table th { background: #F8FAFF; color: var(--text-primary); font-weight: 600; }
.pricing-table th, .pricing-table td, .table th, .table td, table th, table td { padding: 14px 16px; border-bottom: 1px solid var(--divider-color); }
.pricing-table tr:last-child td, .table tr:last-child td, table tr:last-child td { border-bottom: 0; }

/* Document module */
.document, .document-content, .document-view { background: transparent; }
.document .section-content { max-width: var(--content-width); }
.document-left, .document-menu, .document-nav { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-m); padding: 18px; box-shadow: var(--shadow-card); }
.document-left a, .document-menu a, .document-nav a { display: block; padding: 8px 10px; border-radius: var(--radius-s); color: var(--text-secondary); }
.document-left a:hover, .document-left a.active, .document-menu a:hover, .document-menu a.active, .document-nav a:hover, .document-nav a.active { background: var(--color-primary-soft); color: var(--color-primary); }
.document-body, .document-cont, .document-view .article { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-m); padding: 28px; box-shadow: var(--shadow-card); }
.document-body h1, .document-body h2, .document-body h3, .document-view h1, .document-view h2, .document-view h3 { color: var(--text-primary); }
.document-body pre, .document-view pre { background: #0F1B33; color: #E5EAF5; border-radius: var(--radius-m); padding: 18px; overflow: auto; }
.document-body code, .document-view code { font-family: Consolas, Monaco, monospace; }

/* News / article */
.news-cont { padding: 22px; }
.news-head { border-bottom: 1px solid var(--divider-color); padding-bottom: 12px; }
.news-title { color: var(--text-primary); font-size: 18px; font-weight: 600; }
.news-item { padding: 12px 0; border-bottom: 1px solid var(--divider-color); }
.news-item:last-child { border-bottom: 0; }
.news-item .title { color: var(--text-secondary); }
.news-item:hover .title { color: var(--color-primary); }
.news-item .time { color: var(--text-tertiary); font-size: 12px; }
.article-content, .announce-content { font-size: 15px; line-height: 1.85; color: var(--text-secondary); }

/* Solutions / partners / about */
.solution-content .solution-box, .solution-list .solution-box, .agent-box, .partner-list .partner-item { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.solution-content .solution-box:hover, .agent-box:hover, .partner-list .partner-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.about-content, .contact-content, .recuit-content, .feedback-content { background: transparent; }

/* FAQ */
.agent-question .item, .faq-item { background: #fff !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-m) !important; margin-bottom: 12px !important; box-shadow: var(--shadow-card) !important; overflow: hidden; }
.agent-question .item .title, .faq-item .title { padding: 16px 18px; cursor: pointer; color: var(--text-primary); font-weight: 500; }
.agent-question .item .des, .faq-item .des { padding: 0 18px 16px; color: var(--text-secondary); }

/* Misc layout */
.common-empty, .empty { background: #fff; border-radius: var(--radius-m); border: 1px solid var(--border-color); }
.register-advert { border-radius: var(--radius-l); overflow: hidden; }
.mt-20 { margin-top: 20px; }
.font-grey, .font-gray { color: var(--text-tertiary) !important; }
.font-theme, .font-primary { color: var(--color-primary) !important; }

/* Responsive */
@media screen and (max-width: 1199px) {
  .section-content { padding-left: 18px !important; padding-right: 18px !important; }
  .nav-menu { gap: 18px; }
  .nav-menu .nav-item { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   导航换行修复（992 ~ 1199px 这一档最容易出问题）
   --------------------------------------------------------------------------
   症状：未登录时右上角有「文档 / 控制台 / 登录 / 立即注册」四个控件，
   中档宽度下整条导航被挤爆，一级菜单文字被压成一字一行，视觉上像竖排。

   根因：.nav-left 设了 min-width: 0，flex 会让它一直收缩；
   而 .nav-item 没有禁止换行，空间不够时中文会逐字换行。

   处理：给 .nav-menu 与 .nav-right 加 flex-shrink: 0 并禁止换行，
   让它们保持完整；由 logo 先让位（.nav-left 允许收缩 + logo 可缩小）。
   -------------------------------------------------------------------------- */
.nav-menu, .nav-right { flex-shrink: 0; }
.nav-menu .nav-item,
.nav-menu a,
.nav-right .control { white-space: nowrap; }
.nav-icon img { min-width: 0; }

@media screen and (max-width: 1199px) {
  .nav-left { gap: 20px; }
  .nav-menu { gap: 16px; }
  .nav-menu .nav-item,
  .nav-right .control { font-size: 13px; }
  .nav-right { gap: 10px; }
  /* 中档宽度下先压缩 logo 与按钮，保证菜单文字不被挤压 */
  .nav-icon img { height: 30px; }
  .nav-right .btn { height: 34px; padding: 0 12px; font-size: 13px; }
}

@media screen and (max-width: 1199px) {
  body[data-hero] .site-header .nav-menu { gap: 16px; }
}

@media screen and (max-width: 991px) {
  .nav-menu, .nav-right > .nav-extra { display: none; }
  .menu-toggle { display: block; }
  .site-header.nav-open .nav-menu { display: flex; position: fixed; left: 0; right: 0; top: 64px; height: auto; padding: 12px 20px 20px; background: #fff; border-bottom: 1px solid var(--border-color); flex-direction: column; align-items: flex-start; gap: 0; z-index: 998; box-shadow: 0 16px 30px rgba(21,34,50,.10); }
  .site-header.nav-open .nav-menu a { width: 100%; height: 44px; border-bottom: 0; border-radius: var(--radius-s); padding: 0 12px; }
  .site-header.nav-open .nav-menu a:hover { background: var(--color-primary-soft); }
  .site-header.nav-open .nav-cont { display: none; }
  .nav-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-content .footer-nav { grid-template-columns: 1fr; }
  .footer-nav-left { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 移动端抽屉是白底，首页导航文字必须回到深色，否则白字白底看不见 */
  body[data-hero] .site-header.nav-open .nav-menu .nav-item,
  body[data-hero] .site-header.nav-open .nav-menu a { color: var(--text-secondary); }
}
@media screen and (max-width: 767px) {
  .section-content { padding-top: 48px !important; padding-bottom: 48px !important; }
  .section-title h2 { font-size: 26px; }
  .site-nav { height: 64px; }
  .nav-icon img { height: 30px; }
  .banner-cont .swiper-slide { height: 280px !important; }
  /* 首页 Hero 保持满屏：各断点高度统一由 css/index.css 管理，这里不再给
     .hero / .swiper-wrapper 加任何留白（此前 .hero 的 40px 上下 padding 和
     wrapper 的左右 12px 会把满屏轮播顶出白边） */
  .server-banner .section-content, .server-banner2 .section-content { padding-top: 40px !important; padding-bottom: 40px !important; }
  .banner-s .banner-list { display: grid; grid-template-columns: 1fr 1fr; }
  .banner-s .banner-list .banner-item { width: auto; padding: 18px; }
  .product-item { margin-bottom: 14px; }
  .product-price-box { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-nav-left { grid-template-columns: 1fr 1fr; }
  .footer-promise .promise { grid-template-columns: 1fr 1fr; }
  .footer-record { flex-direction: column; }
  .aside-tools { right: 10px; bottom: 66px; }
  .tools-item { width: 42px; height: 42px; }
  .tools-box { right: 50px; }
  .nav-content { grid-template-columns: 1fr; }
}

/* Document module refinement */
.document-nav {
  background: var(--bg-page) !important;
}
.document-nav .section-content {
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}
.docement-list .document-box {
  width: calc(33.333% - 20px);
  min-height: 280px;
  margin: 10px;
  padding: 26px;
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all .22s ease;
}
.docement-list .document-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(26,86,219,.20) !important;
}
.docement-list .document-box .document-header {
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 16px;
}
.docement-list .document-box .document-header h5 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
}
.docement-list .document-box a {
  height: 34px;
  line-height: 34px;
  color: var(--text-secondary);
}
.docement-list .document-box a:hover {
  color: var(--color-primary) !important;
}
.document-details .section-content {
  padding-top: 36px !important;
  padding-bottom: 56px !important;
}
.document-details .document-details-left {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 24px;
  min-height: 420px;
}
.document-details-list .document-details-item,
.search-result .document-details-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--divider-color);
}
.document-details-list .document-details-item:last-child,
.search-result .document-details-item:last-child {
  border-bottom: 0;
}
.document-details-item h5 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
}
.document-details-item h5:hover { color: var(--color-primary); }
.document-details-item p { margin: 0; color: var(--text-secondary); line-height: 1.75; }
.document-details-item .keywords, .keyword { color: var(--color-primary); }
.document .page .nav-left { background: #fff !important; border-right: 1px solid var(--border-color); }
.document .page .nav-head { background: #fff !important; border-bottom: 1px solid var(--border-color); }
.document .page .search-input { border: 1px solid var(--border-color) !important; border-radius: var(--radius-s) !important; overflow: hidden; }
.document .page .search-input input { border: 0 !important; box-shadow: none !important; }
.document .page .nav-div { background: #fff !important; }
.document .page-content { background: #fff; border-radius: var(--radius-m); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
.document-details .page { background: transparent; }
.document-view .page-content { background: #fff; border-radius: var(--radius-m); border: 1px solid var(--border-color); padding: 28px; }

@media screen and (max-width: 991px) {
  .docement-list .document-box { width: calc(50% - 20px); }
  .document .page .nav-left { position: static !important; width: 100% !important; height: auto !important; padding-top: 0; }
  .document .page .nav-head { position: static !important; height: auto !important; }
  .document .page .page-content { display: block !important; }
}
@media screen and (max-width: 767px) {
  .docement-list .document-box { width: calc(100% - 20px); min-height: auto; }
}

/* Document landing */
.docs-hero { background: var(--gradient-primary) !important; color: #fff; border: 0 !important; }
.docs-hero .section-content { padding-top: 64px !important; padding-bottom: 64px !important; }
.docs-hero-content { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.docs-hero h1 { margin: 8px 0 10px; color: #fff; font-size: 40px; line-height: 1.25; }
.docs-hero .server-banner-desc2 { color: rgba(255,255,255,.78) !important; max-width: 620px; }
.docs-eyebrow { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; }
.docs-search { width: 380px; max-width: 100%; display: flex; background: #fff; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-hover); }
.docs-search input { flex: 1; height: 48px; border: 0 !important; padding: 0 16px; box-shadow: none !important; }
.docs-search .search-btn { width: 96px; height: 48px; display: grid; place-items: center; background: var(--color-primary); color: #fff; cursor: pointer; }
.docs-section-title { text-align: left; margin-bottom: 24px; }
.docs-section-title .section-desc { margin-top: 8px; }
@media screen and (max-width: 767px) {
  .docs-hero-content { flex-direction: column; align-items: flex-start; }
  .docs-search { width: 100%; }
  .docs-hero h1 { font-size: 30px; }
}

/* ==========================================================================
   产品页统一优化 V2
   覆盖 cloud / dedicated / domain / ssl / sms / trademark / trusteeship / rent / icp
   ========================================================================== */
.product-banner,
.server-banner.product-banner,
.server-banner.banner-ssl,
.server-banner.banner-sms,
.server-banner.banner-trademark,
.server-banner.banner-trusteeship,
.server-banner.banner-rent,
.server-banner.banner-icp,
.server-banner.banner-domain {
  min-height: 320px;
  display: flex;
  align-items: center;
  padding: 0 !important;
}
.product-banner .section-content,
.server-banner.product-banner .section-content {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.product-banner h1,
.server-banner h1 {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: 650;
}
.product-banner .server-banner-desc,
.server-banner .server-banner-desc,
.server-banner-desc2 {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.8;
}

/* 统一卡片 */
.standards-box,
.price .price-item,
.product-cloud .cloud-box,
.product-performance .performance-item,
.product-flow .flow-box,
.apply .apply-left,
.apply .apply-right,
.domain-register .register-box,
.domain-info .domain-desc-box,
.activities .activities-item,
.shop-list .shop-item,
.tabs-efficient .tab-box {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all .22s ease !important;
  box-sizing: border-box;
}
.standards-box:hover,
.price .price-item:hover,
.product-cloud .cloud-box:hover,
.product-performance .performance-item:hover,
.product-flow .flow-box:hover,
.activities .activities-item:hover,
.shop-list .shop-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(26,86,219,.22) !important;
}
.standards-box h4,
.product-cloud .cloud-box h4,
.product-performance .performance-item h4,
.product-flow .flow-box h5,
.price .price-item h5 {
  color: var(--text-primary);
  font-weight: 600;
}
.standards-box .title-desc,
.product-cloud .cloud-box .title-desc,
.product-performance .performance-item .desc,
.product-flow .flow-box p {
  color: var(--text-tertiary) !important;
}
.standards-box .money,
.price .price-item .money,
.money {
  color: var(--color-price) !important;
  font-weight: 600;
}

/* 产品配置区 */
.product-hot .hot,
.hot {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 18px !important;
}
.gallery-thumbs .swiper-slide.title {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  border-radius: var(--radius-s) !important;
  padding: 10px 16px !important;
  transition: all .2s ease;
}
.gallery-thumbs .swiper-slide.title.active {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.product-country {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 12px;
}
.product-country .country-item {
  padding: 8px 14px;
  border-radius: var(--radius-s) !important;
  background: #F6F8FC;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: all .2s ease;
}
.product-country .country-item:hover,
.product-country .country-item.active {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
.product-des {
  padding: 10px 0 18px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.product-item {
  border-radius: var(--radius-m) !important;
  overflow: hidden;
}
.product-item .product-item-top {
  padding: 22px 24px 0 !important;
}
.product-item .product-item-bottom {
  padding: 18px 24px 22px !important;
  background: #fff !important;
}
.product-item .product-active-text {
  margin: 0 24px;
}
.product-config p {
  margin: 9px 0 !important;
}
.config-lable { color: var(--text-tertiary) !important; }
.config-value { color: var(--text-primary) !important; }
.config-time > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 30px;
  padding: 0 10px;
  margin-right: 8px;
  border-radius: var(--radius-s);
  background: #F6F8FC;
  color: var(--text-secondary);
  cursor: pointer;
}
.config-time > span.active,
.config-time > span:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
.product-text { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.product-price-box {
  margin-top: 14px;
  padding-top: 16px !important;
  border-top: 1px solid var(--divider-color) !important;
}
.product-price-box .price {
  color: var(--color-price) !important;
  font-size: 24px;
  font-weight: 600;
}
.product-price-box .origin-price {
  color: var(--text-tertiary) !important;
}

/* 域名搜索 / 注册 */
.domain-info .domain-desc-box,
.input-search.jr-domain-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px !important;
  border-radius: var(--radius-m) !important;
  background: #fff !important;
  box-shadow: var(--shadow-hover) !important;
}
.domain-info .domain-desc-box input,
.input-search input {
  height: 44px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.input-search .search-btn,
.domain-info .domain-desc-box .search-btn,
.banner-document .search-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-s) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.input-search .input-search-select {
  height: 40px;
  border-radius: var(--radius-s);
  background: #F6F8FC;
  padding: 0 10px;
}
.input-search .select-box {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-hover);
}
.search-btn:hover { background: var(--color-primary-hover) !important; }

/* 价格 / 规格卡片 */
.price.fboxRow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.price .price-item {
  padding: 24px !important;
  margin: 0 !important;
}
.price .price-item .money { font-size: 22px !important; }
.price .price-item .btn,
.standards-box .btn {
  min-width: 96px;
}
.standards.fboxRow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.standards-box {
  padding: 26px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.standards-box .money-box {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--divider-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 产品优势 / 高效能 */
.product-performance .performance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.product-performance .performance-item {
  padding: 24px !important;
}
.product-performance .performance-item img {
  max-height: 150px;
  width: auto;
  margin-bottom: 12px;
}
.product-cloud .cloud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.product-cloud .cloud-box {
  padding: 24px !important;
}
.product-cloud .cloud-box img {
  max-height: 120px;
  width: auto;
}

/* 流程 */
.product-flow .flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.product-flow .flow-box {
  padding: 26px 22px !important;
  margin: 0 !important;
  text-align: center;
}
.product-flow .flow-box::before { display: none !important; }
.product-flow .flow-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}
.product-flow .flow h5 { margin: 0 0 8px; }

/* ICP / 申请 */
.apply {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.apply .apply-left,
.apply .apply-right {
  padding: 26px !important;
}
.apply .apply-left img { max-width: 100%; height: auto; }

/* 活动 */
.activities .activities-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 0 !important;
}
.activities .activities-item {
  margin: 0 !important;
  padding: 22px !important;
  overflow: hidden;
}
.activities .activities-item:hover { transform: translateY(-3px); }
.activities .activities-item a { display: block; }

/* 域名购买 */
.domain-shop .shop-head,
.domain-shop .shop-head + div {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.domain-shop .shop-head input,
.domain-shop .shop-head select {
  height: 40px;
}
.domain-shop .shop-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}
.domain-shop .shop-right .shop-car {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.shop-list .shop-item {
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
}
.shop-left .table-price,
.shop-left .icon-box .table-price {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-hover);
}

/* 响应式 */
@media screen and (max-width: 1199px) {
  .price.fboxRow,
  .standards.fboxRow,
  .activities .activities-list {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media screen and (max-width: 991px) {
  .price.fboxRow,
  .standards.fboxRow,
  .product-cloud .cloud,
  .product-performance .performance,
  .product-flow .flow,
  .apply,
  .activities .activities-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .domain-shop .shop-content { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .product-banner h1,
  .server-banner h1 { font-size: 30px; }
  .product-banner .section-content,
  .server-banner.product-banner .section-content { padding-top: 48px !important; padding-bottom: 48px !important; }
  .price.fboxRow,
  .standards.fboxRow,
  .product-cloud .cloud,
  .product-performance .performance,
  .product-flow .flow,
  .apply,
  .activities .activities-list {
    grid-template-columns: 1fr;
  }
  .input-search { flex-wrap: wrap; }
  .input-search input { min-width: 180px; }
  .standards-box { min-height: auto; }
}

/* ==========================================================================
   内容页统一优化：解决方案 / 合作伙伴 / 资讯 / 公司支持
   ========================================================================== */
.solution-trend .trend-box,
.solution-scene .scene-box,
.solution-advantage .advantage-box,
.agent-advantage .advantage-box,
.agent-support .support-box,
.agent-condition .cloud-box,
.agent-flow .flow-box,
.document-announce .announce-list .announce-item,
.news-box,
.news-index-banner .news-banner-cont,
.contact-support .support-box,
.server-sustain .sustain-box,
.product-phonation .phonation,
.about-details .about-details-box,
.about-reason .reason-box,
.about-box .box-list .box-item,
.about-example .box-list .box-item,
.about-custom .custom-box {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all .22s ease !important;
  box-sizing: border-box;
}
.solution-trend .trend-box:hover,
.solution-scene .scene-box:hover,
.solution-advantage .advantage-box:hover,
.agent-advantage .advantage-box:hover,
.agent-support .support-box:hover,
.agent-flow .flow-box:hover,
.document-announce .announce-list .announce-item:hover,
.news-box:hover,
.contact-support .support-box:hover,
.server-sustain .sustain-box:hover,
.about-box .box-list .box-item:hover,
.about-example .box-list .box-item:hover,
.about-custom .custom-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(26,86,219,.22) !important;
}
.solution-trend .trend-box,
.solution-scene .scene-box,
.solution-advantage .advantage-box,
.agent-advantage .advantage-box,
.agent-support .support-box,
.agent-flow .flow-box,
.document-announce .announce-list .announce-item,
.contact-support .support-box,
.server-sustain .sustain-box,
.product-phonation .phonation,
.about-details .about-details-box,
.about-reason .reason-box,
.about-box .box-list .box-item {
  padding: 24px !important;
}

/* 解决方案 */
.solution-trend .trend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.solution-trend .trend-box img,
.solution-scene .scene-box img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s);
}
.solution-advantage .advantage,
.solution-advantage .advantage-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.solution-future .solution-contact {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.solution-future .solution-contact .form-group input,
.solution-future .solution-contact .form-group textarea {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-s) !important;
}

/* 合作伙伴 */
.agent-advantage .advantage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.agent-advantage .advantage-right .advantage-box {
  margin-bottom: 14px;
}
.agent-support .support {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.agent-condition .cloud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.agent-flow .flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.agent-flow .flow-box {
  text-align: center;
  padding: 26px 20px !important;
}
.agent-flow .flow-box .number {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.agent-question .question {
  background: transparent !important;
}
.agent-question .item {
  margin-bottom: 12px !important;
}

/* 资讯 / 公告 */
.document-announce .announce-list {
  display: grid;
  gap: 12px;
}
.document-announce .announce-list .announce-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px !important;
}
.news-index-banner .news-banner-cont {
  padding: 22px !important;
}
.news-list-index .news-box {
  padding: 20px !important;
}
.news-index-banner .news-banner-filter a {
  border-radius: var(--radius-s) !important;
}
.announce-details {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 32px !important;
}
.announce-details .announce-title {
  color: var(--text-primary);
  font-size: 28px;
  line-height: 1.4;
}
.announce-details-cont {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.9;
}

/* 公司 / 服务 */
.contact-support .support {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.server-sustain .sustain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.about-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.about-reason .reason,
.about-together .reason-box,
.about-box .box-list,
.about-example .box-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.about-time .time-line {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.about-custom .custom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

@media screen and (max-width: 991px) {
  .solution-trend .trend,
  .solution-advantage .advantage,
  .solution-advantage .advantage-list,
  .agent-support .support,
  .agent-flow .flow,
  .contact-support .support,
  .server-sustain .sustain,
  .about-reason .reason,
  .about-together .reason-box,
  .about-box .box-list,
  .about-example .box-list,
  .about-custom .custom {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .agent-advantage .advantage,
  .about-details { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .solution-trend .trend,
  .solution-advantage .advantage,
  .solution-advantage .advantage-list,
  .agent-support .support,
  .agent-condition .cloud,
  .agent-flow .flow,
  .contact-support .support,
  .server-sustain .sustain,
  .about-reason .reason,
  .about-together .reason-box,
  .about-box .box-list,
  .about-example .box-list,
  .about-custom .custom {
    grid-template-columns: 1fr;
  }
  .announce-details { padding: 22px !important; }
  .announce-details .announce-title { font-size: 22px; }
}