/* ============================================================
   Building Access Control（楼宇-门禁）页面样式
   ============================================================ */

.building-access-control {
  width: 100%;
  background: #000000;
  overflow-x: clip; /* 裁掉任何横向溢出，杜绝页面级横向滚动条（不影响纵向滚动与定位） */
}

/* ---------- banner：大图 + 左下角小图 ---------- */
.building-banner {
  position: relative;
  width: 100%;
  height: 33.75vw; /* 648px @1920 */
  margin-top: 4.375vw; /* 头部 fixed 悬浮，补偿导航高度 84px @1920，避免 banner 被遮挡 */
}

/* ---------- 面包屑：banner 图下方，去掉全局 no-banner-crumbs 的 84px 上边距 ---------- */
.building-access-control .no-banner-crumbs {
  margin-top: 1.1458vw !important; /* 22px @1920 */
}

.building-banner .building-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 小图定位：版心 container 内，距底部 63px（@1920） */
.building-banner .building-banner-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.2813vw;
  margin: 0 auto;
}

/* 小图：固定 896px × 147px（@1920），最大宽 896px */
.building-banner .building-banner-slogan {
  display: block;
  width: 46.6667vw;
  max-width: 46.6667vw;
  height: 7.6563vw;
}

/* ---------- 视频板块 ---------- */
.building-video {
  margin-top: 3.3333vw; /* 64px @1920 */
  padding-bottom: 1.7188vw; /* 33px @1920 */
  background: #000000;
}

.building-video .building-video-box {
  width: 100%;
  margin: 0 auto;
}

/* 最大宽只作用于视频本体，文字不受限 */
.building-video .building-video-wrap {
  position: relative;
  max-width: 43.0208vw; /* 826px @1920 */
  margin: 0 auto;
}

.building-video .building-video-player {
  display: block;
  width: 100%;
  height: 24.1667vw; /* 464px @1920 */
  object-fit: cover;
  background: #000000;
}

.building-video .building-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.125vw; /* 60px @1920 */
  height: 3.125vw;
  border: none;
  border-radius: 50%;
  background: rgba(58, 102, 251, 0.9);
  cursor: pointer;
}

.building-video .building-video-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 0.625vw solid #ffffff;
  border-top: 0.4167vw solid transparent;
  border-bottom: 0.4167vw solid transparent;
}

.building-video .building-video-desc {
  margin-top: 1.1979vw; /* 23px @1920 */
  color: #ffffff;
  text-align: justify; /* 两端对齐 */
  text-align-last: center; /* 最后一行居中 */
  -moz-text-align-last: center;
  font-family: "Montserrat";
  font-size: 1.25vw; /* 24px @1920 */
  font-style: normal;
  line-height: 150%;
  letter-spacing: 0.0625vw; /* 1.2px @1920 */
}

@media screen and (max-width: 768px) {
  .building-banner {
    height: 48.5333vw; /* 182px @375 */
    margin-top: 12.8vw; /* 48px @375，补偿移动端导航高度 */
  }

  .building-banner .building-banner-img {
    height: 100%;
  }

  .building-banner .building-banner-slogan {
    width: 100%;
    max-width: 70.9333vw; /* 266px @375 */
    height: auto;
  }

  .building-video {
    margin-top: 10.6667vw; /* 40px @375 */
    margin-bottom: 0;
  }

  .building-video .building-video-wrap {
    max-width: 100%; /* 移动端不限制视频最大宽 */
  }

  .building-video .building-video-box {
    max-width: 100%; /* 不限制视频最大宽 */
  }

  .building-video .building-video-player {
    height: 49.0667vw; /* 184px @375 */
  }

  .building-video .building-video-play {
    width: 9.6vw;
    height: 9.6vw;
  }

  .building-video .building-video-play::after {
    border-left-width: 1.92vw;
    border-top-width: 1.28vw;
    border-bottom-width: 1.28vw;
  }

  .building-video .building-video-desc {
    margin-top: 6.4vw; /* 24px @375 */
    font-size: 3.7333vw; /* 14px @375 */
  }
}

/* ---------- KEY TECHNOLOGY 模块 ---------- */
.building-keyTech {
  position: relative;
  height: 56.25vw; /* 1080px @1920 */
  padding: 6.4063vw 0 0; /* 上 123px @1920（143px 减 20px，拉开标题与光球距离） */
  box-sizing: border-box;
  overflow: hidden;
}

.building-keyTech .building-keyTech-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* FACT logo：定位在模块中间（参考设计图：水平居中，垂直约 48%） */
/* 图标下方背景图层：行内背景写在 HTML 元素上 */
.building-keyTech .building-keyTech-title {
  position: relative;
  z-index: 1;
  font-family: "Montserrat-SemiBold";
  font-size: 3.125vw; /* 60px @1920 */
  line-height: 150%;
  color: #ffffff;
  text-align: center;
}

.building-keyTech .building-keyTech-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 1.5625vw; /* 30px @1920 */
  line-height: 150%;
  color: #ffffff;
  text-align: center;
}

.building-keyTech .building-keyTech-body {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 1.25vw; /* 24px @1920 */
}

.building-keyTech .building-keyTech-column {
  display: flex;
  flex-direction: column;
  gap: 1.5625vw; /* 30px @1920，原 90px */
  width: 16.8229vw; /* 323px @1920 */
}

.building-keyTech .keyTech-item {
  text-align: center;
}

.building-keyTech .keyTech-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.75vw; /* 168px @1920 */
  height: 8.75vw;
  margin: 0 auto 1.25vw; /* 24px */
  border-radius: 50%;
  overflow: hidden;
}

.building-keyTech .keyTech-item-icon img {
  width: 45%;
  object-fit: contain;
}

.building-keyTech .keyTech-item-title {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 1.875vw; /* 36px @1920 */
  font-style: normal;
  line-height: 150%;
  letter-spacing: -0.0563vw; /* -1.08px @1920 */
  /* 单行省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.building-keyTech .keyTech-item-desc {
  color: #ffffff;
  font-family: "Montserrat";
  font-size: 1.0417vw; /* 20px @1920 */
  font-style: normal;
  line-height: 150%;
  letter-spacing: -0.0313vw; /* -0.6px @1920 */
  /* 两行省略 + 固定两行高度 */
  height: 3.125vw; /* 20px × 150% × 2 @1920 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .building-keyTech {
    height: auto;
    margin-top: 21.3333vw; /* 80px @375 */
    padding: 4.2667vw 0 6.4vw;
  }

  /* 视频铺满模块做背景（主副标题叠加其上），球体视觉缩小 */
  .building-keyTech .building-keyTech-video {
    transform: scale(0.6); /* 球体视觉缩小，四周露出的黑色背景与页面底色融合 */
  }

  .building-keyTech .building-keyTech-title {
    font-size: 8.5333vw; /* 32px @375 */
    margin: 0;
  }

  .building-keyTech .building-keyTech-sub {
    font-size: 4.2667vw; /* 16px @375 */
    font-weight: 400;
    margin: 3.2vw 0 0; /* 上 12px @375：主副标题间距 */
  }

  .building-keyTech .building-keyTech-body {
    margin-top: 8.8vw; /* 33px @375：标题到内容间距（副标题无数据不渲染时依然成立） */
  }

  .building-keyTech .building-keyTech-column {
    gap: 2.4vw; /* 9px @375 */
    width: 32%;
    max-width: 26.6667vw; /* 100px @375 */
  }

  .building-keyTech .keyTech-item-icon {
    width: 10.6667vw; /* 40px @375 */
    height: 10.6667vw;
    margin-bottom: 1.0667vw; /* 4px @375 */
  }

  .building-keyTech .keyTech-item-icon img {
    width: 5.3333vw; /* 20px @375 */
  }

  .building-keyTech .keyTech-item-title {
    font-size: 3.2vw; /* 12px @375 */
  }

  .building-keyTech .keyTech-item-desc {
    font-size: 2.4vw; /* 9px @375 */
    margin-top: 0.8vw; /* 3px @375 */
    /* 去除两行省略：还原普通块级文本，高度由内容撑开 */
    height: auto;
    display: block;
    -webkit-line-clamp: initial;
    line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
  }
}

