/* ----------------------------------------------------------------
	:: 7.0 Home banner
-----------------------------------------------------------------*/
.swiper-slide {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.header_banner .swiper-container {
   width: 100%;
   height: 100%;
   float: left;
   transition: opacity .6s ease, -webkit-transform .3s ease;
   transition: opacity .6s ease, transform .3s ease;
   transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease;
}

.swiper-container.nav-slider {
   max-height: 200px;
   overflow: hidden;
   position: absolute;
   display: block;
   margin: 0 auto;
   left: 0;
   right: 0;
   max-width: 1140px;
}

.swiper-thumbs {
   display: block;
   float: left;
   bottom: 0;
   height: 200px;
   position: absolute;
   width: 100%;
   z-index: 10;
}

.swiper-container.nav-slider .content {
   top: 40%;
}

.swiper-container.nav-slider .swiper-slide {
   cursor: pointer;
   opacity: .9;
   transition: opacity .3s ease;
}

.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
   opacity: 1;
}

.swiper-container.nav-slider .swiper-slide .content {
   width: 100%;
}

.home_slider .swiper-slide {

   position: relative;
   z-index: 99;
}

.nav-slider .swiper-slide-active .content {
   width: 100%;
   border-bottom: 2px solid;
   margin: 0px 15px;

}

.nav-slider .swiper-slide .content {
   color: #fff;
}

.nav-slider .swiper-slide-active .content,
.nav-slider .content:hover {
   color: var(--main-color) !important;
}

.swiper-container:hover .swiper-button-prev:not(.custom-swiper-button),
.swiper-container:hover .swiper-button-next:not(.custom-swiper-button) {
   -webkit-transform: translateX(0);
   transform: translateX(0);

   opacity: 1;
   visibility: visible;
}

.swiper-container.loading {
   opacity: 0;
   visibility: hidden;
}

.slide-bgimg img {
   width: 100%;
}

.swiper-slide {
   overflow: hidden;
}

.main-slider .swiper-slide {
   overflow: hidden;
   position: relative;
   width: 100%;
}

.main-slider .swiper-wrapper {
   display: flex;
   transition-property: transform;
   box-sizing: content-box;
}

.main-slider .swiper-slide .slide-bgimg {
   position: relative;
   margin-bottom: 0px;
   width: 100%;
   left: 0;
   will-change: transform;
   backface-visibility: hidden;
}

.swiper-slide .slide-bgimg::after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #030303;
   opacity: 0.15;
   content: '';
}

.swiper-slide .entity-img {
   display: none;
}

