ul {
    margin: 0;
    padding: 0;
}

.bar-tab .tab-item:active,
.bar-tab .tab-item.active {
    color: #929292;
}

.bar-tab .tab-item.disabled {
    background: #797979 !important;
    color: #fff;
}

ul li {
    list-style: none;
}

.show-more-handle {
    height: 1.5rem;
    width: auto;
    margin: auto;
    margin-top: .5rem;
    background: #fff !important;
    color: #808080 !important;
    border: 1px solid #e3e3e3 !important;
}

.primary-color {
    color: #8c6b39;
}

.primary-bgcolor {
    background-color: #8c6b39;
    color: #fff !important;
}

.punch-status.ongoing {
    background: #8c6a38 !important;
}

.punch-status.success {
    background: #797979 !important;
}

.punch-status.willstart {
    background: #d2d2d2 !important;
}

.punch-status.ending {
    background: #797979 !important;
}

.punch-user-header {
    display: flex;
    justify-content: center;
    align-items: Center;
    padding: 1rem 1rem 1.3rem 1rem;
    background-color: #fff;
    /*background-image: url(http://res.zansleep.com/upload/2018/08/10/201808101141358622.png);*/
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

    .punch-user-header .avatar {
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        overflow: hidden;
    }

        .punch-user-header .avatar img {
            height: 100%;
            width: 100%;
        }

    .punch-user-header .profile {
        flex: 1;
        padding-left: .3rem;
    }

        .punch-user-header .profile h1 {
            margin: 0;
            font-size: 1rem;
            line-height: 2rem;
            font-weight: bold;
        }

        .punch-user-header .profile p {
            margin: 0;
            font-size: .6rem;
            line-height: 1rem;
            color: #808080;
        }

.punch-user-active {
    margin-bottom: .5rem;
}

    .punch-user-active ul {
        padding: 0 .5rem;
    }

        .punch-user-active ul li {
            margin-top: .5rem;
            padding: .3rem;
            background: #fff;
            box-shadow: 0 4px 14px 3px rgba(0,0,0,0.10);
        }

            .punch-user-active ul li:first-child {
                margin-top: 0;
            }

            .punch-user-active ul li .container {
                display: flex;
                justify-content: center;
                align-items: Center;
            }

            .punch-user-active ul li .img {
                height: 3.4rem;
                width: 4.5rem;
                text-align: center;
                line-height: 3.4rem;
            }

                .punch-user-active ul li .img img {
                    height: 100%;
                    width: 100%;
                }

            .punch-user-active ul li .intro {
                flex: 1;
                padding-left: .3rem;
                min-width: 0;
            }

                .punch-user-active ul li .intro h3 {
                    font-size: .8rem;
                    margin: 0;
                    line-height: 2rem;
                    color: #333333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .punch-user-active ul li .intro span {
                    font-size: .6rem;
                    margin: 0;
                    line-height: 1.4rem;
                    color: #999;
                }

            .punch-user-active ul li .option {
                width: 4rem;
                text-align: center;
            }

                .punch-user-active ul li .option .button.button-fill.ongoing {
                    background: #8c6a38 !important;
                }

                .punch-user-active ul li .option .button.button-fill.success {
                    border: 1px solid #8c6a38 !important;
                    background: #fff !important;
                    color: #8c6a38;
                }

                .punch-user-active ul li .option .button.button-fill.willstart {
                    background: #d2d2d2 !important;
                }

                .punch-user-active ul li .option .button.button-fill.ending {
                    background: #797979 !important;
                }

                .punch-user-active ul li .option .button.button-fill.success:hover,
                .punch-user-active ul li .option .button.button-fill.success:active {
                    color: #fff;
                }

                .punch-user-active ul li .option .button.button-fill.success:hover,
                .punch-user-active ul li .option .button.button-fill.success:active {
                    color: #8c6a38;
                }


                .punch-user-active ul li .option .button.button-fill {
                    background: #797979 !important;
                    width: 4rem;
                    height: 1.7rem;
                    line-height: 1.7rem;
                    font-size: .8rem;
                }

                .punch-user-active ul li .option span {
                    color: #8c6a38;
                    font-size: .5rem;
                }

.punch-active-list {
    margin-top: .5rem;
    padding: .7rem;
    background: #fff;
}

    .punch-active-list ul li {
        margin-bottom: .5rem;
        border: 1px solid #e3e3e3;
    }

        .punch-active-list ul li:last-child {
            margin-bottom: 0;
        }

        .punch-active-list ul li .item-media {
            font-size: .7rem;
        }

        .punch-active-list ul li .img {
            width: 100%;
            position: relative;
        }

            .punch-active-list ul li .img img {
                width: 100%;
                height: auto;
                display: block;
            }

        .punch-active-list ul li h3 {
            margin: 0;
            padding: 0 .5rem;
            font-size: .7rem;
            color: #6e6e6e;
            line-height: 2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: normal;
        }

        .punch-active-list ul li .intro {
            margin: 0;
            font-size: .7rem;
            color: #6e6e6e;
            line-height: 2rem;
            height: 2rem;
            display: flex;
        }

            .punch-active-list ul li .intro .title {
                position: initial;
                text-align: left;
                font-size: .7rem;
                padding: 0 .5rem;
                line-height: 2rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                flex: 1;
                margin: 0;
            }

            .punch-active-list ul li .intro .price {
                padding: 0 .5rem;
                text-align: center;
            }

                .punch-active-list ul li .intro .price span {
                    font-size: 1rem;
                    margin-left: .2rem;
                }



            .punch-active-list ul li .intro .user {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: Center;
                padding: 0 .5rem;
                text-align: right;
            }

                .punch-active-list ul li .intro .user span {
                    flex: 1;
                    margin-right: .25rem;
                }

                .punch-active-list ul li .intro .user img {
                    width: .8rem;
                    height: .8rem;
                    border-radius: 50%;
                }

        .punch-active-list ul li .option {
            width: 4.5rem;
            text-align: center;
        }

            .punch-active-list ul li .option .button.button-fill.ongoing {
                background: #8c6a38 !important;
            }

            .punch-active-list ul li .option .button.button-fill.success {
                border: 1px solid #8c6a38 !important;
                background: #fff !important;
                color: #8c6a38;
            }

            .punch-active-list ul li .option .button.button-fill.willstart {
                background: #d2d2d2 !important;
            }

            .punch-active-list ul li .option .button.button-fill.ending {
                background: #797979 !important;
            }

            .punch-active-list ul li .option .button.button-fill.success:hover,
            .punch-active-list ul li .option .button.button-fill.success:active {
                color: #fff;
            }

            .punch-active-list ul li .option .button.button-fill.success:hover,
            .punch-active-list ul li .option .button.button-fill.success:active {
                color: #8c6a38;
            }


            .punch-active-list ul li .option .button.button-fill {
                background: #797979 !important;
                width: 4rem;
                height: 1.5rem;
                line-height: 1.5rem;
                font-size: .7rem;
            }

.video-js {
    width: 100%;
    height: 100%;
}

.punch-topic-intro {
    background: #fff;
    margin-top: .5rem;
}

.topic-series-video {
    background: #fff;
    margin-top: .5rem;
}

    .topic-series-video h2 {
        margin: 0;
        padding: 0;
        font-weight: normal;
        padding-left: .5rem;
        line-height: 2rem;
        font-size: .9rem;
        height: 2rem;
    }

.topic-intro {
    padding: .5rem 0;
}

    .topic-intro .readmore {
        text-align: center;
        box-shadow: 0 -10px 10px #f0f0f0;
        font-size:.6rem;
        padding:.5rem 0;
    }
/* Show only 4 lines in smaller screens */
article {
    max-height: 6em; /* (4 * 1.5 = 6) */
    padding: 0 .5rem;
}

    article p {
        margin: 0;
    }

    article img {
        display: block;
        max-width: 100%;
    }
/* Show 8 lines on larger screens */
@media screen and (min-width: 640px) {
    article {
        max-height: 12em;
    }
}


.punch-topic-header {
    height: 7rem;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    position: relative;
    background: #fff;
}

    .punch-topic-header:before {
        position: absolute;
        width: 175%;
        height: calc(150vw * 1);
        top: calc(150vw * -0.90);
        left: -37.5%;
        border-radius: 50%;
        background: #8c6b39;
        content: " ";
        z-index: 0;
    }

    .punch-topic-header .avatar {
        height: 3rem;
        width: 3rem;
        margin: auto;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

        .punch-topic-header .avatar img {
            width: 100%;
            height: 100%;
        }

.punch-topic-list {
    /*background: #fff;*/
}
.punch-topic-list .card{
    margin:.5rem 0;
        /*border-bottom: 1px solid #de703e;*/
    box-shadow:none;
}

.punch-topic-list .card .list-block .item-subtitle span{
        background: #fef7f3;
    border: 1px solid #de703e;
    line-height: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    padding: 0 .35rem;
    color: #de703e;
}

.punch-topic-list .list li.news-list:first-child{
        border-top: 1px solid #ebedf0!important;
}

    .punch-topic-list .list li.news-list a .note span {
        background: #fef7f3;
        border: 1px solid #de703e;
        line-height: 1.1rem;
        height: 1.1rem;
        display: inline-block;
        padding: 0 .35rem;
        color: #de703e;
    }

.punch-record-time {
    background: #fff;
    padding: .5rem;
    padding-left: 1.25rem;
}
    /*纵向时间轴*/
    .punch-record-time .time-vertical {
        list-style-type: none;
        border-left: 1px solid #a98848;
        padding: 0px;
    }

        .punch-record-time .time-vertical li {
            position: relative;
        }

            .punch-record-time .time-vertical li b:before {
                position: absolute;
                top: 0;
                left: -.5rem;
                width: .8rem;
                height: .8rem;
                color: #fff;
                font-size: .4rem !important;
                text-align: center;
                line-height: .8rem;
                border-radius: 50%;
                background: #8c6b39;
            }

            .punch-record-time .time-vertical li .container {
                display: inline-block;
                padding-left: .8rem;
                text-decoration: none;
                color: #000;
                width: 100%;
            }


                .punch-record-time .time-vertical li .container h5 {
                    margin: 0;
                    color: #8c6b39;
                    font-size: .7rem;
                }

                .punch-record-time .time-vertical li .container h6 {
                    margin: 0;
                    font-size: .6rem;
                    line-height: 1.5rem;
                    color: #666666;
                }

                .punch-record-time .time-vertical li .container article {
                    background: #e5e7ed;
                    font-size: .6rem;
                    color: #666666;
                    padding: .4rem;
                    max-height: initial;
                }

                .punch-record-time .time-vertical li .container .row {
                    margin-top: .4rem;
                }

                    .punch-record-time .time-vertical li .container .row > * {
                        padding: 0 .4rem .4rem 0;
                    }

                .punch-record-time .time-vertical li .container img {
                    width: 100%;
                    display: block;
                }

.buttons-tab .button.active {
    color: #7a3838;
    border-color: #7a3838;
    position: relative;
}
/*.buttons-tab .button.active:after {
    content:" ";
    background:#7a3838;
    width:80%;
    height:2px;
    bottom:0;
    left:10%;
    position:absolute;
}*/

#page-light .listview.notice-list li > a div.left {
    color: #7a3838;
}

.punch-note-list {
    margin-top: .5rem;
    background: #fff;
}

    .punch-note-list.punch-note-detail {
        margin-top: 0;
    }

    .punch-note-list ul li {
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        overflow:hidden;
    }

        .punch-note-list ul li:last-child {
            border-bottom: none;
        }

        .punch-note-list ul li img {
            width: 100%;
            display: block;
        }

        .punch-note-list ul li .left {
            float: left;
            width: 3.25rem;
            padding: .8rem;
        }

        .punch-note-list ul li .tag-top {
            display: none;
            color: #fff;
            height: 1.13rem;
            width: 2.26rem;
            position: absolute;
            left: -0.8rem;
            top: -0.2rem;
            text-align: center;
            line-height: 30px;
            font-family: "黑体";
            background-color: #8c6a38;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .punch-note-list ul li.top .tag-top {
            display: block;
        }

        .punch-note-list ul li .tag-top .text {
            font-size:.45rem
        }

        .punch-note-list ul li .left .avatar {
            width: 1.65rem;
            height: 1.65rem;
            position:relative;
        }

        .punch-note-list ul li .right .vip{
            padding: 0 .25rem;
                    line-height: 1rem;
                    color: #8c6a38;
                    border:1px solid #8c6a38;
                    font-size: .6rem;
        }

            .punch-note-list ul li .left .avatar img {
                width: 100%;
                height: 100%;
            border-radius: 50%;
            }

        .punch-note-list ul li .right {
            padding: .8rem .5rem .5rem 3.25rem;
        }

            .punch-note-list ul li .right h3 {
                margin: 0;
                font-size: .75rem;
                font-weight: normal;
                color: #4a4a4a;
            }

            .punch-note-list ul li .right .permission {
                position: absolute;
                top: .8rem;
                right: .5rem;
            }

                .punch-note-list ul li .right .permission .btn {
                    margin: 0;
                    padding: 0 .25rem;
                    line-height: 1rem;
                    color: #8c6a38;
                    border-color: #8c6a38;
                    font-size: .6rem;
                }

            .punch-note-list ul li .right span {
                font-size: .5rem;
                color: #9b9b9b;
            }

            .punch-note-list ul li .right article {
                font-size: .7rem;
                color: #4a4a4a;
                padding: .25rem 0;
            }

            .punch-note-list ul li .right .topic {
                margin-top: .25rem;
            }

                .punch-note-list ul li .right .topic a {
                    background: #f4f4f4;
                    padding: .3rem;
                    font-size: .7rem;
                }

            .punch-note-list ul li .right .reply {
                background: #f4f4f4;
            }

    .punch-note-list.punch-note-detail ul li .right .reply {
        margin-left: -3.25rem;
        margin-right: -.5rem;
        background: #fff;
        margin-top: .5rem;
    }

        .punch-note-list.punch-note-detail ul li .right .reply:before {
            content: " ";
            top: -.5rem;
            left: 0;
            display: block;
            width: 100%;
            height: .5rem;
            background: #f5f5f5;
        }

    .punch-note-list ul li .right .reply a,
    .punch-note-list ul li .right .reply i {
        color: #474478;
    }

        .punch-note-list ul li .right .reply i.active {
            color: #EC6262;
        }

    .punch-note-list ul li .right .reply .favorite-list,
    .punch-note-list ul li .right .reply .comment-list {
        overflow: hidden;
        padding: .25rem !important;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .favorite-list,
    .punch-note-list.punch-note-detail ul li .right .reply .comment-list {
        margin: 0 .5rem !important;
        padding: .25rem 0 !important;
    }

    .punch-note-list ul li .right .reply .favorite-list + .comment-list {
        border-top: 1px solid #e1e1e1;
    }

    .punch-note-list ul li .right .reply .favorite-list dl,
    .punch-note-list ul li .right .reply .comment-list dl {
        margin: 0;
        font-size: .7rem;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .favorite-list {
        padding: .5rem 0;
    }

    .punch-note-list ul li .right .reply .favorite-list dt,
    .punch-note-list ul li .right .reply .comment-list dt {
        float: left;
        width: 1.2rem;
        text-align: center;
        padding: 0;
        font-size: .7rem;
        line-height: 1.2rem;
    }

    .punch-note-list ul li .right .reply .favorite-list dd,
    .punch-note-list ul li .right .reply .comment-list dd {
        margin: 0;
        padding-left: 1.2rem;
        line-height: 1.2rem;
    }

        .punch-note-list ul li .right .reply .favorite-list dd .favorite {
            display: inline;
        }

            .punch-note-list ul li .right .reply .favorite-list dd .favorite .avatar {
                display: none;
            }

            .punch-note-list ul li .right .reply .favorite-list dd .favorite .name {
                display: inline;
            }

    .punch-note-list.punch-note-detail ul li .right .reply .favorite-list dd > span {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .favorite-list dd .favorite .avatar {
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        padding: .1rem;
    }

        .punch-note-list.punch-note-detail ul li .right .reply .favorite-list dd .favorite .avatar img {
            border-radius: 50%;
        }

    .punch-note-list.punch-note-detail ul li .right .reply .favorite-list dd .favorite .name {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dt {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd {
        padding: .5rem 0;
    }

        .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd + dd {
            border-top: 1px solid #e1e1e1;
        }

    .punch-note-list ul li .right .reply .comment-list dd .left {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .left {
        display: block;
        padding: .25rem;
        width: 2rem;
    }

        .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .left .avatar {
            width: 1.5rem;
            height: 1.5rem;
        }

    .punch-note-list ul li .right .reply .comment-list dd .right {
        padding: 0;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right {
        padding-left: 2rem;
    }

    .punch-note-list ul li .right .reply .comment-list dd .right h3 {
        display: inline;
        font-size: .7rem !important;
        font-weight: normal;
    }

        .punch-note-list ul li .right .reply .comment-list dd .right h3 .list-comment-favorite-touch {
            display: none;
        }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right h3 {
        display: block;
        line-height: 1.2rem;
        position: relative;
    }

    .punch-note-list ul li .right .reply .comment-list dd .right h3 span {
        font-size: .7rem;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right h3 span {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right h3 .list-comment-favorite-touch {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

        .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right h3 .list-comment-favorite-touch i {
            font-style: normal;
        }

            .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right h3 .list-comment-favorite-touch i.icon {
                margin-left: .1rem;
            }

    .punch-note-list ul li .right .reply .comment-list dd .right > span {
        display: none;
    }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right > span {
        display: block;
        line-height: .8rem;
    }

    .punch-note-list ul li .right .reply .comment-list dd .right article {
        display: inline;
        padding: 0;
    }

        .punch-note-list ul li .right .reply .comment-list dd .right article span {
            display: none;
            font-size: .7rem;
            color: #4a4a4a;
        }

    .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right article {
        display: block;
    }

        .punch-note-list.punch-note-detail ul li .right .reply .comment-list dd .right article span {
            display: inline;
        }

    .punch-note-list ul li .right .option {
        height: 1.2rem;
    }

        .punch-note-list ul li .right .option dl {
            height: 100%;
            line-height: 1.2rem;
            font-size: 0.8rem;
            margin: 0.3rem 0;
        }

            .punch-note-list ul li .right .option dl dd {
                min-width: 15%;
                float: right;
                height: 100%;
                text-align: right;
                margin: 0;
                overflow: hidden;
            }

                .punch-note-list ul li .right .option dl dd a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                    .punch-note-list ul li .right .option dl dd a i {
                        font-style: normal;
                        background: #fff;
                        margin: 0;
                        width: auto;
                        color: #474478;
                    }

                        .punch-note-list ul li .right .option dl dd a i.active {
                            color: #EC6262;
                        }

.invite-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2a2a2a;
}

    .invite-card .img {
        margin: auto;
        margin-top: 2rem;
        text-align: center;
        width: 15rem;
    }

        .invite-card .img img {
            height: 100%;
            width: 100%;
            margin: auto;
            box-shadow: 0 0 30px 5px #000000, 0px 0 1px #fff;
        }

    .invite-card .tip {
        position: absolute;
        bottom: 0rem;
        left: 0;
        text-align: center;
        line-height: 3rem;
        color: #fff;
        width: 100%;
        font-size: .9rem;
    }

.btn-join-sign {
    border-radius: 1rem !important;
    HEIGHT: 2rem !important;
    margin: auto !important;
    position: absolute !important;
    width: 14rem !important;
    line-height: 2rem !important;
    top: .25rem !important;
    left: 50% !important;
    margin-left: -7rem !important;
}

.bar-tab.bar-tab-active .tab-item.primary-bgcolor.active,
.bar-tab.bar-tab-active .tab-item.primary-bgcolor:active {
    color: #fff;
}

.list-block.inset {
    margin: 0;
    padding: .5rem;
    padding-top: 2rem;
}

.punch-join {
    background: #fff;
}

    .punch-join .row.row-2 {
        height: 2.5rem;
        line-height: 2.5rem;
        color: #891919;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

.row.share-row {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.3rem;
    padding: .5rem;
    z-index: 2;
}

    .row.share-row .col-50 a {
        font-size: .55rem;
        display: block;
        height: 1.3rem;
        line-height: 1.3rem;
        color: #7c3939;
        padding: 0 .3rem;
        border-radius: .75rem;
        width: 4.3rem;
        text-align: center;
        background: rgba(255,255,255,.55);
            box-shadow: 0 0 10px 0px rgba(128, 128, 128, 0.55);
    }

    .row.share-row .col-50 .right {
        float: right;
    }



label.label-checkbox i.icon-form-checkbox {
    height: .9rem !important;
    width: .9rem !important;
}

    label.label-checkbox i.icon-form-checkbox.checkbox {
        border-radius: .1rem !important;
    }

label.label-checkbox input[type=checkbox]:checked + .item-media i.icon-form-checkbox, label.label-checkbox input[type=radio]:checked + .item-media i.icon-form-checkbox {
    background: #7a3838;
}

label.label-checkbox .item-inner {
    font-size: .7rem;
    margin-left: .4rem !important;
}

.punch-active-select {
    position: relative;
}


    .punch-active-select.selected {
        border: .1rem solid #891919;
    }

        .punch-active-select.selected:before {
            content: "";
            display: inline-block;
            position: absolute;
            bottom: 0;
            right: 0;
            border-style: solid;
            border-width: 0px 0px 1.9rem 1.9rem;
            border-color: transparent transparent #891919 transparent;
            width: 0px;
            height: 0px;
        }

        .punch-active-select.selected:after {
            content: "";
            display: inline-block;
            position: absolute;
            border: 0;
            right: .7rem;
            width: .3rem;
            bottom: .4rem;
            height: .7rem;
            border: solid .1rem #fff;
            border-left: none;
            border-top: none;
            transform: translate(7.75px,4.5px) rotate(45deg);
            -ms-transform: translate(7.75px,4.5px) rotate(45deg);
        }


.list-block .item-media {
    font-size: .7rem;
}

.punch-express-time {
    margin: .5rem;
    padding: .5rem 0;
    box-shadow: 0 4px 14px 3px rgba(0,0,0,0.10);
    background: #fff;
}

    .punch-express-time ul.timeline {
        list-style-type: none;
        padding: 0;
        position: relative;
    }

        .punch-express-time ul.timeline:after {
            content: " ";
            position: absolute;
            top: 0;
            width: .1rem;
            background: #929292;
            left: 4rem;
            margin-left: -0.05rem;
            height: 100%;
            z-index: 0;
        }

        .punch-express-time ul.timeline li {
            position: relative;
            margin-bottom: .5rem;
        }

            .punch-express-time ul.timeline li .date {
                position: absolute;
                width: 3rem;
                font-size: .7rem;
                line-height: 1.5rem;
                text-align: right;
                left: 0;
                top: 0;
                color: #000;
            }

            .punch-express-time ul.timeline li .time {
                position: absolute;
                width: 3rem;
                text-align: right;
                top: 1.5rem;
                font-size: .6rem;
                line-height: 1rem;
                color: #929292;
                overflow: hidden;
            }

            .punch-express-time ul.timeline li .section {
                position: absolute;
                background: #fff;
                border: 1px solid #929292;
                width: 1.5rem;
                height: 1.5rem;
                left: 3.25rem;
                line-height: 1.475rem;
                text-align: center;
                color: #929292;
                font-size: .7rem;
                border-radius: 50%;
                z-index: 1;
                margin: 0;
            }

                .punch-express-time ul.timeline li .section.point {
                    width: 1rem;
                    height: 1rem;
                    left: 3.5rem;
                    top: .25rem;
                    background: #fff !important;
                    border-color: #fff !important;
                }

                .punch-express-time ul.timeline li .section.fill {
                    background: #8c6a38;
                    border-color: #8c6a38;
                    color: #fff;
                }

                .punch-express-time ul.timeline li .section.point:after {
                    position: absolute;
                    background: #929292;
                    width: .3rem;
                    height: .3rem;
                    left: 50%;
                    top: 50%;
                    content: "";
                    border-radius: 50%;
                    margin-left: -.15rem;
                    margin-top: -.15rem;
                }

            .punch-express-time ul.timeline li .info {
                margin-left: 5rem;
                min-height: 3rem;
                padding-right: .5rem;
            }

                .punch-express-time ul.timeline li .info h6 {
                    margin: 0;
                    font-size: .8rem;
                    line-height: 1.5rem;
                }

                    .punch-express-time ul.timeline li .info h6 + article {
                        line-height: initial;
                    }

                .punch-express-time ul.timeline li .info article {
                    max-height: initial;
                    font-size: .7rem;
                    line-height: 1.5rem;
                }

.punch-active-user .user-list {
    height: 1.2rem;
    overflow: hidden;
    margin: .3rem auto;
    width: 6rem;
}

    .punch-active-user .user-list .avatar {
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
        border-radius: 50%;
        margin-right: -.5rem;
        border: 1px solid #fff;
    }

        .punch-active-user .user-list .avatar.more {
            background-image: url(data:image/png;base64,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);
            background-size: cover;
        }

.redpoint {
    position: absolute !important;
    top: -.2rem;
    right: -.4rem;
    height: .4rem;
    width: .4rem;
    background-color: #f43530;
    border-radius: .2REM;
    color: #fff;
    text-overflow: ellipsis;
    text-align: center;
}

.punch-message-list {
    margin: 0;
}