.swiper-slide img {
    display: block;
}

.header {
    padding: 0 .85rem;
    background: -moz-linear-gradient(top, #bf9563, rgb(240, 240, 255));
    background: -webkit-gradient(linear,left top,left bottom,from(rgb(191, 149, 99)),to(rgb(240, 240, 241)),color-stop(0.95,rgb(191, 149, 99,.2)),color-stop(95%,rgb(240, 240, 241)));
    background: -o-linear-gradient(top, #bf9563, rgb(240, 240, 241));
}

#page-light .search-input input {
    padding: 0 .75rem;
    line-height: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: .85rem;
    bottom: 0;
}

.searchbox, .searchbar {
    background: rgba(255,255,255,0);
    bottom: 0;
    padding: .8rem 0;
    display: flex;
}

    .searchbox .message, .searchbar .message, .searchbox .favorite {
        width: 2.2rem;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: right;
        background-size: 1.5rem;
        background-image: url('../images/icons/punch/message.png');
    }

    .searchbox .search-input, .searchbar .search-input {
        background: rgba(255,255,255,0);
        flex: 1;
    }

.swiper-pagination-bullet {
    background: #909090;
}

.swiper-container .pagination .swiper-pagination-bullet-active {
    background: #fff;
}

#page-light .goods-list li {
    border-radius: .5rem;
}

    #page-light .goods-list li a img {
        border-radius: .5rem;
    }

    #page-light .goods-list li .note {
        padding: 0 .2rem 0 .5rem;
    }

        #page-light .goods-list li .note p {
            background: rgba(239,239,239,0);
            font-size: .575rem;
            text-align: center;
            color: rgb(29,29,29);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0;
        }

    #page-light .goods-list li a .goods-buy {
        margin: 0;
        right:0;
        bottom: .3rem !important;
        height: 1.4rem !important;
        width: 4.3rem !important;
    }

        #page-light .goods-list li a .goods-buy .button {
            height: 1.4rem !important;
            width: 4.3rem !important;
            line-height: 1.4rem !important;
            font-size: .65rem;
            background: #f76438;
            border-radius: 1.15rem;
        }

        #page-light .goods-list li a .goods-buy .button {
        }

.section h1 {
    border-bottom: none;
    border-left: none;
    background: rgba(255,255,255,0);
    padding-left: 0;
}

    .section h1.normal {
        font-size: .7rem;
        font-weight: normal;
    }

.container {
    padding: .5rem .85rem;
}

    .container.mountain {
        background-image: url('../images/mountain.png');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
    }

