/* ===== CSS自定义变量定义 ===== */
/* 定义全局CSS自定义属性，用于统一管理网站的设计令牌和主题配置 */
/* 这些变量可以在整个样式表中重复使用，便于维护和主题切换 */
:root {
  --cst-alpha-rgb: 255, 255, 255; /* 自定义透明度RGB值：白色(255,255,255)，用于创建半透明遮罩效果 */
  --card-gap: 1.5rem; /* 卡片间距：1.5rem，控制卡片组件之间的统一间距 */
  --card-image-radius: 0.75rem; /* 卡片图片圆角半径：0.75rem */
  --card-content-padding: 1.5rem; /* 卡片内容内边距：1.5rem */
  --card-content-color: var(--bulma-text); /* 卡片内容文字颜色：使用Bulma的文本颜色 */
  --card-smallGap: 0.5rem; /* 卡片小间距：0.5rem */
  --card-fontSize: 1rem; /* 卡片字体大小：1rem */
}

/* ===== FontAwesome图标样式说明 ===== */
/*
FontAwesome图标库使用说明：
本项目使用FontAwesome Pro图标库，通过font-weight属性控制图标样式

图标样式对应的font-weight值：
实心（Solid）：font-weight: 900     - 填充样式，视觉效果最重
双色（Duotone）：font-weight: 600   - 双色渐变效果，层次丰富
常规（Regular）：font-weight: 400   - 标准轮廓样式，平衡美观
轻体（Light）：font-weight: 300     - 细线条样式，简洁优雅
细体（Thin）：font-weight: 100      - 最细线条，极简风格

使用示例：
.fa-icon { font-family: "Font Awesome 6 Pro"; font-weight: 400; }
*/

/* ===== 工具类样式 ===== */
/* 
.-revOrder  反转子元素的排列顺序
这是一个实用工具类，用于在Flexbox布局中快速改变子元素的显示顺序
通过设置flex-direction: row-reverse实现从右到左的排列效果
常用于响应式设计中调整元素在不同屏幕尺寸下的布局顺序
 */

/* ===== 查询系统状态提示文字 ===== */
/* 通过CSS伪元素为不同查询状态添加相应的提示文字 */
/* 这种方式将提示文字从JavaScript中分离出来，便于维护和国际化处理 */
/* 使用CSS的::before和::after伪元素动态插入内容，避免DOM操作 */

/* 查询系统初始状态：显示使用说明和免责声明 */
#query_init #query_txt::before {
  content: '本系统之数据只用于客户查询核对证书及报告真伪，请勿作他用！';
}

/* 等待输入状态：提示用户输入报告编号，引导用户操作 */
#query_forInput #query_txt::before {
  content: '请输入你要查询的报告编号！';
}

/* 查询成功状态：显示查询结果提示，确认找到匹配记录 */
#query_exist #query_txt::after {
  content: '查询到以下报告编号：';
}
#query_exist #query_No::after {
  content: ''; /* 报告编号后不添加额外内容 */
}

/* 查询失败状态：显示未找到结果，说明查询条件无匹配 */
#query_notExist #query_txt::after {
  content: '报告编号：';
}
#query_notExist #query_No::after {
  content: ' 不存在。'; /* 明确告知用户该报告编号不存在 */
}

/* 查询进行中状态：显示查询进度，提供用户反馈 */
#query_searching #query_txt::after {
  content: '正在查询'; /* 加载状态提示，改善用户体验 */
}

/* ===== 提示类信息装饰样式 ===== */
/* 给提示类信息添加左右引号装饰符号 */
.has-dot-aside {
  position: relative;
  display: inline-block;
  padding: 0 calc(var(--cst-dot-size) - 1rem); /* 左右内边距，为引号预留空间 */
  --cst-dot-size: 5rem; /* 引号大小变量 */
}
/* 有序列表的引号装饰样式 */
ol.has-dot-aside,
ol.has-dot-aside {
  position: relative;
  display: inline-block;
  margin-left: 0;
  padding-left: var(--cst-dot-size); /* 左内边距，为左引号预留空间 */
}

