/**
 * var：
 *  theme-color : #fe6a00
 *  gray-1 : #f7f8fa
 *  gray-2 : #f2f3f5
 *  gray-3 : #ebedf0
 *  gray-4 : #dcdee0
 *  gray-5 : #c8c9cc
 *  gray-6 : #969799
 *  gray-7 : #646566
 *  gray-8 : #323233
 */


[v-cloak] { display: none; }
.flex-center-center { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }


#activity { min-height: 100vh; font-weight: 500; color: #323233; }
.act-container { box-sizing: content-box; max-width: 992px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.act-placeimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }


/* banner */
.act-banner { background-color: #f29b71; }
.act-banner .act-container { padding-left: 0; padding-right: 0; }
.act-banner-img { position: relative; padding-top: 50%; }


/* header */
.act-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 9; height: 0.92rem; font-size: 0.28rem; background-color: #ffda00; }
.act-header .act-container { display: -webkit-flex; display: flex; height: 100%; padding-left: 16px; }
.act-header-countdown { -webkit-flex: 1; flex: 1; line-height: 0.92rem; }
.act-header-countdown > span { margin: 0 0.2em; padding: 0.2em; background-color: #fff; border-radius: 24%; }
.act-header-rules { align-self: flex-start; box-sizing: content-box; width: 0.56rem; padding: 0.2em 0.4em; font-size: 0.24rem; color: #fff; line-height: 1; text-align: center; background-color: #ff7b2f; border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem; cursor: pointer; }
@media (min-width: 993px) {
    .act-header { height: 69px; font-size: 21px; }
    .act-header-countdown { line-height: 69px; }
    .act-header-rules { width: 42px; font-size: 18px; }
}


/* main */
.act-main { padding-top: 0.32rem; padding-bottom: 0.48rem; background-color: #f29b71; }
.act-cell { overflow: hidden; padding-bottom: 0.32rem; background-color: #fff7f2; border-radius: 0.12rem; box-shadow: 0 2px 4px rgba(81, 81, 81, 0.4); }
.act-cell + .act-cell { margin-top: 0.48rem; }
.act-cell-title { padding: 0.24rem 0; }
.act-cell-title-inner { position: relative; padding-top: 8.75%; }
.act-cell-content { margin: 0 0.16rem; background-color: #fff; border-radius: 0.12rem; }
.act-cell-content + .act-cell-content { margin-top: 0.64rem; }


/* 开通按钮 */
.open-btn { color: #fff; text-align: center; border-radius: 0.6rem; cursor: pointer; -webkit-transition: background-color 0.24s; transition: background-color 0.24s; }
.open-btn:hover { background-color: rgba(253, 95, 13, 0.6); }


/* 课程列表 */
.course-stack { padding-bottom: 0.48rem; }
.course-stack-info { margin-bottom: 16px; padding: 0 16px; font-size: 0.28rem; color: #323233; }
.course-stack-info .hl { margin: 0 0.4em; color: #fd5f0d; }
.course-stack-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: -0.24rem; padding-left: 16px; }
.course-stack-list .course { width: 50%; margin-top: 0.36rem; padding-right: 16px; cursor: pointer; }
.course-stack-list .course-cover { position: relative; padding-top: 56%; background-color: #ebedf0; border-radius: 0.12rem; box-shadow: 1px 1px 3px rgba(117, 117, 117, 0.4); -webkit-transition: all 0.24s; transition: all 0.24s; }
.course-stack-list .course-cover img { border-radius: 0.12rem; }
.course-stack-list .course-cover-tag { position: absolute; top: -0.08rem; left: 0; z-index: 2; padding: 0.04rem 0.16rem; font-size: 0.16rem; color: #fff; background-color: #fd5f0d; border-top-left-radius: 0.12rem; border-bottom-right-radius: 0.12rem; box-shadow: 3px 3px 5px rgba(255, 56, 3, 0.5); }
.course-stack-list .course:hover .course-cover { -webkit-transform: translateY(-0.1rem); transform: translateY(-0.1rem); }
.course-stack-list .course-title { margin-top: 0.16rem; font-size: 0.28rem; }
.course-stack-list .course-price { margin-top: 0.16rem; }
.course-stack-list .course-price-sale { margin-right: 0.12rem; font-size: 0.28rem; color: #fc7922; }
.course-stack-list .course-price-origin { font-size: 0.24rem; color: #969799; text-decoration: line-through; }
.course-stack-list .course-price-tag { font-size: 0.28rem; color: #fc7922; }
.course-stack-list .course-addon { margin-top: 0.08rem; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
.course-stack-list .course-addon-save { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.course-stack-list .course-addon-save .save-icon { position: relative; z-index: 2; width: 0.42rem; height: 0.42rem; font-size: 0.28rem; color: #fff; background-color: #fea002; border-radius: 50%; }
.course-stack-list .course-addon-save .save-price { position: relative; left: -0.28rem; z-index: 1; width: 2.1rem; padding-left: 0.28rem; padding-right: 0.08rem; font-size: 0.24rem; color: #fea002; text-align: center; border: 1px solid #fea002; border-radius: 100px; }
.course-stack-more { margin-top: 0.48rem; text-align: center; }
.course-stack-more .more-btn { display: inline-block; padding: 0.08rem 0.24rem; font-size: 0.28rem; color: #969799; vertical-align: middle; background-color: #eaeaea; border-radius: 100px; cursor: pointer; }
.course-stack-more .more-btn .i-icon { margin-left: 0.04rem; vertical-align: middle; }

@media (min-width: 993px) { .course-stack-list .course { width: 25%; } }

/* cell1 */
.act-cell1-main { position: relative; padding-top: 40%; }
.act-cell1-btn { position: absolute; bottom: 14%; z-index: 3; padding: 0.06rem 0.48rem; font-size: 0.28rem; color: #c47524; background-color: #fff5e7; border-radius: 100px; }
.act-cell1-btn.left-btn { left: 25.8%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.act-cell1-btn.right-btn { right: 25.8%; -webkit-transform: translateX(50%); transform: translateX(50%); }
.act-cell1-btn .hl { font-size: 0.3rem; color: #f75d28; }
.act-cell1-word { padding:0.24rem 0 0.48rem; text-align: center; }
.act-cell1-word > div + div { margin-top: 0.32rem; }
.act-cell1-word-line1 { font-size: 0.32rem; color: #fd7632; }
.act-cell1-word-line1 strong { font-size: 0.36rem; }
.act-cell1-word-line1 strong .num { font-size: 0.64rem; }
.act-cell1-word-line1 .origin-price { margin-left: 0.28rem; color: #646566; text-decoration: line-through; }
.act-cell1-word-line2 .open-btn { position: relative; overflow: hidden; display: inline-block; }
.act-cell1-word-line2 .open-btn::before { content: '限时'; position: absolute; top: 40%; left: -42%; color: #fff; width: 100%; font-size: 0.24rem; background-color: #fea002; -webkit-transform: translateY(-50%) rotate(-32deg); transform: translateY(-50%) rotate(-32deg); }
.act-cell1-word-line3 { font-size: 0.28rem; color: #646566; }
.act-cell1-word-line3 span { margin: 0 0.2em; }


/* 会员免费课程 */
.vip-course-title { position: relative; top: -0.16rem; display: inline-block; height: 0.64rem; padding: 0 0.24rem; font-size: 0.32rem; color: #fff; line-height: 0.64rem; background-color: #fea002; border-radius: 0.2rem 0.2rem 0.2rem 0; box-shadow: 0 1px 2px rgba(102, 102, 102, 0.4); }
.vip-course-nav { display: -webkit-flex; display: flex; overflow-x: auto; padding: 0.32rem 0 0.32rem 16px; color: #fffbf1; -webkit-overflow-scrolling: touch; }
.vip-course-nav::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; }
.vip-course-nav::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 6px; }
.vip-course-nav:hover::-webkit-scrollbar-thumb { background-color: transparent; }
.vip-course-nav .tab { -webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-flex; display: flex; padding-right: 8px; font-size: 0.28rem; }
.vip-course-nav .tab-inner { padding: 0.08rem 0.28rem; color: #ca8c23; background-color: #fff7e9; border-radius: 100px; cursor: pointer; -webkit-transition: all 0.24; transition: all 0.24s; }
.vip-course-nav .tab-inner:hover,
.vip-course-nav .tab-inner.active { color: #fffbf1; background-color: #fea002; }
.vip-course-stack { margin-top: 0.32rem; }
.vip-course-stack .course-stack-list .course-price-origin { font-size: 0.28rem; }


/* 会员专享价课程 */
.discount-course { margin-top: 0.2rem; }
.discount-course-nav { display: -webkit-flex; display: flex; height: 0.8rem; background-color: #bf7f5e; border-top-left-radius: 0.12rem; border-top-right-radius: 0.12rem; }
.discount-course-nav .tab { -webkit-flex: 1; flex: 1; font-size: 0.28rem; color: rgba(255, 255, 255, 0.7); cursor: pointer; -webkit-transition: all 0.24s; transition: all 0.24s; }
.discount-course-nav .tab.active { -webkit-align-self: flex-end; align-self: flex-end; height: 1rem; color: #fff; background-color: #a64513; border-top-left-radius: 0.12rem; border-top-right-radius: 0.12rem; }
.discount-course-stack { margin-top: 16px; }

    /* 吸底 */
.fixedbar-enter, .fixedbar-leave-to { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); }
.fixedbar-enter-active, .fixedbar-leave-active { -webkit-transition: all 0.24s; transition: all 0.24s; }
.fixedbar-enter-to, .fixedbar-leave { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.act-fixedbar { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 9; padding: 8px 16px; background-color: #fff; }
.act-fixedbar .open-btn { height: 0.92rem; font-size: 0.36rem; line-height: 0.92rem; box-shadow: 1px 2px 4px rgba(77, 77, 77, 0.4); }
@media (min-width: 993px) { .act-fixedbar { display: none; } }


/* 活动规则 */
.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: 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; }


/* animation */
.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; }