body {
  font-family: Arial, Helvetica, sans-serif;
}

@media (min-width: 1720px) {
  .container-xxl {
    max-width: 1624px;
  }
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    padding-right: calc(var(--bs-gutter-x) );
    padding-left: calc(var(--bs-gutter-x) );
}

.pt-6,
.py-6 {
  padding-top: 7.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 7.5rem !important;
}

.ps-6,
.px-6 {
  padding-left: 7.5rem !important;
}

.pe-6,
.px-6 {
  padding-right: 7.5rem !important;
}

.mt-6,
.my-6 {
  margin-top: 7.5rem !important;
}

.mb-6,
.my-6 {
  margin-bottom: 7.5rem !important;
}

.ms-6,
.mx-6 {
  margin-left: 7.5rem !important;
}

.me-6,
.mx-6 {
  margin-right: 7.5rem !important;
}

@media (min-width: 1200px) {
  .mw-lg-50 {
    max-width: 50%;
  }
  .max-lg-1060{
    max-width: 1060px;
  }
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

@media (min-width: 992px) {
  .text-lg-center {
    text-align: center !important;
  }
}

.nav-link {
  font-weight: bold;
}

.fw-bold{
  font-weight: bold;
}

.fw-normal{
  font-weight: normal;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.68rem;
    padding-left: 1.68rem;
  }
}

.navbar-light .nav-link {
  color: #000;
}

.navbar-dark .nav-link {
  color: #fff;
}

.navbar-light .nav-link:hover,
.navbar-dark .nav-link:hover {
  color: #f8274a;
}

.btn {
  font-weight: bold;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f8274a;
  --bs-btn-border-color: #f8274a;
  --bs-btn-hover-color: #f8274a;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #f8274a;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: #f8274a;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #f8274a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: rgba(166, 166, 166, 0.15);
  --bs-btn-disabled-border-color: rgba(166, 166, 166, 0.15);
}

.btn-outline-primary {
    --bs-btn-color: #f8274a;
    --bs-btn-border-color: #f8274a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f8274a;
    --bs-btn-hover-border-color: #f8274a;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f8274a;
    --bs-btn-active-border-color: #f8274a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8274a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8274a;
    --bs-gradient: none;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #333;
  --bs-btn-border-color: #333;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #333;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #333;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: rgba(166, 166, 166, 0.15);
  --bs-btn-disabled-border-color: rgba(166, 166, 166, 0.15);
}

#site-footer .footer-copyright p {
  font-size: 14px;
}

#site-footer .mb-5 {
  margin-bottom: 40px !important;
}

#site-footer .footer-menu ul {
  list-style: none;
  padding-left: 0;
}

#site-footer .footer-menu ul li {
  display: inline;
}

#site-footer .footer-menu ul li a {
  margin-left: 1rem;
}

#site-footer .bi-wechat-services::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url(../images/icon-wechat-services.svg) no-repeat center center;
}

#site-footer .bi-xhs::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url(../images/icon-xhs.svg) no-repeat center center;
}

.bi.bi-goback:before {
  content: "";
  width: 21px;
  height: 16px;
  background: url(../images/icon-arrow-left-red.svg) no-repeat center center;
}

.bi.btn-arrow-right-top:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon-arrow-right-top-red.svg) no-repeat center center;
}

.btn:hover .bi.btn-arrow-right-top:before {
  background: url(../images/icon-arrow-right-top-white.svg) no-repeat center center;
}

.hebe.tparrows.tp-leftarrow:before {
  content: "";
  background: url(../images/slider-left-light.svg) no-repeat center center;
}

.hebe.tparrows.tp-rightarrow:before {
  content: "";
  background: url(../images/slider-right-light.svg) no-repeat center center;
}

/* Post */

.blog-info.blog-bg-dark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
}

.blog-info.blog-bg-dark a,
.blog-info.blog-bg-dark h4 {
  color: #fff;
}

.blog-info.blog-bg-dark p {
  font-size: 14px;
}

.single-content-blog {
  max-width: 1056px;
}

.single-blog-content {
  padding-top: 40px;
}

.breadcrumbs-items a {
  color: #f8274a;
  font-weight: bold;
  border: #f8274a 2px solid;
}

.breadcrumbs-items a:hover {
  border-left: #f8274a 6px solid;
}

