/* ============================================
   品质页面（PC端）样式
   设计稿标准：1920px
   换算规则：设计稿数值 ÷ 100 = rem 值（1920px 视口下 1rem = 100px）
   ============================================ */

/* 字体：HarmonyOS Sans SC */
@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.header{
  left: 0;
  right: 0;
}
/* rem 基准：1920px 视口时 1rem = 100px，窗口缩小按比例缩放 */
html {
  font-size: 5.2083vw; /* 100 / 1920 * 100 */
}

/* ≥1920px 大屏：锁定 1rem = 100px，内容区 1920px 居中 */
@media (min-width: 1920px) {
  html { font-size: 100px; }
}

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 1920px; /* 大屏内容区锁定 1920 居中，两侧留白 */
  margin: 0 auto;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1D1D1F;
  background: #F5F5F7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  border: none;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================
   模块1/2：banner（品质承诺 / 废弃回收提示）
   ============================================ */
.q-banner {
  position: relative;
  height: 5rem; /* 500px，第二张设计稿如高度不同告诉我替换 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.q-banner--promise { background-image: url(/static/index/pc/images/product_compat/quality/q_banner1.jpg); }
.q-banner--recycle { background-image: url(/static/index/pc/images/product_compat/quality/q_banner2.jpg); }

.q-banner__content {
  position: absolute;
  top: 1.12rem;  /* 距上 112px */
  left: 3.6rem;  /* 距左 360px */
  width: 5.79rem;  /* 估：文字区宽度 1200px，有设计值告诉我替换 */
  text-align: left;
}

.q-banner__title {
  font-size: 0.3rem; /* 30px */

  font-weight: normal;
  font-weight: bold;
  color: #1D1D1F;
  margin-bottom: 0.15rem; /* 距下 20px */
}

.q-banner__text {
  font-size: 0.16rem; /* 16px */
  color: #1D1D1F;
  line-height: 1.5; /* 估：行高，有设计值告诉我替换 */
  margin-bottom: 0.12rem; /* 段间距 10px */
}

.q-banner__text:last-child { margin-bottom: 0; }

/* ============================================
   模块3：限用物质信息表（切换按钮组 + 图片）
   ============================================ */
.q-substance {
  margin-top: 1.12rem; /* 距上 112px */
}

.q-substance__title {
  text-align: center;
  font-size: 0.3rem; /* 30px */
  font-weight: bold;
  color: #1D1D1F;
  margin-bottom: 0.35rem; /* 距下 35px */
}

/* 切换按钮组 */
.q-substance__tabs {
  display: flex;
  justify-content: center;
  gap: 0.15rem; /* 15px */
}

.q-substance__tab {
  width: 1.94rem;  /* 194px */
  height: 0.6rem;  /* 60px */
  border-radius: 0.5rem; /* 50px */
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.q-substance__tab-name {
  font-size: 0.2rem; /* 20px */
  color: #1D1D1F;
  line-height: 1.2;
}

.q-substance__tab-note {
  font-size: 0.14rem; /* 14px */
  color: #4E4E58;
  line-height: 1.2;
}

/* 选中态 */
.q-substance__tab--active {
  background: #004BFA;
  border-color: #004BFA;
}

.q-substance__tab--active .q-substance__tab-name { color: #fff; }
.q-substance__tab--active .q-substance__tab-note { color: rgba(255, 255, 255, 0.85); }

/* 信息表图片 */
.q-substance__pic {
  margin-top: 0.56rem; /* 距按钮组 56px */
  display: flex;
  justify-content: center;
}

.q-substance__pic img {
  width: 12rem; /* 1200px，高度自适应 */
  height: auto;
}

/* 图表符号说明：宽1200居中、文字靠左 */
.q-substance__notes {
  width: 12rem;           /* 1200px */
  margin: 0.56rem auto 0; /* 距图片 56px */
  text-align: left;
  font-size: 0.16rem;     /* 16px */
  color: #1D1D1F;
  line-height: 1.5;       /* 估：行高 */
  margin-bottom: 3rem; /* 距图片 156px */
}

.q-substance__notes-lead { margin-bottom: 0.12rem; } /* 距下 12px */
.q-substance__notes-item { margin-bottom: 0.12rem; } /* 注1与注2间隔 12px */
.q-substance__notes-item:last-child { margin-bottom: 0; }

/* 注1 符号图：17×17 行内居中对齐 */
.q-substance__notes-item img {
  display: inline-block;
  width: 0.17rem;   /* 17px */
  height: 0.17rem;
  vertical-align: middle;
  margin-bottom: 0.02rem;
}