a:hover {
  text-decoration: none !important;
}

.division {
  display: block;
  margin: 20px 0;
}

/* 主菜单当前栏目活跃态：下划线 + 加粗（参考站内 .navActive 表现形式）
   类名由 js/header.js 仅在可持续发展页添加 */
.header-menu .nav .item a.navActive {
  text-decoration: none;
  border-bottom: 1px solid gray;
  padding-bottom: 3px;
  font-weight: bold;
}

.sustainable-development {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 100px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.sustainable-nav.pc2017Nav {
  position: sticky;
  top: 90px;
  z-index: 1000;
  /* PC 端二级菜单背景色（覆盖 nav2017_new.css 中 .pc2017Nav 的 #fff，保留底部横线图） */
  background-color: #f1f2f2;
}

/* 页面内不再显示栏目名“可持续发展”，二级菜单保持原位置 */
.sustainable-nav.pc2017Nav #secondNav {
  padding-left: 595px;
  /* 595px = 原 .nowPage 宽度 570px + padding-left 25px */
}

.sustainable-nav.mobile2017Nav {
  position: fixed;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 60px;
  background: #00417b;
  z-index: 1000;
}

.sustainable-nav.mobile2017Nav .con,
.sustainable-nav.mobile2017Nav .con ul {
  width: 100%;
  height: 100%;
}

.sustainable-nav.mobile2017Nav .con {
  display: flex;
}

.sustainable-nav.mobile2017Nav .nowPage {
  display: flex;
  flex: 1;
  width: auto;
  padding: 0;
  text-align: center;
}

.sustainable-nav.mobile2017Nav .nowPage a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.sustainable-nav.mobile2017Nav .nowPage a.navActive {
  color: #00417b;
  background: #fff;
  border-bottom: 0;
  padding-bottom: 0;
}

.sustainable-nav.mobile2017Nav .con ul {
  flex: 4;
}

.sustainable-nav.mobile2017Nav .con ul li {
  height: 100%;
  text-indent: 0;
  background: #00417b;
}

.sustainable-nav.mobile2017Nav .con ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.sustainable-nav.mobile2017Nav .con ul li a.navActive {
  color: #00417b;
  background: #fff;
  border-bottom: 0;
  padding-bottom: 0;
}

.banner {
  position: relative;
  /* 声明为尺寸容器：内部可用 cqi（= 容器宽度的 1%）跟随 banner/图片宽度缩放 */
  container-type: inline-size;
}
.banner .content {
  position: absolute;
  left: 9.1%;
  top: 50%;
  transform: translateY(-50%);
}
.banner .title {
  color: #fff;
  /* 兜底：不支持 cqi/容器的浏览器按视口近似缩放（60px @ 1920 视口） */
  font-size: clamp(24px, 3.125vw, 60px);
  /* 60px @ 1720px（PC 下 banner 的最大宽度 = 1920 - 100*2）
     60 / 1720 = 3.4884cqi，其余宽度等比缩放；24px 为可读性下限 */
  font-size: clamp(24px, 3.4884cqi, 60px);
  line-height: 1.2;
  color: #013565;
  font-weight: bold;
  font-family: "weaveBold", "DINCond-Bold", sans-serif;

}
.banner .line {
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #013565;
  width: 50px;
}
.banner .desc {
  color: #fff;
  /* 兜底：不支持 cqi/容器的浏览器按视口近似缩放（25px @ 1920 视口） */
  font-size: clamp(14px, 1.30208333vw, 25px);
  /* 25px @ 1720px，与 .title 同一比例：25 / 1720 = 1.4535cqi */
  font-size: clamp(14px, 1.45348837cqi, 25px);
  line-height: 1.5;
  color: #013565;
}

@media screen and (max-width: 768px) {
  .sustainable-development {
    padding-bottom: 60px;
  }

  /* 移动端在等比基础上再缩小一档（容器约 748px 时 16.5px / 11px，窄屏触底 13px / 10px） */
  .banner .title {
    font-size: clamp(13px, 2.2vw, 18px);
    font-size: clamp(13px, 2.2cqi, 18px);
    line-height: 1.3;
  }

  .banner .desc {
    font-size: clamp(10px, 1.5vw, 12px);
    font-size: clamp(10px, 1.5cqi, 12px);
  }

  .banner .line {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 24px;
  }
}

.sustainable-page {
  display: none;
}

.sustainable-page.is-active {
  display: block;
}
.sustainable-development-page .banner {
  width: 100%;
  position: relative;
}
.sustainable-development-page .banner img {
  width: 100%;
}
.sustainable-development-page .banner .banner-content {
  width: 40%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45%;
  line-height: 1.4;
}
.sustainable-development-page .banner .banner-content .banner-title {
  color: #094271;
  font-weight: bold;
  font-size: clamp(5px, 2.3vw, 60px);
}
.sustainable-development-page .banner .banner-content .banner-line {
  width: clamp(10px, 9.5vw, 586px);
  margin-top: -5px;
  margin-bottom: clamp(0px, 0.5vw, 10px);
}