/* 引号的通用样式设置 */
.has-dot-aside::before,
.has-dot-aside::after {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
  font-size: var(--cst-dot-size); /* 引号字体大小 */
  line-height: 100%;
  color: var(--bulma-text); /* 引号颜色 */
  opacity: 0.2; /* 引号透明度 */
  position: absolute;
}
.has-dot-aside::before {
  content: '“';
  left: 0;
  top: 0;
}
.has-dot-aside::after {
  content: '”';
  line-height: 0;
  right: 0;
  bottom: 0;
}

/* ===== Swiper轮播组件样式 ===== */
/* 旧版Swiper容器样式（已注释，保留作为参考）
.swiper-container {
   width: 100%;
   height: 100%;
}
*/

/* 新版Swiper主容器样式 */
.swiper {
  width: 100%; /* 宽度100% */
  height: auto; /* 高度自适应 */
  margin-left: auto; /* 左边距自动居中 */
  margin-right: auto; /* 右边距自动居中 */

  --swiper-navigation-color: #fff; /* 导航按钮颜色：白色 */
  --swiper-pagination-color: #fff; /* 分页器颜色：白色 */
}
/* 去掉ul的默认margin */
ul.swiper-wrapper {
  margin: 0 !important;
  list-style-type: none !important;
  height: unset;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: unset;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 图片按高度适配，保持完整显示不裁剪 */
}

/* 给父元素上面加渐变层（要求父元素 position:relative） */
.-alpha {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(var(--cst-alpha-rgb), 1) 0%,
    rgba(var(--cst-alpha-rgb), 0) 20%,
    rgba(var(--cst-alpha-rgb), 0) 80%,
    rgba(var(--cst-alpha-rgb), 1) 100%
  );
}

/* 当启用swiper缩略图时，以下swiper_thumbs才生效 */
.swiper_thumbs {
  box-sizing: border-box;
  padding: 0;
}
.swiper_thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.6;
  margin: 0 !important;
}
.swiper_thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

/* 给swiper外围添加wrap_swiperHTML，并增加自定义的pre和next按钮 */
.wrap_swiperHTML {
  display: flex;
  gap: 0.5rem;
}
.wrap_swiperHTML .swiperHTML {
  flex-grow: 1;
  display: block;
}
.wrap_swiperHTML .swiper-aside-prev,
.wrap_swiperHTML .swiper-aside-next {
  display: flex;
  align-items: center;
}
.wrap_swiperHTML .swiper-aside-prev a::before {
  content: '◀';
  font-size: 2rem;
}
.wrap_swiperHTML .swiper-aside-next a::before {
  content: '▶';
  font-size: 2rem;
}

/* swiperHTML：滚动不是图片，是html内容
.swiperHTML.swiper {
   display: block;
}
.swiperHTML.swiper li {
   display: block;
   box-sizing: border-box;
   margin:0;
}
.swiperHTML.swiper ul{
   list-style: 0;
   margin: 0;
}
.swiperHTML.swiper li h5{
   margin-top:1rem;
   margin-bottom: 0.5rem;
}
.swiperHTML.swiper li img{
   height: 10rem;
}
 */

figure {
  overflow: hidden;
  border-radius: 0;
}