.main-slider .swiper-slide .content {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin: 0 auto;
   max-width: 1140px;
   color: var(--main-color, #FF6E00);
   z-index: 99;
}

.main-slider .swiper-slide .content .title {
   font-size: 4.6em;
   font-weight: 500;
   color: #fff;
   text-shadow: 3px 5px 20px rgba(0, 0, 0, 0.1);
   line-height: 1.4;
   opacity: 0;
   visibility: hidden;
   transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 2.5s ease;
   display: inline;
   text-decoration: none;
   background-image: linear-gradient(to right, var(--gt-theme, #FF6E00) 0%, var(--gt-theme, #FF6E00) 100%);
   background-position: 0 90%;
   background-repeat: repeat-x;
   background-size: 100% 2px;
}

.main-slider .swiper-slide .content .title.show {
   opacity: 1;
   visibility: visible;
}

.main-slider .swiper-slide .content .caption {
   display: block;
   font-size: 26px;
   color: #fff;
   margin-top: 30px;
   line-height: 1.4;
   -webkit-transform: translateX(50px);
   transform: translateX(50px);
   opacity: 0;
   transition: opacity .3s ease, -webkit-transform .7s ease;
   transition: opacity .3s ease, transform .7s ease;
   transition: opacity .3s ease, transform .7s ease, -webkit-transform .7s ease;
   text-shadow: 0 3px 1px rgba(255, 110, 0);
}

.swiper-slide .content .caption.show {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}

[class^="swiper-button-"]:not(.custom-swiper-button) {
   width: 44px;
   opacity: 0;
   visibility: hidden;
}

.swiper-button-prev:not(.custom-swiper-button) {
   -webkit-transform: translateX(50px);
   transform: translateX(50px);
}

.swiper-button-next:not(.custom-swiper-button) {
   -webkit-transform: translateX(-50px);
   transform: translateX(-50px);
}

/* 完全隐藏默认箭头 */
.home_slider .swiper-button-prev:after,
.home_slider .swiper-button-next:after {
   display: none !important;
   content: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
   width: 0 !important;
   height: 0 !important;
   font-size: 0 !important;
}

/* 自定义箭头样式 */
.home_slider .custom-swiper-button {
   background-size: 100% 100% !important;
   width: 44px !important;
   height: 44px !important;
   margin-top: -22px !important;
   z-index: 10;
   cursor: pointer;
   transition: all 0.3s ease;
   opacity: 0 !important;
   visibility: hidden !important;
}

/* 悬停时显示箭头 */
.home_slider:hover .custom-swiper-button {
   opacity: 1 !important;
   visibility: visible !important;
}

.home_slider .custom-swiper-button.swiper-button-prev {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
   left: 20px;
}

.home_slider .custom-swiper-button.swiper-button-next {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") !important;
   right: 20px;
}

.home_slider .custom-swiper-button:hover {
   transform: scale(1.1);
   opacity: 0.8;
}

/* ----------------------------------------------------------------
	:: section-title 
-----------------------------------------------------------------*/

.section-title {
   position: relative;
   display: block;
   margin-bottom: 30px;
   z-index: 1;
}

.section-title__title {
   position: relative;
   font-size: var(--sec-title-font-size, 30px);
   color: var(--sec-title-color, var(--headings-color, #4a4a4a));
   font-weight: var(--sec-title-font-weight, 600);
   margin-top: 15px;
   line-height: 1.05;
}

.section-title__tagline-box {
   position: relative;
   display: block;
   line-height: 16px;
}

.section-title__tagline {
   position: relative;
   display: inline-block;
   font-size: 16px;
   line-height: 20px;
   color: #E1E1E1;
   font-weight: 300;
   text-transform: uppercase;
}

.section-title__tagline:before {
   content: "";
   height: 2px;
   background: #FF6E00;
   background: linear-gradient(90deg, rgba(255, 110, 0, 1) 0%, rgba(255, 110, 0, 0.7) 83%);
   position: absolute;
   bottom: -4px;
   left: 0;
   right: 0;
}

.section-title__tagline::after {
   position: absolute;
   left: 0;
   bottom: -6px;
   right: 0;
   margin: auto;
   width: 6px;
   height: 6px;
   content: "";
   animation: l-r-zump 2s linear infinite;
   background: #FF6E00;
   background: linear-gradient(90deg, rgba(255, 110, 0, 1) 0%, rgba(255, 110, 0, 0.7) 83%);
   border-radius: 50%;
}

.section-title .section-title__subtitle {
   position: relative;
   margin-top: 10px;
   font-size: 16px;
   color: #9f9f9f;
   line-height: 1;
   font-weight: 300;
   display: inline-flex;
   letter-spacing: 1.3px;
}

@keyframes l-r-zump {

   0%,
   100% {
      transform: translateX(0);
   }

   25%,
   75% {
      transform: translateX(10px);
   }

   50% {
      transform: translateX(-10px);
   }
}

.sub-title {
   position: relative;
   font-size: 30px;
   color: var(--sec-title-color);
   line-height: 1;
   font-weight: 600;
   display: inline-flex;
   letter-spacing: 1.3px;
   margin-bottom: 10px;
   padding-left: 50px;
   gap: 10px;
}

.sub-title-tit {
   position: relative;
   font-size: 17px;
   color: var(--sec-title-color);
   line-height: 1;
   font-weight: 600;
   display: inline-flex;
   letter-spacing: 1.3px;
   margin-bottom: 15px;
   padding-left: 50px;
   gap: 10px;
}

.triangle {
   position: absolute;
   width: 0;
   height: 0;
   top: 50%;
   transform: translateY(-50%);
   border-top: 9.803px solid transparent;
   border-bottom: 9.803px solid transparent;
   border-left: 19.606px solid;
}

.triangle1 {
   border-left-color: var(--gt-theme);
   left: 5px;
   z-index: 9;
}

.triangle2 {
   border-left-color: var(--gt-header);
   left: 20px;
   animation: move2 1s infinite alternate ease-in-out;
}

@keyframes move1 {
   0% {
      left: 5px;
   }

   100% {
      left: 2px;
   }
}

@keyframes move2 {
   0% {
      left: 20px;
   }

   100% {
      left: 17px;
   }
}

/* Prodcuts Styles */

.products {
   position: relative;
   display: block;
   padding: 60px 0 60px;
   z-index: 1;
}


.products__box {
   position: relative;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   margin-left: -15px;
   margin-right: -15px;
}

.products__box li {
   position: relative;
   flex: 0 0 25%;
   margin-bottom: 10px;
   padding-left: 15px;
   padding-right: 15px;
   transition: background-color 0.5s ease;
   transition: all 0.5s ease;
   border-radius: var(--itzone-bdr-radius);
   overflow: hidden;
   list-style: none;
}

.products__box li.active {
   flex: 0 0 25%;
}

.products__box-content {
   position: relative;
   display: block;
   overflow: hidden;
   min-height: 340px;
   z-index: 1;
   cursor: pointer;
}

.single-products__bg {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   border-radius: 20px;
   background-color: #f2f2f2;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   overflow: hidden;
   transition: all 500ms ease;
   z-index: -1;
}

.single-products__bg::before {
   content: "";
   position: absolute;
   top: 0;
   left: -5px;
   bottom: 0;
   right: -5px;
   border-radius: 20px;
   opacity: 0;
   transform: perspective(540px) rotateY(0deg) translateY(-100px);
   transform-origin: top;
   transition: all 500ms ease;
}

.products__box li.active .single-products__bg::before {
   opacity: .95;
   border-radius: 20px;
   transform: perspective(540px) rotateY(0deg) translateY(0px);
   transition-delay: 500ms;
}


.single-products__bg::after {
   content: "";
   position: absolute;
   top: 0;
   left: -5px;
   bottom: 0;
   right: -5px;
   border-radius: 20px;
   opacity: 0;
   transition: all 500ms ease;
}

.products__title {
   position: absolute;
   left: 15px;
   top: 15px;
   transform: rotate(0deg);
   opacity: 1;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   z-index: 2;
   margin-left: 0 !important;
}

.products__title h3 {
   font-size: 20px;
   font-weight: 700;
   line-height: 29px;
}

.products__subtitle {
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
   margin-top: 2px;
   color: var(--itzone-white);
   opacity: 0.7;
   display: block;
   margin-left: 0;
}

.products__subtitle a {
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
   color: var(--itzone-white);
   opacity: 0.9;
   display: inline-block;
   margin-right: 8px;
   margin-bottom: 5px;
   text-decoration: none;
   padding: 2px 8px;
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.1);
   transition: all 0.3s ease;
}

.products__subtitle a:hover {
   opacity: 1;
   text-decoration: none;
   color: #FF6E00;
   background-color: rgba(255, 255, 255, 0.9);
}

.products__title h3 a {
   color: var(--itzone-white);
   padding: 0 8px;
   text-decoration: none;
   position: relative;
   display: inline-block;
}

.products__title h3 a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background-color: var(--main-color);
   transition: width 0.3s ease;
}

.products__title h3 a:hover::after {
   width: 100%;
}

.products__box li.active .products__title {
   opacity: 1;
}

.products__image {
   position: absolute;
   bottom: 40px;
   left: 15px;
   right: 15px;
   height: 225px;
   z-index: 1;
   opacity: 0.9;
   transition: all 500ms ease;
   display: block;
   visibility: visible;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.products__box li .products__image {
   opacity: 1;
}

.products__box li.active .products__image {
   opacity: 1;
}

.products__image img {
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   border-radius: 8px;
   display: block;
   margin: auto;
}

.products__icon {
   position: relative;
   display: block;
}

.products__icon a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   font-size: 22px;
   color: var(--itzone-base);
   z-index: 1;
}

.products__icon a:hover {
   color: var(--itzone-white);
}

.products__icon a::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--itzone-white);
   border-radius: 50%;
   z-index: -1;
}

.products__icon a::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
   background-color: var(--itzone-base);
   border-radius: 50%;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   z-index: -1;
}

