/* icon */
@import url("bootstrap-icons.min.css");

/* font */
@import url("css2.css");

:root {
  --black-color--: #000;
  --white-color--: #fff;
  --transparent-color--: transparent;
  --main-color--: #023894;
  --blue-color--: #023894;
  --gray-color--: #e5e5e5;
  --place-color--: #999999;
  --acco-color--: #f2f2f2;
  --price-color--: #f3f3f3;
  --border-blue--: #023894;
  --border-white--: #ffff;
  --border-red--: red;
  --border-success--: #c3c2c2;
  --border-footer--: #303030;
  --blog-span-color--: #a0aec0;
  --input-color--: #797b7d;
  --search-span-color--: #323232;
  --font-body--: "Microsoft YaHei", sans-serif;
}

body {
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  font-family: var(--font-body--);
  color: var(--black-color--);
}

#loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-size: 18rem;
}

h2 {
  font-size: 75px;
  line-height: 85px;
  font-weight: 700;
  color: var(--black-color--);
  margin: 2.6rem 0 3rem;
}

h3 {
  font-size: 55px;
  line-height: 65px;
  font-weight: 700;
  color: var(--black-color--);
}

h4 {
  font-size: 45px;
  line-height: 55px;
  font-weight: 700;
  color: var(--black-color--);
}

h5 {
  font-size: 19px;
  line-height: 29px;
  color: var(--black-color--);
  font-weight: 400;
}

h6 {
  font-size: 17px;
  line-height: 27px;
  color: var(--black-color--);
  font-weight: 400;
}

p {
  text-transform: capitalize;
  margin-bottom: 0px;
}

li {
  list-style: none;
}

.mt-30 {
  margin-top: 30px;
}

.all-margin {
  margin: 65px 0;
}

.all-padding {
  padding: 135px 0;
}

.color {
  color: #023894 !important;
}

.text-blue {
  color: #023894 !important;
}

.bg-main {
  background-color: var(--main-color--);
}

.bg-blue {
  background-color: #023894;
}

.bg-gray {
  background-color: var(--gray-color--);
}

.bg-price {
  background-color: var(--price-color--);
}

.border-blue {
  border-color: #023894 !important;
}

.border-white {
  border-color: var(--border-white--) !important;
}

.border-black {
  border-color: var(--black-color--) !important;
}

.border-success {
  border-color: var(--border-success--) !important;
}

.border-footer {
  border-color: var(--border-footer--) !important;
}

.btn,
button {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  text-transform: capitalize;
}

.main-btn.btn {
  color: var(--white-color--);
  background-color: var(--main-color--);
}

.main-btn.btn:hover {
  color: var(--main-color--);
  background-color: var(--white-color--);
}

img {
  width: 100%;
  object-fit: cover;
}

.img .inner-img {
  overflow: hidden;
}

.img .inner-img img {
  transform: scale(1);
  transition: all 0.5s ease-out 0s;
}

.img:hover .inner-img img {
  transform: scale(1.1);
}

.text-up h3 {
  margin: 1rem 0 3rem;
}

.main-btn.btn,
.navbar .dropdown-menu li .dropdown-item,
.offcanvas .nav-link,
.offcanvas .dropdown-item,
.banner .btn,
.banner .owl-nav span,
.blog .blue-box,
.blog h4,
.footer a,
.price-page .btn,
.price-page .blue-btn.btn,
.error-page .btn,
.team-about img,
.blog-page .blog-sec a p,
.blog-page .col-8 h4,
.blog-page .col-8 .btn,
.contact-page .btn,
.uncategorized-page .col-6 h4,
.uncategorized-page .col-6 .btn,
.section h4,
.section .btn {
  transition: all 0.3s ease-in-out;
}

.service2 .col-4,
.price-page .col-4,
.faq-page .col-6 {
  padding: 0px 15px;
}

.blog-page .col-8 .row .col-6,
.uncategorized-page .col-6,
.section .row .col-4 {
  padding: 0 20px;
}

.team-about .col-3 {
  padding: 0 25px;
}

/* header */

.navbar-top {
  height: 6px;
}

.navbar-top img {
  height: 22px;
}

.navbar-top .col-6 .part.pe-4 {
  padding-right: 2rem !important;
}

header {
  top: 0;
  position: sticky;
  z-index: 999;
  background-color: var(--transparent-color--);
  transition: background-color 0.2s ease;
}

header.sticky {
  background-color: var(--white-color--);
  border-bottom: #e5e5e5 1px solid;
}

header.sticky .navbar a,
header.sticky .navbar i {
  color: var(--black-color--);
}

.navbar .container-fluid {
  padding: 0 50px;
}

.navbar-nav a {
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  color: var(--black-color--);
  text-decoration: none;
}

.navbar i {
  color: var(--black-color--);
}

.navbar .logo img {
  max-width: 140px;
}

.navbar .sticky-logo img {
  max-width: 110px;
}

.navbar .header-btn .btn {
  width: 167px;
  height: 58px;
  border-radius: 50px;
}

#navli li:hover {
  background-color: #023894;
  /* 背景变色，例如蓝色 */
  color: #ffffff;
  /* 文字变色，例如白色 */
  cursor: pointer;
  /* 可选：鼠标变为手型 */
  transition: all 0.3s ease;
  /* 可选：添加平滑过渡效果 */
}

#navli li:hover a {
  color: #ffffff !important;
  /* 文字变色，例如白色 */
}

header .justify-content-end {
  font-size: 14px;
  color: #023894;
  margin-bottom: 50px;
}

header .justify-content-end a {
  color: #303030;
  padding-left: 10px;
  text-decoration: none;
  height: 20px;
  display: flex;
  align-items: center;
  /* 核心：内容垂直居中 */
  justify-content: center;
}

header .end-right-line {
  letter-spacing: 0.04em;
  border-right: solid 1px #e5e5e5;
  padding-right: 10px;
  height: 20px;
  display: flex;
  align-items: center;
  /* 核心：内容垂直居中 */
  justify-content: center;
}

header .navbar .nav-item .dropdown .btn {
  padding: 36px 20px !important;
}

header.sticky .navbar .nav-item .dropdown .btn {
  padding: 22px 20px !important;
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
}

.navbar .dropdown-menu {
  width: 200px;
  height: 281px;
  position: absolute;
  top: 100%;
}

.navbar .dropdown-menu li .dropdown-item {
  color: var(--white-color--);
  background-color: var(--blue-color--);
}

.navbar .dropdown-menu li .dropdown-item:hover {
  background-color: var(--main-color--);
}

.navbar .dropdown-menu .dropdown-item {
  padding: 15.2px;
}

.navbar .dropdown-menu .border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style)
    var(--border-blue--) !important;
}

.navbar .col-6 .fs-7 {
  font-size: 10px !important;
  margin-left: 0.3rem;
}

.navbar .col-3 a .btn {
  width: 179px;
  height: 54px;
  color: var(--white-color--);
  background-color: var(--main-color--);
}

/* modal */

.navbar .modal-btn i {
  color: var(--black-color--);
}

.modal-content {
  background-color: var(--black-color--);
  opacity: 98%;
}

.modal-backdrop {
  position: relative;
  background-color: var(--transparent-color--);
}

.modal-header .btn-close {
  background-image: url("../image/w-close.png");
  padding: 20px !important;
}

.btn-close {
  opacity: 100% !important;
  box-shadow: none !important;
  padding: 5px !important;
}

.modal input {
  font-size: 20px;
  background-color: var(--transparent-color--) !important;
  box-shadow: none !important;
}

.form-control::placeholder {
  color: var(--input-color--);
}

/* offcanvas  */

.offcanvas .btn-close {
  background-image: url("../image/close.png");
  height: 2em;
}

.offcanvas .btn {
  position: relative;
  left: 51%;
}

.offcanvas .btn.show {
  transform: rotate(180deg) !important;
  margin-left: 3rem !important;
}

.offcanvas {
  padding: 0 1rem;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  text-transform: capitalize;
  z-index: 99999;
  width: 300px !important;
  background-color: var(--white-color--);
}

.offcanvas li a {
  font-size: 15px;
  line-height: 25px;
  font-weight: 500;
}

.offcanvas .dropdown-menu li a {
  font-size: 13px;
  line-height: 23px;
  font-weight: 500;
}

.offcanvas .nav-link,
.offcanvas .dropdown-item {
  color: var(--black-color--);
}

.offcanvas .nav-link:hover,
.offcanvas .dropdown-item:hover {
  color: var(--main-color--);
  background-color: var(--transparent-color--);
}

.offcanvas .dropdown {
  overflow-x: hidden;
}

.dropdown-menu.show {
  position: relative !important;
  transform: translate(13px, 0px) !important;
  background-color: var(--transparent-color--);
}

/* banner */

.banner img {
  height: 868px;
}

.banner .img-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner .btn {
  width: 174px;
  height: 54px;
}

.banner .owl-nav {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 2rem;
  margin: 0;
}

.banner .owl-nav button {
  font-size: 25px !important;
}

.banner .owl-theme .owl-nav [class*="owl-"]:hover {
  background: var(--transparent-color--);
}

.banner .owl-nav span {
  padding: 3px 16px;
  color: var(--white-color--);
  background: var(--main-color--);
}

.banner .owl-nav span:hover {
  background-color: var(--blue-color--) !important;
}

/* --- 产品展示区：无限滚动样式 --- */

/* 1. 包装器：隐藏溢出部分 */
.nx-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  /* 可选：添加左右渐变遮罩，让边缘融合更自然 */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

