.container{

    width: 100%;

    margin: 0 auto;

    background-color: #f6f7fb;

}

.container .banner{

    width: 100%;

    height: 500px;

    position: relative;

}

.container .banner img{

    width: 100%;

    height: 100%;

}

.container .banner div{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    color: #ffffff;

    font-weight: 500;

    text-align: center;

}

.container .banner div h1{

    font-weight: 500;

    font-size: 47px;

    color: #FFFFFF;

    margin-bottom: 30px;

}

.container .banner div p{

    width: 410px;

    margin: 0 auto;

    height: 50px;

    line-height: 50px;

    text-align: center;

    background: #4C84F7;

    border-radius: 25px;

    font-weight: 500;

    font-size: 26px;

    color: #FAF9FB;

}



/* 合作伙伴 */

.container .partner{

    width: 100%;

    margin: 30px auto;

}

.container .partner .title{

    text-align: center;

}

.container .partner .title h1{

    font-weight: 500;

    font-size: 42px;

    color: #010203;

}

.container .partner .content{

    width: 100%;

    height: 360px;

    background-image: url(../images/case/partners-bg.png);

    background-repeat: no-repeat;

    background-size: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 30px;

    position: relative;

}

.container .partner .content .list{

    width: 1200px;

    margin: 0 auto;

    align-items: center;

}

.container .partner .content .swiper-wrapper{

    width: 1200px;

    margin: 0 auto;

    align-items: center;

}

.container .partner .content .list .item{

    background-color: #ffffff;

    border-radius: 20px;

    height: 262px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transform: scale(0.9);

}

.container .partner .content .list .item img{

    width: 80%;

    height: 140px;

    padding: 10px;

    background-color: #e9edf6;

    border-radius: 20px;

    margin-top: 20px;

}

.container .partner .content .list .item p{

    padding:10px 20px;

    text-align: center;

}

.container .partner .content .list .swiper-slide-next + .swiper-slide{

    transform: scale(1);

}

.container .partner .content .swiper-button-next,

.container .partner .content .swiper-button-prev{

    width: 50px;

    height: 50px;

    background-color: #54504d;

    color: #ffffff;

    border-radius: 50%;

    font-size: 12px;

}

.container .partner .content .swiper-button-next{

    right: 15%;

}

.container .partner .content .swiper-button-prev{

    left: 15%;

}

.container .partner .content .swiper-button-next::after,

.container .partner .content .swiper-button-prev::after{

    font-size: 17px;

}

.container .partner .content .swiper-button-next:hover,

.container .partner .content .swiper-button-prev:hover{

    background-color: #4c84f7;

}



/* 案例 */

.case{

    width: 1200px;

    margin: 40px auto;

}

.case .case-nav{

    width: 100%;

    display: flex;

    border-bottom: 1px solid #e5e5e5;

    padding-bottom: 20px;

}

.case .case-nav button{

    width: 140px;

    height: 40px;

    text-align: center;

    border-radius: 20px;

    background-color: initial;

    border: 0;

    font-weight: 500;

    font-size: 16px;

    color: #434343;

    cursor: pointer;

    margin-right: 20px;

}

.case .case-nav button.active{

    background-color: #4c84f7;

    color: #ffffff;

}

