#give-courses {
    @mixin px2px($name, $px) {
        #{$name}: round($px / 2) * 1px;
    }
    @function px2rem($px) {
        @return #{$px}px
    }
    background: #3d1aaf;
    padding-bottom: px2rem(45);

    .banner {
        width: 100%;
        height: 187.5px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .give-box {
        background-color: #1c008c;
        box-shadow: 0 0 4px 0 #1c008c;
        margin: px2rem(10);
        padding: px2rem(10) px2rem(5) 0 px2rem(5);

        .give-course {
            width: 100%;
            height: px2rem(125);
            background-color: #fff;
            border-radius: 2px;
            margin-bottom: px2rem(10);
            padding: px2rem(8) px2rem(5);
            display: flex;
            justify-content: space-between;

            .give-course-img {
                width: px2rem(150);
                height: px2rem(108);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .give-course-mess {
                width: px2rem(178);
                height: px2rem(108);
                margin-left: px2rem(7);
                position: relative;
                text-align: left;

                .course-title {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .course-title a {
                    color: #353535;
                    @include px2px(font-size, 26);
                }

                .course-teacher {
                    @include px2px(font-size, 24);
                    color: #666;
                    margin-top: px2rem(12);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .course-time {
                    @include px2px(font-size, 24);
                    color: #666;
                    margin-top: px2rem(7);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .tag {
                    display: inline-block;
                    color: #555;
                    background-color: #f2f2f2;
                    margin-right: px2rem(4);
                    padding: px2rem(2) px2rem(4);
                }

                .toreceive {
                    width: px2rem(93);
                    height: px2rem(24);
                    @include px2px(font-size, 24);
                    color: #fff;
                    background-color: #09f;
                    border-radius: 4px;
                    line-height: px2rem(24);
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                }
            }
        }

        .rule-title {
            color: #2ff8ff;
            @include px2px(font-size, 32);
            text-align: left;
            padding-left: px2rem(5);
        }

        .rule-list {
            text-align: left;
            color: #fff;
            @include px2px(font-size, 24);
            padding-left: px2rem(5);
        }

        .marquee_box {
            width: px2rem(355);
            height: px2rem(30);
            overflow: hidden;
            background-color: rgba(0, 0, 0, .5);
            margin-left: px2rem(-5);
            margin-top: px2rem(15);

            .marquee_list {
                li {
                    color: #fff;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    @include px2px(font-size, 24);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;

                    img {
                        width: px2rem(18);
                        height: px2rem(18);
                        vertical-align: middle;
                        border-radius: 50%;
                    }

                    span {
                        color: #0099ff;
                        display: inline-block;
                        margin: 0 5px;
                    }
                }
            }

            .marquee_top {
                transition: all .5s;
                margin-top: -30px;
            }
        }
    }

    .set-prize {
        background-color: #FCECB1;
        border-radius: px2rem(3);
        margin: px2rem(20) px2rem(10) 0 px2rem(10);
        padding: px2rem(18) px2rem(15) px2rem(20) px2rem(15);

        .set-prize-title {
            width: 100%;
            text-align: center;
            color: #F75E18;
            @include px2px(font-size, 28);

            img {
                width: px2rem(19);
                height: px2rem(19);
                margin-right: px2rem(10);
                vertical-align: sub;
            }
        }

        .set-prize-content {
            text-align: left;
            color: #6E1517;
            @include px2px(font-size, 24);
            display: flex;
            flex-wrap: wrap;

            p {
                margin-top: px2rem(12);
            }
        }
    }

    .ranking-list {
        margin: px2rem(30) px2rem(10) 0 px2rem(10);

        .ranking_title {
            width: 100%;
            text-align: center;

            img {
                width: px2rem(18);
                height: px2rem(20);
                vertical-align: text-bottom;
            }

            span {
                color: #fff;
                @include px2px(font-size, 28);
                display: inline-block;
                margin-left: px2rem(10);
            }

            p {
                color: #fee600;
                @include px2px(font-size, 24);
                margin-top: 10px;
            }
        }

        table {
            text-align: center;
            margin-top: px2rem(15);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
            width: 100%;
            border-radius: 6px 6px 0 0;
            overflow: hidden;

            thead tr {
                background-color: #fadc7f;
                height: px2rem(30);
                line-height: px2rem(30);
                @include px2px(font-size, 26);
                color: #ad4700;
            }

            tbody tr:nth-of-type(even) {
                background-color: #fadc7f;
                height: px2rem(35);
            }

            tbody tr:nth-of-type(odd) {
                background-color: #ffe794;
                height: px2rem(35);
            }

            tbody tr {
                color: #333;
                @include px2px(font-size, 24);
            }

            tbody tr td {
                width: 30%;
            }

            tbody tr td:nth-child(2) {
                text-align: left;
                padding-left: px2rem(15);
            }

            tbody tr td:nth-child(2) span {
                display: inline-block;
                width: 55%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                position: relative;
                top: 5px;
                margin-left: px2rem(5);
            }

            tbody tr td:nth-child(1) img {
                vertical-align: middle;
                width: px2rem(18);
                height: px2rem(22);
            }

            tbody tr td:nth-child(2) img {
                width: px2rem(20);
                height: px2rem(20);
                vertical-align: middle;
                border-radius: 50%;
            }

            tbody .ismylist td {
                background-color: #ad4700;
                color: #fff;
            }
        }

        .btm {
            width: 100%;
            height: px2rem(10);
            background-color: #ffe794;
            border-radius: 0 0 6px 6px;
        }
    }

    .julynotice {
        margin: px2rem(60) auto px2rem(30) auto;
        color: #FEE600;
        @include px2px(font-size, 13);
        text-align: center;
    }

    .code-mbc {
        position: fixed;
        left: 0;
        width: 100%;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 9;
        text-align: center;

        .code-box {
            width: 80%;
            background-color: #fff;
            border-radius: px2rem(10);
            text-align: center;
            margin: px2rem(200) auto 0 auto;
            padding-top: px2rem(15);

            .code-title {
                color: #333;
                @include px2px(font-size, 36);

                i {
                    color: #f00;
                    @include px2px(font-size, 36);
                    font-style: normal;
                }
            }

            #qrCodeWpay {
                width: px2rem(150);
                height: px2rem(150);
                margin: px2rem(10) auto 0 auto;
            }

            .btmmess {
                color: #666;
                padding-bottom: px2rem(15);
                margin-top: px2rem(-5);
            }
        }

        .close {
            display: inline-block;
            @include px2px(font-size, 60);
            color: #fff;
            margin-top: px2rem(20);
        }
    }


}
