/* ============================================================
   home.css — 首页 (深色科技风) 还原自 Figma node 1101:2148
   ============================================================ */

/* ---------------- HERO 轮播 ---------------- */
.hero {
  position: relative;
  min-height: 960px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;   /* 设计稿: Section 底部圆角 20px */
  background: var(--c-navy);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-bg::after {                 /* 左侧加深，保证文字可读 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,1,36,.85) 0%, rgba(0,1,36,.35) 45%, rgba(0,1,36,0) 70%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-content { padding-top: 480px; max-width: 912px; }
/* 进入幻灯时文字轻微上浮 */
.hero-slide.is-active .hero-content > * {
  animation: heroRise .8s ease both;
}
.hero-slide.is-active .hero-tags { animation-delay: .08s; }
.hero-slide.is-active .hero-btn { animation-delay: .16s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-title {
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 90px;
  letter-spacing: -1.8px;
  color: var(--c-white);
}
.hero-title--narrow { max-width: 648px; }      /* 幻灯2: 约束宽度换 2 行 */
.hero-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  margin-top: 16px;
  font-size: 24px; line-height: 28px; letter-spacing: .75px;
  color: var(--c-white);
}
.hero-tags i { color: var(--c-grey-45); font-style: normal; font-size: 16px; font-family: var(--font-en); }
.hero-btn { margin-top: 32px; }
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: var(--c-white);
  letter-spacing: .4px;
  transition: all .24s ease;
}
.btn-outline:hover {
  border-color: var(--c-teal);
  background: rgba(61,200,193,.08);
  transform: translateY(-2px);
}
/* 指示器：左下角 (设计稿 x200 y850)，3 个 10px 圆点 / 间距 10px */
.hero-indicator {
  position: absolute; left: 0; right: 0; bottom: 100px; z-index: 3;
  display: flex; gap: 10px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #414141; padding: 0;
  transition: background .3s ease, transform .3s ease;
}
.hero-dot:hover { transform: scale(1.2); }
.hero-dot.is-active { background: #d9d9d9; }

/* ---------------- 公司简介 (白色屏) ---------------- */
.intro { padding: 175px 0 120px; background: var(--c-paper); color: var(--c-ink); overflow: hidden; }
/* 顶部两列：标题(左 643px) + 标语/段落/按钮(右，左缘 = x843) */
.intro-top {
  display: grid;
  grid-template-columns: 643px minmax(0, 1fr);
  align-items: start;
}
.intro-heading { line-height: 1.2; }
.intro-heading .line-cn {
  display: block; font-size: 56px; font-weight: 400; color: var(--c-ink);
  letter-spacing: .5px;
}
.intro-heading .line-en {
  display: block;
  font-family: 'Open Sans', var(--font-en); font-size: 56px; font-weight: 400;
  color: var(--c-ink); text-transform: uppercase; letter-spacing: 1px;
}
.intro-tagline {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 48px; line-height: 1.35; color: var(--c-ink); opacity: .8;
}
.intro-para {
  margin-top: 20px;
  font-family: var(--font-cn); font-weight: 300;
  font-size: 18px; line-height: 1.6; color: var(--c-ink); opacity: .8;
  max-width: 797px;
}
.intro-desc .btn { margin-top: 28px; }

/* 图片画廊：字幕(左下) + 轮播(右栏左对齐、向右溢出、可拖拽滚动) */
.intro-gallery { position: relative; margin-top: 64px; }
.intro-caption {
  position: absolute; left: var(--gutter); bottom: 0; z-index: 2;
  max-width: 580px;
  font-size: 18px; color: var(--c-ink); opacity: .7; letter-spacing: .5px;
}
/* 视窗：左缘锁定右栏左缘(x843)，向右延伸到屏幕边；左右溢出一律裁切，
   所以任何时刻左侧不会露出，只完整显示当前位一张图 */
.intro-carousel-wrap {
  margin-left: calc(var(--gutter) + 643px);
  overflow: hidden;
}
/* 轨道：点击切换时整体平移 */
.intro-carousel {
  position: relative;
  display: flex; gap: 24px; width: max-content;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.intro-card {
  position: relative; flex: none;
  width: 618px; aspect-ratio: 618 / 420;
  /* cursor: pointer; */
}
.intro-card--img {
  border-radius: var(--radius-lg);
  overflow: hidden; background: #04081e;
}
.intro-card--img:hover img { transform: scale(1.05); }
.intro-card--img img {
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  transition: transform .55s ease;
}
/* 画廊圆点指示器（仅手机滑动轮播时显示） */
.intro-dots { display: none; }
.intro-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(0, 1, 36, .2);
  transition: width .25s ease, background .25s ease;
}
.intro-dot.is-active { width: 20px; border-radius: 4px; background: var(--c-teal); }

/* ---------------- 深色面板 (合作品牌 + 网络) ---------------- */
.dark-panel {
  position: relative;
  border-radius: 20px 20px 0 0;
  background: var(--c-navy);   /* #000124 */
}

/* ---------------- 合作品牌 ---------------- */
.partners { padding: 100px 0 0; }
.block-head { margin-bottom: 40px; }

.partners-grid {
  display: grid;
  grid-template-columns: 596px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;   /* 左右两栏等高，底部对齐 */
}

/* 左：品牌列表 — 7 张卡均分填满列高，使末卡底部与右栏详情底部对齐 */
.brand-list { display: flex; flex-direction: column; gap: 16px; }
.brand-list > li { display: flex; flex: 1 1 0; min-height: 0; }
.brand-item {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 20px 20px 20px 32px;
  text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid #000124;
  border-radius: 16px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.brand-item:hover { border-color: rgba(61,200,193,.25); }
.brand-item:hover .brand-chevron{
  opacity: 1;
  transform: translateX(0);
}
.brand-item.is-active {
  border-color: rgba(61,200,193,.1);   /* 设计稿: border rgba(61,200,193,0.1) */
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.brand-logo-box {
  flex: none;
  width: 92px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px;
  padding: 8px 12px;
}
.brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'Open Sans', var(--font-en);
  font-weight: 700; font-size: 16px; line-height: 24px; color: var(--c-white);
}
.brand-name i { color: var(--c-white); font-style: normal; font-size: 12px; }
.brand-name em { font-style: normal; font-weight: 400; font-family: var(--font-cn); }
.brand-cat { font-size: 16px; line-height: 16px; color: #949494; }
.brand-chevron { width: 9px; height: 16px; margin-left: auto; flex: none; opacity: 0; transform: translateX(-4px);transition: opacity .4s ease,transform .4s ease; }
.brand-item.is-active .brand-chevron { opacity: 1;transform: translateX(0); }

/* 右：品牌详情 */
.brand-detail {
  position: relative;
  background: rgba(255,255,255,.04);   /* 设计稿: 无渐变，纯 4% 白叠加 */
  border: 1px solid #000124;
  border-radius: 24px;
  padding: 50px 60px;
  overflow: hidden;
  min-height: 698px;
}
.brand-detail-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid #000124;    /* 设计稿: 分隔线 #000124 */
}
.bd-id { display: flex; align-items: center; gap: 16px; }
.bd-logo {
  flex: none; width: 117px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 10px 16px;
}
.bd-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bd-title { display: flex; flex-direction: column; gap: 6px; }
.bd-name { font-family: 'Open Sans', var(--font-en); font-weight: 700; font-size: 24px; color: var(--c-white); line-height: 1; }
.bd-sub { font-size: 16px; color: #949494; }
.bd-link {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid #000124;           /* 设计稿: 访问官网按钮边框 #000124 */
  border-radius: 12px;
  font-size: 16px; color: var(--c-white);
  transition: background .25s ease, border-color .25s ease;
}
.bd-link:hover { background: rgba(61,200,193,.1); border-color: rgba(61,200,193,.3); }
.bd-link .arrow { width: 20px; height: 8px; }
.brand-detail-body { position: relative; padding-top: 40px; }
.bd-cats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 20px; line-height: 26px; color: var(--c-white);
}
.bd-cats-icon { width: 13px; height: 13px; }
.bd-cats-val { color: #24b2ab; }
.bd-desc { margin-top: 28px; }
.bd-desc p {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 20px; line-height: 1.6; color: var(--c-white);
  margin-bottom: 18px;
}
.bd-desc p:last-child { margin-bottom: 0; }

/* ---------------- 全球化服务网络 (整版叠加构图) ---------------- */
/* 合作品牌 与 地图 间距(设计 ~178px)；地图底部不留白以便页脚叠压 */
.network { padding: 180px 0 0; }
.network-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  aspect-ratio: 1920 / 940;
}
/* 地图+地标画布：桌面铺满 stage，作为地图/连接线/地标的定位与 cqw 缩放上下文 */
.network-canvas {
  position: absolute; inset: 0;
  container-type: inline-size;
}
/* 地图群组图：设计稿 x=205 w=1539 (≈10.68% / 80.16%) */
.network-mapimg {
  position: absolute;
  left: 10.68%; top: 0; width: 80.16%; height: auto;
  user-select: none; pointer-events: none;
}
/* 左上角文案块：设计稿 x=201.5 y=32 w=616 */
.network-text {
  position: absolute;
  left: 10.49%; top: 3.4%; width: 33%;
  display: flex; flex-direction: column;
}
.network-title {
  font-family: var(--font-cn); font-weight: 400;
  font-size: 26px;
  font-size: max(26px, 2.5cqw); line-height: 1.2; color: var(--c-white);
}
.network-para {
  margin-top: 24px;
  margin-top: 1.25cqw;
  font-family: var(--font-cn); font-weight: 300;
  font-size: 13px;
  font-size: max(13px, 1.04cqw); line-height: 1.6; color: var(--c-white); opacity: .8;
}
.network-btn { margin-top: 32px; margin-top: 2.6cqw; align-self: flex-start; }

/* 连接竖线 + 底部光点 */
.net-line {
  position: absolute; width: 1px;
  background-color: #3DC8C1;
  transform: scaleY(0);
  transform-origin: bottom center;
}
/* 动画触发：区块进入视口后，依次播放 dot→线→文字→光环脉冲 */
.network-stage.in .net-line {
  animation: netLineGrow .6s .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes netLineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ::after — 底部光点，最先出现 */
.net-line::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%) scale(0);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(61,200,193,.18), 0 0 12px 2px rgba(61,200,193,.65);
  opacity: 0;
}
.network-stage.in .net-line::after {
  animation: netDotIn .4s both;
}
@keyframes netDotIn {
  from { opacity: 0; transform: translate(-50%, 50%) scale(0); }
  to   { opacity: 1; transform: translate(-50%, 50%) scale(1); }
}

/* ::before — 光环脉冲，最后循环 */
.net-line::before {
  content: ""; position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%) scale(0);
  width: 50px; height: 50px;
  background-color: rgba(61, 200, 193, .3);
  border-radius: 50%;
  opacity: 0;
}
.network-stage.in .net-line::before {
  animation: netPulse 2s 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes netPulse {
  0%, 100% { opacity: .15; transform: translate(-50%, 50%) scale(.8); }
  50%      { opacity: .55; transform: translate(-50%, 50%) scale(1.4); }
}

/* 据点标注：城市名(白) + 英文(青)，48px → 2.5cqw */
.net-loc {
  position: absolute;
  display: flex; align-items: baseline; gap: 8px; gap: .42cqw;
  white-space: nowrap; line-height: 1.2;
  opacity: 0;
  transform: translateY(4px);
}
.network-stage.in .net-loc {
  animation: netLocIn .4s .8s both;
}
@keyframes netLocIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 4 个标记点错峰延迟（每个相差 0.35s） ---- */
/* 第 1 个：默认延迟，无需覆盖 */

/* 第 2 个 */
.network-stage.in .net-line:nth-of-type(2)            { animation-delay: .65s; }
.network-stage.in .net-line:nth-of-type(2)::after     { animation-delay: .35s; }
.network-stage.in .net-line:nth-of-type(2)::before    { animation-delay: 1.55s; }
.network-stage.in .net-loc:nth-of-type(2)             { animation-delay: 1.15s; }

/* 第 3 个 */
.network-stage.in .net-line:nth-of-type(3)            { animation-delay: 1s; }
.network-stage.in .net-line:nth-of-type(3)::after     { animation-delay: .7s; }
.network-stage.in .net-line:nth-of-type(3)::before    { animation-delay: 1.9s; }
.network-stage.in .net-loc:nth-of-type(3)             { animation-delay: 1.5s; }

/* 第 4 个 */
.network-stage.in .net-line:nth-of-type(4)            { animation-delay: 1.35s; }
.network-stage.in .net-line:nth-of-type(4)::after     { animation-delay: 1.05s; }
.network-stage.in .net-line:nth-of-type(4)::before    { animation-delay: 2.25s; }
.network-stage.in .net-loc:nth-of-type(4)             { animation-delay: 1.85s; }
.net-loc b {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 18px;
  font-size: max(18px, 2.5cqw); color: var(--c-white);
}
.net-loc span {
  font-family: 'Open Sans', var(--font-en); font-weight: 300;
  font-size: 18px;
  font-size: max(18px, 2.5cqw); color: var(--c-teal);
}

@supports not (aspect-ratio: 1 / 1) {
  .network-stage { height: 49vw; max-height: 940px; }
  .network-canvas { height: 100%; }
}

@supports not (font-size: 1cqw) {
  .network-title { font-size: clamp(26px, 2.5vw, 48px); }
  .network-para { font-size: clamp(13px, 1.04vw, 20px); margin-top: clamp(16px, 1.25vw, 24px); }
  .network-btn { margin-top: clamp(24px, 2.6vw, 50px); }
  .net-loc { gap: clamp(4px, .42vw, 8px); }
  .net-loc b, .net-loc span { font-size: clamp(18px, 2.5vw, 48px); }
}

/* ============================================================
   响应式  ·  PC(>1280) / 平板(≤1280, ≤1024) / 手机(≤768, ≤480)
   ============================================================ */

/* ---------- 桌面双列 → 堆叠: ≤1536 (仅 1920 等宽屏保留双列设计版) ---------- */
@media (max-width: 1536px) {
  /* 简介双列 → 单列堆叠：标题 → 标语/段落/按钮 → 字幕 → 图片轮播(从容器左缘起) */
  .intro-top { grid-template-columns: 1fr; gap: 32px; }
  /* 字幕回到 gutter 栅格，与上方文字/下方轮播左缘对齐 */
  .intro-caption { position: static; margin: 0 0 16px var(--gutter); max-width: none; }
  .intro-carousel-wrap { margin-left: var(--gutter); }
  /* 合作品牌：双列 → 手风琴(单列)。详情卡由 JS 嵌入当前品牌项内，紧贴其下方 */
  .partners-grid { grid-template-columns: 1fr; gap: 20px; }
  .brand-list { display: flex; flex-direction: column; gap: 16px; }
  .brand-list > li { flex: none; flex-direction: column; align-items: stretch; }
  .brand-detail { min-height: 0; }
  .brand-list .brand-detail { margin-top: 12px; }   /* 嵌入项内时与按钮的间距 */
  /* 手风琴里标签已展示 logo/名称，详情卡不再重复——隐藏其头部标识，仅留访问官网入口 */
  .brand-list .brand-detail .bd-id { display: none; }
  .brand-list .brand-detail-head { justify-content: flex-start; padding-bottom: 24px; }
  .brand-list .brand-detail-body { padding-top: 24px; }
  /* 当前项箭头转向下，提示已展开 */
  .brand-chevron { transition: opacity .25s ease, transform .25s ease; }
  .brand-list .brand-item.is-active .brand-chevron { transform: rotate(90deg); }
}

/* ---------- 小笔记本 / 大平板横屏: ≤1280 (字号收缩) ---------- */
@media (max-width: 1280px) {
  .hero-title { font-size: 60px; line-height: 1.2; }
  .hero-content { padding-top: 360px; }
  .intro-heading .line-cn, .intro-heading .line-en { font-size: 44px; }
  .intro-tagline { font-size: 36px; }
}

/* ---------- 平板: ≤1024 ---------- */
@media (max-width: 1024px) {
  .hero-title { font-size: 52px; }
  .hero { min-height: 760px; }
  .hero-content { padding-top: 300px; }
  .hero-indicator { bottom: 72px; }
  .intro-heading .line-cn, .intro-heading .line-en { font-size: 40px; }
  .intro-tagline { font-size: 32px; }
  .block-head .section-title { font-size: 38px; }
  /* 服务网络 → 竖向堆叠(文案 → 地图 → 据点卡片)，取消页脚叠压 */
  .partners { padding-bottom: 0; }
  .network { padding-top: 96px; }
  /* 文案(可读)在上 → 地图+地标画布(保持 PC 叠加造型, 整体等比缩小)在下 */
  .network-stage {
    aspect-ratio: auto; display: flex; flex-direction: column; gap: 24px;
  }
  .network-text { position: static; left: auto; top: auto; width: auto; order: 1; margin: 0 var(--gutter); }
  .network-title { font-size: 32px; }
  .network-para { font-size: 16px; }
  .network-btn { margin-top: 24px; }
  /* 画布转为常规块: 满宽 + 锁定 1920/940 比例, 内部地图/连接线/地标按 cqw 等比缩放 */
  .network-canvas { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1920 / 940; }
  .net-loc b, .net-loc span { font-size: 18px; font-size: 2.5cqw; }   /* 纯 cqw, 与 PC 同比例 */
  .net-line::after { width: 8px; height: 8px; width: 1.6cqw; height: 1.6cqw; box-shadow: 0 0 0 .8cqw rgba(61,200,193,.18), 0 0 2cqw .4cqw rgba(61,200,193,.6); }
  .net-line::before { width: 8cqw; height: 8cqw; }
}

/* ---------- 手机: ≤768 ---------- */
@media (max-width: 768px) {
  /* Hero */
  .hero { min-height: 600px; border-radius: 0 0 16px 16px; }
  .hero-content { padding-top: 240px; }
  .hero-title { font-size: 38px; line-height: 1.25; }
  .hero-title--narrow { max-width: 100%; }
  .hero-tags { font-size: 17px; }
  .hero-indicator { bottom: 48px; }
  /* 简介 */
  .intro { padding: 72px 0; }
  .intro-heading .line-cn, .intro-heading .line-en { font-size: 34px; }
  .intro-tagline { font-size: 26px; }
  .intro-para { font-size: 16px; }
  /* 图片画廊：手机端「原生 scroll-snap 滑动轮播 + 圆点」，左右均留 gutter(与正文一致) */
  .intro-gallery { margin-top: 28px; }
  .intro-caption { margin: 0 var(--gutter) 14px; }
  .intro-carousel-wrap {
    /* margin: 0 var(--gutter);             */
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .intro-carousel-wrap::-webkit-scrollbar { display: none; }
  /* 轨道宽度=可视区(非 max-content)，使卡片用 % 相对可视区计算，露出小段下一张作滑动提示 */
  .intro-carousel { flex-direction: row; width: 100%; gap: 14px; padding: 0; transform: none !important; }
  .intro-carousel figure[aria-hidden="true"] { display: none; }   /* 隐藏桌面无限轮播的 JS 克隆 */
  /* 轨道宽度确定(=可视区)，卡片用确定的 width 计算(避免 % flex-basis 退化为 auto)；露出 28px 下一张作滑动提示 */
  .intro-card { flex: 0 0 auto; width: calc(100% - 28px); max-width: none; scroll-snap-align: start; cursor: default; }
  .intro-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
  /* 合作品牌单列 */
  .partners { padding-top: 72px; }
  .brand-list { grid-template-columns: 1fr; }
  .block-head .section-title { font-size: 30px; }
  .brand-detail { padding: 28px 22px; }
  .bd-name { font-size: 20px; }
  .bd-cats, .bd-desc p { font-size: 16px; }
  .brand-detail-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* 网络 */
  .network { padding-top: 72px; }
  .network-title { font-size: 28px; }
  /* .network-mapimg{
    left: 0;
    width: 90%;
  } */
}

/* ---------- 小手机: ≤480 ---------- */
@media (max-width: 480px) {
  .hero { min-height: 540px; }
  /* .hero-content { padding-top: 220px; } */
  .hero-title { font-size: 30px; }
  .hero-tags { font-size: 15px; gap: 0 8px; }
  .hero-tags i { font-size: 14px; }
  .intro { padding: 56px 0; }
  .intro-heading .line-cn, .intro-heading .line-en { font-size: 28px; }
  .intro-tagline { font-size: 22px; }
  .block-head .section-title, .network-title { font-size: 26px; }
  .section-sub { font-size: 16px; }
  .brand-name { font-size: 15px;line-height: 1.1;margin-bottom: 6px; }
  .brand-cat { font-size: 14px; }
  .bd-name { font-size: 18px; }
  .brand-item{
    padding: 10px;
  }
  .bd-link{
    height: 46px;
  }
}