@media(min-width:750px) {

    .vip_title {
        padding-top: 26px;
        color: #1A1A1A;
        font-size: 22px;
        font-weight: bold;
        padding-bottom: 22px;
        border-bottom: 1px solid #E9E9E9;
    }

    .vip_container {
        margin-top: 20px;
        height: 153px;
        background: url(/Content/template101/image/pc/bgpc.png);
        background-size: 100% 100%;
        border-radius: 8px;
        padding: 12px;
    }

    .vip_border_container {
        box-sizing: border-box;
        border: 1px solid #FFFFFF;
        border-radius: 8px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative
    }

    .head_image {
        width: 57px;
        height: 57px;
        box-sizing: border-box;
        border-radius: 57px;
        border: 1px solid #B78F74;
        margin-left: 28px;
    }


    .vip_info {
        margin-left: 19px;
    }


    .vip_name {
        color: #1A1A1A;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center
    }

    #pc_id {
        height: 17px;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid #B78F74;
        padding: 0 5px;
        font-size: 12px;
        color: #B78F74;
        margin-left: 5px;
        display: flex;
        align-items: center;
    }

    .vip_time {
        color: #1A1A1A;
        font-size: 13px;
        margin-top: 8px;
        display: flex;
        align-items: center;
    }

        .vip_time svg {
            margin-right: 5px;
            border-radius: 2px;
        }

    .vip_buy_container {
        margin-top: 20px;
    }

    .code_title {
        color: #040404;
        margin-left: 5px;
    }

    .vip_code_container {
        padding: 23px 0;
        border-bottom: 1px solid #ECECEC;
    }

    .vip_icon {
    }

    .code {
        background: #FFFFFF;
        border-radius: 6px 0px 0px 6px;
        border: 1px solid #DEDEDE;
        width: 325px;
        height: 38px;
        text-indent: 25px;
        font-size: 14px;
    }

        .code::placeholder {
            color: #D6D6D6;
        }

    .code_btn {
        width: 76px;
        height: 38px;
        background: #F81F52;
        border-radius: 0px 6px 6px 0px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: center;
        cursor: pointer;
    }

    .code_tip {
        padding-top: 18px;
        color: #808080;
        font-size: 12px;
    }

    .flex_center {
        display: flex;
        align-items: center;
    }

    .vip_brief {
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, #FEF1E9 4%, rgba(255,255,255,0) 100%);
        height: 29px;
        display: flex;
        align-items: center;
        padding: 0 50px 0 13px;
        margin-top: 13px;
        margin-left: -13px;
        font-size: 13px;
        color: #B26230;
    }

    .vip_btn {
        position: absolute;
        width: 110px;
        height: 40px;
        background: linear-gradient( 90deg, #D8853B 0%, #9E540F 100%);
        border-radius: 90px 90px 90px 90px;
        font-size: 16px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 37px;
    }
}



