#appIndex {
    width: 1200px;
    margin: 0 auto;

    a {
        text-decoration: none;
    }

    .header-content-box {
        justify-content: space-between;
        margin-bottom: 28px;

        .header-content-left {
            .adv-list {
                margin-bottom: 18px;

                .adv-item {
                    &:not(:last-child) {
                        margin-right: 12px;
                    }
                    .adv-img {
                        width: 468px;
                        height: 60px;
                        border-radius: 10px;
                        display: block;
                    }
                }
            }

            .topic-and-selectives {
                .head-top {
                    width: 64px;
                    height: 24px;
                    border-radius: 20px 20px 20px 0;
                    margin-bottom: 10px;
                    .icon {
                        width: 15px;
                        height: 12px;
                        margin-right: 3px;
                    }

                    .text {
                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }

                .topic-box {
                    width: 308px;
                    height: 320px;
                    background-color: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(233, 238, 242, 1);
                    border-radius: 10px;
                    padding: 10px;
                    margin-right: 12px;

                    .head-top {
                        background-color: rgba(244, 174, 56, 1);
                    }

                    .topic-head {
                        height: 109px;
                        background-color: rgba(246, 246, 246, 1);
                        border-radius: 8px;
                        flex-direction: column;
                        justify-content: space-between;
                        padding: 12px 16px;
                        margin-bottom: 12px;

                        .title {
                            font-size: 16px;
                            color: #000000;
                            line-height: 23px;
                        }

                        .hint {
                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                            font-weight: 400;
                            font-style: normal;
                            font-size: 16px;
                            color: #7f7f7f;
                        }

                        .people {
                            position: relative;
                            justify-content: space-between;
                            &::after {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                transform: translateY(-100%);
                                width: 30px;
                                height: 4px;
                                background-color: rgba(244, 174, 56, 1);
                                border-radius: 150px;
                            }

                            .left {
                                color: #aaaaaa;
                                font-size: 13px;

                                .number {
                                    color: #333333;

                                    margin-right: 3px;
                                }
                            }

                            .right {
                                .item {
                                    width: 26px;
                                    height: 26px;
                                    border-radius: 50%;
                                    .img {
                                        width: 26px;
                                        height: 26px;
                                        border-radius: 50%;
                                    }

                                    &:nth-child(6) {
                                        margin-right: -9px;
                                    }

                                    &:nth-child(5) {
                                        margin-right: -9px;
                                    }

                                    &:nth-child(4) {
                                        margin-right: -7px;
                                    }
                                }
                            }
                        }
                    }

                    .topic-list {
                        .item {
                            cursor: pointer;
                            &:not(:last-child) {
                                margin-bottom: 1px;
                            }

                            .img {
                                width: 12px;
                                height: 10px;
                                margin-right: 9px;
                            }

                            .text {
                                font-size: 14px;
                                color: #555555;
                                line-height: 28px;

                                &:hover {
                                    color: #000000;
                                }
                            }
                        }
                    }
                }

                .selectives-box {
                    width: 628px;
                    height: 320px;
                    background-color: #ffffff;
                    border: 1px solid #e9eef2;
                    border-radius: 10px;
                    padding: 10px;

                    .head-top {
                        background-color: rgba(246, 130, 81, 1);
                        margin-bottom: 22px;
                    }

                    .list {
                        flex-wrap: wrap;
                        padding: 0 5px;
                        justify-content: space-between;

                        .item {
                            font-size: 14px;
                            color: #555555;
                            line-height: 20px;
                            margin-bottom: 12px;
                            position: relative;
                            cursor: pointer;

                            &:hover {
                                color: #000000;
                            }

                            .dot {
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                background-color: #f68251;
                                margin-right: 10px;
                            }

                            .text {
                                width: 265px;
                            }
                        }
                    }
                }
            }

            .header-left-bottom-box {
                width: 948px;
                height: 140px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(233, 238, 242, 1);
                border-radius: 10px;
                padding-left: 12px;
                margin-top: 12px;
                .adv {
                    margin-right: 26px;
                    .adv-icon {
                        width: 295px;
                        height: 118px;
                        border-radius: 5px;
                        cursor: pointer;
                    }
                }

                .list {
                    font-size: 14px;
                    color: #555555;
                    padding-top: 12px;
                    width: 281px;
                    margin-right: 39px;

                    &.list2 {
                        margin-right: 0;

                        .item .text {
                            width: 255px;
                        }
                    }

                    .item {
                        height: 20px;

                        &:not(:last-of-type) {
                            margin-bottom: 12px;
                        }

                        .icon {
                            width: 6px;
                            height: 6px;
                            margin-right: 10px;
                            background: #30b0d5;
                            border-radius: 50%;
                        }

                        .text {
                            cursor: pointer;
                            width: 266px;
                            text-decoration: none;
                            color: #555;

                            &:hover {
                                color: #000000;
                            }
                        }
                    }
                }
            }
        }

        .header-content-right {
            width: 240px;
            .post-entrance {
                background-color: #fff;
                border: 1px solid #e9eef2;
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 10px;

                .entrance-top {
                    height: 46px;
                    background-color: rgba(213, 243, 247, 1);
                    border-radius: 8px;
                    font-size: 14px;
                    text-align: center;
                    color: #333;
                    cursor: pointer;
                    padding-left: 52px;
                    margin-bottom: 8px;

                    &:hover {
                        background-color: rgba(194, 239, 246, 1);
                    }

                    .icon {
                        width: 20px;
                        height: 20px;
                        margin-right: 13px;
                    }
                }

                .entrance-bottom {
                    height: 90px;
                    flex-wrap: wrap;
                    background-color: #f6f6f6;
                    border-radius: 8px;
                    overflow: hidden;

                    .item {
                        width: 50%;
                        height: 50%;
                        cursor: pointer;
                        font-size: 14px;
                        color: #333;
                        text-decoration: none;

                        &:nth-child(odd) {
                            border-right: 1px solid #ebebeb;
                        }

                        &:not(:nth-last-child(-n + 2)) {
                            border-bottom: 1px solid #ebebeb;
                        }

                        &:hover {
                            background-color: #e7e7e7;
                        }

                        .icon {
                            width: 16px;
                            height: 16px;
                            margin-right: 6px;
                        }
                    }
                }
            }

            .adv-broadside {
                width: 240px;
                height: 140px;
                margin-bottom: 10px;
                display: block;
                .adv-broadside-img {
                    width: 240px;
                    height: 140px;
                    border-radius: 10px;
                    display: block;
                }
            }

            .group-box {
                width: 240px;
                height: 150px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(233, 238, 242, 1);
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 10px;

                .group {
                    flex-wrap: wrap;
                    height: 100%;

                    .group-item {
                        width: 50%;
                        height: 50%;
                        cursor: pointer;
                        font-size: 14px;
                        color: #333;
                        text-decoration: none;
                        flex-direction: column;
                        background-color: rgba(246, 246, 246, 1);

                        &:nth-child(1) {
                            border-top-left-radius: 8px;
                        }
                        &:nth-child(2) {
                            border-top-right-radius: 8px;
                        }
                        &:nth-child(3) {
                            border-bottom-left-radius: 8px;
                        }
                        &:nth-child(4) {
                            border-bottom-right-radius: 8px;
                        }

                        // overflow: hidden;

                        &:nth-child(odd) {
                            border-right: 1px solid #ebebeb;
                        }

                        &:not(:nth-last-child(-n + 2)) {
                            border-bottom: 1px solid #ebebeb;
                        }

                        &:hover {
                            background-color: #e7e7e7;
                        }

                        .icon {
                            width: 16px;
                            height: 16px;
                            margin-right: 6px;
                        }

                        font-size: 14px;
                        text-align: center;
                        line-height: 22px;

                        position: relative;
                        .title {
                            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                            font-weight: 650;
                            color: #000000;
                        }

                        .subtitle {
                            color: #555555;
                        }

                        &:hover .QRcode-box {
                            display: flex;
                        }

                        .QRcode-box {
                            z-index: 1;
                            display: none;
                            position: absolute;
                            top: 64px;
                            width: 140px;
                            height: 166px;
                            background-color: rgba(255, 255, 255, 1);
                            border-radius: 6px;
                            padding: 20px;
                            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
                            flex-direction: column;
                            .QRcode {
                                width: 100px;
                                height: 100px;
                                margin-bottom: 4px;
                            }

                            .text {
                                color: #555555;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }

            .offer-box {
                width: 240px;
                height: 214px;
                background-color: #fff;
                border: 1px solid #e9eef2;
                border-radius: 10px;
                padding: 17px 10px;
                overflow: hidden;

                &.small {
                    height: 64px;
                    padding: 15px 10px;
                }

                .item {
                    align-items: flex-start;
                    cursor: pointer;
                    margin-bottom: 19px;

                    .avatar {
                        width: 24px;
                        height: 24px;
                        margin-right: 8px;
                        border-radius: 50%;
                        background-size: contain;
                    }

                    .condition {
                        font-size: 12px;
                        color: #aaaaaa;
                        width: 180px;
                    }

                    .titletitle {
                        font-family: "ArialMT", "Arial", sans-serif;
                        font-weight: 400;
                        font-size: 13px;
                        color: #333333;
                        width: 180px;
                    }

                    &:hover .titletitle {
                        color: #000000;
                    }
                }
            }
        }
    }

    .matter {
        .matter-content {
            margin-right: 12px;
            .forum-sections-list {
                position: relative;
                width: 897px;
                height: 240px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(233, 238, 242, 1);
                border-radius: 10px;
                padding-left: 70px;
                padding-top: 20px;
                margin-bottom: 20px;

                .img {
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    width: 60px;
                    height: 240px;
                }

                .title {
                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 16px;
                    color: #000000;
                    margin-bottom: 16px;
                }

                .list {
                    .line {
                        &:not(:last-child) {
                            margin-bottom: 10px;
                        }
                        .item {
                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                            font-weight: 400;
                            font-style: normal;
                            font-size: 14px;
                            color: #333;
                            padding: 0 18px;
                            height: 32px;
                            background-color: rgba(246, 246, 246, 1);
                            border: 1px solid rgba(242, 242, 242, 1);
                            border-radius: 16px;
                            cursor: pointer;

                            &:not(:last-child) {
                                margin-right: 10px;
                            }
                        }
                    }
                }
            }
            .item-box {
                margin-bottom: 12px;
            }
        }

        .sidebar {
            .adv {
                display: block;
                width: 291px;
                height: 220px;
                margin-bottom: 12px;
                cursor: pointer;
                .adv-icon {
                    width: 291px;
                    height: 220px;
                    border-radius: 10px;
                }
            }

            .side-box {
                width: 291px;
                padding: 17px 10px 10px;
                margin-bottom: 12px;
                width: 291px;
                border-radius: 10px;

                &.offer-side-box {
                    background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
                }

                &.vote-side-box {
                    background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
                }

                &.interviewexperience-side-box {
                    background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
                }
            }
        }
    }
}