/* ---------- Fast 模块（轮播） ---------- */
.building-fast {
  position: relative;
  height: 55.9375vw; /* 1074px @1920 */
}

.building-fast .building-fast-slide {
  position: absolute;
  inset: 0;
  z-index: 0; /* 轮播层最底层，不遮盖模块层的主副标题等内容 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(2vw);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease; /* 切换动效与 Accurate 模块一致 */
  pointer-events: none; /* 不拦截鼠标：主副标题在轮播层之下，保证文字可选中复制 */
}

.building-fast .building-fast-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.building-fast .building-fast-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 5.0521vw; /* 97px @1920 */
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 4.2708vw; /* 82px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-fast .building-fast-title span {
  color: #009CF4;
}

.building-fast .building-fast-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: "Montserrat-Medium";
  font-size: 1.25vw; /* 24px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 屏内视频背景：铺满本屏，压在文字下方 */
.building-fast .building-fast-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.building-fast .building-fast-slide .container {
  position: relative;
  height: 100%;
  z-index: 1; /* 文字位于视频/背景之上 */
}

.building-fast .building-fast-text {
  position: absolute;
  left: 0;
  top: 22.7vw; /* 436px @1920 */
  width: 100%;
  max-width: 38.125vw; /* 732px @1920 */
  line-height: 150%;
}

.building-fast .building-fast-name {
  margin: 0 0 0.3646vw; /* 7px */
  font-family: "Montserrat-Bold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #DFCDA4;
}

/* 渐变应用于每一行（span 独立成块），保证每行都有完整的白→金渐变 */
.building-fast .building-fast-name span {
  display: block;
  background: linear-gradient(180deg, #FDFBF6 24.5%, #FFE49A 58.82%, #AE8063 85.23%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Trusted 模块左侧标题：36px（覆盖 Fast 的 48px） */
.building-trusted .building-fast-name {
  font-size: 1.875vw; /* 36px @1920 */
}

/* ===== Trusted 第一张轮播：呼吸灯动效（迁移自 glowPage.html，定位于轮播右侧） ===== */
.building-trusted .glow-bg {
  position: absolute;
  top: 41.5%;
  right: 14.2188vw; /* 273px @1920 */
  transform: translateY(-50%);
  width: 41.6667vw; /* 双球宽度：20.8333vw × 2（800px @1920） */
  height: 20.8333vw; /* 400px @1920 */
  z-index: 1;
  pointer-events: none;
}

.building-trusted .glow-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18.75vw; /* 360px @1920：大光晕直径 */
  height: 18.75vw;
  transform: translate(-50%, -50%);
}

/* 蓝色光球：容器中心 */
.building-trusted .glow-sphere--blue {
  z-index: 1;
}

/* 红色光球：左缘对齐蓝色中心点（与源文件 glowPage 一致，两球交叠一半） */
.building-trusted .glow-sphere--red {
  transform: translate(-0.5vw, -50%); /* 红球位置微调 */
  z-index: 2;
}

/* 最外层光晕：大而弥散 */
.building-trusted .glow-sphere__outer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 220, 255, 0.14);
  box-shadow: 0 0 1.04vw 0.52vw rgba(0, 220, 255, 0.35);
  filter: blur(0.52vw);
  animation: glow-breathe 4s ease-in-out infinite;
}

/* 内层环形：细环、清晰 */
.building-trusted .glow-sphere__inner {
  position: absolute;
  width: 49%;
  height: 49%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    transparent 44%,
    rgba(0, 230, 255, 0.4) 48%,
    rgba(0, 230, 255, 0.8) 57%,
    rgba(0, 230, 255, 0.4) 63%,
    transparent 70%
  );
  box-shadow: 0 0 0.73vw 0.1vw rgba(0, 230, 255, 0);
  filter: blur(0.1vw);
  animation: glow-breathe 4s ease-in-out infinite;
}

/* 红色光球 */
.building-trusted .glow-sphere--red .glow-sphere__outer {
  background: rgba(255, 80, 80, 0.14);
  box-shadow: 0 0 1.04vw 0.52vw rgba(255, 80, 80, 0.35);
}

.building-trusted .glow-sphere--red .glow-sphere__inner {
  background: radial-gradient(circle at center,
    transparent 44%,
    rgba(255, 80, 80, 0.4) 48%,
    rgba(255, 80, 80, 0.8) 57%,
    rgba(255, 80, 80, 0.4) 63%,
    transparent 70%
  );
  box-shadow: 0 0 0.73vw 0.1vw rgba(255, 80, 80, 0);
}

/* 呼吸灯动画（波动幅度加大：缩放 ±10%、透明度 0.5~1，PC/移动端统一） */
@keyframes glow-breathe {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ---------- Data Security 模块：背景图 + 左中右布局 ---------- */
.building-data {
  position: relative;
  height: 56.25vw; /* 1080px @1920 */
  background-color: #000000;
  overflow: hidden;
}

/* 背景图：PC 铺满模块底层，移动端独立成块置顶 */
.building-data .building-data-bg {
  position: absolute;
  inset: 0;
}

.building-data .building-data-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 9.4792vw; /* 182px @1920：左右图距模块底部 */
  margin: 0 auto; /* 配合 container 的 max-width: 75vw 水平居中 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 1; /* 内容叠于背景图层之上 */
}

.building-data .building-data-img {
  display: block;
  width: 26.0417vw; /* 500px @1920 */
  height: auto;
}

.building-data .building-data-center {
  align-self: center; /* 中间文字垂直居中 */
}

.building-data .building-data-title {
  position: relative;
  top: -2.3958vw; /* 上移 46px @1920 */
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
  text-align: center;
}

/* ===== Data Security 左侧：数据生命周期动效（迁移自 dataLifecycleFlow.html，不含漏斗/背景/星空） ===== */
.building-data .building-data-left {
  position: relative;
}

.building-data .lifecycle-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* 线条逐渐绘制 */
.building-data .lifecycle-stage .flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.building-data .lifecycle-stage.play .flow {
  animation: lc-draw var(--d) linear var(--delay) forwards;
}

/* 节点弹性浮现 + 光晕呼吸 */
.building-data .lifecycle-stage .node {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.building-data .lifecycle-stage.play .node {
  animation: lc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay) forwards;
}
.building-data .lifecycle-stage .halo {
  opacity: 0.25;
}
.building-data .lifecycle-stage.play .halo {
  animation: lc-pulse 2.4s ease-in-out calc(var(--delay) + 0.6s) infinite;
}

/* 箭头淡入 */
.building-data .lifecycle-stage .arrow {
  opacity: 0;
}
.building-data .lifecycle-stage.play .arrow {
  animation: lc-fadeIn 0.4s ease var(--delay) forwards;
}

