.red-page{margin:0 auto;max-width:400px;height:100vh;overflow:auto;background:url(/image/welfare/bg.png) no-repeat;background-size:100%}.red-page .title-wrap{position:relative}.red-page .title-wrap .back-btn{top:0;left:0;position:absolute;width:48px;height:28px;background:url(/image/welfare/back.png) no-repeat 50%;background-size:9px 15px}.red-page .title-wrap .title{height:28px;background:url(/image/welfare/title.png) no-repeat 50%;background-size:155px 21px}.red-page .red-text{margin-top:50px;text-align:center;font-weight:700;color:#fff7bb;text-shadow:0 3px 5px rgba(128,36,0,.6);background:linear-gradient(0deg,#fff7bb,#ffefcc);-webkit-background-clip:text}.red-page .red-text .red-text-msg{padding:0 10px;font-size:32px;margin:0}.red-page .red-text .red-text-tip{font-size:30px;margin:0}.red-page .red-wrap{padding:20px 15%}.red-page .red-wrap .red-box{perspective:600px}.red-page .red-wrap .red-box .red-chest{transition:all .1s}.red-page .red-wrap .red-box .red-chest .un-open-red-wrap{position:relative}.red-page .red-wrap .red-box .red-chest .un-open-red-wrap .red-bg-wrap .red-bg{-webkit-user-drag:none;max-width:100%}.red-page .red-wrap .red-box .red-chest .un-open-red-wrap .open-btn{top:calc(36% - 44px);left:calc(50% - 44px);width:88px;height:88px;background:url(/image/welfare/open.png) no-repeat;background-size:100%;position:absolute;z-index:1}.red-page .red-wrap .red-box .red-chest .open-red-wrap{position:relative}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-bg-wrap{z-index:0}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-bg-wrap .red-bg{-webkit-user-drag:none;max-width:100%}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content{text-align:center}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .price{position:absolute;width:100%;font-size:36px;font-weight:700;color:#ff3d10;top:calc(23% - 20px)}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .price .unit{padding-right:5px;font-size:20px;font-weight:400}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .message{top:calc(33% - 20px);position:absolute;width:100%;font-size:16px;font-weight:400;color:#ff3d10}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .message .word{display:block;margin:auto;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .balance-view-wrap{position:absolute;width:100%;top:70%}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .balance-view-wrap .balance-view{margin:auto;text-align:center;width:65%;background:#fbb101;box-shadow:0 5px 3px 0 rgba(128,36,0,.44);border-radius:5px}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .balance-view-wrap .balance-view .btn{font-size:16px;font-weight:700;color:#f23026;transition:all .3s}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .balance-view-wrap .balance-view .btn :active{transition:all .3s;transform:translateY(2px) translateX(2px)}.red-page .red-wrap .red-box .red-chest .open-red-wrap .red-content .text{top:85%;position:absolute;width:100%;font-size:14px;font-weight:400;color:#ff8983}.bounce-enter-active{animation:bounce-in .5s}.bounce-leave-active{animation:bounce-in .5s reverse}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}