/* #region all */
:root {
  --primary: #1D6F38;
  --primary-black: #010101;
  --white: #ffffff;
  --black: #000000;
  --font-body: 'Inter', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  margin-top: 0 !important;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--primary-black);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  outline: none;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  list-style: none;
}

img {
  display: block;
  border: 0;
  height: auto;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  outline: none;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

.display-flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-start {
  align-items: start;
}

/* #endregion */
/* #region  0 */
.container {
  width: 100%;
  padding: 0 30px;
  max-width: 1600px;
  margin: 0 auto;

}

.space {
  padding-top: 100px;
  padding-bottom: 100px;
}

.space-top {
  padding-top: 80px;
}

.space-bottom {
  padding-bottom: 80px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

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

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

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

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pt-110 {
  padding-top: 110px;
}

.pb-110 {
  padding-bottom: 110px;
}

.background-color {
  background: #F5F5F5;
}

.link-hover {
  display: inline;
  background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
  transition: .36s;
}

.link-hover:hover {
  color: var(--primary);
  background-size: 100% 1px;
}

.img-hover {
  display: block;
  overflow: hidden;
}

.img-hover img {
  width: 100%;
  display: block;
  transition: .5s;
}

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

.text-center {
  text-align: center;
}

.text-one {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.text-two {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-three {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}


.row {
  display: flex;
  flex-wrap: wrap;
  --gutter-x: 20px;
  margin-left: calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);
}

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

.row.row-direction {
  flex-direction: row !important;
}

.row>* {
  padding-right: calc(var(--gutter-x) / 2);
  padding-left: calc(var(--gutter-x) / 2);
}

.row.gap {
  --gutter-x: 0;
}

@media (max-width: 768px) {
  .row {
    --gutter-x: 20px;
  }
}


.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}



@media (min-width: 576px) {
  .col-sm-1 {
    width: 8.3333333333%;
  }

  .col-sm-2 {
    width: 16.6666666667%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.3333333333%;
  }

  .col-sm-5 {
    width: 41.6666666667%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-7 {
    width: 58.3333333333%;
  }

  .col-sm-8 {
    width: 66.6666666667%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.3333333333%;
  }

  .col-sm-11 {
    width: 91.6666666667%;
  }

  .col-sm-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.3333333333%;
  }

  .col-md-2 {
    width: 16.6666666667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.3333333333%;
  }

  .col-md-5 {
    width: 41.6666666667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.3333333333%;
  }

  .col-md-8 {
    width: 66.6666666667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.3333333333%;
  }

  .col-md-11 {
    width: 91.6666666667%;
  }

  .col-md-12 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg-1 {
    width: 8.3333333333%;
  }

  .col-lg-2 {
    width: 16.6666666667%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.3333333333%;
  }

  .col-lg-5 {
    width: 41.6666666667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.3333333333%;
  }

  .col-lg-8 {
    width: 66.6666666667%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.3333333333%;
  }

  .col-lg-11 {
    width: 91.6666666667%;
  }

  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xl-1 {
    width: 8.3333333333%;
  }


  .col-xl-2 {
    width: 16.6666666667%;
  }

  .col-xl-2-5 {
    width: 20%;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.3333333333%;
  }

  .col-xl-5 {
    width: 41.6666666667%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-7 {
    width: 58.3333333333%;
  }

  .col-xl-8 {
    width: 66.6666666667%;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-10 {
    width: 83.3333333333%;
  }

  .col-xl-11 {
    width: 91.6666666667%;
  }

  .col-xl-12 {
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .col-xxl-1 {
    width: 8.3333333333%;
  }

  .col-xxl-2 {
    width: 16.6666666667%;
  }

  .col-xxl-2-5 {
    width: 20%;
  }

  .col-xxl-3 {
    width: 25%;
  }

  .col-xxl-4 {
    width: 33.3333333333%;
  }

  .col-xxl-5 {
    width: 41.6666666667%;
  }

  .col-xxl-6 {
    width: 50%;
  }

  .col-xxl-7 {
    width: 58.3333333333%;
  }

  .col-xxl-8 {
    width: 66.6666666667%;
  }

  .col-xxl-9 {
    width: 75%;
  }

  .col-xxl-10 {
    width: 83.3333333333%;
  }

  .col-xxl-11 {
    width: 91.6666666667%;
  }

  .col-xxl-12 {
    width: 100%;
  }
}

/* #endregion */


/* #region Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 1000;
  transition: all 0.3s ease;
  max-width: 100vw;

}

header.sticky {
  height: 75px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 70px;
  width: auto;
  transition: height 0.3s ease;
}


.header-search {
  color: var(--black);
  cursor: pointer;
  transition: .3s;
}

.header-search:hover {

  color: var(--primary);
}

header.sticky .logo img {
  height: 60px;
}

.header-nav {
  height: 100%;
}

.header-nav>ul {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.header-nav>ul>li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-nav>ul>li>a {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
  position: relative;
}

.header-nav>ul>li>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.header-nav>ul>li.active>a,
.header-nav>ul>li>a:hover {
  color: var(--primary);
}

.header-nav>ul>li.active>a::after,
.header-nav>ul>li:hover>a::after {
  width: 100%;
}

.header-nav .icon-jiantou-xia {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
  padding: 6px;
  margin-left: auto;
}

.header-nav li:hover .icon-jiantou-xia {
  transform: rotate(180deg);
}

.header-nav .icon-jiantou-xia {
  display: none;
}

/* Mega Dropdown */
.product-nav {
  position: relative !important;
}

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 999;
  border-radius: 20px;
  padding-top: 10px;
}

.mega-dropdown::before {
  content: '';
  position: absolute;
  top: -0;
  left: 50px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #ffffff;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.08));
}

.product-nav:hover .mega-dropdown {
  /* display: block; */
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mega-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 20px;
  background: #fff;
  padding: 10px 0;
  overflow: hidden;
}

.mega-item {
  display: flex;
  gap: 20px;
  padding: 22px 28px;
  border-radius: 0;
  transition: all 0.2s ease;
  position: relative;
  align-items: center;
  cursor: pointer;
}

.mega-item a {
  display: flex;
  width: 100%;
}

.mega-item:hover {
  background: #f4fcf6;
}

.mega-item.has-sub:hover .mega-dropdown-sub {
  display: block;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.mega-item-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #e8f5e9;
  overflow: hidden;
  margin-right: 15px;
}

.mega-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mega-item-icon i {
  font-size: 28px;
  color: var(--primary);
}

.mega-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.mega-item-text strong {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  transition: color 0.2s ease;
  line-height: 1.2;
}

.mega-item:hover .mega-item-text strong {
  color: var(--primary);
}

.mega-item-text div {
  font-size: 16px;
  color: #888888;
  line-height: 1.4;
}

.mega-item-arrow {
  font-size: 32px;
  color: var(--primary);
  opacity: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  transform: translateX(-6px);
  font-weight: 300;
  line-height: 1;
}

.mega-item:hover .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

.mega-item-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0 28px;
}

/* Sub Dropdown for Mega Item */
.mega-dropdown-sub {
  position: absolute;
  top: -8px;
  left: 100%;
  width: 300px;
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 16px;
  border-radius: 16px;
  margin-left: 16px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.25s ease;
  z-index: 1000;
}

.mega-dropdown-sub a {
  display: block;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mega-dropdown-sub a:hover {
  background: #f4fcf6;
  color: var(--primary);
}

/* Sub Dropdown */
.sub-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  min-width: 220px;
  padding: 10px 0;
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  margin-top: 12px;
}

.sub-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #ffffff;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.08));

}

.sub-dropdown::after {
  content: '';
  position: absolute;
  left: 0;
  top: -12px;
  width: 100%;
  height: 12px;
}

.has-sub:hover .sub-dropdown {
  /* display: block; */
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.sub-dropdown li a {
  display: block;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #444444;
  transition: all 0.3s ease;
}

.sub-dropdown li a:hover {
  background: #f4fcf6;
  color: var(--primary);
  padding-left: 28px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-select {
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.lang-select:hover {
  color: var(--primary);
}

.lang-select span {
  font-size: 8px;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: 2px solid var(--primary);
  cursor: pointer;
}

.btn-primary:hover {
  background: #145028;
  transform: translateY(-2px);
}

.btn-primary i {
  font-size: 16px;
}

/* 新增：白底绿字复用类 */
.btn-white {
  background: #ffffff !important;
  color: var(--primary) !important;
  border-color: #ffffff !important;
}

.btn-white:hover {
  background: var(--primary-black) !important;
  color: #ffffff !important;
  border-color: var(--primary-black) !important;
}

/* 新增：白边框复用类 */
.btn-outline-white {
  background: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-outline-white2 {
  background: #fff !important;
  color: #222 !important;
}

.btn-outline-white:hover {
  background: #ffffff !important;
  color: var(--primary) !important;
}

/* 新增：绿边框复用类 */
.btn-outline-green {
  background: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.btn-outline-green:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* 新增：无框复用类 */
.btn-outline-none {
  border: none;
  background: none;
  color: var(--primary) !important;
}



.header-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.header-btn i {
  font-size: 26px;
  color: #333333;
}

/* #endregion */

/* #region Main */
main {
  padding-top: 90px;
}

/* #endregion */

/* #region Banner Section */
.banner {
  overflow: hidden;
  position: relative;
  background: #000000;
}

.banner-swiper {
  height: calc(90vh - 90px);
  min-height: 580px;
}

.banner-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

.banner-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 2;
}

.banner .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.banner-text {
  max-width: 900px;
  color: #ffffff;
}

.banner-text h2 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.banner-desc {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 40px;
  max-width: 700px;
}

.banner-btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-line {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

.btn-line:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary-black) !important;
}

.btn-line i {
  color: inherit;
}

/* #endregion */

/* #region Stats Section */
.index-num {
  background: #ffffff;
  padding: 40px 0;
  border-bottom: 1px solid #f0f0f0;
}

.index-num-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.index-num-li {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 240px;
  padding: 10px 0;
}

.index-num-li img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.index-num-li i {
  font-size: 38px;
  color: var(--primary);
  flex-shrink: 0;
}

.index-num-li span {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  display: block;
  line-height: 1.1;
  font-family: 'Inter', sans-serif;
}

.index-num-li p {
  font-size: 13px;
  color: #666666;
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.4;
}

/* #endregion */

/* #region Public Titles */
.public-title {
  text-align: center;
  margin-bottom: 55px;
}

.public-title.text-left {
  text-align: left;
}

.public-title h2 {
  font-size: 38px;
  font-weight: 800;
  color: #111111;
  /* margin-bottom: 16px; */
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
}

.public-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  display: none;
}

.public-title p {
  font-size: 16px;
  color: #666666;
  max-width: 650px;
  margin: 12px auto 0 auto;
}

/* #endregion */

/* #region Product Categories */
.index-product {
  background: #F5F5F5;
}

.index-product.background-color {
  background: #F5F5F5;
}

.index-product-row {
  margin-top: 20px;
  row-gap: 30px;
}

.index-product-li {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef2ef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border-color: rgba(29, 111, 56, 0.2);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 100%;
  position: relative;
}

.index-product-li:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(29, 111, 56, 0.08);
  border-color: rgba(29, 111, 56, 0.2);
}

.index-product-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f7f9f7;
  /* padding: 10px; */
  height: auto !important;
}

.index-product-img img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.index-product-li:hover .index-product-img img {
  transform: scale(1.08);
}

.index-product-card {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.index-product-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.index-product-li:hover h3 {
  color: var(--primary);
}

.index-product-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 24px;
  flex-grow: 1;
}

.index-product-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.index-product-li:hover .index-product-link {
  gap: 10px;
}

.index-product-oem-icon {
  aspect-ratio: 360 / 274;
}

.index-product-oem-icon img {
  max-width: 120px;
  max-height: 120px;
  margin: auto;
}

.index-product-oem-icon i {
  font-size: 56px;
  color: var(--primary);
}

.card-oem {
  border-color: rgba(29, 111, 56, 0.15);
}

/* #endregion */

/* #region Custom Manufacturing CTA */
.index-need {
  padding-top: 100px;
  background: #ffffff;
}

.index-need .container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.index-need-left {
  flex: 2.3;
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 320px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.index-need-left .public-title {
  text-align: left;
  margin-bottom: 40px;
}

.index-need-left .public-title h2 {
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 15px;
}

.index-need-left .public-title h2::after {
  display: none;
}

.index-need-left .public-title p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-size: 15px;
}

.index-need-left .btn-primary {

  align-self: flex-start;
}

.index-need-left .btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary) !important;
}

.index-need-right {
  flex: 1;
  background: #eeeeee;
  padding: 30px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 320px;
}

.index-need-text {
  flex: 1;
}

.index-need-text h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.index-need-text p {
  font-size: 14px;
  color: #666666;
  margin-bottom: 30px;
  line-height: 1.5;
}

.index-need-text .btn-blank {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary);
  color: var(--primary) !important;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.index-need-text .btn-blank:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
}

.index-need-img {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}

.index-need-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* #endregion */

/* #region About Us Section */
.index-about {
  background: #ffffff;
}

.index-about-row {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.index-about-left {
  flex: 1.03;
  min-width: 320px;

  border: 1px solid #e1dede;
  padding: 30px;
  border-radius: 10px;

}

.index-about-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.index-about-left h1 {
  font-size: 42px;
  font-weight: 800;
  color: #111111;
  line-height: 1.25;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

.index-about-text p {
  font-size: 16px;
  color: #666666;
  line-height: 1.65;
  margin-bottom: 30px;
}

.about-features {
  margin: 30px 0 40px 0;
}

.about-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.about-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #222222;
  border: 1px solid #e2e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.about-features li a {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  transition: .3s;
}

.about-features li a:hover {
  color: var(--primary);
}

.about-features li img {
  width: 40px;
  height: auto;
}

.about-features li i {
  color: var(--primary);
  font-size: 16px;
}

.index-about-right {
  flex: 0.9;
  position: relative;
  min-width: 320px;
}

.index-about-right img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
}

.index-about-tab {
  position: absolute;
  bottom: 10px;
  RIGHT: -20px;
  background: #ffffff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
  /* border-left: 6px solid var(--primary); */
  max-width: 260px;
}

.index-about-tab div {
  font-size: 52px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}

.index-about-tab p {
  font-size: 13px;
  font-weight: 700;
  color: #333333;
  margin: 0;
  line-height: 1.45;
}

/* #endregion */

/* #region Manufacturing Capabilities */
.index-manufact {
  background: #F5F5F5;
}

.index-manufact.background-color {
  background: #F5F5F5;
}

.index-manufact-row {
  margin-top: 30px;
  row-gap: 20px;
}


.index-manufact-li {
  /* background: #ffffff; */
  padding: 0 10px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  text-align: center;
  transition: all 0.35s ease;
  height: calc(100%);
  position: relative;
}

.index-manufact-row .col-12 {
  position: relative;
}

.index-manufact-row .col-12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background: #e1dede;
}

.index-manufact-row .col-12:last-child::after {
  display: none;
}

/* .index-manufact-li:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.05);
  border-color: var(--primary);
} */

.index-manufact-li img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: inline-block;
  margin-bottom: 10px;
}

.index-manufact-li i {
  font-size: 44px;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 24px;
}

.index-manufact-li h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

.index-manufact-li div {
  font-size: 14px;
  color: #666666;
  line-height: 1.55;
}

/* #endregion */

/* #region OEM / ODM Services */
.index-oem {
  margin-top: 60px;
}

