/* 移动端常用reset.css (无文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
.clearfix {
    *zoom: 1;
}

body,html{
	width:100%;
	height: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling : touch;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background:#fff;
	margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
	position: relative;
}

/* @font-face {
	font-family: 'DINMedium';
	src: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/ttf/DINMedium.ttf');
} */

#alert {
    background: #015cb7;
    color: #fff;
    position: fixed;
    display: block;
    width: 4rem;
    height: .5rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-border-radius: .04rem;
    -moz-border-radius: .04rem;
    border-radius: .04rem;
    /* margin-left: -1rem; */
    /* margin-top: -.2rem; */
    z-index: 999;
    font-size: 0.12rem;
    text-align: center;
    line-height: .5rem;
}

/* #alert {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999;
}

#alert span {
    width: 326px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 14px;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: #000102;
}

#alert span.right {
    border: #0ad6f1 solid 2px;
    color: #0ad6f1;
}

#alert span.error {
    border: #b0423a solid 2px;
    color: #b0423a;
} */

.musicWrap {
    width: .6rem;
    height: .6rem;
    overflow: hidden;
    margin-right: .2rem;
    margin-top: .2rem;
}

.musicWrap span {
    float: left;
    color: #ffffff;
    font-size: 0.12rem;
    line-height: 0.36rem;
    margin-right: .1rem;
}

.music {
    width: 26px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    float: left;
}

.music i {
    width: 3px;
    background-color: #d9e2e8;
    height: 16px;
    margin: 0 1px;
}

.music.active i:nth-of-type(5) {
    -webkit-animation: wave .8s linear infinite;
    animation: wave .8s linear infinite
}

.music.active i:first-of-type {
    -webkit-animation: wave .5s linear infinite;
    animation: wave .5s linear infinite
}

.music.active i:nth-of-type(2) {
    -webkit-animation: wave .7s linear infinite;
    animation: wave .7s linear infinite
}

.music.active i:nth-of-type(3) {
    -webkit-animation: wave .9s linear infinite;
    animation: wave .9s linear infinite
}

.music.active i:nth-of-type(4) {
    -webkit-animation: wave 1.1s linear infinite;
    animation: wave 1.1s linear infinite
}

@keyframes wave {
    0% {
        height: 7px;
    }
    50% {
        height: 24px;
    }
    to {
        height: 12px;
    }
}


.wrap {
    position: relative;
    width: 100%;
    /* height: 100%; */
    /* background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/backgroundImage.png'); */
    /* background-size: cover; */
    /* background-position: center bottom; */
    /* background-repeat: no-repeat; */
}

.bgImge {
    width: 100%;
}


.header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: absolute;
    top: .4rem;
    width: 7.5rem;
}

.qyn_logo {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/qyn_logo.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 2.04rem;
    height: 0.95rem;
    margin-left: .4rem;
}

.right_box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.gw_logo {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/gw_logo.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 2.28rem;
    height: 0.80rem;
    margin-right: .4rem;
}

.music_logo {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/music_log.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width:  0.71rem;
    height: 0.71rem;
    margin-top: .05rem;
    margin-right: .4rem;
}

.header_text {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/header2.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 4.97rem;
    height: 0.37rem;
    margin: .5rem auto;
}

.content_box {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 2rem auto;
    width: 7rem;
    height: 6rem;
}

.advice {
    color: #fff;
    width: 5.62rem;
    height: 0.86rem;
    position: absolute;
    bottom: 18%;
    left: .2rem;
}

.pushMore_btn {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/cg_default.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 3.77rem;
    height: 1.21rem;
    margin: .2rem auto 0;
    cursor: pointer;
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    -o-animation-delay: .9s;
}

.tool_tips {
    font-size: .14rem;
    color: #6180a9;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 1.5rem;
    transform: translate(-50%, -50%);
}

.rules_box {
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
}

.right_rules {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/right_rules.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 2.96rem;
    height: 0.62rem;
    cursor: pointer;
    margin: .6rem auto;
}

.rules {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/rules.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 6.79rem;
    height: 5.96rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 120;
}

.rules_close {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/rules_close.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 0.7rem;
    height: 0.67rem;
    position: absolute;
    cursor: pointer;
    right: -0.1rem;
    top: -0.1rem;
}

.cy_player {
    font-size: .28rem;
    color: #000;
    width: 5.7rem;
    height: .98rem;
    margin: 0 auto;
    text-align: center;
    animation-delay: .7s;
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    -o-animation-delay: .7s;
    font-weight: 600;
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/cy_player.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    text-align: center;
}

.countPeople {
    color: #b0423a;
}

.time_box{
    /* width: 100%;
    height: 100%; */
}

.timer_bg {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/time_box2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1.7rem;
    height: 1.3rem;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    text-align: center;
    line-height: 1.3rem;
    /* font-family: DINMedium; */
}

.maoH {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/mh.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 0.17rem;
    height: 0.55rem;
    margin: 0 0.1rem .1rem;
}

