/* ==========================================================================
   Capabilities - 图片文字叠加
   ========================================================================== */

.capabilities .item > .col-inner {
    position: relative;
    overflow: hidden;
}


/* ==========================================================================
   图片
   ========================================================================== */

.capabilities .item > .col-inner > .img {
    position: relative;
    z-index: 1;

    width: 100%;
    margin: 0 !important;
}

.capabilities .item > .col-inner > .img img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.capabilities .item:hover > .col-inner > .img img {
    transform: scale(1.025);
}


/* ==========================================================================
   蓝色渐变层
   左侧蓝色 → 右侧透明
   ========================================================================== */

.capabilities .item > .col-inner::after {
    content: "";

    position: absolute;
    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    height: 30%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(12, 105, 203, 0.92) 0%,
            rgba(12, 105, 203, 0.76) 28%,
            rgba(12, 105, 203, 0.42) 55%,
            rgba(12, 105, 203, 0.10) 78%,
            rgba(12, 105, 203, 0) 100%
        );
}


/* ==========================================================================
   UX Text 叠加到图片上
   ========================================================================== */

.capabilities .item > .col-inner > .text,
.capabilities .item > .col-inner > .ux-text {
    position: absolute !important;
    z-index: 3;

    right: 0;
    bottom: 0;
    left: 0;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 24px !important;

    color: #fff;

    pointer-events: none;
}


/* ==========================================================================
   Text Inner
   ========================================================================== */

.capabilities .item .text-inner {
    position: relative;

    display: inline-block;

    width: auto;
    max-width: 88%;

    margin: 0;
    padding: 0;
}


/* ==========================================================================
   标题
   ========================================================================== */