.index-oem-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.index-oem-li {
  display: flex;
  background: #f7fbf8;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #edf3ef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.index-oem-card {
  flex: 1.2;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.index-oem-title {
  font-size: 26px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 16px;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.index-oem-text {
  font-size: 14px;
  color: #666666;
  margin-bottom: 28px;
  line-height: 1.6;
}

.index-oem-card ul {
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.index-oem-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #333333;
  font-weight: 600;
  line-height: 1.4;
}

.index-oem-card li i {
  color: var(--primary);
  font-size: 14px;
  margin-top: 3px;
}

.index-oem-img {
  flex: 1;
  position: relative;
  min-height: 380px;
}

.index-oem-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-oem-card .btn-primary {
  align-self: flex-start;
  font-size: 14px;
  padding: 10px 22px;
}

/* #endregion */

/* #region Team & PDF Profile */
.index-team {
  background: #ffffff;
}

.index-team .container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.index-team-left {
  flex: 2.3;
  background: #111111;
  padding: 30px;
  border-radius: 16px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 320px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.index-team-left .public-title {
  text-align: left;
  margin-bottom: 40px;
}

.index-team-left .public-title h2 {
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 15px;
}

.index-team-left .public-title h2::after {
  display: none;
}

.index-team-left .public-title p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-size: 15px;
}

.index-team-left .btn-primary {
  align-self: flex-start;
}


.index-team-right {
  flex: 1;
  background: #eeeeee;
  padding: 30px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 320px;
}

.index-team-text {
  flex: 1;
}

.index-team-text h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.index-team-text p {
  font-size: 14px;
  color: #666666;
  margin-bottom: 30px;
  line-height: 1.5;
}

.index-team-text .btn-blank {
  background: none;
  color: var(--primary) !important;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.index-team-text .btn-blank:hover {
  background: var(--primary-black);
  color: #ffffff !important;
}

.index-team-img {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}

.index-team-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* #endregion */

/* #region Quality & Certifications */
.index-quality {
  background: #fbfcfb;
  padding-bottom: 0;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cert-grid-row {
  display: block;
}

.index-quality-li {
  background: #ffffff;
  padding: 28px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #eef2ef;
  transition: all 0.3s ease;
}

.index-quality-li:hover {
  /* transform: translateY(-4px); */
  box-shadow: 0 10px 24px rgba(29, 111, 56, 0.05);
  border-color: var(--primary);
}

.index-quality-li img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.index-quality-li i {
  font-size: 34px;
  color: var(--primary);
  flex-shrink: 0;
}

.index-quality-text div {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 4px;
}

.index-quality-text p {
  font-size: 13px;
  color: #666666;
  margin: 0;
  line-height: 1.3;
}

.quality-accent-card {
  background: #312c2c;
  color: #ffffff;
  padding: 25px 30px;
  border-radius: 16px;
  height: 100%;
  display: flex;
  align-items: center;
}

.quality-accent-card img {
  width: 80px;
  margin-right: 15px;
}

.quality-accent-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #ffffff;
}

.quality-accent-card p {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.65;
  margin: 0;
}

/* #endregion */

/* #region Industries We Serve */
.index-serve {
  background: #ffffff;
}

.index-serve-row {
  margin-top: 15px;
}

.index-serve-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin-bottom: 30px;
  z-index: 1;
  transition: all 0.35s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.index-serve-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.index-serve-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.index-serve-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.25) 100%);
  z-index: -1;
  transition: background 0.35s ease;
}

.index-serve-card:hover::after {
  background: linear-gradient(to top, rgba(29, 111, 56, 0.92) 0%, rgba(29, 111, 56, 0.55) 100%);
}

.index-serve-card:hover .index-serve-bg img {
  transform: scale(1.1);
}

.index-serve-icon {
  position: relative;
  width: 60px;
  height: 60px;
  transition: all 0.3s ease;
}

.index-serve-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}



.index-serve-text {
  margin-top: 15px;
  text-align: center;
}

.index-serve-text h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* #endregion */

/* #region Trusted by Global Buyers */
.index-trusted {
  background: #F5F5F5;
}

.trusted-logos {
  --gutter-x: 20px;
  row-gap: 20px;
}

.logo-item {
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eef2ef;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #8fa095;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
}

.logo-item img {
  width: 100%;
}

.logo-item:hover {
  border-color: rgba(29, 111, 56, 0.3);
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(29, 111, 56, 0.06);
}

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  padding: 22px 30px;
  border-radius: 16px;
  border: 1px solid #eef2ef;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.01);
  position: relative;
  height: 100%;
}

.quote-card>i {
  font-size: 42px;
  color: rgba(29, 111, 56, 0.12);
  position: absolute;
  top: 35px;
  left: 35px;
  z-index: 0;
}

.quote-card p {
  font-size: 16px;
  font-style: italic;
  color: #333333;
  line-height: 1.7;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.quote-card span {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  display: block;
}

.quote-card:hover p {
  color: var(--primary);
}

/* #endregion */

/* #region News & Resources */
.index-news {
  background: #ffffff;
}

.index-news-row {
  margin-top: 20px;
  row-gap: 20px;
}

.index-news-ul {
  row-gap: 30px;
}

.index-news-li {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef2ef;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.index-news-li:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.05);
  border-color: rgba(29, 111, 56, 0.15);
}

.index-news-img {
  width: 100%;
  overflow: hidden;
  background: #fafafa;
}

.index-news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.index-news-li:hover .index-news-img img {
  transform: scale(1.08);
}

.index-news-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: inline-block;
}

.index-news-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  line-height: 1.45;
  margin-bottom: 24px;
  flex-grow: 1;
  transition: color 0.3s ease;
}

.index-news-li:hover h3 {
  color: var(--primary);
}

.news-more {
  font-size: 13px;
  font-weight: 700;
  color: #333333;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.index-news-li:hover .news-more {
  color: var(--primary);
  gap: 10px;
}

/* #endregion */

/* #region Stay Updated / Newsletter */
.index-stay {
  padding: 30px 0;
  background: var(--primary);
  color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.index-stay .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.index-stay-icon {
  margin-right: 15px;
}

.index-stay-icon img {
  width: 60px;
  height: auto;
}

.index-stay-icon i {
  font-size: 60px;
}

.index-stay .public-title {
  margin-bottom: 0;
  text-align: left;
}

.index-stay .public-title h2 {
  color: #ffffff;
  font-size: 30px;
}

.index-stay .public-title h2::after {
  display: none;
}

.index-stay .public-title p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin-top: 0;
}

.index-stay-input {
  max-width: 650px;
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 1);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.index-stay-input input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 15px;
  color: #333;
  font-size: 15px;
  outline: none;
}

.index-stay-input input::placeholder {
  color: #999;
}

.index-stay-input button {
  border-radius: 6px;
  border: none;

  font-weight: 700;
  padding: 0 30px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.index-stay-input button:hover {
  background: var(--primary-black);
  color: #ffffff;
}

/* #endregion */

/* #region Footer */
footer {
  background: #141414;
  color: #999999;
  padding: 90px 0 0 0;
  font-size: 15px;
  border-top: 1px solid #222222;
}

.footer-row {
  margin-bottom: 60px;
  row-gap: 30px;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 28px;
}

.footer-logo img {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.footer-text {
  font-size: 14px;
  line-height: 1.65;
  color: #aaaaaa;
  margin-bottom: 28px;
}

.footer-text {
  padding-bottom: 30px;
  position: relative;
}

.footer-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--primary);
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
}

.footer-social a:hover {
  border-color: var(--primary);
  color: #ffffff;
  background: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(29, 111, 56, 0.3);
}

.footer-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 28px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.footer-lis {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-lis a {
  color: #999999;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-lis .icon-jiantou-you {
  font-weight: 600;
  color: var(--primary);
}

.footer-lis a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
  color: #999999;
  margin-bottom: 10px;
}

.contact-info-item i {
  color: var(--primary);
  font-size: 17px;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-lis .btn-primary {
  margin-top: 15px;
  align-self: flex-start;
  font-size: 14px;
  padding: 10px 20px;
}

.footer-lis .btn-primary i {
  margin-right: 5px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
}

.footer-bottom p {
  color: #888888;
}

.footer-bottom-links {
  display: flex;
  gap: 30px;
}

.footer-bottom-links a {
  color: #777777;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 35px;
  right: 35px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-black);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.back-to-top i {
  font-size: 22px;
  transform: rotate(-90deg);
}

/* #endregion */

/* #region Responsive Media Queries */
@media (max-width: 1400px) {
  /* .container {
    max-width: 1200px;
  } */

  .banner-text h2 {
    font-size: 48px;
  }
}

@media (max-width: 1200px) {
  /* .container {
    max-width: 960px;
  } */

  .banner-swiper {
    height: 70vh;
    min-height: 500px;
  }

  .banner-text h2 {
    font-size: 40px;
  }

  .index-about-row {
    gap: 40px;
  }

  .index-about-left h1 {
    font-size: 34px;
  }

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

  .index-oem-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Header mobile menu triggers at 1200px */
  header {
    height: 80px;
  }

  header.sticky {
    height: 70px;
  }

  main {
    padding-top: 80px;
  }

  .header-btn {
    display: block;
  }

  /* Slide-in Mobile Menu */
  .header-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 1100;
    padding: 90px 24px 30px 24px;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12);
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block !important;
    overflow-y: auto;
  }

  .header-nav.active {
    right: 0;
  }

  .header-nav>ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: auto;
  }

  .header-nav>ul>li {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .header-nav>ul>li>a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .header-nav>ul>li>a::after {
    display: none;
  }

  .product-nav {
    position: relative !important;
  }

  .mega-dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 8px 0;
    opacity: 1;
    transform: none;
    background: #f8faf8;
    border-radius: 12px;
    margin-left: 0;
    min-width: auto;
  }

  .mega-dropdown::before {
    display: none;
  }

  .mega-dropdown-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .mega-item {
    padding: 18px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .mega-item>a {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: center;
  }

  .mega-item-icon {
    width: 64px;
    height: 64px;
    padding: 12px;
  }

  .mega-item-arrow {
    display: none;
  }

  .mega-item-divider {
    margin: 0 16px;
  }

  .mega-dropdown-sub {
    position: static;
    margin-left: 0;
    margin-top: 16px;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 20px;
    border-radius: 0;
    border-left: 2px solid #e7efea;
    width: 100%;
  }

  .mega-dropdown-sub a {
    padding: 12px 16px;
    font-size: 15px;
  }

  .mega-item.has-sub:hover .mega-dropdown-sub {
    display: block;
  }

  .sub-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    width: 100%;
    opacity: 1;
    transform: none;
    background: #f8faf8;
    border-radius: 8px;
    margin-top: 5px;
  }

  .sub-dropdown li a {
    padding: 10px 20px;
  }

  .sub-dropdown li a:hover {
    padding-left: 24px;
  }

  .header-actions .btn-primary {
    display: none;
    /* Hide Quote button on mobile header to save space */
  }

  .quote-card {
    display: none;
  }
}

@media (max-width: 992px) {
  .container {
    /* max-width: 720px; */
    padding: 0 20px;
  }

  .banner-swiper {
    height: 60vh;
  }

  .banner-text h2 {
    font-size: 34px;
  }

  .banner-desc {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .public-title h2 {
    font-size: 32px;
  }

  .index-about-row {
    flex-direction: column;
  }

  .index-about-left,
  .index-about-right {
    width: 100%;
  }

  .index-about-tab {
    left: 20px;
    bottom: 20px;
  }

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

  .quality-accent-card {
    padding: 35px;
  }
}

@media (max-width: 768px) {

  /* .container {
    max-width: 540px;
  } */
  .public-title h2 {
    font-size: 26px;
  }

  .banner-swiper {
    height: auto;
    min-height: 450px;
  }

  .banner-text h2 {
    font-size: 28px;
  }

  .banner-desc {
    font-size: 15px;
  }

  .index-num-row {
    justify-content: center;
  }

  .index-num-li {
    min-width: calc(50% - 12px);
  }

  .index-need .container,
  .index-team .container {
    flex-direction: column;
  }

  .index-need-left,
  .index-need-right,
  .index-team-left,
  .index-team-right {
    padding: 40px 30px;
  }

  .index-need-left .public-title h2,
  .index-team-left .public-title h2 {
    font-size: 28px;
  }

  .index-oem-li {
    flex-direction: column;
  }

  .index-oem-img {
    min-height: 250px;
  }

  .cert-grid {
    grid-template-columns: 1fr;
  }


  .footer-row {
    flex-direction: column;
    gap: 40px;
  }

  .footer-row>div {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }

  .banner-text h2 {
    font-size: 24px;
  }

  .banner-btns {
    flex-direction: column;
    width: 100%;
  }

  .banner-btns .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .index-num-li {
    min-width: 100%;
  }

  .index-about-left h1 {
    font-size: 28px;
  }

  .index-about-tab {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 20px;
    max-width: 100%;
  }

  .index-stay-input {
    /* flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    gap: 10px; */
    max-width: 100%;
    width: 100%;
    margin-top: 20px;
  }


  .index-stay-input input {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    width: 100%;
  }

  .index-stay-input button {
    width: 140px;
    justify-content: center;
    padding: 14px 0;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .footer-row .col-xxl-2 {
    display: none;
  }

}


/* --- Product Page Specific Styles --- */


/* 产品卡片 */
.product-categories-grid {
  padding: 100px 0;
}

.product-cat-card {
  background: #fff;
  padding: 30px;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  height: 100%;
  transition: 0.3s;
}

.product-cat-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary);
}

.cat-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}

.cat-num {
  font-size: 32px;
  font-weight: 800;
  color: #333;
}

.cat-items li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
}

.cat-items img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.cat-link {
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cat-link i {
  font-size: 16px;
}

/* 背景条模块 (Help & Ready) */


.product-need-card,
.product-ready-card {
  background-color: var(--primary);
  /* 基础背景色 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* 混合模式：确保绿色背景色能透出来 */
  padding: 40px 60px;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.need-info,
.ready-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.need-text h3,
.ready-info h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.need-text p,
.ready-info p {
  opacity: 0.8;
  font-size: 16px;
}

.card-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* 修复：左侧图标样式 */

.ready-btns {
  display: flex;
  gap: 15px;
}

/* 如何支持 */


.product-how-li {
  text-align: center;
  position: relative;
}

.how-icon-img {
  width: 80px;
  height: 80px;
  background: #f4faf6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  padding: 15px;
}

.product-how-li h3 {
  color: var(--primary);
}

.how-icon-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-how-li p {
  font-size: 13px;
  color: #777;
  margin-top: 10px;
}

.product-how-li:not(.last)::after {
  font-family: 'icomoon' !important;
  content: "\e661";
  position: absolute;
  top: 30px;
  right: -15px;
  font-size: 20px;
  color: var(--primary);
}

/* 咨询模块 */

.product-send-row {
  display: flex;
  gap: 80px;
  border: 1px solid #e1e1e1;
  padding: 30px;
  border-radius: 12px;
}

.product-send-left {
  flex: 0.8;
}

.product-send-t2 {
  font-size: 42px;
  font-weight: 800;
  margin: 10px 0 15px 0;
}

.product-send-t3 {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 20px;
}

.product-send-t5 {
  margin-top: 30px;
}

.product-send-t5 li {
  display: flex;
  gap: 20px;
  margin-bottom: 35px;
  align-items: flex-start;
}

.product-send-t5 li b {
  color: var(--primary);
}

.send-list-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

/* --- 表单容器及标签 --- */
.product-send-form {
  flex: 1.2;
}

.product-send-bottom {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-top: 15px;
}

.product-send-bottom i {
  font-size: 16px;
}

.product-send-form label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

/* --- 输入框样式：修复默认提示文字颜色 --- */
.product-send-form input,
.product-send-form textarea,
.product-send-form select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
  font-family: var(--font-body);
}

/* 重点：设置 placeholder 的默认文字颜色 */
.product-send-form input::placeholder,
.product-send-form textarea::placeholder {
  color: #aaa;
  font-size: 14px;
}

.product-send-form input:focus,
.product-send-form textarea:focus {
  border-color: var(--primary);
}

.product-send-form textarea {
  height: 80px;
  resize: vertical;
}

/* --- 修复上传区域样式：完全模拟截图效果 --- */
.file-upload {
  border: 2px dashed #e5e5e5;
  /* 灰色虚线框 */
  padding: 30px 20px;
  text-align: center;
  background: #fbfcfb;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.file-upload:hover {
  border-color: var(--primary);
  background-color: #f4faf6;
}

.file-upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-upload i {
  font-size: 36px;
  color: var(--primary);
  display: block;
  margin-right: 12px;
}

.file-upload p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.file-upload span {
  display: block;
  font-size: 13px;
  color: #999;
  margin-top: 5px;
}

/* 关键：隐藏原生 input，让用户点击整个虚线框都能触发上传 */
.file-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 变成全透明 */
  cursor: pointer;
  z-index: 10;
}

