body {
    background: #8F1715;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #FFF6D9;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #FFF6D9;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #FFF6D9;
}
.ico-check input:checked+label {
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/ico_check.png);
}

.ico-check input {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

.wrapper {
    margin: 1.2rem auto 0;
    width: 7.5rem;
    height: 48.02rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/bg.jpg");
    font-family: 'CLOUDYUANCU';
    color: #fff;
    font-size: .2rem;
    overflow: hidden;
    box-sizing: border-box;
    background-size: 7.5rem 48.02rem;
}

.float-top {
    top: 0;
    left: 50%;
    padding: 0 .2rem 0 .15rem;
    width: 7.53rem;
    height: 1.22rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/bg_top.png");
    font-family: "Adobe 黑体 Std";
    color: #fff;
    font-size: .4rem;
    line-height: 1.2;
    z-index: 99;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.float-top .name {
    font-family: 'CLOUDYUANCU';
}

.float-top .logo {
    margin-right: .15rem;
}

.float-top .logo img {
    width: 1.02rem;
}

.float-top .desc {
    display: block;
    font-size: .2rem;
    color: #ffe787;
    white-space: nowrap;
}

.float-top .btn-download-top {
    top: .2rem;
    right: .2rem;
    width: 2.34rem;
    height: .7rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/btn_download_top.png");
}

.float-top .start-list {
    font-size: .19rem;
}

.float-top .ico-star {
    display: inline-block;
    width: .21rem;
    height: .2rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_star.png");
}

.btn-online-service,
.btn-ruler,
.btn-vip-service {
    top: .4rem;
    right: .2rem;
    width: .82rem;
    height: .87rem;
}

/* .btn-service {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_sevice.png");
} */

.btn-ruler {
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_ruler.png");
}

.btn-online-service {
    top: 1.5rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_onlineSevice.png");
}
.btn-vip-service {
    top: 2.5rem;
    right: .05rem;
    width: 1.12rem;
    height: 1.03rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_onlineSevice2.png");
}

.sub-title {
    margin: 9rem auto .1rem;
    width: 6.54rem;
    height: .94rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/sub_title.png");
}

.date {
    margin: 0 auto 0;
    padding: .02rem .3rem;
    width: fit-content;
    font-size: .2rem;
    color: #fff;
}

.date span {
    color: #04ea0c;
}

.btn-download {
    margin: .3rem auto 0;
    width: 6.06rem;
    height: 1.46rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/btn_download.png");
}


.item-account {
    padding: 0 1.3rem .05rem;
    width: 7.5rem;
    height: 2.21rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/bg_login.png");
    box-sizing: border-box;
}

.ico-head {
    width: .8rem;
    height: .8rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_head.png");
}

.ico-head img {
    width: .7rem;
    height: .7rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.btn-to-login {
    margin-left: .5rem;
    width: 2.56rem;
    height: .89rem;
    color: #fdf3e0;
    font-size: .32rem;
    font-weight: bold;
}

.item-account .con-right {
    flex: 1;
}

.account-info {
    margin-left: .3rem;
    height: .89rem;
    text-align: left;
    color: #fff;
}

.account-info button {
    color: #fffdd1;
}
.account-info .user-id{
    font-size: .23rem;
    color: #fdf3e0;
}
.account-info .user-name{
    width: 3rem;
    font-size: .32rem;
    color: #fdf3e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-info .ico-exchange{
    top: 50%;
    right: .2rem;
    width: .47rem;
    height: .4rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/ico_exchange.png);
    transform: translateY(-50%);
}

.item-title {
    text-align: center;
}

.item-title img {
    height: 1.62rem;
}

.item-rank .item-title img {
    height: 2.04rem;
}

.item-charts .item-title img {
    height: 2.04rem;
}

.item-sub-title {
    font-size: .24rem;
    color: #ffe2c9;
    text-align: center;
}

.jackpot-total {
    margin: 0 auto;
    width: 7.38rem;
    height: 3.06rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/bg_mt.png");
    -webkit-flex-flow: column;
    flex-flow: column;
}
.jackpot-total .ico-record{
    top: .78rem;
    right: .55rem;
    width: 1.06rem;
    height: 1.31rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_record.png");
}
.jackpot-total .total-bot {
    margin: 0 0 .1rem;
    font-size: .38rem;
    color: #b91113;
}

.jackpot-total .total-top img,
.jackpot-total .total-bot img {
    height: .32rem;
}

.jackpot-total .total-num {
    margin: .6rem auto 0;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    transform-origin: top center;
}

.jackpot-total .total-num span {
    display: inline-block;
    height: .71rem;
}

.jackpot-total .total-num .num-00 {
    width: .52rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_00.png");
}

.jackpot-total .total-num .num-01 {
    margin-right: .05rem;
    width: .28rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_01.png");
}

.jackpot-total .total-num .num-02 {
    width: .47rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_02.png");
}

.jackpot-total .total-num .num-03 {
    width: .48rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_03.png");
}

.jackpot-total .total-num .num-04 {
    width: .53rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_04.png");
}

.jackpot-total .total-num .num-05 {
    width: .49rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_05.png");
}

.jackpot-total .total-num .num-06 {
    width: .5rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_06.png");
}

.jackpot-total .total-num .num-07 {
    width: .51rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_07.png");
}

.jackpot-total .total-num .num-08 {
    width: .49rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_08.png");
}

.jackpot-total .total-num .num-09 {
    width: .49rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_09.png");
}
.jackpot-total .total-num .num-unknown{
    width: .47rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/num_unknown.png");
}

.notice-tips {
    margin-top: .1rem;
    color: rgba(190, 12, 4, .5);
    font-size: .16rem;
    width: 100%;
    word-break: break-word;
    line-height: 1;
}

.tips-jackpot {
    top: .2rem;
    text-align: center;
}

.tips-jackpot img {
    height: 1.34rem;
}



.item-jackpot .jackpot-award {
    margin: -.4rem auto 0;
    width: 7.5rem;
    height: 5.26rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/img_mt.png");
}

.item-jackpot .list-award {
    margin-top: 2.4rem;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;

}

.item-jackpot .award-name {
    margin-bottom: .15rem;
    color: #fff;
}


.item-jackpot .award-content [class*="award-0"] {
    position: relative;
    margin: 0 -.08rem;
}

.item-jackpot .award-content .award-01 {
    width: 1.63rem;
    height: 3.84rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/img_card_01.png);
}

.item-jackpot .award-content .award-02 {
    top: .15rem;
    width: 1.67rem;
    height: 3.9rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/img_card_02.png);
}