.capabilities .item .text h1,
.capabilities .item .text h2,
.capabilities .item .text h3,
.capabilities .item .text h4,
.capabilities .item .text h5,
.capabilities .item .text h6,
.capabilities .item .ux-text h1,
.capabilities .item .ux-text h2,
.capabilities .item .ux-text h3,
.capabilities .item .ux-text h4,
.capabilities .item .ux-text h5,
.capabilities .item .ux-text h6 {
    position: relative;

    display: inline-block;

    margin: 0 !important;
    padding: 0 26px 0 0;

    color: #fff !important;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   标题右上角直角括号
   ========================================================================== */

.capabilities .item .text h1::after,
.capabilities .item .text h2::after,
.capabilities .item .text h3::after,
.capabilities .item .text h4::after,
.capabilities .item .text h5::after,
.capabilities .item .text h6::after,
.capabilities .item .ux-text h1::after,
.capabilities .item .ux-text h2::after,
.capabilities .item .ux-text h3::after,
.capabilities .item .ux-text h4::after,
.capabilities .item .ux-text h5::after,
.capabilities .item .ux-text h6::after {
    content: "";

    position: absolute;

    top: -6px;
    right: 0;

    width: 17px;
    height: 17px;

    border-top: 3px solid #fff;
    border-right: 3px solid #fff;

    pointer-events: none;
}


/* ==========================================================================
   隐藏标题下面的说明文字
   ========================================================================== */

.capabilities .item .text p,
.capabilities .item .ux-text p {
    display: none !important;
}


/* ==========================================================================
   去掉 UX Text 默认多余边距
   ========================================================================== */

.capabilities .item .text-inner > *:first-child {
    margin-top: 0 !important;
}

.capabilities .item .text-inner > *:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   平板
   ========================================================================== */

@media (max-width: 849px) {

    .capabilities .item > .col-inner::after {
        height: 32%;
    }

    .capabilities .item > .col-inner > .text,
    .capabilities .item > .col-inner > .ux-text {
        padding: 15px 18px !important;
    }

    .capabilities .item .text-inner {
        max-width: 90%;
    }

    .capabilities .item .text h1,
    .capabilities .item .text h2,
    .capabilities .item .text h3,
    .capabilities .item .text h4,
    .capabilities .item .text h5,
    .capabilities .item .text h6,
    .capabilities .item .ux-text h1,
    .capabilities .item .ux-text h2,
    .capabilities .item .ux-text h3,
    .capabilities .item .ux-text h4,
    .capabilities .item .ux-text h5,
    .capabilities .item .ux-text h6 {
        padding-right: 22px;

        font-size: 18px;
    }

    .capabilities .item .text h1::after,
    .capabilities .item .text h2::after,
    .capabilities .item .text h3::after,
    .capabilities .item .text h4::after,
    .capabilities .item .text h5::after,
    .capabilities .item .text h6::after,
    .capabilities .item .ux-text h1::after,
    .capabilities .item .ux-text h2::after,
    .capabilities .item .ux-text h3::after,
    .capabilities .item .ux-text h4::after,
    .capabilities .item .ux-text h5::after,
    .capabilities .item .ux-text h6::after {
        top: -5px;

        width: 14px;
        height: 14px;

        border-top-width: 3px;
        border-right-width: 3px;
    }
}


/* ==========================================================================
   手机
   ========================================================================== */

@media (max-width: 549px) {

    .capabilities .item > .col-inner::after {
        height: 53%;

        background:
            linear-gradient(
                90deg,
                rgba(12, 105, 203, 0.94) 0%,
                rgba(12, 105, 203, 0.72) 40%,
                rgba(12, 105, 203, 0.24) 72%,
                rgba(12, 105, 203, 0) 100%
            );
    }

    .capabilities .item > .col-inner > .text,
    .capabilities .item > .col-inner > .ux-text {
        padding: 11px 12px !important;
    }

    .capabilities .item .text-inner {
        max-width: 94%;
    }

    .capabilities .item .text h1,
    .capabilities .item .text h2,
    .capabilities .item .text h3,
    .capabilities .item .text h4,
    .capabilities .item .text h5,
    .capabilities .item .text h6,
    .capabilities .item .ux-text h1,
    .capabilities .item .ux-text h2,
    .capabilities .item .ux-text h3,
    .capabilities .item .ux-text h4,
    .capabilities .item .ux-text h5,
    .capabilities .item .ux-text h6 {
        padding-right: 17px;

        font-size: 14px;
        line-height: 1.2;
    }

    .capabilities .item .text h1::after,
    .capabilities .item .text h2::after,
    .capabilities .item .text h3::after,
    .capabilities .item .text h4::after,
    .capabilities .item .text h5::after,
    .capabilities .item .text h6::after,
    .capabilities .item .ux-text h1::after,
    .capabilities .item .ux-text h2::after,
    .capabilities .item .ux-text h3::after,
    .capabilities .item .ux-text h4::after,
    .capabilities .item .ux-text h5::after,
    .capabilities .item .ux-text h6::after {
        top: -4px;

        width: 10px;
        height: 10px;

        border-top-width: 2px;
        border-right-width: 2px;
    }
}

/* ================= logo无缝滚动================ */
.slider-logo-l,
.slider-logo-r {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}

.slider-logo-l .swiper-wrapper,
.slider-logo-r .swiper-wrapper {
  transition-timing-function: linear !important;
}

.slider-logo-l .swiper-slide,
.slider-logo-r .swiper-slide {
  width: 200px !important;
  margin: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}

@media (max-width: 549px) {
.slider-logo-l .swiper-slide,
.slider-logo-r .swiper-slide {
  width: 60px !important;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}
}

.slider-logo-l img,
.slider-logo-r img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.slider-logo-l .ux-logo {
    text-align: center !important;
}
.slider-logo-r .ux-logo {
    text-align: center !important;
}
/* ================= 方向差异 ================= */
.slider-logo-l {
  direction: ltr; /* 向左滚（正常方向） */
}

.slider-logo-r {
  direction: rtl; /* 向右滚 */
}

.slider-logo-r .swiper-slide {
  direction: ltr; /* 修正内容方向 */
}


/* ================= Logo 无缝滚动（独立命名空间） ================ */

.auto-logo-slider-outer {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
}

.auto-logo-slider-container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.auto-logo-slider-wrapper {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

.auto-logo-slider-item {
  width: 300px !important;
  margin: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}

@media only screen and (max-width: 48em) {
    .auto-logo-slider-item {
          width: 120px !important;
          margin: 0 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          text-align: center;
    }

}
.auto-logo-slider-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.auto-logo-slider-item .ux-logo {
  text-align: center !important;
  width: 100%;
}

/* ================= 方向差异 ================= */

.slider-img-l .auto-logo-slider-wrapper {
  flex-direction: row;
}

.slider-img-r .auto-logo-slider-wrapper {
  flex-direction: row;
}

/* ================= Hover 效果 ================= */

.auto-logo-slider-outer:hover {
  cursor: pointer;
}


.max-80-list .swiper-slide {
    width: 100px !important;
}

/*证书*/

/* ==================== list-3 轮播样式 ==================== */

.list-3 {
    position: relative;
    max-width: 100%; /* 限制最大宽度 */
    margin: 0 auto; /* 居中容器 */
    overflow: hidden; /* 隐藏超出部分 */
}

.list-3 .swiper-wrapper {
    display: flex;
    align-items: center;
    width: 100%; /* 确保wrapper宽度 */
}

.list-3 .swiper-slide {
    flex-shrink: 0; /* 防止幻灯片收缩 */
    width: calc(100% / 5); /* 每个幻灯片占1/5宽度 */
    scale: 1;
    transition: scale 250ms ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden; /* 防止模糊 */
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 优化性能 */
}

.list-3 .swiper-slide.swiper-slide-active {
    scale: 1.25; /* 轻微减少缩放，从1.5改为1.25 */
    z-index: 10;
}

.list-3 .swiper-slide.swiper-slide-prev,
.list-3 .swiper-slide.swiper-slide-next {
    scale: 1.15; /* 轻微减少缩放，从1.3改为1.15 */
    z-index: 5;
    transition-duration: 150ms;
}

.list-3 .swiper-slide.swiper-slide-next + .list-3 .swiper-slide {
    z-index: 2;
}

/* 独立的渐变遮罩类 */
.list-3-gradient-white {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-gradient-black {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

/* 独立的玻璃遮罩类 */
.list-3-glass-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-glass-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

/* 组合玻璃遮罩类 - 一个类同时显示左右遮罩 */
.list-3-glass {
    position: relative;
}

.list-3-glass::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-glass::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

/* 组合黑色遮罩类 - 一个类同时显示左右黑色遮罩 */
.list-3-dark {
    position: relative;
}

.list-3-dark::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-dark::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

/* 透明渐变遮罩类 - 适合位图，让边缘更自然 */
.list-3-fade {
    position: relative;
}

.list-3-fade::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

.list-3-fade::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

.list-3 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 改为 cover，确保填充整个容器 */
    user-select: none;
    image-rendering: -webkit-optimize-contrast; /* 提高清晰度 */
    image-rendering: crisp-edges;
    backface-visibility: hidden; /* 防止模糊 */
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 优化性能 */
}

/* 响应式高度调整 */
@media (max-width: 768px) {
    .list-3 {
        height: 200px; /* 手机端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 3); /* 手机端每个幻灯片占1/3宽度 */
    }
    .swiper-button{
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .list-3 {
        height: 400px; /* iPad端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 5); /* 平板端保持1/5宽度 */
    }
}

@media (min-width: 1025px) {
    .list-3 {
        height: 500px; /* 电脑端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 5); /* 桌面端保持1/5宽度 */
    }
}



.swiper-button-prev,
.swiper-button-next,
.swiper-button {
    --position: 17%;
    background: #000000b5;
    color: #fff !important;
    height: 3rem;
    width: 3rem;
    border-radius:50%;
 
}
.swiper-button-prev,
.swiper-button.swiper-button-prev {
    left: var(--position);
}
.swiper-button-prev::after,
.swiper-button-next::after,
.swiper-button::after{
    color: #FFF !important; 
    font-size: 12px !important;
}
.swiper-button-next,
.swiper-button.swiper-button-next {
    right: var(--position);
}
.swiper-button-prev:hover ,
.swiper-button-next:hover ,
.swiper-button:hover {
    background-color: #000000;
    color: #fff !important;
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after,
.swiper-button:hover::after{
    color: #fff !important;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #000;
}

.swiper-pagination {
    bottom: 0px !important;
}