@media screen and (min-width: 768px) {
    .indexSvg_bottom .swiper-slide .indexSvgSwiper2Box {
        text-align: center;
        flex-direction: row;
        gap: 20px;
      
    }

    .indexSvg_all .indexSvg_top .swiper-slide {
        overflow: hidden;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eee;
        height: 8.3vw;
        width: 18.75vw
    }

    .indexSvg_all .indexSvg_top .swiper-slide svg {
        max-width: 15.625vw;
        max-height: 5.2vw;
        display: block
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active {
        height: 10.4vw;
        background-color: var(--niu-red);
        width: 22.91vw
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active svg {
        transform: scale(1.2)
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active svg * {
        fill: #fff !important
    }

    .indexSvg_all .control-box {
        display: flex;
        margin: 0 auto;
        margin-top: 60px;
        max-width: 579px;
        align-items: center;
        gap: 30px;
        z-index: 3;
        position: relative
    }

    .indexSvg_all .control-box .swiper-pagination {
        position: inherit;
        background-color: #e1e1e1
    }

    .indexSvg_all .control-box .swiper-pagination .swiper-pagination-progressbar-fill {
        background-color: var(--niu-red)
    }

    .indexSvg_all .control-box .swiper-button-next,
    .indexSvg_all .control-box .swiper-button-prev {
        position: relative;
        flex-shrink: 0;
        margin: 0;
        background-color: #fff;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, .078);
        border: 1px solid #f4f4f4;
        color: #333 !important
    }

    .indexSvg_all .control-box .swiper-button-next svg,
    .indexSvg_all .control-box .swiper-button-prev svg {
        transition: all .2s
    }

    .indexSvg_all .control-box .swiper-button-next svg *,
    .indexSvg_all .control-box .swiper-button-prev svg * {
        fill: #333
    }

    .indexSvg_all .control-box .swiper-button-next::after,
    .indexSvg_all .control-box .swiper-button-prev::after {
        display: none;
        color: #333
    }

    .indexSvg_all .control-box .swiper-button-next .hides,
    .indexSvg_all .control-box .swiper-button-prev .hides {
        transition: all .5s;
        display: block;
        opacity: 0;
        width: 20px;
        height: 20px;
        transform: translateX(-100%);
        position: absolute
    }

    .indexSvg_all .control-box .swiper-button-next .hides *,
    .indexSvg_all .control-box .swiper-button-prev .hides * {
        fill: #fff
    }

    .indexSvg_all .control-box .swiper-button-next:hover,
    .indexSvg_all .control-box .swiper-button-prev:hover {
        background-color: var(--niu-red)
    }

    .indexSvg_all .control-box .swiper-button-next:hover .hides,
    .indexSvg_all .control-box .swiper-button-prev:hover .hides {
        opacity: 1 !important;
        transform: translateX(0%) !important
    }

    .indexSvg_all .control-box .swiper-button-next:hover svg,
    .indexSvg_all .control-box .swiper-button-prev:hover svg {
        opacity: 0
    }

    .indexSvg_all .control-box .swiper-button-prev {
        position: inherit;
        flex-shrink: 0;
        margin: 0
    }

    .indexSvg_all .control-box .swiper-button-prev .hides {
        transform: translateX(100%)
    }
}

@media screen and (max-width: 768px) {
    .indexSvg_bottom .swiper-slide .indexSvgSwiper2Box {
        flex-direction: row;
        text-align: center;
        gap: 20px
    }

    .indexSvgSwiper2Box_svgLeft {
        text-align: center
    }

    .indexSvg_all {
        padding-bottom: 60px
    }

    .indexSvg_all .indexSvg_top .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eee;
        padding: 26.36px 0
    }

    .indexSvg_all .indexSvg_top .swiper-slide svg {
        max-width: 140px;
        max-height: 40px;
        display: block
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active {
        padding: 33.75px 0;
        background-color: var(--niu-red);
        height: 100px
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active svg {
        max-width: 180px;
        max-height: 60px
    }

    .indexSvg_all .indexSvg_top .swiper-slide-active svg * {
        fill: #fff !important
    }

    .indexSvg_all .control-box {
        display: flex;
        margin: 0 auto;
        z-index: 3;
        margin-top: 60px;
        width: 100%;
        align-items: center;
        gap: 30px
    }

    .indexSvg_all .control-box .swiper-pagination {
        position: inherit;
        background-color: #e1e1e1
    }

    .indexSvg_all .control-box .swiper-pagination .swiper-pagination-progressbar-fill {
        background-color: var(--niu-red)
    }

    .indexSvg_all .control-box .swiper-button-next,
    .indexSvg_all .control-box .swiper-button-prev {
        position: inherit;
        flex-shrink: 0;
        margin: 0;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, .078);
        color: #333 !important;
        border: 1px solid #f4f4f4
    }

    .indexSvg_all .control-box .swiper-button-next svg *,
    .indexSvg_all .control-box .swiper-button-prev svg * {
        fill: #333 !important
    }

    .indexSvg_all .control-box .swiper-button-next::after,
    .indexSvg_all .control-box .swiper-button-prev::after {
        display: none;
        color: #333;
        font-size: 22px
    }

    .indexSvg_all .control-box .swiper-button-prev {
        position: inherit;
        flex-shrink: 0;
        margin: 0
    }
}

/*# sourceMappingURL=index-icon.min.css.map */