.time_ui {
    width: 4.4rem;
    white-space: nowrap;
    margin: 0 auto;
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -o-animation-delay: .3s;
}

.time_ui_time {
    width: 6rem;
    white-space: nowrap;
    margin: .2rem auto;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
}

.date_text {
    color: #fff;
    margin-right: 0.2rem;
    /* font-weight: 600; */
    position: relative;
}

.date_text span {
    height: 0.1rem;
    position: absolute;
    bottom: 0;
}

li {
    display: inline-block;
    color: #fff;
}

.page_bottom {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/page_bottom.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 7.5rem;
    height: 2.95rem;
}

.person {
    position: absolute;
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/person.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 7.5rem;
    height: 5.82rem;
    top: 50%;
    transform: translateY(20%);
    /* bottom: 1.1rem; */
    pointer-events: none;
}

.loginWrap {
    display: none;
    position: absolute;
    right: 0;
    bottom: 20%;
}

.loginOnWrap {
    /* position: absolute; */
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/logout.png');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 2.78rem;
    height: 0.53rem;
    /* right: -0.25rem;
    top: 4.5rem; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.loginItem {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 1rem;
    text-align: center;
    color: #fff;
}

.loginText {
    margin-left: .2rem;
    width: 1.4rem;
    height: 0.53rem;
    line-height: 0.53rem;
}

.loginOutBtn {
    border: .01rem solid #fff;
    height: .4rem;
    line-height: .4rem;
    box-sizing: border-box;
    margin-top: .06rem;
    margin-right: .05rem;
}


.mask_container {
    display: none;
}

#yuyuePop .yuyue-wrap {
    top: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s
}

#yuyuePop .yuyue-wrap .yuyue {
    width: 5.58rem;
    height: 5.2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#yuyuePop .yuyue-wrap .yuyue .yuyueTitle {
    position: relative;
    width: 4.88rem;
    height: 1.02rem;
    margin: 0 auto 0.16rem;
    background: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/login_title.png') no-repeat;
    background-size: 100% 100%;
}

#yuyuePop .yuyue-wrap .yuyue .type-wrap {
    display: none;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap {
    position: relative;
    display: block;
    width: 5.4rem;
    height: 0.8rem;
    margin: 0 auto;
    padding-bottom: 0.16rem;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap img {
    height: 0.8rem;
    width: auto;
    position: absolute;
    top: 0;
    left: 2.84rem;
    cursor: pointer;
    border: 0.01rem solid #a1a6ad
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap .getcode {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    top: 0;
    right: 0;
    background: #015cb7;
    cursor: pointer;
    border: .01rem solid #a1a6ad;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap .getcode:before {
    position: absolute;
    display: block;
    content: "";
    width: 0.48rem;
    height: 0.56rem;
    left: 50%;
    top: 50%;
    margin-left: -0.24rem;
    margin-top: -0.28rem;
    background: url('https://static.web.sdo.com/qynh5/pic/ChannelGift/mobile//updateBtn.png') no-repeat;
    background-size: 100% 100%;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap input {
    font-size: 0.24rem;
    background: #fff;
    height: 0.8rem;
    text-indent: 0.3rem;
    border: .01rem solid #a1a6ad;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap input#telInput {
    width: 5.38rem;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap input#codeInput {
    width: 2.7rem;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap input#messInput {
    width: 3.5rem;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap .getMesscode {
    position: absolute;
    display: block;
    width: 2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.24rem;
    color: #f1f5f8;
    text-align: center;
    top: 0;
    right: 0;
    background: #015cb7;
    cursor: pointer;
    border: .01rem solid #015cb7;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap.submit {
    width: 4.83rem;
    height: 0.85rem;
    margin-top: 0.1rem;
    opacity: .8;
    background: url('https://static.web.sdo.com/qynh5/pic/ChannelGift/mobile//yuyueBtn.png') no-repeat;
    background-size: contain;
    cursor: pointer;
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap.submit.active {
    cursor: pointer
}

#yuyuePop .yuyue-wrap .yuyue .input-wrap.submit.active:hover {
    opacity: 1
}

#yuyuePop.active .yuyue-wrap {
    opacity: 1
}

.loginPop {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .8);
}

.loginPop .content {
    position: absolute;
    display: block;
    width: 6.71rem;
    height: 6.56rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.loginPop .content1 {
    height: 2.65rem;
}

.content .ceil {
    position: absolute;
    z-index: 2;
    width: 6.71rem;
    height: 0.2rem;
    left: 0;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: top, bottom;
    -o-transition-property: top, bottom;
    -moz-transition-property: top, bottom;
    transition-property: top, bottom;
    background: url('https://static.web.sdo.com/qynh5/pic/ChannelGift/mobile//scrollImg.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.content .ceil.ceil1 {
    top: 3.15rem;
}

.content .ceil.ceil2 {
    bottom: 3.15rem;
}

.content1 .ceil.ceil1 {
    top: 1.22rem;
}

.content1 .ceil.ceil2 {
    bottom: 1.22rem;
}

.content .ceil-wrap {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    display: block;
    width: 6.13rem;
    height: 6.36rem;
    z-index: 1;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: -o-transform;
    -moz-transition-property: transform, -moz-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform, -moz-transform, -o-transform;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    background: url('https://static.web.sdo.com/qynh5/pic/ChannelGift/mobile//ceilWrapDBg.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

.loginPop.active .content .ceil-wrap {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1)
}

.loginPop.active .content .ceil1 {
    top: 0;
}

.loginPop.active .content .ceil2 {
    bottom: 0;
}

.loginPop .content .close {
    opacity: 0;
    position: absolute;
    width: 0.55rem;
    height: 0.54rem;
    cursor: pointer;
    right: 0.5rem;
    top: 0.4rem;
    z-index: 4;
    transition: all 0.4s linear 0.4s;
    -webkit-transition: all 0.4s linear 0.4s;
    background: url('https://static.web.sdo.com/qynh5/pic/ChannelGift/mobile//popCloseBtn.png') no-repeat;
    background-size: 100% 100%;
}

.loginPop .content .close1 {
    right: 0.34rem;
    top: 0.22rem;
}

.loginPop.active .content .close {
    opacity: 1;
}

.loginPop .content .close:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}


.mask {
    background: #000;
    opacity: .9;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    position: fixed;
    display: none;
    top: 0;
}

.cg_tips_img {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/cg_tips_img1.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 6.65rem;
    height: 11.37rem;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 120;
    display: none;
}

.handle_submit {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/handleSubmit.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    width: 3.08rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-47%, 195%);
    cursor: pointer;
}

#animation_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-32%, -50%);
    width: 4.44rem;
    height: 6.27rem;
    z-index: 120;
    display: none;
}

.hit_title {
    position: absolute;
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/hit_title4.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 5.83rem;
    height: 1.51rem;
    top: 1.2rem;
    left: 50%;
    transform: translate(-63%, -246%);
}

.blood_slot {
    width: 7.12rem;
    height: 0.50rem;
    position: absolute;
    /* top: 50%; */
    left: 50%;
    transform: translate(-61%, -138%);
}