/* 文字上浮淡入 */
.building-data .lifecycle-stage .label {
  opacity: 0;
}
.building-data .lifecycle-stage.play .label {
  animation: lc-fadeUp 0.6s ease var(--delay) forwards;
}

@keyframes lc-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes lc-fadeIn {
  to { opacity: 1; }
}
@keyframes lc-fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lc-pop {
  to { transform: scale(1); }
}
@keyframes lc-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.5; }
}

/* ===== Data Security 右侧：隐私漏斗光球动效（迁移自 graduatedaPerture.html，布局按设计图） ===== */
.building-data .building-data-right {
  position: relative;
}

.building-data .pyramid-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6.2083vw; /* 119px @1920：距离下方 */
  left: 1.9792vw; /* 38px @1920：距离左侧 */
  z-index: 1;
  pointer-events: none;
}

.building-data .glow-orb {
  position: absolute;
  border-radius: 50%;
  min-width: 40px; /* 最小宽 40px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 1.56vw);
}

/* 滚动进入视口后（容器加 play）才播放浮现动画，与左侧动效触发一致
   注意：这里用长写属性——animation 简写会把各球单独设置的 animation-delay 重置为 0 */
.building-data .play .glow-orb {
  animation-name: orb-fadeInUp;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.building-data .glow-orb__core {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(10, 15, 30, 1) 0%,
    rgba(10, 15, 30, 1) 40%,
    rgba(40, 60, 90, 0.6) 70%,
    rgba(80, 130, 180, 0.35) 88%,
    rgba(100, 160, 220, 0.2) 100%);
  border: 0.1vw solid rgba(100, 140, 180, 0.4);
  box-shadow:
    inset 0 0 0.78vw 0.31vw rgba(80, 140, 200, 0.15),
    inset 0 0 1.3vw rgba(60, 120, 180, 0.2),
    inset 0 -0.26vw 0.78vw rgba(0, 0, 0, 0.4),
    0 0 1.3vw rgba(80, 120, 160, 0.15),
    0 0.21vw 0.78vw rgba(0, 0, 0, 0.5);
}

.building-data .glow-orb__text {
  position: relative;
  z-index: 1;
  font-size: 0.74vw; /* 14px @1920 */
  color: rgba(255, 255, 255, 0.9);
  line-height: 150%;
  padding: 0.42vw;
  max-width: 88%;
  text-shadow: 0 0.05vw 0.1vw rgba(0, 0, 0, 0.5);
  /* 最多三行，超出省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 光球位置（等间距布局：球心距 = 相邻半径和 + 12px 间隙，保持原构图方向） */
.building-data .glow-orb--1 {
  width: 19.3%; /* Privacy Protection */
  aspect-ratio: 1;
  top: 10.9%;
  left: 16.8%;
  animation-delay: 0.8s;
}
.building-data .glow-orb--2 {
  width: 21.2%; /* Data Encryption */
  aspect-ratio: 1;
  top: 2.6%;
  left: 67.9%;
  animation-delay: 0.35s;
}
.building-data .glow-orb--3 {
  width: 26.7%; /* Classified Minimum Authorization */
  aspect-ratio: 1;
  top: 13.8%;
  left: 41.6%;
  animation-delay: 1.25s;
}
.building-data .glow-orb--4 {
  width: 24.6%; /* Systematic Access Control */
  aspect-ratio: 1;
  top: 38.8%;
  left: 26%;
  animation-delay: 2.15s;
}
.building-data .glow-orb--5 {
  width: 29.9%; /* Privacy-friendly Setting */
  aspect-ratio: 1;
  top: 29.4%;
  left: 66.9%;
  animation-delay: 1.7s;
}
.building-data .glow-orb--6 {
  width: 20.4%; /* User Consent */
  aspect-ratio: 1;
  top: 57.9%;
  left: 44.6%;
  animation-delay: 2.6s;
}
.building-data .glow-orb--dots {
  width: 6.6%; /* ··· */
  aspect-ratio: 1;
  top: 82.2%;
  left: 45.5%;
  animation-delay: 3.05s;
}

/* ··· 小圈：文字与其他气泡统一 14px */
.building-data .glow-orb--dots .glow-orb__text {
  padding: 0;
  font-size: 0.7292vw; /* 14px @1920 */
  line-height: 150%;
}

@keyframes orb-fadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 2.08vw) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media screen and (max-width: 768px) {
  /* building-data 移动端：背景图独立成块置顶，左右模块按顺序各占一行，内容不叠加在背景图上 */
  .building-data {
    height: auto;
    padding: 0;
  }

  .building-data .building-data-bg {
    position: static; /* 退出绝对定位，作为普通块级元素排在最上方 */
    width: 100%;
    height: 87.4667vw; /* 328px @375，cover 裁切两侧 */
  }

  .building-data .building-data-body {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8vw; /* 模块间距 30px @375 */
    margin-top: -20.8vw; /* -78px @375：内容上移叠入背景图区 */
  }

  .building-data .building-data-center {
    position: absolute; /* 相对 .building-data 定位，叠加在背景图块上 */
    top: 34vw;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 6.4vw; /* 标题保留左右留白 */
  }

  .building-data .building-data-title {
    top: 0;
    font-size: 4.8vw; /* 18px @375 */
  }

  .building-data .building-data-img {
    width: 100%; /* 左右模块图片全屏宽 */
  }

  .building-data .lifecycle-stage .label {
    font-size: 9.6vw; /* 36px @375 */
  }

  /* 光球容器整体上移：加大 bottom 偏移，容器收缩、气泡整体上移，不遮挡底部文字 */
  .building-data .pyramid-container {
    bottom: 14vw; /* PC 为 6.2083vw */
  }

  /* 40px 最小宽会破坏光球等比缩放 */
  .building-data .glow-orb {
    min-width: 0;
  }

  .building-data .glow-orb__text {
    font-size: 3.2vw; /* 12px @375，放大光球文字 */
  }

  .building-data .glow-orb--dots .glow-orb__text {
    font-size: 3.2vw;
  }
}

.building-fast .building-fast-desc {
  margin: 0;
  max-width: 26.875vw; /* 516px @1920 */
  font-family: "Montserrat";
  font-size: 1.1458vw; /* 22px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* Trusted 第一张轮播：副标题下方双图（左右布局） */
.building-fast .building-trusted-imgs {
  display: flex;
  align-items: flex-start; /* 禁止 flex stretch 拉伸图片导致变形 */
  gap: 3.4896vw; /* 67px @1920 */
  margin-top: 1.25vw; /* 24px @1920 */
}

.building-fast .building-trusted-imgs img {
  width: 13.8021vw; /* 265px @1920，两张图统一宽度 */
  aspect-ratio: 530 / 732; /* 与占位切图同比例，换图后两张尺寸仍一致 */
  object-fit: cover; /* 比例不同的图裁切填充，不变形 */
  height: auto;
}

/* 第二张轮播描述：最大宽 732px */
.building-fast .building-fast-desc--wide {
  max-width: 38.125vw; /* 732px @1920 */
}

/* 描述内粗体小标题 */
.building-fast .building-fast-desc strong {
  font-family: "Montserrat-SemiBold";
}

/* 相邻描述段落间距 */
.building-fast .building-fast-desc + .building-fast-desc {
  margin-top: 1.0417vw; /* 20px @1920 */
}

.building-fast .building-fast-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.building-fast .building-fast-nav .fast-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.3333vw; /* 64px @1920 */
  height: 3.3333vw;
  border-radius: 50%;
  background: #1A1A1A;
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
}

.building-fast .building-fast-nav .fast-btn.prev {
  left: 4.9479vw; /* 95px @1920 */
}

.building-fast .building-fast-nav .fast-btn.next {
  right: 4.9479vw; /* 95px @1920 */
}

.building-fast .building-fast-nav .fast-btn .iconfont {
  font-size: 2.5vw; /* 48px @1920 */
}

@media screen and (max-width: 768px) {
  /* Trusted/Fast 移动端：主副标题脱离背景图、单独放置在文本流顶部；轮播背景区独立成块置于标题下方 */
  .building-fast {
    height: auto;
    padding: 12.8vw 0 56.2667vw; /* 上 48px @375；底部为轮播区预留高度 211px @375 */
    overflow: hidden; /* 裁掉呼吸灯超出右缘的部分，避免撑出横向滚动条 */
    background-image: none !important; /* 模块级内联背景图不再铺满，标题不再压在图上 */
    background-color: #000000 !important; /* 覆盖内联的 lightgray 底色 */
  }

  .building-fast .building-fast-title {
    padding-top: 0; /* 顶部留白由模块 padding 控制 */
    font-size: 6.4vw; /* 24px @375，参考其他模块标题 */
  }

  .building-fast .building-fast-sub {
    margin-top: 2.1333vw; /* 8px @375 */
    margin-bottom: 5.3333vw; /* 20px @375：副标题与背景图区间距 */
    font-size: 3.2vw; /* 12px @375 */
    font-family: "Montserrat"; /* 常规体替代字重 400 */
    padding: 0 6.4vw;
    box-sizing: border-box;
  }

  .building-fast .building-fast-text {
    top: 10.1333vw; /* 38px @375 */
    left: 0;
    right: 0;
    width: 100%;
    max-width: 92%; /* 移动端最大宽 92% */
    margin: 0 auto; /* 文字块在版心内水平居中 */
  }

  .building-fast .building-fast-name {
    font-size: 4.2667vw; /* 16px @375 */
    margin-bottom: 3.2vw; /* 12px @375 */
    max-width: 56%;
  }

  /* 仅第二张轮播屏：标题最大宽放宽到 72% */
  .building-fast .building-fast-slide:nth-of-type(2) .building-fast-name {
    max-width: 72%;
  }

  .building-fast .building-fast-desc {
    font-size: 2.6667vw; /* 10px @375 */
    max-width: 56%;
  }

  .building-fast .building-trusted-imgs {
    margin-top: 4.2667vw; /* 16px @375 */
  }

  .building-fast .building-trusted-imgs img {
    width: 16.5333vw; /* 62px @375 */
  }

  .building-fast .building-fast-nav .fast-btn {
    width: 11.7333vw; /* 44px @375 */
    height: 11.7333vw;
    background: rgba(26, 26, 26, 0.5); /* 半透明，不遮挡后面内容 */
  }

  .building-fast .building-fast-nav .fast-btn .iconfont {
    font-size: 3.7333vw; /* 14px @375 */
  }

  .building-trusted {
    padding-top: 21.3333vw; /* 上 80px @375（覆盖 .building-fast 的 12.8vw） */
    padding-bottom: 78.6667vw; /* 轮播区 295px @375：容纳文字 + 双图 + 设备图，避免裁切 */
  }

  .building-trusted .building-fast-name {
    max-width: 100%; /* 覆盖通用规则的 56% / 第二屏 72% */
  }

  /* Trusted 呼吸灯动效：移动端等比放大占比 */
  .building-trusted .glow-bg {
    width: 71.3333vw;
    height: 41.6667vw;
    top: 43.9%;
    right: 0;
  }

  .building-trusted .glow-sphere {
    width: 20.2667vw; /* 76px @375 */
    height: 20.2667vw;
  }

  /* 移动端轮播：slide 叠放 + transform 滑动（支持手势拖动切换）；锚定模块底部预留区，不占标题区 */
  .building-fast .building-fast-slide {
    position: absolute;
    inset: 0;
    top: auto; /* 顶部不再顶着模块上缘，让出主副标题区域 */
    height: 56.2667vw; /* 轮播背景区 211px @375，与模块 padding-bottom 对应 */
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(100%); /* 非激活屏在右侧待命 */
    transition: transform 0.35s ease;
  }

  /* 左右切换按钮锚定轮播区，垂直居中于背景图区域而非整个模块 */
  .building-fast .building-fast-nav {
    top: auto;
    bottom: 0;
    height: 56.2667vw; /* 与轮播区高度一致 211px @375 */
  }

  .building-fast .building-fast-slide.active {
    transform: translateX(0);
  }

  /* 上一屏：位于左侧（prev 切换时从左滑入） */
  .building-fast .building-fast-slide.prev-pos {
    transform: translateX(-100%);
  }

  /* Trusted 轮播区加高（置于通用规则之后，同优先级靠后生效） */
  .building-trusted .building-fast-slide {
    height: 78.6667vw; /* 295px @375 */
  }

  .building-trusted .building-fast-nav {
    height: 78.6667vw; /* 与轮播区一致 */
  }

  /* Trusted 背景图：contain 完整显示设备图，垂直居中（相对底部对齐整体上移，对准光环） */
  .building-trusted .building-fast-video {
    object-fit: contain;
    object-position: center;
  }
}

/* ---------- Accurate 模块（轮播） ---------- */
.building-accurate {
  position: relative;
  height: 56.25vw; /* 1080px @1920 */
  background: #000000;
  overflow: hidden;
}

.building-accurate .building-accurate-slide {
  position: absolute;
  inset: 0;
  z-index: 0; /* 轮播层最底层，不遮盖模块层的主副标题等内容 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(2vw);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
  pointer-events: none;
}

.building-accurate .building-accurate-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.building-accurate .building-accurate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  z-index: 0;
}

.building-accurate .building-accurate-title {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding-top: 2.6563vw; /* 51px @1920 */
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 4.2708vw; /* 82px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-accurate .building-accurate-title span {
  color: #009CF4;
}

.building-accurate .building-accurate-sub {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  font-family: "Montserrat-Medium";
  font-size: 1.25vw; /* 24px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 图片组：卡片与描述文字间距 10px */
.building-accurate .building-accurate-group {
  display: grid;
  gap: 0.5208vw; /* 10px @1920 */
}

/* 轮播层穿透后，恢复内容区域的鼠标事件（保证文字可选中复制） */
.building-fast .building-fast-text,
.building-accurate .building-accurate-right,
.building-accurate .building-accurate-name--top,
.building-accurate .building-accurate-optical {
  pointer-events: auto;
}

/* 右侧文案 + 图片组 */
.building-accurate .building-accurate-right {
  position: absolute;
  left: 48vw;
  top: 14.6875vw; /* 282px @1920 */
  right: 12.5vw; /* 对齐版心右缘（版心 75vw） */
  max-width: 39.2708vw; /* 754px @1920 */
  display: grid;
  gap: 0.5208vw; /* 10px @1920（组间距，与 optical 写法一致） */
  z-index: 1;
}

.building-accurate .building-accurate-name {
  margin: 0 0 0;
  font-family: "Montserrat-Bold" !important;
  font-size: 1.875vw; /* 36px @1920 */
  line-height: 150%;
  background: linear-gradient(180deg, #FDFBF6 24.5%, #FFE49A 58.82%, #AE8063 85.23%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.building-accurate .building-accurate-subdesc {
  margin: 0 0 1.5625vw; /* 30px @1920 */
  font-family: "Montserrat";
  font-size: 1.25vw; /* 24px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-accurate .building-accurate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.0313vw; /* 39px @1920 */
  height: 12.0833vw; /* 232px @1920 */
  box-sizing: border-box;
  padding: 1.25vw 0.8333vw; /* 24px 16px @1920 */
  /* 背景图 url 在 HTML 行内；此处仅做尺寸适配（图自带圆角，拉伸贴合卡片） */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.building-accurate .building-accurate-griditem {
  position: relative;
}

.building-accurate .building-accurate-grid img {
  display: block;
  width: 100%;
  height: 9.5313vw; /* 183px @1920 */
  object-fit: cover;
  border-radius: 0.4167vw; /* 8px @1920 */
}

/* 图片底部居中文字 */
.building-accurate .building-accurate-gridlabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2604vw; /* 5px @1920 */
  padding: 0 0.625vw; /* 左右 12px @1920 */
  box-sizing: border-box;
  text-align: center;
  font-family: "Montserrat-Medium";
  font-size: 0.8333vw; /* 16px @1920 */
  line-height: 150%;
  color: #000000;
  /* 单行省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 第二组图片文字：白色 */
.building-accurate .building-accurate-gridlabel--light {
  color: #ffffff;
}

/* Optical 轮播卡片图片上的文字：黑色（覆盖 --light 白色） */
.building-accurate .building-accurate-optical .building-accurate-gridlabel--light {
  color: #000000;
}

/* 第二屏（Optical）轮播：文字贴底 */
.building-accurate .building-accurate-optical .building-accurate-gridlabel {
  bottom: 0;
}

.building-accurate .building-accurate-griddesc {
  margin: 0; /* 上下间距由 group 的 gap 控制 */
  text-align: center;
  font-family: "Montserrat";
  font-size: 1.0417vw; /* 20px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-accurate .building-accurate-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.building-accurate .building-accurate-nav .accurate-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.3333vw; /* 64px @1920 */
  height: 3.3333vw;
  border-radius: 50%;
  background: #1A1A1A;
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
}

.building-accurate .building-accurate-nav .accurate-btn.prev {
  left: 4.9479vw; /* 95px @1920 */
}

.building-accurate .building-accurate-nav .accurate-btn.next {
  right: 4.9479vw; /* 95px @1920 */
}

.building-accurate .building-accurate-nav .accurate-btn .iconfont {
  font-size: 2.5vw; /* 48px @1920 */
}

/* 第三张轮播：Optical Image Processing Technology（版心用 container，absolute 下 left/right:0 + margin auto 居中） */
.building-accurate .building-accurate-name--top {
  position: absolute;
  left: 0;
  right: 0;
  top: 13.75vw; /* 264px @1920 */
  margin: 0 auto;
  text-align: center;
}

.building-accurate .building-accurate-optical {
  position: absolute;
  left: 0;
  right: 0;
  top: 18.0729vw; /* 347px @1920 */
  margin: 0 auto;
  max-width: 66.9792vw !important; /* 1286px @1920，覆盖 container 的 75vw */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5208vw 2.1875vw; /* 上下 10px、左右 42px @1920 */
  z-index: 1;
}

.building-accurate .building-accurate-optical .building-accurate-grid {
  height: auto; /* 高度由内容撑开（覆盖全局 232px 定高） */
  gap: 1.7708vw; /* 34px @1920（Optical 两图卡片间距） */
}

.building-accurate .building-accurate-optical .building-accurate-grid img {
  height: 9.5313vw; /* 183px @1920 */
  width: auto; /* 宽度不限制，按图片比例 */
  margin: 0 auto;
}

/* 卡片内三张竖图（Linear Effect / DWDR / WDR） */
.building-accurate .building-accurate-optical .building-accurate-grid--third {
  grid-template-columns: repeat(3, 1fr);
  gap: 3.125vw; /* 60px @1920（第一组三图间距） */
  align-content: center;
}

.building-accurate .building-accurate-grid--third img {
  height: 9.5313vw; /* 183px @1920 */
  width: auto;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .building-accurate {
    height: auto;
    padding: 21.3333vw 0 0; /* 上 80px @375，底部无留白 */
  }

  .building-accurate .building-accurate-slide {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .building-accurate .building-accurate-slide.active {
    display: block;
  }

  /* 主副标题对齐 Fast 模块移动端样式 */
  .building-accurate .building-accurate-title {
    padding-top: 0;
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 0;
  }

  .building-accurate .building-accurate-sub {
    max-width: 92%;
    margin-top: 2.1333vw; /* 8px @375 */
    margin-bottom: 5.3333vw; /* 20px @375：副标题与下方轮播区间距 */
    font-size: 3.2vw; /* 12px @375 */
    font-family: "Montserrat"; /* 常规体替代字重 400 */
    padding: 0 6.4vw;
    box-sizing: border-box;
  }


  /* 所有轮播屏：还原 PC 端构图（屏内元素绝对定位，PC 尺寸均为 vw 随视口等比缩放） */
  .building-accurate .building-accurate-slide {
    position: relative;
    height: 56.25vw; /* 16:9，同 PC 模块比例，切换时模块高度稳定 */
  }

  .building-accurate .building-accurate-optical .building-accurate-grid img {
    height: 12vw; /* 45px @375 */
  }

  /* 第一屏右侧文案区：移动端单独微调 */
  .building-accurate .building-accurate-right {
    left: 45vw;
    top: 4.6875vw;
    max-width: 46.6667vw; /* 175px @375 */
  }

  .building-accurate .building-accurate-name {
    font-size: 4.2667vw; /* 16px @375 */
  }

  .building-accurate .building-accurate-subdesc {
    font-size: 2.6667vw; /* 10px @375 */
  }

  .building-accurate .building-accurate-griddesc {
    font-size: 1.3333vw; /* 5px @375 */
  }

  .building-accurate .building-accurate-gridlabel {
    bottom: 0;
    font-size: 1.032vw; /* 3.87px @375 */
  }

  .building-accurate .building-accurate-optical {
    max-width: 100% !important; /* 覆盖 PC 端的 66.9792vw !important */
    top: 13.3333vw; /* 50px @375，覆盖 PC 的 18.0729vw */
  }

  .building-accurate .building-accurate-name--top {
    top: 3.4667vw; /* 13px @375，覆盖 PC 的 13.75vw */
  }

  .building-accurate .building-accurate-nav .accurate-btn {
    top: 75%; /* 覆盖 PC 的 50% */
    width: 11.7333vw; /* 44px @375 */
    height: 11.7333vw;
    background: rgba(26, 26, 26, 0.5); /* 半透明，不遮挡后面内容 */
  }

  .building-accurate .building-accurate-nav .accurate-btn .iconfont {
    font-size: 3.7333vw; /* 14px @375 */
  }
}

/* ---------- Convenient 模块：All-in-one Access Solution ---------- */
.building-convenient {
  background: #000000;
  padding: 3.6979vw 0 6.3542vw; /* 上 71px 下 122px @1920 */
}

.building-convenient-title {
  margin: 0;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 4.2708vw; /* 82px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 首字母蓝色 */
.building-convenient-title span {
  color: #009CF4;
}

.building-convenient-sub {
  margin: 1.25vw 0 0; /* 24px @1920 */
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-convenient-desc {
  margin: 0.9375vw auto 0; /* 18px @1920 */
  text-align: center;
  font-family: "Montserrat-Medium";
  font-size: 1.25vw; /* 24px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 高亮 FACT 2.0（控制 desc 内的 span） */
.building-convenient-desc span {
  color: #009CF4;
}

/* 图标列表：一行 4 个宽度均分，超出换行 */
.building-convenient .building-convenient-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6.25vw; /* 120px @1920 */
  margin-top: 4.8958vw !important; /* 94px @1920 */
}

.building-convenient-item {
  text-align: center;
}

.building-convenient-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.75vw; /* 168px @1920 */
  height: 8.75vw;
  margin: 0 auto 1.25vw; /* 24px */
  border-radius: 50%;
  overflow: hidden;
}

.building-convenient-item-icon img {
  width: 45%;
  object-fit: contain;
}

.building-convenient-item-name {
  margin: 0;
  font-family: "Montserrat";
  font-size: 1.0417vw; /* 20px @1920 */
  line-height: 150%;
  color: #ffffff;
  /* 按整词换行，单个单词不断词（超过列宽则整词移到下一行） */
  word-break: normal;
  overflow-wrap: normal;
}

@media screen and (max-width: 768px) {
  .building-convenient {
    padding: 12.8vw 0 9.6vw;
  }

  .building-convenient-title {
    font-size: 8.5333vw; /* 32px @375 */
  }

  .building-convenient-sub {
    margin-top: 3.2vw;
    font-size: 5.3333vw; /* 20px @375 */
  }

  .building-convenient-desc {
    margin-top: 2.6667vw;
    font-size: 3.2vw; /* 12px @375 */
  }

  .building-convenient-grid {
    gap: 6.4vw;
    margin-top: 9.6vw;
  }

  .building-convenient-item-icon {
    width: 12.8vw; /* 48px @375 */
    height: 12.8vw;
    margin-bottom: 3.2vw;
  }

  .building-convenient-item-name {
    font-size: 3.2vw; /* 12px @375 */
  }
}

/* ---------- Multiple Unlock Methods 模块 ---------- */
.building-unlock {
  background: #000000;
  padding: 0 0 11.4583vw; /* 220px @1920 */
}

.building-unlock .building-unlock-title {
  margin: 0 auto 1.6667vw !important; /* 下边距 32px @1920，间距统一由标题控制 */
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 卡片网格：3 列，左右间距 75px、上下间距 53px（间距由标题下边距控制） */
.building-unlock .building-unlock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.7604vw 3.9063vw; /* 上下 53px、左右 75px @1920 */
}

.building-unlock-card {
  position: relative;
  border-radius: 0.4167vw; /* 8px @1920 */
  overflow: hidden;
}

.building-unlock-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* 卡片底部居中文字 */
.building-unlock-card-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.625vw; /* 12px @1920 */
  margin: 0;
  padding: 0 0.8333vw; /* 左右 16px @1920 */
  box-sizing: border-box;
  text-align: center;
  font-family: "Montserrat";
  font-size: 1.5625vw; /* 30px @1920 */
  line-height: 150%;
  color: #ffffff;
  /* 单行省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
  .building-unlock {
    padding: 0 0 9.6vw;
  }

  .building-unlock .building-unlock-title {
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 6.4vw;
  }

  .building-unlock .building-unlock-grid {
    grid-template-columns: repeat(2, 1fr); /* 两个一行 */
    gap: 4.2667vw; /* 16px @375，上下左右统一 */
  }

  .building-unlock-card-name {
    bottom: 0.8vw; /* 3px @375 */
    padding: 0 3.2vw; /* 左右 12px @375 */
    font-size: 3.7333vw; /* 14px @375 */
  }
}

/* ---------- Time Attendance 模块：斜切视频动效（迁移自 diagonalVideoMask.html 板块1） ---------- */
.building-attendance {
  background: #000000;
  padding: 0 0 11.4583vw; /* 220px @1920 */
}

.building-attendance .building-attendance-title {
  margin: 0 auto 1.6667vw !important; /* 下边距 32px @1920，与 Multiple Unlock Methods 统一 */
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 斜切视频区域容器（高度 748px @1920） */
.building-attendance .diagonal-section {
  position: relative;
  width: 100%;
  height: 38.9583vw; /* 748px @1920，替代原 16:7 比例 */
  overflow: hidden;
}

/* 所有色块/视频块通用样式 */
.building-attendance .clip-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.building-attendance .clip-block .block-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 块内文字标签 */
.building-attendance .block-label {
  position: absolute;
  bottom: 2vw;
  left: 3vw;
  z-index: 3;
  color: #ffffff;
}

.building-attendance .block-label .title {
  font-size: 1.8vw;
  margin-bottom: 0.5vw;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.building-attendance .block-label .subtitle {
  font-size: 1vw;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* 两行省略，高度自适应 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 斜切分割：主斜线 (53%, 0%) → (47%, 100%) 左倾（左块向外多裁 0.25% 防止缝隙露底） */
.building-attendance .block-left-clip {
  clip-path: polygon(-0.5% -0.5%, 53.25% -0.5%, 47.25% 100.5%, -0.5% 100.5%);
}

/* 左块视频宽 63%，覆盖斜切可视区 */
.building-attendance .block-left-clip .block-content {
  width: 63%;
}

.building-attendance .block-right-clip {
  clip-path: polygon(53% -0.5%, 100.5% -0.5%, 100.5% 100.5%, 47% 100.5%);
}

/* 右块视频宽 67%、left 47%，主体画面进入斜切可视区 */
.building-attendance .block-right-clip .block-content {
  left: 47%;
  width: 67%;
}

/* 板块1 文字标签位置 */
.building-attendance .label-local {
  max-width: 27.7083vw; /* 532px @1920 */
  left: 3.4896vw; /* 67px @1920 */
  bottom: 1.5625vw; /* 30px @1920 */
}

.building-attendance .label-mobile {
  max-width: 27.7083vw; /* 532px @1920 */
  left: 53.9%;
  bottom: 1.5625vw; /* 30px @1920 */
}

/* 缝隙线条层（SVG 覆盖在色块上方） */
.building-attendance .gap-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.building-attendance .gap-lines line {
  stroke: #000000;
  stroke-width: 0.625vw; /* 12px @1920 */
  vector-effect: non-scaling-stroke;
}

@media screen and (max-width: 768px) {
  .building-attendance {
    padding: 0 0 9.6vw;
  }

  .building-attendance .building-attendance-title {
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 6.4vw;
  }

  .building-attendance .block-label .title {
    font-size: 3.7333vw; /* 14px @375 */
  }

  .building-attendance .block-label .subtitle {
    font-size: 2.1333vw; /* 8px @375 */
  }

  .building-attendance .gap-lines line {
    stroke-width: 1.6vw; /* 6px @375 */
  }
}

/* ---------- Visitor Call 模块：斜切视频动效（迁移自 diagonalVideoMask.html 板块2） ---------- */
.building-visitor {
  background: #000000;
  padding: 0 0 11.4583vw; /* 220px @1920 */
}

/* 标题样式与 Time Attendance 统一 */
.building-visitor .building-visitor-title {
  margin: 0 auto 1.6667vw !important; /* 下边距 32px @1920 */
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 斜切视频区域容器（比例 16:7） */
/* 斜切视频区域容器（高度 748px @1920） */
.building-visitor .diagonal-section {
  position: relative;
  width: 100%;
  height: 38.9583vw; /* 748px @1920，替代原 16:7 比例 */
  overflow: hidden;
}

/* 通用视频块 */
.building-visitor .clip-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.building-visitor .clip-block .block-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字标签 */
.building-visitor .block-label {
  position: absolute;
  bottom: 2vw;
  left: 3vw;
  z-index: 3;
  color: #ffffff;
  text-align: center;
}

.building-visitor .block-label .title {
  font-size: 1.5625vw; /* 30px @1920 */
  letter-spacing: 0.0625vw; /* 1.2px @1920 */
  margin-bottom: 0.5vw;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.building-visitor .block-label .subtitle {
  font-size: 1.25vw; /* 24px @1920 */
  letter-spacing: 0.0469vw; /* 0.9px @1920 */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ============================================
   三块斜切裁剪
   主斜线: (34%, 0%) → (60%, 100%)
   分割线: (100%, 19.5%) → (49.1%, 58%)
============================================ */
.building-visitor .block-left-clip {
  clip-path: polygon(0% 0%, 34% 0%, 60% 100%, 0% 100%);
}

/* 左块视频：宽 76%、top 35% */
.building-visitor .block-left-clip .block-content {
  width: 76%;
  top: 35%;
}

.building-visitor .block-right-top {
  clip-path: polygon(34% 0%, 100% 0%, 100% 19.5%, 49.1% 58%);
}

/* 右上块视频：高 438px、宽 72%、left 28%、top 0 */
.building-visitor .block-right-top .block-content {
  height: 22.8125vw; /* 438px @1920 */
  width: 72%;
  left: 28%;
  top: 0;
}

.building-visitor .block-right-bottom {
  clip-path: polygon(49.1% 58%, 100% 19.5%, 100% 100%, 60% 100%);
}

/* 右下块视频：宽 63%、left 48%、top 15% */
.building-visitor .block-right-bottom .block-content {
  width: 63%;
  left: 48%;
  top: 15%;
}

/* 左块上半部分灰色遮罩（位于左块内，随父级斜切裁剪） */
.building-visitor .left-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52%;
  background: #2a2c30;
  clip-path: polygon(0 0, 34% 0, 100% 40%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.building-visitor .left-mask .mask-text {
  color: #ffffff;
  font-size: 1.45vw;
  text-align: center;
  line-height: 150%;
  width: 40%;
}

/* 各文字标签位置 */
.building-visitor .label-call-center {
  top: 20%;
  left: 56%;
  bottom: auto;
  transform: translateX(-50%);
}

.building-visitor .label-one-click {
  bottom: 10%;
  left: 41.5%;
  transform: translateX(-50%);
}

.building-visitor .label-phonebook {
  width: 24.3%;
  bottom: 1.6667vw; /* 32px @1920 */
  left: 78%;
  transform: translateX(-50%);
}

/* 缝隙线条层（黑色，与 Time Attendance 统一） */
.building-visitor .gap-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.building-visitor .gap-lines line {
  stroke: #000000;
  stroke-width: 0.625vw; /* 12px @1920 */
  vector-effect: non-scaling-stroke;
}

@media screen and (max-width: 768px) {
  .building-visitor {
    padding: 0 0 9.6vw;
  }

  .building-visitor .building-visitor-title {
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 6.4vw;
  }

  .building-visitor .block-label .title {
    font-size: 3.2vw; /* 12px @375 */
  }

  .building-visitor .block-label .subtitle {
    font-size: 2.1333vw; /* 8px @375 */
  }

  .building-visitor .left-mask .mask-text {
    font-size: 2.1333vw; /* 8px @375 */
  }

  .building-visitor .label-call-center {
    top: 15%;
    left: 58%;
  }

  .building-visitor .label-one-click {
    left: 17.5%;
    bottom: 2.6667vw; /* 10px @375 */
  }

  .building-visitor .label-phonebook {
    left: 80%;
    width: 100%;
    bottom: 2.6667vw; /* 10px @375 */
  }

  .building-visitor .gap-lines line {
    stroke-width: 1.6vw; /* 6px @375 */
  }
}

/* ---------- Monitor in Real Time 模块：场景图 + 弹窗卡片动效（迁移自 monitorPopup.html） ---------- */
.building-monitor {
  background: #000000;
  padding: 0 0 11.4583vw; /* 220px @1920 */
}

/* 标题样式与 Time Attendance / Visitor Call 统一 */
.building-monitor .building-monitor-title {
  margin: 0 auto 1.6667vw !important; /* 下边距 32px @1920 */
  font-family: "Montserrat-SemiBold";
  font-size: 2.5vw; /* 48px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* 场景容器：底图 + 绝对定位弹窗卡片 */
.building-monitor .building-monitor-scene {
  position: relative;
}

.building-monitor .building-monitor-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 底部说明文字：覆盖在场景图上，距底 62px，版心内最大宽 1016px（大屏随视口等比缩放，避免字号变大而容器不变导致换行暴增） */
.building-monitor .building-monitor-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.2292vw; /* 62px @1920 */
  z-index: 4;
  margin: 0 auto;
  max-width: 52.9167vw; /* 1016px @1920 */
  text-align: center;
  font-family: "Montserrat";
  font-size: 1.5625vw; /* 30px @1920 */
  line-height: 150%;
  color: #ffffff;
}

/* ===== 弹窗面板通用样式（透明图，不加背景色） ===== */
.building-monitor .popup-panel {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  /* 初始隐藏：缩小到 10%、大幅下移 */
  opacity: 0;
  transform: scale(0.1) translateY(6vw);
}

/* 触发弹出动画（2s，由 10% 放大到 100% 并上浮归位） */
.building-monitor .popup-panel.pop-in {
  animation: monitorPanelPopIn 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes monitorPanelPopIn {
  0% {
    opacity: 0;
    transform: scale(0.1) translateY(6vw);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 面板内图片 */
.building-monitor .popup-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 面板定位（与 pm_bg.png 背景图上四张卡片的实际位置吻合）
   说明：卡片切图带透明边距（以 pm_img01.png 为例：本体约占图宽 55%、左侧留白 22%），
   以下 left/top/width 已按本体在背景图中的位置反推，换正式切图后可微调 ===== */
/* 面板1 - 主屏人员表格卡（本体：left 31%, top 20.5%, 宽 30%） */
.building-monitor .panel--1 {
  top: 8.5%;
  left: 29.5%;
  width: 42%;
}

/* 面板2 - 左侧小浮卡（本体：left 34%, top 35%, 宽 15%）→ pm_img02 本体占图 35.2%宽/32.9%左 */
.building-monitor .panel--2 {
  top: 22.5%;
  left: 20%;
  width: 42%;
}

/* 面板3 - 设备小卡（本体：left 57%, top 37.5%, 宽 8.5%）→ pm_img04 本体占图 19%宽/42%左 */
.building-monitor .panel--3 {
  top: 23%;
  left: 40%;
  width: 42%;
}

/* 面板4 - 右下告警长条卡（本体：left 71%, top 47.5%, 宽 23.5%）→ pm_img03 本体占图 58.3%宽/20.8%左 */
.building-monitor .panel--4 {
  top: 39.5%;
  left: 62.5%;
  width: 42%;
}

/* ===== Mobile 768px 适配：面板改为纵向流式排列 ===== */
@media screen and (max-width: 768px) {
  .building-monitor {
    padding: 0 0 9.6vw;
  }

  .building-monitor .building-monitor-title {
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 6.4vw;
  }

  /* 弹窗卡片保持 PC 的绝对定位（百分比定位+宽度，随视口等比缩放） */

  .building-monitor .building-monitor-note {
    bottom: 2.1333vw; /* 8px @375 */
    max-width: 80%; /* 移动端最大宽 80% */
    font-size: 2.6667vw; /* 10px @375，缩小避免两行文字超出场景图 */
  }
}

/* ---------- System Topology 模块：系统拓扑 ---------- */
.building-topology {
  background: linear-gradient(180deg, #0A1A30 0%, #000000 45%);
  padding: 3.6979vw 0 6.3542vw; /* 上 71px 下 122px @1920 */
}

/* 标题居中，其余样式与前模块统一 */
.building-topology .building-topology-title {
  margin: 0 auto 3.125vw !important; /* 下边距 60px @1920 */
  font-family: "Montserrat-SemiBold";
  font-size: 3.75vw; /* 72px @1920 */
  line-height: 150%;
  color: #ffffff;
  text-align: center;
}

/* 两列卡片：左右间距 16px */
.building-topology .building-topology-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8333vw; /* 16px @1920 */
}

.building-topology .building-topology-item-title {
  margin: 0;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 1.875vw; /* 36px @1920 */
  line-height: 150%;
  color: #ffffff;
}

.building-topology .building-topology-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .building-topology {
    padding: 12.8vw 0 9.6vw;
  }

  .building-topology .building-topology-title {
    font-size: 6.4vw; /* 24px @375 */
    margin-bottom: 6.4vw;
  }

  .building-topology .building-topology-grid {
    grid-template-columns: 1fr;
    gap: 6.4vw;
  }

  .building-topology .building-topology-item-title {
    font-size: 3.7333vw; /* 14px @375 */
    margin-bottom: 2.6667vw; /* 10px @375 */
  }
}

/* DEPRECATED: Product list module (whole section commented out below)
((  ---------- Product list 模块：Series 标签切换 + 产品卡片 ----------  ))
.building-product {
  background: #ffffff;
  padding: 4.1667vw 0 7.6042vw; ((  上 80px 下 146px @1920  ))
}

.building-product .building-product-title {
  margin: 0 auto 2.0833vw !important; ((  下边距 40px @1920  ))
  font-family: "Montserrat-SemiBold";
  font-size: 4.1667vw; ((  80px @1920  ))
  line-height: 150%;
  color: #1a1a1a;
  text-align: center;
}

((  Series 标签：左对齐，激活项蓝色 + 下划线  ))
.building-product .building-product-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #eeeeee;
  overflow: hidden; ((  默认不出现上下滚动条  ))
}

.building-product .product-tab {
  position: relative;
  padding: 0 2.0833vw 0.8333vw; ((  左右 40px 下 16px @1920  ))
  font-family: "Montserrat-SemiBold";
  font-size: 1.25vw; ((  24px @1920  ))
  line-height: 150%;
  color: #1a1a1a;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.building-product .product-tab.active {
  color: #3A66FB;
  font-family: "Montserrat-SemiBold";
}

((  active 下划线：1px，颜色与文字一致  ))
.building-product .product-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #3A66FB;
}

((  面板切换  ))
.building-product .building-product-panel {
  display: none;
}

.building-product .building-product-panel.active {
  display: block;
}

((  产品卡片：4 列，浅灰底  ))
.building-product .building-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); ((  minmax(0,1fr) 允许列收缩，防止长内容撑宽超出可视区域  ))
  gap: 0.8333vw; ((  16px @1920  ))
  margin-top: 2.5vw; ((  48px @1920  ))
}

.building-product .building-product-card {
  min-width: 0; ((  卡片允许收缩  ))
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  padding: 2.0833vw 2.0833vw 3.125vw; ((  上 40px 左右 40px 下 60px @1920  ))
  box-sizing: border-box;
  cursor: pointer; ((  鼠标 hover 小手  ))
}

.building-product .building-product-card-name {
  margin: 0;
  font-family: "Montserrat-SemiBold";
  font-size: 1.25vw; ((  24px @1920  ))
  line-height: 150%;
  color: #1a1a1a;
  ((  最多两行，超出省略（一行时高度自适应，副标题顶上去）；按整词换行不断词  ))
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: normal;
}

.building-product .building-product-card-sub {
  margin: 0.625vw 0 1.25vw; ((  上 12px 下 24px（与图片最小间距）@1920  ))
  font-family: "Montserrat";
  font-size: 0.8333vw; ((  16px @1920  ))
  line-height: 150%;
  color: rgba(35, 24, 21, 0.60);
  ((  单行省略  ))
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; ((  flex 子项允许收缩，让省略号生效而不撑宽卡片  ))
}

((  产品图：宽高 200px，水平居中，margin-top auto 弹性下推贴卡片底部  ))
.building-product .building-product-card-img {
  display: block;
  width: 10.4167vw; ((  200px @1920  ))
  height: 10.4167vw;
  max-width: 100%; ((  不超出卡片内容区，防止移动端溢出网格  ))
  object-fit: contain;
  align-self: center; ((  flex 容器内水平居中  ))
  margin: auto 0 0; ((  上 auto 弹性下推，左右 auto 水平居中  ))
  transition: all 0.3s;
}

((  鼠标 hover 卡片时产品图放大（参数与产品列表页 productAll 一致）  ))
.building-product .building-product-card:hover .building-product-card-img {
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
  .building-product {
    padding: 12.8vw 0 9.6vw;
  }

  .building-product .building-product-title {
    font-size: 6.4vw; ((  24px @375  ))
    margin-bottom: 6.4vw;
  }

  .building-product .building-product-tabs {
    gap: 6.4vw;
    overflow-x: auto; ((  横向滚动，不换行  ))
    overflow-y: hidden; ((  上下不出现滚动条  ))
    scrollbar-width: none; ((  Firefox 隐藏滚动条  ))
    -ms-overflow-style: none; ((  IE/旧 Edge 隐藏滚动条  ))
    -webkit-overflow-scrolling: touch;
  }

  .building-product .building-product-tabs::-webkit-scrollbar {
    display: none; ((  Chrome/Safari 隐藏滚动条  ))
  }

  .building-product .product-tab {
    font-size: 3.7333vw; ((  14px @375  ))
    padding-bottom: 2.6667vw; ((  10px @375  ))
    white-space: nowrap; ((  tab 文字不换行  ))
    flex-shrink: 0; ((  tab 不被压缩  ))
  }

  .building-product .building-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); ((  minmax(0,1fr) 允许子项收缩，防止长内容撑宽  ))
    gap: 3.2vw; ((  12px @375  ))
    margin-top: 6.4vw;
  }

  .building-product .building-product-card {
    padding: 4.2667vw; ((  16px @375  ))
    min-width: 0; ((  卡片本身允许收缩  ))
  }

  .building-product .building-product-card-name {
    font-size: 4.2667vw; ((  16px @375  ))
  }

  .building-product .building-product-card-sub {
    font-size: 3.2vw; ((  12px @375  ))
    margin-top: 1.6vw; ((  6px @375  ))
    padding-bottom: 4.2667vw; ((  16px @375，保证文字与图片最小间距  ))
  }

  .building-product .building-product-card-img {
    width: 26vw; ((  与高度一致  ))
    height: 26vw;
    margin: auto auto 0; ((  margin-top auto 贴卡片底部，标题行数不同也能水平对齐；左右 auto 水平居中  ))
  }
}

*/