mx_site/static/css/index-media.css

@media (min-width: 1200px) {
    .page-wrapper{
        min-width: 1200px;
    }
    .slide-des{
        width: 1200px;
    }
    .carousel .swiper-carousel .swiper-carousel-pagination{
        width: 1200px;
        left: 50%;
        transform: translateX(-50%);
        margin-left: -465px;
        bottom: 60px;
    }
}
@media (max-width: 1280px) {
    .grow-container{
        overflow: hidden;
    }
    .case-container .swiper-button-next, .case-container .swiper-button-prev{
        display: none;
    }
    .auto-container{
        overflow: hidden;
    }
    .advantage,.customer{
        overflow: hidden;
    }
}

@media (max-width: 1200px) {
    .page-wrapper{
        min-width: 100%;
    }
    .slide-des{
        width: 100%;
        padding-left:40px;
        padding-right:40px;
    }

    .slide-des .des-word{
        width: 100%;
    }
    .carousel .swiper-carousel .swiper-carousel-pagination{
        width: auto;
        left: 0px;
        transform: translateX(-0%);
        margin-left:40px;
        bottom: 60px;
    }

}

@media (max-width: 1100px) {
    .grow ul li{
        width: 23%;
    }
    .grow ul li .item-des{
        font-size:12px;
    }
    .ability .part_1 .part_1_right ul{
        padding:0px 25px 25px 25px
    }
    .ability .part_2 .part_2_left ul li{
        padding: 0px 10px 10px 0px;
    }
    .ability .part_2 .part_2_left ul li .item-con .item-title{
        font-size:20px;
        line-height: 45px;
    }
    .ability .part_2 .part_2_left ul li .item-icon{
        width: 70px;
        height: 70px;
    }
    .ability .part_2 .part_2_left ul li{
        margin-left:48px;
    }
    .ability .part_4 .part_4_left ul{
        padding: 0px 25px 55px 25px;
    }
    .ability .part_3 .part_3_right ul{
        padding: 0px 25px 55px 25px;
    }
    .ability .part_3 .part_3_left .left-title{
        float:right;
        margin-left:auto;
    }

}

