@media screen and (max-width: 1366px) {
    .index-charging .container {
        margin: 0 auto;
        /* max-width: 1000px; */
    }

    .top-title .d,
    .top-title2 .d {
        font-size: 14px;
        line-height: 24px;
    }
}

@media screen and (max-width: 1700px) {
    .index-charging .top-title .t {
        font-size: 28px;
    }

    .index-charging .top-title .d {
        font-size: 16px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .title {
        font-size: 32px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        text-align: center;
    }

    .index-charging .container {
        max-width: 1100px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item img {
        /*width: 100%;*/
    }
}

@media screen and (max-width: 1366px) {
    .index-charging .tab ul li a {
        font-size: 14px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text {
        /*width: auto;*/
    }

    .index-charging .container {
        max-width: 1000px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span,
    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        font-size: 12px;
    }
}

@media screen and (min-width: 1200px) {
    .index-charging.box-padding {
        padding: 15.5vh 0 18vh;
    }

    .index-charging .tab {
        padding: 5vh;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide {
        padding: 5.8vh;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        padding: 3vh 0;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item {
        /*height: 100vh;*/
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .left {
        width: 25vh;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text {
        /*width: auto;*/
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        margin: 10vh 0 0 0;
    }
}

@media screen and (max-width: 1024px) {
    .index-charging .container {
        padding: 0 10px;
    }

    .index-charging.box-padding {
        padding-top: 10%;
        padding-bottom: 15%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text {
        width: 60%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        font-size: 14px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item {
        padding-top: 17%;
        margin-left:-15%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        width: 100%;
        padding: 0 2%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item img {
        width: auto;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span {
        font-size: 14px;
    }
}

@media screen and (max-width: 880px) {
    .index-charging .swiper-container .swiper-wrapper .swiper-slide {
        height: 300px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text {
        padding: 0 5%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        max-width: 100%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item {
        max-width: 100%;
        padding-top: 5%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        /*width: 33%;*/
        box-sizing: border-box;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span {
        height: 25px;
    }

    .top-title {
        width: auto;
        margin: 0 5%;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .left {
        width: 20%;
        height: 140px;
    }
}

@media screen and (max-width: 768px) {
    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .left {
        width: 20%;
        height: 140px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .left .charging-img {
        left: 15px;
        top: 15px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item {
        max-width: 100%;
        margin-left: 9%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide {
        height: auto;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text {
        margin-top: 0px !important;
    }

    .index-charging {
        overflow: hidden;
    }

    .index-charging .tab {
        padding: 5% 0;
    }

    .index-charging .tab ul li {
        width: auto;
        padding: 0 1%;
        margin: 0 1%;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
    }

    .index-charging .wrap .swiper-pagination {
        display: block;
    }

    .index-charging .wrap .swiper-button-prev {
        display: none;
    }

    .index-charging .wrap .swiper-button-next {
        display: none;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide {
        overflow: hidden;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right {
        width: 100%;
        padding: 0% 2%;
        box-sizing: border-box;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text {
        position: static;
        width: 100%;
        padding: 0;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .title {
        font-size: 26px;
        padding-left: 20%;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        padding-left: 20%;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item {
        text-align: center;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        display: inline-block;
        float: left;
        padding: 0 2%;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span {
        font-size: 12px;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item:first-child {
        padding-left: 2%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item img {
        padding: 0;
        width: 25%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item {
        margin-top: 0;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide{
        padding-bottom: 10%;
    }
}

@media screen and (max-width: 660px) {
    .index-charging .top-title .t {
        font-size: 26px;
        margin-bottom: 16px
    }

    .index-charging .top-title .d{
        font-size: 14px;
    }

    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .right .text .title {
        font-size: 22px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .right .text .desc {
        line-height: 18px
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item{
        margin-top: 10%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span {
        padding-top: 0
    }

    .index-charging.box-padding {
        padding-top: 10%;
        padding-bottom: 15%;
    }

    .index-charging .tab{
        padding: 7% 0;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc{
        padding-bottom: 12%;
    }

    .index-charging .tab ul {
        display: flex;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .index-charging .tab ul li {
        width: 45%;
        margin-bottom: 5%;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc {
        padding-top: 20px;
    }

    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item img {
        width: 40%;
    }
    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item .line{
        right: 0;
    }
    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item .item span{
        margin-left: 0;
    }
}


@media screen and (max-width: 500px){
    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .icon-item{
        width: 150%;
        max-width: 150%;
        margin-left: -48%;
    }
    .index-charging .wrap .swiper-container .swiper-wrapper .swiper-slide .left {
        width: 28%;
        height: 82px;
    }
    .index-charging .swiper-container .swiper-wrapper .swiper-slide{
        padding: 8% 5% 10%;
    }
    .index-charging .swiper-container .swiper-wrapper .swiper-slide .right .text .desc{
        padding-bottom: 15%;
    }
}