.item-jackpot .award-content .award-03 {
    top: .18rem;
    left: -.02rem;
    width: 1.64rem;
    height: 3.83rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/img_card_03.png);
}

.item-jackpot .award-content .award-04 {
    top: .15rem;
    left: -.02rem;
    width: 1.64rem;
    height: 3.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/img_card_04.png);
}

.item-jackpot .award-content .award-05 {
    left: -.07rem;
    width: 1.64rem;
    height: 3.85rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/img_card_05.png);
}


.item-jackpot .list-award .not-obtained {
    width: 1.4rem;
    height: 2.28rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/mask.png");
    z-index: 2;
}

#obtained0 {
    top: .45rem;
    left: .1rem;
}

#obtained1 {
    top: .6rem;
    left: .1rem;
}

#obtained2 {
    top: .65rem;
    left: .05rem;
}

#obtained3 {
    top: .6rem;
    left: .05rem;
}

#obtained4 {
    top: .45rem;
}

.item-jackpot .award-content li .award-text {
    position: relative;
    margin: -.1rem auto 0;
    padding-top: .04rem;
    width: 1.23rem;
    height: .52rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_card_num.png);
    color: #d25150;
    font-size: .18rem;
    text-align: center;
    z-index: 2;
    box-sizing: border-box;
}

.item-jackpot .award-content li .award-text span {
    color: #ff0000;
}


.item-progress {
    margin-top: 1.7rem;
}

.item-progress::after {
    content: "";
    position: absolute;
    top: -.3rem;
    left: 0;
    width: 7.5rem;
    height: 1rem;
    background: url("//png.pookcdn.net/new_net/lydr/activity3/rope.png") no-repeat;
    background-size: 100% 100%;
}

.btn-exchange {
    margin: .4rem auto;
    width: 4.65rem;
    height: 1.59rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/btn_synthesis.png);
}

