.vip-progress-bar-wrap {
    background-color: #161616;
    color: white;
}

.vip-bar-wrap {
    text-align: center;
    width: 100%;
}

.vip-bar-desc-wrap {
    position: relative;
    width: 100%;
    height: 10vw;
    text-align: center;
    font-size: 1.4vw;
}

.vip-bar-desc {
    position: absolute;
    width: 16vw;
    line-height: 1.5;
    text-transform: uppercase;
}

.vip-bar-title {
    width: 60%;
}

.vip-bar-desc:nth-child(2) {
    left: 16.5%
}

.vip-bar-desc:nth-child(3) {
    left: 32.3%
}

.vip-bar-desc:nth-child(4) {
    left: 48.8%
}

.vip-bar-desc:nth-child(5) {
    left: 66.5%
}

.vip-bar-desc:nth-child(6) {
    left: 84.5%
}

.vip-bar-desc.active {
    color: #daba67;
}

.vip-status-crown, .vip-status-detail {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

    .vip-status-crown img {
        width: 60%;
    }

#vip-status-table {
    margin: auto
}

    #vip-status-table tr td {
        padding: 10px;
        font-size: 10px;
        font-weight: 700
    }

        #vip-status-table tr td:first-child {
            text-align: left;
            font-style: italic;
            width: 230px
        }

        #vip-status-table tr td:nth-child(2) {
            font-style: italic
        }

        #vip-status-table tr td:nth-child(3) {
            color: #daba67;
            text-transform: uppercase
        }

#vip-member-deposit, #vip-member-deposit-remain {
    padding: 8px 5px;
    border: 1px solid #daba67;
    width: 200px
}

#vip-member-rank {
    font-weight: 700;
    width: 200px
}

.vip-status-btn {
    text-align: center;
    margin-bottom: 20px
}

    .vip-status-btn img {
        cursor: pointer
    }

#vip-status-table {
    line-height: 1.3;
}

    #vip-status-table table, #vip-status-table th, #vip-status-table td {
        border: 0px;
    }

    #vip-status-table tr td:first-child {
        text-align: left;
        font-style: italic;
        width: 230px;
    }

    #vip-status-table tr td {
        padding: 10px;
        font-size: 10px;
        font-weight: 700;
    }

#vip-progress-bar {
    width: 90%;
}

@media only screen and (min-width: 769px) {
    .vip-bar-wrap {
        width: 100%;
        margin: 0 auto;
    }

    .vip-bar-desc-wrap {
        font-size: 10px;
        height: 70px;
    }

    .vip-bar-title {
        width: 35%;
    }

    #vip-progress-bar {
        width: 87%;
    }

    .vip-status-crown, .vip-status-detail {
        width: 50%;
        float: left;
    }

    .vip-status-wrap {
        width: 90%;
    }

    .vip-status-detail {
        padding: 20px 0px;
    }

    #vip-status-table tr td {
        font-size: 16px;
    }

    .vip-row-0 {
        left: 0px;
    }

    .vip-bar-desc:nth-child(2) {
        left: 15.5%;
    }

    .vip-bar-desc:nth-child(3) {
        left: 32.3%;
    }

    .vip-bar-desc:nth-child(4) {
        left: 48.8%;
    }

    .vip-bar-desc:nth-child(5) {
        left: 65.5%;
    }

    .vip-bar-desc:nth-child(6) {
        left: 81.5%;
    }

    .vip-bar-desc:nth-child(7) {
        left: 98.5%
    }

    .vip-bar-desc:nth-child(8) {
        left: 115.5%
    }

    .vip-bar-desc.active {
        color: #daba67;
    }

    .vip-bar-desc {
        position: absolute;
        text-align: center;
        width: 200px;
    }
}