/* #endregion */

@media (max-width: 992px) {

  .product-send-row {
    flex-direction: column;
  }

  .product-need-card,
  .product-ready-card {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  .need-info {
    flex-direction: column;
  }
}

/* #endregion */


/* ==========================================================================
   产品二级列表页 (Product Sub-list) 专项样式
   ========================================================================== */

/* --- 1. Breadcrumbs 面包屑 --- */
.breadcrumbs {
  padding: 15px 0;
}

.breadcrumbs ul {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}

.breadcrumbs i {
  font-size: 14px;
  font-weight: bold;
  position: relative;
  top: 1px;
}

.breadcrumbs a:hover {
  color: var(--primary);
}

/* --- 2. Page Banner (整体背景图模式) --- */
.page-banner {
  min-height: 450px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 30px 40px;
  overflow: hidden;
}

/* .page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
} */

.page-banner .container {
  position: relative;
  z-index: 2;
}

.page-banner-left {
  max-width: 700px;
}

.page-banner-left h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-banner-text {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 35px;
}

.page-banner-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* --- 1. Sidebar 左侧侧边栏 --- */
.product-cate-left {
  position: sticky;
  top: 110px;
}

.product-cate-title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin-bottom: 25px;
}



/* 侧边栏引导卡片 (白底样式) */
.product-cate-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
  text-align: left;
  margin-top: 30px;
}

.product-cate-card .btn-primary {
  display: flex;
  justify-content: center;
}

.help-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.help-top img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.help-top span {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
}

.product-cate-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 卡片内按钮 - 全宽深绿色 */
.btn-block-green {
  width: 100%;
  justify-content: center;
  background: var(--primary);
  color: #fff !important;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.btn-block-green:hover {
  background: #145028;
  transform: translateY(-2px);
}

/* --- 2. Main Content 右侧主内容区 --- */

.product-cate-right .public-title {
  text-align: center;
  margin-bottom: 50px;
}

/* Explore 分类卡片 (带边框版) */
.product-explore-li {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.product-explore-li:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--primary);
}

.explore-top-num {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  margin-bottom: 20px;
  text-align: center;
}

.product-explore-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.product-explore-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.explore-list {
  margin-bottom: 25px;
  flex-grow: 1;
  list-style: disc;
  padding-left: 20px;
}

.explore-list li {
  font-size: 14px;
  color: #666;
  padding: 5px 0;
  position: relative;
  line-height: 1.4;
  list-style: disc;
}

.explore-list li i {
  margin-right: 5px;
  color: var(--primary);
}