@media(max-width:750px) {

    .vip_card_end {
        font-size: 14px;
        color: #B5804E;
    }


    .vip_card {
        width: calc(100% - 32px);
        margin: 25px 16px 0 16px;
        background: linear-gradient( 134deg, #FDDEBF 0%, #FBECDD 50%, #FFC998 100%);
        border-radius: 8px 8px 8px 8px;
        height: 111px;
    }

    .vip_card_name {
        display: flex;
        padding: 17px 18px 0 18px;
    }

    .vip_card_name_left {
        font-weight: bold;
        font-size: 17px;
        color: #7F4523;
    }

    .vip_card_btn_container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .vip_card_btn {
        width: 62px;
        height: 28px;
        background: linear-gradient( 90deg, #D8853B 0%, #9E540F 100%);
        border-radius: 90px 90px 90px 90px;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vip_card_brief {
        margin-top: 10px;
        padding: 0 18px;
        font-size: 15px;
        color: #854B27;
        line-height: 22px;
    }

    #h5_id_box {
        height: 17px;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid rgba(255,255,255,0.5);
        padding: 0 5px;
        align-items: center;
        margin-left: 3px;
        font-size: 12px;
        color: rgba(255,255,255,0.7);
        display: flex;
    }

    .user_container {
        width: 100%;
        height: 150px;
        background: url(/Content/template101/image/h5/bg.png);
        background-size: 100% 100%;
        border-bottom-left-radius: 50% 20px;
        border-bottom-right-radius: 50% 20px;
        overflow: hidden;
    }



    .user_container_topbar {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 16px;
        position: relative;
    }

    .user_info_container {
        width: calc(100% - 32px);
        margin: 0 16px;
        background: linear-gradient( 89deg, #F23871 0%, #FC885F 100%);
        border: 1px solid #FF6A6A;
        height: 114px;
        border-radius: 10px;
        display: flex;
        position: relative;
        background: url(/Content/template101/image/h5/bg2.png);
        background-size: 100% 100%;
    }

    .user_container_back {
        position: absolute;
        left: 17px;
        width: 10px;
        height: 17px;
    }

    .user_container_menu {
        position: absolute;
        right: 17px;
        width: 18px;
        height: 14px;
    }

    .avatar {
        width: 45px;
        height: 45px;
        border-radius: 45px;
        margin: 19px 11px 0 19px;
        border: 1px solid rgba(255,255,255,0.5)
    }

    .user_info {
        margin-top: 23px;
    }

    .username {
        font-size: 18px;
        color: #fff;
        line-height: 25px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .viptext {
        font-size: 12px;
        color: #fff;
        display: flex;
        align-items: center;
    }

        .viptext svg {
            background: linear-gradient( 137deg, #FFFDFC 0%, #F9CCA6 100%);
            border-radius: 2px;
        }

        .viptext span {
            font-size: 12px;
            color: #FFFFFF;
        }

    .login_btn {
        width: 72px;
        height: 30px;
        background: #FFFFFF;
        border-radius: 15px 15px 15px 15px;
        font-size: 16px;
        color: #F81F52;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 27px;
        right: 14px;
    }

    .vip_container {
        width: calc(100% - 32px);
        margin: 15px 16px 15px 16px;
        height: 142px;
        background: #fff;
        border-radius: 8px 8px 8px 8px;
    }

    body, .h5Main {
        background: #F5F5F5;
    }

    .vip_box_title {
        padding: 20px 0 14px 15px;
        color: #333333;
        font-size: 16px;
    }

    .vip_input_box {
        width: calc(100% - 30px);
        margin-left: 15px;
        height: 38px;
        display: flex;
    }


    .vip_input_left {
        border-left: 1px solid #DEDEDE;
        border-bottom: 1px solid #DEDEDE;
        border-top: 1px solid #DEDEDE;
        width: 80%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 6px 0px 0px 6px;
        overflow: hidden;
    }

    .vip_input_btn {
        width: 20%;
        height100 %;
        background: #F81F52;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #FFFFFF;
        border-radius: 0px 6px 6px 0px;
    }

    .vip_input_left input {
        border: 0;
        background: #fff;
        text-decoration: none;
        width: 100%;
        height: 100%;
        padding: 10px;
    }

        .vip_input_left input::placeholder {
            font-size: 14px;
            color: #D6D6D6;
        }

    .vip_tip {
        width: calc(100% - 30px);
        margin-left: 15px;
        font-size: 12px;
        color: #808080;
        line-height: 32px;
        margin-top: 5px;
    }

    .menu_container {
        width: calc(100% - 30px);
        padding: 2px 16px;
        box-sizing: border-box;
        height: 107px;
        background: #fff;
        border-radius: 8px;
        margin: 15px;
        overflow: hidden;
    }

    .menu_item {
        width: 100%;
        height: 51px;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333333;
        position: relative;
    }

    .border_eee {
        border: 1px solid #f7f7f7;
    }

    .menu_item svg {
        position: absolute;
        right: 0;
        width: 10px;
        height: 19px;
    }
}