.item-points {
    margin: .5rem auto 2.1rem;
    width: 5.76rem;
    height: 1.51rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_points.png);
    font-size: .28rem;
    color: #a3302a;
    line-height: 1;
    -webkit-flex-flow: column;
    flex-flow: column;
}

.item-points .num-points {
    font-size: .53rem;
    color: #e71005;
}

.item-points .ico-ruler {
    top: 48%;
    right: .3rem;
    width: .68rem;
    height: .68rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/ico_ruler_s.png");
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.panel {
    height: 4.88rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.panel::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 4.89rem;
    height: 4.83rem;
    background: url("//png.pookcdn.net/new_net/lydr/activity3/bg_lottery_after.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.panel .panel-face {
    background: url(//png.pookcdn.net/new_net/lydr/activity3/bg_lottery.png);
    background-size: 100% 100%;
    width: 4.88rem;
    height: 4.88rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.panel .panel-btn {
    width: 1.65rem;
    height: 1.95rem;
    position: absolute;
    top: 1.4rem;
    left: 50%;
    background: url(//png.pookcdn.net/new_net/lydr/activity3/btn_lottery.png) no-repeat;
    background-size: cover;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2;
}

.panel.playing .panel-btn {
    -webkit-transform: translateX(-50%) scale(0.9);
    transform: translateX(-50%) scale(0.9);
}


.pup .pup-title {
    margin-top: .5rem;
    font-size: .34rem;
    color: #a1674d;
    text-align: center;
}

.pup .pup-title img {
    height: .43rem;
}

.btn-close {
    top: 0;
    right: -.7rem;
    width: 1.36rem;
    height: 1.36rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity3/btn_close.png");
    z-index: 2;
    cursor: pointer;
}
.pup-code .btn-close,
.pup-login .btn-close {
    top: .35rem;
    right: .35rem;
    width: .34rem;
    height: .35rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/btn_close.png");
}
.pup-code .btn-close{
    top: .5rem;
    right: .5rem;
}

.pup-ruler {
    width: 4.45rem;
    height: 7.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_ruler.png);
}

.pup-details {
    width: 4.45rem;
    height: 7.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_ruler_lottery.png);
}

.pup-receive{
    top: 45%;
    width: 7.49rem;
    height: 12.65rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_receive.png);
}

.pup-receive .btn-close{
    top: 3rem;
    right: .7rem;
}
.pup-receive .receive-img{
    margin-top: 4.8rem;
    text-align: center;
}
.pup-receive .receive-img img{
    width: 1.61rem;
}

.pup-receive .receive-name{
    margin: .3rem 0;
    text-align: center;
    font-size: .4rem;
    -webkit-text-stroke: .05rem #B3321A;
}
.pup-receive .receive-name::after{
    content: attr(data-text);
    position: absolute;
    left: 50%;
    color: #fff;
    -webkit-text-stroke: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.address{
    bottom: -.4rem;
    text-align: center;
    width: 100%;
    color: #fff;
    text-decoration: underline;
    font-size: .24rem; 
}


.pup-code .content {
    margin: .2rem auto .2rem;
    width: 80%;
    text-align: center;
    font-size: .18rem;
    color: #95716a;
    line-height: 1.3;
    word-break: break-word;
    font-size: .26rem;
    -webkit-flex-flow: column;
    flex-flow: column;
}

.pup-congratulations{
    top: 45%;
    width: 7.5rem;
    height: 11.7rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_congratulations.png);
}
.pup-congratulations .btn-close{
    top: 2.2rem;
    right: .5rem;
}
.pup-encourage{
    width: 7.31rem;
    height: 10.91rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_encourage.png);
}
.pup-encourage .btn-close{
    top: 1.5rem;
    right: .5rem;
}

.pup-code {
    width: 5.36rem;
    height: 5.5rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity_1/0116/bg_pup_search.png");
}


.pup-common-tips {
    width: 5.36rem;
    height: 3.8rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity_1/0116/bg_pup_common.png");
}

.pup-common-tips .content {
    margin-top: .5rem;
    font-size: .24rem;
    color: #95716a;
}

.pup-common-tips .content .text {
    height: 1.8rem;
}

.pup-common-tips .btn-list {
    gap: .3rem;
    -webkit-transform: scale(.9);
    transform: scale(.9);
}

.btn-cancel {
    width: 2.2rem;
    height: .74rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity_1/btn_cancel.png);
}

