/* 招聘页面 Banner 区域 */
.career-banner-section {
    position: absolute;
    left: 0;
    top: 164px;
    width: 100%;
    height: 1195px;
    background-color: #F9F9F9;
}

/* Banner 标题 */
.career-banner-title {
    position: absolute;
    left: 8.59%;
    /* 165px / 1920px */
    top: 140px;
    /* 185px - 164px (navbar height) */
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    width: 65vw;
    font-size: 96px;
    line-height: 1.3;
    color: #BEA66E;
    z-index: 3;
}

.career-banner-title p {
    margin: 0;
}

/* 金色矩形装饰 */
.career-banner-color {
    position: absolute;
    left: 75%;
    /* 1440px / 1920px */
    top: -0.35px;
    width: 25%;
    /* 480px / 1920px */
    height: 542.593px;
    background-color: #BEA66E;
    z-index: 1;
}

/* Banner 图片 */
.career-banner-image {
    position: absolute;
    right: 0;
    top: 475px;
    width: 91.41%;
    /* 1755px / 1920px */
    height: 720px;
    overflow: hidden;
    z-index: 1;
}

.career-banner-image img {
    width: 100%;
    height: 136.01%;
    /* 979.272px / 720px */
    object-fit: cover;
    object-position: 0% 8.14%;
    /* 对齐到顶部偏移 */
    position: relative;
    top: -8.14%;
}

/* ========================================
   招聘信息区域
   ======================================== */
.career-jobs-section {
    position: absolute;
    left: 0;
    top: 1195px;
    /* banner区域高度 */
    width: 100%;
    background-color: #0E2B59;
    padding: 268px 0 218px 0;
    /* 顶部218px (382px - 164px), 底部218px */
}

/* 标题 */
.career-jobs-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 96px 0;
    /* 底部间距 154px (536px - 382px) */
}

/* 职位列表容器 */
.career-jobs-list {
    width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* 职位项 */
.career-job-item {
    display: flex;
    flex-direction: column;
    gap: 32px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* hover 状态的背景 */
.career-job-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* 分隔线 */
.job-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* 职位头部 */
.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
}

/* 职位信息（编号+标题） */
.job-info {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* 职位编号 */
.job-number {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    color: #FFFFFF;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* hover 状态的编号 */
.career-job-item:hover .job-number {
    background-color: #BEA66E;
    border-color: #BEA66E;
}

/* 职位标题 */
.job-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    color: #BEA66E;
    margin: 0;
    white-space: nowrap;
}

/* 展开/收起按钮 */
.job-toggle {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    pointer-events: none;
}

.job-toggle img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* 默认状态：显示加号，隐藏箭头 */
.job-toggle .plus-icon {
    opacity: 1;
}

.job-toggle .arrow-icon {
    opacity: 0;
}

/* hover 状态：隐藏加号，显示箭头 */
.career-job-item:hover .job-toggle .plus-icon {
    opacity: 0;
}

.career-job-item:hover .job-toggle .arrow-icon {
    opacity: 1;
}

/* 职位详情 */
.job-details {
    padding: 0 112px 24px;
    display: none;
}

/* hover 状态显示详情 */
.career-job-item:hover .job-details {
    display: block;
}

.job-details ol {
    margin: 0;
    padding: 0;
    list-style: decimal;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #FFFFFF;
}

.job-details li {
    margin-left: 24px;
    padding-left: 0;
}

/* ========================================
   环境图片区域
   ======================================== */
.career-environment-section {
    position: absolute;
    left: 0;
    top: 2185px;
    /* 1195px (banner) + 872px (jobs section) */
    width: 100%;
    height: 902px;
    overflow: hidden;
    z-index: 1;
}

/* 背景图片 */
.environment-image {
    position: absolute;
    left: 0;
    top: -0.1%;
    width: 100%;
    height: 117.41%;
    /* 扩展图片高度以覆盖整个区域 */
    z-index: 1;
}

.environment-image img {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.environment-white-block {
    width: 45vw;
    position: absolute;
    right: 0;
    top: 0;
    height: 130px;
    z-index: 2;
    background-color: #fff;
}



/* 页脚定位 */
.career-footer {
    top: 2825px;
    /* 1195px (banner) + 872px (jobs section) + 902px (environment) */
}

@media (max-width: 1728px) {
    .career-banner-title {}
}

/* 响应式设计 */
@media (max-width: 1440px) {
    .career-banner-section {
        width: 100%;
    }


    .career-jobs-list {
        width: 90%;
        max-width: 1050px;
    }
}

@media (max-width: 1024px) {
    .career-banner-title {
        font-size: 56px;
        top: 120px;
    }

    .career-banner-color {
        left: 70%;
        width: 30%;
    }

    .career-banner-image {
        width: 95%;
        top: 400px;
    }



    .career-jobs-title {
        font-size: 36px;
        margin-bottom: 100px;
    }

    .career-jobs-list {
        width: 100%;
    }

    .job-details {
        padding: 0 60px 24px;
    }



}

@media (max-width: 768px) {
    .job-toggle .plus-icon {
        opacity: 0;
    }

    .job-toggle .arrow-icon {
        opacity: 1;
    }

    .environment-white-block {
        display: none;
    }

    .career-banner-section {
        position: relative;
        top: 76px;
        height: 390px;
    }

    .career-banner-title {
        font-size: 32px;
        top: 48px;
        left: 24px;
        width: 65%;
    }

    .career-banner-color {
        width: 80px;
        height: 190px;
        right: 0;
        top: 0px;
        left: initial;
    }



    .career-jobs-section {
        top: 45px;
        position: relative;
        padding: 80px 24px;
    }

    .career-jobs-title {
        font-size: 24px;
        margin-bottom: 48px;
    }

    .job-header {
        padding: 0 16px;
    }

    .job-info {
        gap: 16px;
    }

    .job-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .job-title {
        font-size: 18px;
    }

    .job-details {
        padding: 0 32px 16px;
    }

    .job-details ol {
        font-size: 14px;
        line-height: 24px;
    }

    .career-environment-section {
        position: relative;
        top: 43px;
        left: 0;
        width: 100%;
        height: 316px;
    }

    .environment-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .career-footer {
        top: auto;
        position: relative;
    }

    .career-banner-image {
        top: initial;
        bottom: 0;
        height: 200px;
        width: 366px;
    }

    .career-banner-image img {
        top: initial;
        height: 200px;
        width: 366px;
    }
}


@media (max-width:440px) {
    .career-banner-title {
        font-size: 28px;
    }

    .job-title {
        white-space: wrap;
        width: 55vw;
        font-size: 16px;
    }

    .job-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .job-info {
        gap: 12px;
    }
}