.course-section {
    overflow: hidden;
    width: 100%;
    margin-top: .8rem;
}

    .course-section .course-slider {
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

        .course-section .course-slider li {
            /*float: left;
        display: inline;*/
            width: 11.35rem;
            height: 11.725rem;
            margin-right: .85rem;
        }

            .course-section .course-slider li:last-child {
                margin-right: 0;
            }

            .course-section .course-slider li .course-container {
                border-radius: .25rem;
                overflow: hidden
            }

                .course-section .course-slider li .course-container .course-header {
                    height: 4.6rem;
                    background-color: #a05b3d;
                    padding: 0 .5rem;
                    background-repeat: no-repeat;
                    background-position: 97% bottom;
                    background-position: -webkit-calc(100% - .5rem) bottom;
                    background-position: calc(100% - .5rem) bottom;
                    background-size: 3rem;
                    padding-right: 3rem;
                    position: relative;
                }

                    .course-section .course-slider li .course-container .course-header .left {
                        padding: .5rem 0;
                    }

                    .course-section .course-slider li .course-container .course-header .right {
                        width: 3rem;
                        /*height: 3.65rem;*/
                        height:3rem;
                        position: absolute;
                        bottom: 0;
                        right: .85rem;
                        z-index: 3;
                    }

                        .course-section .course-slider li .course-container .course-header .right:before {
                            content: " ";
                            position: absolute;
                            bottom: 0;
                            right: -.25rem;
                            width: 3rem;
                            height: 3.4rem;
                            height: 2.8rem;
                            border-top-left-radius: .25rem;
                            border-top-right-radius: .25rem;
                            background: rgba(255,255,255,.3);
                            z-index: 2;
                        }

                        .course-section .course-slider li .course-container .course-header .right:after {
                            content: " ";
                            position: absolute;
                            bottom: 0;
                            right: -.5rem;
                            width: 3rem;
                            height: 3.15rem;
                            height: 2.4rem;
                            border-top-left-radius: .25rem;
                            border-top-right-radius: .25rem;
                            background: rgba(255,255,255,.1);
                            z-index: 1;
                        }

                        .course-section .course-slider li .course-container .course-header .right img {
                            height: 100%;
                            width: 100%;
                            position: relative;
                            z-index: 3;
                            border-top-left-radius: .25rem;
                            border-top-right-radius: .25rem;
                        }

            .course-section .course-slider li.king-book .course-container .course-header,
            .course-section .course-slider li:nth-child(even) .course-container .course-header {
                background-color: #504845
            }

            .course-section .course-slider li.tcm-course .course-container .course-header,
            .course-section .course-slider li:nth-child(odd) .course-container .course-header {
                background-color: #a05b3d;
            }

            .course-section .course-slider li .course-container .course-header h1 {
                font-size: .9rem;
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
                line-height: 1.5rem;
            }

            .course-section .course-slider li .course-container .course-header p.white {
                color: rgba(255,255,255,1);
                font-size: .7rem;
                margin-bottom: .25rem;
            }

            .course-section .course-slider li .course-container .course-header p {
                font-size: .55rem;
                color: rgba(255,255,255,.5);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
                line-height: 1rem;
            }

            .course-section .course-slider li .course-container .course-list {
                height: 7.125rem;
                background: #bf9463;
                box-shadow: inset 0 0 3rem 0rem #b17857;
                padding: .5rem;
            }

            .course-section .course-slider li.king-book .course-container .course-list,
            .course-section .course-slider li:nth-child(even) .course-container .course-list {
                background: #695951;
                box-shadow: inset 0 0 3rem 0rem #4a4649;
            }

            .course-section .course-slider li.tcm-course .course-container .course-list,
            .course-section .course-slider li:nth-child(odd) .course-container .course-list {
                background: #bf9463;
                box-shadow: inset 0 0 3rem 0rem #b17857;
            }

            .course-section .course-slider li .course-container .course-list dl {
                margin: 0;
                height: 1.5rem;
                line-height: 1.5rem;
                color: rgba(255,255,255,1);
                font-size: .8rem;
            }

                .course-section .course-slider li .course-container .course-list dl:after {
                    clear: both;
                }

                .course-section .course-slider li .course-container .course-list dl dt {
                    float: left;
                    text-align: center;
                }

                .course-section .course-slider li .course-container .course-list dl dd {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-left: 0;
                }

                    .course-section .course-slider li .course-container .course-list dl dd a {
                        color: #fff;
                    }

            .course-section .course-slider li .course-container .course-list section {
                text-align: center;
                color: rgba(255,255,255,.5);
                font-size: .6rem;
                line-height: 1.75rem;
            }

#page-light .punch-list {
}

    #page-light .punch-list li.layout-1 {
        height: 4.75rem;
        padding: .5rem;
    }

        #page-light .punch-list li.layout-1.item-link {
            padding-right: 1.5rem;
            background-image: url(../light7/dist/img/i-list-chevron-right.png);
            background-repeat: no-repeat;
            background-position: 97% center;
            background-position: -webkit-calc(100% - .5rem) center;
            background-position: calc(100% - .5rem) center;
            background-size: .7rem;
        }

        #page-light .punch-list li.layout-1 a img {
            width: 4.75rem;
            height: 3.75rem;
        }

        #page-light .punch-list li.layout-1 .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 .5rem;
            height: 1.2rem;
            line-height: 1.2rem;
        }

    #page-light .punch-list li a .note p {
        background: rgba(255,255,255,0);
        padding: .25rem 0;
    }

    #page-light .punch-list li a div.goods-buy {
        background-image: url('../images/icons/punch/play.png') !important;
        height: 1.375rem !important;
        width: 1.375rem !important;
    }

