.user-center {
    margin: 0 auto;
    padding: 0 0 100px;
}

.user-center .user-left {
    width: 22%;
    height: 600px;
    display: inline-block;
    vertical-align: top;
    
}

.user-center .user-left-info {
    padding: 20px 20px 30px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: url(/uploads/img/one.svg) no-repeat #2B2C37;background-position: 50% 50%;
}

.user-center .user-img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    margin: 20px auto 10px;
    position: inherit;
}

.user-center .user-img img {
    width: 100%;
    height: 100%
}

.user-center .user-name {
    text-align: center
}

.user-center .user-name .user-name-name {
    color: #f2f2f2;
    vertical-align: middle;
    font-size: 18px
}

.user-center .user-name .layui-bg-orange {
    vertical-align: middle;
    margin-left: 10px
}

.user-center .user-grade {
    margin-top: 10px;
    color: #ffd43e;
    text-align: center;
    font-size: 14px
}

.user-center .user-grade-txt {
    vertical-align: middle
}

.user-center .user-nav {
    border-top: 1px solid #3d3d3d;
    margin: 0 30px
}

.user-center .user-nav-item {
    text-align: center;
    border-bottom: 1px solid #3d3d3d
}

.user-center .user-nav-item a {
    color: #f2f2f2;
    width: 100%;
    height: 100%;
    display: block;
    margin: 10px 0;
    padding: 10px 0
}

.user-center .layui-icon {
    margin-right: 5px;
    font-size: 16px;
    vertical-align: middle
}

.user-center .user-nav-txt {
    font-size: 14px;
    vertical-align: middle
}

.user-center .user-nav-item.active a {
    color: #cf4921;
    background-color: #2b2e3f;
    border-radius: 5px
}

.user-center .user-right {
    width: 75%;
    display: inline-block;
    vertical-align: top;
    margin-left: 12px
}

.user-center .user-balance {
    width: 100%;
    color: #fff;
    font-size: 14px;
    background-color: #2B2C37;
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-radius: 5px;
}

.user-center .user-balance-item {
    min-width: 33%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    padding: 0 20px
}

.user-center .user-balance-item + .user-balance-item {
    border-left: 1px solid #5a5a5a
}

.user-center .layui-icon {
    vertical-align: middle
}

.user-center .user-balance-item-txt {
    vertical-align: middle
}

.user-center .user-card {
    background-color: #2B2C37;
    width: 100%;
    min-height: 500px;
    margin-top: 26px;
    padding: 20px;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-center .set-up {
    background-color: #fff;
    width: 100%;
    min-height: 500px;
    margin-top: 26px;
    padding: 20px;
    position: relative
}

.user-center .user-right .layui-badge {
    cursor: pointer
}

.user-card-content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.user-card-content .card-item {
    width: 206px;
    margin: 0 6px 12px;
    cursor: pointer;
    background-color: #383d51;
    padding: 8px;
    position: relative
}

.user-card-content .card-item-img {
    background: url(/public/uploads/img/item_card_bg.jpg) no-repeat;
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.user-card-content .card-img1 {
    position: absolute;
    width: 165px;
    z-index: 1
}

.user-card-content .card-item-text {
    padding: 5px 4px 2px;
    box-sizing: border-box;
    text-align: left
}

.user-card-content .card-item-name {
    font-size: 16px;
    margin-bottom: 5px;
    color: #d6d4ce;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.user-card-content .td {
    color: #ffd43e;
    font-weight: 700;
    font-size: 14px
}

.user-card-content .card-img1 {
    position: absolute;
    width: 165px;
    z-index: 1
}

.user-card-content .card-img2 {
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s;
    width: 80%
}

.user-card-content .card-abrasion {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    padding: 1px 5px;
    border-bottom-right-radius: 4px;
    font-size: 12px;
    box-shadow: #585858 0 0 10px
}

.user-card-content .card-abrasion.yellowbg {
    background-color: #d3ae2f;
    color: #e1e1e1
}

.user-card-content .card-abrasion.redbg {
    background-color: #e83f3f;
    color: #d5d5d5
}

.user-card-content .card-abrasion.purplebg {
    background-color: #6f2ab2;
    color: #e3e3e3
}

.user-card-content .card-abrasion.bluebg {
    background-color: #707ce9;
    color: #ececec
}

.user-card-content .card-abrasion.graybg {
    background-color: #2c2c2c;
    color: #d5d5d5
}

.user-card .no-data {
    text-align: center;
    margin-top: 120px;
    color: #fff;
    width: 100%
}

#paging {
    position: absolute;
    bottom: 20px
}

#paging .layui-laypage a, .layui-laypage span {
    background-color: #383d51 !important;
    color: #fff !important
}

#paging .layui-laypage-count {
    background-color: #1d2033 !important
}

#paging .layui-laypage a, .layui-laypage button, #paging .layui-laypage input, #paging .layui-laypage select, #paging .layui-laypage .layui-laypage-spr, #paging .layui-laypage .layui-laypage-curr {
    border: 1px solid #474747 !important
}

#paging .layui-laypage-skip {
    background-color: #1d2033 !important
}

#paging .layui-laypage a, #paging .layui-laypage span, #paging .layui-input, #paging .layui-laypage-btn {
    padding: 0 12px !important;
    height: 24px !important;
    line-height: 24px !important
}

.set-up .layui-field-box {
    padding: 30px 20px;
    min-height: 400px
}

.set-up .layui-form-label {
    width: 100px
}

.set-up .layui-upload {
    display: inline-block;
    vertical-align: top
}

.set-up .portrait {
    display: inline-block;
    vertical-align: top
}