.works-navigation .nav-links,
.single-content .navigation .nav-links {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.works-navigation .nav-links .nav-subtitle,
.single-content .navigation .nav-links .nav-subtitle {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.works-navigation .nav-links a .nav-title,
.single-content .navigation .nav-links a .nav-title {
  color: #f8274a;
}

.wp-caption {
  margin-bottom: 3em;
}

.wp-caption-text {
  margin-top: 10px;
  display: inline-block;
  padding: 0 10px;
  font-size: 14px;
  background-color: #f5f5f5;
}

.customer-logo img {
  height: auto;
  object-fit: contain;
}

.border-bottom-1 {
  border-bottom: 1px solid #ddd;
}

.border-left {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.content-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  border-bottom: 1px solid #ddd;
}

.content-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.form-label {
  font-size: 16px;
}

.form-control {
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  padding-left: 0;
}

.form-control:focus {
  border-color: #F8274A;
  box-shadow: none;
}

.form-control::placeholder {
  color: #ccc;
}

.wpcf7-not-valid-tip {
  font-size: 12px;
}

.form-submit .wpcf7-submit {
  background-color: #000;
  color: #fff;
  padding-left: 2rem;
  padding-right: 2rem;
}

.form-submit .wpcf7-spinner {
  overflow: hidden;
  display: none;
}

/* Works Categories Filter Styles */
.works-categories-filter {
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.category-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.filter-item {
  margin: 0;
}

.filter-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
  border-radius: 25px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.filter-link:hover {
  color: #F8274A;
}

.filter-item.active .filter-link {
  color: #F8274A;
}

.filter-link .count {
  font-size: 12px;
  opacity: 0.8;
  margin-left: 5px;
}

@media (max-width: 480px) {
  .category-filter-list {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Works Grid Layout Styles */
.works-grid-container,
.works-grid-container.works-list,
.works-grid-container.row {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  grid-auto-flow: row dense !important;
  /* 清除Bootstrap的row样式 */
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-wrap: nowrap !important;
}

/* Works Item Base Styles */
.works-grid-container .works-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.works-grid-container .works-item {
  transition: transform 0.3s ease-out,
    box-shadow 0.3s ease-out;
  will-change: transform;
}

/* 确保移除任何可能冲突的Bootstrap类 */
.works-grid-container .works-item,
.works-grid-container .works-item.col-12,
.works-grid-container .works-item.col-md-6,
.works-grid-container article {
  width: auto !important;
  flex: none !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Responsive Design */
@media (min-width: 992px) {
  .works-grid-container,
  .works-grid-container.works-list,
  .works-grid-container.row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .works-grid-container .works-size-a1 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100%;
    height: 100%;
  }

  /* b1: 高度是a1的2倍 (1x2) */
  .works-grid-container .works-size-b1 {
    grid-column: span 1 !important;
    grid-row: span 2 !important;
    width: 100%;
    height: 100%;
  }

  /* c1: 宽度和高度都是a1的2倍 (2x2) */
  .works-grid-container .works-size-c1 {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    width: 100%;
    height: 100%;
  }
}

/* Works Thumbnail Styles */
.works-thumb {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.works-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

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

.works-categories {
  position: absolute;
  top: 10%;
  bottom: auto;
  left: 0;
  background-color: #F8274A;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  z-index: 9;
}

.works-arrow {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 12;
  display: none;
}

.works-item:hover .works-arrow {
  display: block;
}

/* Works Info Styles - 悬停显示 */

@media (min-width: 992px) {
  .works-info {
    opacity: 0;
    position: absolute;
  }
  .works-item:hover .works-info {
    /* top: 0; */
    /* height: 100%; */
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    /* 背景渐变，从上rgba(248, 39, 74, 0.1)到下rgba(248, 39, 74, 0.8) */
    background: linear-gradient(
      to bottom,
      rgba(248, 39, 74, 0) 0%,
      rgba(248, 39, 74, 0.8) 100%
    );
    visibility: hidden;
    transition: transform 0.3s ease-out,
    opacity 0.3s ease-out;
    z-index: 10;
    will-change: transform, opacity;
    opacity: 1;
    visibility: visible;
  }
}

.works-title {
  margin: 0 0 10px 0;
}

.works-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.works-desc {
  font-size: 14px;
  color: #ccc;
  line-height: 1.4;
  margin: 0;
}

.wp-pagenavi a, .wp-pagenavi span {
  border-color: #f8274a !important;
  color: #f8274a !important;
}

.wp-pagenavi .current, .wp-pagenavi a:hover {
  color: #fff !important;
}

/* 产品详情页Banner样式 */
.works-banner {
  width: 100%;
  height: 980px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-info {
  position: relative;
}

.max-lg-width {
  width: 1150px;
}

.works-card {
  background-color: #fff;
  left: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .works-banner {
    height: 600px;
  }

  .max-lg-width {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .works-banner {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .works-banner {
    height: 300px;
  }
}

/* 产品Logo样式 */
.works-logo {
  max-width: 160px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 产品标题和分类样式 */
.title-with-category {
  position: relative;
}



.single-works-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

.works-category-float {
  position: static;
  margin-top: 15px;
  background-color: #F8274A;
  color: #fff;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
  transform: none;
}

@media (min-width: 992px) {
  .single-works-title {
    position: relative;
    display: inline-block;
  }
  .works-category-float {
    right: 0;
    margin-top: 8px;
    position: absolute;
    transform: translateX(100%);
    display: inline-block;
  }
}

/* 产品详情图片网格布局 */
.details-images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 400px;
  gap: 15px;
  margin: 30px 0;
  grid-auto-flow: row dense;
}

/* 详情图片尺寸样式 */
/* a1: 标准尺寸 (1x1) */
.detail-size-a1 {
  grid-column: span 1;
  grid-row: span 1;
}

/* b1: 宽度2倍 (2x1) */
.detail-size-b1 {
  grid-column: span 2;
  grid-row: span 1;
}

/* c1: 宽度和高度都是2倍 (2x2) */
.detail-size-c1 {
  grid-column: span 2;
  grid-row: span 2;
}

/* d1: 宽度4倍，高度2倍 (4x2) */
.detail-size-d1 {
  grid-column: span 4;
  grid-row: span 2;
}

/* 详情图片项目样式 */
.detail-image-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.detail-image-item .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.detail-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

/* 红色遮罩效果 */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(248, 39, 74, 0) 0%,
    rgba(248, 39, 74, 0.8) 100%
  );
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-wrapper:hover .image-overlay {
  opacity: 1;
  visibility: visible;
}

.overlay-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  color: white;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Lightbox 样式 */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

.lightbox-content {
  position: relative;
  margin: auto;
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close {
  padding: 12px;
  display: flex;
  width: 48px;
  height: 48px;
  text-align: center;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.3s ease;
}

.lightbox-close:hover {
  background-color: #F8274A;
}

.lightbox-close:hover {
  color: #F8274A;
}

.lightbox-nav {
  text-align: center;
  width: 82px;
  height: 82px;
  position: absolute;
  top: auto;
  bottom: 10%;
  transform: translateY(10%);
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  padding: 16px;
  user-select: none;
  transition: color 0.3s ease;
  z-index: 10001;
  background-color: #F8274A;
}

@media (min-width: 992px) {
  .lightbox-nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

.lightbox-nav:hover {
  background-color: #000;
}

.lightbox-prev {
  left: 0;
}

.lightbox-next {
  right: 0;
}

#lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lightbox-nav {
    font-size: 24px;
    padding: 12px;
  }

  .lightbox-close {
    font-size: 30px;
    top: 10px;
    right: 20px;
  }

  .overlay-icon {
    font-size: 1.5rem;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .details-images-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
  }

  .detail-size-d1 {
    grid-column: span 3;
  }
}

@media (max-width: 768px) {
  .details-images-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
    gap: 10px;
  }

  .detail-size-b1,
  .detail-size-c1,
  .detail-size-d1 {
    grid-column: span 2;
  }

  .detail-size-c1,
  .detail-size-d1 {
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .details-images-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }

  .detail-size-a1,
  .detail-size-b1,
  .detail-size-c1,
  .detail-size-d1 {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.swiper-white .swiper-button-next,
.swiper-white .swiper-button-prev {
  border: none;
  background-color: #F8274A;
}
.swiper-button-next, .swiper-button-prev {
  border-radius: 0;
  min-width: 70px;
  min-height: 70px;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
  content: '';
  background: url(../images/slider-right-light.svg) no-repeat center center;
  width: 30px;
  height: 30px;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
  content: '';
  background: url(../images/slider-left-light.svg) no-repeat center center;
  width: 30px;
  height: 30px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
 left: 0;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 0;
}

.footer-wechat,
.footer-xhs {
  display: inline-block;
}
.footer-wechat .footer-wechat-qrcode,
.footer-xhs .footer-xhs-qrcode {
  position: absolute;
  top: 0;
  left: 120%;
  z-index: 10;
  display: none;
  width: 200px;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
}
.footer-wechat:hover .footer-wechat-qrcode,
.footer-xhs:hover .footer-xhs-qrcode {
  display: block;
}