.products__icon a:hover::after {
   opacity: 1;
}

.products__title-box {
   position: relative;
   display: block;
   flex: 1;
}

.products__title-2 {
   font-size: 30px;
   font-weight: 700;
   line-height: 38px;
   margin-bottom: 8px;
}

.products__title-2 a {
   color: var(--itzone-white);
}

.products__title-2 a:hover {
   color: var(--itzone-base);
}

.products__text {
   color: var(--itzone-white);
}

.products__carousel.owl-carousel .owl-dots {
   position: relative;
   text-align: center;
   margin: 30px auto 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
}

.products__carousel.owl-carousel .owl-dots .owl-dot {
   position: relative;
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin: 0px 5px;
   padding: 0px;
   background-color: var(--owl-dots-default-color);
   transition: all 100ms linear;
   transition-delay: 0.1s;
   z-index: 1;
}

.products__carousel.owl-carousel .owl-dots .owl-dot::after {
   content: "";
   position: absolute;
   top: 3px;
   left: 3px;
   right: 3px;
   bottom: 3px;
   background-color: var(--itzone-base);
   border-radius: 50%;
   transform: scaleX(0);
   transition: all 200ms linear;
   transition-delay: 0.1s;
   z-index: -1;
}

.products__carousel.owl-carousel .owl-dot.active::after {
   transform: scaleX(1.0);
   background-color: var(--owl-dots-active-color);
}

