@import "src/assets/css/variable";
#assistance {
    width: 100%;
    background: $white;
    position: relative;
    padding-bottom: px2rem(55);
    -webkit-overflow-scrolling: touch;
    text-align: center;


    $mt15: 15px;

    @function px2rem($px) {
        @return #{$px}px;
    }

    @mixin px2px($prop, $value) {
        #{$prop}: #{$value/2}px
    }

    @mixin page-big($bg, $color, $shadow) {
        border-radius: 40px;
        border: 1px solid transparent;
        outline: none;
        text-align: center;
        background: $bg;
        color: $color;
        font-weight: bold;
        box-shadow: $shadow;
    }

    @mixin border-b-1px($color) {
        position: relative;
        &::after {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid $color;
            content: '';
        }
    }


    .barrage-wrapper {
        width: 100%;
        height: px2rem(30);
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0;
        z-index: 99;
        overflow: hidden;

        .barrage-list {
            height: px2rem(30);

            li {
                height: px2rem(30);
                position: relative;
                display: flex;
                align-items: center;
                justify-content: left;
                margin: 0 10px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

                .person-left {
                    display: flex;
                    align-items: center;
                    line-height: px2rem(30);
                    margin-right: 5px;

                    .avatar {
                        min-width: px2rem(20);
                        height: px2rem(20);
                        border-radius: 50%;
                        margin-right: 5px;
                    }

                    .name {
                        color: $active;
                        max-width: px2rem(100);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .title {
                    color: $white;
                }

                .person-right {
                    margin-right: 58px;

                    .time {
                        @include px2px(font-size, 22);
                        color: $color_666;
                    }
                }
            }
        }
    }

    .bg-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 60%;
        transform-origin: top;
        background-size: cover;

        .ranklist-btn {
            height: px2rem(30);
            line-height: px2rem(30);
            padding: 0 10px;
            background-color: #2FF8FF;
            box-shadow: 0 0 5px 0 rgba(47, 248, 255, .4);
            border-radius: 15px 0 0 15px;
            position: fixed;
            top: 160px;
            right: 0;
            z-index: 999;
            color: #15006A;
            @include px2px(font-size, 20);
            -webkit-appearance: none;
            outline: 0;
            border: none;
        }
    }

    .christ-getwrap {
        overflow: hidden;

        .title {
            margin-top: 10px;
            margin-left: $mt15;
            text-align: left;
            @include px2px(font-size, 28);

            .active {
                color: $active;
            }
        }

        .btn-get-wrap {
            margin-top: 15px;

            .btn-get {
                width: px2rem(300);
                height: px2rem(38);
                line-height: px2rem(34);
                display: block;
                margin: 0 auto;
                @include px2px(font-size, 32);
                @include page-big($active, $white, none);
                border-radius: 5px !important;
            }
        }

        .person-tolearn {
            margin-top: 10px;
            color: $color_333;
            font-size: 14px;
        }

        .person-getwarp {
            width: 100%;
            margin-top: $mt15;

            .person-get {
                height: px2rem(30);
                line-height: px2rem(30);
                background-color: $bg_f4f4f4;
                text-align: left;
                padding-left: 15px;
                color: $color_333;
                @include px2px(font-size, 24);
            }

            .person-null {
                height: px2rem(105);
                line-height: px2rem(105);
                text-align: center;
                overflow: hidden;
            }

            .person-list {
                height: px2rem(105);
                overflow: hidden;
                background-color: $bg_f4f4f4;

                li {
                    height: px2rem(35);
                    line-height: px2rem(35);
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    @include border-b-1px(#eae7f4);
                    margin: 0 10px;

                    .person-left {
                        display: flex;
                        align-items: center;
                        overflow: hidden;

                        .avatar {
                            min-width: px2rem(20);
                            height: px2rem(20);
                            border-radius: 50%;
                            margin-right: 5px;
                        }

                        .name {
                            display: inline-block;
                            max-width: px2rem(150);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    .person-right {

                        .time {
                            @include px2px(font-size, 22);
                            color: $color_666;
                        }
                    }
                }
            }

            .person-encourage {
                color: #FA952F;
                @include px2px(font-size, 24);
                margin-top: 10px;
            }

            .btn-morewap {
                margin-top: 10px;

                .btn-more {
                    width: px2rem(300);
                    height: px2rem(38);
                    line-height: px2rem(34);
                    display: block;
                    margin: 0 auto;
                    @include px2px(font-size, 32);
                    @include page-big(#3D1AAF, $white, none);
                    border-radius: 5px !important;
                }
            }

            .more-title {
                margin-top: 10px;
                margin-bottom: 15px;
                color: #FA952F;
                @include px2px(font-size, 24);
            }

            .course-wrap {
                padding: 0 10px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                flex-flow: wrap;
                li {
                    display: inline-block;
                    width: px2rem(160);
                    height: px2rem(106);
                    margin-right: 10px;
                    margin-bottom: 20px;
                }

                li:nth-child(2) {
                    margin-right: 0;
                }

                li:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .christ-toactive {
        width: 100%;
        height: px2rem(35);
        line-height: px2rem(35);
        text-align: center;
        color: $white;
        @include px2px(font-size, 36);
        font-weight: bold;
        background-color: #3D1AAF;
        position: fixed;
        bottom: 0;
    }

    .module-dialog {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        height: 100%;
        font-size: .8rem;

        .box-mask {
            z-index: 900;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .box-container {
        border-radius: 10px;
        background-color: $white;
        width: 80%;
        position: relative;
        padding-bottom: 15px;

        .box-content {
            .box-title {
                @include px2px(font-size, 44);
                line-height: px2rem(44);
                height: px2rem(44);
                margin-top: 10px;
                color: $active;

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

                .text1 {
                    color: $color_333;
                    @include px2px(font-size, 36);
                }

                .icon-right {
                    @include px2px(font-size, 80);
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: -3px;
                }
            }

            .box-text {
                .text1 {
                    color: $color_333;
                    @include px2px(font-size, 36);
                    text-align: center;
                    margin: 15px auto 20px;
                    padding: 0 10px;
                }

                .text2 {
                    color: $color_333;
                    @include px2px(font-size, 28);
                    margin: 0 auto;
                    text-align: left;
                    max-width: 260px;
                    margin-bottom: 5px;
                }

                .text3 {
                    color: $active;
                    @include px2px(font-size, 24);
                    margin: 0 auto;
                    text-align: left;
                    max-width: 260px;
                }
            }
        }

        .box-bottom1 {
            width: 100%;

            img {
                width: 50% !important;
            }

            p {
                font-size: 12px;
                color: $color_666;
                margin-top: -15px;
            }
        }

        .box-bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .activeallcourse {
                padding: 10px 30px;
                border-radius: 5px;
                min-width: 260px;
                border: 1px solid transparent;
                background-color: #09f;
                color: $white;
                font-size: 18px;
            }

            img {
                width: 50% !important;
            }

            .bottom-item {
                height: px2rem(40);
                padding: 0 54px;
                color: $white;
                background-color: $active;
                border-radius: 30px;
                @include px2px(font-size, 44);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 14px;
            }
        }

        .box-close {
            position: absolute;
            left: 50%;
            bottom: -60px;
            color: $white;
            margin-left: -15px;

            .f30 {
                font-size: 30px;
            }
        }
    }

    .gift-package {
        display: block;
        width: 58px;
        height: 72px;
        position: fixed;
        right: 0;
        top: 50%;
        margin-top: -25px;

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

    }

    .iconfont{
        font-size: 30px;
    }

}
