/* vue transition 淡入、淡出 */
@-webkit-keyframes w3c-fade-in {
    0% { opacity: 0 }
    to { opacity: 1 }
}
@keyframes w3c-fade-in {
    0% { opacity: 0 }
    to { opacity: 1 }
}
@-webkit-keyframes w3c-fade-out {
    0% { opacity: 1 }
    to { opacity: 0 }
}
@keyframes w3c-fade-out {
    0% { opacity: 1 }
    to { opacity: 0 }
}
.w3c-fade-enter-active {
    -webkit-animation: w3c-fade-in 0.3s ease-out both;
    animation: w3c-fade-in 0.3s ease-out both;
}
.w3c-fade-leave-active {
    -webkit-animation: w3c-fade-out 0.3s ease-in both;
    animation: w3c-fade-out 0.3s ease-in both;
}

/* vue transition 上滑进入（下滑离开） */
@-webkit-keyframes w3c-slide-up-enter {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes w3c-slide-up-enter {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@-webkit-keyframes w3c-slide-up-leave {
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes w3c-slide-up-leave {
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.w3c-slide-up-enter-active {
    -webkit-animation: w3c-slide-up-enter 0.3s both ease-out;
    animation: w3c-slide-up-enter 0.3s both ease-out;
}
.w3c-slide-up-leave-active {
    -webkit-animation: w3c-slide-up-leave 0.3s both ease-in;
    animation: w3c-slide-up-leave 0.3s both ease-in;
}

/* popup */
.w3c-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background-color: rgba(0, 0, 0, 0.7);  }
.w3c-popup-content { position: fixed; z-index: 2000; }
.w3c-popup-content--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* mobile header */
.w3c-mobile-header { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 16px; background-color: #fff; }
.w3c-mobile-header-logo { height: 30px; }
.w3c-mobile-header-right { display: flex; }
.w3c-mobile-header-capsule { display: flex; align-items: center; height: 30px; padding: 0 12px; font-size: 14px; font-weight: 600; color: #fe6a00; background-color: rgba(254, 106, 0, 0.2); border-radius: 30px; }
.w3c-mobile-header-capsule-sep { margin: 0 4px; }
.w3c-mobile-header-capsule-item { cursor: pointer; }
.w3c-mobile-header-avatar { width: 30px; height: 30px; margin-left: 8px; overflow: hidden; border-radius: 50%; }


/* activity 活动页 */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.9); transform: scale(0.9);
    }
    50% {
        -webkit-transform: scale(1); transform: scale(1);
    }
    to {
        -webkit-transform: scale(0.9); transform: scale(0.9)；
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale(0.9); transform: scale(0.9);
    }
    50% {
        -webkit-transform: scale(1); transform: scale(1);
    }
    to {
        -webkit-transform: scale(0.9); transform: scale(0.9)；
    }
}
.animated-pulse {
    -webkit-animation: pulse 1.2s infinite both;
    animation: pulse 1.2s infinite both;
}

body { background-color: #ffdfc6; }
.activity { max-width: 768px; margin: 0 auto; background-color: #f04122; }

.activity-countdown { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; line-height: 22px; background-color: #fff9e3; }
.activity-countdown-text { display: flex; align-items: center; padding: 0 16px; color: #ff6f01; }
.activity-countdown-text .text-num { padding: 0 4px; margin: 0 4px; background-color: #ffdf5c; border-radius: 4px; }
.activity-countdown-button { padding: 4px 16px; color: #fff; background-color: #ff6f01; border-radius: 28px 0 0 28px; cursor: pointer; }

.activity-order-carousel { position: absolute; top: 0; left: 4.267%; right: 4.267%; height: 0.56rem; font-size: 0.24rem; color: #fff; background-color: #d42d10; border-radius: 28px; overflow: hidden; }
.activity-order-carousel-track { height: 100%; }
.activity-order-carousel-track-slide { display: flex; justify-content: center; align-items: center; height: 100%; }
.activity-order-carousel-track-slide .order-icon { font-size: 0.32rem; }
.activity-order-carousel-track-slide .order-sep { margin: 0 0.16rem; }
.activity-order-carousel-track-slide .order-name { font-weight: 600; color: #ffe015; }

.activity-image { position: relative; }
.activity-image-place { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.activity-rule { position: relative; width: 320px; background-color: #fff; border-radius: 4px; }
.activity-rule-close { position: absolute; top: -48px; right: 0; font-size: 32px; color: #fff; cursor: pointer; }
.activity-rule-title { margin: 0 96px; padding: 8px 4px; font-size: 18px; color: #fff; text-align: center; background-color: #ff6f01; border-radius: 0 0 8px 8px; }
.activity-rule-content { padding: 16px; }
.activity-rule-content { line-height: 28px; }

.activity-cell { position: relative; }
.activity-cell-button { position: absolute; left: 12.8%; right: 12.8%; z-index: 1; cursor: pointer; }

.activity-footer { position: sticky; bottom: 0; z-index: 2; padding: 0 16px 16px; }
.activity-footer-button { cursor: pointer; }

@media (max-width: 1169px) {
    #header_item, #footer_item { display: none; }
    .w3c-mobile-header { display: flex; }
}

@media (min-width: 1170px) {
    #header_item, #footer_item { display: block; }
    .w3c-mobile-header { display: none; }
}