.products__carousel.owl-carousel .owl-dot:focus {
   outline: none;
}

/* 移除:focus的::after效果，避免出现两个焦点状态 */
.products__carousel.owl-carousel .owl-dot:focus::after {
   /* 不设置transform，避免出现两个焦点状态 */
}

/* 移除点击状态的样式，避免出现两个焦点状态 */
.products__carousel.owl-carousel .owl-dots .owl-dot:active,
.products__carousel.owl-carousel .owl-dots .owl-dot.clicked {
   /* 不设置背景色，避免出现两个焦点状态 */
}

.products__carousel.owl-carousel .owl-dots .owl-dot:active::after,
.products__carousel.owl-carousel .owl-dots .owl-dot.clicked::after {
   /* 不设置transform，避免出现两个焦点状态 */
}

.products__carousel.owl-carousel .owl-dots .owl-dot span {
   display: none;
}

/* 动画 */
.owl-carousel,
.owl-carousel .owl-item {
   -webkit-tap-highlight-color: transparent;
   position: relative
}

.owl-carousel {
   display: none;
   width: 100%;
   z-index: 1
}

/* 确保产品轮播容器在页面加载时就可见 */
.products__carousel-container {
   visibility: visible !important;
   display: block !important;
}

/* 确保产品轮播在初始化时就可见 */
.products__carousel {
   visibility: visible !important;
   display: block !important;
}

/* 确保所有轮播项在初始化时就可见 */
.products__carousel .owl-item {
   visibility: visible !important;
   display: block !important;
}

/* 确保产品列表项在初始化时就可见 */
.products__carousel .owl-item .products__box li {
   visibility: visible !important;
   display: block !important;
}