.view-cate {
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.view-cate i {
  font-size: 16px;
}

/* --- 3. Popular & Buyers Choose 模块 --- */

/* .product-popular {
  padding: 80px 0;
  border-top: 1px solid #f5f5f5;
} */

/* Popular 系列改为独立边框卡片 */
.product-popular-li {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 25px 15px;
  text-align: center;
  display: block;
  height: 100%;
  transition: 0.3s;
}

.product-popular-li:hover {
  border-color: var(--primary);
  transform: translateY(-0);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.product-popular-li img {
  width: 100%;
  height: auto;
  max-width: 80px;
  object-fit: contain;
  margin: 0 auto 15px;
}

.product-popular-li h3 {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}

/* Why Buyers Choose 模块改为卡片式 */

.product-buyers-li {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 15px;
  text-align: center;
  padding: 40px 25px;
  height: 100%;
  transition: 0.3s;
}

.product-buyers-li:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.product-buyers-li img {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
}

.product-buyers-li h3 {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 15px;
}

.product-buyers-li p {
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

.product-cate .public-title h2 {
  font-size: 32px;
  font-weight: 800;
}

/* --- 4. Responsive 响应式适配 --- */

@media (max-width: 991px) {
  .product-cate-left {
    position: static;
    margin-bottom: 50px;
  }

}

@media (max-width: 767px) {
  .product-cate-right .public-title h2 {
    font-size: 26px;
  }

}

/* --- 1. Sidebar 三级折叠侧边栏 --- */
/* --- 侧边栏整体容器 --- */
.product-cate-line {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* --- 第一级 (L1) --- */
.product-cate-air {
  border-bottom: 1px solid #eee;
}

.product-cate-air:last-child {
  border-bottom: none;
}

.product-cate-one {
  background: #fcfcfc;
  /* 默认未选中背景 */
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-cate-one a {
  flex-grow: 1;
  display: block;
}

.product-cate-one span {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.product-cate-one .arrow {
  font-size: 14px;
  color: #999;
  transition: transform 0.3s ease;

  padding: 10px;
  margin: -10px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* L1 激活状态 (Active) */
.product-cate-air.active .product-cate-one {
  background: var(--primary);
}

.product-cate-air.active .product-cate-one span {
  color: #fff;
}

.product-cate-air.active .product-cate-one .arrow {
  color: #fff;
  transform: rotate(180deg);
}

/* --- 第二级 (L2) --- */
.product-cate-two {
  display: none;
  /* 默认隐藏 */
  padding: 5px 0;
  background: #fff;
}

.product-cate-two>li {
  position: relative;
  border-bottom: 1px solid #f9f9f9;
}

.product-cate-two>li:last-child {
  border-bottom: none;
}

.product-cate-two>li>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 33px;
  font-size: 14px;
  color: #444;
  font-weight: 600;
  transition: all 0.3s;
  position: relative;
}

.product-cate-two>li>a i {
  font-size: 14px;
  color: #ccc;
  transition: transform 0.3s;

  padding: 5px 10px;
  margin-right: -10px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* L2 激活状态 (Active) */
.product-cate-two>li.active {
  background: #f8fbf9;
  /* 浅绿背景 */
}

.product-cate-two>li.active>a {
  color: var(--primary);
}

/* L2 激活时的左侧绿色指示条 */
.product-cate-two>li.active>a::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.product-cate-two>li.active>a i {
  transform: rotate(180deg);
  color: var(--primary);
}

/* --- 第三级 (L3) 虚线样式 --- */
.product-cate-three {
  display: none;
  /* 默认隐藏 */
  padding: 5px 0 15px 50px;
  position: relative;
}

/* 垂直虚线 */
.product-cate-three::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 20px;
  width: 1px;
  border-left: 1px dashed #ddd;
}

.product-cate-three li {
  position: relative;
  padding: 6px 0;
}

/* 水平连接虚线 */
.product-cate-three li::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 16px;
  width: 10px;
  height: 1px;
  border-top: 1px dashed #ddd;
}

.product-cate-three li a {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}

.product-cate-three li a.active {
  color: var(--primary);
}

/* L3 列表前面的小圆点 */
.product-cate-three li a::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

/* L3 激活状态 (Active) */
.product-cate-three li.active a {
  color: var(--primary);
  font-weight: 700;
}

.product-cate-three li.active a::before {
  background: var(--primary);
}

/* --- 2. Identification Guide 规格指南 --- */
.product-guide-card {
  background: #fbfcfb;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.product-guide-text {
  flex: 0 0 280px;
  /* 固定宽度 */
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  font-weight: 500;
}

.product-guide-ul {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-left: 1px solid #eee;
  padding-left: 40px;
}

.product-guide-li {
  text-align: center;
  padding: 0 10px;
  flex: 1;
  position: relative;
}

/* 分隔线 */
.product-guide-li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: #eee;
}

.product-guide-li img {
  height: 80px;
  /* 统一高度 */
  width: auto;
  margin: 0 auto 15px;
  object-fit: contain;
}

.product-guide-li span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.5px;
}

/* --- 响应式处理 --- */
@media (max-width: 991px) {
  .product-guide-card {
    flex-direction: column;
    padding: 30px;
  }

  .product-guide-text {
    flex: none;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .product-guide-ul {
    width: 100%;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #eee;
    padding-top: 30px;
  }
}

@media (max-width: 575px) {
  .product-guide-ul {
    flex-wrap: wrap;
  }

  .product-guide-li {
    flex: 0 0 50%;
    margin-bottom: 20px;
  }

  .product-guide-li:nth-child(2n)::after {
    display: none;
  }
}


/* 主详情图文区 */
.product-details {
  overflow: hidden;
  padding-top: 30px;
}

.product-details-swiper {
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.product-details-swiper .swiper-slide {
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.product-details-swiper img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.product-details-imgs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-thumb-swiper {
  flex: 1;
}

.product-thumb-swiper .swiper-slide {
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  height: 90px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb-swiper .swiper-slide-thumb-active {
  border-color: var(--primary);
  background: #f9fbf9;
}

.product-thumb-swiper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-details-prev,
.product-details-next {
  width: 36px;
  height: 36px;
  border: 1px solid #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 右侧信息区 */
.product-details-right h1 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #111;
}

.product-details-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.product-details-ul li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 16px;
}

.product-details-ul i {
  color: var(--primary);
  font-size: 18px;
  position: relative;
  top: 4px;
}

.product-details-btns {
  display: flex;
  gap: 15px;
  margin: 33px 0;
  flex-wrap: wrap;
}

.product-details-row {
  display: flex;
  border-top: 1px solid #f0f0f0;
  padding-top: 25px;
  gap: 15px;
}

.product-details-row li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-details-row img {
  width: 30px;
}

.product-details-row b {
  font-size: 14px;
  display: block;
}

.product-details-row p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 粘性 Tabs */
.product-tabs {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 90px;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.product-tabs .container {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.product-tabs a {
  padding: 18px 25px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  position: relative;
  white-space: nowrap;
}

.product-tabs a.active {
  color: var(--primary);
}

.product-tabs a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
}

/* Overview 概述样式 */
.product-overview-line {
  display: flex;
  gap: 20px;
  border: 1px solid #e9e6e6;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 15px;
}

.product-overview-text,
.product-overview-line p {
  font-size: 16px;
  color: #666;
}

.product-overview-line img {
  width: 44px;
  height: 44px;
}

.product-overview-line b {
  font-size: 17px;
  color: #111;
  display: block;
}

.product-overview-text {
  margin-bottom: 20px;
}

.product-details-title {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  margin-bottom: 16px;
}

.product-overview-ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.product-overview-ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #e9e6e6;
  padding: 8px 12px;
  border-radius: 5px;
}

.product-overview-ul img {
  width: 24px;
}

/* 参数表格样式 */
.product-table {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.product-table-title {
  background: var(--primary);
  display: flex;
  color: #fff;
  font-weight: 800;
}

.product-table-line {
  border-top: 1px solid #eee;
  background: #fff;
}

.product-table-line div {
  display: flex;
}

.product-table-title span,
.product-table-line span {
  flex: 1;
  padding: 14px 15px;
  font-size: 14px;
  border-right: 1px solid #eee;
}

.product-table div:last-child {
  border-right: none;
}

.spec-more {
  display: none;
}

.product-addlica .index-manufact-li h3,
.product-ident .index-product-text,
.product-variants .index-product-card h3 {
  margin-bottom: 0;
}

.product-addlica .index-manufact-li img {
  margin-bottom: 5px;
}

.product-spec-card {
  overflow-x: auto;
}


.product-details .swiper {
  overflow: hidden;
}

@media (max-width: 991px) {
  .product-details-swiper .swiper-slide {
    height: 350px;
  }

  .product-details-row {
    flex-direction: column;
  }

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

  .product-send-t2,
  .product-details-right h1 {
    font-size: 26px;
  }

  body {
    font-size: 16px;
  }

  .product-details-right {
    margin-top: 30px;
  }

}

@media (max-width: 767px) {
  .product-table {
    width: 150%;
  }

  body {
    font-size: 14px;
  }

  .product-send-t2,
  .product-details-right h1 {
    font-size: 24px;
  }

}


/* --- 2. Wide Product Variety Bar (深绿横条) --- */
.industries-wde {
  padding: 0;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.industries-wde-row {
  background-color: var(--primary);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  padding: 22px 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  row-gap: 20px;
  margin-left: 0;
  margin-right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.industries-wde-li {
  flex: 1;
  min-width: 160px;
  text-align: center;
  color: #fff;
  padding: 0 10px;
  position: relative;
}

.industries-wde-li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.industries-wde-li img {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.industries-wde-li div {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- 3. Industries at a Glance (核心行业网格) --- */
.industries-at-li {
  background: #f8fbf9;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 35px 25px;
}

.industries-at-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.industries-at-title span {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.industries-at-title div {
  font-size: 17px;
  font-weight: 800;
  color: #333;
  letter-spacing: 0.5px;
}

.industries-at-link {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  transition: 0.3s;
  text-decoration: none;
}

.industries-at-link:last-child {
  margin-bottom: 0;
}

.industries-at-link:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.industries-at-img {
  width: 85px;
  height: 85px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 20px;
}

.industries-at-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industries-at-text {
  flex: 1;
  overflow: hidden;
  padding-right: 10px;
}

.industries-at-text h3 {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 6px;
}

.industries-at-text div {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.industries-at-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  transition: 0.3s;
}

.industries-at-link:hover .industries-at-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- 4. Built for Requirements (重点：补充的模块) --- */
.side-title-box {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 20px;
  display: inline-block;
  letter-spacing: 0.5px;
  position: relative;
}

/* 列表样式 (左右两列通用) */
.built-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.built-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}

.built-list i {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 合作场景样式 (中间列带虚线) */
.scenario-list {
  display: flex;
  flex-direction: column;
}

.scenario-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px dashed #ddd;
  /* 虚线效果 */
  font-size: 14px;
}

.scenario-list li:last-child {
  border-bottom: none;
}

.scenario-list span {
  max-width: 50%;
  color: #666;
  font-weight: 500;
}

.scenario-list b {
  max-width: 50%;
  color: var(--primary);
  font-weight: 700;
  text-align: right;
}

/* --- 5. Quality Section (深色背景) --- */
.industries-quality-bg {
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 50px 30px;
  position: relative;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.industries-quality-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.industries-quality-title {
  position: relative;
  z-index: 2;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 30px;
  text-align: center;
}

.industries-quality-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
}

.industries-quality-li img {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.industries-quality-li b {
  font-size: 18px;
  font-weight: 800;
  display: block;
  margin-bottom: 10px;
}

.industries-quality-li p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
}

/* --- 6. FAQ & CTA (握手卡片) --- */

.industries-faq {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.industries-faq li {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 6px;
}

.industries-faq-title {

  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.industries-faq-title h3 {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-right: 5px;
}

.industries-faq-title.active h3 {
  color: var(--primary);
}

.industries-faq-title i {
  font-size: 14px;
  color: #999;
  transition: 0.3s;
}

.industries-faq-title.active i {
  transform: rotate(180deg);
  color: var(--primary);
}

.industries-faq-text {
  padding-top: 10px;
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  display: none;
}

.industries-asked-card {
  background-color: #f8fbf9;
  background-image: url('assets/images/Industries/LET’S BUILD YOUR SOLUTION/Business Partnership Handshake CTA Background.webp');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 55px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  position: relative;
}

.industries-asked-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #111;
}

.industries-asked-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
  max-width: 380px;
  line-height: 1.6;
}

.industries-built {}

.industries-built-card {
  padding: 20px;
  border-radius: 10px;
  height: 100%;
}

.industries-at-row {
  row-gap: 30px;
}

.industries-cate .explore-list {
  margin-bottom: 0;
}

.industries-built-row {
  row-gap: 20px;
}

/* --- 7. 响应式适配 --- */
@media (max-width: 1200px) {
  .industries-quality-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .industries-wde-li::after {
    display: none;
  }
}

@media (max-width: 991px) {
  .space {
    padding: 80px 0;
  }

  .page-banner {
    height: auto;
    padding: 100px 0 100px 0;
    /* text-align: center; */
  }

  .page-banner-btns {
    justify-content: center;
  }

  .industries-wde {
    padding: 0 15px;
  }

  .industries-asked-card {
    margin-top: 40px;
    background-image: none;
    text-align: center;
    align-items: center;
    padding: 40px;
  }

  .industries-asked-text {
    max-width: 100%;
  }

  .page-banner-left h1 {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .space {
    padding: 60px 0;
  }

  .page-banner {
    padding: 60px 0;
  }

  .product-explore-li {
    height: auto;
  }

  .industries-quality-row {
    grid-template-columns: 1fr;
  }

  .industries-quality-title {
    font-size: 26px;
  }

  .page-banner-left h1 {
    font-size: 32px;
  }

  .page-banner-text {
    font-size: 16px;
  }

  .industries-at-btn {
    display: none;
  }

  .industries-at-text {
    padding-right: 0;
  }

  .industries-buyers .product-buyers-li {
    height: auto;
  }

}

/* ==========================================================================
   INDUSTRIES SCENARIOS - NEW MODULE
   ========================================================================== */

.industries-scenarios-row {
  margin-top: 20px;
  row-gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  content: '';

  background: linear-gradient(to top, rgba());

}

.industries-scenarios-li {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f0f0f0;
  /* 更浅的边框 */
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
}

.industries-scenarios-li:hover {
  border-color: var(--primary);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  transform: translateY(-8px);
  /* 悬浮高度稍高一点 */
}

.industries-scenarios-img {
  height: 220px;
  /* 增加一点高度 */
  overflow: hidden;
  position: relative;
}

.industries-scenarios-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.industries-scenarios-li:hover .industries-scenarios-img img {
  transform: scale(1.1);
  /* 图片放大效果 */
}

/* 内部图文内容排版 */
.industries-scenarios-card {
  padding: 30px 25px;
  /* 增加内边距 */
  display: flex;
  gap: 20px;
  flex: 1;
}

.industries-scenarios-left {
  flex-shrink: 0;
}

.industries-scenarios-left img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.industries-scenarios-right {
  flex: 1;
}

.industries-scenarios-right h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.3;
}

.industries-scenarios-text {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
  margin-bottom: 20px;
  min-height: 42px;
  /* 保持文字高度统一，方便对齐 */
}

.industries-scenarios-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.industries-scenarios-li:hover .industries-scenarios-link {
  gap: 12px;
  /* 箭头位移 */
}


/* 之前的 5列布局 */

@media (max-width: 1200px) {
  .industries-scenarios-img {
    height: 180px;
  }

}


@media (max-width: 767px) {
  .industries-scenarios-card {
    padding: 25px;
  }

}





/* ==========================================================================
   OEM / ODM PAGE NEW STYLES
   ========================================================================== */

/* --- oem-list (01-04 Cards) --- */

.oem-work-row .oem-work-row,
.oem-list-row {
  row-gap: 20px;
}

.oem-list-li {
  display: block;
  background: #fff;
  border: 1px solid #eee;
  padding: 40px 30px;
  border-radius: 15px;
  height: 100%;
  transition: all 0.35s ease;
  text-decoration: none;
}

.oem-list-li:hover {
  border-color: var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.oem-list-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.oem-list-num span {
  font-size: 42px;
  font-weight: 800;
  color: #dbdbdb;
  line-height: 1;
}

.oem-list-num img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.oem-list-li h3 {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 15px;
}

.oem-list-li p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.oem-list-li .btn-outline-none {
  color: var(--primary);
  font-weight: 700;
  border: none;
  background: transparent;
  padding: 0;
}

/* --- oem-work (Icons + Text) --- */
.oem-work-li {
  display: flex;
  gap: 20px;
  background: #fff;
  padding: 30px 25px;
  border-radius: 12px;
  height: 100%;
  border: 1px solid transparent;
}

.oem-work-line .oem-work-li {
  background: none;
  padding-top: 0;
  padding-bottom: 0;
}

.oem-work-line .col-12 {
  position: relative;
}

.oem-work-line .col-12::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70px;
  background: #cbc9c9;
}

.oem-work-line .col-12:last-child::after {
  display: none;
}


.oem-work-li:hover {
  border-color: var(--primary);
}

.oem-work-line .oem-work-li:hover {
  border-color: transparent;
}

.oem-work-li img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.oem-work-li h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
}

.oem-work-li p {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  margin: 0;
}

/* --- oem-simple (Workflow 1-6) --- */
.oem-simple-li {
  text-align: center;
  position: relative;
  padding: 10px;
}

.oem-simple-num {
  width: 34px;
  height: 34px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-weight: 800;
  z-index: 2;
  position: relative;
}

.oem-simple-li h3 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}

.oem-simple-li p {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  margin-bottom: 15px;
}

.oem-simple-li img {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

/* Workflow 连接线 */
@media (min-width: 1200px) {
  .oem-simple-li::after {
    font-family: 'icomoon' !important;
    content: "\e624";
    position: absolute;
    top: 12px;
    left: 100%;
    font-size: 20px;
    color: var(--primary);
    z-index: 1;
  }

  .col-xl-2:last-child .oem-simple-li::after {
    display: none;
  }
}

/* --- oem-supported (materials + served) --- */
.oem-supported-service {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #eee;
  height: 100%;
}

.oem-supported-service .built-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.oem-supported-service .built-list li {
  min-width: calc(33.33% - 12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;



}

.oem-supported-service .built-list img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
}

.oem-supported-service .built-list p {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #444;
}

/* --- oem-trusted (Swiper + FAQ) --- */
.oem-trusted .row {
  row-gap: 30px;
}

.oem-trusted-left {
  background-color: var(--primary);
  background-size: cover;
  background-position: center;
  padding: 30px 40px;
  border-radius: 20px;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.oem-trusted-left h2 {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 800;
  margin-bottom: 12px;
}

.trusted-desc {
  font-size: 15px;
  opacity: 0.9;
  margin-bottom: 22px;
  line-height: 1.6;
}

.oem-trusted-center {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #eee;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oem-trusted-center .certSwiper {
  width: 100%;
  overflow: visible;
}

.certSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.certSwiper img {
  width: 100%;
  height: auto;
  border: 1px solid #f5f5f5;
  padding: 10px;
  object-fit: contain;
}

.certSwiper .swiper-pagination {
  position: relative;
  top: 0 !important;
  bottom: 0 !important;
}

.certSwiper .swiper-pagination-bullet-active {
  background: var(--primary);
}

.oem-faq li {
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.oem-faq-title {

  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #222;
  font-size: 16px;
}

.oem-faq-text {
  font-size: 14px;
  color: #666;
  margin-top: 6px;
  line-height: 1.6;
  display: none;
}

.oem-faq li.active .oem-faq-title {
  color: var(--primary);
}

.oem-faq li.active .oem-faq-title i {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .product-popular-li {
    height: auto;
  }
}


/* --- Capabilities Years Bar --- */
.capabilities-years {}

.capabilities-years .capabilities-years-row {
  background: #fff;
  padding: 20px 20px;
  border: 1px solid #eee;
  border-radius: 15px;
  margin-top: -20px;
  position: relative;
}

.capabilities-years-li {
  display: flex;
  align-items: center;
  gap: 20px;
}

.capabilities-years-li img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.capabilities-years-li b {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  display: block;
  line-height: 1.1;
}

.capabilities-years-li p {
  font-size: 13px;
  color: #666;
  margin: 5px 0 0 0;
}

/* --- Built & Manufact Card Icons --- */
.capabilities-built-li {
  display: flex;
  align-items: start;
  gap: 20px;
  border-radius: 12px;
  height: 100%;
}

.capabilities-built-li div {
  flex: 1;
  overflow: hidden;
}

.capabilities-built-li span {
  border-radius: 50%;
  background: #f2ebeb;
  padding: 10px;
  overflow: hidden;
}

.capabilities-built-li img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.capabilities-built-li h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 8px;
}

.capabilities-built-li p {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  margin: 0;
}



/* --- Forward (Workflow) Steps --- */
.capabilities-forward-row {
  position: relative;
  padding-top: 20px;
  row-gap: 25px;
}

.forward-li-box {
  text-align: center;
  position: relative;
  padding: 0 10px;
}

.forward-li-box span {
  width: 80px;
  height: 80px;
  background: #f4fcf6;
  border: 1px solid #d4dbd6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: 0.3s;
  overflow: hidden;
}

.forward-li-box:hover span {
  border-color: var(--primary);
}


.forward-li-box img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  transition: 0.3s;
}

.forward-li-box h3 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--primary);
}

.forward-li-box p {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
  margin: 0;
}

/* 步骤之间的连接线（桌面端） */
@media (min-width: 1200px) {
  .forward-li-box::after {
    font-family: 'icomoon' !important;
    content: "\e624";
    position: absolute;
    top: 20px;
    right: -15px;
    font-size: 22px;
    color: var(--primary);
  }

  .capabilities-forward-row .col-6:last-child .forward-li-box::after,
  .capabilities-forward-row .col-6:last-child .forward-li-box::after {
    display: none;
  }
}

/* --- Quality & Support Grid --- */


.capabilities-quality-list {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  position: relative;
  z-index: 2;
  padding: 0 100px 0 0;
}

.capabilities-quality-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.capabilities-quality-list img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.capabilities-quality-list b {
  font-size: 15px;
  display: block;
  margin-bottom: 5px;
  color: #111;
}

.capabilities-quality-list p {
  font-size: 13px;
  color: #777;
  margin: 0;
  line-height: 1.4;
}

.capabilities-quality-ul {
  row-gap: 10px;
  --gutter-x: 10px;
}

.capabilities-quality-ul li div {
  background: #fbfcfb;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 18px;
  text-align: left;
  height: 100%;
}

.capabilities-quality-ul img {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
}

.capabilities-quality-ul b {
  font-size: 15px;
  display: block;
  margin-bottom: 8px;
  color: #111;
}

.capabilities-quality-ul p {
  font-size: 13px;
  color: #777;
  margin: 0;
  line-height: 1.5;
}

.index-product-card {
  position: relative;
}

.index-product-card span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: -52px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  overflow: hidden;
  background: var(--primary);
  padding: 10px;
}

.index-product-card span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.capabilities-quality-bg {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

/* .capabilities-quality-bg>img  */
.capabilities-quality-left>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.capabilities-built-right {
  border-left: 1px solid #e1e1e1;
  padding-left: 35px;
}

.capabilities-built-ul {
  row-gap: 25px;
}

.capabilities-manufact .index-product-img {
  padding: 0;
}

.capabilities-years-row {
  row-gap: 20px;
}

.capabilities-built-left .public-title h2::after {
  left: 0;
  transform: translateX(0);
}

.capabilities-built-left .public-title p {
  margin-left: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
  .product-send-row {
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .capabilities-built-left {
    margin-bottom: 40px;
  }

  .capabilities-quality-left {
    margin-bottom: 60px;
  }
}

@media (max-width: 767px) {

  .capabilities-quality-list {
    padding: 0 25px 0 0;
  }



  .capabilities-quality-bg>img {
    object-position: left center;
  }

  .product-send-row {
    gap: 30px;
  }

  .capabilities-years-li b {
    font-size: 22px;
  }
}





/* --- 5-2 Brass Processing & Machining 专项样式 --- */

/* 1. 强制 6 列的小方块样式 (不覆盖全局) */
.brass-materials .col-xl-2,
.brass-industries .col-xl-2 {
  width: 16.666%;
  /* 桌面端强制一行6个 */
}

.brass-materials .index-product-li {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  height: 100%;
  margin-bottom: 15px;
}

.brass-materials .index-product-li img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.brass-materials .index-product-li h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 0 15px;
}

.brass-industries {
  background: #F5F5F5;
}

.brass-industries .index-manufact-li {
  background: #fff;
  border: 1px solid #f2f2f2;
  padding: 25px 10px;
  border-radius: 12px;
  height: 100%;
  text-align: center;
  margin-bottom: 0;
}

.brass-industries .index-manufact-li img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.brass-industries .index-manufact-li h3 {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

/* 2. Quality & Inspection You Can Rely On 模块 (文字+图片并排) */
.brass-quality-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.brass-quality-left {
  flex: 1;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.brass-quality-left li {
  display: flex;
  gap: 20px;
  padding: 22px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  width: calc(50% - 10px);
}

.brass-quality-left img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.brass-quality-left b {
  font-size: 16px;
  display: block;
  margin-bottom: 5px;
  color: #111;
}

.brass-quality-left p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.brass-quality-right {
  width: 40%;
  display: flex;
  gap: 20px;
  height: 100%;
}

.q-img-box {
  flex: 1;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.q-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Need a Brass Manufacturing Partner (Banner 条) */
.brass-need-bg {
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
}

.brass-need-bg .public-title {
  margin-bottom: 0;
  text-align: left;
}

.brass-need-bg .public-title p {
  max-width: none;
}

.brass-need-center {
  margin-left: 40px;
}

.brass-need-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* 遮罩层 */
}

.brass-need-bg .public-title,
.brass-need-center {
  position: relative;
  z-index: 2;
}

.brass-need-center .btn-white {
  background: #fff;
  color: var(--primary) !important;
  border: none;
  padding: 16px 45px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}

.brass-need-text {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
}

/* 4. 处理 9 步流程的宽度 */
.col-xxl-1-2 {
  width: 11.111%;
}

.capabilities-forward-two .forward-li-box img {
  width: 100%;
  height: 100%;
}


.brass-need-bg .public-title h2::after {
  display: none;
}

.brass-need-bg .public-title h2 {
  margin-bottom: 0;
}

/* 移动端适配 */
@media (min-width: 991px) {
  .brass-need-bg .public-title h2 {
    font-size: 30px;
  }
}

@media (max-width: 1200px) {

  .brass-materials .col-xl-2,
  .brass-industries .col-xl-2 {
    width: 33.333%;
  }

  .col-xxl-1-2 {
    width: 25%;
  }
}

@media (max-width: 991px) {
  .brass-quality-row {
    flex-direction: column;
  }

  .brass-quality-right {
    width: 100%;
  }
}

@media (max-width: 768px) {

  .brass-materials .col-xl-2,
  .brass-industries .col-xl-2 {
    width: 50%;
  }

  .col-xxl-1-2 {
    width: 50%;
  }

  .brass-need-bg {
    padding: 60px 20px;
  }
}





/* ==========================================================================
   Quality Page New Styles (质量页面专项 - Scoped)
   ========================================================================== */

/* 1. Page Banner 文字白色及遮罩 */
.quality-banner {
  position: relative;
  background-size: cover;
  background-position: center;
}

.quality-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* 深色遮罩保护文字 */
  z-index: 1;
}

.quality-banner .container {
  position: relative;
  z-index: 2;
}

.quality-banner h1,
.quality-banner .page-banner-text,
.quality-banner .page-banner-left div {
  color: #ffffff !important;
}

/* 2. 处理图标图片 (img) 的统一尺寸 */
.quality-top-features .index-manufact-li img,
.quality-trace .index-manufact-li img {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: block;
  object-fit: contain;
}


/* 3. 证书卡片优化 */
.quality-certifi .index-product-li {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  text-align: center;
}

.quality-certifi .index-product-text {
  margin-bottom: 0;
}

.quality-certifi .index-product-img {
  height: auto;
  background: transparent;
  border: none;
  padding: 20px;
}

.quality-certifi .index-product-card {
  padding-top: 0;
}

.quality-certifi .index-product-img img {
  max-height: 100%;
  width: auto;
}

.quality-certifi h3 {
  font-size: 16px;
  font-weight: 800;
}

/* 4. 检测能力卡片布局 */
.quality-inspec .index-product-card {
  padding: 15px 20px 25px 20px;
}

.quality-inspec .index-product-li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 15px;
  overflow: hidden;
}

.quality-inspec .index-product-img {
  height: 180px;
  padding: 0;
}

.quality-inspec .index-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quality-inspec h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.quality-inspec h3 img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.quality-inspec .index-product-text {
  margin-bottom: 0;
}

/* 5. 质量统计条 */
.quality-years .capabilities-years-li img {
  width: 45px;
  height: 45px;
}

.quality-years b {
  font-size: 24px;
  color: #111;
}

.quality-years .capabilities-years-row {
  margin-top: 0;
  background: rgba(29, 111, 56, 0.1);
}

.quality-years b {
  color: var(--primary);
}

/* 6. 核心 6列 布局逻辑适配 */
@media (min-width: 1200px) {

  .quality-top-features .col-xl-2,
  .quality-certifi .col-xl-2,
  .quality-inspec .col-xl-2,
  .quality-trace .col-xl-2,
  .quality-years .col-xl-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}


@media (max-width: 768px) {
  .quality-banner {
    height: auto;
    padding: 80px 0;
    text-align: center;
  }

  .quality-inspec .col-xl-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .capabilities-years-row {
    --gutter-x: 0;
  }

  .capabilities-years-li b {
    font-size: 22px;
  }

  .capabilities-years-li {
    gap: 15px;
  }
}


/* ==========================================================================
   Resources Page (资源中心) 完整专项样式 - Scoped Version
   ========================================================================== */

/* --- 1. Banner & 搜索增强 --- */
.banner-white-text .banner-search-box {
  background: #fff;
  border-radius: 8px;
  display: flex;
  max-width: 550px;
  padding: 5px;
  margin-top: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.banner-search-box input {
  flex: 1;
  border: none;
  padding: 12px 20px;
  font-size: 15px;
  outline: none;
  color: #333;
  background: transparent;
}

.banner-search-box button {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 0 25px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.banner-search-box button:hover {
  background: #000;
}

.popular-searches {
  margin-top: 15px;
  font-size: 13px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.popular-searches a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  padding: 5px 8px;
  transition: .3s;
}

.popular-searches a:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* --- 2. 公共标题 (Resources 专用) --- */
.public-title-two {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  border-left: 4px solid var(--primary);
  padding-left: 20px;
}

.public-title-two h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #111;
  text-transform: uppercase;
}

.public-title-two .btn-outline-none {
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --- 3. 5列与6列栅格锁定 (关键：仅在 Resources 容器下生效) --- */

/* Featured Resources 模块 5列排布 */
@media (min-width: 1200px) {
  .resources-featured .col-xxl-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Buying Guides / Technical Insights / Suppliers 模块 6列排布 */
@media (min-width: 1200px) {

  .resources-guides .col-xl-2,
  .resources-suppliers .col-xl-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}

/* --- 4. 资源卡片定制样式 --- */
.resources-featured .index-product-li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.resources-featured .index-product-li:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.resources-featured .index-product-img {
  height: 180px;
  background: #f9f9f9;
  border: none;
}

.resources-featured .index-product-card {
  padding: 20px 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.resources-featured h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #111;
  line-height: 1.4;
}

.resources-featured .index-product-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
  flex-grow: 1;
}

.resources-featured .index-product-num {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.resources-featured .btn-outline-green {
  width: 100%;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* --- 5. Catalog & Downloads (独占一行) --- */
.resources-catalog-box {
  display: flex;
  gap: 30px;
}

.resources-catalog-list {
  flex: 1;
  padding: 0;
  margin: 0;
}

.resources-catalog-list li {
  display: flex;
  align-items: center;
  padding: 0 25px;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.print-text p,
.resources-catalog-list .cat-info p {
  font-size: 14px;
  color: #666;
}

.print-text {
  margin-bottom: 15px;
}

.cat-icon {
  width: 48px;
  height: 48px;
  background: #f4faf6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: var(--primary);
  font-size: 24px;
}

.cat-icon img {
  width: 100%;
}

.cat-info h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cat-download-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fbfcfb;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: 0.3s;
  margin-left: auto;
}

.cat-download-btn:hover {
  background: var(--primary);
  color: #fff;
}

.resources-catalog-print-card {
  width: 500px;
  background: #f1f1f1;
  padding: 40px 30px;
  border-radius: 15px;
  text-align: center;
}

.resources-catalog-print-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* --- 6. FAQ & News --- */
.resources-faq-ul {
  padding: 0;
}

.resources-faq-ul li {
  border-bottom: 1px solid #eee;
}

.resources-faq-ul li .resources-faq-title.active span i:before {
  content: "\e660";
}

.resources-faq-title {
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: #333;
}

.resources-faq-text {
  font-size: 14px;
  color: #777;
  padding-bottom: 22px;
  display: none;
  line-height: 1.5;
  position: relative;
  top: -5px;
}

.resources-news-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.news-item {
  display: flex;
  gap: 20px;
  text-decoration: none;
  align-items: center;
  transition: 0.3s;
}

.news-item img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.news-item .news-info span {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
  display: block;
}

.news-item .news-info h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.5;
  margin: 0;
}

/* --- 7. 底部耳机图标 CTA Bar (还原截图) --- */
.resources-need-bar {
  background: #f8fbf9;
  border: 1px solid #eee;
  padding: 35px 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.need-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.need-icon-circle {
  width: 75px;
  height: 75px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.need-icon-circle img {
  width: 80%;
  height: a;
}

.need-icon-circle i {
  font-size: 36px;
}

.need-text h2 {
  font-size: 26px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
}

.need-btns {
  display: flex;
  gap: 15px;
}

/* --- 8. 响应式逻辑 (同样基于父元素锁定) --- */

@media (max-width: 1200px) {
  .resources-catalog-box {
    flex-direction: column;
  }

  .resources-catalog-print-card {
    width: 100%;
  }

  .resources-need-bar {
    flex-direction: column;
    text-align: center;
    gap: 35px;
    padding: 40px 25px;
  }

  .need-left {
    flex-direction: column;
    gap: 20px;
  }

  /* 1200px 以下 5列/6列 统一转为 3列 */
  .resources-featured .col-xxl-2-5,
  .resources-guides .col-xl-2,
  .resources-suppliers .col-xl-2 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 992px) {
  .resources-news-wrap {
    margin-top: 50px;
  }
}

@media (max-width: 768px) {
  .public-title-two {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .need-btns {
    flex-direction: column;
    width: 100%;
  }

  .need-btns .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* 768px 以下 统一转为 2列 */
  .resources-featured .col-xxl-2-5,
  .resources-guides .col-xl-2,
  .resources-suppliers .col-xl-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .need-text h2 {
    font-size: 22px;
  }

  .capabilities-years-li b {
    font-size: 20px;
  }
}

@media (max-width: 480px) {

  /* 480px 以下 统一转为 1列 */
  .resources-featured .col-xxl-2-5,
  .resources-guides .col-xl-2,
  .resources-suppliers .col-xl-2 {
    flex: 0 0 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
}


/* ==========================================================================
   Article List Page (资源列表页) 专项样式
   ========================================================================== */

/* --- 1. 三栏布局容器 --- */
.resources-flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}

.resources-left {
  flex: 0 0 260px;
  position: sticky;
  top: 110px;
}

.resources-center {
  flex: 1;
  min-width: 0;
}

.resources-right {
  flex: 0 0 300px;
  position: sticky;
  top: 110px;
}

/* --- 2. 左侧菜单 (resources-left) --- */
.resources-left-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
}

.resources-left-title {
  background: #fbfcfb;
  padding: 15px 20px;
  font-weight: 800;
  border-bottom: 1px solid #eee;
}

.resources-left-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #f9f9f9;
  transition: 0.3s;
  position: relative;
}

.resources-left-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--primary);
  opacity: 0;
  transition: .3s;
}

.resources-left-list a img {
  width: 30px;
  height: auto;
}

.resources-left-list a:hover,
.resources-left-list a.active {
  background: #f0f7f2;
  color: var(--primary);
}

.resources-left-list a:hover::before,
.resources-left-list a.active::before {
  opacity: 1;
}

.resources-left-btn {
  background: #f8fbf9;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e1eee5;
}

.resources-left-btn div {
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.resources-left-btn p {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.4;
}

.resources-left-btn .btn-outline-green {
  width: 100%;
  justify-content: center;
  font-size: 13px;
  background: #fff;
  padding-left: 5px;
  padding-right: 5px;
}

/* --- 3. 中间列表 (resources-center) --- */
.resources-center-top {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #eee;
}

.resources-center-search {
  flex: 1.5;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 15px 0 7px;
  transition: .3s;
}

.resources-center-search:focus-within {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

.resources-center-search button {
  background: none;
  border: none;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
  color: var(--primary);
}

.resources-center-search button i {
  transition: .3s;
}

.resources-center-search button:hover i {
  color: var(--black);
}

.resources-center-search input {
  border: none;
  flex: 1;
  height: 40px;
  outline: none;
  font-size: 14px;
}

.dropdown-style {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
  height: 42px;
  display: flex;
  align-items: center;
  min-width: 160px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.dropdown-style div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

/* 文章横向卡片 */
.resources-center-link {
  display: flex;
  gap: 25px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  transition: 0.3s;
  text-decoration: none;
}

.resources-center-link:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.resources-center-img {
  flex: 0 0 240px;
  height: 180px;
  overflow: hidden;
}

.resources-center-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resources-center-card {
  padding: 20px 25px 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resources-center-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
  line-height: 1.4;
}

.resources-center-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 15px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.post-meta span {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
}

.read-more-link {
  margin-left: auto;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;

  border: 1px solid var(--primary);
  padding: 8px 12px;
  border-radius: 5px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.pagination a {
  width: 36px;
  height: 36px;
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: 0.3s;
}

.pagination a.active,
.pagination a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- 4. 右侧侧边栏 (resources-right) --- */
.resources-right-card {
  background: #fbfcfb;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.right-top-icon {
  width: 40px;
  margin-bottom: 20px;
}

.resources-right-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.3;
}

.resources-right-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 25px;
}

.resources-right-ul {
  padding-top: 25px;
  border-top: 1px solid #eee;
  margin-top: 25px;
}

.resources-right-ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #444;
  font-weight: 600;
  margin-bottom: 12px;
}

.resources-right-ul img {
  width: 30px;
}

/* 热门话题标签云 */
.resources-right-popular {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 25px;
}

.side-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
  border-left: 3px solid var(--primary);
  padding-left: 10px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud a {
  border: 1px solid #e3dfdf;

  padding: 6px 12px;
  border-radius: 30px;
  font-size: 12px;
  color: #666;
  transition: 0.3s;
}

.tag-cloud a:hover {
  background: var(--primary);
  color: #fff;
}


/* ==========================================================================
   Responsive (响应式适配)
   ========================================================================== */
@media (max-width: 1366px) {
  .resources-right {
    width: 100%;
    flex: auto;
  }

  .resources-left {
    position: relative;
    top: 0;
  }
}

@media (max-width: 1024px) {
  .resources-flex-layout {
    flex-direction: column;
  }

  .resources-left,
  .resources-center,
  .resources-right {
    flex: 0 0 100%;
    width: 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .resources-center-top {
    flex-direction: column;
  }

  .resources-center-link {
    flex-direction: column;
    row-gap: 0;
  }

  .resources-center-img {
    flex: 0 0 200px;
    width: 100%;
  }

  .resources-center-card {
    padding: 20px;
  }

  .resources-center-cate div {
    height: 40px;
  }

  .resources-right {
    margin-top: 20px;
  }

  .post-meta {
    gap: 12px;
  }

}

/* --- 顶部筛选下拉框容器 --- */
.resources-center-cate {
  flex: 1;
  position: relative;
  /* 关键：让ul相对于此定位 */
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 0 15px;
  height: 42px;
  display: flex;
  align-items: center;
  min-width: 180px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: all 0.3s;
  user-select: none;
}

.resources-center-cate:hover {
  border-color: var(--primary);
}

.resources-center-cate div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.resources-center-cate div i {
  font-size: 10px;
  color: #999;
  transition: transform 0.3s;
}

/* --- 下拉菜单列表 (绝对定位) --- */
.resources-center-cate ul {
  display: none;
  /* 默认隐藏 */
  position: absolute;
  top: calc(100% + 5px);
  /* 在框下方 5px */
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 8px 0;
  margin: 0;
  list-style: none;
}

.resources-center-cate ul li {
  padding: 0;
}

.resources-center-cate ul a {
  display: block;
  padding: 10px 20px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s;
}

.resources-center-cate ul a:hover {
  background: #f0f7f2;
  color: var(--primary);
}

/* 激活状态：旋转箭头并显示列表 */
.resources-center-cate.active {
  border-color: var(--primary);
}

.resources-center-cate.active div i {
  transform: rotate(180deg);
}

.resources-center-cate.active ul {
  display: block;
  /* 显示列表 */
}


/* ==========================================================================
   7-3 Catalog Download Page (目录下载页) 完整整合版
   ========================================================================== */

/* --- 1. Banner & 顶部特征条 --- */
.download-banner {
  height: 420px;
}

/* 复用 resources-icon-bar 样式逻辑 */
.resources-icon-bar {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 40px 0;
}

/* --- 2. Download Tabs (横向切页导航) --- */
.download-tab {
  margin-top: 60px;
}

.download-tab-card {
  display: flex;
  justify-content: center;
  gap: 1px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  border: 1px solid #eee;
}

.download-tab-card a {
  flex: 1;
  text-align: center;
  padding: 16px 10px;
  background: #f8fbf9;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  transition: 0.3s;
  text-decoration: none;
  position: relative;
}

.download-tab-card a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70%;
  height: 3px;
  background: var(--primary);
  transform: translateX(-50%);
  opacity: 0;
  transition: .3s;
}

.download-tab-card a:hover,
.download-tab-card a.active {
  color: var(--primary);
}

.download-tab-card a:hover::after,
.download-tab-card a.active::after {
  opacity: 1;
}


/* --- 3. Main Catalog List (核心：左图右文布局) --- */
.download-title h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 30px;
  border-left: 4px solid var(--primary);
  padding-left: 15px;
}

.download-cata-ul {
  row-gap: 20px;
}

.download-cata {
  margin-top: 60px;
}

.download-cata-li {
  display: flex;
  /* 关键：开启水平排版 */
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 25px;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 25px;
  /* 图片与文字的间距 */
}

.download-cata-li:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* 左侧图片封面区域 */
.cata-img-wrap {
  flex: 0 0 140px;
  /* 固定封面宽度 */
  height: 190px;
  background: #f9f9f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
  /* 模拟书籍厚度感 */
}

.cata-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 右侧文字内容区域 */
.download-cata-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.download-cata-text h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.3;
}

.download-cata-text p {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
  /* 撑开中间，让按钮对齐底部 */
}

/* 文件规格信息 */
.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
  font-size: 13px;
  color: #999;
}

.file-info i {
  color: var(--primary);
  font-size: 18px;
}

/* 下载按钮：靠左对齐 */
.download-cata-text .btn-primary {
  align-self: flex-start;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 700;
}

/* --- 4. Right Sidebar Card (询盘引导卡片) --- */
.download-cata-right {
  background: #f8fbf9;
  border: 1px solid #eee;
  padding: 40px 25px;
  border-radius: 15px;
  text-align: center;
}

.download-cata-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #ded9d9;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.download-cata-icon img {
  width: 80%;
  height: auto;
}

.right-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 15px;
}

.download-cata-right p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.download-cata-right ul {
  text-align: left;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}

.download-cata-right li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #444;
  font-weight: 600;
}

.download-cata-right li i {
  color: var(--primary);
  font-size: 16px;
  margin-top: 2px;
}

.download-cata-right .btn-primary {
  width: 100%;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 14px;
}

/* --- 5. Most Downloaded Section (横向排行条) --- */
.download-title.flex-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-title .btn-outline-none {
  border: none;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
}



.download-resources-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 30px;
}

.download-resources-li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: 0.3s;
}

.download-resources-li:hover {
  border-color: var(--primary);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.download-resources-img {
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

.download-resources-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-resources-center {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rank-num {
  font-size: 11px;
  background: var(--primary);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  font-weight: 800;
}

.download-resources-center h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111;
}

.download-resources-center p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.download-resources-btn {
  color: #222;
  transition: 0.3s;
  font-size: 18px;
  border: 1px solid #eee;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-resources-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.download-resources-row {
  row-gap: 20px;
  --gutter-x: 20px;
}

/* --- 6. 响应式适配 --- */
@media (max-width: 1200px) {
  .download-cata-right {
    margin-top: 40px;
  }
}

@media (max-width: 991px) {
  .download-cata-li {
    flex-direction: column;
    /* 窄屏改回上下排列 */
    text-align: center;
    gap: 20px;
  }

  .cata-img-wrap {
    margin: 0 auto;
    flex: none;
    width: 160px;
  }

  .download-cata-text .btn-primary {
    align-self: center;
    justify-content: center;
    width: 100%;
  }

  .file-info {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .download-tab-card {
    overflow-x: auto;
    white-space: nowrap;
    display: block;
  }

  .download-tab-card a {
    display: inline-block;
    padding: 15px 30px;
    min-width: 150px;
  }

  .download-resources-li {
    padding: 15px;
  }
}


/* ==========================================================================
   7-4 FAQ Page (常见问题) 完整专项整合版
   ========================================================================== */

/* --- 1. 基础布局适配 --- */

.faq-count {
  margin-left: auto;
  font-size: 11px;
  color: #666;
  border: 1px solid #e3e1e1;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* 左侧按钮模块 (图标标题并排版) */
.help-header-flex {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.help-header-flex span {
  width: 40px;
  height: 40px;
  background: #e1eee5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-header-flex span img {
  width: 22px;
}

.help-header-flex div {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: 0;
}

/* --- 3. 中间 FAQ 问答列表 --- */
.faq-ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: 0.3s;
  padding: 25px 0;
}

.faq-li.active {
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.faq-title {
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.faq-title img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.faq-q-text {
  flex: 1;
  font-weight: 800;
  color: #111;
  font-size: 17px;
}

.faq-title span i {
  font-size: 12px;
  color: #999;
  transition: 0.3s;
}

.faq-li.active .faq-title span i {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-text {
  padding: 8px 30px 0 88px;
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  display: none;
}

/* 问答列表底部卡片 (Still have questions?) */
.faq-li-card {
  margin-top: 10px;
  border: 1px solid #eee;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 25px;
  border-radius: 12px;
}

.faq-icon-bottom {
  width: 50px;
  height: 50px;
  background: #e1eee5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 24px;
  flex-shrink: 0;
}

.faq-icon-bottom img {
  width: 80%;
  height: auto;
}

.faq-center {
  flex: 1;
}

.faq-center div {
  font-weight: 800;
  font-size: 18px;
  color: #111;
  margin-bottom: 5px;
}

.faq-center p {
  font-size: 14px;
  color: #777;
  margin: 0;
}

.faq-li-card .btn-outline-green {
  padding: 10px 25px;
  font-size: 14px;
  white-space: nowrap;
}

/* --- 4. 右侧专家卡片 --- */
.faq-expert-card {
  background: #f8fbf9;
  padding: 40px 30px;
  border: 1px solid #eee;
  border-radius: 15px;
  text-align: center;
}

.faq-expert-card .download-cata-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.faq-expert-card ul {
  text-align: left;
  padding: 25px 0;
  border-top: 1px solid #e1eee5;
  margin-top: 25px;
  list-style: none;
}

.faq-expert-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #444;
  margin-bottom: 12px;
  font-weight: 600;
}

.faq-expert-card li i {
  color: var(--primary);
  font-size: 15px;
}

/* 底部联系位 (Or email us) */
.faq-hours {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #999;
  line-height: 1.6;
}

.faq-hours a {
  display: block;
  color: var(--primary);
  font-weight: 800;
  font-size: 16px;
  margin: 2px 0;
  text-decoration: none;
}

.faq-hours span {
  font-size: 12px;
}

/* --- 5. 底部相关资源 (左图右文布局) --- */
.faq-related-li {
  display: flex;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: 0.3s;
  text-decoration: none;
}

.faq-related-li:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.faq-related-img {
  flex: 0 0 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.faq-related-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.faq-related-text {
  flex: 1;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.faq-related-text h3 {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
}

.faq-related-text p {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
}

.view-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-row .resources-center-search input {
  height: 30px;
}

.faq-row .resources-center-search {
  border: none;
}

.faq-related-row {
  row-gap: 30px;
}


@media (max-width: 768px) {
  .faq-li {
    padding: 20px 0;
  }

  .faq-title {
    padding: 0 20px;
  }

  .faq-text {
    padding: 10px 20px 0 73px;
  }

  .faq-li-card {
    flex-direction: column;
    text-align: center;
  }

  .faq-related-li {
    flex-direction: column;
  }

  .faq-related-img {
    flex: none;
  }

  .faq-row .resources-center-top {
    padding-top: 5px;
    padding-bottom: 5px;
  }

}



/* ==========================================================================
   Blog Landing Page (文章落地页) 专项样式
   ========================================================================== */

/* --- 1. 基础布局适配 --- */
.blog-flex-layout {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.blog-left {
  flex: 1;
  min-width: 0;
}

.blog-right {
  flex: 0 0 320px;
  position: sticky;
  top: 110px;
}

/* Banner 时间/分类 */
.blog-time {
  margin-top: 20px;
  display: flex;
  gap: 25px;
  opacity: 0.85;
  font-size: 14px;
}

.blog-time span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- 2. 文章主体模块 --- */
.blog-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 50px;
}

/* 定义列表 (1. Define Requirements) */

.blog-define-row {
  row-gap: 30px;
  margin-bottom: 60px;
}

.blog-define-li {
  background: #fff;
  border: 1px solid #eee;
  padding: 30px;
  border-radius: 12px;
  height: 100%;
  text-align: center;
}

.blog-define-li img {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  object-fit: contain;
  object-position: center;
}

.blog-define-li h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #111;
}

.blog-define-li p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}



.blog-define-line .blog-define-li {
  padding: 0;
  text-align: left;
  border: none;
}


.blog-define-line .col-12 {
  position: relative;
}

.blog-define-line .blog-define-li {
  padding: 0 12px;
}

.blog-define-line .blog-define-li img {
  margin-left: 0;
}

.blog-define-line .col-12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80px;
  background: #dddddd;
}

.blog-define-line .col-12:last-child:after {
  display: none;
}


/* 表格样式 (Evaluate Capabilities) */
.blog-evaluate-table {
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eee;
}

.blog-evaluate-table table {
  width: 100%;
  border-collapse: collapse;
}

.blog-evaluate-table th {
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  color: #fff;
  background-color: #363c37;
}

.blog-evaluate-table td {
  padding: 15px 20px;
  border-right: 1px solid #eee;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #555;
}

.blog-evaluate-table td:last-child {
  border-right: none;
}

/* 表格下方的提示卡片 */
.blog-evaluate-card {
  background: #fbfcfb;
  padding: 35px;
  border-radius: 12px;
  border: 1px solid #eee;
}

.blog-evaluate-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 25px;
}

.blog-evaluate-ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.blog-evaluate-li {
  width: calc(50% - 15px);
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #444;
}

.blog-evaluate-li i {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
  top: 2px;
}

/* 检查清单 (Buyer Checklist) */

.blog-buyer-row {
  padding: 35px 10px;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-left: 0;
  margin-right: 0;
  row-gap: 20px;
}

.blog-buyer-li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

.blog-buyer-li img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  object-position: center;
}

/* 优势模块 (Why AUTOWIN) */

.blog-global-row {
  padding: 35px 0;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 30px;
  row-gap: 30px;
}

.blog-global-li {
  display: flex;
  align-items: start;
}

.blog-global-li span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  transition: .3s;
}

.blog-global-li img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  object-position: center;
  margin-right: 10px;
}

.blog-global-li h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.blog-global-li p {
  font-size: 12px;
  color: #666;
}

.blog-global-li:hover span {
  color: var(--primary);
  border-color: var(--primary);
}

.blog-global-imgs {
  row-gap: 30px;
}

.blog-global-imgs img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* --- 3. 侧边栏样式 --- */
/* 目录导航 */
.blog-contents {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.blog-contents-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.blog-contents-ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-contents-li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: 0.3s;
  padding: 5px 0;
}

.blog-contents-li span {
  font-weight: 800;
  color: var(--primary);
}

.blog-contents-li:hover {
  color: var(--primary);
  padding-left: 5px;
}

/* 侧边 CTA */
.blog-need {
  background: var(--primary);
  padding: 40px 30px;
  border-radius: 15px;
  color: #fff;
  margin-bottom: 30px;
}

.blog-need-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.3;
}

.blog-need-text {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 30px;
  line-height: 1.5;
}

.blog-need .btn-white {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}

.blog-need .btn-white:last-child {
  margin-bottom: 0;
}

/* 信任背书列表 */

.blog-trusted {
  background: #f9f3f3;
  padding: 40px 30px;
  border-radius: 15px;
}


.blog-trusted-title {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 25px;
}

.blog-trusted-ul {
  padding: 0;
  list-style: none;
}

.blog-trusted-ul li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.blog-trusted-ul li:last-child {
  margin-bottom: 0;
}

.blog-trusted-ul li img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.blog-trusted-ul b {
  font-size: 14px;
  display: block;
  color: #111;
}

.blog-trusted-ul p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.blog-tag {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 700;
  color: var(--primary);
}

.blog-have {
  background-size: cover;
  background-position: center;
  border-radius: 15px 15px 0 0;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.blog-have-ul {
  display: flex;
  gap: 40px;
}

.blog-have-li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-have-li img {
  width: 50px;
}

.blog-have-li p {
  margin: 0;
  opacity: 0.8;
  font-size: 13px;
}

.blog-have-text p {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;

}

.blog-have-text {
  flex: 1;
  overflow: hidden;
}

.blog-have-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: #fff;
}

.blog-have-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-have-img img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  object-position: center;
}

.blog-evaluate {
  overflow-x: hidden;
}

/* --- 响应式处理 --- */
@media (max-width: 1440px) {
  .blog-have-row {
    flex-wrap: wrap;
  }

  .blog-have-text {
    min-width: 400px;
  }
}

@media (max-width: 1200px) {
  .blog-flex-layout {
    flex-direction: column;
  }

  .blog-right {
    flex: 0 0 100%;
    width: 100%;
    position: static;
  }
}

@media (max-width: 991px) {
  .blog-evaluate .blog-evaluate-table {
    overflow-x: auto;
  }

  .blog-left {
    width: 100%;
  }

  .blog-have {
    padding: 40px;
  }

}

@media (max-width: 768px) {
  .blog-evaluate-table {
    overflow-x: auto;
  }

  .blog-evaluate-table table {
    min-width: 600px;
  }

  .blog-have-text {
    min-width: auto;
  }

  .blog-evaluate-card {
    padding: 25px;
  }

  .blog-evaluate-li {
    width: 100%;
  }

  .blog-have {
    padding: 30px 20px;
  }

  .blog-have-ul {
    flex-wrap: wrap;
    gap: 20px;
  }

  .blog-have-row {
    gap: 20px;
  }

  .blog-have-li {
    width: 100%;
  }
}


/* ==========================================================================
   About Us Page - Final Master Styles
   ========================================================================== */

/* --- 1. Banner & Sub-Tags --- */
.about-banner h1 span {
  color: var(--primary);
}

.banner-sub-tag {
  color: var(--primary);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* --- 2. Nav Highlights (Floating Bar) --- */
.about-company .blog-global-row {
  position: relative;
  z-index: 10;
  margin-bottom: 0;
  margin-top: 60px;
}

.about-nums {
  padding: 60px 0;
}

/* --- 3. Stats Bar (带分割线逻辑) --- */
.about-nums-bar {
  background: #f8fbf9;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px 10px;
}

.about-nums-li {
  text-align: center;
  border-right: 1px solid #e0e0e0;
}

.about-nums-row>div:last-child .about-nums-li {
  border-right: none;
}

.about-nums-li div {
  font-size: 32px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 5px;
  line-height: 1;
}

.about-nums-li p {
  font-size: 13px;
  color: #666;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

/* --- 4. Who We Are (三图等宽并排) --- */
.about-who-imgs {
  display: flex;
  gap: 15px;
}

.about-who-imgs>div {
  flex: 1;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
}

.about-who-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.about-who-imgs div:hover img {
  transform: scale(1.08);
}

.about-title span {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
  color: var(--primary);
}

.about-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 25px;
  margin-top: 5px;
}

/* --- 5. Integrated Manufacturing (工厂标签) --- */

.about-integrated-imgs {
  --gutter-x: 20px;
  row-gap: 20px;
}

.about-integrated-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.about-integrated-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.about-integrated-img div {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  padding: 10px 5px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.about-integrated-li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 14px;
}

.about-integrated-li i {
  color: var(--primary);
  font-size: 18px;
  position: relative;
  top: 1px;
}

.about-integrated-ul {
  padding-bottom: 15px;
}

/* --- 6. Global Reach Card --- */
.about-global-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);

  background-size: cover;
  background-position: left center;
}

.about-global-ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 25px;
}