.sustainable-development-page .banner .banner-content .banner-subhead {
  color: #627a4e;
  font-weight: bold;
  font-size: clamp(5px, 1vw, 30px);
  line-height: 2;
}
.sustainable-development-page .banner .banner-content .banner-desc {
  color: #575757;
  font-size: clamp(5px, 0.9vw, 30px);
  letter-spacing: 1px;
  margin-bottom: clamp(5px, 1vw, 20px);
}

.sustainable-development-page .content {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 120px 0;
}

.sustainable-development-page .content-img {
  flex: 0 0 58.1770833333%;
  max-width: 1117px;
  overflow: hidden;
}

.sustainable-development-page .content-img img {
  display: block;
  width: 100%;
  height: auto;
}

.sustainable-development-page .content-desc {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 40px clamp(24px, 4.1666666667vw, 80px);
  font-family: "Microsoft YaHei", sans-serif;
}

.sustainable-development-page .title {
  margin: 10px 0;
  color: #052e6a;
  font-size: 30px;
  line-height: 1.5;
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 600;
}
.sustainable-development-page .line {
  margin-top: 0px;
  margin-bottom: 20px;
  border-bottom: 5px solid #052e6a;
  width: 30px;
}
.sustainable-development-page .text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.employee .banner {
}

.employee .banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1800px;
}

.employee .content-1,
.employee .content-2 {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 120px 0;
}

.employee .content-1 .content-img,
.employee .content-2 .content-img {
  flex: 0 0 45.6565656566vw;
  max-width: 904px;
  overflow: hidden;
}

.employee .content-img img {
  display: block;
  width: 100%;
  height: auto;
}

.employee .info {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 40px clamp(24px, 4.1666666667vw, 80px);
  font-family: "Microsoft YaHei", sans-serif;
}

.employee .info .title,
.employee .content-3 .title {
  margin: 10px 0;
  margin-bottom: 25px;
  color: #052e6a;
  font-size: 18px;
  line-height: 1.5;
  font-family: "Microsoft YaHei", sans-serif;
}
.employee .info .text,
.employee .content-3 .text {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  margin-bottom: 50px;
}

.employee .content-3 {
  width: 100%;
  margin: 120px 0;
}
.employee .content-3 .info {
  padding-left: 0;
}

.employee .content-3 .content-img {
  width: 100%;
  overflow: hidden;
}

.responsible-drinking .banner {
}

.responsible-drinking .banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1800px;
}

.responsible-drinking .content-1,
.responsible-drinking .content-2 {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 120px 0;
}

.responsible-drinking .content-1 .content-img,
.responsible-drinking .content-2 .content-img {
  flex: 0 0 45.6565656566vw;
  max-width: 904px;
  overflow: hidden;
}

.responsible-drinking .content-img img {
  display: block;
  width: 100%;
  height: auto;
}

.responsible-drinking .info {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 40px clamp(24px, 4.1666666667vw, 80px);
  font-family: "Microsoft YaHei", sans-serif;
}

.responsible-drinking .info .title,
.responsible-drinking .content-3 .title {
  margin: 10px 0;
  margin-bottom: 25px;
  color: #052e6a;
  font-size: 18px;
  line-height: 1.5;
  font-family: "Microsoft YaHei", sans-serif;
}

.responsible-drinking .info .text,
.responsible-drinking .content-3 .text {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  margin-bottom: 50px;
}

.responsible-drinking .content-3 {
  width: 100%;
  margin: 120px 0;
}

.responsible-drinking .content-3 .content-img {
  width: 100%;
  overflow: hidden;
}

.planet .banner {
}

.planet .banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1800px;
}

.planet .content-1,
.planet .content-2 {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 120px 0;
}

.planet .content-1 .content-img,
.planet .content-2 .content-img {
  flex: 0 0 45.6565656566vw;
  max-width: 904px;
  overflow: hidden;
}

.planet .content-img img {
  display: block;
  width: 100%;
  height: auto;
}

.planet .info,
.planet .content-2 {
  font-family: "Microsoft YaHei", sans-serif;
}

.planet .info {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 40px clamp(24px, 4.1666666667vw, 80px);
}

.planet .info .title,
.planet .content-2 .title {
  margin: 10px 0;
  margin-bottom: 25px;
  color: #052e6a;
  font-size: 18px;
  line-height: 1.5;
}

.planet .info .text,
.planet .content-2 .text {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.planet .content-2 {
  flex-direction: column;
  align-items: stretch;
}

.planet .content-2 .info,
.planet .content-2 .content-img {
  width: 100%;
}

.planet .content-2 .content-img {
  max-width: none;
  flex-basis: auto;
}
.planet .content-2 .info {
  padding-left: 0;
}

.develop .banner {
}

.develop .banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1800px;
}

.develop .content-1,
.develop .content-2,
.develop .content-3 {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 120px 0;
}

.develop .content-2 .info,
.develop .content-3 .info {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 40px clamp(24px, 4.1666666667vw, 80px);
  font-family: "Microsoft YaHei", sans-serif;
}