figure img {
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}
/* 覆盖bulma的默认设置 */
.card-image:first-child img {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
figure.full {
  width: 100%;
  height: 100%;
  margin: 0;
}
figure.full img {
  height: 100%;
}
figure.box {
  padding: 0;
  border: solid 0 transparent;
}
figure.box.radius img {
  /* 应用.box前提下才有可能添加了border-width空隙 */
  border-radius: calc(0.5 * var(--card-image-radius));
}
figure.radius {
  border-radius: var(--card-image-radius);
  overflow: hidden;
}
figure.radiusTop {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
figure.radiusBottom {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
figure.radiusLeft {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
figure.radiusRight {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

figure.icon {
  width: 100%;
  display: inline;
  align-items: flex-start;
  justify-content: center;
  color: var(--bulma-primary);
}
figure.icon i {
  /* margin:1rem 0; */
}

/* ===== 导航菜单样式 ===== */
/* 网站主导航的样式定义，包括基础布局、交互效果和响应式设计 */

/* 导航开始区域的菜单项 - 设置为等宽分布 */
.navbar-start li.navbar-item {
  padding: 0; /* 内边距：0，移除默认内边距 */
  flex: 1; /* 弹性布局：1，使菜单项等宽分布 */
}

/* 品牌区域菜单项悬停效果 - 保持透明背景 */
.navbar-brand .navbar-item:hover {
  background-color: transparent; /* 背景色：透明，悬停时不改变背景 */
}

/* 如果是html内容 */
.swiper-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   */
}
.swiper-content .swiper-body {
  text-align: center;
}
.swiper-content .subtitle {
  margin-top: 0.5em;
}

[data-url] :is(h5, img, a) {
  cursor: pointer;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--cst-heading-color);
}

.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a {
  color: var(--cst-heading-color);
}

.button.is-text {
  padding: 0;
}
.button.cst-prim {
  border-color: var(--bulma-primary);
  background-color: var(--bulma-primary);
  color: #ffffff;
}

.title,
.title a {
  color: var(--bulma-text-title);
}
.title small {
  font-size: 1rem;
  padding-left: 0.5rem;
  font-style: italic;
}

#banner {
  margin-bottom: 1.5rem;
}

#banner ul {
  height: unset;
}

/* 带title 的当前位置position */
#position {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: solid 1px var(--bulma-primary);
}
#position .breadcrumb {
  margin: 0.5rem 0;
}
#position .title {
  display: none;
  line-height: 50%;
}

.truncated-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* height: calc(var(--bulma-body-line-height) * var(--bulma-body-font-size) * 5); */
}

/* .tabs li 默认是等宽的，这里改成自动  */
.content .tabs li {
  width: auto !important;
}

.card {
  width: 100%;
  font-size: var(--card-fontSize);
}
.card .card-header {
  width: 100%;
  padding: var(--card-smallGap) var(--card-gap);
  gap: var(--card-smallGap);
}

.card.noshadow {
  background-color: transparent;
}
.card.noshadow .card-header {
  padding: var(--card-smallGap);
}

.card h5 {
  font-size: 1em;
}

.card .card-header > * {
  padding-left: 0;
  padding-right: 0;
}
.card .card-header-title {
  margin-bottom: 0;
  color: var(--bulma-primary);
}
.card .card-header-icon::before {
  content: '\f107';
  font-weight: 400;
  font-family: 'Font Awesome 6 Pro';
  color: var(--bulma-primary);
}

.card .card-content {
  width: 100%;
  color: var(--card-content-color);
  padding: var(--card-content-padding);
  overflow: hidden; /* 为了修正里面.button is-pulled-right 浮动造成的高度丢失 */
}
.card .card-content:has(h5:only-child) {
  padding: 1rem;
  text-align: center;
}

.card.noshadow .card-content {
  padding-left: var(--card-smallGap);
  padding-right: var(--card-smallGap);
}

.card .title,
.card h5 {
  font-weight: bold;
  color: var(--bulma-primary);
  margin-bottom: 0;
}

.card .card-content * + * {
  margin-top: var(--card-smallGap);
}

/* 覆盖bulma中 .content p:not(:last-child) 的 margin-bottom 设置*/
.card .card-content p:last-of-type {
  margin-bottom: 0;
}
.card .card-content time {
  float: right;
  font-style: italic;
}
.card .card-footer {
  width: 100%;
  border-top: solid 1px #cccccc;
}

.card .card-footer-item {
  display: flex;
  justify-content: right; /* 设置按钮居左中右 */
  align-items: center;
}

/* 将圆角设置为直角 */
.card.rightangle,
.card.rightangle .card-header,
.card.rightangle .card-footer {
  border-radius: 0;
}

/* 设置不要阴影  */
.card.noshadow,
.card.noshadow .card-header,
.card.noshadow .card-footer,
.card.noshadow .card-image figure:not(.box) {
  box-shadow: none;
}