.btn-sure {
    width: 2.2rem;
    height: .74rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity_1/btn_sure.png);
}


.pup-ruler .ruler-content,
.pup-details .details-content {
    margin: 1.7rem auto 0;
    width: 3.8rem;
    height: 5.4rem;
    font-size: .16rem;
    color: #fff;
    word-break: break-word;
    overflow: hidden;
}

.pup-tips {
    width: 7.4rem;
    height: .8rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/activity_1/bg_tip.png");
    font-size: .24rem;
    color: #fff;
    text-align: center;
    z-index: 120
}

.hint {
    position: fixed;
    background: rgba(0, 0, 0, 0) url(//png.pookcdn.net/new_net/bydrqp/pup_hint.png) no-repeat scroll 0 0 / 100% 100%;
    height: 5.4rem;
    right: .51rem;
    top: 0;
    width: 6.03rem;
    z-index: 120;
}


.pup-code .content input {
    width: 1.7rem;
    background: transparent;
    border: none;
    outline: none;
    color: #E56F3A;
}

.pup-code .content button {
    color: #E56F3A;
    text-decoration: underline;
}

.pup-code .content .code img {
    margin-top: .2rem;
    width: 2.5rem;
}

.pup-login {
    width: 6.37rem;
    height: 4.66rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/bg_pup_466.png");
}

.pup-login .login-tab {
    top: -.74rem;
    left: 50%;
    gap: .1rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pup-login .login-tab [class*="item-tab"] {
    width: 2.64rem;
    height: .93rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab.png");
    font-size: .28rem;
    color: #ffd274;
    line-height: .6rem;
    font-family: 'CLOUDYUANCU';
}

.pup-login .login-tab [class*="item-tab"].active {
    position: relative;
    top: .01rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab_active.png");
}

.pup-login .login-tab [class*="item-tab"] span {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -.05rem;
    height: .33rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pup-login .login-tab [class*="item-tab"].active span {
    top: -.02rem;
}

.pup-login .login-tab .item-tab-01 span {
    width: 1.83rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_01.png");
}

.pup-login .login-tab .item-tab-01.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_02.png");
}

.pup-login .login-tab .item-tab-02 span {
    width: 1.53rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_01.png");
}

.pup-login .login-tab .item-tab-02.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_02.png");
}

.pup-login .login-logo {
    margin-top: .4rem;
    text-align: center;
}

.pup-login .login-logo img {
    width: 2.79rem;
}

.pup-login .item-input {
    margin-bottom: .15rem;
    font-size: .28rem;
    color: #a1674d;
}

.pup-login .con-left {
    width: 1.4rem;
}

.pup-login .con-right {
    padding: 0 .1rem;
    width: 3.14rem;
    background: #D1BEA7;
    height: .46rem;
    color: #FFF6D9;
    line-height: .4rem;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.pup-login .con-right input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'CLOUDYUANCU';
    text-align: center;
}

.pup-login .phone-login {
    margin-top: .6rem;
}

.pup-login .phone-login .con-right {
    width: 3.76rem;
}

.pup-login .phone-login input {
    text-align: left;
}

.pup-login .phone-login .con-right span {
    position: relative;
    padding-right: .1rem;
    margin-right: .1rem;
}

.pup-login .phone-login .con-right span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .02rem;
    height: .25rem;
    background: #FFF6D9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pup-login .phone-login .con-right button {
    width: 1.9rem;
    color: #e44936;
    font-size: .2rem;
    text-align: center;
}

.pup-login .tips-read {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    font-size: .18rem;
    color: #95716a;
}

.pup-login .tips-read a {
    color: #95716a;
    text-decoration: underline;
}

.pup-login .tips-read .ico-check {
    width: .23rem;
    height: .23rem;
    background: #C3B19A;
    border: none;
    margin-right: .1rem;
}

.pup-login .tips-read .ico-check label {
    position: absolute;
    top: -.07rem;
    left: -.05rem;
    width: .38rem;
    height: .3rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.btn-register {
    bottom: .9rem;
    right: .8rem;
    font-size: .24rem;
    color: #95716a;
    text-decoration: underline;
}

.pup-login .account-tab button {
    margin: .2rem .2rem;
    width: 2.06rem;
    height: .59rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pup-login .account-tab .item-tab-01 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_01.png");
}

.pup-login .account-tab .item-tab-02 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_01.png");
}

