@import '~antd/es/style/themes/default.less';

.h-topic-global {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;

    .topic-background {
        width: 1460px;
        // background-color: #e9e9e9;

        .top-picture {
            width: 100%;
            padding-bottom: 10px;
        }

        .top-global {
            display: flex;
            justify-content: space-between;

            .left-global {
                width: 1204px;
                padding: 0;
                margin: 0;

                .left-carousel {

                    .carousel-content {
                        height: 608px;
                        width: 1204px;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        display: flex;
                        align-items: flex-end;
                        cursor: pointer;

                        .carousel-textbg {
                            display: flex;
                            justify-content: flex-start;
                            width: 100%;
                            padding: 38px 0 40px;
                            background: #0000008c;

                            .carousel-text {
                                color: #fff;
                                width: 940px;
                                text-align: center;

                                &>span {
                                    font-weight: bold;
                                    font-size: 32px;
                                    line-height: 40px;
                                }
                            }
                        }
                    }

                    .carousel-content:hover {
                        -webkit-filter: brightness(105%);
                        filter: brightness(105%);
                    }

                    .slick-dots-bottom {
                        bottom: 48px;
                    }

                    .slick-dots {
                        justify-content: flex-start;
                        margin-left: 960px;
                        margin-right: 0;
                    }

                    .slick-dots li {
                        width: 24px;
                    }

                    .slick-dots li button {
                        height: 14px;
                        width: 14px;
                        border-radius: 50%;
                        opacity: 1;
                    }

                    .slick-dots li.slick-active button {
                        opacity: 1;
                        background: #e32f2f;
                    }

                    .slick-dots li button:hover,
                    .slick-dots li button:focus {
                        background: #e32f2f;
                        opacity: 0.75;
                    }
                }

                .left-activity {
                    height: 0;
                    width: 1204px;
                }

                .left-card {

                    .left-card-top {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: 22px;

                        .left-card-title {
                            height: 60px;
                            background: linear-gradient(to right, #e32f2f, #fe8d8d) no-repeat center;
                            border-top-left-radius: 20px;
                            border-top-right-radius: 20px;
                            text-align: center;
                            width: 252px;

                            &>span {
                                font-weight: bold;
                                font-family: '黑体';
                                font-size: 24px;
                                line-height: 60px;
                                color: #FFFFFF;
                                letter-spacing: 1px;
                            }
                        }

                        .left-card-content {
                            flex: 1;
                            border-bottom: 3px solid #fe8d8d;
                            height: 60px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .left-card-flag {
                                margin-left: 9px;
                                margin-top: 4px;
                            }

                            .left-card-other {
                                font-family: '黑体';
                                font-size: 18px;
                                color: #7a7a7a;
                                cursor: pointer;
                            }

                            .left-card-other:hover {
                                color: #e32f2f;
                                text-decoration: underline;
                            }

                            .left-card-icon {
                                color: #7a7a7a;
                            }
                        }

                    }

                    .left-project {
                        margin-top: 30px;
                        background: #fff;

                        .left-project-content {
                            display: flex;
                            justify-content: left;

                            .left-project-content-list {
                                margin-left: 40px;
                                width: 100%;

                                .left-project-content-item {
                                    font-size: 14px;
                                    font-family: '黑体';
                                    line-height: 31px;
                                    font-weight: 600;
                                    display: flex;
                                    justify-content: space-between;
                                    width: 100%;

                                    .left-project-content-item-title {
                                        color: #4f4f4f
                                    }

                                    &>span {
                                        color: #4f4f4f
                                    }

                                    .left-project-content-item-title:hover {
                                        color: #e32f2f;
                                        text-decoration: underline;
                                        transition: all .2s cubic-bezier(.645, .045, .355, 1);
                                    }
                                }
                            }
                        }

                        .left-project-content .ant-list-sm .ant-list-item {
                            padding: 0 0 0 16px;
                            border-bottom: 2px solid #e0e0e0;
                        }

                        .left-graceful-bg {
                            height: 204px;
                            width: 387px;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            display: flex;
                            justify-content: center;
                            align-items: flex-end;
                            cursor: pointer;

                            .left-graceful-textbg {
                                height: 40px;
                                width: 387px;
                                background: linear-gradient(to right, #e32f2ff2, #e32f2f66) no-repeat center;
                                background-size: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .left-graceful-text {
                                    color: #fff;
                                    font-size: 16.64px;
                                    font-weight: bold;
                                }
                            }
                        }

                        .left-graceful-bg:hover {
                            -webkit-filter: brightness(108%);
                            filter: brightness(108%);
                        }

                        .left-classroom-bg {
                            height: 218px;
                            // height: 290px;
                            width: 387px;
                            cursor: pointer;
                        }

                        .left-classroom-bg:hover {
                            -webkit-filter: brightness(108%);
                            filter: brightness(108%);
                        }

                        .left-classroom-textbg {
                            height: 40px;
                            width: 387px;
                            margin-top: 14px;
                            text-align: center;

                            &>span {
                                color: #fd4e4f;
                                font-size: 16.64px;
                                font-weight: bold;
                                line-height: 16.64px;
                                cursor: pointer;
                            }

                            &>span:hover {
                                text-decoration: underline;
                            }
                        }

                        .bottom-select {
                            margin-bottom: 22px;
                            background: #fff0f0;
                            padding: 20px 0px 22px 24px;

                            .bottom-select-label {
                                font-size: 16px;
                                font-weight: 700;
                                font-family: "黑体";
                                display: block;
                                padding-left: 9px;
                                padding-bottom: 6px;
                            }

                            .ant-tag-checkable-checked {
                                background-color: #e32f2f;
                            }

                            .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
                                color: #e32f2f;
                            }

                            .ant-tag-checkable:active {
                                background-color: #e32f2f;
                                color: #FFFFFF !important;
                            }
                        }

                        .bottom-select .bottom-select-tag {
                            font-size: 14px;
                            padding: 0 9px;
                            line-height: 27px;
                            margin-right: 6px;
                        }

                        .bottom-content {
                            margin-bottom: 22px;

                            .bottom-card {
                                background-image: url("~@/assets/highQuality/card_picture.jpg");
                                background-size: 100% 100%;
                                background-repeat: no-repeat;

                                .bottom-card-title {
                                    height: 40px;
                                    padding-left: 20px;
                                    background: linear-gradient(to right, #e32f2f, #fd9596) no-repeat center;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    &>span {
                                        font-size: 20px;
                                        font-weight: bold;
                                        line-height: 40px;
                                        color: #ffffff;
                                    }

                                    &>div>img {
                                        margin-right: 13px;
                                        cursor: pointer;

                                        &:hover {
                                            -webkit-filter: brightness(108%);
                                            filter: brightness(108%);
                                        }
                                    }
                                }

                                .bottom-card-remark {
                                    height: 36px;
                                    padding-left: 20px;
                                }

                                .bottom-card-remark .bottom-card-remark-text {
                                    color: #494949;
                                    font-size: 16px;
                                    font-weight: 700;
                                    font-family: "黑体";
                                    line-height: 36px;
                                }

                                .bottom-card-content {
                                    padding-left: 20px;
                                    padding-bottom: 6px;
                                    padding-top: 10px;

                                    &>p {
                                        color: #494949;
                                        margin-bottom: 2px;
                                    }
                                }
                            }
                        }

                        .bottom-title {
                            font-size: 22px;
                            font-family: '黑体';
                            color: #838383;
                            margin-bottom: 12px;
                        }

                        .bottom-other {
                            display: flex;
                            justify-content: center;

                            .bottom-other-text {
                                font-family: '黑体';
                                font-size: 18px;
                                color: #7a7a7a;
                                cursor: pointer;
                            }

                            .bottom-other-text:hover {
                                color: #e32f2f;
                                text-decoration: underline;
                            }

                            .bottom-other-icon {
                                color: #7a7a7a;
                            }
                        }
                    }
                }


            }

            .right-global {
                background: #fff;
                width: 100%;
                margin-left: 28px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .right-material:hover {
                    -webkit-filter: brightness(108%);
                    filter: brightness(108%);
                }

                .right-display {
                    width: 100%;
                    padding: 14px 0 40px;

                    .right-display-title {
                        font-size: 14px;
                        color: #3f3f3f;
                        text-align: center;
                        font-weight: bold;
                    }

                    .right-display-content {
                        display: flex;
                        justify-content: flex-start;
                        margin-top: 20px;
                        margin-left: 26px;

                        .right-display-content-img {
                            height: 60px;
                            width: 60px;
                        }

                        .right-display-content-right {
                            margin-left: 16px;

                            .right-display-content-title {
                                color: #3f3f3f;
                                font-size: 14px;
                                font-weight: bold;
                            }

                            .right-display-content-content {
                                font-weight: bold;
                                margin-top: 4px;

                                .right-display-content-number {
                                    font-size: 34px;
                                    font-family: 'Consolas';
                                    line-height: 34px;
                                }

                                .number-blue {
                                    color: #26c3da;
                                }

                                .right-display-content-unit {
                                    font-size: 28px;
                                    line-height: 28px;
                                    margin-left: 2px;
                                }
                            }

                        }
                    }

                    .right-display-content-pointer {
                        cursor: pointer;
                    }
                }

                .right-learn {
                    background-image: url("~@/assets/highQuality/learn.jpg");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 721px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .right-learn-test {
                        height: 45px;
                        width: 200px;
                        border-radius: 9px;
                        background: linear-gradient(to top, #5867ff, #9189ff) no-repeat center;
                        text-align: center;
                        cursor: pointer;

                        &>span {
                            font-size: 20px;
                            line-height: 44px;
                            color: #FFFFFF;
                            font-weight: bold;
                            letter-spacing: 1px;
                        }

                        &:hover {
                            -webkit-filter: brightness(105%);
                            filter: brightness(105%);
                        }
                    }

                    .right-learn-exam {
                        .right-learn-test;
                        background: linear-gradient(to top, #9657ce, #df98f8) no-repeat center;
                        margin-top: 38px;
                    }

                    .right-learn-title {
                        .right-learn-test;
                        background: linear-gradient(to top, #fc9464, #fab696) no-repeat center;
                        margin: 14px 0;
                    }

                    .right-learn-rank {

                        .right-learn-rank-title {
                            width: 100%;
                            text-align: center;
                            padding: 10px 0;

                            &>span {
                                color: #fc4f50;
                                font-size: 16px;
                                font-weight: bold;
                                font-family: "黑体";
                                line-height: 16px;
                                letter-spacing: 1px;
                            }
                        }

                        .right-learn-rank-content {
                            height: 210px;
                            width: 196px;
                            background: #FFFFFF;
                            border-radius: 14px;
                            position: relative;

                            .rank-title {
                                height: 33px;
                                width: 100%;
                                background-color: #fd4e4f;
                                text-align: center;
                                border-top-left-radius: 14px;
                                border-top-right-radius: 14px;

                                &>span {
                                    color: #FFFFFF;
                                    font-size: 14px;
                                    font-weight: bold;
                                    font-family: "黑体";
                                    line-height: 32px;
                                    letter-spacing: 1px;
                                }
                            }

                            .rank-title-people {
                                .rank-title;
                                background-color: #ff8534;
                            }

                            .rank-list {
                                padding: 4px 12px;
                                position: relative;
                                height: 158px;
                                overflow-y: auto;

                                &::-webkit-scrollbar {
                                    display: none;
                                }

                                &>p {
                                    margin-bottom: 0;
                                    line-height: 29px;
                                    border-bottom: 1px solid #ebebeb;
                                    color: #9f9f9f;
                                    font-family: "黑体";
                                    font-size: 14px;

                                    &>span:first-child {
                                        padding-left: 19px;
                                        padding-right: 23px;
                                    }

                                    &>span:not(.people-rank):first-child {
                                        padding-left: 19px;
                                        padding-right: 40px;
                                    }

                                    &>span:last-child {
                                        padding-left: 23px;
                                    }

                                    &>span:not(.people-rank):last-child {
                                        padding-left: 40px;
                                    }

                                    .star0,
                                    .star1,
                                    .star2 {
                                        color: #FFFFFF;
                                        font-weight: bold;
                                        position: relative;
                                        z-index: 1;
                                    }


                                }

                                &>p:last-child {
                                    border-bottom: 0;
                                }

                                .rank-list-star1 {
                                    position: absolute;
                                    top: 7px;
                                    left: 24px;
                                    z-index: 0;
                                    height: 20px;
                                }

                                .rank-list-star2 {
                                    .rank-list-star1;
                                    top: 37px;
                                }

                                .rank-list-star3 {
                                    .rank-list-star1;
                                    top: 67px;
                                }

                            }
                        }

                        .right-learn-rank-content:last-child {
                            margin-top: 16px;
                        }
                    }
                }

                .right-card {
                    width: 100%;

                    .right-card-title {
                        text-align: center;
                        margin: 36px 0 5px;

                        &>span {
                            font-weight: bold;
                            font-family: '黑体';
                            font-size: 24px;
                            line-height: 24px;
                            color: #fd4e4f;
                            letter-spacing: 1px;
                        }
                    }

                    .right-card-title-line {
                        width: 100%;
                        height: 6px;
                        background: linear-gradient(to right, #fe837e, #fcc767) no-repeat center;
                    }

                    .right-card-title-click {
                        cursor: pointer;
                    }

                    .right-card-title-click:hover {
                        &>span {
                            background-image: linear-gradient(to right, #fe837e, #fcc767);
                            -webkit-background-clip: text;
                            background-clip: text;
                            color: transparent;
                            transition: all .3s
                        }
                    }

                    .right-card-content {
                        height: 80px;
                        width: 100%;
                        border: 1px solid #e8e8e8;
                        border-radius: 8px;
                        display: flex;
                        justify-content: flex-start;
                        margin-top: 15px;
                        box-shadow: 0 0 8px -2px #d1d1d1;

                        .right-card-content-img {
                            padding: 17px 18px;

                            &>img {
                                height: 46px;
                                width: 46px;
                            }
                        }

                        .right-card-content-right {
                            padding: 17px 0;

                            .right-card-content-title {
                                display: block;
                                color: #848484;
                                font-size: 14px;
                                line-height: 14px;
                                letter-spacing: 0.5px;
                            }

                            .right-card-content-content {
                                font-weight: bold;
                                margin-top: 6px;

                                .right-card-content-number {
                                    font-size: 28px;
                                    font-family: 'Consolas';
                                    line-height: 28px;
                                }

                                .number-green {
                                    color: #26beb9;
                                }

                                .number-blue {
                                    color: #76a3ff;
                                }

                                .right-card-content-unit {
                                    font-size: 18px;
                                    margin-left: 2px;
                                    vertical-align: bottom;
                                    color: #848484;
                                }
                            }

                        }
                    }

                    .right-card-content-pointer {
                        cursor: pointer;
                    }
                }
            }
        }

        .bottom-global {
            margin: 0 0 84px 0;
        }
    }
}

.h-topic-home-modal .ant-modal-content {
    border-radius: 8px;
}

.h-topic-home-modal .ant-modal-content .ant-modal-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #e32f2f;
    padding: 0;
    height: 45px;

    .bottom-modal-header {
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 0 20px;

        .bottom-modal-headertext {
            font-size: 21px;
            font-family: '黑体';
            color: #fff;
            width: 100%;
            margin-left: 8px;
        }
    }
}

.h-topic-home-modal .ant-modal-content .ant-modal-body {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #eeeeee;
    padding: 16px;
}

.h-topic-home-modal .ant-modal-content .ant-modal-body .bottom-modal-body {
    .ant-form-item {
        margin-bottom: 16px;
    }

    .ant-form-item textarea {
        resize: none;
    }

    .ant-form-item-label>label {
        font-size: 17px;
        font-family: '黑体';
        color: #939393;
    }

    .radio-content {
        font-size: 17px;
        font-family: '黑体';
        color: #939393;
    }

    .radio-content:last-child {
        margin-right: 0;
    }

    .radio-right59 {
        margin-right: 59px;
    }

    .radio-right41 {
        margin-right: 41.5px;
    }

    .ant-input {
        color: #333333;
    }

    .bottom-modal-submit {
        text-align: center;

        .submit-button {
            background: #e32f2f;
            border-color: #e32f2f;
        }
    }
}