#page-light .goods-list li a .note .price {
    color: #f76438;
    font-size: .75rem;
}


.course-play-list.list-block {
    margin: 0;
}

    .course-play-list.list-block .item-link.item-play .item-inner {
        background-image: url('../images/icons/punch/play.png');
        background-size: 1.2rem;
        padding-right: 2.6rem;
    }

.buttons-tab .button {
    font-size: .7rem;
}

    .buttons-tab .button.active {
        color: #fd6139;
        font-size: .9rem;
        border-bottom: none;
    }

.opt-circular.icon-img {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
}

    .opt-circular.icon-img.brokerage {
        background-image: url('../images/icons/punch/brokerage.png');
        background-position: 50% 20%;
        background-size: 1rem;
        background-color: #fff;
        bottom: 5.5rem
    }

    .opt-circular.icon-img.gift,
    .opt-circular.icon-img.home {
        background-image: url('../images/icons/punch/gift-white.png');
        box-shadow: initial;
        background-size: 1rem;
        top: .25rem;
        right: .25rem;
        position: absolute;
    }

    .opt-circular.icon-img.home {
        background-image: url('../images/icons/punch/go-back.png');
        left: .25rem;
    }

#page-light .goods-list li.layout-1 a img {
    /*width: 4.55rem;*/
}

.go-on-play {
    background-image: url(../images/icons/punch/go-on-play.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: .5rem;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
}

.play-list-timer {
    background-image: url(../images/icons/punch/play-list-timer.png);
    background-position: center 98%;
    background-repeat: no-repeat;
    background-size: .5rem;
    width: .63rem;
    height: .63rem;
    display: inline-flex;
    margin-right: .1rem;
}

.play-list-play {
    background-image: url(../images/icons/punch/play.png);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}


.searchbox.play-footer-comment {
    padding: 0 .85rem
}

.searchbox.play-footer-comment .search-input input {
    background: #f0f0f0;
}

.searchbox.play-footer-comment .icon {
    display: initial;
}

.searchbox.play-footer-comment .message,
.searchbox.play-footer-comment .favorite {
    position: relative;
    background-image: url('../images/icons/punch/comment.png');
    background-size: 1rem;
}
.searchbox.play-footer-comment .favorite {
    background-image: url('../images/icons/punch/favorite.png');
}
    .searchbox.play-footer-comment .favorite.active {
        background-image: url('../images/icons/punch/favorite-active.png');
    }

    .searchbox.play-footer-comment .message span,
    .searchbox.play-footer-comment .favorite span {
        position: absolute;
        top: .1rem;
        right: -.3rem;
        background: #fd6139;
        border-radius: .3rem;
        height: .6rem;
        line-height: .6rem;
        font-size: .36rem !important;
        padding: 0 .2rem;
        color: #fff;
    }
    .searchbox.play-footer-comment .icon{
        display:initial!important;
    }

.buttons-tab .button.min:before{

}

.buttons-tab .button.dot:before {
    position: absolute;
    top: .25rem;
    left: 50%;
    margin-left: 1rem;
    background: #fd6139;
    height: .6rem;
    width: .6rem;
    font-size: .35rem;
    line-height: .6rem;
    color: #fff;
    border-radius: 50%;
    content: attr(data-count);
}
.buttons-tab .button.dot.min:before {
    content: " ";
    height: .3rem;
    width: .3rem;
}