.pup-login .account-tab .item-tab-01.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_02.png");
}

.pup-login .account-tab .item-tab-02.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_02.png");
}
.btn-login {
    margin: .2rem auto;
    width: 2.18rem;
    height: .72rem;
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/btn_login.png);
}

.pup-receive-card::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.36rem;
    height: 14.3rem;
    background: url(//png.pookcdn.net/new_net/lydr/activity3/bg_card_after.png) no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.pup-receive-card .receive-title{
    margin: 0 auto;
    width: 3.65rem;
    height: 1.85rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/car_pup_title.png);
}
.pup-receive-card .btn-close{
    top: .2rem;
    right: -1.2rem;
}
.pup-receive-card  .receive-img{
    z-index: 2;
}
.pup-receive-card .receive-img {
    perspective: 1200px;
    -webkit-perspective: 1200px;
}

@keyframes card-pop {
    0% {
        transform: scale(0.2);
        -webkit-transform: scale(0.2);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.02);
        -webkit-transform: scale(1.02);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
.pup-receive-card .card-flip-wrap {
    display: inline-block;
    transform: scale(1);
    -webkit-transform: scale(1);
}
.pup-receive-card.card-flip-in .card-flip-wrap {
    animation: card-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    -webkit-animation: card-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pup-receive-card .receive-img img{
    width: 4.47rem;
    display: block;
}
.pup-receive-card .receive-name{
    margin: .2rem 0;
    text-align: center;
    font-size: .4rem;
    -webkit-text-stroke: .05rem #B3321A;
}
.pup-receive-card .receive-name::after{
    content: attr(data-text);
    position: absolute;
    left: 50%;
    color: #fff;
    -webkit-text-stroke: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.btn-receive{
    margin: 0 auto;
    width: 2.79rem;
    height: 1.34rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/btn_receive_pup.png);
    z-index: 2;
}

.pup-record{
    width: 4.45rem;
    height: 7.89rem;
    background-image: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pup_record.png);
}
.pup-record .record-content{
    margin: 1.6rem auto 0;
    width: 4.13rem;
    text-align: center;
    font-size: .2rem;
    color: #e1e1e1;
}
.pup-record .record-content .con-01{
    width: 2.17rem;
}
.pup-record .record-content .con-02{
    width: .81rem;
}

.pup-record .record-content .con-03{
    width: 1.14rem;
}
.pup-record .record-content .record-title{
    margin-bottom: .1rem;
}
.pup-record .record-content .record-list {
    height: 5.2rem;
    font-size: .2rem;
    color: #fff;
    overflow: hidden;
}
.pup-record .record-content .record-list li{
    display: -webkit-flex;
    display: flex;
    margin-bottom: .1rem;
    padding: .05rem;
    box-sizing: border-box;
    background: rgba(195,42,0, .58);
}

.pup-record .record-content .record-list li .con-01{
    text-align: left;
    line-height: 1.2;
}
.pup-record .record-content .record-list li .con-02{
    font-size: .46rem;
    line-height: 1;
}

@media only screen and (max-width: 360px) {
    .pup-login,
    .pup-receive,
    .pup-ruler,
    .pup-details,
    .pup-congratulations,
    .pup-receive-card,
    .pup-encourage,
    .pup-code,
    .pup-record{
        top: 3.8rem;
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
    .pup-login,
    .pup-code{
        top: 5rem;
    }
    .pup-receive{
        top: 1rem;
    }
    .pup-congratulations,
    .pup-receive-card,
    .pup-encourage  {
        top: 1.8rem;
    }

}

@media only screen and (max-width: 780px) and (orientation: landscape) {


}

@media only screen and (min-width: 1024px) {
    html {
        overflow: hidden;
    }

    body {
        width: 100%;
        height: 100vh;
        background: url(//png.pookcdn.net/new_net/lydr/activity3/bg_pc.jpg) no-repeat;
        background-size: cover;
        background-position: top center;
        overflow: auto;
    }

    .float-top {
        left: calc(50% - .07rem);
    }
}