.vip-card{position:relative;width:100%;height:auto;min-height:100px;padding:20px}.vip-card .vip-card-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vip-card .vip-card-bg.vip-card-bg-img{background-size:100% 100%;background-position:50%;background-repeat:no-repeat}.vip-card .vip-card-content{position:relative;z-index:2}.vip-card .vip-card-content .vip-card-name,.vip-card .vip-card-content .vip-card-term{font-size:18px;font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;line-height:1.8}.vip-card .vip-card-content .vip-card-term{font-size:14px;font-weight:400;margin-top:4px}.vip-card.vip-card-style-square{overflow:hidden}.vip-card.vip-card-style-square .vip-card-bg:after,.vip-card.vip-card-style-square .vip-card-bg:before{content:"";display:block;width:100%;height:100%;position:absolute;right:0;top:0;-webkit-transform:translate(50%,-10%) rotate(-25deg);transform:translate(50%,-10%) rotate(-25deg);background-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.3)));background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3))}.vip-card.vip-card-style-square .vip-card-bg:after{-webkit-transform:translate(40%,-20%) rotate(-25deg);transform:translate(40%,-20%) rotate(-25deg)}.vip-card.vip-card-style-circle{overflow:hidden}.vip-card.vip-card-style-circle .vip-card-bg:after,.vip-card.vip-card-style-circle .vip-card-bg:before{content:"";display:block;width:200px;height:200px;position:absolute;right:0;top:0;border-radius:100%;-webkit-transform:translate(50%,-10%) rotate(-25deg);transform:translate(50%,-10%) rotate(-25deg);background-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,.1)),to(hsla(0,0%,100%,.3)));background-image:linear-gradient(90deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.3))}.vip-card.vip-card-style-circle .vip-card-bg:after{-webkit-transform:translate(40%,-50%) rotate(-25deg);transform:translate(40%,-50%) rotate(-25deg)}.vip-card.storevalue-card{padding-top:10px}.vip-card.storevalue-card .vip-card-content{position:relative;z-index:2}.vip-card.storevalue-card .vip-card-content .vip-card-name{font-size:14px;border-bottom:1px solid hsla(0,0%,100%,.2);padding-bottom:6px;margin-bottom:12px}.vip-card.storevalue-card .vip-card-content .vip-card-amount{font-size:24px;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;line-height:1;text-align:center}.vip-card.storevalue-card .vip-card-content .vip-card-amount span:before{content:"¥";font-size:12px;display:inline}.vip-card.storevalue-card .vip-card-content .vip-card-amount label{display:block;font-size:12px;margin-bottom:8px;line-height:1}.vip-card.storevalue-card .vip-card-content .storevalue-card-bar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.vip-card.storevalue-card .vip-card-content .storevalue-card-bar .vip-card-give,.vip-card.storevalue-card .vip-card-content .storevalue-card-bar .vip-card-recharge{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;font-size:18px;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;line-height:1}.vip-card.storevalue-card .vip-card-content .storevalue-card-bar .vip-card-give label,.vip-card.storevalue-card .vip-card-content .storevalue-card-bar .vip-card-recharge label{display:block;font-size:12px;margin-top:8px;line-height:1}.vip-card.storevalue-card .vip-card-content .storevalue-card-bar .vip-card-recharge{border-right:1px solid hsla(0,0%,100%,.2)}.vip-card.storevalue-card .vip-card-content .vip-card-term{font-size:12px}