.blood_slot_box {
    position: relative;
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/web_img/empty_blood.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: .25rem;
}

.blood_time {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/blood_timer.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 0.25rem;
    position: absolute;
    /* margin: 12px 0 0 32px; */
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
}

.clock_time {
    position: absolute;
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/web_img/clock_time.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 0.5rem;
    height: 0.5rem;
    top: -0.12rem;
    left: -0.1rem;
}

.hit_person {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/hit_before.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 4.44rem;
    height: 6.27rem;
    position: relative;
    cursor: pointer;
    /* margin: 0 auto; */
}

.hitActive {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/hit.png') !important;
    width: 3.14rem !important;
    height: 6.01rem !important;
}


.congratulation {
    z-index: 120;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: none;
}

.contrain_box {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/wap_img/congratulation_bg.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 6.47rem;
    height: 4.37rem;
    position: relative;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.close_tips {
    background-image: url('https://static.web.sdo.com/qynh5/pic/202202119_pushMore/web_img/close_tips.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 0.56rem;
    height: 0.56rem;
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    cursor: pointer;
}

.close_tips:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}

.pushMoreNum {
    font-size: 0.14rem;
    color: #836f4e;
    text-align: center;
    position: absolute;
    top: 86%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pushMoreNum span {
    color: #b0423a;
}

.congratulation_text {
    color: #b0423a;
    font-size: .9rem;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -126%);
    white-space: nowrap;
}

.use_time {
    font-size: 0.24rem;
    color: #3c281b;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-114%, -100%);
}

.all_use_time {
    font-size: 0.24rem;
    color: #3c281b;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(20%, -100%);
}

.timeUse {
    font-size: 0.5rem;
    color: #3c281b;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-114%, 24%);
}

.allTime {
    font-size: 0.5rem;
    color: #3c281b;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(20%, 24%);
}


.minus_time_box {
    width: 2rem;
    position: absolute;
    animation: minusAni 1s linear;
    opacity: 0;
    top: -0.12rem;
    left: -10%;
    transform: translateX(-88%);
}

.minus_time_box2 {
    width: 2rem;
    position: absolute;
    animation: minusAni 1s linear;
    opacity: 0;
    top: -0.12rem;
    left: 30%;
    transform: translateX(-88%);
}

.minus_time {
    font-size: 0.32rem;
    color: #ffbe5d;
    text-align: center;
    user-select: none;
    animation: minusAni2 1s linear;
}


@keyframes minusAni {
    from {
        transform: translateY(0%);
        opacity: 1;
    }
    to {
        transform: translateY(-200%);
        opacity: 0;
    }
}


@keyframes minusAni2 {
    from {
        transform: scale(0.5);
    }
    to {
        transform: translateY(2);
    }
}