/* 2. 轨道：包含所有卡片，负责移动 */
.nx-marquee-track {
  display: flex;
  gap: 30px;
  /* 卡片之间的间距 */
  width: max-content;
  /* 宽度由内容决定 */
  /* 动画定义：匀速向左移动 */
  animation: nx-scroll-left 25s linear infinite;
}

/* 3. 单个产品卡片 */
.nx-product-card {
  width: 280px;
  /* 固定卡片宽度 */
  flex-shrink: 0;
  /* 防止被压缩 */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #eee;
}

/* 4. 链接层 (全屏可点) */
.nx-product-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* 5. 图片区域 (复用你现有的 .img .inner-img 逻辑) */
.nx-pro-img-box {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f0f0f0;
}

.nx-pro-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
  /* 对应你原有的 transition */
}

/* 悬停放大效果 (对应你原有的 .img:hover .inner-img img) */
.nx-product-card:hover .nx-pro-img-box img {
  transform: scale(1.1);
}

/* 6. 悬停遮罩层 (出现箭头图标) */
.nx-pro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 56, 148, 0.7);
  /* 主题蓝半透明 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nx-pro-overlay i {
  font-size: 40px;
  color: #fff;
  transform: translateX(-20px);
  transition: transform 0.3s ease;
}

/* 悬停时显示遮罩 */
.nx-product-card:hover .nx-pro-overlay {
  opacity: 1;
}

.nx-product-card:hover .nx-pro-overlay i {
  transform: translateX(0);
}

/* 7. 文字信息区域 */
.nx-pro-info {
  padding: 20px;
  text-align: left;
}

.nx-pro-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--black-color--);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}

.nx-pro-desc {
  font-size: 14px;
  color: var(--place-color--);
  margin: 0;
  line-height: 1.4;

  /* 两行省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡片整体悬停反馈 */
.nx-product-card:hover {
  transform: translateY(-5px);
  /* 轻微上浮 */
  box-shadow: 0 10px 25px rgba(2, 56, 148, 0.15);
  /* 蓝色阴影 */
  border-color: var(--main-color--);
}

.nx-product-card:hover .nx-pro-title {
  color: var(--main-color--);
}

/* 8. 动画关键帧：向左滚动 */
@keyframes nx-scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    /* 移动距离 = (单张卡片宽 + 间距) * 卡片数量(原始组) */
    /* 假设 5 张卡片，每张 280px, 间距 30px -> (280+30)*5 = 1550px */
    /* 这里用 calc 动态计算可能比较复杂，建议直接根据实际内容调整百分比或固定值 */
    /* 简单做法：移动 50% 的总宽度 (因为我们有两组相同的数据) */
    transform: translateX(-50%);
  }
}

/* 9. 交互：鼠标悬停时暂停滚动 */
.nx-marquee-wrapper:hover .nx-marquee-track {
  animation-play-state: paused;
}

/* 10. 响应式适配 */
@media (max-width: 768px) {
  .nx-product-card {
    width: 240px;
    /* 手机端稍窄 */
  }

  .nx-pro-img-box {
    height: 160px;
  }

  /* 手机端滚动速度可以稍慢一点，或者保持 */
  .nx-marquee-track {
    animation-duration: 20s;
  }
}

/* service */

.service .all-padding {
  padding: 40px 0;
}

.service .row {
  margin-right: 0;
  margin-left: 0;
}

.service .col-6 {
  padding-left: 6.3em;
}

/* service2 */

.service2 .col-4 .box {
  height: 471px;
  padding: 19px 19px 43px 19px;
}

.service2 .img {
  height: 260px;
  margin-bottom: 19px;
}

.service h3 {
  font-size: 45px;
  line-height: 55px;
  font-weight: 700;
}

.service span {
  margin-bottom: 5px;
}

/* about */

.about .col-6.ps-6 {
  padding-left: 4.3rem;
}

.about h3 {
  margin: 2rem 0 3.2rem;
}

.about ul {
  margin: 3rem 0 2.6rem;
}

.about .btn {
  width: 175px;
  height: 45px;
}

/* service3 */

.service3 .col-3 {
  padding: 66px 0px 60px 50px;
}

.service3 .img {
  width: 50px;
  height: 50px;
}

.service3 h4 {
  margin: 2.3rem 0 1rem;
}

/* testimonial */

.testimonial .col-12 .box {
  height: 321px;
  padding: 55px 30px 55px 40px;
}

.testimonial .img {
  width: 50px;
  height: 50px;
}

/* img */

.fix-img {
  background-attachment: fixed;
  background-position: center;
}

.img-section {
  position: relative;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  height: 682px;
}

.img-section h3 {
  margin-top: 3rem;
}

/* request */

.request .part {
  margin-top: -30rem;
  z-index: 99;
  position: relative;
  padding: 40px 50px 80px 50px;
  background-color: var(--white-color--);
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  margin-bottom: 4rem;
}

.request input::placeholder,
.request textarea::placeholder {
  color: var(--place-color--);
  opacity: 100%;
}

.request input,
.request textarea {
  height: 53px;
}

.request input,
textarea {
  outline: none;
  padding: 15px 20px;
}

.request input,
.request textarea {
  border: 1px solid var(--gray-color--);
}

.request .btn {
  width: 251px;
  height: 58px;
}

.request .btn:hover {
  border: 1px solid var(--main-color--);
}

.request .error-border {
  border: 1px solid var(--border-red--);
}

.request .error-message {
  color: var(--border-red--);
  display: none;
}

/* --- 公司简介区域基础 --- */
.nx-about-section {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
  /* 假设 all-padding 包含这个，若已有可省略 */
}
.nx-about-section-inner {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  /* 假设 all-padding 包含这个，若已有可省略 */
}
.nx-about-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}

/* =======================
   左侧：创意图片堆叠
   ======================= */
.nx-about-image-col {
  flex: 0 0 45%;
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 底层装饰块 */
.nx-about-img-bg {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 85%;
  height: 85%;
  background-color: var(--main-color--);
  /* 需定义 --main-color-- 或使用具体颜色如 #023894 */
  border-radius: 8px;
  z-index: 1;
  transition: transform 0.5s ease;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

/* 上层真实图片 */
.nx-about-img-front {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 85%;
  height: 85%;
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.nx-about-img-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

/* 悬停交互效果 */
.nx-about-image-col:hover .nx-about-img-bg {
  transform: translate(-10px, -10px);
}

.nx-about-image-col:hover .nx-about-img-front {
  transform: translate(10px, 10px);
  box-shadow: 0 30px 60px rgba(2, 56, 148, 0.25);
}

.nx-about-image-col:hover .nx-about-img-front img {
  transform: scale(1.05);
}

/* 经验徽章 */
.nx-about-badge {
  position: absolute;
  bottom: 30px;
  left: -20px;
  background: #ffffff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  animation: floatBadge 3s ease-in-out infinite;
}

.nx-badge-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--main-color--);
  line-height: 1;
}

.nx-badge-text {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  text-transform: uppercase;
}

@keyframes floatBadge {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* =======================
   右侧：文字内容
   ======================= */
.nx-about-text-col {
  flex: 1;
  padding-left: 20px;
}

.nx-about-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  /* 若无变量可用具体颜色 */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot-separator {
  width: 8px;
  height: 8px;
  background-color: var(--main-color--);
  border-radius: 50%;
  display: inline-block;
}

.nx-about-title {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 700;
  color: #222;
  margin-bottom: 30px;
}

.text-blue {
  color: var(--main-color--);
}

.nx-about-content p {
  font-size: 16px;
  line-height: 28px;
  color: #555;
  text-transform: none;
  margin-bottom: 0;
}

.mt-30 {
  margin-top: 30px;
}

/* =======================
   【最终修正版】现代箭头长条按钮
   ======================= */
.nx-about-btn-wrap {
  margin-top: 40px;
}

.nx-modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  height: 55px;
  background-color: var(--main-color--);
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  padding: 0 25px 0 30px;
  position: relative;
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 8px 20px rgba(2, 56, 148, 0.25);
  box-sizing: border-box;
  white-space: nowrap;
}

/* 按钮文字 */
.btn-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.4s ease;
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 箭头圆圈容器 - 核心居中修复 */
.btn-arrow {
  width: 36px;
  height: 36px;
  background-color: #ffffff;
  border-radius: 50%;

  /* 强制绝对居中 */
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--main-color--);
  position: absolute;
  right: 8px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
  overflow: hidden;
  line-height: 0;
  /* 消除行高影响 */
}

/* 箭头图标 - 核心加粗修复 */
.btn-arrow i {
  font-size: 18px;
  /* 加大尺寸 */
  font-weight: 700;

  /* 使用描边让线性图标变粗 */
  -webkit-text-stroke: 0.8px var(--main-color--);
  paint-order: stroke fill;

  transition: all 0.4s ease;
  display: block;
  transform: translateX(0);
}

/* --- 悬停整体效果 --- */
.nx-modern-btn:hover {
  background-color: #ffffff;
  box-shadow: 0 10px 25px rgba(2, 56, 148, 0.35);
  transform: translateY(-3px);
  padding-right: 35px;
  /* 给箭头滑动留空间 */
}

.nx-modern-btn:hover .btn-label {
  color: var(--main-color--);
}

.nx-modern-btn:hover .btn-arrow {
  background-color: var(--main-color--);
  color: #ffffff;
  transform: translateX(5px);
  /* 圆圈向右滑 */
}

