/* vip充值 */
.vip-recharge {
    margin: auto;
    padding: 50px;
    width: 1200px;
    height: 600px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    /*  背景模糊 */
    background-color: rgba(89, 89, 89, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(4.5px);
    border: 0px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    border-radius: 9px;
    -webkit-border-radius: 50px;
    color: rgb(128, 128, 128);
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.vip-recharge:hover {
    box-shadow: rgba(255, 255, 255, 0.7) 0px 0px 50px 0px;
}

.grid-item {
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid-item>img {
    margin: 10px;
}

.grid-item:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/3;
}

.grid-item:nth-child(1)>img {
    height: 200px;
}

.grid-item:nth-child(1)>div {
    font-size: 40px;
}

.grid-item:nth-child(2) {
    grid-column: 3 / 6;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.grid-item:nth-child(2)>img {
    height: 170px;
}

.grid-item:nth-child(2)>div {
    font-size: 50px;
}

.grid-item:nth-child(3) {
    grid-column: 3/5;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.grid-item:nth-child(3)>img {
    height: 150px;
}

.grid-item:nth-child(3)>div {
    font-size: 30px;
}

.grid-item:nth-child(4)>img {
    height: 100px;
}

.grid-item:nth-child(4)>div {
    font-size: 20px;
}

/* vip权益 */
.vip-right {
    margin: auto;
    padding: 50px;
    width: 1200px;
    height: 600px;
    display: grid;
    grid-template-columns: 0.7fr repeat(4, 1fr);
    grid-template-rows: 0.3fr repeat(2, 1fr);
    /*  背景模糊 */
    background-color: rgba(89, 89, 89, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(4.5px);
    border: 0px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    border-radius: 9px;
    -webkit-border-radius: 50px;
    color: rgb(128, 128, 128);
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.vip-right-box {
    outline: 1px solid rgba(255, 255, 255,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}
.vip-right-box>.cando{
    color: yellow;
}
.vip-right-box>.notcando{
    color: red;
}