p { margin: 0; }

/* vue transition */
.fade-enter, .fade-leave-to { opacity: 0; }
.fade-enter-active, .fade-leave-active { -webkit-transition: opacity 0.24s; transition: opacity 0.24s; }
.fade-enter-to, .fade-leave { opacity: 1; }

/* popup */
.popup-mask, .popup-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; }
.popup-mask { background-color: rgba(0, 0, 0, 0.45); }
.popup-wrap { overflow-y: auto; }
.popup-modal { position: relative; width: 520px; margin: 0 auto; }
.popup-modal-center { text-align: center; }
.popup-modal-center::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.popup-modal-center .popup-modal { display: inline-block; vertical-align: middle; }
.popup-modal-close { position: absolute; color: #fff; cursor: pointer; -webkit-transition: all 0.48s; transition: all 0.48s; }
.popup-modal-close:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.popup-modal-close .i-icon { font-size: 32px; }

@media (max-width: 521px) {
    .popup-modal { width: calc(100% - 32px) }
}

/* activity */
.act { font-weight: 500; color: #323233; background-image: linear-gradient(to bottom, #230a41 0%, #42143d 15%, #a12f2f 42%, #bd442c 70%, #ba0000 100%); }
.act-container { box-sizing: content-box; max-width: 750px; margin: 0 auto; }
.act-placeimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; color: #fff; }


/* header */
.act-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 9; height: 0.8rem; font-size: 0.28rem; background-color: #230a41; }
.act-header .act-container { display: -webkit-flex; display: flex; height: 100%; padding-left: 16px; }
.act-header-countdown { -webkit-flex: 1; flex: 1; color: #fff; line-height: 0.8rem; }
.act-header-countdown > span { margin: 0 0.2em; padding: 0.2em; color: #6200b2; background-color: #fff; border-radius: 24%; }


/* banner */
.banner { position: relative; max-width: 750px; margin: 0 auto; }
.banner .record-swipe { position: absolute; top: 5.6666666%; left: 0; width: 100%; height: 5%; z-index: 1; cursor: default; }
.banner .record-swipe-item {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
    font-size: 0.28rem;
    color: #ffd7d7;
}
.banner-dice {
    position: absolute;
    top: 31.333333%;
    left: 50%;
    z-index: 1;
    width: 90%;
    height: 34%;
    transform: translateX(-50%);
}
.banner-dice .gif { position: absolute; top: 52%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.banner-dice .dice  { position: absolute; z-index: 1; width: 1rem; height: 1rem; }
.banner-dice .dice0 { top: 52%; left: 40%; }
.banner-dice .dice1 { top: 58%; left: 18%; }
.banner-dice .dice2 { top: 71%; left: 32%; }
.banner-dice .dice3 { top: 74%; left: 50%; }
.banner-dice .dice4 { top: 46%; left: 55%; }
.banner-dice .dice5 { top: 62%; left: 65%; }

.banner-action {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 24.8%;
    -webkit-justify-content: space-around;
            justify-content: space-around;
    -webkit-align-items: center;
            align-items: center;
}
.banner-action-left, .banner-action-right {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.24rem;
    color: #f93c00;
    text-align: center;
    line-height: 1;
    background-color: #fedf9b;
    border-radius: 100px;
    cursor: pointer;
}
.banner-action-main .play-count {
    font-size: 0.28rem;
    color: #fff;
    text-align: center;
}
.banner-action-main .play-button {
    width: 3.6rem;
    margin-top: 0.48rem;
    cursor: pointer;
}


/* 活动规则 */
.rules .popup-close { position: absolute; top: 48px; right: -48px; z-index: 1; }
.rules .popup-modal { position: relative; top: 0.8rem; }
.rules .popup-modal-inner { padding-bottom: 32px; }
.rules .popup-modal-close { top: 0; right: 0; }



/* 中奖结果 */
.receive .popup-modal { position: relative; top: 100px; }
.receive-container-wrap { position: relative; padding-top: 103%; background: url("/statics/images/activity/bobing_1/receive-bg.png") no-repeat 50% 0/cover; }
.receive-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: space-around;
            justify-content: space-around;
    -webkit-align-items: center;
            align-items: center;
}
.receive-container .receive-title {
    font-size: 0.44rem;
    color: #ff4d00;
}
.receive-container .receive-type {
    padding: 0.06rem 0.48rem;
    font-size: 0.32rem;
    color: #fddd8e;
    text-align: center;
    background-color: #ff4d00;
    border-radius: 8px;
}
.receive-container .receive-disc {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
            justify-content: space-around;
    max-width: 84%;
}
.receive-container .receive-disc .dice {
    flex: 1;
    margin-left: 8px;
}
.receive-container .receive-disc .dice:first-child { margin-left: 0; }
.receive-container .receive-button {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
            justify-content: space-around;
    width: 100%;
    cursor: pointer;
}


/* 中奖结果 */
.play-result-container { position: relative; padding-top: 103%; background: url("/statics/images/activity/bobing_1/receive-bg.png") no-repeat 50% 0/contain; }
.play-result-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; text-align: center; }
.play-result .result-title { padding: 0.4rem 0; font-size: 0.44rem; font-weight: 600; }
.play-result .result-title > .hl { display: inline; color: #fc4d01; }
.play-result .result-content { padding-bottom: 0.4rem; font-size: 0.36rem; color: #fc4d01; }
.play-result .receive-dice { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; padding-bottom: 0.4rem; }
.play-result .receive-dice .dice { width: 0.6rem; margin-left: 0.08rem; }
.play-result .result-image { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 0; }
.play-result .result-button-wrap { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; padding: 0.4rem 0 0.4rem 0.32rem; }
.play-result .result-button { flex-shrink: 0; width: 50%; padding-right: 0.32rem; cursor: pointer; }
.play-result .result-button:first-child { margin-left: 0; }
.play-result .popup-modal-close { left: 50%; bottom: -48px; margin-left: -16px; }

.play-result .result-nocount { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: center; align-items: center; height: 100%; padding: 1.2rem 0; }
.play-result .result-nocount-image { box-sizing: content-box; height: 1.16rem; padding-bottom: 0.4rem; }
.play-result .result-nocount .result-button { padding: 0; }


/* 吸底 */
.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; height: 1rem; background-color: #fff3dd;  }
.fixed-bottom .act-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 0 0.32rem; height: 100%; }
.fixed-bottom-tip { -webkit-align-self: flex-end; align-self: flex-end;  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 100%; }
.fixed-bottom-tip .image { -webkit-align-self: flex-end; align-self: flex-end; height: 1.4rem; }
.fixed-bottom-tip .tip { margin-left: 0.08rem; font-size: 0.24rem; }
.fixed-bottom-button { height: 0.68rem; cursor: pointer; }


/*弹框 我的奖品*/
.my-prize .prize-box {  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #BF4336; border: 1px solid #FDDD8E; border-radius: 17px; width: 343px; height: 529px; }
.my-prize .prize-title { position: absolute; top: -1%; left: 50%; transform: translate(-50%, -50%); width: 76%; }
.my-prize .prize-list { padding: 0.28rem 0.32rem; overflow-y: auto; height: 9.65rem; margin-top: 38px; max-height: 439px; }
.my-prize .prize-list .prize-item { display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 10px 17px; background: linear-gradient(180deg, #FFFDF9 0%, #FFF3DD 100%); margin-top: 10px; }
.prize-item .item-title, .prize-item .item-img { -webkit-align-self: flex-start; align-self: flex-start; }
.prize-item .item-img { width: 75px; height: 75px; }
.prize-item .item-right { -webkit-flex: 1; flex: 1; width: 0; margin-left: 4px; text-align: right; }
.prize-item .item-title { padding: 0; font-size: 14px; text-align: left; }
.prize-item .item-btn { display: inline-block; margin-top: 8px; background-image: linear-gradient(176deg, #FF9F0F 0%, #FF6600 100%); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16); border-radius: 14px; color: #fff; padding: 5px 10px; font-size: 12px; }
.prize-return { position: absolute; bottom: 0.6rem; left: 1.42rem; right: 1.42rem; background: #f18716; border-radius: 27px; color: #ff4d00; font-size: 0.48rem; padding: 0 0.88rem; }
.prize-item .btnDisabled { pointer-events: none; background: #B3B3B3; }
.my-prize .prize-list .item-none { text-align: center; font-size: 0.32rem; margin-top: 25px; }
.my-prize .prize-box .popup-modal-close { left: 50%; bottom: -48px; margin-left: -16px; }

@keyframes diceOne {
    from { transform: translate(1.5rem, 0.5rem); }
    to { transform: translate(1rem, 2.94rem) rotate(-5deg); }
}

@keyframes diceTwo {
    from { transform: translate(2.82rem, -0.6rem); }
    to { transform: translate(2.12rem, 0.6rem) rotate(-5deg); }
}

@keyframes diceThree {
    from { transform: translate(3.96rem, -2.2rem); }
    to { transform: translate(2.96rem, 0.2rem) rotate(-5deg); }
}

@keyframes diceFour {
    from { transform: translate(4.32rem, -3.5rem); }
    to { transform: translate(4.32rem, -1.5rem) rotate(-5deg); }
}

@keyframes diceFive {
    from { transform: translate(3.6rem, -5rem); }
    to { transform: translate(3.6rem, -4.2rem) rotate(-5deg); }
}

@keyframes diveSix {
    from { transform: translate(5rem, -6.84rem); }
    to { transform: translate(5rem, -5.84rem) rotate(-5deg); }
}

body { font-size: 14px; line-height: 1.5715; box-sizing: border-box}

.hide { display: none; }


















/* m 端头部 */
#m-header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; height: 0.92rem; padding-left: 16px; padding-right: 16px; background-color: #fff; }
.m-header-r { display: flex; }
.m-header-logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 100%; }
.m-header-capsule { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 0.58rem; padding: 0 0.24rem; font-size: 0.28rem; font-weight: 600; color: #fe6a00; background-color: rgba(254, 106, 0, 0.2); border-radius: 0.58rem; }
.m-header-capsule .spacing { margin: 0 0.12rem; }
.m-header-avatar { width: 0.58rem; height: 0.58rem; margin-left: 0.12rem; overflow: hidden; border-radius: 50%; }

/* m 端底部 */
#m-footer { padding: 0.28rem 0; font-size: 0.24rem; color: #646566; text-align: center; background-color: #fff; }

/* response */
#header_item,
#footer_item,
#toolbar { display: none; }
@media (min-width: 1024px) { #m-header, #m-footer { display: none; } #header_item, #footer_item, #toolbar { display: block; } }