@charset "utf-8";
/* ==========================================================================
   pages.css — additive only.

   The rebuilt site keeps the original w3layouts theme (bootstrap + style.css
   + appointment_style.css; font-awesome was dropped — no page ever used it).
   This file adds:
     1. the inner-page body styles the legacy theme *did* define — in
        PG.shsz/css/style.css under #content/.mright — but never loaded from any
        inner page, so inner pages shipped as unstyled plain text;
     2. the few blocks the new content needs (video cards, deck gallery,
        FAQ, spec table, article header);
     3. the Bootstrap `.container` correction for the inner-page row.
   Colours and spacing follow the legacy palette (#ff9900 / #146eb4 / #ce0000 /
   #c42c2c / #ccc).
   ========================================================================== */

img {
  max-width: 100%;
}

/* The legacy product scans are wider than the inner-page column, which used to
   push a horizontal scrollbar. Keep them inside the column. */
.aboutcon3 img {
  height: auto;
}

/* ======================================================================
   1. 内页正文样式
   Reproduced from Cnszyl/PG.shsz/css/style.css (`#content .mright …`), which
   no inner page ever loaded. Selector prefixes were narrowed to the classes
   the rebuilt pages actually use.
   ====================================================================== */

.mright {
  padding-bottom: 20px;
}

/* 面包屑 + 页面标题条：标题靠左（前置红色竖条），面包屑靠右 */
.curr {
  overflow: hidden;
  margin-top: 10px;
  border-bottom: 3px solid #ccc;
}


.curr .crumb {
  float: right;
  padding: 0 5px;
  margin-top: 12px;
  font-size: 13px;
  color: #666;
}

.curr .crumb a {
  color: #666;
}

.curr .crumb a:hover {
  color: #ce0000;
}

.aboutcon3 {
  margin-top: 25px;
  line-height: 21px;
}


/* 正文段落：旧站为 2 字首行缩进 + 30px 行高。
   `.mright` 现在包住整段正文（含 anli 那种没有 .aboutcon3 的页），
   所以按 .mright 作用域统一处理。 */
.mright p,
.aboutcon3 p {
  text-indent: 2em;
  line-height: 30px;
  margin: 0 0 6px;
}

.mright p:last-child,
.aboutcon3 p:last-child {
  margin-bottom: 0;
}

/* 区块小标题（页面内用 color:#c42c2c 标注的那些 <p>）：左对齐、加粗、不缩进 */

/* 居中容器（图片行、图注行）不需要首行缩进 */
.news-article .article-meta,
.faq-item .faq-answer p {
  text-indent: 0;
}

/* 旧站把居中的加粗小标题靠 <b> 实现 */

/* 正文里的图片：统一居中，图注灰字 */
.aboutcon3 figure,
.mright figure {
  margin: 10px 0;
  text-align: center;
}

.aboutcon3 figcaption,
.mright figcaption {
  font-size: 13px;
  color: #888;
  line-height: 24px;
}

/* 正文里通过 <p style="text-align:center"> 包裹的图片 */

/* 前后对比箭头与照片垂直居中，避免落在基线下方 */
.mright img[src*="jiantou"] {
  vertical-align: middle;
}

/* 旧站 .nycont 里的 <br> 常被当间距用；统一收敛为段落间距 */

/* news.html 的正文不在 .mright 里（沿用旧站 col-md-9 布局），单独给出段落节奏 */

/* ------------------------------------------------------------- 视频专区 --- */
.home-video-grid {
  overflow: hidden;
}

.home-video-grid .video-cell {
  margin-bottom: 24px;
}

.home-video-grid .video-frame {
  position: relative;
  background: #000;
  cursor: pointer;
}

.home-video-grid .video-frame img {
  display: block;
  width: 100%;
}

.home-video-grid .video-frame .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.home-video-grid .video-frame .play-btn::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 21px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.home-video-grid .video-frame video {
  display: none;
  width: 100%;
  background: #000;
}

.home-video-grid .video-frame.is-playing img,
.home-video-grid .video-frame.is-playing .play-btn {
  display: none;
}

.home-video-grid .video-frame.is-playing video {
  display: block;
}

.home-video-grid .video-caption {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
  color: #333;
}