/* 悬停时箭头内部图标也要变白描边 */
.nx-modern-btn:hover .btn-arrow i {
  -webkit-text-stroke: 0.8px #ffffff;
  transform: translateX(2px);
  /* 图标在圆圈内微移 */
}

/* =======================
   响应式适配
   ======================= */
@media (max-width: 992px) {
  .nx-about-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .nx-about-image-col {
    flex: none;
    width: 100%;
    height: 400px;
  }

  .nx-about-img-bg {
    top: -20px;
    left: -20px;
    width: 90%;
    height: 90%;
  }

  .nx-about-img-front {
    bottom: -20px;
    right: -20px;
    width: 90%;
    height: 90%;
  }

  .nx-about-text-col {
    padding-left: 0;
    text-align: center;
  }

  .nx-about-subtitle {
    justify-content: center;
  }

  .nx-about-title {
    font-size: 32px;
  }

  .nx-about-btn-wrap {
    display: flex;
    justify-content: center;
  }
}

/* questions */

.questions h3 {
  margin: 35px 0px;
}

.accordion-body {
  padding: 20px 30px;
}

.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-radius: 0;
}

.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--black-color--);
  box-shadow: none;
  background-color: var(--white-color--);
}

.accordion-button {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button,
.accordion-button:not(.collapsed) {
  background-color: var(--acco-color--);
  padding: 20px 30px;
  margin-top: 20px;
}

.accordion-button::after {
  background-image: url("../image/plus-black.svg");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("../image/minus-black.svg");
}

/* blog */

.blog h3 {
  margin-bottom: 50px;
}

.blog .btn {
  padding: 12px 15px;
  position: absolute;
  z-index: 99;
}

.blog img {
  height: 262px;
}

.blog .img {
  position: relative;
}

.blog .blue-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.3s;
  background-color: var(--blue-color--);
  opacity: 0%;
}

.blog .blue-box:hover {
  opacity: 40%;
}

.blog h4 {
  color: var(--black-color--);
}

.blog .item:hover h4 {
  color: var(--blue-color--);
}

.blog .item:hover .blue-box {
  opacity: 40%;
}

.blog .blog-info {
  padding: 25px 20px 35px 20px;
}

/* footer */

.footer {
  overflow-x: hidden;
}

.footer form input {
  width: 100%;
  height: 49px;
  outline: none;
  color: var(--white-color--);
  background-color: transparent;
}

.footer form .footer-btn button {
  width: 100%;
  height: 60px;
  color: var(--white-color--);
  background-color: var(--main-color--);
}

.footer .col-3 h4 {
  margin-bottom: 36px;
}

.footer .accordion-button {
  margin-bottom: 15px;
  margin-top: 10px;
}

.footer .padding-footer {
  padding: 130px 0 115px;
}

.footer a {
  color: var(--white-color--);
}

.footer a:hover {
  color: var(--main-color--);
}

.footer .fix-btn .btn {
  color: var(--white-color--);
  background-color: var(--main-color--);
  font-size: 0.8rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  bottom: 2%;
  right: 1%;
  z-index: 999;
}

.footer .accordion {
  --bs-accordion-bg: var(--transparent-color--);
}

.footer .accordion-button.accordion-footer {
  font-size: 24px;
  line-height: 34px;
  color: var(--white-color--);
  background-color: transparent;
  box-shadow: none;
}

.footer .accordion-button::after {
  background-image: url("../image/arrowhead-up.png");
  transform: rotate(180deg);
}

