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

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

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

        .top-picture {
            height: 132px;
            width: 100%;
        }

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

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

                .left-carousel {
                    margin-bottom: -8px;

                    .carousel-content {
                        height: 584px;
                        color: #fff;
                        line-height: 584px;
                        text-align: center;
                        background: #364d79;
                    }
                }

                .left-activity {
                    height: 103px;
                    background-image: url("~@/assets/topic/topic_activity_gradient.jpg")
                }

                .left-card {
                    margin: 20px 0px 20px 12px;

                    .left-card-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left-card-title {
                            font-weight: bold;
                            font-family: '黑体';
                            font-size: 28px;
                        }

                        .left-card-flag {
                            vertical-align: text-bottom;
                            position: relative;
                            top: 3px;
                            margin-left: 10px;
                        }

                        .left-card-other {
                            font-family: '黑体';
                            font-size: 18px;
                            color: #a2a2a2;
                        }

                        .left-card-otherimg {
                            vertical-align: text-bottom;
                            margin-left: 5px;
                        }
                    }

                    .left-card-divider {
                        color: #c9c9c9;
                        margin: 8px 0px 30px;
                    }

                    .left-graceful {
                        background: #fff;
                        padding: 24px 24px 50px;

                        .left-graceful-bg {
                            height: 198px;
                            width: 338px;
                            background-size: 100%;
                            background-repeat: no-repeat;
                            display: flex;
                            justify-content: center;
                            align-items: flex-end;
                            padding-bottom: 10px;

                            .left-graceful-textbg {
                                height: 36px;
                                width: 304px;
                                background-image: url("~@/assets/topic/topic_graceful_textbg.png");
                                display: flex;
                                justify-content: center;
                                align-items: center;

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

                    .left-project {
                        margin-top: 20px;
                        background: #fff;
                        padding: 24px 24px 40px;

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

                            .left-project-content-list {
                                margin-left: 70px;

                                .left-project-content-item {
                                    font-size: 21px;
                                    font-family: '黑体';
                                    line-height: 36px;

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

                                    .left-project-content-item-time {
                                        color: #a2a2a2;
                                        margin-left: 8px;
                                    }
                                }
                            }

                        }

                        .left-project-content .ant-list-sm .ant-list-item {
                            padding: 0px 16px;
                        }
                    }
                }


            }

            .right-global {
                background: #fff;
                width: 100%;
                margin: 0px 12px 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 14px;

                .right-material {
                    width: 100%;
                }

                .right-display {
                    width: 100%;
                    padding: 18px 16px;

                    .right-display-title {
                        font-size: 14px;
                        color: #474747;
                        letter-spacing: 1px;
                        text-align: center;
                    }

                    .right-display-content {
                        display: flex;
                        justify-content: start;
                        margin-top: 30px;

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

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

                            .right-display-content-title {
                                color: #9e9e9e;
                                font-size: 12px;
                                letter-spacing: 1px;

                                .right-display-content-percentage {
                                    margin-left: 24px;

                                    .right-display-content-percentage-increase {
                                        color: #28e099;
                                    }

                                    .right-display-content-percentage-reduce {
                                        color: #eb5527;
                                    }
                                }
                            }

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

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

                                .number-blue {
                                    color: #21b8ce;
                                }

                                .number-orange {
                                    color: #eb5527;
                                }

                                .right-display-content-unit {
                                    font-size: 12px;
                                    margin-left: 5px;
                                }
                            }

                        }
                    }

                }

                .right-divider {
                    margin: 12px 0px 0px;
                    color: #c9c9c9;
                }

                .right-graph {
                    padding-top: 26px;

                    .right-graph-title {
                        font-size: 17px;
                        text-align: center;
                    }

                    .right-graph-subtitle {
                        color: #9e9e9e;
                        font-size: 12px;
                        text-align: center;
                        margin-top: 4px;
                    }

                    .right-graph-content {
                        height: 250px;
                        width: 250px;
                    }
                }
            }


        }

        .bottom-global {
            margin: 0px 12px 84px;
            background: #fff;
            padding: 24px 24px 28px;

            .left-card-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-card-title {
                    font-weight: bold;
                    font-family: '黑体';
                    font-size: 28px;
                }

                .left-card-flag {
                    vertical-align: text-bottom;
                    position: relative;
                    top: 3px;
                    margin-left: 10px;
                }

                .left-card-other {
                    font-family: '黑体';
                    font-size: 18px;
                    color: #a2a2a2;
                }

                .left-card-otherimg {
                    vertical-align: text-bottom;
                    margin-left: 5px;
                }
            }

            .left-card-divider {
                color: #c9c9c9;
                margin: 8px 0px 24px;
            }

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

                .bottom-card {
                    background-image: url("~@/assets/topic/topic_bottom_card_picture.png");
                    height: 157px;
                    width: 331px;
                    padding: 16px;
                    margin-top: 18px;

                    .bottom-card-flex {
                        display: flex;
                        justify-content: space-between;

                        .bottom-card-title {
                            font-size: 21px;
                            font-weight: bold;

                            .bottom-card-title-type {
                                color: #df3b37;
                            }
                        }
                    }

                    .bottom-card-content {
                        font-size: 16px;
                        color: #6f6f6f;
                        margin-top: 20px;
                    }
                }
            }

            .bottom-title {
                font-weight: bold;
                font-size: 24px;
                font-family: '黑体';
                color: #b8b8b8;
            }

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

                .bottom-other-text {
                    font-family: '黑体';
                    font-size: 18px;
                    color: #a2a2a2;
                }

                .bottom-other-icon {
                    transform: rotate(90deg);
                    vertical-align: text-bottom;
                    margin-left: 5px;
                }
            }
        }
    }


}