/* .lrm 从左到右到底排版，.lrm.reverse 从右到左到底排版 */
.card.lrm {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--card-gap); /* 仅横向间距生效 */
  row-gap: calc(0.5 * var(--card-gap)); /* 确保纵向间距为 0 */
  padding: var(--card-gap);
  padding-bottom: calc(0.5 * var(--card-gap));
}
.card.lrm.reverse {
  flex-direction: row-reverse; /* 子元素水平方向从右到左排列 */
}
.card.lrm .card-header {
  /* flex:flex-grow flex-shrink flex-basis */
  flex: 1 1 0;
  padding: 0;
  box-shadow: none;
}
.card.lrm .card-header > * {
  padding: 0;
}

.card.lrm .card-header .card-header-title,
.card.lrm .card-header .card-header-icon {
  /* 需要可覆盖bulma默认值 padding: var(--bulma-card-header-padding)  */
}

.card.lrm .card-image {
  flex: 0 1 40%;
}

.card.lrm .card-content {
  flex: 0 1 100%;
  padding: 0;
}

.card.lrm.noshadow {
  padding: 0;
}

/* .ltr 从左到右排版，.ltr.reverse 从右到左排版 */
.card.ltr {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--card-gap);
}
.card.ltr.reverse {
  flex-direction: row-reverse; /* 子元素水平方向从右到左排列 */
}
.card.ltr .card-header {
  flex: 0 1 100%;
  box-shadow: none;
  border-bottom: solid 1px var(--bulma-primary);
}

.card.ltr .card-image figure,
.card.ltr .card-content {
  /* 先设置上下margin */
  margin: var(--card-gap) 0;
}

.card.ltr .card-image {
  /* flex:flex-grow flex-shrink flex-basis */
  flex: 0 1 30%;
}

.card.ltr .card-image figure {
  /* 再设置左右margin */
  margin-left: var(--card-gap);
  margin-right: 0;
}
.card.ltr .card-content {
  /* flex:flex-grow flex-shrink flex-basis */
  flex: 1 1 0;
  padding: 0;
  padding-right: var(--card-content-padding);
}
.card.ltr.reverse .card-image figure {
  margin-left: 0;
  margin-right: var(--card-gap);
}
.card.ltr.reverse .card-content {
  padding: 0;
  padding-left: var(--card-content-padding);
}

.card.ltr.noshadow .card-image figure {
  margin: 0;
  /*
   margin-left:0;
   margin-right:0;
*/
}

.card.ltr.noshadow .card-content {
  padding-left: var(--card-smallGap);
  padding-right: var(--card-smallGap);
}

/* .card-image:first-child 确保第一个元素是.card-image (即前面没有.card-header元素) */
.card.ltr.noshadow .card-image:first-child,
.card.ltr.noshadow .card-image:first-child + .card-content {
  margin-top: 0;
}

.card.ltr .card-footer {
  flex-basis: 100%;
  border-top: solid 1px var(--bulma-primary);
}

.card.ltr .card-footer-item {
  justify-content: right;
}

#rptResult {
  margin-bottom: 1.5rem;
}
#rptResult table th::after {
  content: '：';
}

#foot_navi ul.navbar-dropdown {
  display: none;
}
/* 底部菜单展开 */
#foot_navi.expand ul.navbar-dropdown {
  display: block;
}

#foot_navi.expand ul {
  display: flex;
}

#foot_navi.expand ul ul {
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 0.5em;
}
#foot_navi.expand ul ul li {
  box-sizing: border-box;
}

.light > ul li a {
  color: #ffffff;
}
.light > ul ul li a {
  color: #a0a0a0;
}
.light > ul ul li a:hover {
  color: var(--bulma-white);
}

.except_ul ul {
  margin-inline-start: 0;
}
.except_ul ul h5 {
  margin-bottom: 0.5rem;
}
.except_ul ul li + li {
  margin-top: 1rem;
}
.except_ul ul li::marker {
  content: '';
}
/* ===== 页面通用样式 ===== */
/* 设置网站的基础样式规范，确保在所有浏览器中的一致性表现 */