.about-global-ul div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.about-global-ul img {
  width: 22px;
}

.about-global-right img {
  width: 100%;
  opacity: 0.9;
}

/* --- 7. Sustainability (左文右图卡片) --- */
.about-building-row {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  height: 100%;
}

/* .about-building-content {
  flex: 0 0 550px;
} */

.about-building-ul {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.about-building-ul div {
  text-align: center;
}

.about-building-ul img {
  width: 42px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

.about-building-ul p {
  font-size: 15px;
  font-weight: 800;
  color: #333;
  margin: 0;
}

/* --- 8. Final Project CTA Bar (浅灰长条) --- */
.about-project-card {
  background: #f8fbf9;
  padding: 35px 50px;
  border-radius: 15px;
  border: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-card-left h2 {
  font-size: 26px;
  font-weight: 800;
  color: #111;
  margin-bottom: 5px;
}

.project-card-right {
  display: flex;
  gap: 15px;
}

.btn-outline-white-gray {
  background: #fff !important;
  border: 1px solid #eee !important;
  color: #333 !important;
}

.about-nums-row {
  row-gap: 20px;
}

/* --- 响应式 --- */
@media (max-width: 991px) {
  .about-nums-li {
    border-right: none;
    margin-bottom: 20px;
  }

  .about-who-imgs {
    margin-top: 35px;
  }

  .about-who-imgs>div {
    height: 240px;
  }

  .about-building-row {
    /* padding: 40px; */
    background-image: none;
  }

  .about-building-content {
    flex: 0 0 100%;
  }

  .about-project-card {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 40px 20px;
  }

  .project-card-right {
    flex-direction: column;
    width: 100%;
  }

  .project-card-right .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .about-global-right,
  .about-integrated-right {
    margin-top: 40px;
  }

}

@media (max-width: 768px) {

  .about-global-card {
    padding: 25px;
  }

  .about-building-row {
    padding: 25px;
  }

  .about-who-imgs>div {
    height: auto;
  }

}


/* ==========================================================================
   Contact Page (联系与询盘) 专项样式整合
   ========================================================================== */

.contact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
}

.contact-title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin-bottom: 30px;
  position: relative;
}

/* 1. 快捷特征条 */
.contact-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.quick-li {
  text-align: center;
  background: #fbfcfb;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}

.quick-li i {
  font-size: 28px;
  color: var(--primary);
  display: block;
  margin-bottom: 10px;
}

.quick-li img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 6px;
  margin-left: auto;
  margin-right: auto;
}

.quick-li b {
  font-size: 14px;
  line-height: 1.4;
  display: block;
  color: #111;
  margin-bottom: 2px;
}

.quick-li p {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* 2. 联系详情卡片 (内部分左右) */
.contact-info {
  display: flex;
  gap: 40px;
}

.contact-info-left {
  flex: 1.2;
}

.contact-info-left ul {
  padding: 0;
  list-style: none;
}

.contact-info-left li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}

.contact-info-left span {
  width: 36px;
  height: 36px;
  background: #f0f7f2;
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-left b {
  font-size: 14px;
  color: #111;
  display: block;
  margin-bottom: 4px;
}

.contact-info-left p,
.contact-info-left a {
  font-size: 13px;
  color: #666;
  margin: 0;
  text-decoration: none;
}

.contact-info-right {
  flex: 0.8;
  background: #f8fbf9;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e1eee5;
}

.contact-info-right img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.contact-info-t1 {
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 15px;
}

.contact-info-t2 {
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
}

.contact-info-t3 {
  font-size: 11px;
  color: #999;
  margin-top: 12px;
}

/* 3. 统计/优势小模块 */
.contact-work-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.contact-work-li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-work-li i {
  font-size: 26px;
  color: var(--primary);
}

.contact-work-li img {
  width: 60px;
  height: auto;
}

.contact-work-li b {
  font-size: 18px;
  color: #111;
  line-height: 1;
}

.contact-work-li p {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* 4. 表单核心样式 */
.contact-form label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.contact-form-line {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.contact-form-line i {
  position: absolute;
  left: 15px;
  color: #aaa;
  font-size: 18px;
}

.contact-form-line input,
.contact-form-line select,
.contact-form-line textarea {
  width: 100%;
  border: none;
  padding: 12px 15px 12px 45px;
  font-size: 14px;
  outline: none;
  background: transparent;
}

.contact-form-line select {
  padding-left: 15px;
  height: 45px;
}

.contact-form-li {
  margin-bottom: 18px;
}

.contact-form-line textarea {
  height: 110px;
  padding: 12px 15px;
  resize: none;
  font-family: var(--font-body);
}

/* 按钮式复选框 */
.check-box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0;
}

.check-box-list li {
  list-style: none;
}

.check-box-list input {
  display: none;
}

.check-box-list label {
  display: block;
  border: 1px solid #eee;
  background: #fbfcfb;
  padding: 12px 6px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
  margin: 0;
  font-size: 13px;
}

.check-box-list label i {
  font-size: 20px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.check-box-list input:checked+label {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 文件上传 */
.contact .file-upload {
  border: 2px dashed #eee;
  padding: 30px;
  background: #fbfcfb;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.contact .file-upload i {
  font-size: 32px;
  color: #ccc;
  margin-bottom: 0;
  margin-right: 15px;
  display: block;
}

.contact .file-upload p {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.contact .file-upload p span {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.contact .file-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* 协议部分 */
.contact-form-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #666;
  margin-top: 10px;
  cursor: pointer;
}

.contact-form-radio label {
  margin-bottom: 0;
  cursor: pointer;
}

.contact-form-radio a {
  color: var(--primary);
  font-weight: 700;
}

/* 5. 后续流程 (Happens Next) */
.contact-happens-row {

  flex: 1;
}

.contact-happens-ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
}

.contact-happens-li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

.contact-happens-li::after {
  font-family: 'icomoon' !important;
  content: "\e624";
  position: absolute;
  top: 0;
  right: -40px;
  font-size: 22px;
  color: var(--primary);
}

.contact-happens-li:last-child:after {
  display: none;
}

.step-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  background: #d5f1dd;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-happens-li b {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}

.contact-happens-li p {
  font-size: 13px;
  color: #777;
  line-height: 1.4;
  margin: 0;
}

.contact-happens-card {
  flex: 0 0 400px;
  background: #e5f4e9;
  padding: 20px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
}

.contact-happens-card img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.contact-happens-card p {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.contact-happens-card b {
  color: var(--primary);
}

.contact-happens-card a {
  margin-top: 10px;
}

.contact-happens-bg {
  background: #f8fbf9;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid #e1eee5;

  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}

.contact-happens .contact-title {
  margin-bottom: 40px;
}

.thanks-line .blog-global-row .col-12 {
  position: relative;
}

.thanks-line .blog-global-row .col-12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #e1e1e1;
}

.thanks-line .blog-global-row .col-12:last-child:after {
  display: none;
}

/* 响应式适配 */
@media (max-width: 1400px) {

  .contact-happens-ul {

    grid-template-columns: repeat(2, 1fr);

  }

  .contact-happens-li:nth-child(2n+2):after {
    display: none;
  }

  .contact-happens-card {
    padding: 40px 30px;
  }

  .contact-happens-bg {
    align-items: center;
  }

}

@media (max-width: 1200px) {

  .thanks-line .blog-global-row .col-12:nth-child(3n+3)::after {
    display: none;
  }

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

  .contact-happens-row {
    flex-direction: column;
  }

  .contact-happens-card {
    width: 100%;
    flex: auto;
  }

  .check-box-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-info {
    display: block;
  }



}

@media (max-width: 768px) {
  .thanks-line .blog-global-row .col-12:nth-child(3n+3)::after {
    display: block;
  }

  .thanks-line .blog-global-row .col-12:nth-child(2n+2)::after {
    display: none;
  }

  .contact-happens .contact-title {
    margin-bottom: 30px;
  }

  .contact-happens-li:after {
    display: none;
  }

  .contact-happens-card {
    padding: 30px 30px;
  }

  .contact-happens-ul {
    gap: 20px;
  }

  .contact-info {
    flex-direction: column;
  }

  .contact-happens-ul {
    grid-template-columns: 1fr;
  }

  .check-box-list {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 25px;
  }

  .contact-happens-bg {
    padding: 25px;
  }

  .contact-work-li b {
    font-size: 16px;
  }

  .contact-work-li img {
    width: 50px;
    height: 50px;
  }

}

@media (max-width: 576px) {
  .thanks-line .blog-global-row .col-12::after {
    display: none !important;
  }
}

/* ==========================================================================
   404 Error Page 专项样式
   ========================================================================== */

/* --- 1. 主视觉区 --- */

.not-t1 {
  font-size: 50px;
  font-weight: 800;
  color: #111;
  margin-bottom: 20px;
}

.not-t3 {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f8fbf9;
  border: 1px solid #eee;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.not-t3 i {
  color: var(--primary);
  font-size: 20px;
}

.not-t3 div {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.not-t4 {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.not-t5 {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  font-size: 15px;
  display: inline-block;
  transition: 0.3s;
}

.not-t5:hover {
  color: var(--primary-black);
}

/* --- 2. 您可能在找 (404-look) --- */
.not-look .error-nav-card {
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid #eee;
}

.not-look .error-nav-card:hover {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.not-look .oem-work-li div {
  position: relative;
  width: 100%;
}

.not-look .oem-work-li i {
  margin-left: auto;
  color: #333;
  font-size: 16px;
  transition: 0.3s;
  text-align: right;
  display: block;
  margin-top: 10px;
}

.not-look .error-nav-card:hover i {
  color: var(--primary);
  transform: translateX(5px);
}

/* --- 3. 底部统计条适配 (404-bottom) --- */
.not-bottom.quality-years {
  background: #fff;
  /* border-top: 1px solid #eee; */
}

.not-bottom.quality-years b {
  color: #333;
  font-size: 20px;
}


.index-product-transparent .index-product-li {
  background: none;
  border: none;
  border-radius: 0;
}

.index-product-transparent .index-product-li .index-product-img {
  border-radius: 12px;
}

.index-product-transparent .index-product-li:hover {
  box-shadow: none;
}

.index-product-transparent .index-product-card {
  padding-bottom: 0;
}

.capabilities-quality-left {
  background-color: #fbfcfb;
  border-radius: 12px;
  border: 1px solid #eee;
  padding: 30px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.capabilities-quality-right {
  background-color: #fbfcfb;
  border-radius: 12px;
  border: 1px solid #eee;
  padding: 30px;
}

@media (min-width: 1200px) {
  .not-bottom .col-xl-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}

/* ==========================================================================
   Responsive (响应式)
   ========================================================================== */
@media (max-width: 991px) {
  .not-row {
    text-align: center;
  }

  .not-t4 {
    justify-content: center;
  }

  .not-t3 {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .not-t1 {
    font-size: 28px !important;
  }

  .not-t4 {
    flex-direction: column;
  }

  .not-t4 .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .not-bottom .col-xl-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .not-img {
    margin-bottom: 25px;
  }

}


/* ==========================================================================
   Thanks Page (感谢页面) 专项样式整合
   ========================================================================== */

/* --- 1. 感谢 Banner 增强 --- */
.thanks-banner-main .not-img {
  position: relative;
  padding: 20px;
}

/* 模拟设计稿中的绿色勾选大圆圈效果 */
/* .thanks-banner-main .not-img::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border: 2px solid #e1eee5;
  border-radius: 50%;
  z-index: -1;
} */

.thanks-info-box {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f8fbf9;
  border: 1px solid #eee;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 35px;
  font-size: 14px;
  font-weight: 600;
}

/* --- 2. 步骤逻辑 (What Happens Next) --- */
.thanks-happens {
  background: none;
}

.thanks-happens .index-manufact-row .col-12::after {
  display: none;
}


.thanks-happens .index-manufact-li {
  position: relative;
  padding: 45px 20px 25px 20px;
  border: 1px solid #e1dede;
  /* 为顶部数字留位置 */
}

.thanks-happens .step-num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- 3. 即时协助卡片 (thanks-need) --- */
.thanks-need-card {
  background: #fbfcfb;
  border: 1px solid #eee;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
}

.thanks-need-left {
  flex: 1;
  padding: 60px;
}

.thanks-need-center {
  display: flex;
  gap: 50px;
  margin-top: 20px;
}

.contact-item-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-item-row i {
  color: var(--primary);
  font-size: 20px;
}

.contact-item-row p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.contact-item-row p span {
  display: block;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}

.contact-item-row a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

.contact-item-row a:hover {
  color: var(--primary);
}

.thanks-check-list {
  padding: 0;
  list-style: none;
}

.thanks-check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}

.thanks-check-list i {
  color: var(--primary);
  font-size: 16px;
}

.thanks-need-right {
  flex: 1;
  position: relative;
  min-height: 400px;
}

.thanks-need-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-index-manufact {
  background: none;
  margin-bottom: 100px;
}

.product-explore-row,
.product-how-row {
  row-gap: 30px;
}

.product-popular-row,
.product-buyers-row {
  --gutter-x: 20px;
}

.product-buyers-row,
.product-popular-row,
.product-list {
  row-gap: 20px;
}

.product-send-t1 {
  font-size: 16px;
  color: var(--primary);
  font-weight: 600;
}

.index-manufact-line {
  padding: 25px;
  border: 1px solid #e9e6e6;
  border-radius: 6px;
  margin-left: 0;
  margin-right: 0;
}



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

.industries-wde-color {
  background: #fff;

}

.industries-wde-color .industries-wde-li div {
  color: #333;
}

.industries-wde-color .industries-wde-li p {
  color: #666;
  font-size: 13px;
  margin-top: 10px;
}

.industries-wde-color .col-12 {
  border-right: 1px solid #f0f0f0;
}

.industries-wde-color .col-12:last-child {
  border-right: none;
}

.product-popular-line {
  background: #fff;
  border-radius: 12px;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.product-popular-line .product-popular-li {
  background: none;
  border: none;
  box-shadow: none;
}

.product-popular-line .col-12 {
  position: relative;
}

.product-popular-line .col-12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70px;
  background: rgba(0, 0, 0, 0.1);
}

.product-popular-line .product-popular-li:hover {
  border: none;
  transform: translateY(-0);
  box-shadow: none;
}

.product-popular-line {
  row-gap: 0;
}

.product-popular-li {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.oem-trusted-right {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #eee;
  height: 100%;
}




.page-icons {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 25px;
}

.page-icons-margin {
  margin-top: 40px;
}

.page-icons-color {
  grid-template-columns: repeat(3, 1fr);
}

.page-icons-color b {
  color: var(--primary);
}

/* .page-icons-color .page-icons-li {
  border-right: 1px solid #d2d2d2;
} */

.page-icons-color .page-icons-li:last-child {
  border: none;
}


.page-icons-li {
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 12px;
}

.page-icons-li img {
  width: 50px;
  height: auto;
}

.page-icons-li p {
  font-size: 14px;
  margin-top: 2px;
}

.capabilities-years-row {
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.capabilities-years-row .col-12 {
  position: relative;
}

.capabilities-years-row .col-12::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50px;
  background: #e5e3e3;
}

.capabilities-years-row .col-12:last-child:after {
  display: none;
}

.capabilities-years .capabilities-years-bg {
  margin-left: calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);
  border: none;
  box-shadow: none;
}

.capabilities-years-bg .col-12::after {
  display: none;
}

.capabilities-years-bg .capabilities-years-li {
  background: #f8fbf9;
  border: 1px solid #eee;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);

  border-radius: 10px;
  padding: 22px 12px;
  border-radius: 10px;
  height: 100%;
}

.capabilities-years .capabilities-years-bg {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.capabilities-years-bg .capabilities-years-li b {
  font-size: 20px;
}

.resources-center-bg {
  padding: 0;
  border: none;
}

.blog-faq .resources-faq-ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 15px;
}

.blog-faq .resources-faq-ul li {
  width: calc(50% - 10px);
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 0 20px;
}

.blog-faq .resources-faq-text {
  padding-bottom: 12px;
}

.about-custom .index-manufact-li {
  text-align: left;
  padding: 0 20px;
}

.about-custom .index-manufact-li img {
  margin-left: 0;
}

.resources-catalog-bg {
  border: 1px solid #eee;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.resources-news-wrap-bg,
.resources-faq-wrap-bg {
  border: 1px solid #eee;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
  height: 100%;
}

.resources-faq-wrap-bg .resources-faq-ul li:last-child {
  border-bottom: none;
}

.product-need-card .btn-primary {
  margin-right: 30px;
}

.public-line {
  border: 1px solid #e1e1e1;
  padding: 50px 30px 30px 30px;
  border-radius: 12px;
}


.public-title-line h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-title-line h2::before {
  content: '';
  width: 70px;
  height: 3px;
  background: linear-gradient(to right, #fff 20%, var(--primary));
  display: block;
  margin-right: 15px;
}

.public-title-line h2::after {
  content: '';
  width: 70px;
  height: 3px;
  background: linear-gradient(to left, #fff 20%, var(--primary));
  display: block;
  position: relative;
  left: auto;
  bottom: 0;
  transform: translateX(0%);
  margin-left: 15px;
}

.public-dot {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.public-dot span {
  transition: .2s;
  border-radius: 4px;
}

.public-dot .swiper-pagination-bullet-active {
  background: var(--primary);
  width: 15px;
}

.product-details-uf {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product-details-format,
.product-details-ul {
  width: 49%;
}

.product-details-format li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.product-details-format li:last-child {
  margin-bottom: 0;
}

.product-details-format div {
  width: calc(35% - 5px);
  color: #555;
}

.product-details-format span {
  width: calc(65% - 5px);
  color: #000;
}

.industries-cate .explore-list {
  padding-left: 0;
}

.industries-cate .explore-list li {
  list-style: none;
}


.industries-quality-col .industries-quality-li {
  display: flex;
  align-items: center;
  text-align: left;
}

.industries-quality-col .industries-quality-li img {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 20px;
}

.industries-quality-col .industries-quality-li b {
  font-size: 24px;
  margin-bottom: 3px;
}

.industries-quality-col .industries-quality-li p {
  line-height: 1.4;
}


.industries-quality-col {
  margin-left: 20px;
}

.capabilities-forward .public-line {
  padding: 50px 30px;
}

.public-line .capabilities-forward-row {
  padding-top: 0;
}

.banner-search-box {
  transition: .3s;
}

.banner-search-box:focus-within {
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.6);

}

.resources-center-top.resources-center-top-two {
  padding: 0;
}

.resources-center-top.resources-center-top-two .resources-center-search {
  padding: 12px 30px 12px 22px;
}

.about-company .col-6 {
  border-right: 1px solid #e1e1e1;
}

.about-company .col-6:last-child {
  border-right: none;
}

.about-globa-building {
  padding-bottom: 0 !important;
}

.about-globa-building .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.search-section {
  padding-top: 50px;
}

/* --- 响应式 --- */
@media (max-width: 1400px) {
  .about-company .col-6:nth-child(3n+3) {
    border-right: none;
  }

  .about-globa-building .container {
    grid-template-columns: repeat(1, 1fr);
  }

}

@media (max-width: 1200px) {

  .industries-quality-col {
    margin-left: 0;
  }

  .product-details-format,
  .product-details-ul {
    width: 100%;
  }

  .product-details-format {
    margin-top: 15px;
  }


  .product-need-card .btn-primary {
    margin-right: 0;
  }


  .thanks-need-center {
    flex-direction: column;
    gap: 30px;
  }

  .quality-accent-card {
    margin-top: 30px;
  }

  .index-need-right {
    display: block;
  }

  .index-need-img {
    width: 100%;
    margin-top: 30px;
  }

  .mega-item-text div,
  .mega-item-icon {
    display: none;
  }

  .mega-item-text strong {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 14px;
  }

  .mega-dropdown-container {
    background: none;
    border-radius: 0;
  }

  /* .product-nav:hover .mega-dropdown {
    background: none;
    padding: 0;
  } */

  .mega-item {
    padding: 10px;
  }

  .mega-item:hover {
    background: none;
  }

  .mega-dropdown-sub {
    padding-left: 0;
    border-left: none;
    margin-top: 0;
  }

  .mega-dropdown-sub a {
    padding: 6px 10px;
    font-size: 14px;
  }

  .mega-item {
    gap: 0;
  }

  .sub-dropdown {
    background: none;
    padding: 0;
  }

  .sub-dropdown li a {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .sub-dropdown::before,
  .sub-dropdown::after {
    display: none;
  }

  .has-sub:hover .sub-dropdown {
    padding-top: 0;
  }
}

@media (max-width: 991px) {

  .public-line {
    padding: 40px 20px 30px 20px;
  }

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

  .thanks-need-card {
    flex-direction: column;
  }

  .thanks-need-left {
    padding: 40px 30px;
  }

  .thanks-need-right {
    min-height: auto;
  }

  .thanks-banner-main {
    text-align: center;
  }

  .thanks-banner-main .not-t3 {
    justify-content: center;
  }

  .thanks-banner-main .not-t4 {
    justify-content: center;
  }

  .index-need {
    padding-top: 80px;
  }

  .product-index-manufact {
    margin-bottom: 80px;
  }

  .pb-100 {
    padding-bottom: 80px;
  }

  .capabilities-built-right {
    border-left: none;
    padding-left: 0;
  }


}

@media (max-width: 768px) {
  .about-building-ul {
    margin-top: 25px;
  }

  .about-company .col-6:nth-child(3n+3) {
    border-right: 1px solid #e1e1e1;
  }

  .about-company .col-6:nth-child(2n+2) {
    border-right: none;
  }

  .resources-center-top.resources-center-top-two .resources-center-search {
    padding: 6px 10px 6px 15px;
  }

  .capabilities-forward .public-line {
    padding: 30px 20px;
  }

  .public-title-line h2::before {
    width: 50px;
    margin-right: 10px;
  }

  .public-title-line h2::after {
    width: 50px;
    margin-left: 10px;
  }

  .product-cate .public-title h2 {
    font-size: 26px;
  }

  .blog-faq .resources-faq-ul li {
    width: 100%;
  }

  .public-title-two h2 {
    font-size: 20px;
  }

  .pb-100 {
    padding-bottom: 60px;
  }

  .thanks-banner-main .not-t4 {
    flex-direction: column;
  }

  .index-stay .container {
    flex-direction: column;
  }

  .index-need {
    padding-top: 60px;
  }

  .mega-item {
    padding: 10px;
  }

  .mega-item-icon {
    display: none;
  }

  .product-index-manufact {
    margin-bottom: 60px;
  }

  .product-need-card,
  .product-ready-card {
    padding: 40px 30px;
  }

  .need-info,
  .ready-info,
  .ready-btns {
    flex-direction: column;
  }

  .brass-need-bg {
    display: block;
  }

  .brass-need-center {
    margin-left: 0;
    margin-top: 30px;
  }

  .index-manufact-row .col-12::after {
    display: none;
  }

  .product-how-row .col-lg-2:nth-child(even) .product-how-li::after {
    display: none;
  }

  .product-send-form textarea {
    height: 90px;
  }

  .file-upload-content {
    display: block;
  }

  .file-upload-content i {
    margin-bottom: 10px;
  }

  .product-send-row {
    padding: 20px;
  }

  .index-stay .public-title h2 {
    font-size: 22px;
    margin-top: 10px;
  }

  .product-explore-row,
  .product-how-row {
    row-gap: 20px;
  }


  .industries-quality-bg {
    padding: 40px 20px;
  }

  .industries-quality-title {
    font-size: 22px;
    margin-bottom: 25px;
  }

  .oem-work-line .col-12::after {
    display: none;
  }

  .capabilities-quality-left {
    height: auto;
    margin-bottom: 30px;
  }

  .public-title {
    margin-bottom: 40px;
  }

  .brass-quality-left li {
    width: 100%;
  }

  .post-meta {
    flex-wrap: wrap;
  }

  .download-title h2 {
    font-size: 20px;
  }

  .download-resources-card {
    padding: 20px;
  }

  .page-icons-color .page-icons-li {
    border-right: none;
  }


  .blog-define-line .col-12:after {
    display: none;
  }

  .resources-catalog-bg,
  .resources-news-wrap-bg,
  .resources-faq-wrap-bg {
    padding: 20px;
  }

  .cat-info {
    flex: 1;
    overflow: hidden;
  }

  .page-icons-margin {
    margin-top: 25px;
  }


}

/* Homepage header interactions */
.header-search {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
}

.lang-switch {
  position: relative;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1200;
  min-width: 160px;
  padding: 8px;
  border: 1px solid rgba(29, 111, 56, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.lang-switch.is-open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 16px;
}

.lang-dropdown a:hover,
.lang-dropdown a.active {
  color: var(--primary);
  background: #f2f8f4;
}

.lang-flag {
  width: 24px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(29, 111, 56, 0.14);
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 130px 20px 30px;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

body.search-open {
  overflow: hidden;
}

.search-modal-panel {
  position: relative;
  width: min(720px, 100%);
  padding: 32px 28px 24px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.search-modal-close {
  position: absolute;
  top: 3px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #444444;
  cursor: pointer;
  font-size: 28px;
  line-height: 32px;
}

.search-modal-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dce8e0;
  border-radius: 6px;
  transition: .3s;
}

.search-modal-form:focus-within {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}

.search-modal-form>i {
  color: var(--primary);
  font-size: 20px;
}

.search-modal-form input {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 16px;
}

.search-modal-form button {
  min-height: 40px;
  padding: 8px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  transition: .3s;
  font-size: 16px;
}

.search-modal-form button:hover {
  background: var(--black);
}

.search-modal-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 42%, #1d6f38 42%, #1d6f38 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #1d6f38 42%, #1d6f38 58%, transparent 58%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.nav-sub-toggle,
.mega-sub-toggle {
  display: none;
}

.product-related .row {
  row-gap: 20px;
}

@media (max-width: 1200px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  body.mobile-nav-open header {
    z-index: 1300;
  }

  body.mobile-nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 18, 10, 0.45);
  }

  header .container {
    padding: 0 20px;
  }

  .logo img,
  header.sticky .logo img {
    height: 58px;
  }

  .header-actions {
    gap: 10px;
  }

  .header-search,
  .header-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f6faf7;
  }

  .header-btn {
    position: relative;
    z-index: 1301;
  }

  .header-btn.active {
    color: var(--primary);
    background: #eaf5ee;
  }

  .header-btn.active i {
    font-family: Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
  }

  .header-btn.active i::before {
    content: '\00d7';
  }

  .header-nav {
    top: 0;
    right: 0 !important;
    width: min(88vw, 400px) !important;
    height: 100vh;
    height: 100dvh;
    padding: 82px 20px 24px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    transform: translate3d(102%, 0, 0);
    transition: transform 0.24s ease-out !important;
    will-change: transform;
  }

  .header-nav.active {
    transform: translate3d(0, 0, 0);
  }

  .header-nav>ul {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header-nav>ul>li {
    position: relative;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e7eee9;
  }

  .header-nav>ul>li>a {
    width: 100%;
    min-height: 52px;
    padding: 14px 48px 14px 4px !important;
    border: 0 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
  }

  .header-nav>ul>li.active>a,
  .header-nav>ul>li.is-open>a {
    color: var(--primary);
  }

  .header-nav .nav-sub-toggle,
  .header-nav .mega-sub-toggle {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid #e4eee7;
    border-radius: 50%;
    color: var(--primary);
    background: #f5faf7;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .header-nav .nav-sub-toggle {
    top: 8px;
    right: 0;
    width: 38px;
    height: 38px;
  }

  .header-nav .nav-sub-toggle .icon-jiantou-xia {
    width: 8px;
    height: 8px;
    display: block !important;
    margin: 0;
    padding: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: transparent;
    font-size: 0;
    line-height: 0;
    transform: rotate(45deg) !important;
    transform-origin: center;
    transition: transform 0.18s ease;
  }

  .header-nav .nav-sub-toggle[aria-expanded="true"] .icon-jiantou-xia {
    transform: rotate(225deg) !important;
  }

  .header-nav li:hover>.nav-sub-toggle .icon-jiantou-xia,
  .header-nav li:hover .nav-sub-toggle .icon-jiantou-xia {
    transform: rotate(45deg) !important;
  }

  .header-nav li:hover>.nav-sub-toggle[aria-expanded="true"] .icon-jiantou-xia,
  .header-nav li:hover .nav-sub-toggle[aria-expanded="true"] .icon-jiantou-xia {
    transform: rotate(225deg) !important;
  }

  .header-nav .mega-dropdown,
  .header-nav .sub-dropdown,
  .header-nav .mega-dropdown-sub,
  .header-nav .product-nav:hover>.mega-dropdown,
  .header-nav .has-sub:hover>.sub-dropdown,
  .header-nav .mega-item.has-sub:hover>.mega-dropdown-sub {
    display: none;
  }

  .header-nav .product-nav.is-open>.mega-dropdown,
  .header-nav>ul>li.is-open>.sub-dropdown,
  .header-nav .mega-item.is-open>.mega-dropdown-sub,
  .header-nav .nav-sub-toggle[aria-expanded="true"]+.mega-dropdown,
  .header-nav .nav-sub-toggle[aria-expanded="true"]+.sub-dropdown,
  .header-nav .mega-sub-toggle[aria-expanded="true"]+.mega-dropdown-sub {
    display: block;
  }

  .header-nav .mega-dropdown,
  .header-nav .sub-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 6px 10px;
    border: 1px solid #e2ebe5;
    border-radius: 8px;
    background: #f7faf8;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .header-nav .mega-dropdown-container {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .header-nav .mega-item-divider {
    display: none;
  }

  .header-nav .mega-item {
    position: relative;
    min-height: 48px;
    padding: 0;
    border-bottom: 1px solid #e3ebe6;
  }

  .header-nav .mega-item:last-child {
    border-bottom: 0;
  }

  .header-nav .mega-item>a {
    min-height: 48px;
    padding: 11px 46px 11px 6px !important;
    align-items: center;
  }

  .header-nav .mega-item-text strong {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
  }

  .header-nav .mega-sub-toggle {
    top: 8px;
    right: 4px;
    width: 32px;
    height: 32px;
    background: #ffffff;
  }

  .header-nav .mega-sub-toggle .mega-item-arrow {
    width: 8px;
    height: 8px;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    font-size: 0;
    line-height: 0;
    opacity: 1;
    transform: rotate(-45deg) !important;
    transform-origin: center;
    transition: transform 0.18s ease;
  }

  .header-nav .mega-sub-toggle[aria-expanded="true"] .mega-item-arrow {
    transform: rotate(45deg) !important;
  }

  .header-nav .mega-item:hover>.mega-sub-toggle .mega-item-arrow {
    transform: rotate(-45deg) !important;
  }

  .header-nav .mega-item:hover>.mega-sub-toggle[aria-expanded="true"] .mega-item-arrow {
    transform: rotate(45deg) !important;
  }

  .header-nav .mega-dropdown-sub {
    position: static;
    width: 100%;
    margin: 0 0 8px;
    padding: 0 0 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .header-nav .mega-dropdown-sub a,
  .header-nav .sub-dropdown li a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border: 0;
    border-radius: 5px;
    color: #444444;
    font-size: 14px;
    line-height: 22px;
  }

  .header-nav .mega-dropdown-sub a::before {
    content: '';
    width: 5px;
    height: 5px;
    margin-right: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(29, 111, 56, 0.35);
  }

  .header-nav .mega-dropdown-sub a:hover,
  .header-nav .sub-dropdown li a:hover {
    padding-left: 10px;
    color: var(--primary);
    background: #f2f8f4;
  }
}

@media (max-width: 576px) {
  .header-nav {
    width: min(92vw, 360px) !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .search-modal {
    padding: 96px 14px 18px;
  }

  .search-modal-panel {
    padding: 28px 16px 18px;
  }

  .search-modal-form {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .search-modal-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .search-section {
    padding-top: 30px;
  }

}