#appIndex { max-width: 1200px; margin: 0 auto; } #appIndex a { text-decoration: none; } #appIndex .header-content-box { justify-content: space-between; margin-bottom: 28px; } #appIndex .header-content-box .header-content-left { width: calc(100% - 252px); } #appIndex .header-content-box .header-content-left .adv-list { margin-bottom: 18px; } #appIndex .header-content-box .header-content-left .adv-list .adv-item { width: calc((100% - 12px) / 2); height: 60px; display: flex; align-items: center; } #appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) { margin-right: 12px; } #appIndex .header-content-box .header-content-left .adv-list .adv-item a { display: block; } #appIndex .header-content-box .header-content-left .adv-list .adv-item img { width: 100%; height: auto; border-radius: 10px; display: block; object-fit: cover; } #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top { width: 64px; height: 24px; border-radius: 20px 20px 20px 0; margin-top: 0; margin-bottom: 10px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .icon { width: 15px; height: 12px; margin-right: 3px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #ffffff; font-size: 14px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box { width: calc((100% - 12px) * 0.325); height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 10px; margin-right: 12px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .head-top { background-color: #f4ae38; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head { height: 109px; background-color: #f6f6f6; border-radius: 8px; flex-direction: column; justify-content: space-between; padding: 12px 16px; margin-bottom: 12px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .title { font-size: 16px; color: #000000; line-height: 23px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .hint { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #7f7f7f; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people { position: relative; justify-content: space-between; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people::after { content: ""; position: absolute; top: 0; left: 0; transform: translateY(-100%); width: 30px; height: 4px; background-color: #f4ae38; border-radius: 150px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left { color: #aaaaaa; font-size: 13px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left .number { color: #333333; margin-right: 3px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item { width: 26px; height: 26px; border-radius: 50%; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item .img { width: 26px; height: 26px; border-radius: 50%; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) { margin-right: -9px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(3) { margin-right: -9px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(2) { margin-right: -7px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(2) { margin-right: -5px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item { cursor: pointer; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item:not(:last-child) { margin-bottom: 1px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .img { width: 12px; height: 10px; margin-right: 9px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text { font-size: 14px; color: #555555; line-height: 28px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text:hover { color: #000000; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box { width: calc((100% - 12px) * 0.675); height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 10px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .head-top { background-color: #f68251; margin-bottom: 22px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list { flex-wrap: wrap; padding: 0 5px; justify-content: space-between; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item { width: 48%; font-size: 14px; color: #555555; line-height: 20px; margin-bottom: 12px; position: relative; cursor: pointer; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item:hover { color: #000000; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .dot { width: 6px; height: 6px; border-radius: 50%; background-color: #f68251; margin-right: 10px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text { width: auto; flex: 1; } #appIndex .header-content-box .header-content-left .header-left-bottom-box { width: 100%; height: auto; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 12px; margin-top: 12px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv { margin-right: 26px; width: 31%; flex-shrink: 0; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon { width: 100%; height: auto; border-radius: 5px; cursor: pointer; object-fit: cover; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list { font-size: 14px; color: #555555; flex: 1; margin-right: 39px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 { margin-right: 0; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 .item .text { width: auto; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item { height: 20px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) { margin-bottom: 12px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .icon { width: 6px; height: 6px; margin-right: 10px; background: #30b0d5; border-radius: 50%; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text { cursor: pointer; width: auto; text-decoration: none; color: #555; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text:hover { color: #000000; } #appIndex .header-content-box .header-content-right { width: 240px; } #appIndex .header-content-box .header-content-right .post-entrance { background-color: #fff; border: 1px solid #e9eef2; border-radius: 10px; padding: 10px; margin-bottom: 10px; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-top { height: 46px; background-color: #d5f3f7; border-radius: 8px; font-size: 14px; text-align: center; color: #333; cursor: pointer; padding-left: 52px; margin-bottom: 8px; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-top:hover { background-color: #c2eff6; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-top .icon { width: 20px; height: 20px; margin-right: 13px; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom { height: 90px; flex-wrap: wrap; background-color: #f6f6f6; border-radius: 8px; overflow: hidden; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item { width: 50%; height: 50%; cursor: pointer; font-size: 14px; color: #333; text-decoration: none; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:nth-child(odd) { border-right: 1px solid #ebebeb; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:not(:nth-last-child(-n + 2)) { border-bottom: 1px solid #ebebeb; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:hover { background-color: #e7e7e7; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon-box { position: relative; width: 16px; height: 16px; margin-right: 8px; } #appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon-box .icon { position: absolute; width: 38px; top: -8px; left: -6px; } #appIndex .header-content-box .header-content-right .adv { width: 240px; height: 140px; margin-bottom: 10px; display: block; } #appIndex .header-content-box .header-content-right .adv a { display: block; } #appIndex .header-content-box .header-content-right .adv img { width: 240px; height: 140px; border-radius: 10px; display: block; } #appIndex .header-content-box .header-content-right .group-box { width: 240px; height: 150px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding: 10px; margin-bottom: 10px; } #appIndex .header-content-box .header-content-right .group-box .group { flex-wrap: wrap; height: 100%; } #appIndex .header-content-box .header-content-right .group-box .group .group-item { width: 50%; height: 50%; cursor: pointer; color: #333; text-decoration: none; flex-direction: column; background-color: #f6f6f6; font-size: 14px; text-align: center; line-height: 22px; position: relative; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(1) { border-top-left-radius: 8px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(2) { border-top-right-radius: 8px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(3) { border-bottom-left-radius: 8px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(4) { border-bottom-right-radius: 8px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) { border-right: 1px solid #ebebeb; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:not(:nth-last-child(-n + 2)) { border-bottom: 1px solid #ebebeb; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:hover { background-color: #e7e7e7; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .icon { width: 16px; height: 16px; margin-right: 6px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle { color: #555555; } #appIndex .header-content-box .header-content-right .group-box .group .group-item:hover .QRcode-box { display: flex; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box { z-index: 1; display: none; position: absolute; top: 64px; width: 140px; height: 166px; background-color: #ffffff; border-radius: 6px; padding: 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745); flex-direction: column; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .QRcode { width: 100px; height: 100px; margin-bottom: 4px; } #appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .text { color: #555555; font-size: 14px; } #appIndex .header-content-box .header-content-right .offer-box { width: 240px; background-color: #fff; border: 1px solid #e9eef2; border-radius: 10px; overflow: hidden; height: 64px; padding: 15px 10px; } #appIndex .header-content-box .header-content-right .offer-box.big { height: 214px; padding: 17px 10px; } #appIndex .header-content-box .header-content-right .offer-box.small { height: 64px; padding: 15px 10px; } #appIndex .header-content-box .header-content-right .offer-box .item { align-items: flex-start; cursor: pointer; margin-bottom: 19px; } #appIndex .header-content-box .header-content-right .offer-box .item .avatar { width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background-size: contain; } #appIndex .header-content-box .header-content-right .offer-box .item .condition { font-size: 12px; color: #aaaaaa; width: 180px; } #appIndex .header-content-box .header-content-right .offer-box .item .titletitle { font-family: "ArialMT", "Arial", sans-serif; font-weight: 400; font-size: 13px; color: #333333; width: 180px; } #appIndex .header-content-box .header-content-right .offer-box .item:hover .titletitle { color: #000000; } #appIndex .admission { margin-bottom: 30px; } #appIndex .admission .admission-header { margin-bottom: 24px; display: inline-flex; } #appIndex .admission .admission-header .admission-header-icon { width: 91px; height: 28px; margin-right: 16px; } #appIndex .admission .admission-header .admission-header-name { font-family: "Roboto-Light", "Roboto Light", "Roboto", sans-serif; font-weight: 200; font-size: 16px; line-height: 16px; color: #555555; align-items: flex-end; } #appIndex .admission .admission-list { flex-wrap: wrap; } #appIndex .admission .admission-list .admission-item { width: calc((100% - 36px) / 4); aspect-ratio: 291 / 103; border-radius: 9px; cursor: pointer; overflow: hidden; } #appIndex .admission .admission-list .admission-item .admission-img { display: block; width: 100%; height: 100%; } #appIndex .admission .admission-list .admission-item img { width: 100%; height: 100%; object-fit: cover; } #appIndex .admission .admission-list .admission-item:not(:nth-child(4n)) { margin-right: 12px; } #appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) { margin-bottom: 14px; } #appIndex .matter { align-items: flex-start; } #appIndex .matter .matter-content { margin-right: 12px; position: sticky; z-index: 1; } #appIndex .matter .matter-content .forum-sections-list { position: relative; flex: 1; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding-left: 70px; padding-top: 20px; padding-bottom: 14px; margin-bottom: 20px; } #appIndex .matter .matter-content .forum-sections-list .img { position: absolute; top: -1px; left: -1px; width: 60px; height: 100%; } #appIndex .matter .matter-content .forum-sections-list .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; } #appIndex .matter .matter-content .forum-sections-list .list .line { flex-wrap: wrap; } #appIndex .matter .matter-content .forum-sections-list .list .line .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: #f6f6f6; border: 1px solid #f2f2f2; border-radius: 16px; cursor: pointer; margin-bottom: 10px; } #appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) { margin-right: 10px; } #appIndex .matter .matter-content .item-box { margin-bottom: 12px; } #appIndex .matter .sidebar { position: sticky; } #appIndex .matter .sidebar .ad-item { display: block; width: 291px; height: 220px; margin-bottom: 12px; cursor: pointer; } #appIndex .matter .sidebar .ad-item img { width: 291px; height: 220px; border-radius: 10px; } #appIndex .matter .sidebar .side-box { padding: 17px 10px 10px; margin-bottom: 12px; width: 291px; border-radius: 10px; } #appIndex .matter .sidebar .side-box.offer-side-box { background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); } #appIndex .matter .sidebar .side-box.vote-side-box { background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); } #appIndex .matter .sidebar .side-box.interviewexperience-side-box { background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); } @media screen and (max-width: 910px) { #appIndex .header-content-box .header-content-left { width: 100%; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list { margin-right: 15px; } #appIndex .header-content-box .header-content-right { display: none; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right { display: none; } } @media screen and (max-width: 768px) { .head-top .input-box { width: inherit; height: inherit; background: none; border: none; padding: 5px; } .head-top .input-box .placeholder { display: none; } .head-top .input-box .input { display: none; } .head-top .input-box .icon { margin-left: 0; } .head-top .post-list { display: none !important; } .head-top .sign-in { display: none !important; } #appIndex { width: 100%; padding: 0 10px; } #appIndex .admission .admission-list { flex-wrap: nowrap; overflow-x: auto; } #appIndex .admission .admission-list .admission-item { flex-shrink: 0; width: auto; height: 80px; margin-right: 12px; } #appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) { margin-bottom: 5px; } #appIndex .admission .admission-list .admission-item img { width: 100%; height: auto; } #appIndex .matter { flex-direction: column; } #appIndex .matter .matter-content { width: 100%; margin-right: 0; } #appIndex .matter .matter-content .forum-sections-list { width: 100%; height: auto; padding: 10px; } #appIndex .matter .matter-content .forum-sections-list .img { display: none; } #appIndex .matter .matter-content .forum-sections-list .list .line { flex-wrap: wrap; margin-bottom: 0 !important; height: auto; } #appIndex .matter .matter-content .forum-sections-list .list .line .item { margin-bottom: 10px; } #appIndex .matter .sidebar { display: none; } #appIndex .pop-list { display: block; } } @media screen and (max-width: 620px) { .head-top { width: 100% !important; padding: 0 10px; margin: 10px auto !important; flex-wrap: wrap; } .head-top .input-box { display: none !important; } .head-top .post-list { display: none !important; } .head-top .sign-in { display: none !important; } #appIndex { width: 100%; padding: 0 10px; } #appIndex .header-content-box { flex-direction: column; } #appIndex .header-content-box .header-content-left { width: 100%; } #appIndex .header-content-box .header-content-left .adv-list { display: none; } #appIndex .header-content-box .header-content-left .topic-and-selectives { flex-direction: column; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box { width: 100%; margin-right: 0; margin-bottom: 10px; height: auto; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box { width: 100%; height: auto; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item { width: 100%; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text { width: auto; } #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top { width: max-content !important; margin-left: 0 !important; } #appIndex .header-content-box .header-content-left .header-left-bottom-box { width: 100%; height: auto; flex-direction: column; padding: 10px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv { margin-right: 0; margin-bottom: 10px; width: 100%; height: auto; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon { width: 100%; height: auto; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list { width: 100%; margin-right: 0; margin-bottom: 0; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text { width: auto; } #appIndex .header-content-box .header-content-right { display: none; } } .pop-list { width: 100%; background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 20px; padding: 6px; margin: 0 auto 20px; display: none; } .pop-list .list { background-color: #f6f6f6; border-radius: 15px; width: 100%; display: flex; align-items: center; } .pop-list .list .item { display: flex; flex-direction: column; justify-content: center; height: 55px; } .pop-list .list .item:nth-of-type(1) { flex: 95; } .pop-list .list .item:nth-of-type(2) { flex: 114; } .pop-list .list .item:nth-of-type(3) { flex: 109; } .pop-list .list .item:nth-of-type(4) { flex: 140; } .pop-list .list .item:not(:last-of-type) { border-right: 1px dotted #d7d7d7; } .pop-list .list .item .top { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; font-size: 16px; line-height: 26px; text-align: center; } .pop-list .list .item .bottom { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #555555; font-size: 14px; text-align: center; }