[v-cloak] { display: none; }

#activity { min-height: 100vh; font-weight: 500; color: #323233; line-height: 1.5; }
.act-container { box-sizing: content-box; max-width: 992px; margin: 0 auto; padding-left: 16px; padding-right: 16px;  }
.act-main.isweb { background-color: #f44c26; }
.act-placeimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; }
.act-placeimg img { height: auto; }
.act-button { position: relative; display: block; width: 5.73rem; height: 0.9rem; padding-top: 0.08rem; margin: 0 auto; border-radius: 0.72rem; background-image: linear-gradient(180deg, #ff5533, #ff3333); box-shadow: 0 2px 2px 1px rgba(175, 25, 0, 0.3); cursor: pointer; }
.act-button-inner { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; margin: 0 0.12rem; border-radius: inherit; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
.act-button-inner::before { content: ''; position: absolute; top: 0.02rem; left: 0.24rem; width: 0.06rem; height: 0.06rem; border-radius: 0.06rem; background-color: rgba(255, 255, 255, 0.8); }
.act-button-inner::after { content: ''; position: absolute; top: 0.02rem; left: 0.4rem; width: 0.48rem; height: 0.06rem; border-radius: 0.06rem; background-image: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.act-button-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.32rem; color: #fff; }
.act-button-tag { position: absolute; top: -0.1rem; right: 1rem; padding: 2px 0.2rem; font-size: 0.24rem; color: #fff; border: 1px solid #fff; border-radius: 1rem 1rem 1rem 0; background-image: linear-gradient(90deg, #ff9901, #ff4c1e); transform: translate(50%, -50%); }
.act-button-tag .i-icon { margin-right: 0.05rem; vertical-align: baseline; }
.act-button-content img { padding-right: 11px; }

.act-header { position: sticky; top: 0; z-index: 9; background-color: #FFFBDB; }
.act-header .act-container { display: flex; justify-content: space-between; padding-top: 0.12rem; padding-bottom: 0.12rem; padding-right: 0; font-size: 0.24rem; margin-top: 0; }
.act-header-countdown { align-self: center; color: #614A00; }
.act-header-countdown > span { margin: 0 0.2em; padding: 0.2em 0.08rem; background-color: #FFF; border-radius: 24%; color: #FF0000;}
.act-header-rules { align-self: flex-start; padding: 0.1rem 0.3rem 0.1rem 0.4rem; color: #fff; white-space: nowrap; background-color: #FF8437; border-top-left-radius: 999px; border-bottom-left-radius: 999px; cursor: pointer; font-size: 14; font-weight: 900;}

.act-banner--mobile { position: relative; padding-top: 30%; }
.act-banner--web { position: relative; overflow: hidden; background-color: #f44c26; }
.act-banner--web .act-banner-img { width: 100%; }

.act-main { padding-top: 0.32rem; padding-bottom: 0.48rem; background-color: #DD3F22; }
.act-main-order { max-width: 5.58rem; height: 0.6rem; margin: 0 auto; border-radius: 0.6rem; background-color: rgba(66, 66, 66, 0.4); }
.act-main-order-item { display: flex; align-items: center; padding: 0 0.6rem; font-size: 0.24rem; color: #fff; white-space: nowrap; }
.act-main-order-item .item-avatar { width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.act-main-order-item .item-name { flex: 1; color: #fdc406; overflow: hidden; text-overflow: ellipsis; }
.act-main-cell { margin-top: 0.48rem; position: relative; z-index: 1; }
.act-main-cell:first-child { margin-top: 0; }



.act-main-cell-title { display: flex; justify-content: center; align-items: center; width: 100%; height: 1.16rem; margin: 0 auto; font-size: 0.44rem; font-weight: 700; color: #fff; border-radius: 0.4rem 0.4rem 0rem 0rem; background: linear-gradient(124.68deg, rgba(255, 0, 0, 1) 0%, rgba(255, 106, 0, 1) 100%);border: 2px solid #FFFB00; border-bottom: none; }
.act-main-cell-box { position: relative; border-radius: 0 0 0.16rem 0.16rem; }
/* .act-main-cell-box::before { content: ''; position: absolute; top: 0.08rem; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #bc3300; border-radius: inherit; } */
.act-main-cell-box .box-container { position: relative; z-index: 2; padding: 0.3rem 0.2rem; border-radius: inherit; background-color: #FFECCB; }
.act-main-cell-box .box-container-content { position: relative; padding: 0.4rem 0; margin-top: 0.48rem; border: 0.04rem solid #ffe49a; border-radius: 0.2rem; background-color: #fff; }
.act-main-cell-box .box-container-content:first-child { margin-top: 0; }
/* .act-main-cell-box .box-container-content-image { margin: 0 0.36rem; } */
/* .act-main-cell-box .box-container-content-image .product-image { position: relative; padding-top: 43%; }
.act-main-cell-box .box-container-content-image .product-sale-image { position: relative; padding-top: 40%; }
.act-main-cell-box .box-container-content-image .product-tag-image { position: relative; padding: 10% 0 10px; } */
.act-main-cell-box .box-container-content-image .upgrade-image { position: relative; padding-top: 146%; margin-top: 0.4rem; }
.act-main-cell-box .box-container-content-tag { margin-bottom: 0.6rem; text-align: center; }
.act-main-cell-box .box-container-content-price { margin-bottom: 0.6rem; font-size: 0.28rem; font-weight: 600; color: #ff4d33; text-align: center; }
.act-main-cell-box .box-container-content-price .price-cur { font-size: 0.4rem; }
.act-main-cell-box .box-container-content-price .price-del { margin-left: 0.2rem; font-weight: 500; color: #999; text-decoration: line-through; }
.act-main-cell-box .box-container-content-tip { margin-top: 0.4rem; margin-bottom: 0.2rem; font-size: 0.24rem; color: #999; text-align: center; }

.act-main-cell-box .box-container-content .privilege-title { position: absolute; top: -0.04rem; left: -0.04rem; display: flex; align-items: center; height: 0.8rem; padding: 0 0.32rem; font-size: 0.32rem; color: #9d5300; border-radius: 0.16rem 0.16rem 0.16rem 0; background-image: linear-gradient(309deg, #ffbc78, #fff4e8); box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.16); }
.act-main-cell-box .box-container-content .privilege-image { padding: 0.8rem 0.32rem 0; }
.act-main-cell-box .box-container-content .privilege-button { display: flex; justify-content: center; align-items: center; width: 2.8rem; height: 0.6rem; margin: 0.4rem auto 0; font-size: 0.28rem; color: #ff951e; border-radius: 0.3rem; background-color: #fff6db; cursor: pointer; }


.act-main-cell-box .box-container-content.app-card { border: 0.06rem solid #FF7058; margin-top: 1rem; }
.act-main-cell-box .box-container-content.app-card .app-card-label {
    position: absolute;
    top: -0.7rem;
    left: -5px;
}

.act-main-cell-box .box-container-content.app-card.app-card-1 .app-card-label {
    width: 54.5%;
}
.act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-label {
    width: 64%;
}
.act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-label {
    width: 84.3%;
}

.act-main-cell-box .box-container-content.app-card .app-card-first-image {
    text-align: center;
    margin-top: 0.6rem;
}
.app-card-first-image-wrap{
    margin: 0 auto;
    width: 90%;
    position: relative;
}
.app-card-hot-image{
    top: 0px;
    right: -10px;
    position: absolute;
    width: 0.6rem;
}
.act-main-cell-box .box-container-content.app-card .app-card-image {
    text-align: center;
    margin-top: 0.4rem;
}
/* .act-main-cell-box .box-container-content.app-card .app-card-btn{
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.act-main-cell-box .box-container-content.app-card.app-card-1 .app-card-btn img{
    width: 79%;
}
.act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-btn img{
    width: 56.1%;
}
.act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-btn img{
    width: 79.4%;
}
.act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-image{
    margin-top: 0;
}
.app-card-container-content-tip{
    margin: 14px 0;
    text-align: center;
    font-size: 16px;
}

.isweb .act-main-cell-box .box-container-content.app-card { margin-top: 2rem; }
.isweb .act-main-cell-box .box-container-content.app-card .app-card-label{
    top: -1.5rem;
    left: -10px;
}
.isweb .act-main-cell-box .box-container-content.app-card-2{
    padding-top: 0.9rem;
}
.isweb .act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-label {
    top: -1.7rem;
}
.isweb .act-main-cell-box .box-container-content.app-card-3{
    padding-top: 1rem;
}
.isweb .act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-label {
    top: -1.8rem;
} 

.act-footer { position: sticky; bottom: 0; z-index: 9; padding: 0.16rem 0; background-color: #fff; }
.act-footer .act-button { width: 100%; height: 0.88rem; }
.act-footer .act-button-tag { transform: translate(0, -50%); }

.app-card-btn-wrap{
    margin-bottom: 0.6rem;
    margin-top: 0.4rem;
    text-align: center;
}
.app-card-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.6rem;
    border-radius: 6.91rem;
    background: linear-gradient(270deg, rgba(178, 98, 45, 1) 0%, rgba(255, 179, 0, 1) 100%);
    box-shadow: 0rem 0.28rem 0.69rem  rgba(255, 195, 0, 0.3);
    font-size: 0.28rem;
    font-weight: 900;
    color: #FFF;
}
.app-card-btn-icon{
    font-size: 0.28rem;
    font-weight: 700;
    color: #B2622D;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #FFF;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-card-btn-tag{
    width: 0.88rem;
    height: 0.88rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(178, 98, 45, 1);
    box-shadow:inset 0rem 0rem 0.1rem  rgba(255, 178, 0, 1);
    border-radius: 50%;
    aspect-ratio: 1;
}
.act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-btn .app-card-btn-tag img, .act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-btn .app-card-btn-tag img{
    width: 40%;
}
.app-card-btn-tag-title{
    padding-left: 1.2rem;
}

/* 活动规则 */
.rules-modal-mask,
.rules-modal-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.rules-modal-mask { z-index: 1998; background-color: rgba(0, 0, 0, 0.7); }
.rules-modal-wrap { z-index: 1999; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.rules-modal { position: relative; width: 320px; background-color: #fff; border-radius: 6px; }
.rules-modal-close { position: absolute; top: -48px; right: 0; color: #fff; cursor: pointer; -webkit-transition: all 0.48s; transition: all 0.48s; }
.rules-modal-close:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.rules-modal-close .i-icon { font-size: 32px; }
.rules-modal-header { margin: 0 28%; height: 46px; font-size: 20px; line-height: 46px; color: #fff; background-color: #ff7b2f; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.rules-modal-body { max-height: calc(100vh - 174px); padding: 16px; overflow-y: auto; font-size: 14px; color: #323233; }
@media (max-width: 320px) { .rules-modal { width: 92%; } }

/* 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: 628px) {
    .act-main-cell-box .box-container-content.app-card { margin-top: 1.7rem; }
    .act-main-cell-box .box-container-content.app-card .app-card-label{
        top: -1.1rem;
        left: -10px;
    }
    .act-main-cell-box .box-container-content.app-card-2{
        padding-top: 0.6rem;
    }
    .act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-label {
        top: -1.2rem;
    }
    .act-main-cell-box .box-container-content.app-card-3{
        padding-top: 0.7rem;
    }
    .act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-label {
        top: -1.3rem;
    } 
}

@media (min-width: 800px) {
    .act-main-cell-box .box-container-content.app-card { margin-top: 2rem; }
    .act-main-cell-box .box-container-content.app-card .app-card-label{
        top: -1.5rem;
        left: -10px;
    }
    .act-main-cell-box .box-container-content.app-card-2{
        padding-top: 0.9rem;
    }
    .act-main-cell-box .box-container-content.app-card.app-card-2 .app-card-label {
        top: -1.7rem;
    }
    .act-main-cell-box .box-container-content.app-card-3{
        padding-top: 1rem;
    }
    .act-main-cell-box .box-container-content.app-card.app-card-3 .app-card-label {
        top: -1.8rem;
    } 
    .app-card-first-image .app-card-first-image-wrap .app-card-hot-image{ width: 0.8rem; }
}

@media (min-width: 992px) {
    .act-main-cell-box .box-container-content.app-card .app-card-label{
        top: -1.9rem;
        left: -10px;
    }
    .act-placeimg img { width: 90%; }
    .box-container-content-tag img { width: 90%; }
    .box-container-content-price img { width: 78%; }
    .act-button { width: 80%; }
    .app-card-first-image img { width: 90%; }
    .app-card-first-image .app-card-first-image-wrap img { width: 100%; }
    .app-card-first-image .app-card-first-image-wrap .app-card-hot-image{ width: 1rem; }
    .app-card-1-banner{ width: 80%; }
    .app-card-2-tips{ width: 75%; }
    .app-card-2-banner, .app-card-3-banner{ width: 90%; }
}


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

/* vue transition */
.zoomIn-enter { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); }
.zoomIn-enter-active { -webkit-transition: all 0.24s; transition: all 0.24s; }

.fadeIn-enter { opacity: 0; }
.fadeIn-enter-active { -webkit-transition: opacity 0.24s; transition: opacity 0.24s; }

.slideInUp-enter-active { animation: slideInUp 0.25s; }
.slideInUp-leave-active { animation: slideInUp 0.25s reverse; }
@-webkit-keyframes slideInUp {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.animated-pulse {
    -webkit-animation: pulse 1.6s infinite both;
    animation: pulse 1.6s infinite both;
}
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    40% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    68.75% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    40% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    68.75% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* 富文本 */
.rich-text { font-size: 14px; line-height: 1.74; letter-spacing: 0.05em; color: #262626; }
.rich-text > * { box-sizing: border-box; }
.rich-text b,
.rich-text strong { font-weight: bolder; }
.rich-text p { margin: 0; }
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 { margin-top: 0; margin-bottom: 0; padding: 0; font-weight: bold; word-spacing: 1px; }
.rich-text h1 { padding: 7px 0; font-size: 28px; line-height: 36px; }
.rich-text h2 { padding: 7px 0; font-size: 24px; line-height: 32px; }
.rich-text h3 { padding: 7px 0; font-size: 20px; line-height: 28px; }
.rich-text h4 { padding: 7px 0; font-size: 16px; line-height: 24px; }
.rich-text h5 { padding: 7px 0; font-size: 12px; line-height: 20px; }
.rich-text ol,
.rich-text ul { margin: 0 0 0 3px; }
.rich-text ol { list-style-type: decimal; }
.rich-text ul { list-style-type: disc; }
.rich-text li { margin-left: 23px; }
.rich-text blockquote { padding-left: 1em; margin: 5px 0; color: #8c8c8c; border-left: 3px solid #eee; }
.rich-text table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; word-wrap: break-word; word-break: normal; width: 100%; margin: 0; border: 1px solid #d9d9d9; }
.rich-text table td { min-width: 90px; height: 30px; padding: 4px 8px; word-wrap: break-word; word-break: normal; border: 1px solid #d9d9d9; vertical-align: top; }
.rich-text img { max-width: 100%; }
.rich-text code { margin: 0 2px; padding: 0 2px; font-family: monospace; color: #c7254e; word-wrap: break-word; background-color: #f9f2f4; border: 1px solid #efdce1; border-radius: 2px; }