/* 由 tools/build-theme-assets.py 自动生成，请勿直接修改。
   用途：站点外壳：头 / 脚 / 悬浮
   改了 css/split/*.css 或 js/split/*.js 之后重新生成。 */

/* ===== header.css ===== */


.site-header {
  --hdr-ink: #181818;
  --hdr-ink-soft: #181818;
  --hdr-hover-bg: var(--brand-light);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;

  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background-color .45s var(--ease),
              border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;

  background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(var(--translucentdegree, 6px));
  -webkit-backdrop-filter: blur(var(--translucentdegree, 6px));
  transition: backdrop-filter .45s var(--ease),
              -webkit-backdrop-filter .45s var(--ease);
}

/* 购物车等非 web 模板页面：始终实白，不要半透明玻璃底 */
.site-header--solid {
  background: #fff;
  border-bottom-color: var(--line);
}
.site-header--solid::before {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.nav-closing {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: none;
}
.site-header.nav-closing::before {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.site-header.is-stuck,
.site-header:hover {
  background: #fff;
  border-bottom-color: var(--line);

  box-shadow: none;
}

html.drawer-open .site-header {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: none;
}
html.drawer-open .site-header::before {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.site-header:is(.is-stuck, :hover)::before {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.site-header__row {
  display: flex; align-items: center; height: 62px;
  padding: 0 0 0 40px; gap: 0;
  transition: height .3s var(--ease), opacity .25s var(--ease);
}

.site-header.is-suppressed { pointer-events: none; }
.site-header.is-suppressed .site-header__row {
  height: 0; opacity: 0;
  transition: none;
}

.site-logo { flex-shrink: 0; display: flex; align-items: center; height: 62px; }
/* 固定高度：图片还没加载完时也不会塌成 0，避免整行挤在一起再跳一下。
   logo 高度跟顶栏一致（62px），上下不留白 */
.site-logo img {
  height: 62px; width: auto; max-height: 62px;
  object-fit: contain;
}
.site-logo__text { font-size: 20px; font-weight: 800; color: var(--hdr-ink); letter-spacing: -0.02em; }

.site-nav {
  position: relative;
  display: flex; align-items: stretch; gap: 14px; margin-left: 40px; height: 62px;
}

.site-nav__ink {
  position: absolute; left: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--brand);
  width: var(--ink-w, 0px); opacity: 0;
  transform: translateX(var(--ink-x, 0));
  transition: transform .3s var(--ease), width .3s var(--ease), opacity .25s;
  pointer-events: none;
}
.site-nav__ink.is-on { opacity: 1; }
/* 重新出现时先无动画定位到目标项，避免从上次的位置滑过来 */
.site-nav__ink.no-anim { transition: none !important; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link {
  display: flex; align-items: center; gap: 4px;
  height: 62px; padding: 0 10px;
  font-size: 14px; font-weight: 500; color: var(--hdr-ink-soft);
  transition: color .2s;

  cursor: default; user-select: none;
  /* 锁死行高：Montserrat 字体到位前后文字高度不一样，会让整行先挤后跳 */
  line-height: 62px;
}

.site-nav__link:hover { color: var(--hdr-ink-soft); }
.site-nav__link.is-active { color: var(--brand); }

.mega {
  position: fixed; top: 62px; left: 0; right: 0;
  z-index: 99;
  background: linear-gradient(to right, #f2f4f7 0 50%, #fff 50% 100%);
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;

  transition: grid-template-rows .38s var(--ease), visibility 0s linear .38s;
}

.mega.is-switching { transition: none !important; }
.site-nav__item--has-child.is-open .mega,
.site-nav__item--has-child:focus-within .mega {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .38s var(--ease), visibility 0s linear 0s;
}

.mega__bg { min-height: 0; overflow: hidden; }
.mega__wrap { max-width: 1680px; margin: 0 auto; }
.mega__container {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 718px; max-height: 718px;
  background: #fff;

  box-shadow: none;
}

.mega__container::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 6px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(49, 49, 49, .10), rgba(49, 49, 49, 0));
}

.mega--sol .mega__container {
  min-height: 350px; max-height: 350px;
}

.mega__left {
  flex: 0 0 268px; width: 268px;
  min-height: 0; display: flex; flex-direction: column;
  background: #f7f9fd url(../../img/header/mega-left-bg.png) no-repeat 0 0 / cover;
}
.mega__left-inner { padding: 34px 0; min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.mega__info-title {
  margin: 0 0 18px; padding: 0 32px;
  font-size: 28px; font-weight: 100; color: #000; line-height: 1.3;
  flex: 0 0 auto;
}

.mega__info-desc {
  margin: 20px 0 12px; padding: 0 32px;
  font-size: 13px; font-weight: 400; color: #181818; line-height: 1.6;
  flex: 0 0 auto;
}

.mega__info { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }

.mega__tabs { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.mega__list { overflow-y: auto; min-height: 0; }

.mega__list::-webkit-scrollbar, .mega__line::-webkit-scrollbar { width: 6px; }
.mega__list::-webkit-scrollbar-thumb, .mega__line::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18); border-radius: 3px;
}
.mega__list::-webkit-scrollbar-track, .mega__line::-webkit-scrollbar-track { background: transparent; }

.mega__cat { height: 42px; }
.mega__cat a {
  display: flex; align-items: center;
  height: 42px; padding: 0 32px;
  font-size: 14px; color: #333; cursor: pointer;
  transition: color .2s;
}

.mega__cat a:hover { color: #333; background: transparent; }
.mega__cat a > span {
  position: relative;
  font-size: 14px;
}
.mega__cat.active a { color: #0052d9; }
.mega__cat.active a > span { font-weight: 500; }

.mega__cat a > span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px; background: #0052d9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s var(--ease);
}
.mega__cat.active a > span::after { transform: scaleX(1); }

.mega__cat.no-anim a > span::after { transition: none !important; }

.mega__mid { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mega__line { padding: 28px 32px; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.mega__pane { display: none; }
.mega__pane.active { display: block; }
.mega__cols { display: flex; gap: 24px; }
.mega__col { flex: 1 1 0; min-width: 0; }

.mega__group-title {
  margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: #6b7688;
}
.mega__empty { padding: 40px 0; font-size: 14px; color: #98a1b0; }

.mega__items {
  /* 单卡最小宽 230px、间距 28×20：与 cnmrnmb.online 的产品卡网格一致 */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 20px;
}

.mega--sol .mega__items {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 24px;
}
.mega--sol .mega__item {
  height: auto; min-height: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.mega--sol .mega__item:hover {
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 3px rgba(49, 49, 49, .12);
  transform: translateY(-1px);
}

.mega--sol .mega__left-inner { padding: 20px 28px 20px 40px; }
.mega--sol .mega__info-title { padding: 0; margin-bottom: 0; line-height: 1.35; }
.mega--sol .mega__info-desc { padding: 0; line-height: normal; }
.mega--sol .mega__cat a { padding: 0; }

.mega--sol .mega__line { padding: 20px 32px 24px; }
.mega--sol .mega__item { padding: 20px 36px 20px 20px; }
.mega--sol .mega__item-desc { line-height: 26px; min-height: 52px; max-height: 52px; }

.mega--sol .mega__item-title { align-items: flex-start; }
.mega--sol .mega__item-name { line-height: normal; }

.mega__item-tag {
  display: block; flex-shrink: 0;
  margin-left: 8px; padding: 1px 4px;
  font-size: 12px; font-weight: 500; line-height: normal; color: #f5222d;
  background: transparent;
  border: 1px solid #f5222d; border-radius: 0;
  white-space: nowrap;
}

.mega--eco .mega__container { min-height: 283px; max-height: 283px; }
.mega--eco .mega__items { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 24px; }

.mega--about .mega__container { min-height: 280px; max-height: 280px; }

.mega__search { padding: 28px 32px 0; }
.mega__search-flex {
  display: flex; flex-direction: row;
  align-items: flex-end; justify-content: flex-start;
  width: calc(100% - 324px);
}

.mega__search-box {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  padding: 0 10px;
  background: #f5f6f8;
  border-radius: 1px;
}
.mega__search-icon {
  flex: 0 0 auto;
  margin-right: 5px;
  font-size: 20px; line-height: 1;
  color: var(--brand);
}
.mega__search-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  height: 34px;
  font-size: 12px; line-height: 34px;
  color: var(--ink);
}
.mega__search-input::placeholder { color: #98a1b0; }

.mega__search-tags {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: flex-start;
  margin-left: 20px;
  list-style: none; padding: 0;
}
.mega__search-tag {
  display: block;
  margin-left: 10px; padding: 0 17px;
  line-height: 34px;
  background: #f1f2f5; border-radius: 1px;
  font-size: 12px; font-weight: 500; color: #000;
  white-space: nowrap;
  transition: background-color .3s ease-out, color .3s ease-out;
}
.mega__search-tag:hover { background: var(--brand); color: #fff; }

/* 分组卡片：1:1 照 33y.cn 的 .list-product-content
   （124px 高、rgba(240,244,255,.24) 底、0 1px 3px rgba(49,49,49,.02) 投影、4px 圆角；
    hover 变白底 + 0 1px 3px rgba(49,49,49,.12) + shake 上浮 1px 动画） */
.mega__item {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  overflow: hidden;
  /* 卡片高度交给内容（窄卡片时描述可换行），同参考站 height:auto */
  height: auto; min-height: 124px;
  padding: 20px;
  background: rgba(240, 244, 255, .24);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(49, 49, 49, .02);
  transition: background-color .2s, box-shadow .2s;
}
.mega__item:hover {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(49, 49, 49, .12);
  animation: shake 1s ease 0s 1;
}
@keyframes shake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

.mega__item-text { min-width: 0; width: 100%; }

/* 标题行：照参考站 .list-product-title（flex 行、align-items:flex-end、margin-bottom 10px、lh 1.5） */
.mega__item-title {
  display: flex; flex-direction: row;
  justify-content: flex-start; align-items: flex-end;
  margin: 0 0 10px;
  max-width: 100%;
  min-width: 0;
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: #181818;
  transition: color .3s ease-out;
}

.mega__item-name {
  display: block; min-width: 0; max-width: 100%;
  font-size: 14px; font-weight: 500; line-height: 1.5; color: #181818;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .3s ease-out;
}
.mega__item:hover .mega__item-name { color: #0052d9; }
/* 国旗容器：照参考站 .list-product-img（margin-right 10px）。
   高度锁成标题行高 21px 并垂直居中，保证「有国旗」和「没国旗」的卡片文字顶边齐平
   （国旗 22px 比行高多 1px，直接内联会把整行撑高、文字被压低 7px） */
.mega__item-img {
  flex: 0 0 auto;
  margin-right: 10px;
  display: flex; align-items: center;
  height: 21px;
}
/* 分组名「CN|测速云1区」：竖线前的代码换成 /upload/common/country/ 里的国旗
   尺寸照参考站 .list-product-img-country：34x22、object-fit:contain、2px 圆角 */
.mega__item-flag {
  display: inline-block;
  width: 34px; height: 22px;
  object-fit: contain;
  border-radius: 2px;
}
.mega__item-name .md-flag-wrap { display: inline-flex; align-items: center; min-width: 0; }

.mega__item-hot {
  display: block; flex-shrink: 0;
  margin-left: 8px; padding: 1px 4px;
  font-size: 12px; font-weight: 500; line-height: 18px; color: #ff2626;
  background: transparent;
  border: 1px solid #ff2626; border-radius: 0;
  white-space: nowrap;
}
.mega__item-hot[hidden] { display: none; }

/* 描述：照参考站 .list-product-desc（13px / lh 26px / rgba(0,0,0,.65) / 两行省略） */
.mega__item-desc {
  font-size: 13px; font-weight: 400; line-height: 26px;
  color: rgba(0, 0, 0, .65);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color .3s ease-out;
}
.mega__item:hover .mega__item-desc { color: #181818; }

.site-account {
  display: flex; align-items: center; gap: 0;
  flex-shrink: 0; margin-left: auto; height: 62px;
}
.site-account__link {
  display: inline-flex; align-items: center; height: 62px;
  padding: 0 14px 0 10px; font-size: 14px; color: var(--hdr-ink-soft);
}
.site-account__link:hover { color: var(--brand); }
.site-account__sep {
  width: 1px; height: 14px; margin: 0 10px;
  background: rgba(120, 130, 150, .45);
}

.site-account__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 27px 0 22px; margin-left: 0;
  background: #0056ff; color: #fff !important;
  font-size: 14px; font-weight: 500;
}

.site-account__cta::before {
  content: "";
  width: 14px; height: 38px; margin-right: 5px;
  display: inline-block; vertical-align: top;
  background: url(../../img/header/register.png) right center no-repeat;
}
.site-account__cta:hover {
  background: #ffc107;
  color: #fff !important;
}

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0 9px;

  border: 0; border-radius: 0;
  background: none;
}
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink-2);
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.header-avatar { display: none; }
/* 手机端头像：桌面不显示，只在 ≤960 的 responsive.css 里打开 */
.m-avatar { display: none; }

/* ===== 登录态：用户名 + 头像 + 下拉（实测尺寸，4px 圆角） ===== */
.site-user {
  position: relative;
  height: 62px;
  flex-shrink: 0;
  margin-left: 20px;
}

/* .site-user__head：整块可点，高度撑满 header */
.site-user__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  margin-right: 24px;
  cursor: pointer;
}

/* .site-user__name：用户名 + 下拉箭头 */
.site-user__name {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  margin-right: 8px;
  white-space: nowrap;
}

/* .site-user__txt：min-width 置 0，短用户名时不会被拉开 */
.site-user__txt {
  max-width: 100px;
  min-width: 0;
  margin-right: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #181818;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  transition: color .12s ease-out;
}
/* 字体变蓝跟随「下拉是否展开」，不跟随鼠标落在头像上 */
.site-user.is-open .site-user__txt { color: #0052d9; }

/* .site-user__chev：下拉箭头 */
.site-user__chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
/* JS 动画期间兜底：避免 hover 规则抢先显示 */
.site-user__dropdown.is-sliding { display: block; overflow: hidden; }

/* .site-user__avatar：头像 32×32，圆角 4.5px */
.site-user__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  border-radius: 4.5px;
  overflow: hidden;
  background: #0052d9;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.site-user__avatar b { font-weight: 600; }
.site-user__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* .site-user__dropdown：右缘与「用户名 + 箭头」右缘对齐（right:64px） */
.site-user__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 64px;
  margin-top: 5px;
  min-width: 170px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .06);
  white-space: nowrap;
  z-index: 95;
  /* 拉出/收回由 user.js 做高度动画 */
}

/* .site-user__dropdown-container：高度动画容器 */
.site-user__dropdown-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  z-index: 1001;
}
.site-user__dropdown-container > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 40px 10px 20px;
  color: #5f7292;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
}
.site-user__dropdown-container > a:hover { background: #0052d9; color: #fff; }
.site-user__dropdown-container > a > i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.site-user__dropdown-container > a > i img { display: block; width: 24px; height: 24px; }
.site-user__dropdown-container > a:hover > i img { filter: brightness(0) invert(1); }
.site-user__realname { margin-left: 2px; color: #3dae4e; font-size: 14px; font-style: normal; }
.site-user__is-realname { margin-left: 2px; color: #ff5722; font-size: 14px; font-style: normal; }
.site-user__dropdown-container > a:hover .site-user__realname,
.site-user__dropdown-container > a:hover .site-user__is-realname { color: #fff; }



.m-drawer { display: none; }

/* 顶栏菜单角标：贴在菜单文字右上角（后台「顶栏编辑」可配文案与颜色） */
.site-nav__link { position: relative; }
.nav-ribbon {
  position: absolute;
  /* 相对菜单文字居中后往上抬 1.45 个自身高度：贴在文字右上角，
     不依赖顶栏高度（60 还是 64 都不会飘出去） */
  top: 50%;
  right: -16px;
  transform: translateY(-172%);
  padding: 0 4px;
  height: 14px;
  line-height: 14px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
.nav-ribbon--new  { background: var(--brand, #206bc4); }
.nav-ribbon--hot  { background: #e8213a; }
.nav-ribbon--warm { background: #f4651b; }

/* ===== footer.css ===== */


.site-footer {
  padding: 0;
  background: #08111d;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 21px;
}

.site-footer > .container { max-width: 1080px; padding-top: 48px; padding-bottom: 30px; }

.site-footer__head {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer__feat { display: flex; align-items: center; margin-bottom: 14px; }
.site-footer__f-icon {
  width: 48px; height: 48px; flex: 0 0 auto;
  margin-right: 13px;
  filter: invert(1) hue-rotate(180deg);
  opacity: .88;
}
.site-footer__feat h5 {
  color: #fff; font-size: 16px; font-weight: 600;
  line-height: 19.2px; margin: 0;
}
.site-footer__feat p {
  margin: 0;
  font-size: 12.25px; line-height: 20.825px;
  color: rgba(255,255,255,.52);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr)) minmax(252px, auto);
  gap: 12px 3px; margin-top: 18px;
}
.site-footer__col h4 {
  color: #fff; font-size: 13px; font-weight: 600;
  line-height: 19px; margin-bottom: 4px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { line-height: 22px; margin-bottom: 0; }
.site-footer__col li a {
  color: rgba(255,255,255,.56); font-size: 11.5px;
  font-weight: 400; text-decoration: none;
}
.site-footer__col li a:hover { color: #fff; }

.site-footer__right {
  border-left: 1px solid rgba(255,255,255,.1); padding-left: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.site-footer__qrs {
  display: grid; grid-template-columns: repeat(2, 88px);
  gap: 10px; text-align: center; justify-content: center;
}
.site-footer__qr img {
  width: 88px; height: auto;
  margin: 0 auto 4px; padding: 3px;
  background: #fff; border-radius: 4px;
}
.site-footer__qr p { font-size: 11.5px; line-height: 18px; color: rgba(255,255,255,.52); }
.site-footer__contact { margin-top: 8px; font-size: 11.5px; line-height: 18px; color: rgba(255,255,255,.52); }
.site-footer__contact a:hover { color: #fff; }

.site-footer__col ul li a { color: #cccccc; font-weight: 400; text-decoration: none; }
.site-footer__col ul li a:hover { color: #ffffff; }

.site-footer__contact a.site-footer__qq,
.site-footer__contact a.site-footer__mail { color: #0d6efd; text-decoration: none; }
.site-footer__contact a.site-footer__qq:hover,
.site-footer__contact a.site-footer__mail:hover { color: #0a58ca; text-decoration: none; }

.site-footer__bottom {
  margin-top: 24px; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 14px; color: rgba(255,255,255,.48);
}
.site-footer__bottom .copyright {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; text-align: left; margin: 0;
  color: rgba(255,255,255,.48);
}

.site-footer__bottom .copyright-main {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; min-width: 0;
}
.site-footer__bottom .copyright-main > p { margin: 0; }
.site-footer__bottom .beian-info {
  display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;
  margin-top: 0; gap: 6px 18px;
}
.site-footer__bottom .beian-link {
  display: flex; align-items: center; color: rgba(255,255,255,.48);
  text-decoration: none; transition: color .3s;
}
.site-footer__bottom .beian-link:hover { color: #fff; }
.site-footer__bottom .beian-link img { height: 20px; margin-right: 5px; }
.site-footer__bottom .beian-link span { font-size: 14px; }
.site-footer__bottom .nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-footer__bottom .nav-link { padding: 0; color: rgba(255,255,255,.48); font-size: 14px; }
.site-footer__bottom .nav-link:hover { color: #fff; }
.site-footer__bottom .stick { margin: 0 12px; width: 1px; height: 14px; background: rgba(255,255,255,.1); }

.mobile-nav { display: none; }
@media (max-width: 768px) {
  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 997;
    display: flex; background: #fff; padding: 12px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
  }
  .mobile-nav .nav-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    color: #666; text-decoration: none; font-size: 12px;
  }
  .mobile-nav .nav-item svg { margin-bottom: 4px; }

  .mobile-nav .nav-item .md { display: block; font-size: 20px; line-height: 1; margin-bottom: 4px; }
  .mobile-nav .nav-item:hover, .mobile-nav .nav-item:active { color: #007bff; }

}

.announce-toggle {
  position: fixed; left: 0; bottom: 16px;
  font-size: 12px; font-weight: 500;

  font-family: "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #0052d9, #1466ed);
  color: #fff;
  text-align: center;
  cursor: pointer;

  padding: 10px 6px 10px 10px;

  opacity: 1; visibility: visible;
  transition: opacity .2s, visibility 0s linear 0s;
  letter-spacing: 5px;
  text-orientation: upright;
  writing-mode: vertical-lr;
  border-radius: 0 3px 3px 0;
  z-index: 999;
  border: 0;
}

.announce-toggle.is-hide { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }

.announce-panel {
  max-width: 460px; min-width: 350px;
  position: fixed; left: -100%; bottom: 16px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  transition: left .3s;
  z-index: 1000;
  border-radius: 4px;
  overflow: hidden;
}
.announce-panel.visible { left: 0; }

.announce-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 10px 20px;
  background: #edeef3; color: #6e6e6e;
}

.announce-panel__title { font-size: 16px; font-weight: 700; color: #000; }

.announce-panel__close { font-size: 18px; cursor: pointer; color: #000; background: none; border: 0; padding: 0; }

.announce-panel__body { padding: 10px 14px; font-size: 13px; color: #333; }

.announce-panel__gold {
  background: #fff; border: 1px solid #d4af37;
  padding: 14px 16px; margin: 10px 0; text-align: center;
}

.announce-panel__body p { color: #000; line-height: 1.8; font-size: 12px; font-weight: 400; margin: 0; }
.announce-panel__body p a { color: #0052d9; }

.announce-panel__body hr { margin: 0 0 10.4px; }

.announce-panel__foot { display: flex; flex-direction: row-reverse; }

.announce-panel__detail, .announce-panel__dismiss {
  font-size: 12px; color: #fff;
  background: #0052d9; border: 0; border-radius: 4px;
  text-align: center; cursor: pointer;
  transition: all .3s ease-out;
  padding: 10px 20px; font-weight: 400;
  text-decoration: none; display: inline-block;
}

.announce-panel__dismiss { background: #ccc; margin-right: 10px; }

.popup-modal {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;

  visibility: hidden;
  transition: none;
}
/* is-closing：关闭动画期间保持可见，动画结束再加 is-closed 隐藏 */
.popup-modal.is-open,
.popup-modal.is-closing { visibility: visible; }

.popup-modal.is-closed { display: none; }

.popup-modal__mask {
  position: absolute; inset: 0;
  background: rgba(9, 18, 44, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.popup-modal.is-open .popup-modal__mask { opacity: 1; }

.popup-modal__box {
  position: relative;
  width: 100%; max-width: 460px;
  background: #fff;

  border-radius: 4px;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-64px);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.popup-modal.is-open .popup-modal__box { opacity: 1; transform: translateY(0); }

/* 动画未开始（首帧）时不做过渡，避免页面加载瞬间闪一下 */
.popup-modal.is-closed .popup-modal__box { transition: none; }

.popup-modal__content {
  max-height: 52vh;
  overflow-y: auto;
}
.popup-modal__content p { color: #000; line-height: 1.8; font-size: 12px; font-weight: 400; margin: 0 0 8px; }
.popup-modal__content p a { color: #0052d9; }
.popup-modal__content img { max-width: 100%; height: auto; }

.popup-modal__box .announce-panel__close {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  line-height: 1;
}

@media (max-width: 767px) {
  .announce-toggle { bottom: calc(68px + 18px); }
  .announce-panel {
    bottom: calc(68px + 18px);
    min-width: 0; max-width: 100%; width: 100%;
    border-radius: 4px;
  }
}

/* ===== float.css ===== */
/* 图标：原来是两个图标字体（woff2 各 47KB，还各带一份 55KB 的 woff 备份），
   实际只用到其中 6 个字形。现在改成从字体里提取出来的 SVG，
   用 mask + currentColor 上色，显示效果和字体图标一致，体积从 200KB+ 降到 5KB。 */
.develop {
  font-size: 16px; font-style: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.md { font-style: normal; }

.float-tubiao_kefu::before,
.float-bianji1::before,
.float-31erweima::before,
.float-tousujianyi::before,
.float-jubao::before,
.md.icon_edit::before,
.md-sousuo1::before,
.md-tubiao_kefu::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  /* svg 的 viewBox 就是字体的 em 方框，100% 铺满和字体渲染完全一致 */
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  vertical-align: -0.125em;
}
.float-tubiao_kefu::before,
.md-tubiao_kefu::before   { -webkit-mask-image: url("../../img/icons/kefu.svg");    mask-image: url("../../img/icons/kefu.svg"); }
.float-bianji1::before,
.md.icon_edit::before     { -webkit-mask-image: url("../../img/icons/edit.svg");    mask-image: url("../../img/icons/edit.svg"); }
.float-31erweima::before  { -webkit-mask-image: url("../../img/icons/qrcode.svg");  mask-image: url("../../img/icons/qrcode.svg"); }
.float-tousujianyi::before{ -webkit-mask-image: url("../../img/icons/suggest.svg"); mask-image: url("../../img/icons/suggest.svg"); }
.float-jubao::before      { -webkit-mask-image: url("../../img/icons/report.svg");  mask-image: url("../../img/icons/report.svg"); }
.md-sousuo1::before       { -webkit-mask-image: url("../../img/icons/search.svg");  mask-image: url("../../img/icons/search.svg"); }

.online_Nav {
  --servicewidth: 46px;
  position: fixed; right: 10px; top: 65%;
  /* 初始藏在屏幕右侧外，加载后滑入 */
  transform: translate(calc(100% + 24px), -50%);
  opacity: 0;
  display: flex; flex-direction: column;
  z-index: 999; align-items: flex-end;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
.online_Nav.is-in {
  transform: translate(0, -50%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .online_Nav { transform: translate(0, -50%); opacity: 1; transition: none; }
}

.phone-container { margin-bottom: 5px; }
.consultation-box {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.decorator-one, .decorator-two, .decorator-three, .decorator-four {
  width: calc(var(--servicewidth) + 6px); height: calc(var(--servicewidth) + 6px);
  border: 1px solid #0052d9; border-radius: 50%;
  position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;
}
.decorator-one { animation: myani-one 2s ease infinite 2s; }
.decorator-two { animation: myani-two 2s ease infinite 2s; }
.decorator-three { animation: myani-three 2s ease infinite 2s; }
.decorator-four { animation: myani-four 2s ease infinite 2s; }
@keyframes myani-one {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 0.4; transform: scale(1.2); }
  30% { opacity: 0; transform: scale(1.4); }
}
@keyframes myani-two {
  0% { opacity: 0; transform: scale(1.2); }
  20% { opacity: 0.3; transform: scale(1.4); }
  40% { opacity: 0; transform: scale(1.6); }
}
@keyframes myani-three {
  0% { opacity: 0; transform: scale(1.4); }
  30% { opacity: 0.2; transform: scale(1.6); }
  60% { opacity: 0; transform: scale(1.8); }
}
@keyframes myani-four {
  0% { opacity: 0; transform: scale(1.6); }
  40% { opacity: 0.1; transform: scale(1.8); }
  80% { opacity: 0; transform: scale(2); }
}
.consultation-image {
  height: auto; border-radius: 50%;
  width: calc(var(--servicewidth) + 5px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #fff;
}
.consultation-button {
  background: #0056ff; color: #fefefe;
  padding: 5px 0; width: calc(var(--servicewidth) + 10px);
  text-decoration: none; border-radius: 2px;
  border: 0;
  transition: background-color 0.3s ease;
  margin-top: -10px;
  box-shadow: rgba(3, 27, 78, 0.12) 0 4px 8px 0;
  z-index: 2; cursor: pointer;
  display: flex; justify-content: space-around;
  animation: blinkfoot 2s linear infinite;
}
.consultation-button p {
  font-size: 12px; font-weight: 500; line-height: 14px;
  font-family: monospace; margin: 0; padding: 0;
  width: 6ch; word-wrap: break-word; letter-spacing: 2.5px;
}

@keyframes blinkfoot {
  0% { opacity: 1; }
  50% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.sideNavigation { position: relative; }
.online_body {
  background-color: #fff; border-radius: 2px;
  height: 100%; width: 100%; z-index: -1;
  padding: 10px 0 5px;
  box-shadow: rgba(3, 27, 78, 0.12) 0 4px 8px 0;
}
.online_navItem { position: relative; padding: 0 5px; }

.onlineService:after {
  border-bottom: 1px solid hsla(210, 7%, 53%, 0.16);
  bottom: -4px; content: "";
  position: absolute; width: 20px; left: 50%;
  transform: translateX(-50%);
}
.online_navItem:last-child .onlineService:after {
  border-bottom: 0; bottom: 0; width: 0;
}
.onlineService i { font-size: 24px; line-height: inherit; }
.online_navItem .onlineService {
  display: block; margin-bottom: 8px;
  height: var(--servicewidth);
  background-color: #fff; text-align: center; text-decoration: none;
  color: #333;
  width: var(--servicewidth); line-height: var(--servicewidth);

  transition: none;
}
.online_navItem .onlineService:hover {
  background-color: hsla(210, 7%, 53%, 0.1);
  color: #0052d9;
}

.online_navItem .onlineService i { color: inherit; }

.hoverWindow {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  width: fit-content;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.hoverWindow.is-show {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .25s var(--ease), visibility 0s linear 0s;
}

.hoverWindow::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 100%;
  width: 12px;
}
.online_navItem:last-child .hoverWindow { top: auto; bottom: 0; transform: none; }
.onlineservice_triangle {
  position: absolute; right: -8px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  z-index: 99; display: block;
}
.online_navItem:last-child .hoverWindow .onlineservice_triangle {
  top: auto; bottom: 10px; transform: none;
}
.onlineService_Body {
  background-color: #fff; border-radius: 4px;
  box-shadow: rgba(127, 135, 144, 0.16) 0 8px 24px 0;
  padding: 28px;
  min-width: 218px; font-size: 14px; position: relative; min-height: 130px;
}

.onlineService_Body .onlineService_Title_Text .kefuInformation {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  font-size: 13px; font-weight: 500; color: #000;
  padding: 8px 0; white-space: nowrap;
  border-bottom: 1px solid rgba(118, 1, 211, 0.04);
  min-width: 150px;
}
.onlineService_kefu.onlineService_bottom a:last-child .kefuInformation,
.onlineService_kefu.Telegram a:last-child .kefuInformation,
.onlineService_kefu.Telegram.onlineService_bottom a .kefuInformation,

.onlineService_kefu.display a:last-child .kefuInformation { border-bottom: none; }
.onlineService_Body .onlineService_Title_Text .kefuInformation .nicknameInformation {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  width: 100%; padding-left: 8px; font-size: 13px; font-weight: 400;
}
.onlineService_Body .onlineService_Title_Text .kefuInformation .nicknameInformation .nickname { font-weight: 500; }
.onlineService_Body .onlineService_Title_Text .kefuInformation .nickname i { opacity: 0; transition: opacity 0.3s ease 0s; }
.onlineService_Body .onlineService_Title_Text .kefuInformation .qq {
  color: rgba(0, 0, 0, .65); font-size: 12px; font-weight: 400; line-height: 24px;
}

.onlineService_Body .onlineService_Title_Text .kefuInformation .worktime {
  color: rgba(0, 0, 0, .45); font-size: 12px; font-weight: 400; line-height: 18px;
}
.onlineService_Body .onlineService_Title_Text .kefuInformation:hover { color: #0052d9; }
.onlineService_Body .onlineService_Title_Text .kefuInformation:hover .nickname i { opacity: 1; }
.onlineService_Body .onlineService_Title_Text .qqicon {
  width: 30px; height: 30px; border-radius: 50%; margin-right: 4px;
  border: 1px solid #cccccc3b;
  flex-shrink: 0; object-fit: cover;
}

.kefuInformation-status { position: relative; flex-shrink: 0; }
.online-indicator {
  position: absolute; bottom: 0; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background-color: rgb(31, 184, 38);
}

.kefuInformation.offline .qqicon { filter: grayscale(1); opacity: .7; }
.kefuInformation.offline .online-indicator { background-color: #c0c4cc; }
.kefuInformation.offline .nicknameInformation .nickname,
.kefuInformation.offline .nicknameInformation .qq,
.kefuInformation.offline .nicknameInformation .worktime { color: rgba(0, 0, 0, .45); }

.kefuInformation.offline .nicknameInformation .worktime { color: rgba(0, 0, 0, .35); }

.onlineservice_content .onlineService_Title {
  display: flex; margin-bottom: 8px; white-space: nowrap;
  align-items: flex-start; justify-content: flex-start;
  cursor: pointer; color: #333;
}
.onlineservice_content.workOrder .onlineService_Title { margin-bottom: 24px; }
.onlineservice_content .onlineService_Title:last-child { margin-bottom: 0; }
.onlineservice_content.workOrder .onlineService_Title_Icon { margin-right: 8px; }
.onlineservice_content .onlineService_Title:hover .onlineService_Title_Text .onlineServicetitle,
.onlineservice_content .onlineService_Title:hover .onlineService_Title_Icon i { color: #0052d9; }
.onlineservice_content .onlineService_Title .onlineService_Title_Icon i { font-size: 24px; }
.onlineservice_content .onlineService_Title .onlineService_Title_Text {
  display: flex; flex-direction: column; width: 100%;
}
.onlineservice_content .onlineService_Title .onlineService_kefu.display {
  display: grid; grid-template-columns: repeat(var(--serviceline), 1fr); grid-gap: 10px 20px;
}
.onlineservice_content .onlineService_Title .onlineService_Title_Text .onlineServicetitle {
  font-size: 14px; color: #000; margin: 0;
}
.onlineservice_content .onlineService_Title .onlineService_Title_Text .onlineServicedesc {
  font-size: 12px; color: rgba(0, 0, 0, .65); font-weight: 400; line-height: 24px;
}

.onlineService_Body.officialAccount {
  min-width: fit-content; padding: 18px 24px; display: flex;
}
.onlineService_Body.officialAccount .onlineservice_content { margin-right: 18px; }
.onlineService_Body.officialAccount .onlineservice_content:last-child { margin-right: 0; }
.onlineService_Body .onlineService_Title_Text .qrCode {
  width: 108px; max-width: none; flex-shrink: 0;
  margin: auto; padding: 4px;
  box-shadow: rgb(0 86 255 / 6%) 0 1px 4px 0;
}
.onlineService_Body.officialAccount .onlineservice_content .onlineService_Close {
  text-align: center; font-size: 12px; justify-content: space-around;
  color: rgba(0, 0, 0, .65); font-weight: 400;
}
.onlineservice_content .onlineService_Close {
  text-align: left; font-size: 13px; font-weight: 400; margin-top: 14px;
  display: flex; flex-direction: row; align-items: center;
}

/* ---------------- 友情链接（桌面 hover 向上展开 / 手机点击展开） ---------------- */
.footer-flinks { position: relative; display: inline-flex; align-items: center; }
.footer-flinks__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.48); font-size: 14px; line-height: 20px;
  transition: color .2s ease;
}
.footer-flinks__btn:hover { color: #fff; }
.footer-flinks__btn svg { transition: transform .2s ease; }
.footer-flinks:hover .footer-flinks__btn svg,
.footer-flinks.is-open .footer-flinks__btn svg { transform: rotate(180deg); }

/* 桌面：面板绝对定位在按钮上方，hover / 点击展开 */
.footer-flinks--desktop { margin-left: auto; margin-right: 16px; }
.footer-flinks__panel {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  min-width: 136px; max-width: 260px; padding: 6px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* 透明桥接：把按钮和面板之间那 12px 空隙也算进可 hover 区域，
   否则鼠标从按钮移到面板的路上会离开 :hover，面板立刻收起（要抢着滑过去才不消失）。 */
.footer-flinks__panel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: transparent;
}
.footer-flinks:hover .footer-flinks__panel,
.footer-flinks.is-open .footer-flinks__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.footer-flinks__item {
  display: block; padding: 7px 12px; border-radius: 2px;
  color: #3b4351; font-size: 13px; line-height: 1.5; white-space: nowrap;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.footer-flinks__item:hover { background: #f2f6fd; color: #0052d9; }

/* 手机端：默认隐藏，桌面用的那份不显示；点击在原地撑开，不遮挡版权区 */
.footer-flinks--mobile { display: none; }

@media (max-width: 768px) {
  .footer-flinks--desktop { display: none; }
  .footer-flinks--mobile { display: block; margin: 0 0 12px; text-align: left; }
  .footer-flinks--mobile .footer-flinks__btn { font-size: 13px; }
  .footer-flinks--mobile .footer-flinks__panel {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    display: none; margin-top: 8px; padding: 0; min-width: 0; max-width: none;
    background: transparent; box-shadow: none;
  }
  /* 用两重类名提高特异性：否则 .footer-flinks.is-open .footer-flinks__panel 里的
     transform: translate(-50%,0) 会把静态展开的面板推到屏幕外（实测 left 变负）。 */
  .footer-flinks--mobile .footer-flinks__panel { transform: none; }
  .footer-flinks--mobile.is-open .footer-flinks__panel { display: block; transform: none; }
  .footer-flinks--mobile .footer-flinks__panel::before { display: none; }
  .footer-flinks--mobile .footer-flinks__item {
    display: inline-block; padding: 0; margin: 0 16px 8px 0;
    color: rgba(255,255,255,.48); font-size: 13px;
  }
  .footer-flinks--mobile .footer-flinks__item:hover { background: none; color: #fff; }
}