/* 确保产品轮播初始化时第一页可见 */
.products__carousel .owl-item.active .products__box li {
   visibility: visible !important;
   display: block !important;
}

/* 覆盖Owl Carousel的默认隐藏行为 */
.owl-carousel {
   display: block !important;
   visibility: visible !important;
}

.owl-carousel .owl-item {
   display: block !important;
   visibility: visible !important;
}

.owl-carousel .owl-stage {
   position: relative;
   -ms-touch-action: pan-Y;
   touch-action: manipulation;
   -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0
}

.owl-carousel .owl-stage-outer {
   position: relative;
   overflow: hidden;
   -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
   min-height: 1px;
   float: left;
   -webkit-backface-visibility: hidden;
   -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
   display: block;
   width: 100%
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
   display: none
}

.no-js .owl-carousel,
.owl-carousel.owl-loaded {
   display: block
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
   cursor: pointer;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
   background: 0 0;
   color: inherit;
   border: none;
   padding: 0 !important;
   font: inherit
}

.owl-carousel.owl-loading {
   opacity: 0;
   display: block
}

.owl-carousel.owl-hidden {
   opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
   visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.owl-carousel.owl-grab {
   cursor: move;
   cursor: grab
}

.owl-carousel .animated {
   animation-duration: 1s;
   animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
   z-index: 0
}

.owl-carousel .owl-animated-out {
   z-index: 1
}

.owl-carousel .fadeOut {
   animation-name: fadeOut
}

@keyframes fadeOut {
   0% {
      opacity: 1
   }

   100% {
      opacity: 0
   }
}

.sec-title__text {
   font-size: 16px;
   line-height: 1.875;
   color: var(--cilox-text, #797b81);
   margin-bottom: 0;
}

.section-space {
   padding-top: 60px;
   padding-bottom: 60px;
}

/* Customize Section Styles */
.customize-up {
   overflow: hidden;
   position: relative;
   text-align: center;
   margin-left: 0;
   margin-right: 0;
}

.customize-down>div {
   position: relative;
   text-align: center;
}

/* 行和列布局 - 消除间距 */
.customize-up .row {
   margin-left: 0;
   margin-right: 0;
}

.customize-up .col-12.col-lg-4,
.customize-up .col-md-4.col-lg-4,
.customize-up .col-12.col-lg-8,
.customize-up .col-md-8.col-lg-8 {
   padding-left: 0;
   padding-right: 0;
}

/* 文字内容样式 */
.customize-up h3 {
   color: var(--gt-header);
   font-weight: 700;
   margin-bottom: 20px;
   font-size: 28px;
   position: relative;
   padding-bottom: 10px;
}

.customize-up h3::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 50px;
   height: 2px;
   background: var(--gradient-1);
}

.customize-up p {
   font-size: 18px;
   color: var(--gt-text);
   margin-bottom: 0;
}

.customize-up p b {
   color: var(--gt-theme);
   font-size: 28px;
   font-weight: 700;
}

.customize-down h4 {
   color: var(--gt-header);
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 28px;
   position: relative;
   padding-bottom: 10px;
}

.customize-down h4::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 2px;
   background: var(--gradient-1);
}

.customize-down p {
   font-size: 16px;
   color: var(--gt-text);
   padding-bottom: 20px;
}

.customize-down p b,
.customize-down p i {
   color: var(--gt-theme);
   font-size: 28px;
   font-weight: 700;
   font-style: normal;
}