@media (max-width: 945px) {
    .case,.customer,.partners{
        margin-top:80px;
    }
    .advantage{
        display: none;
    }
    .ability .part_1{
        flex-direction: column;
        margin-top:10px;
    }
    .ability .part_1 .part_1_left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right:0px;
    }
    .ability .part_1 .part_1_left .left-title .word{
        font-size:24px;
    }
    .ability .part_1 .part_1_left .part_1_left_word{
        width: 40%;
    }
    .ability .part_1 .part_1_left .left_pic{
        width: 60%;
        min-width: auto;
    }
    .ability .part_1 .part_1_left .left-title{
        height: 160px;
    }
    .ability .part_1 .part_1_right{
        width: 100%;
        min-width: auto;
        max-width: unset;
        margin-top:0px;
        height: auto;
        padding-bottom:20px;
    }
    .ability .part_1 .part_1_left .left-title .line{
        top:79px;
    }
    .ability .part_2{
        flex-direction: column-reverse;
        margin-top:40px;
    }
    .ability .part_2 .part_2_right{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }
    .ability .part_2 .part_2_left{
        width: 100%;
    }
    .ability .part_2 .part_2_right .right-circle-icon{
        top:-20px;
    }
    .ability .part_3{
        flex-direction: column;
        margin-top:60px;
    }
    .ability .part_3 .part_3_right{
        width: 100%;
        margin-top:20px;
    }
    .ability .part_3 .part_3_left{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .ability .part_3 .part_3_left .left-circle-icon{
        top:-20px;
        left:0px;
        right:20px;
    }
    .ability .part_4{
        flex-direction: column-reverse;
        margin-top:60px;
    }
    .ability .part_4 .part_4_left{
        width: 100%;
        margin-top:20px;
    }
    .ability .part_4 .part_4_right{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    .ability .part_4 .part_4_left .left-circle-icon{
        top:-10px;
        right:20px;
        left:0px;
    }
    .ability .part_4 .part_4_right .left-title{
        margin-left:0px;
    }
}
@media (max-width: 750px) {

    .slide-des .des-title{
        font-size:28px;
        line-height: 32px;
    }
    .slide-des .des-word{
        font-size:18px;
    }
    .grow ul{
        flex-wrap: wrap;
    }
    .grow .title{
        margin-top:50px;
    }
    .grow ul li{
        width: 47%;
    }
    .grow ul li .item-des{
        font-size:12px;
    }
    .grow .title .circle-icon-r{
        display: none;
    }
    .ability .part_1 .part_1_left .left-title{
        height: 100px;
    }
    .ability .part_1 .part_1_left .left-title .word{
        font-size:22px;
        top:20px;
    }
    .ability .part_1 .part_1_left .left-title .line{
        top:59px;
    }

    .ability .part_2 .part_2_right .right-title{
        height: 100px;
        width: 200px;
    }
    .ability .part_2 .part_2_right .right-title .word{
        font-size:22px;
        top:20px;
    }
    .ability .part_2 .part_2_right .right-title .line{
        top:59px;
    }

    .ability .part_3 .part_3_left .left-title{
        height: 100px;
        width: 220px;
    }
    .ability .part_3 .part_3_left .left-title .word{
        font-size:22px;
        top:20px;
    }
    .ability .part_3 .part_3_left .left-title .line{
        top:59px;
    }

    .ability .part_4 .part_4_right .left-title{
        height: 100px;
        width: 200px;
        flex-shrink: 0;
    }
    .ability .part_4 .part_4_right .left-title .word{
        font-size:22px;
        top:20px;
    }
    .ability .part_4 .part_4_right .left-title .line{
        top:59px;
    }
    .customer ul li{
        width: 33.3%;
    }
    .partners ul li{
        width: 33.3%;
    }


}
@media (max-width: 500px) {
    .ability .part_1 .part_1_right ul li .item-title .word{
        font-size:18px;
        line-height: 20px;
        margin-left:7px;
    }
}
@media (max-width: 450px) {

    .slide-des .des-title{
        font-size:20px;
        line-height: 24px;
    }
    .slide-des .des-word{
        font-size:14px;
        line-height: 22px;
    }
    .ability .part_1 .part_1_left .left-title .word{
        font-size:20px;
        top:20px;
    }
    .ability .part_1 .part_1_left .left-title .line{
        top:59px;
    }
    .title-block .common-title .title-des .des-word{
        font-size:12px;
    }
    .ability .part_1 .part_1_right ul li{
        margin-top:35px;
    }
    .ability .part_1 .part_1_right ul li .item-title .icon{
        width: 40px;
        height: 40px;
    }
    .ability .part_1 .part_1_right ul li .item-title .word{
        font-size:14px;
        line-height: 16px;
        margin-left:7px;
    }
    .ability .part_1 .part_1_right ul li .item-des{
        font-size:12px;
    }

    .ability .part_2 .part_2_right .right-title .word{
        font-size:20px;
        top:20px;
    }
    .ability .part_3 .part_3_left .left-title .word{
        font-size:20px;
        top:20px;
    }
    .ability .part_4 .part_4_right .left-title .word{
        font-size:20px;
        top:20px;
    }
    .ability .part_2 .part_2_left ul li .item-con .item-title{
        font-size:14px;
        line-height: 40px;
        margin-left:7px;
    }
    .ability .part_2 .part_2_left ul li .item-con .item-des{
        font-size:12px;
    }
    .ability .part_2 .part_2_left ul li .item-icon{
        width: 40px;
        height: 40px;
        margin-left:-20px;
    }
    .ability .part_2 .part_2_left ul li{
        margin-left:28px;
    }
    .ability .part_3 .part_3_right ul li{
        margin-top:25px;
    }
    .ability .part_3 .part_3_right ul li .item-con .item-title{
        font-size:14px;
        line-height: 40px;
        margin-left:7px;
    }
    .ability .part_3 .part_3_right ul li .item-icon{
        width: 60px;
        height: 60px;
    }
    .ability .part_3 .part_3_right ul li .item-con .item-des{
        font-size:12px;
    }
    .ability .part_3 .part_3_right ul{

        padding-bottom:26px;
    }
    .ability .part_4 .part_4_left ul li{
        margin-top:25px;

    }
    .ability .part_4 .part_4_left ul{
        padding-bottom:26px;
    }
    .ability .part_4 .part_4_left ul li .item-con .item-title{
        font-size:14px;
        line-height: 40px;
        margin-left:7px;
    }
    .ability .part_4 .part_4_left ul li .item-con .item-des{
        font-size:12px;
    }
    .ability .part_4 .part_4_left ul li .item-icon{
        width: 60px;
        height: 60px;
    }
}