/* 页面主体样式 - 定义整个网站的基础背景 */
body {
  background: var(--cst-body-background); /* 背景：使用CSS自定义变量，便于主题切换 */
}

/* bulma中对.content li + li 设置了margin-top，这里恢复为0*/
ul.columns > li {
  margin-top: 0;
}
.columns .column > img {
  width: 100%;
  height: auto;
}

main #aside {
  display: none;
}
main #aside > ul > li {
  display: none;
}
main #aside > ul > li.selected {
  display: block;
}
main #aside > ul > li > a {
  font-size: 1.5em;
}
main #aside ul ul {
  margin-top: 1em;
}

/* -has-aside: 需要显示侧边aside */
main.-has-aside {
  display: flex;
}
main.-has-aside > * {
  box-sizing: border-box;
}
main.-has-aside #aside {
  display: block;
  flex: 3;
}
main.-has-aside #body {
  flex: 9;
}

/* .level建议附加到ul */
ul.level {
  margin: 0;
  list-style: none;
}
/* .level中增加-equal-width子元素等宽属性 */
.level.-equal-width > * {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.level article {
  text-align: center;
}

/* ===== 文章内容样式 ===== */
/* 文章容器的基础样式设置 */

/* 文章元素样式 - 控制文章内容的外边距 */
article {
  margin-block-end: 1em; /* 块级结束边距：1em，为文章底部提供间距 */
  margin-inline-end: 0px; /* 行内结束边距：0，确保文章右侧无额外间距 */
}

/* ===== 布局相关样式 ===== */
/* 定义页面的基础布局结构和间距规范 */

/* 相邻区块间距 - 为连续的section元素添加统一间距 */
section + section {
  margin-top: 2rem !important; /* 上外边距：2rem，在相邻区块间创建视觉分隔 */
}

/* 定义contact和query页面ul */
#com_content ul {
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 2.5rem;
}
#com_content ul li {
  padding-left: 1rem;
}
#com_content ul li::marker {
  font-family: 'Font Awesome 6 Pro';
  font-weight: 100;
  font-style: normal;
  color: var(--bulma-primary);
  content: '\e122';
}

ul li {
  box-sizing: border-box;
}
/* 由于bulma中已对.content ul做过定义，这里恢复.columns的默认值*/
ul.columns {
  margin-inline-start: calc(-1 * var(--bulma-column-gap));
  margin-inline-end: calc(-1 * var(--bulma-column-gap));
  margin-top: calc(-1 * var(--bulma-column-gap));
  list-style-type: none;
}
ul.level,
ul.swiper-wrapper {
  margin: 0;
  list-style: none;
}

/* 

自定义样式，用于覆盖 Bulma 默认样式
@media screen and (max-width: 1023px) 就是touch，用这个来作为小屏幕如手机的断点

 */

@media screen and (max-width: 1023px) {
  main {
    padding: 1rem;
  }

  ul.columns,
  main .columns {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  /* 通过设置flex-direction: column，采用竖直方向排版 */
  .columns {
    flex-direction: column;
    /*
      margin-inline-start: 0;
      margin-inline-end: 0;
      */
  }
  .columns > .column {
    width: 100%;
    padding: 0;
  }
  .columns > .column + .column {
    margin-top: 1rem;
  }

  article,
  article.column {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .title:has(+ article, + .content_info) {
    /* margin-bottom: 1rem !important; */
  }

  /* 手机浏览不出现左右箭头 */
  .swiper-button-prev:after,
  .swiper-button-next:after {
    opacity: 0;
  }
  /* 
   .-is-hidden-touch{
      display: none;
   }
   */
}

/*
此为电脑等大屏幕
当小于1024px，菜单将默认隐藏，点击才展开*/
@media screen and (min-width: 1024px) {
  .navbar-start li a.navbar-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .navbar-start.is-center {
    flex: 1; /*宽度100%*/
    justify-content: space-around;
  }
  .navbar-start.is-center li a.navbar-item {
    justify-content: center;
  }
  .navbar-start.is-center li a.navbar-item {
    padding-left: 0;
    padding-right: 0;
  }
}