.case .case-list{

    width: 100%;

    margin-top: 40px;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.case .case-list .item{

    width: 380px;

    margin-bottom: 40px;

    border-radius: 20px;

    overflow: hidden;

    background-color: #ffffff;

}

.case .case-list .item>img{

    width: 100%;

    height: 312px;

}

.case .case-list .item>div{

    padding: 20px;

    display: flex;

    align-items: center;

}

.case .case-list .item>div img{

    width: 40px;

    height: 40px;

    margin-right: 10px;

}

.case .case-list .item>div p{

    border-radius: 16px 16px 16px 16px;

    border: 2px solid #383235;

    font-weight: 500;

    font-size: 18px;

    color: #383235;

    padding: 0 10px;

}

.case .case-list .item span{

    display: inline-block;

    padding: 20px;

    font-weight: 500;

    font-size: 18px;

    color: #383235;

}



/* 分页 */

.case .case-page{

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 50px 0;

}

.case .case-page button{

    width: 38px;

    height: 38px;

    margin: 0 2px;

    border: 1px solid #EEEEEE;

    background-color: #F6F7FB;

    cursor: pointer;

}

.case .case-page button svg{

    width: 90%;

    height: 90%;

    fill: #cdcdcd;

}

.case .case-page button.active{

    background-color: #4c84f7;

    color: #fff;

}

.case .case-page button.active svg{

    fill: #fff;

}

.case .case-page button:hover{

    background-color: #4c84f7;

    color: #fff;

}

.case .case-page button:hover svg{

    fill: #fff;

}



/* 移动端 */

@media screen and (max-width: 768px) {

    .mobile{

        width: 100%;

        background-color: #f6f7fb;

    }

    .banner{

        width: 100%;

        height: 170px;

        display: flex;

        justify-content: center;

        align-items: center;

        background-image: url(../images/case/banner-bg.png);

        background-repeat: no-repeat;

        background-size: 100% 100%;

        margin-bottom: 10px;

    }

    .banner div{

        text-align: center;

    }

    .banner div h1{

        color: #FFFFFF;

        font-size: 18px;

        letter-spacing: 1px;

        font-weight: 500;

    }

    .banner div p{

        display: inline-block;

        font-size: 12px;

        background-color: #5488ee;

        color: #ffffff;

        border-radius: 30px;

        padding: 1px 10px;

        margin-top: 20px;

    }



    /* 合作伙伴 */

    .container-move .partner{

        width: 100%;

        margin: 30px auto;

        overflow: hidden;

    }

    .container-move .partner .title{

        text-align: center;

    }

    .container-move .partner .title h1{

        font-weight: 500;

        font-size: 28px;

        color: #010203;

    }

    .container-move .partner .content{

        width: 140%;

        height: 160px;

        background-image: url(../images/case/partners-bg.png);

        background-repeat: no-repeat;

        background-size: 100% 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-top: 20px;

        position: relative;

        margin-left: -75px;

    }

    .container-move .partner .content .list{

        width: 100%;

        margin: 0 auto;

        align-items: center;

    }

    .container-move .partner .content .swiper-wrapper{

        width: 100%;

        margin: 0 auto;

        align-items: center;

    }

    .container-move .partner .content .list .item{

        background-color: #ffffff;

        border-radius: 8px;

        transform: scale(0.9);

        overflow: hidden;

    }

    .container-move .partner .content .list .item img{

        width: 88%;

        height: 72px;

        padding: 5px;

        background-color: #e9edf6;

    }

    .container-move .partner .content .list .item p{

        padding:5px;

        font-size: 8px;

        font-weight: 100;

        color: #3D3D3D;

        text-align: center;

    }

    .container-move .partner .content .list .swiper-slide-next + .swiper-slide{

        transform: scale(1);

    }

    .container-move .case-move{

        width: 90%;

        margin: 0 auto;

        overflow: hidden;

    }

    .container-move .case-move .case-move-nav{

        width: 100%;

        white-space: nowrap;

        max-width: 200%;

        overflow-x: auto;

        scrollbar-width: none;

    }

    .container-move .case-move .case-move-nav button{

        background-color: initial;

        margin: 0 5px;

        border: 0;

        font-size: 16px;

        font-weight: 400;

        padding-bottom: 3px;

    }

    .container-move .case-move .case-move-nav button.active{

        color: #4C84F7;

        border-bottom: 2px solid #4C84F7;

    }



    .container-move .case-move .case-move-list{

        width: 100%;

        margin-top: 20px;

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

    }

    .container-move .case-move .case-move-list .item{

        width: 48%;

        margin-bottom: 20px;

        border-radius: 10px;

        overflow: hidden;

        background-color: #ffffff;

    }

    .container-move .case-move .case-move-list .item>img{

        width: 100%;

        height: 106px;

    }

    .container-move .case-move .case-move-list .item>div{

        padding: 10px;

        display: flex;

        align-items: center;

    }

    .container-move .case-move .case-move-list .item>div img{

        width: 22px;

        height: 22px;

        margin-right: 5px;

    }

    .container-move .case-move .case-move-list .item>div p{

        border-radius: 16px 16px 16px 16px;

        border: 2px solid #383235;

        font-weight: 500;

        font-size: 8px;

        color: #3D3D3D;

        padding: 0 5px;

    }

    .container-move .case-move .case-move-list .item span{

        display: inline-block;

        padding: 0 10px;

        font-weight: 100;

        font-size: 6px;

        color: #1E1D1D;

    }

}

@media (min-width: 769px) {

.pagebar .pagination{display:flex;justify-content:center;padding: 50px 0;}
.pagination a{border-radius: 2px; background: #fff;color: #444;line-height: 40px;padding: 0 15px;display: block;font-size: 16px;border: 1px solid #d9d9d9;margin-left: -1px;margin-right: 6px;}
.pagination a:hover{color:#4c84f7;border:1px solid #4c84f7;background: #f9f9f9;}
.pagination a.page-num-current{color: #fff;border-color: #4c84f7;background: #4c84f7;}

}

@media (max-width: 768px) {

.pagebar .pagination{display:flex;justify-content:center;margin-top:10px}
.pagination a{background:#fff;border:1px solid #ccc;color:#333;font-size:14px;padding:6px 8px;margin:0 2px;border-radius:3px}
.pagination a:hover{color:#4fc08d;border:1px solid #4fc08d}
.pagination a.page-num-current{color:#fff;background:#4fc08d;border:1px solid #4fc08d}

}