html {
    font-size: 3.6vw;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
    background-color: white;
    min-height: 100vh;
    padding-bottom: 13.4vw;
    box-sizing: border-box;
}

body,
p {
    margin: 0;
}

h6,
.money,
.order_cat,
.shop_item_name,
.price {
    letter-spacing: .1em;
}

a {
    text-decoration: none;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

img {
    width: 100%;
    height: 100%;
}

header {
    height: 23.67vw;
    position: relative;
}

.topbg {
    height: 16.67vw;
    background: url("../icon/uc/headerbg.jpg") no-repeat;
    background-size: contain;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.container {
    padding: 0 4.25vw;
}

.user_id {
    font-size: 1.1rem;
    font-weight: lighter;
    color: white;
    vertical-align: middle;
}

.top_real {
    margin-left: 2vw;
    color: white;
    font-size: .5rem;
    padding: .6vw 1.5vw;
    vertical-align: middle;
    border: 1px solid white;
    border-radius: 1vw;
    background-color: rgba(255, 255, 255, .15);
}

.top_member {
    font-size: .9rem;
    margin-top: 2vw;
    padding: .3vw 0 .5vw 2em;
    color: #a76409;
    letter-spacing: .2em;
    background: url("../icon/uc/member.png") no-repeat;
    background-size: 28% 100%
}

.head {
    position: absolute;
    width: 15.37vw;
    height: 15.37vw;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.avatar {
    border-radius: 8vw;
}

.vip_level {
    position: absolute;
    width: 3.7vw;
    height: 3.7vw;
    bottom: 0;
    right: 0;
    border: .1vw solid white;
    border-radius: 3vw;
    background: url("../icon/uc/vip_level.jpg") no-repeat;
    background-size: 18.5vw 3.7vw;
}

.v1 {
    background-position: -3.7vw 0;
}

.v2 {
    background-position: -7.4vw 0;
}

.v3 {
    background-position: -11.1vw 0;
}

.v4 {
    background-position: -14.8vw 0;
}

.v5 {
    background-position: -18.5vw 0;
}

.money {
    height: 11.85vw;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.money::before,
.money::after {
    content: "";
}

.money_item {
    padding: 0 2vw;
}

.money_type {
    font-size: .8rem;
    color: #696969;
}

.money_icon {
    display: inline-block;
    width: 6vw;
    height: 4vw;
    background-image: url("../icon/uc/money.jpg");
    background-size: 18vw 100%;
    vertical-align: top;
}

.coupon {
    background-position: -6vw 0;
}

.voucher {
    background-position: -12vw 0;
}

.count {
    font-size: .9rem;
    color: #3a3a3a;
    margin-top: 1vw;
}

.orders,
.shop,
.ad,
.recmd {
    margin-top: 4vw;
}

.order_top {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 2vw 0;
}

.sec_title {
    font-size: .9rem;
    color: #424242;
    font-weight: normal;
    letter-spacing: .2em;
    margin: 0;
}

.all_orders {
    font-size: .8rem;
    color: #676767;
}

.order_type {
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
    height: 14.35vw;
}

.order_icon {
    display: inline-block;
    position: relative;
    width: 6.5vw;
    height: 4.8vw;
    background-image: url("../icon/uc/orders.png");
    background-size: 32.5vw 100%;
}

.deliver {
    background-position: -6.5vw;
}

.notcmt {
    background-position: -13vw;
}

.support {
    background-position: -19.5vw;
}

.order_item {
    position: relative;
    padding: 2vw 4vw;
}

.order_cat,
.shop_item_name {
    font-size: .8rem;
    color: #272727;
}

.order_badge {
    position: absolute;
    top: 5%;
    left: 55%;
    font-size: .7rem;
    font-style: normal;
    color: white;
    padding: 1.5vw 0;
    line-height: 0;
    width: 3vw;
    border-radius: 2vw;
    background-color: red;
}

.hide {
    display: none;
}

.shop_wrap {
    height: 16.2vw;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.shop_item {
    padding: 2vw 5vw;
}

.shop_icon {
    display: inline-block;
    width: 7.5vw;
    height: 7.5vw;
    background-image: url("../icon/uc/shop.png");
    background-size: 22.5vw 100%;
}

.real {
    background-position: -7.5vw 0;
}

.address {
    background-position: -15vw 0;
}

.ad {
    height: 21.67vw;
}

.recmd_goods {
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-bottom: 5vw;
}

.item_recmd {
    -webkit-flex-basis: 40vw;
    flex-basis: 40vw;
    text-align: center;
}

.item_recmd img {
    height: 28.7vw;
}

.item_recmd .name {
    margin: 1em 0;
    color: black;
}

.item_recmd .name,
.item_recmd .price {
    font-size: .9rem;
}

.item_recmd .keyword {
    color: #737373;
    font-size: .6rem;
}

.price {
    color: red;
    font-weight: bold;
    padding: 2vw 0;
}


.bottom_bar {
    width: 100%;
    height: 13.4vw;
    position: fixed;
    bottom: 0;
    background-color: white;
    z-index: 1;
}

.btm_btn {
    width: 25%;
    text-align: center;
    color: #737373;
}

.cart {
    position: relative;
}

.btm_btn span {
    display: inline-block;
    width: 7vw;
    height: 7vw;
    margin-top: 1vw;
    background: url(../icon/bottom_icons.png) no-repeat;
    background-size: 28vw 14vw;
}

.cart_num {
    position: absolute;
    top: 0;
    left: 56%;
    display: block;
    width: 5vw;
    padding: 2.5vw 0;
    font-size: 4vw;
    font-style: normal;
    background-color: red;
    border-radius: 5vw;
    line-height: 0;
    color: white;
}

.btm_btn p {
    line-height: .8em;
}

.btm_btn.current p {
    color: red;
}

.btm_btn.current .index_icon {
    background-position: 0 -7vw;
}

.btm_btn .index_icon {
    background-position: 0 0;
}

.btm_btn.current .cat_icon {
    background-position: -7vw -7vw;
}

.btm_btn .cat_icon {
    background-position: -7vw 0;
}

.btm_btn.current .cart_icon {
    background-position: -14vw -7vw;
}

.btm_btn .cart_icon {
    background-position: -14vw 0;
}

.btm_btn.current .user_icon {
    background-position: -21vw -7vw;
}

.btm_btn .user_icon {
    background-position: -21vw 0;
}

.ktvip {
    position: absolute;
    top: 35%;
    right: 10%;
    color: yellow;
}