.user-vip {
    min-height: 800px;

    .subtitle {
        padding-bottom: 12px !important;
    }

    .vip-level {
        clear: both;
    }

    .level {
        margin: 20px 15px 0 40px;
        line-height: 31px;
        float: left;
        clear: both;
        font-size: 14px;
        color: #000;
    }

    .vip-icon {
        margin-top: 20px;
        width: 70px;
        height: 26px;
        float: left;
        margin-bottom: 25px;
    }

    .vipimg1 {
        background-image: resolve("me/vip/silver-vip.png");
        background-size: contain;
    }

    .vipimg2 {
        background-image: resolve("me/vip/gold-vip.png");
        background-size: contain;
    }

    .vipimg3 {
        background-image: resolve("me/vip/platinum-vip.png");
        background-size: contain;
    }

    .favimg {
        float: left;
        width: 770px;
        margin-top: 20px;
        overflow: hidden;
    }

    .list {
        width: 192px;
        float: left;
        margin-bottom: 25px;

        i {
            position: relative;
            top: 5px;
            font-size: 28px;
        }
    }

    .fav-font {
        line-height: 31px;
        font-size: 14px;
        color: #000;
        padding-left: 5px;
        box-sizing: border-box;
    }

    .year-amount {
        float: left;
        width: 600px;
        margin-top: 20px;
    }

    .price-account {
        height: auto;
        overflow: hidden;
    }

    .amount {
        font-size: 24px;
        font-weight: bold;
        color: #1b1b1b;
        float: left;
        line-height: 31px;
        margin-left: -5px;
    }

    .ps {
        font-size: 14px;
        width: 100%;
        margin-top: 15px;
        display: block;
        color: #999;
        clear: both;
    }

    .line {
        width: 100%;
        height: 4px;
        display: block;
        background: #eee;
        position: relative;

        &:before {
            content: "";
            background: url("/me/vip/white-left.jpg") no-repeat;
            background-position: -16px 0;
            width: 4px;
            height: 4px;
            position: absolute;
            left: 0;
        }

        &:after {
            content: "";
            background: url("/me/vip/white-right.jpg") no-repeat;
            width: 4px;
            height: 4px;
            position: absolute;
            right: 0;
        }
    }

    .left-black {
        height: 4px;
        position: absolute;
        top: 40px;
        background: #1b1b1b;
        width: 112px;
        left: 0;

        &:before {
            content: "";
            background: url("/me/vip/black-left.jpg") no-repeat;
            background-position: -16px 0;
            width: 4px;
            height: 4px;
            position: absolute;
            left: 0;
        }
    }

    .line-num {
        width: 477px;
        position: absolute;
        top: 40px;
        left: 112px;
        height: 4px;
    }

    .line-black {
        height: 4px;
        background: #1b1b1b;
        display: none;
        position: relative;

        &:after {
            content: "";
            background: url("/me/vip/black-right.jpg") no-repeat;
            width: 4px;
            height: 4px;
            position: absolute;
            right: 0;
        }
    }

    .left-r {
        position: absolute;
        left: 80px;
        top: 26px;
        font-size: 13px;
    }

    .right-r {
        position: absolute;
        right: 80px;
        top: 26px;
        font-size: 13px;
    }

    .r-icon {
        width: 12px;
        height: 12px;
        background: url("/me/vip/r.png") no-repeat;
        background-size: contain;
        display: block;
        margin: 10px auto;
    }

    .amount-length {
        width: 700px;
        padding-top: 40px;
        position: relative;

        .price-box {
            width: 81px;
            height: 38px;
            background: url("/me/vip/price-box.png") no-repeat;
            background-size: contain;
            display: block;
            position: absolute;
            right: 66px;
            top: -8px;
            color: #fff;
            text-align: center;
            line-height: 38px;
        }
    }

    .balance {
        font-size: 14px;
        line-height: 31px;
        float: left;
        color: #1b1b1b;
        margin-left: 30px;

        .price {
            font-size: 18px;
        }

        p {
            float: left;
            color: #1b1b1b;
            font-size: 14px;
        }
    }

    .history {
        padding-top: 80px;
        clear: both;
        overflow: hidden;
    }

    .hisamout {
        margin-left: 10px;
        font-size: 28px;
        color: #1b1b1b;
        font-weight: bold;
        vertical-align: middle;
    }

    .cur-time {
        width: 700px;
        float: left;
        margin-top: 34px;
        position: relative;
        font-size: 14px;
        color: #1b1b1b;

        span {
            line-height: 28px;
        }

        .time-1 {
            position: absolute;
            left: 13px;
            top: -14px;
            text-align: center;
        }

        .time-2 {
            position: absolute;
            left: 130px;
            top: -14px;
            text-align: center;
        }

        .time-3 {
            position: absolute;
            right: 13px;
            top: -14px;
            text-align: center;
        }

        .line-b {
            width: 476px;
            height: 4px;
            background: #1b1b1b;
            position: absolute;
            top: 0;
            right: 60px;
        }

        .r-icon {
            margin: 10px auto 5px;
        }

        .date-box {
            width: 201px;
            height: 38px;
            background: url("/me/vip/date-box.png") no-repeat;
            background-size: contain;
            position: absolute;
            right: 192px;
            top: -48px;
            line-height: 38px;
            text-align: center;
            color: #fff;
        }
    }

    .valid {
        margin-top: 44px;
        padding-top: 14px;
        margin-bottom: 240px;
    }
}