/* 尚朋高科官网 · 由设计稿一比一还原生成
   桌面端（>=1000px）：整版底图 + 绝对定位的真实文字，坐标按设计稿百分比换算；
   移动端（<1000px）：隐藏整版底图，改为可读的流式内容。 */
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../fonts/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../fonts/AlibabaPuHuiTi-3-85-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --font: "Alibaba PuHuiTi","阿里巴巴普惠体","Microsoft YaHei","PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
  --ink: #3e3a39;
  --brand: #0dad6b;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; }
img { max-width: 100%; height: auto; display: block; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
       overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 9;
         background: #fff; color: var(--ink); padding: 10px 14px; border: 1px solid #ddd; }
.skip:focus { left: 10px; top: 10px; }

.page { position: relative; width: 100%; container-type: inline-size; }

/* 导航：桌面端按设计稿坐标铺在底图上，移动端变成常规导航条 */
.topnav { position: absolute; left: var(--x); top: var(--y); width: var(--w);
           display: flex; justify-content: space-between; gap: .4em;
           font-size: var(--fs); font-size: var(--fsq); color: var(--c); z-index: 3; }
.topnav a { color: inherit; text-decoration: none; white-space: nowrap; }
.topnav a:hover, .topnav a:focus { text-decoration: underline; }
.topnav a[aria-current="page"] { font-weight: 700; }

/* 整版底图：宽高比与设计稿一致，所有叠加元素按百分比定位 */
.stage { position: relative; width: 100%; aspect-ratio: var(--ar);
          background-repeat: no-repeat; background-size: 100% 100%;
          background-position: left top; overflow: hidden; }
.tx { position: absolute; left: var(--x); top: var(--y); margin: 0;
       font-family: var(--font); font-size: var(--fs); font-size: var(--fsq);
       line-height: var(--lh); color: var(--c); letter-spacing: var(--ls);
       font-weight: var(--fw); text-align: var(--al); white-space: pre; text-decoration: none; }
.tx.wrap { width: var(--w); white-space: pre-wrap; overflow-wrap: break-word; }
.tx--w { width: var(--w); }
.tx__plus { position: relative; top: -0.42em; font-size: 0.40em; line-height: 1; }
a.tx:hover, a.tx:focus { text-decoration: underline; }

a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.flow { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 解决方案页分类横幅：上边缘让出导航红条（背景 88-93 行），底边位置不变 */
.sol-banner { position: absolute; left: 0; top: 3.3500%; width: 100%; height: 18.5305%;
             object-fit: cover; object-position: center; }

/* 关于页：企业介绍视频播放热区（覆盖航拍横幅） */
.vplay { position: absolute; left: 0; top: 19.4%; width: 100%; height: 7.7%;
         border: 0; background: none; cursor: pointer; z-index: 3;
         transition: background .25s ease; }
.vplay:hover, .vplay:focus-visible { background: rgba(0, 0, 0, .16); }