.develop .content-2 .content-img,
.develop .content-3 .content-img {
  flex: 0 0 46.3020833333vw;
  max-width: 889px;
  overflow: hidden;
}

.develop .content-img img {
  display: block;
  width: 100%;
  height: auto;
}

.develop .info .title {
  margin: 10px 0;
  margin-bottom: 25px;
  color: #052e6a;
  font-size: 18px;
  line-height: 1.5;
  font-family: "Microsoft YaHei", sans-serif;
}

.develop .info .text {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.sustainable-development-page .more {
  display: inline-block;
  margin-right: 15px;
  color: #052e6a;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  .sustainable-development-page .content:nth-child(5),
  .sustainable-development-page .content:nth-child(3) {
    flex-direction: row-reverse;
  }

  .sustainable-development-page .content:nth-child(5) .content-desc,
  .sustainable-development-page .content:nth-child(3) .content-desc {
    text-align: right;
  }

  .sustainable-development-page .content:nth-child(5) .line,
  .sustainable-development-page .content:nth-child(3) .line {
    margin-left: auto;
    margin-right: 0;
  }

  /* PC 端：四个板块的文案块向图片方向外扩一点点（白底遮住图片内侧边缘）。
     普通行（图左文右）文案向左压住图片；反向行（文左图右）文案向右压住图片。 */
  .sustainable-development-page .content-desc {
    position: relative;
    z-index: 1;
    background-color: #fff;
    margin-left: -60px;
    /* 面板被撑高后，文案在面板内垂直居中；左对齐行文案靠左 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  /* 文案块最小高度 = 图片高度的 4/5，形成完整白色面板。
     .content 声明为尺寸容器后，1cqi = 容器宽度的 1%；
     图片宽度 = 容器宽度 × 1117/1920，图片高度 = 图片宽度 ÷ (1117/697) = 容器宽度 × 697/1920，
     其 4/5 = 0.8 × 697/1920 ≈ 29.0417cqi（content-3 的图片比例不同，单独修正为 29.6765cqi）。 */
  .sustainable-development-page .content {
    container-type: inline-size;
  }

  .sustainable-development-page .content-desc {
    /* 兜底：不支持 cqi 的浏览器按视口近似计算（1920 及以下与实际宽度基本一致） */
    min-height: calc((100vw - 200px) * 0.290417);
    min-height: 29.0417cqi;
  }

  .sustainable-development-page .content:nth-child(4) .content-desc {
    /* 循环再生：图片 1159×739，比例更高，最小高度略大 */
    min-height: calc((100vw - 200px) * 0.296765);
    min-height: 29.6765cqi;
  }

  .sustainable-development-page .content:nth-child(5) .content-desc,
  .sustainable-development-page .content:nth-child(3) .content-desc {
    margin-left: 0;
    margin-right: -60px;
    align-items: flex-end;
  }
}

@media screen and (max-width: 768px) {
  .sustainable-development {
    width: 100%;
    padding: 0 10px;
  }
  .sustainable-development-page .content {
    flex-direction: column;
    align-items: stretch;
  }

  .sustainable-development-page .content-img {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    order: 2;
  }

  .sustainable-development-page .content-desc {
    width: 100%;
    padding: 32px 20px;
    order: 1;
  }

  .sustainable-development-page .text {
    margin: 10px 0;
  }

  .employee .content-1,
  .employee .content-2 {
    flex-direction: column;
    align-items: stretch;
    margin: 50px 0;
  }

  .responsible-drinking .content-1,
  .responsible-drinking .content-2 {
    flex-direction: column;
    align-items: stretch;
    margin: 50px 0;
  }

  .responsible-drinking .content-1 .content-img,
  .responsible-drinking .content-2 .content-img {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    order: 2;
  }

  .responsible-drinking .content-1 .info,
  .responsible-drinking .content-2 .info {
    width: 100%;
    padding: 32px 20px;
    order: 1;
    padding-left: 0;
  }

  .responsible-drinking .content-3 {
    margin: 50px 0;
  }

  .employee .content-1 .content-img,
  .employee .content-2 .content-img {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    order: 2;
  }

  .employee .info {
    width: 100%;
    padding: 32px 20px;
    order: 1;
  }

  .employee .content-3 {
    margin: 50px 0;
  }

  .develop .content-1,
  .develop .content-2,
  .develop .content-3 {
    flex-direction: column;
    align-items: stretch;
    margin: 50px 0;
  }

  .develop .content-2 .content-img,
  .develop .content-3 .content-img {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    order: 2;
  }

  .develop .content-1 .info,
  .develop .content-2 .info,
  .develop .content-3 .info {
    width: 100%;
    padding: 32px 20px;
    order: 1;
  }

  .planet .content-1,
  .planet .content-2 {
    flex-direction: column;
    align-items: stretch;
    margin: 50px 0;
  }

  .planet .content-1 .content-img,
  .planet .content-2 .content-img {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    order: 2;
  }

  .planet .info {
    width: 100%;
    padding: 32px 20px;
    order: 1;
  }
}