/*PC端*/
@media (min-width: 768px) {
    .navbar-brand {
        display: block !important;
    }
    .navbar-brand2 {
        display: none !important;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: #333 !important;
    }
    .main {
        padding-top: 8rem;

    }

    .area_title .labels {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    .area_user_right .area_user {

    }

    .area_vip_scroll {
        margin-top: 1rem;
    }

    .area_vip_list {
        display: flex;
        border-radius: 1rem;
        background-color: #FFF;

        

    }

    .area_user_right .area_user {
        /*height: 20rem;*/
    }
    .area_user_right .area_vips img {
        /*height: 20rem;*/
    }

}

/*移动端*/
@media (max-width: 767px) {
    .area_vip_scroll {
        width: 100%;
        overflow-x: auto; /* 允许水平滚动 */
    }

    .area_vip_list {
        display: flex;
        border-radius: 1rem;
        background-color: #FFF;
        margin: 2rem 0 0 0  !important;
        width: 75rem; /* 默认宽度 */
        

    }


    .navbar-brand {
        display: none !important;
    }
    .navbar-brand2 {
        display: block !important;
    }
    .navbar-brand2 img {
        width: 100px;
    }
    .main {
        padding-top: 4rem;

    }

    .area_title .labels {

    }
    .area_user_right .area_user {

    }
}



.area_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.area_title .title {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.area_title .labels {
    display: flex;
    justify-content: center;
}
.area_title .labels .label {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.area_title .labels .label span {
    font-size: 0.9rem;
    color: #8F492E;
}

.area_user_right {
    display: flex;
    margin-top: 2rem;
}  
.area_user_right .area_user {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #FFF;
    border-radius: 0.5rem;
    padding: 2rem 2rem 2rem 2rem;
    margin-top: 0.5rem;

}
.area_user_right .area_user .avatar {}
.area_user_right .area_user .avatar img {
    width: 30%;
}
.area_user_right .area_user .name {
    font-size: 1.2rem;
    color: #333;
    margin-top: 0.5rem;
}
.area_user_right .area_user .desc {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.5rem;
}
.area_user_right .area_user .tip {
    font-size: 0.7rem;
    color: #F00;
}
.area_user_right .area_user .btn {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
.area_user_right .area_vips {
    margin-top: 0.5rem;
    padding-right: 0 !important;
}
.area_user_right .area_vips img {
    width: 100%;
}



.area_vip_list .vip_list {
    display: flex;
    flex-direction: column;
    padding: 0 0 0 0;
    border-radius: 1rem;

}
.area_vip_list .vip_list .item_title {
    display: flex;
    background-color: #F3F6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
    border-top-left-radius: 1rem;
}
.area_vip_list .vip_list .item_title .value {
    display: flex;
    flex-direction: column;
    flex: 20% 0 0;
    justify-content: center;
    align-items: center;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.area_vip_list .vip_list .item_title .first {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}
.area_vip_list .vip_list .item_title .value .v_title {
    font-size: 0.8rem;
    color: #333;
    font-weight: 500;
}
.area_vip_list .vip_list .item_title .value .v_desc {
    font-size: 0.6rem;
    color: #666;
    margin-top: 0.3rem;
}
.area_vip_list .vip_list .item_value {
    display: flex;
    margin-top: 1rem;
}
.area_vip_list .vip_list .item_value .value {
    display: flex;
    flex: 20% 0 0;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: #666;

}
.area_vip_list .vip_list .item_value .first {
    font-size: 1rem;
    color: #333 !important;
    font-weight: 500;
}

.area_vip_list .vip_ewm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 1rem;
}
.area_vip_list .vip_ewm .icon_vip {
    margin-top: -0.8rem;
}
.area_vip_list .vip_ewm .icon_vip img {}
.area_vip_list .vip_ewm .vip_ewm_title {
    margin-top: 1rem;
    font-size: 1rem;
    color: #333;
}
.area_vip_list .vip_ewm .vip_ewm_desc {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #666;
}
.area_vip_list .vip_ewm .vip_ewm_img {
    margin-top: 1rem;
}
.area_vip_list .vip_ewm .vip_ewm_img img {
    width: 100%;
}
.area_vip_list .vip_ewm .vip_ewm_list {
    
}
.area_vip_list .vip_ewm .vip_ewm_list .vip_ewm_item {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #A23604;
    display: flex;
    justify-content: center;
    
}

.area_service_title {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
.area_member_service {
    display: flex;
    margin-top: 2rem;
}
.area_member_service .service_item {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.area_member_service .service_item .img {

}
.area_member_service .service_item .img img {
    width: 30%;
    height: 4rem;
}
.area_member_service .service_item .title {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #333;
}

.area_faq_title {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.area_faq_list {
    display: flex;
    margin-bottom: 2rem;
}
.area_faq_list .faq_item {
    display: flex;
    margin-top: 2rem;
}
.area_faq_list .faq_item .faq_icon {
    color: #A23604;
}
.area_faq_list .faq_item .faq_icon i {}
.area_faq_list .faq_item .area_text {
    padding-left: 0.5rem;
}
.area_faq_list .faq_item .area_text .title {
    font-size: 0.9rem;
    color: #333;
}
.area_faq_list .faq_item .area_text .desc {
    font-size: 0.8rem;
    color: #666;
}


body {
    background-image: url('/images/bg_member_right.png'); /* 替换为你的图片路径 */
    background-size: 100% auto; /* 宽度100%，高度自动 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-color: #E9E8F5;
    width: 100%; /* 确保body宽度为100% */
    margin: 0; /* 去掉默认的外边距 */

}
.area_vip_list .vip_ewm {
    background-image: url('/images/bg_area_rights.png'); /* 替换为你的图片路径 */
    background-size: 100% auto; /* 宽度100%，高度自动 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    width: 100%; /* 确保body宽度为100% */
    margin: 0; /* 去掉默认的外边距 */
}