.footer .accordion-button:not(.collapsed)::after {
  background-image: url("../image/arrowhead-up.png");
  transform: rotate(360deg);
}
/* inner-page-top */
.top-img {
  background-image: url("../img/slider-01.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 28%;
  min-height: 700px;
}

.top-img1 {
  background-image: url("../img/aboutbanner1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 45%;
  min-height: 700px;
}

.top-img2 {
  background-image: url("../img/suatainability.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 61%;
  min-height: 700px;
}

.top-img3 {
  background-image: url("../img/slider-03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 61%;
  min-height: 700px;
}

.top-img4 {
  background-image: url("../img/contact.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 61%;
  min-height: 700px;
}

/* 顶部横幅手机端适配 */
@media (max-width: 992px) {
  .top-img,
  .top-img1,
  .top-img2,
  .top-img3,
  .top-img4 {
    min-height: 450px;
    background-position: center 20%;
  }
}

@media (max-width: 768px) {
  .top-img,
  .top-img1,
  .top-img2,
  .top-img3,
  .top-img4 {
    min-height: 320px;
    background-position: center 20%;
  }
}

@media (max-width: 480px) {
  .top-img,
  .top-img1,
  .top-img2,
  .top-img3,
  .top-img4 {
    min-height: 250px;
    background-position: center 20%;
  }
}

.top-bg {
  background-color: #000;
  min-height: 400px;
}

.top {
  height: 100px;
}

.top .top-text {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.top h2 {
  font-size: 70px;
  line-height: 80px;
  font-weight: 700;
  margin-bottom: 18px;
}

/* 顶部文字手机端适配 */
@media (max-width: 768px) {
  .top-bg {
    min-height: 280px;
  }
  
  .top {
    height: 80px;
  }
  
  .top h2 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .top-bg {
    min-height: 220px;
  }
  
  .top {
    height: 60px;
  }
  
  .top h2 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 8px;
  }
}

.top i {
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 2px;
  transform: translateY(-1px);
}

.top p {
  color: var(--white-color--);
}

.top a {
  color: #ffffff;
}

/* team-page----------------------------------------- */

.team-page .img {
  max-width: 373px;
  margin-bottom: 18px;
}

/* price-page----------------------------------------- */

.price-page .price-box {
  width: 100%;
  height: 537px;
}

.price-page .col-4.sec-col {
  transform: translateY(80px);
  margin-bottom: 80px;
}

.price-page span {
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
  transform: translateY(0.3rem);
}

.price-page h3 {
  font-size: 65px;
  line-height: 75px;
  margin: 15px 0 30px;
}

.price-page h4 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.price-page .btn {
  width: 182px;
  height: 45px;
  margin-top: 42px;
}

.price-page .btn:hover {
  border: 1px solid var(--main-color--);
}

.price-page .blue-btn.btn {
  color: var(--white-color--);
  background-color: var(--blue-color--);
}

.price-page .blue-btn.btn:hover {
  color: var(--blue-color--);
  background-color: var(--white-color--);
  border: 1px solid var(--blue-color--);
}

/* error-page----------------------------------------- */

.error-page .img {
  width: 755px;
  height: 700px;
  margin-bottom: 15px;
}

.error-page .btn {
  width: 273px;
  height: 61px;
  margin-top: 40px;
}

.error-page .btn:hover {
  border: 1px solid var(--main-color--);
}

.error-page .btn i {
  font-size: 12px;
}

/* team-about----------------------------------------- */

.team-about img {
  margin-bottom: 12px;
}

.team-about img:hover {
  transform: translateY(-8px);
}

/* blog-page----------------------------------------- */

.blog-page .container {
  max-width: 1348px !important;
  padding: 0 1.5rem;
}

.blog-page .blog-sec input {
  height: 44px;
  outline: none;
}

.blog-page form button {
  width: 50px;
  height: 44px;
}

.blog-page .blog-sec .col-3 {
  width: 22.1%;
}

.blog-page .blog-sec a p {
  color: var(--black-color--);
}

.blog-page .blog-sec a p:hover {
  color: var(--main-color--);
}

.blog-sec .img .inner-img img {
  height: 75px;
}

.blog-page .col-8 .img .inner-img img {
  height: 213px;
}

.blog-page .col-8 h4:hover {
  color: var(--main-color--);
}

.blog-page .col-8 .btn:hover {
  color: var(--main-color--);
}

/* blog-inner-page */

.blog-inner .blog-img {
  position: relative;
}

.blog-inner .blog-img img {
  height: 600px;
}

.blog-inner .rounded-circle {
  max-width: 100%;
  height: 25px;
  width: 25px;
}

.blog-top .container {
  background: #fff;
  transform: translateY(-70px);
  padding: 2rem;
}

.blog-inner .uncategorized-btn {
  width: auto;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem;
  margin: 0 13px;
  border-radius: 0.25rem;
}

.blog-inner h3 {
  font-size: 70px;
  line-height: 80x;
}

.blog-inner .part {
  font-size: 15px;
  line-height: 25px;
  color: var(--main-color--);
  flex-wrap: wrap;
}

.blog-inner span {
  font-size: 15px;
  line-height: 25px;
  position: relative;
  padding-inline: 4px;
}

.blog-inner p span::before {
  content: "|";
  margin: 0 0.5rem;
}

.blog-inner span::after {
  content: "|";
  margin: 0 0.5rem;
}

.blog-inner p {
  text-transform: capitalize;
  margin-bottom: 2rem;
}

.next {
  position: relative;
}

.next p {
  text-transform: capitalize;
}

.next .col-6 a {
  color: var(--black-color--);
}

.next .icon {
  font-size: 80% !important;
  line-height: 19.2px;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

.next span {
  position: absolute;
  color: var(--blog-span-color--);
  left: 48.6%;
  bottom: 43%;
}

.next span::before {
  content: "|";
}

.reply p {
  font-size: 13.6px;
  line-height: 14.6px;
  text-transform: capitalize;
  font-style: italic;
  margin: 0.8rem 0 1.3rem;
}

.reply input,
textarea {
  outline: none;
}

.reply .form-check-label {
  font-size: 90%;
  line-height: 19.8833px;
  text-transform: capitalize;
}

.reply .btn {
  color: var(--white-color--);
  background-color: var(--main-color--);
  padding: 13px 50px;
}

/* uncategorized-page----------------------------------------- */

.uncategorized-page .col-6 .img .inner-img img {
  height: 290px;
}

.uncategorized-page .col-6 h4:hover,
.uncategorized-page .col-6 .btn:hover {
  color: var(--main-color--);
}

.uncategorized-page p {
  text-transform: capitalize;
  font-size: 20px;
}

.uncategorized-page h3 {
  font-size: 45px;
  line-height: 55px;
  font-weight: 700;
  color: var(--black-color--);
}

/* 1. 整体容器：左右分布 (标题组 vs More) */
.section-header {
  display: flex;
  justify-content: space-between;
  /* 左边是标题，右边是 More */
  align-items: flex-end;
  /* 底部对齐，确保横线和文字距离一致 */
  position: relative;
  padding-bottom: 15px;
  /* 预留横线位置 */
  max-width: 100%;
  /* 可选：限制最大宽度，防止太宽 */
  margin-left: auto;
  margin-right: auto;
}

/* 2. 标题组：关键修改在这里！ */
.title-group {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  /* 关键：让 News 和 (竖线+新闻资讯) 底部对齐 */
  gap: 15px;
  /* 英文和中文之间的间距 */
}

/* 英文部分 (小) */
.title-group p.color1 {
  margin: 0;
  font-size: 18px;
  color: #999;
  line-height: 1;
}

/* 中文部分 (带竖线) */
.title-group h3 {
  margin: 0;
  font-size: 32px;
  color: #333;
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  padding-left: 18px;
  /* 竖线与文字的间距 */
  display: inline-block;
  /* 重要：使高度包裹内容 */
  vertical-align: bottom;
  /* 辅助对齐 */
}

.title-group h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1em;
  /* 高度严格等于字体大小 */
  background-color: #023894;
}

/* 3. 右侧 More 文字 */
.more-text {
  color: #797b7d;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s;
  margin-bottom: 2px;

  /* 关键：给 + 号留出左边的空间，或者让文字在右边 */
  display: inline-flex;
  /* 使用 flex 让文字和 + 号完美对齐 */
  align-items: center;
  /* 垂直居中 */
  gap: 6px;
  /* + 号和文字之间的间距 */
  flex-direction: row;
  /* 确保 + 号在左，文字在右 (如果想 + 在右，改顺序或调整伪元素位置) */
}

/* 添加 + 号 */
.more-text::before {
  content: "+";
  /* ⚡️ 内容：加号 */
  font-size: 18px;
  /* ⚡️ 大小：通常比文字稍大一点更好看 */
  font-weight: bold;
  /* 加粗，更明显 */
  line-height: 1;
  /* 防止行高影响对齐 */
  color: #797b7d;
  /* 颜色与文字一致，或可单独设为 #023894 */

  /* 如果需要 + 号在文字右侧，取消下面这行的注释，并调整上面的 gap 逻辑 */
  /* order: 2; */
}

/* 可选：鼠标悬停时，让 + 号旋转 45 度 变成 × 号 (增加交互感) */
.more-text:hover::before {
  transform: rotate(45deg);
  color: #023894;
  /* 悬停时变色，呼应标题竖线颜色 */
  transition:
    transform 0.3s,
    color 0.3s;
}

.more-text:hover {
  color: #023894;
  /* 文字悬停也变色 */
}

/* 4. 下方横线 */
.section-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  /* 要求的颜色 */
}

/* --- 基础重置与变量 --- */
.nx-news-wrapper {
  display: flex;
  gap: 20px;
  /* 左右间距 */
  width: 100%;
  max-width: 100%;
  /* 最大宽度限制 */
  margin: 40px auto;
  /* 上下间距 */
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;

  /* 关键：让子元素高度由最高的那个决定 (通常是左侧图片) */
  align-items: stretch;
}

/* --- 左侧：轮播图区域 --- */
.nx-slider-area {
  flex: 0 0 50%;
  /* 占据 60% 宽度，可根据需要调整 */
  position: relative;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;

  /* 保持高度自适应内容，或者你可以强制一个最小高度 */
  min-height: 300px;
  height: auto;
}

.nx-slider-area img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- 右侧：列表区域 --- */
.nx-list-area {
  flex: 1;
  /* 占据剩余空间 */
  background-color: #fff;
  border: 1px solid #e5e5e5;
  /* 可选：加个边框更好看 */
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;

  /* 核心逻辑：高度 100% 意味着它会拉伸到和左侧轮播图一样高 */
  height: 100%;

  /* 隐藏超出高度的内容，确保不会撑破布局 */
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* 列表 UL */
.nx-news-list {
  list-style: none;
  padding: 0;
  margin: 0;

  /* 让列表项均匀分布或紧密排列 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 尝试均匀分布，或者用 flex-start 紧密排列 */
  height: 100%;
}

/* 列表项 LI */
.nx-list-item {
  display: flex;
  align-items: baseline;
  /* 日期和标题基线对齐 */
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
  /* 虚线分割 */
  gap: 10px;

  /* 防止单个项目过高破坏布局，限制最大高度 */
  max-height: 20%;
  /* 大约显示 5 条，如果左侧很高，这里会自动适应 */
  overflow: hidden;
}

.nx-list-item:last-child {
  border-bottom: none;
}

/* 日期样式 */
.nx-date {
  font-size: 15px;
  color: #999;
  white-space: nowrap;
  /* 日期不换行 */
  font-family: Arial, sans-serif;
  min-width: 85px;
  /* 固定日期宽度，保持对齐 */
}

/* 标题样式 */
.nx-title {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 超过2行省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s;
}

.nx-title:hover {
  color: #023894;
  /* 悬停颜色 */
}

/* --- 响应式适配 (手机端) --- */
@media (max-width: 768px) {
  .nx-news-wrapper {
    flex-direction: column;
    /* 变为上下排列 */
    gap: 20px;
  }

  .nx-slider-area {
    flex: none;
    width: 100%;
    height: auto;
    /* 手机上图高度自适应 */
  }

  .nx-list-area {
    height: auto;
    /* 手机上列表高度不再受限，显示所有或自定义高度 */
    max-height: 400px;
    /* 可选：手机上限制最大高度并滚动 */
    overflow-y: auto;
  }

  .nx-list-item {
    max-height: none;
    /* 取消单行高度限制 */
  }
}

/* --- 容器基础 --- */
.nx-native-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  /* 防止图片加载时闪烁白底 */
  border-radius: 4px;
}

.nx-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

/* --- 单张幻灯片 (关键：相对定位，作为文字绝对定位的参考) --- */
.nx-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  /* ⚡️ 重要：让内部的 caption 相对于它定位 */
  background: #333;
}

/* --- 图片部分 --- */
.nx-slide-img-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nx-slide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* 悬停微放大效果 */
.nx-slide:hover .nx-slide-img-box img {
  transform: scale(1.05);
}

/* --- 文字遮罩层 (压在图片上) --- */
.nx-slide-caption {
  position: absolute;
  /* ⚡️ 绝对定位 */
  left: 0;
  bottom: 0;
  /* ⚡️ 贴在底部 */
  width: 100%;

  /* 深色半透明背景 */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.6) 80%,
    transparent 100%
  );
  /* 或者使用纯色半透明：background: rgba(0, 0, 0, 0.7); */

  padding: 40px 20px 20px 20px;
  /* 顶部留多点空间给渐变 */
  box-sizing: border-box;
  color: #fff;
  /* 文字变白色 */
  z-index: 2;
  /* 层级：高于图片，低于圆点 */
}

.nx-slide-caption h4 {
  margin: 0 0 8px 0;
  font-size: 20px;
  /* 稍微加大字号以适配深色背景 */
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* 增加文字阴影增强可读性 */

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-slide-caption p {
  margin: 0;
  font-size: 14px;
  color: #ddd;
  /* 摘要用浅灰色 */
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 按钮样式 --- */
.nx-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  /* 更透明的按钮背景 */
  backdrop-filter: blur(1px);
  /* 毛玻璃效果 */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 3;
  /* 层级：高于文字背景 */
}

.nx-slider-btn:hover {
  background: #023894;
  /* 主题蓝 */
  border-color: #023894;
}

.nx-prev {
  left: 15px;
}

.nx-next {
  right: 15px;
}

/* --- 圆点样式 (层级最高) --- */
.nx-slider-dots {
  position: absolute;
  bottom: 25px;
  /* 调整位置，使其在文字区域内或刚好在上方 */
  right: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  /* ⚡️ 最高层级：确保压在文字和深色背景之上 */
}

.nx-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  /* 默认半透明白 */
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.nx-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.nx-dot.active {
  background: #023894;
  /* 激活状态为纯白，或者用主题蓝 #023894 */
  /* background: #023894;  <-- 如果你想要蓝色圆点，取消这行注释 */
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nx-slider-btn {
    display: none;
  }

  .nx-slide-caption h4 {
    font-size: 16px;
  }

  .nx-slide-caption p {
    font-size: 12px;
  }

  .nx-slider-dots {
    bottom: 15px;
  }
}

/* --- 新增：全屏链接样式 --- */
.nx-slide-link {
  display: block;
  /* 让 a 标签表现为块级元素 */
  width: 100%;
  height: 100%;
  /* 占满父容器 (.nx-slide) */
  text-decoration: none;
  /* 去掉下划线 */
  color: inherit;
  /* 继承文字颜色 */
  position: relative;
  /* 确保内部绝对定位元素参考它（如果需要）*/
  z-index: 1;
  /* 层级略高于背景，但低于按钮和圆点 */
}

/* 鼠标悬停时，给整个卡片一个轻微的光标提示或遮罩加深效果（可选） */
.nx-slide:hover .nx-slide-link {
  /* 这里不需要额外样式，因为 .nx-slide:hover 已经触发了图片放大 */
  /* 如果想让文字更亮，可以在这里调整 opacity 等 */
}

/* 确保按钮和圆点在链接之上 (z-index 检查) */
.nx-slider-btn {
  z-index: 10;
  /* 确保大于 .nx-slide-link 的 z-index: 1 */
  pointer-events: auto;
  /* 确保按钮可以点击，不被链接阻挡 */
}

.nx-slider-dots {
  z-index: 10;
  /* 确保圆点在最上层 */
  pointer-events: auto;
}

/* 防止链接内的默认蓝色访问后颜色变化影响设计 */
.nx-slide-link:visited {
  color: inherit;
}

/* contact-page----------------------------------------- */

.contact-page .mb-6 {
  margin-bottom: 35px;
}

.contact-page input::placeholder,
textarea::placeholder {
  color: var(--place-color--);
  opacity: 100%;
}

.contact-page input {
  height: 52px;
}

.contact-page textarea {
  height: 100px;
}

.contact-page input,
.contact-page textarea {
  outline: none;
  padding: 15px 20px;
}

.contact-page .btn {
  width: 172px;
  height: 51px;
  margin-top: 48px;
}

.contact-page .btn:hover {
  border: 1px solid var(--main-color--);
}

.contact-page .error-message {
  color: var(--border-red--);
  font-weight: 600;
  display: none;
}

.contact-page input,
.contact-page textarea {
  border: none;
  border-bottom: 1px solid var(--gray-color--);
}

.contact-page .error-border {
  border-bottom: 1px solid var(--border-red--);
}

.map iframe {
  width: 100%;
  height: 689px;
  margin-bottom: -8px;
}

/* search-page----------------------------------------- */

.section .text {
  padding: 0.5rem 0 0;
}

.section span::before {
  margin: 0.7rem 0.4rem;
  content: "";
  background-color: var(--search-span-color--);
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 50%;
}

.section .blog-sec span::before {
  background-color: var(--main-color--);
}

.section .col-4 {
  padding: 0 0.8rem;
}

.section .col-4 .img .inner-img img {
  height: 203px;
}

.section .Uncategorized-btn {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  text-transform: capitalize !important;
}

.section h4:hover,
.section .btn:hover {
  color: var(--main-color--);
}

.section p {
  text-transform: capitalize;
}
/* =======================
   公司概要模块样式 (最终确认版)
   ======================= */

.nx-profile-summary-section {
  padding: 60px 0;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 标题区域 */
.section-header-center {
  text-align: center;
  margin-bottom: 50px;
}

.section-main-title {
  font-size: 36px;
  color: #023894;
  font-weight: 700;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

.title-divider {
  width: 60px;
  height: 3px;
  background-color: #023894;
  margin: 0 auto;
}

/* 卡片布局 */
.profile-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  align-items: start;
}

.profile-card {
  width: 70%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 56, 148, 0.08);
  border: 1px solid #eef2f6;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(2, 56, 148, 0.15);
  border-color: #d0e1f9;
}

/* 卡片顶部栏 */
.card-top-bar {
  background-color: #f4f8ff;
  padding: 25px 30px;
  border-bottom: 1px solid #e1e8f0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.card-top-bar i {
  font-size: 28px;
  color: #023894;
}

.card-top-bar h3 {
  font-size: 20px;
  color: #023894;
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.4;
}

/* 蓝色徽章样式 (仅用于"本社") */
.badge {
  font-size: 14px;
  background-color: #023894;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}

/* 卡片内容区 */
.card-content {
  padding: 30px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eef2f6;
  line-height: 1.6;
}

.info-list li.last-item {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 标签 - 16px */
.info-label {
  color: #666666;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  margin-right: 20px;
  flex-shrink: 0;
}

/* 数值 - 16px */
.info-value {
  color: #333333;
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  word-break: break-word;
  flex: 1;
}

.info-value.highlight {
  color: #023894;
  font-weight: 700;
}

/* 小字备注 */
.info-value small {
  display: block;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
  margin-top: 4px;
  text-align: right;
  line-height: 1.4;
}

/* 响应式 */
@media (max-width: 768px) {
  .nx-profile-summary-section {
    padding: 40px 0;
  }
  .section-main-title {
    font-size: 28px;
  }
  .profile-cards-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .info-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

  .info-label {
    margin-right: 0;
    color: #023894;
    font-size: 16px;
  }

  .info-value {
    text-align: left;
    font-size: 16px;
    color: #333;
  }

  .info-value small {
    text-align: left;
    font-size: 14px;
  }

  /* 移动端标题换行处理 */
  .card-top-bar h3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .badge {
    margin-top: 2px;
  }
}
/* =======================
   公司沿革 - 精致时间轴样式
   ======================= */

.nx-history-section {
  padding: 30px 0;
  background-color: #fafbfc; /* 极淡的灰蓝色背景，突出时间轴 */
  position: relative;
  overflow: hidden;
}

.container {
  max-width: 1000px; /* 限制最大宽度，保证精致感 */
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.section-main-title {
  font-size: 36px;
  color: #023894;
  font-weight: 700;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

.title-divider {
  width: 60px;
  height: 3px;
  background-color: #023894;
  margin: 0 auto 20px auto;
}

/* --- 时间轴容器 --- */
.timeline-wrapper {
  position: relative;
  padding: 20px 0 60px 0;
}

/* 垂直线：精致渐变，底部消失 */
.timeline-line {
  position: absolute;
  left: 140px; /* 对应左侧年份区域的右边缘 */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    #023894 0%,
    #023894 80%,
    transparent 100%
  );
  z-index: 1;
}

/* --- 单个时间项 --- */
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 60px; /* 增加间距，显得不拥挤 */
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

/* 简单的入场动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 延迟动画 (依次显示) */
.timeline-item:nth-child(2) {
  animation-delay: 0.2s;
}
.timeline-item:nth-child(3) {
  animation-delay: 0.4s;
}
.timeline-item:nth-child(4) {
  animation-delay: 0.6s;
}
.timeline-item:nth-child(5) {
  animation-delay: 0.8s;
}

/* --- 左侧日期区域 --- */
.timeline-date {
  width: 120px;
  text-align: right;
  padding-right: 20px;
  flex-shrink: 0;
  z-index: 2;
}

.timeline-date .year {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #023894;
  line-height: 1.2;
  letter-spacing: -1px;
}

.timeline-date .month {
  display: block;
  font-size: 14px;
  color: #8899a6;
  font-weight: 600;
  margin-top: 4px;
}

/* --- 中间节点 (Marker) --- */
.timeline-marker {
  position: absolute;
  left: 134px; /* 120px(width) + 20px(gap) - 6px(half width) = 134px */
  top: 6px; /* 微调垂直位置，对准年份中心 */
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 3px solid #023894;
  border-radius: 50%;
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 0 4px rgba(2, 56, 148, 0.1);
}

/* 悬停效果：节点变大，颜色反转 */
.timeline-item:hover .timeline-marker {
  background: #023894;
  transform: scale(1.3);
  box-shadow:
    0 0 0 6px rgba(2, 56, 148, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- 右侧内容卡片 --- */
.timeline-content {
  flex: 1;
  padding-left: 40px; /* 距离线的间距 */
  padding-top: 2px;
  position: relative;
}

/* 卡片主体 */
.timeline-content-card {
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #023894; /* 左侧强调线 */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-content-card {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(2, 56, 148, 0.12);
}

.timeline-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  line-height: 1.4;
}

.timeline-content p {
  margin: 0;
  font-size: 16px;
  color: #666;
  line-height: 1.7;
  font-weight: 400;
}

/* 里程碑标签 */
.milestone-tag {
  display: inline-block;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #023894;
  background: #eef4ff;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* =======================
   响应式适配 (移动端)
   ======================= */
@media (max-width: 768px) {
  .nx-history-section {
    padding: 50px 0;
  }

  .timeline-line {
    left: 20px; /* 线移到最左侧 */
  }

  .timeline-item {
    flex-direction: column;
    margin-bottom: 40px;
    padding-left: 0;
  }

  .timeline-date {
    width: 100%;
    text-align: left;
    padding-right: 0;
    padding-left: 45px; /* 给圆圈留位置 */
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .timeline-date .year {
    font-size: 24px;
    display: inline;
  }

  .timeline-date .month {
    font-size: 14px;
    display: inline;
    margin-top: 0;
  }

  .timeline-marker {
    left: 14px; /* 圆圈对齐新线 */
    top: 35px; /* 调整到日期下方一点或中间 */
  }

  /* 移动端调整圆圈位置到日期和内容之间 */
  .timeline-marker {
    top: 28px;
  }

  .timeline-content {
    padding-left: 45px; /* 内容缩进 */
    padding-top: 0;
  }

  .timeline-content-card {
    padding: 20px;
    border-left-width: 3px;
  }

  .timeline-content h3 {
    font-size: 18px;
  }

  .timeline-content p {
    font-size: 15px;
  }
}
/* =======================
   质量方针与环境理念样式
   ======================= */

.nx-philosophy-section {
  padding: 30px 0;
  background-color: #ffffff;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  align-items: stretch;
}

/* 通用卡片样式 */
.philo-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.philo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* 图标区域 */
.card-icon-wrapper {
  width: 70px;
  height: 70px;
  background-color: #f4f8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.card-icon-wrapper i {
  font-size: 32px;
  color: #023894;
}

/* 标题 */
.philo-title {
  font-size: 24px;
  color: #023894;
  font-weight: 700;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 10px;
}

.philo-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #023894;
  border-radius: 2px;
}

/* --- 质量方针特有样式 --- */
.quality-card {
  background: linear-gradient(145deg, #ffffff 0%, #f9fbff 100%);
  border-top: 4px solid #023894;
}

.quality-card:hover .card-icon-wrapper {
  background-color: #023894;
  transform: rotateY(180deg);
}

.quality-card:hover .card-icon-wrapper i {
  color: #fff;
}

/* 四个词语网格 */
.quality-slogan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-bottom: 25px;
}

.slogan-item {
  background: #fff;
  padding: 20px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(2, 56, 148, 0.05);
  border: 1px solid #eef2f6;
  transition: all 0.3s ease;
}

.quality-card:hover .slogan-item {
  border-color: #023894;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(2, 56, 148, 0.1);
}

.slogan-text {
  display: block;
  font-size: 18px; /* 稍微大一点，突出口号 */
  font-weight: 700;
  color: #333;
  letter-spacing: 1px;
}

/* --- 环境理念特有样式 --- */
.env-card {
  background: linear-gradient(145deg, #ffffff 0%, #f6fff9 100%);
  border-top: 4px solid #2e8b57; /* 海洋绿/森林绿 */
}

.env-card .card-icon-wrapper {
  background-color: #e8f5e9;
}

.env-card .card-icon-wrapper i {
  color: #2e8b57;
}

.env-card:hover .card-icon-wrapper {
  background-color: #2e8b57;
  transform: scale(1.1);
}

.env-card:hover .card-icon-wrapper i {
  color: #fff;
}

.env-card .philo-title {
  color: #2e8b57;
}

.env-card .philo-title::after {
  background-color: #2e8b57;
}

.env-content-box {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  border: 1px dashed #a5d6a7;
  width: 100%;
  margin-bottom: 20px;
}

.env-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  text-align: justify; /* 两端对齐，更整齐 */
}

.env-text strong {
  color: #2e8b57;
  font-weight: 700;
}

/* =======================
   响应式适配
   ======================= */
@media (max-width: 768px) {
  .nx-philosophy-section {
    padding: 50px 0;
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .philo-card {
    padding: 30px 20px;
  }

  .quality-slogan-grid {
    grid-template-columns: 1fr 1fr; /* 移动端依然保持两列，或者改为1列 */
    gap: 15px;
  }

  .slogan-text {
    font-size: 16px;
  }

  .env-text {
    font-size: 15px;
    text-align: left;
  }
}
/* =======================
   企业理念 - 图表样式
   ======================= */

.nx-corp-philosophy-section {
  padding: 50px 0;
  background-color: #ffffff;
}

/* 顶部标语 */
.top-slogan {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #023894;
  line-height: 1.6;
}

.top-slogan p {
  margin: 0;
}

/* 主体 diagram 容器 */
.nx-corp-philosophy-section img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* 移动端图片放大显示 */
@media (max-width: 768px) {
  .nx-corp-philosophy-section img {
    width: 115%;
    max-width: none;
    margin-left: -7.5%;
  }
}

@media (max-width: 480px) {
  .nx-corp-philosophy-section img {
    width: 125%;
    max-width: none;
    margin-left: -12.5%;
  }
}

.philosophy-diagram {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
}

/* 左右面板 */
.diagram-panel {
  flex: 1;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.left-panel {
  background-color: #f5f5f5;
  border-left: 4px solid #023894;
}

.right-panel {
  background-color: #e6f0ff;
  border-right: 4px solid #023894;
}

.diagram-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.diagram-panel h3 {
  font-size: 20px;
  color: #023894;
  margin-bottom: 15px;
  font-weight: 700;
}

.diagram-panel p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* 中间箭头区域 */
.diagram-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.growth-arrow {
  width: 100px;
  height: 100px;
  background: #023894;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 25px;
  box-shadow: 0 4px 15px rgba(2, 56, 148, 0.3);
  transition: transform 0.3s ease;
}

.growth-arrow span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.growth-arrow:hover {
  transform: scale(1.05);
}

/* 底部三个箭头 */
.bottom-arrows {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.arrow-box {
  flex: 1;
  background: #023894;
  color: #fff;
  padding: 15px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 箭头形状模拟 */
.arrow-box::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #023894;
  z-index: 1;
}

.left-arrow::after {
  display: none; /* 最左不画箭头 */
}

.center-arrow::after {
  right: -10px;
}

.right-arrow::after {
  right: -10px;
}

.arrow-box:hover {
  background: #012a7a;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(2, 56, 148, 0.2);
}

/* 创业精神框 */
.entrepreneur-spirit-box {
  background: #fff;
  border: 2px solid #023894;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(2, 56, 148, 0.08);
}

.entrepreneur-spirit-box h4 {
  font-size: 20px;
  color: #023894;
  margin-bottom: 15px;
  font-weight: 700;
}

.entrepreneur-spirit-box p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

/* =======================
   响应式适配
   ======================= */
@media (max-width: 768px) {
  .nx-corp-philosophy-section {
    padding: 30px 0;
  }

  .top-slogan {
    font-size: 22px;
  }

  .philosophy-diagram {
    flex-direction: column;
    gap: 30px;
  }

  .diagram-center {
    order: -1; /* 箭头放到最上面 */
    margin-bottom: 20px;
  }

  .growth-arrow {
    width: 80px;
    height: 80px;
    padding-top: 20px;
  }

  .growth-arrow span {
    font-size: 14px;
  }

  .bottom-arrows {
    flex-direction: column;
    gap: 15px;
  }

  .arrow-box::after {
    display: none; /* 移动端隐藏箭头装饰 */
  }

  .entrepreneur-spirit-box {
    padding: 20px;
  }

  .entrepreneur-spirit-box p {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .nx-corp-philosophy-section {
    padding: 20px 0;
  }

  .top-slogan {
    font-size: 18px;
  }
}

/* =======================
   最终完善版 - 样式定义
   ======================= */

.nx-org-final-polished-section {
  padding: 80px 0;
  background-color: #f9fafb;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.polished-org-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* =======================
   左侧：公司要员 (底部蓝色背景)
   ======================= */
.executives-sidebar-polished {
  flex: 0 0 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* 确保圆角生效 */
  border-top: 4px solid #023894;
  border-bottom: 4px solid #023894;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  background: #f8fafc;
  padding: 15px 15px 0 15px;
  text-align: center;
  border-bottom: 1px solid #eef2f6;
}

.sidebar-header h3 {
  margin: 10px 0 0 0;
  color: #023894;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-header i {
  font-size: 20px;
  color: #023894;
}

.executives-list-unified {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* 让列表占据剩余空间 */
}

.executives-list-unified li {
  display: flex;
  flex-direction: column;
  padding: 26px 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.2s ease;
}

.executives-list-unified li:last-child {
  border-bottom: none;
}
.executives-list-unified li:hover {
  background: #fafafa;
}

.exe-role {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 4px;
}

.exe-name {
  font-size: 17px;
  color: #1e293b;
  font-weight: 600;
}

/* 【修改点】底部标语 - 主色蓝底白字 */
.sidebar-footer-blue {
  background-color: #f8fafc;
  color: #023894;
  padding: 18px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: auto; /* 确保在底部 */
}

.sidebar-footer-blue p {
  margin: 0;
  line-height: 1.4;
}

/* =======================
   右侧：层级流 (连接线间距优化)
   ======================= */
.org-flow-container-polished {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;;
  z-index: 10;
  flex: 1;
  overflow: hidden;
}

.org-flow-container-polished img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flow-level {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.flow-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  min-width: 140px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
  border-color: #023894;
  color: #023894;
}

/* 特定层级颜色 */
.card-board {
  border-top: 3px solid #8b5cf6;
  color: #4c1d95;
}
.card-super {
  border-top: 3px solid #a78bfa;
  color: #5b21b6;
}
.card-gm {
  border-top: 3px solid #023894;
  color: #0369a1;
}
.card-dgm {
  border-top: 3px solid #0ea5e9;
  color: #0369a1;
}

/* 连接箭头 */
.flow-arrow-down {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 20px;
}

/* 【修改点】发散连接线 - 增加顶部间距，避免贴上 */
.flow-connector-fan-spaced {
  height: 20px; /* 增加整体高度 */
  width: 90%;
  border-top: 2px dashed #e2e8f0;
  position: relative;
  margin-top: 20px; /* 额外增加上边距，确保不与副总卡片重叠 */
  margin-bottom: 5px;
}

/* 连接到副总经理的短竖线 */
.flow-connector-fan-spaced::before {
  content: "";
  position: absolute;
  top: -25px; /* 向上延伸，连接到副总卡片底部 */
  left: 50%;
  width: 2px;
  height: 25px; /* 竖线长度 */
  background: #e2e8f0;
  transform: translateX(-50%);
}

/* --- 外层容器 --- */
.dept-grid-clean {
  display: grid;
  /* 修改点：恢复为单列布局，让内容垂直堆叠 */
  grid-template-columns: 1fr;
  gap: 30px; /* 增加上下间距，让“品质保证课”离上面的部门远一点 */
  width: 100%;
}
/* --- 左侧容器：改为 4 列布局 --- */
.main-depts-group {
  display: grid;
  /* 修改点：改为 4 列，自动分配宽度 */
  grid-template-columns: repeat(4, 1fr);
  gap: 15px; /* 部门卡片之间的间距 */
  width: 100%;

  /* 保持之前的背景样式（如果需要的话） */
  background-color: #f8fafc;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}
.dept-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.dept-card:hover {
  border-color: #023894;
  color: #023894;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 特殊部门：品质保证课 */
.dept-card-qa {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #b45309;
  font-weight: 700;
}

.dept-card-qa:hover {
  background: #fef3c7;
  border-color: #d97706;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.15);
}
/* 左侧部门卡片样式调整 */
.main-depts .dept-card {
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  font-size: 15px;
  justify-content: center; /* 文字居中 */
}
/* 右侧独立部门容器 */
.special-dept-wrapper {
  display: flex;
  align-items: center; /* 垂直居中（可选，看你想让它对齐哪里） */
  justify-content: flex-start; /* 靠左对齐，紧挨着左侧列表 */
}
/* --- 右侧容器：保持独立样式 --- */
.special-dept-group {
  display: flex;
  justify-content: center;
  align-items: center;

  /* 保持之前的独立卡片样式 */
  background-color: #ffffff;
  padding: 15px 30px; /* 增加一点左右内边距 */
  border-radius: 12px;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.1);

  /* 关键点：让它居中显示在下方 */
  margin: 0 auto; /* 左右自动外边距，实现居中 */
  max-width: 220px; /* 限制最大宽度，防止太宽 */
}
/* 左侧卡片去掉边框，融入背景，或者保留浅色边框 */
.main-depts-group .dept-card {
  background: #ffffff; /* 卡片本身还是白色 */
  border: 1px solid #e2e8f0;
  /* 如果想让左侧看起来更整体，可以去掉卡片的阴影 */
  box-shadow: none;
}
.main-depts-group .dept-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 悬停时再加阴影 */
  border-color: #023894;
}
/* 右侧“品质保证课”卡片样式 */
.special-dept-wrapper .dept-card-qa {
  width: 100%; /* 独立宽度 */
  min-height: 60px;
  font-size: 16px;
  font-weight: 700;
  /* 保持原来的特殊颜色样式 */
  background: #fffbeb;
  border: 2px solid #f59e0b;
  color: #b45309;
}
/* =======================
   响应式适配
   ======================= */
@media (max-width: 1024px) {
  .polished-org-layout {
    flex-direction: column;
  }

  .executives-sidebar-polished {
    width: 100%;
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
  }
  .sidebar-header,
  .sidebar-footer-blue {
    display: none;
  } /* 移动端隐藏底部标语以防拥挤 */

  .executives-list-unified {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .executives-list-unified li {
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 6px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-bottom: none;
  }
  .exe-role {
    margin-bottom: 0;
    font-size: 13px;
  }
  .exe-name {
    font-size: 15px;
  }

  .dept-grid-clean {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .flow-level {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .flow-card {
    width: 100%;
    max-width: 260px;
  }
  .dept-grid-clean {
    grid-template-columns: 1fr;
  }
  .flow-connector-fan-spaced {
    display: none;
  }
}

/* =======================
   资格认证模块 - 最终整合版
   ======================= */

.nx-cert-final-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* =======================
   三大体系卡片布局
   ======================= */
.systems-grid-final {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.system-card-final {
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.system-card-final:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: #bfdbfe;
}

/* 顶部蓝条 */
.card-top-bar-final {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #023894;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 图标样式 */
.card-icon-box-final {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px;
  background-color: #023894;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 4px solid #fff;
}

/* 标题样式 */
.card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 15px;
}

/* =======================
   整合后的认证标签样式
   ======================= */
.card-cert-label {
  background-color: #eff6ff; /* 浅蓝背景 */
  color: #023894; /* 深蓝文字 */
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px; /* 稍微方一点的圆角 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 25px; /* 与下方内容的间距 */
  border: 1px solid #bfdbfe;
  width: 100%; /* 占满宽度，看起来更稳重 */
  box-sizing: border-box;
}

.card-cert-label i {
  font-size: 18px;
}

/* 内容样式 */
.card-content {
  flex: 1;
  margin-bottom: 0;
}

.card-content p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
  margin: 0;
}

/* =======================
   响应式适配
   ======================= */
@media (max-width: 992px) {
  .systems-grid-final {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nx-cert-final-section {
    padding: 40px 0;
  }

  .systems-grid-final {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .system-card-final {
    padding: 30px 20px;
  }
}
/* =======================
   获得荣誉模块 - 双排新闻列表
   ======================= */

.nx-honors-section {
  padding: 50px 0;
  /* 延续微渐变背景，保持视觉舒适 */
  background: linear-gradient(180deg, #edf2f7 0%, #f8fafc 100%);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 网格布局：桌面端双排 */
.honors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px; /* 卡片间距 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 单个荣誉卡片 */
.honor-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 25px 30px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* 左侧装饰条 (品牌蓝) */
.honor-decoration {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: #023894;
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

/* 悬停效果 */
.honor-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(2, 56, 148, 0.1);
  border-color: #bfdbfe;
}

.honor-item:hover .honor-decoration {
  width: 8px; /* 悬停时装饰条变宽 */
  background-color: #023894; /* 颜色稍亮 */
}

/* 日期样式 */
.honor-date {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 12px;
  display: inline-block;
  letter-spacing: 0.5px;
}

/* 标题样式 */
.honor-title {
  font-size: 16px; /* 统一字体大小 */
  color: #334155;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  padding-right: 10px; /* 防止文字太靠边 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 超过2行省略，保持整齐 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =======================
   链接功能增强
   ======================= */

/* 1. 透明覆盖层：让整张卡片都可点击 */
.honor-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* 确保覆盖在内容之上 */
  text-indent: -9999px; /* 隐藏链接文字，只保留功能 */
}

/* 2. 鼠标悬停时的光标变化 */
.honor-item {
  cursor: pointer; /* 鼠标移上去变成手型 */
}

/* 3. 标题颜色交互优化 */
.honor-title {
  color: #334155;
  transition: color 0.3s ease;
}

/* 悬停时标题颜色变为主色蓝，提示可点击 */
.honor-item:hover .honor-title {
  color: #023894;
}

/* 确保日期在悬停时也有轻微变化，保持整体感 */
.honor-item:hover .honor-date {
  color: #023894;
}

/* 原有的 hover 效果保留 (上浮 + 阴影) */
.honor-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(2, 56, 148, 0.1);
  border-color: #bfdbfe;
}

.honor-item:hover .honor-decoration {
  width: 8px;
  background-color: #0284c7;
}
/* =======================
   响应式适配
   ======================= */
@media (max-width: 768px) {
  .honors-grid {
    grid-template-columns: 1fr; /* 移动端变为单列 */
    gap: 20px;
  }

  .honor-item {
    padding: 20px;
  }

  .honor-title {
    font-size: 16px;
    -webkit-line-clamp: 3; /* 移动端允许显示3行 */
  }
}
/* --- 局部样式隔离开始 --- */

/*  wrapper 用于限定最大宽度，如果您的主站已有 container，可删除此类的 width/margin 属性 */
.sd-page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family:
    "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: #333;
}

.no-img {
  margin-top: 100px;
}

.sd-content-inner {
  padding: 0 20px; /* 内边距 */
}

/* 标题通用样式 */
.sd-section-header {
  text-align: center;
  margin-bottom: 50px;
}

.sd-section-header h2 {
  font-size: 32px;
  color: #023894;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.sd-section-header p {
  color: #666;
  font-size: 16px;
}

.sd-header-line {
  width: 60px;
  height: 4px;
  background-color: #023894;
  margin: 0 auto;
  border-radius: 2px;
}

/* 品牌故事部分 */
.sd-brand-story {
  background-color: #fff;
  padding-bottom: 60px;
}

.sd-story-content {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.sd-story-text,
.sd-story-highlight {
  flex: 1;
  min-width: 300px;
  text-align: justify;
}

.sd-story-text p {
  margin-bottom: 20px;
  color: #555;
  line-height: 1.8;
}

.sd-story-highlight {
  background-color: #f0f4fc;
  padding: 30px;
  border-radius: 8px;
  border-left: 5px solid #023894;
}

.sd-story-highlight h3 {
  color: #023894;
  margin-bottom: 15px;
  font-size: 20px;
}

.sd-story-highlight p {
  margin-bottom: 15px;
  color: #444;
  line-height: 1.8;
}

/* 产品展示部分 */
.sd-product-section {
  padding-bottom: 80px;
  background-color: #f4f6f9; /* 如果主站背景不是灰色，可保留此行 */
}

/* Tab 切换按钮 */
.sd-product-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  gap: 20px;
}

.sd-tab-btn {
  background: transparent;
  border: 2px solid #023894;
  color: #023894;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-tab-btn:hover {
  background-color: #eef3fc;
}

.sd-tab-btn.active {
  background-color: #023894;
  color: #fff;
  box-shadow: 0 4px 15px rgba(2, 56, 148, 0.3);
}

.sd-badge {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 14px;
}

/* 产品网格布局 */
.sd-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  animation: sdFadeIn 0.5s ease-in-out;
}

/* 产品卡片 */
.sd-product-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  contain: layout paint style;
}

.sd-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(2, 56, 148, 0.12);
  border-color: #023894;
}

.sd-card-image {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  contain-intrinsic-size: 400px 220px;
}

.sd-card-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sd-product-card:hover .sd-card-image::before {
  opacity: 1;
}

.sd-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.sd-product-card:hover .sd-card-image img {
  transform: scale(1.05);
}

/* 图片加载器 */
.img-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #023894;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.product-card-img {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-img.loaded {
  opacity: 1;
}

.product-card-img.loaded + .img-loader {
  opacity: 0;
  pointer-events: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sd-card-info {
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-product-name {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

@keyframes sdFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 可持续发展措施样式 */
.sd-sustainability-measures {
  padding: 1px 0;
  background: #f8f9fa;
}

.sd-measures-text {
  text-align: center;
  margin-bottom: 50px;
}

.sd-measures-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #023894;
  margin-bottom: 20px;
}

.sd-measures-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 20px;
}

.sd-measures-text ul {
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: 800px;
  margin: auto 130px;
}

.sd-measures-text li {
  font-size: 16px;
  line-height: 2;
  color: #555;
  padding-left: 25px;
  position: relative;
}

.sd-measures-text li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #023894;
  font-weight: bold;
}

/* 措施项样式 */
.sd-measure-item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sd-measure-reverse {
  flex-direction: row-reverse;
}

.sd-measure-image {
  flex: 0 0 40%;
  max-width: 40%;
}

.sd-measure-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* 多图片容器 */
.sd-measure-images {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  max-height: 280px;
}

.sd-measure-images img {
  flex: 1;
  height: 100%;
  min-width: 0;
  border-radius: 8px;
  object-fit: cover;
}

/* 网格布局（用于活性炭的7张图片） */
.sd-measure-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sd-measure-images-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.sd-measure-images-grid img:nth-child(1),
.sd-measure-images-grid img:nth-child(2),
.sd-measure-images-grid img:nth-child(3) {
  grid-row: 1;
}

.sd-measure-images-grid img:nth-child(4),
.sd-measure-images-grid img:nth-child(5),
.sd-measure-images-grid img:nth-child(6) {
  grid-row: 2;
}

.sd-measure-images-grid img:nth-child(7) {
  grid-column: 1 / span 3;
  height: 100px;
}

.sd-measure-content {
  flex: 1;
}

/* ESG 章节标题样式 */
.esg-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #023894;
  margin-top: 30px;
  margin-bottom: 15px;
  display: block;
}

/* 合规内容样式 */
.sd-compliance-content {
  margin-top: 30px;
  padding: 20px;
}

.compliance-section {
  max-width: 900px;
  margin: 0 auto;
}

.compliance-section h3 {
  font-size: 24px;
  font-weight: 700;
  color: #023894;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #023894;
}

.compliance-box {
  background: #f0f5ff;
  border-left: 4px solid #023894;
  padding: 20px;
  margin-bottom: 30px;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}

.compliance-subsection {
  margin-bottom: 30px;
}

.compliance-subsection h4 {
  font-size: 24px;
  font-weight: 600;
  color: #023894;
  margin-top: 25px;
  margin-bottom: 15px;
}

.compliance-subsection > p {
  font-size: 17px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
  padding-left: 15px;
}

.compliance-item {
  margin-bottom: 20px;
  padding-left: 20px;
}

.compliance-item h5 {
  font-size: 19px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.compliance-item p {
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  padding-left: 15px;
}

.compliance-item ul {
  list-style: none;
  padding-left: 15px;
}

.compliance-item li {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.compliance-item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #023894;
  border-radius: 50%;
}

/* 合规横幅图片样式 */
.compliance-banner {
  margin-top: 20px;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.compliance-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 可持续发展措施卡片样式 */
.sd-measures-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.sd-measures-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 1;
}

.sd-measures-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(2, 56, 148, 0.15);
}

/* 标题在上 */
.sd-measures-card-title {
  padding: 15px 20px;
  background: linear-gradient(135deg, #023894 0%, #0056b3 100%);
  text-align: center;
}

.sd-measures-card-title h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* 图片在下 */
.sd-measures-card-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.sd-measures-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sd-measures-card:hover .sd-measures-card-image img {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .sd-measures-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sd-measures-cards {
    grid-template-columns: 1fr;
  }

  .sd-measures-card-image {
    height: 160px;
  }

  .sd-measures-card-title h3 {
    font-size: 14px;
  }
}

.sd-measure-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #023894;
  margin-bottom: 15px;
}

.sd-measure-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
}

/* 响应式 */
@media (max-width: 768px) {
  .sd-section-header {
    padding-top: 40px;
    margin-bottom: 30px;
  }
  .sd-story-content {
    flex-direction: column;
    gap: 20px;
  }
  .sd-product-tabs {
    flex-direction: column;
    align-items: center;
  }
  .sd-tab-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  .sd-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  /* 可持续发展措施响应式 */
  .sd-sustainability-measures {
    padding: 30px 0;
  }
  .sd-measure-item {
    flex-direction: column !important;
    gap: 20px;
    padding: 20px;
  }
  .sd-measure-image {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .sd-measures-text h2 {
    font-size: 24px;
  }
}

/* 模态框样式 */
.cert-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 激活状态：Flex布局使其居中，opacity使其可见 */
.cert-modal.show {
  display: flex;
  opacity: 1;
}

/* 模糊背景层 */
.cert-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(5px);
  z-index: 1;
}

.cert-modal-content {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 110vh;
  max-height: 90vh;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: zoomIn 0.3s ease;
}

.cert-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.cert-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  z-index: 3;
}

.close-btn:hover {
  color: #333;
}

/* 证书图片容器 */
.cert-image-wrapper {
  margin: 0 auto;
  max-width: 100%;
  max-height: 70vh;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

.cert-image-container {
  width: 100%;
  height: 70vh;
  display: flex;
  overflow: hidden;
  position: relative;
}

.cert-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}

.cert-image-nav {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.cert-nav-btn {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.cert-nav-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* 动画效果 */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .cert-modal-content {
    max-width: 95%;
    padding: 15px;
  }

  .cert-modal-header h3 {
    font-size: 18px;
  }
}

/* 全屏产品弹窗样式 */
.product-fullscreen-modal {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.product-modal-content {
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  padding: 30px;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}

.product-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  padding: 10px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  padding: 10px;
}

.product-modal-grid .sd-product-card,
.product-detail-grid .sd-product-card {
  cursor: pointer;
  margin: 0;
}

.product-modal-grid .sd-card-image {
  height: 200px;
}

.product-detail-grid .sd-card-image {
  height: 220px;
}

@media (max-width: 1200px) {
  .product-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .product-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .product-modal-content {
    width: 95%;
    padding: 15px;
  }

  .product-modal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .product-modal-grid .sd-card-image,
  .product-detail-grid .sd-card-image {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .product-modal-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* 返回列表按钮样式 */
.back-to-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background-color: #023894;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.back-to-list-btn:hover {
  background-color: #012a6e;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.back-to-list-btn i {
  font-size: 16px;
}

/* 产品分类卡片样式 */
.product-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.product-category-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.product-category-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(2, 56, 148, 0.15);
  border-color: #023894;
}

.category-title {
  font-size: 20px;
  font-weight: 700;
  color: #023894;
  margin: 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.category-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-category-card:hover .category-image img {
  transform: scale(1.05);
}

/* mt-210 全局样式 */
.mt-210 {
  margin-top: 210px !important;
}

/* mt-210 移动端自适应 */
@media (max-width: 992px) {
  .mt-210 {
    margin-top: 120px !important;
  }
}

@media (max-width: 768px) {
  .mt-210 {
    margin-top: 80px !important;
  }
}

@media (max-width: 480px) {
  .mt-210 {
    margin-top: 50px !important;
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .product-category-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .category-image {
    height: 200px;
  }

  .category-title {
    font-size: 18px;
    padding: 15px;
  }

  .compliance-section-title {
    font-size: 28px;
  }

  .compliance-subsection-title {
    font-size: 24px;
  }

  /* 页脚联系信息自适应 */
  .footer-contact[style*="width"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* 公司要员模块手机端适配 */
  .polished-org-layout {
    flex-direction: column;
    gap: 15px;
  }

  .executives-sidebar-polished {
    flex: 1;
    width: 100%;
    border-top: 4px solid #023894;
    border-bottom: none;
  }

  .org-flow-container-polished {
    width: 100%;
    top: 0;
  }

  .org-flow-container-polished img {
    height: auto;
    min-height: 250px;
  }

  .sidebar-header {
    padding: 12px;
  }

  .sidebar-header h3 {
    font-size: 16px;
  }

  .executives-list-unified li {
    padding: 12px 15px;
  }

  .exe-name {
    font-size: 15px;
  }

  .exe-role {
    font-size: 13px;
  }

  .sidebar-footer-blue {
    padding: 14px 15px;
    font-size: 13px;
  }

  /* 公司概要模块手机端 */
  .profile-cards-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .profile-card {
    width: 100%;
  }

  .card-top-bar {
    padding: 20px;
  }

  .card-content {
    padding: 20px;
  }

  .info-list li {
    font-size: 14px;
  }

  .info-label {
    font-size: 14px;
  }

  .info-value {
    font-size: 14px;
  }

  /* 公司沿革时间轴手机端 */
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-content {
    width: 100%;
    margin-left: 30px;
  }

  .timeline-year {
    margin-bottom: 10px;
  }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
  .polished-org-layout {
    gap: 10px;
  }

  .executives-sidebar-polished {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .org-flow-container-polished img {
    min-height: 200px;
  }

  .executives-list-unified {
    padding: 10px;
  }

  .executives-list-unified li {
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .exe-role {
    font-size: 12px;
  }

  .exe-name {
    font-size: 14px;
  }
}