/* 布局和容器样式 */
.customize-up .col-lg-4,
.customize-up .col-lg-8,
.customize-down .col-lg-5,
.customize-down .col-lg-7 {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.customize-up .d-flex,
.customize-down .d-flex {
   background-color: var(--gt-bg);
}

/* 图片样式 */
.customize-up .img-fluid,
.customize-down .img-fluid {
   width: 100%;
   height: 340px;
   max-width: 100%;
   object-fit: cover;
}

/* 图片容器和悬停效果 */
.customize-up .image-container,
.customize-down .image-container {
   position: relative;
   overflow: hidden;
   display: block;
   width: 100%;
   background-color: var(--gt-bg);
}

.customize-up .image-container img,
.customize-down .image-container img {
   width: 100%;
   display: block;
   object-fit: cover;
   transition: all 500ms ease;
}

.customize-up .image-container:hover img,
.customize-down .image-container:hover img {
   transform: scale(1.05);
}

.image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.15);
   transform: translateY(-100%);
   transition: transform 0.5s ease;
}

.customize-up .image-container:hover .image-overlay,
.customize-down .image-container:hover .image-overlay {
   transform: translateY(0);
}

/* 动画效果 */
.image-container.slide-in-right img {
   transform-origin: right center;
   transform: scaleX(1);
   transition: transform 1.5s ease-out;
}

.image-container.slide-in-right.wow img {
   transform: scaleX(0);
}

.image-container.slide-in-right.wow.animated img {
   transform: scaleX(1);
}

.image-container.slide-in-left img {
   transform-origin: left center;
   transform: scaleX(1);
   transition: transform 1.5s ease-out;
}

.image-container.slide-in-left.wow img {
   transform: scaleX(0);
}

.image-container.slide-in-left.wow.animated img {
   transform: scaleX(1);
}

.image-container.slide-in-up img {
   transform-origin: bottom center;
   transform: scaleY(1);
   transition: transform 1.5s ease-out;
}

.image-container.slide-in-up.wow img {
   transform: scaleY(0);
}

.image-container.slide-in-up.wow.animated img {
   transform: scaleY(1);
}

/* factory */

.factory-top,
.factory-bottom-left,
.factory-bottom-right {
   position: relative;
   overflow: hidden;
}

.factory-top .image-container,
.factory-bottom-left .image-container,
.factory-bottom-right .image-container {
   position: relative;
   overflow: hidden;
   display: block;
   width: 100%;
   background-color: var(--gt-bg);
}

.factory-top img,
.factory-bottom-left img,
.factory-bottom-right img {
   width: 100%;
   height: auto;
   display: block;
}

.factory-top .image-container.slide-in-up img {
   transform-origin: bottom center;
   transform: scaleY(1);
   transition: transform 1.5s ease-out;
}

.factory-bottom-left .image-container.slide-in-left img {
   transform-origin: left center;
   transform: scaleX(1);
   transition: transform 1.5s ease-out;
}

.factory-bottom-right .image-container.slide-in-right img {
   transform-origin: right center;
   transform: scaleX(1);
   transition: transform 1.5s ease-out;
}

.factory-top .image-overlay,
.factory-bottom-left .image-overlay,
.factory-bottom-right .image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.15);
   transform: translateY(-100%);
   transition: transform 0.5s ease;
}

.factory-top:hover .image-overlay,
.factory-bottom-left:hover .image-overlay,
.factory-bottom-right:hover .image-overlay {
   transform: translateY(0);
}

/* 工厂部分图片hover放大效果 */
.factory-top:hover img,
.factory-bottom-left:hover img,
.factory-bottom-right:hover img {
   transform: scale(1.05, 1.05) !important;
}

/* 上部分图片动画 - 从下往上展开 */
.factory-top.wow img {
   transform: scaleY(0);
}

.factory-top.wow.animated img {
   transform: scaleY(1);
}

/* 左下图片动画 - 从左侧展开 */
.factory-bottom-left.wow img {
   transform: scaleX(0);
}

.factory-bottom-left.wow.animated img {
   transform: scaleX(1);
}

/* 右下图片动画 - 从右侧展开 */
.factory-bottom-right.wow img {
   transform: scaleX(0);
}

.factory-bottom-right.wow.animated img {
   transform: scaleX(1);
}