/* --------------------------------------------------------- 产品资料图廊 --- */
.deck-gallery {
  overflow: hidden;
  margin: 0 -6px;
}

.deck-gallery a {
  float: left;
  width: 25%;
  padding: 6px;
  box-sizing: border-box;
}

.deck-gallery img {
  display: block;
  width: 100%;
  border: 1px solid #e0e0e0;
}

@media (max-width: 767px) {
  .deck-gallery a {
    width: 50%;
  }
}

/* ------------------------------------------------------------- 常见问题 --- */
.faq-item {
  border: 1px solid #e0e0e0;
  background: #fff;
  margin-bottom: 8px;
}

.faq-item > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #146eb4;
  outline: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] > summary {
  border-bottom: 1px solid #e0e0e0;
}

.faq-item .faq-answer {
  padding: 10px 14px 14px;
  font-size: 15px;
  line-height: 1.9;
}

.faq-item .faq-answer p {
  margin: 0 0 0.7em;
}

.faq-item .faq-answer p:last-child {
  margin: 0;
}

/* ----------------------------------------------------------------- 表格 --- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
}

.spec-table th,
.spec-table td {
  border: 1px solid #e0e0e0;
  padding: 9px 12px;
  font-size: 15px;
  vertical-align: top;
}

.spec-table th {
  background: #f4f8fb;
  color: #146eb4;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------------------------------------------- 新闻详情页 / 图注补充 --- */
.news-article img {
  display: block;
  margin: 0 auto 1em;
}


.news-article .article-meta {
  font-size: 13px;
  color: #999;
  text-align: center;
  margin-bottom: 1.2em;
}

.case-caption {
  color: #c42c2c;
}

/* ======================================================================
   Bootstrap 5 兼容层

   站点已从 Bootstrap 3.4.1 升到 5.3.8，页面脚本只剩原生 JS（jQuery 已整体
   移除）。标记已改用 BS5 写法，但旧 w3layouts 主题
   （style.css / appointment_style.css）是按 BS3 的浮动式导航写的，BS5 又
   删掉了若干 BS3 类。这里把两者的差价补齐，保持原有外观。
   ====================================================================== */

/* BS3 的汉堡按钮由 .icon-bar 三根小横条拼成，尺寸定义在 BS3 的 CSS 里；
   BS5 换成了背景图 .navbar-toggler-icon。主题只覆盖了颜色，所以尺寸要补回来，
   否则三根 span 会缩成零尺寸、按钮变空白。 */
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 4px;
}

/* 主题用 .navbar-nav{float:right} 让导航靠右，BS3 是浮动布局。
   BS5 的 .navbar-collapse 在 md 以上是 flex 容器，float 会失效。
   注意标记里 .navbar-collapse 与 ul.navbar-nav 之间还夹着一层 <nav>，
   真正参与 flex 布局的是那层 <nav>：让它占满剩余宽度，内层 ul 依旧靠 float 靠右。 */
@media (min-width: 768px) {
  .navbar-collapse > nav {
    flex: 1 1 auto;
  }
}


/* BS3 的 `.nav > li > a` 是 display:block（BS3 的 .nav 基类自带），BS5 只把
   display:block 给了 .nav-link，而本站标记里的 <a> 没有 .nav-link 类。
   于是导航链接退化成行内元素：li/ul 只按行盒算高度（≈23px），而链接盒子连
   padding 实际有 ≈52px，上下都溢出到导航条之外，承载 topbg 背景带的这层
   .container 也就被压成 23px 高（旧站是 56px）。
   补回 block，li 就被链接盒子撑开，导航条高度与旧站一致。
   ⚠️ PC 端导航“变矮、文字压出背景带”就是这条缺失造成的。

   同时补上 BS3 的 `.navbar-nav > li > a{line-height:20px}`：主题只覆盖了 padding
   与 font-size、没碰行高，BS5 无此规则时链接行高是继承来的 1.42857×15px =
   21.43px，链接盒高 51.4 而不是旧站的 50（≥992px 差 1.4px；≤991px 主题把字号
   降到 14px，1.42857×14 = 20.0，与 BS3 等价，所以只在 PC 档有差异）。 */
.navbar-nav > li > a {
  display: block;
  line-height: 20px;
}

