.container{
    padding-top: 158px;
}
.title{
    font-weight: 600;
    font-size: 38px;
    color: #333333;
    text-align: center;
    padding: 65px 0;
}

.rank-list{
    width: 100%;
    background: #F7F8F9;
    padding-bottom: 80px;
}

.rank-list .list-cont{
    width: 1077px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.rank-list .list-cont .list-box{
    width: 515px;
    height: 176px;
    margin: 0 11px 32px;
    position: relative;
}

.rank-list .list-cont .list-box .list-info{
    width: 515px;
    height: 176px;
    background:url(../image/index/list-bg.png) no-repeat;
    background-size:100% 100%;
    display: flex;
    justify-content: flex-start;
}

.rank-list .list-cont .list-box .user-img{
    width: 154px;
    height: 176px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 16px;
}
.list-cont .list-box .user-cont{
    padding-top: 16px;
    margin-right: 30px;
}

.list-cont .list-box .user-cont .name{
    font-weight: 500;
    font-size: 24px;
    color: #252525;
}

.list-cont .list-box .user-cont .name span{
    font-weight: 400;
    font-size: 20px;
    color: #6C6C6C;
    padding-left: 16px;
}

.list-cont .list-box .user-cont .user-info{
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    padding: 6px 0 10px;
}

.list-cont .list-box .user-cont .user-text{
    width: 203px;
    height: 72px;
    font-weight: 400;
    font-size: 18px;
    color: #6C6C6C;
    line-height: 24px;
    text-align: justify;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.list-cont .list-box .list-btn{
    width: 112px;
    height: 44px;
    position: absolute;
    bottom: 4px;
    right: 0;
    z-index: 2;
}

.page-box{
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.page-box .page-num{
    width: 42px;
    height: 42px;
    background: #EDEDEE;
    border-radius: 4px;
    margin: 0 6px;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-box .page-num.active{
    color: #FFFFFF;
    background: linear-gradient( 270deg, #6F77FF 0%, #C1A3FF 100%);
}

.vip-img{
    width: 1920px;
    height: 132px;
    margin: 0 auto 60px;
    object-fit: cover;
}

.cont-tab{
    font-weight: 600;
    font-size: 38px;
    color: #333333;
    text-align: left;
    padding-left: 464px;
}

.vip-content{
    width: 982px;
    margin: 65px auto 60px;
    display: flex;
    justify-content: center;
}

.vip-content .vip-box{
    width: 224px;
    height: 271px;
    padding-top: 73px;
    margin: 0 10px;
    background:url(../image/vip/vip-box-bg.png) no-repeat;
    background-size:100% 100%;
}

.vip-content .vip-box .vip-tab{
    font-weight: 400;
    font-size: 20px;
    color: #888888;
    text-align: center;
    padding-bottom: 20px;
}

.vip-content .vip-box .number{
    font-weight: 600;
    font-size: 40px;
    color: #333333;
    text-align: center;
}

.vip-content .vip-box .number span{
    font-weight: 600;
    font-size: 20px;
    color: #333333;
    text-align: center;
}

.vip-content .vip-box .vip-text{
    font-weight: 400;
    font-size: 19px;
    color: #888888;
    text-align: center;
}

.vip-content .vip-box .vip-text span{
    font-weight: 600;
    font-size: 26px;
}

.vip-content .vip-box.active{
    background:url(../image/vip/vip-box-active-bg.png) no-repeat;
    background-size:100% 100%;
}

.vip-content .vip-box.active .vip-tab{
    color: #92571B;
}

.vip-content .vip-box.active .number,.vip-content .vip-box.active .number span{
    color: #E95D48;
}

.vip-content .vip-box.active .vip-text,.vip-content .vip-box.active .vip-text span{
    color: #8F571A;
}

.pay-cont{
    width: 982px;
    margin: 50px auto 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pay-cont .pay-wechat{
    width: 390px;
    height: 120px;
    border-radius: 20px;
    border: 1px solid #BBBBBB;
    display: flex;
    align-items: center;
    padding-left: 32px;
    font-weight: 500;
    font-size: 32px;
    color: #69C471;
}

.pay-cont .pay-wechat .don-icon{
    width: 56px;
    height: 56px;
    margin-right: 20px;
}

.pay-cont .pay-wechat .select-icon{
    width: 34px;
    height: 34px;
    margin-left: 88px;
    background:url(../image/vip/don-prompt.png) no-repeat;
    background-size:100% 100%;
}

.pay-cont .pay-btn{
    width: 266px;
    height: 92px;
    background: linear-gradient( 270deg, #F5C848 0%, #FAE8A0 100%);
    border-radius: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 42px;
    color: #6F4214;
    opacity: 0.49;
}

.pay-cont .pay-wechat.active{
    background: #F6FCF5;
    border-radius: 20px;
    border: 1px solid #3BCB5B;
}

.pay-cont .pay-wechat .select-icon.active{
    background:url(../image/vip/don-prompt-active.png) no-repeat;
    background-size:100% 100%;
}

.pay-cont .pay-btn.active{
    opacity: 1;
}

.equity-content{
    width: 982px;
    margin: 57px auto 88px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.equity-content .equity-box{
    width: 198px;
    margin: 0 31px;
}

.equity-content .equity-box .icon{
    width: 110px;
    height: 110px;
    margin: 0 auto 27px;
}

.equity-content .equity-box .equity-tab{
   font-weight: 500;
    font-size: 26px;
    color: #333333;
    text-align: center;
    padding-bottom: 11px;
}

.equity-content .equity-box .equity-text{
    font-weight: 400;
    font-size: 22px;
    color: #888888;
    text-align: center;
    white-space: nowrap;
}

.equity-text1{
    width: 971px;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    line-height: 40px;
    text-align: left;
    margin: 30px auto 64px;
}