/* 定义动画关键帧 */
@keyframes zoomInCenter {
   0% {
      transform: scale(0.8);
      opacity: 0;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

@keyframes slideInFromLeft {
   0% {
      transform: translateX(-100%);
      opacity: 0;
   }

   100% {
      transform: translateX(0);
      opacity: 1;
   }
}

@keyframes slideInFromRight {
   0% {
      transform: translateX(100%);
      opacity: 0;
   }

   100% {
      transform: translateX(0);
      opacity: 1;
   }
}

/* 确保上部分图片高度合适 */
.factory-top img {
   height: 400px;
   object-fit: cover;
}

/* 确保下部分两张图片高度一致 */
.factory-bottom-left img,
.factory-bottom-right img {
   height: 450px;
   object-fit: cover;
}

/* sales_network */

.sales-network-image img {
   width: 100%;
   height: auto;
   display: block;
}

/* certification */

.section-padding .swiper {
   width: 100%;
   padding-top: 30px;
   padding-bottom: 70px;
   position: relative;
}

.section-padding .swiper-slide {
   width: 380px;
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
   filter: blur(0px);
   /* 移除模糊效果，使所有图片都清晰 */
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   background: linear-gradient(to top, #0f2027, #203a4300, #2c536400);
}

.section-padding .swiper-slide img {
   width: 100%;
   height: auto;
   object-fit: contain;
}

.section-padding .swiper-slide-active {
   /* 移除特殊样式，因为所有图片现在都是清晰的 */
}

.section-padding .swiper-pagination {
   bottom: 0;
}

.section-padding .swiper-pagination-bullet {
   background: var(--gt-text);
}

.section-padding .swiper-pagination-bullet-active {
   background: var(--gt-theme);
}

.section-padding .swiper-3d .swiper-slide-shadow-left,
.section-padding .swiper-3d .swiper-slide-shadow-right {
   background-image: none;
}

/* 移动端响应式布局 */
@media (max-width: 1440px) {
   .swiper-thumbs {
      display: none;
   }

   .main-slider .swiper-slide .content .title {
      font-size: 2.6em;
   }

   .main-slider .swiper-slide .content {
      position: absolute;
      top: 0;
   }
}

@media (max-width: 991px) {
   .home_slider .swiper-slide .content {
      padding: 5px 15px;
   }

   .home_slider .swiper-slide .content .caption {
      display: block;
      font-size: 14px;
      color: #fff;
      line-height: 1.4;
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
      opacity: 0;
      transition: opacity .3s ease, -webkit-transform .7s ease;
      transition: opacity .3s ease, transform .7s ease;
      transition: opacity .3s ease, transform .7s ease, -webkit-transform .7s ease;
      text-shadow: 0 2px 1px rgba(255, 110, 0);
   }

   .home_slider .swiper-slide .content .caption.show {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
   }

   .swiper-container.nav-slider {
      display: none;
   }

   .header_banner .swiper-container {
      max-height: 100%;
   }

   .home_slider .swiper-slide .btn_b2 a.btn.main-btn {
      padding: 7px 11px !important;
      width: 100px;
      font-size: 14px;
   }

   nav.navbar.navbar-expand-sm {
      background-color: #ffffff;
      position: static;
   }

   .header_banner_page header,
   .hd-bnar,
   .header_banner_page header {
      min-height: 240px;
      position: inherit;
   }

   .home_slider .swiper-slide .content .title {
      font-size: 1.6em !important;
      margin-bottom: 15px !important;
   }

   .home_slider .custom-swiper-button {
      margin-top: -76px !important;
   }

   .project-one {
      padding: 30px 0 !important;
   }

   .section-title {
      font-size: 24px !important;
   }

   .section-description {
      font-size: 15px !important;
   }

   .home_slider .swiper-slide .content .title {
      font-size: 28px !important;
      margin-bottom: 20px !important;
   }

   .home_slider .swiper-slide .content .caption {
      font-size: 12px !important;
      text-shadow: 0 2px 1px rgba(255, 110, 0);
   }

   .sub-title {
      font-size: 20px !important;
   }

   .sub-title-tit {
      font-size: 15px !important;
   }

   .customize-up .flex-column {
      padding-top: 20px !important;
   }

   .customize-up .col-12.col-lg-4,
   .customize-up .col-12.col-lg-4 {
      padding: 0 15px;
   }

   .customize-up h3,
   .customize-down h4 {
      text-align: center;
   }

   .customize-up h3::after,
   .customize-down h4::after {
      left: 50%;
      transform: translateX(-50%);
   }

   .customize-up p,
   .customize-down p {
      text-align: center;
      padding-bottom: 15px;
   }
}

@media(min-width: 768px) {

   .products__box li {
      flex: 1;
      margin-bottom: 10px;
      overflow: hidden;
      list-style: none;
   }

   .products__box li.active {
      flex: 1.90;
   }

   .products__box li.active .products__box-content .img-holder-img-bg {
      opacity: 0.80;
      -webkit-transform: perspective(630px) rotateX(0deg);
      -ms-transform: perspective(630px) rotateX(0deg);
      transform: perspective(630px) rotateX(0deg);
   }

   .products__box li.active .products__box-content .products__box-content-inner {
      opacity: 1;
      transform: perspective(630px) rotateY(0deg) translateY(0px);
      transition-delay: 500ms;
   }

}

@media (max-width: 767px) {

   .main-slider .swiper-slide .content .caption {
      margin-top: 10px !important;
      text-shadow: 0 2px 1px rgba(255, 110, 0);
   }

   .section-title {
      font-size: 20px !important;
   }

   .section-description {
      font-size: 14px !important;
   }

   .home_slider .swiper-slide .content .title {
      font-size: 20px !important;
      margin-bottom: 15px !important;
      background-position: 0 100%;
      background-size: 100% 1px;
   }

   .home_slider .swiper-slide .content .caption {
      font-size: 12px !important;
      text-shadow: 0 2px 1px rgba(255, 110, 0);
   }

   .home_slider .swiper-button-prev,
   .home_slider .swiper-button-next {
      display: none !important;
   }

   .products__box li {
      flex: 0 0 100%;
      margin-bottom: 10px;
      overflow: hidden;
      list-style: none;
   }

   .products__box li.active {
      flex: 0 0 100%;
   }

   .products__box-content {
      min-height: 340px;
   }

   .products__title-2 {
      font-size: 25px;
      line-height: 35px;
   }

   .factory-top .image-container img,
   .factory-bottom-left .image-container img,
   .factory-bottom-right .image-container img,
   .customize-up .image-container img,
   .customize-down .image-container img {
      height: auto;
      object-fit: contain;
   }

   .customize-up .img-fluid,
   .customize-down .img-fluid {
      height: auto;
      object-fit: contain;
   }

   .customize-up .col-12.col-lg-8 {
      padding-left: 15px;
      padding-right: 15px;
   }

   .customize-up p b,
   .customize-down p b {
      font-size: 20px;
   }

}

@media (max-width: 575px) {

   .section-title {
      font-size: 20px !important;
   }

   .section-description {
      font-size: 14px !important;
   }

   .home_slider .swiper-slide .content .title {
      font-size: 20px !important;
      margin-bottom: 10px !important;
   }

   .home_slider .swiper-slide .content .caption {
      font-size: 12px !important;
      text-shadow: 0 2px 1px rgba(255, 110, 0);
   }

   .home_slider .swiper-slide .btn_b2 a.btn.main-btn {
      display: none;
   }

   /* 隐藏移动端的Swiper导航按钮 */
   .home_slider .swiper-button-prev,
   .home_slider .swiper-button-next {
      display: none !important;
   }

   /* 确保自定义箭头在移动端也隐藏 */
   .home_slider .custom-swiper-button {
      display: none !important;
   }

   /* 确保自定义箭头在移动端也隐藏 */
   .home_slider .custom-swiper-button {
      display: none !important;
   }
}