/* ==========================================================================
   防闪动
   只隐藏 tab-menu-dak 本身，不再隐藏整个父级 Col
   ========================================================================== */

.tab-menu-dak {
    opacity: 0;
    visibility: hidden;
}

/*
 * JS 成功转换后显示。
 * JS 若找不到可转换结构，也会自动加 ready，
 * 从而显示原始内容，不会出现整块空白。
 */
.tab-menu-dak.dak-resin-ready {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   转换后的布局
   ========================================================================== */

.tab-menu-dak.dak-resin-selector {
    display: grid !important;
    grid-template-columns:
        minmax(190px, 42%)
        minmax(0, 58%);

    column-gap: 34px;

    width: 100% !important;

    margin: 20px 0 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   左侧分类
   ========================================================================== */

.dak-resin-nav {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.dak-resin-nav-item {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 9px 20px 9px 0;

    color: #222;
    background: transparent;

    border: 0;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;

    text-align: left;

    cursor: pointer;

    transition: color .2s ease;
}


.dak-resin-nav-item:hover,
.dak-resin-nav-item.active {
    color: var(--primary-color);
}


/* 当前分类右侧箭头 */
.dak-resin-nav-item.active::after {
    content: "\ea6e";

    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    color: var(--primary-color);

    font-family: "remixicon";
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}


/* ==========================================================================
   右侧产品
   ========================================================================== */

.dak-resin-content {
    position: relative;

    min-width: 0;

    padding-top: 7px;
}


.dak-resin-panel {
    display: none;
}


.dak-resin-panel.active {
    display: block;

    animation: dakResinPanelIn .18s ease;
}


/* ==========================================================================
   UX Menu
   ========================================================================== */

.dak-resin-panel .ux-menu,
.dak-resin-panel .ux-menu-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}


.dak-resin-panel .ux-menu-link {
    border: 0 !important;
}


.dak-resin-panel .ux-menu-link__link,
.dak-resin-panel .ux-menu a,
.dak-resin-panel .menu a {
    display: inline-flex;

    align-items: center;

    width: auto;

    margin: 0 0 7px;
    padding: 2px 0 !important;

    color: #666;

    border: 0 !important;
    background: transparent !important;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.dak-resin-panel .ux-menu-link__link:hover,
.dak-resin-panel .ux-menu a:hover,
.dak-resin-panel .menu a:hover {
    color: var(--primary-color);

    transform: translateX(3px);
}


/* ==========================================================================
   大列视觉
   ========================================================================== */

.row > .col:has(.tab-menu-dak) > .col-inner {
    height: 100%;

    padding: 8px 22px 20px;
}


.row > .col:has(.tab-menu-dak) h2 {
    margin-bottom: 4px;

    font-size: 22px;
    line-height: 1.25;
}


.row > .col:has(.tab-menu-dak) .b0 {
    margin-bottom: 0 !important;
}


.row > .col:has(.tab-menu-dak) .b0 p {
    margin-bottom: 0 !important;

    color: #999;

    font-size: 14px;
}


/* 两块之间只留空间，不加分割线 */
.row > .col:has(.tab-menu-dak):first-child {
    padding-right: 28px;
}


.row > .col:has(.tab-menu-dak):last-child {
    padding-left: 28px;
}


@keyframes dakResinPanelIn {

    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 849px) {

    .tab-menu-dak.dak-resin-selector {
        grid-template-columns:
            minmax(150px, 42%)
            minmax(0, 58%);

        column-gap: 20px;
    }


    .dak-resin-nav-item {
        padding: 8px 18px 8px 0;

        font-size: 14px;
    }


    .dak-resin-panel .ux-menu-link__link,
    .dak-resin-panel .ux-menu a,
    .dak-resin-panel .menu a {
        font-size: 14px;
    }


    .row > .col:has(.tab-menu-dak):first-child {
        padding-right: 15px;
    }


    .row > .col:has(.tab-menu-dak):last-child {
        padding-left: 15px;
    }
}


/* ==========================================================================
   手机
   两大类上下排列，每块内部仍保持左分类 / 右产品
   ========================================================================== */

@media (max-width: 549px) {

    .row > .col:has(.tab-menu-dak) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .row > .col:has(.tab-menu-dak) > .col-inner {
        padding: 15px 5px 25px;
    }


    .row > .col:has(.tab-menu-dak) h2 {
        font-size: 19px;
    }


    .tab-menu-dak.dak-resin-selector {
        grid-template-columns:
            minmax(125px, 43%)
            minmax(0, 57%);

        column-gap: 14px;

        margin-top: 14px !important;
    }


    .dak-resin-nav-item {
        padding: 7px 16px 7px 0;

        font-size: 12px;
        line-height: 1.3;
    }


    .dak-resin-nav-item.active::after {
        font-size: 15px;
    }


    .dak-resin-content {
        padding-top: 4px;
    }


    .dak-resin-panel .ux-menu-link__link,
    .dak-resin-panel .ux-menu a,
    .dak-resin-panel .menu a {
        margin-bottom: 4px;

        font-size: 12px;
        line-height: 1.4;
    }
}



 /* ==========================================================================
   Accessories Vertical Tabs
   PC / 平板 / 手机均保持左右布局
   ========================================================================== */


/* ==========================================================================
   Tabs 整体
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   左侧导航
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;

    flex: 0 0 30% !important;

    width: 30% !important;
    max-width: 30% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: visible !important;

    list-style: none !important;
}


/* ==========================================================================
   每个导航项目
   自动平均分配高度
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav > li {
    display: flex !important;
    align-items: stretch !important;

    flex: 1 1 0 !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   导航链接
   默认无下划线
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 44px;

    margin: 0 !important;
    padding: 10px 16px !important;

    color: #666 !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 16px;
    font-weight: 400 !important;
    line-height: 1.35;

    text-align: left;
    text-transform: none;

    text-decoration: none !important;

    box-sizing: border-box;

    transition: color 0.2s ease !important;
}


/* ==========================================================================
   Active
   只有激活文字显示下划线
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav > li.active > a {
    color: var(--primary-color, #1683ff) !important;

    font-weight: 500 !important;

    background: transparent !important;
    box-shadow: none !important;

    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color:
        var(--primary-color, #1683ff) !important;

    text-underline-offset: 4px !important;
}


/* ==========================================================================
   Hover
   只变颜色，不显示下划线
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav > li > a:hover {
    color: var(--primary-color, #1683ff) !important;

    background: transparent !important;

    text-decoration: none !important;
}


/* Active 在 Hover 状态下仍保留下划线 */

.Accessories-tabs .tabs-left-boder0 > .nav > li.active > a:hover {
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color:
        var(--primary-color, #1683ff) !important;

    text-underline-offset: 4px !important;
}


/* ==========================================================================
   清除 Flatsome 默认线条 / 伪元素
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .nav > li::before,
.Accessories-tabs .tabs-left-boder0 > .nav > li::after,
.Accessories-tabs .tabs-left-boder0 > .nav > li > a::before,
.Accessories-tabs .tabs-left-boder0 > .nav > li > a::after {
    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;

    background: transparent !important;

    opacity: 0 !important;
}


/* Flatsome line-bottom */

.Accessories-tabs .tabs-left-boder0.nav-line-bottom > li > a::before,
.Accessories-tabs .tabs-left-boder0 .nav-line-bottom > li > a::before,
.Accessories-tabs .tabs-left-boder0 .nav-line-bottom > li.active > a::before {
    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;
}


/* Active / Hover 不出现背景 */

.Accessories-tabs .tabs-left-boder0 > .nav > li.active,
.Accessories-tabs .tabs-left-boder0 > .nav > li:hover {
    background: transparent !important;
}


/* ==========================================================================
   右侧内容区域
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .tab-panels {
    display: block !important;

    flex: 1 1 auto !important;

    width: 70% !important;
    max-width: 70% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 30px !important;

    border: 0 !important;

    box-sizing: border-box;
}


/* ==========================================================================
   Panel
   ========================================================================== */

.Accessories-tabs .tabs-left-boder0 > .tab-panels > .panel {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* 内部 Row */

.Accessories-tabs .tabs-left-boder0 .tab-panels .row,
.Accessories-tabs .tabs-left-boder0 .tab-panels .row-inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


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

@media (max-width: 849px) {

    .Accessories-tabs .tabs-left-boder0 {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }


    .Accessories-tabs .tabs-left-boder0 > .nav {
        flex: 0 0 32% !important;

        width: 32% !important;
        max-width: 32% !important;
    }


    .Accessories-tabs .tabs-left-boder0 > .nav > li {
        flex: 1 1 0 !important;
    }


    .Accessories-tabs .tabs-left-boder0 > .nav > li > a {
        padding: 9px 12px !important;

        font-size: 13px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
    }


    .Accessories-tabs .tabs-left-boder0 > .tab-panels {
        flex: 1 1 68% !important;

        width: 68% !important;
        max-width: 68% !important;

        padding-left: 20px !important;
    }
}


/* ==========================================================================
   手机
   继续保持左导航 + 右内容
   ========================================================================== */

@media (max-width: 549px) {

    .Accessories-tabs .tabs-left-boder0 {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;

        width: 100% !important;

        overflow: visible !important;
    }


    /* 左侧 */

    .Accessories-tabs .tabs-left-boder0 > .nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-self: stretch !important;

        flex: 0 0 36% !important;

        width: 36% !important;
        max-width: 36% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        overflow: visible !important;

        white-space: normal !important;
    }


    /* 平均分配高度 */

    .Accessories-tabs .tabs-left-boder0 > .nav > li {
        display: flex !important;
        align-items: stretch !important;

        flex: 1 1 0 !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;
    }


    /* 手机导航链接 */

    .Accessories-tabs .tabs-left-boder0 > .nav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 38px;

        margin: 0 !important;
        padding: 7px 8px !important;

        color: #666 !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        text-align: left !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;

        text-decoration: none !important;
    }


    /* 手机 Active */

    .Accessories-tabs .tabs-left-boder0 > .nav > li.active > a {
        color: var(--primary-color, #1683ff) !important;

        font-weight: 500 !important;

        background: transparent !important;

        text-decoration-line: underline !important;
        text-decoration-thickness: 1px !important;
        text-decoration-color:
            var(--primary-color, #1683ff) !important;

        text-underline-offset: 3px !important;
    }


    /* 手机 Hover */

    .Accessories-tabs .tabs-left-boder0 > .nav > li > a:hover {
        color: var(--primary-color, #1683ff) !important;

        background: transparent !important;

        text-decoration: none !important;
    }


    .Accessories-tabs .tabs-left-boder0 > .nav > li.active > a:hover {
        text-decoration-line: underline !important;
        text-decoration-thickness: 1px !important;
        text-decoration-color:
            var(--primary-color, #1683ff) !important;

        text-underline-offset: 3px !important;
    }


    /* 右侧 */

    .Accessories-tabs .tabs-left-boder0 > .tab-panels {
        display: block !important;

        flex: 1 1 64% !important;

        width: 64% !important;
        max-width: 64% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 12px !important;

        border: 0 !important;

        overflow: visible !important;
    }
}

/* ================= 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;
}



/*证书*/

/* ==================== 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;
}