/* 导航条这层 .container 在旧站靠内联 width:100% 通栏铺背景：BS3 的 .container
   宽度写在媒体查询的 `width` 上，会被内联 width:100% 覆盖。BS5 改用 max-width，
   内联 width:100% 被 max-width（1140/1320px）截住 → topbg 背景带只铺到 1140px
   就断掉，右侧留一条 azure 空白，视口越宽缺口越大（1920 视口约 600px）；
   右对齐的菜单也跟着往左缩约 113px。
   只放开导航条这一层，内页正文的 .container 仍保持 BS5 的居中限宽。 */

/* BS3 的 .navbar-collapse 自带 15px 左右内边距，BS5 归零。不补回来，右对齐的
   菜单会比旧站再靠右 15px（直接贴到容器内容边缘）。
   同宽实测（1282 视口）：旧站末项右边缘 1235px，补上这 15px 才对得上。 */
@media (min-width: 768px) {
  .navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* 导航条顶部那 6px：旧站 word.css 的 `#bs-example-navbar-collapse-1 nav ul{
   padding-top:.5%}`。百分比内边距按包含块宽度算，0.5% × nav 宽 1205.3px =
   6.03px，正好是旧站实测的 ul padding-top 6.02px；加上 50px 链接盒，
   导航条 56.03px，与旧站的 56.02px 对齐（总高 66px，旧站 66.8px，余下
   ≤1px 是旧站页面自带的 window.scrollTo(0,1) 亚像素偏移）。
   只在 ≥768px 生效：<768px 时这条 ul 变成折叠菜单，word.css 那条百分比内边距
   会压掉主题 `.navbar-nav{…padding:1em}` 的 16px 顶部内边距（旧站当年就是这样，
   移动端菜单只剩约 1.7px 上边距）。本次只对齐 PC，移动端保持现状。 */
@media (min-width: 768px) {
  #bs-example-navbar-collapse-1 nav ul {
    padding-top: 0.5%;
  }
}

/* --- 导航悬停块（旧站 PG.shsz/css/word.css 的同名规则，原样补回）---
   旧站 16 个页面（含内页）全都加载了 word.css，其中这组规则在 PC 端一直生效：
   链接常驻 10px 圆角，悬停变成黄绿底、白字的圆角块，颜色 1s 过渡。
   新版按计划没复制 word.css（该文件含 IE expression() 与全局
   html{font-size:125%!important}），悬停就只剩主题的蓝色文字，这里按原值补回。
   选择器沿用旧站的 id：它就在 15 个页面的导航折叠容器上，且只有 id 级选择器
   能压过主题的 `.navbar-default .navbar-nav > li > a:hover{background:none}`
   （那条是 0,3,2，用类选择器只能打平、靠源码顺序取胜，太脆）。 */
#bs-example-navbar-collapse-1 li a {
  border-radius: 10px;
  transition: all 1s;
}

#bs-example-navbar-collapse-1 li a:hover {
  background-color: yellowgreen;
  color: #fff;
}

/* --------------------------------------------------------------- 栅格 --- */
/* BS5 默认槽宽 24px，旧站用的是 BS3 的 30px。.container 与 .row 都要覆盖：
   只改 .row 会造成“行负边距 15px、容器内边距 12px”的错配，栅格整体外扩 3px。
   设成 30px 后，.row 的 -15px 与列的 15px、容器的 15px 都与 BS3 一致。 */
.container,
.row {
  --bs-gutter-x: 30px;
}

/* 关键一条：BS3 栅格靠 float 并排，列不要求有 .row 父级；BS5 改成 flex，
   .row > * 才是列，列一旦不直接放在 .row 里就会上下堆叠。
   旧站标记里有多处列直接放在主题自己的容器中（.emergency_cases_top、
   .inner_sec_info_agileits_w3、.services-top-grids、.services-bottom-grids，
   以及 .col-md-3 里叠放的 col-4 广告图），在 BS5 下会塌成竖排。
   这里按 BS3 的分档补回 float：在 flex 行里 float 会被忽略，
   所以对走 .row 的栅格没有任何影响。 */

@media (min-width: 768px) {

  .col-md-3,
  .col-md-4,
  .col-md-8,
  .col-md-10 {
    float: left;
  }
}

/* 没有 .row 父级的列拿不到 .row > * 提供的槽内边距，单独补上。 */