.page-header .page-header__wrapper {
    height: 100%;
    align-items: unset;
}

.page-header__nav .nav {
    height: 100%;
}

.page-header__nav .nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

.page-header:not(.scrolled) .page-header__nav .nav-item:hover {
    color: #fff;
}

.page-header__nav .nav-item .inner-text {
    position: relative;
    z-index: 1;
}

.page-header__nav .nav-item::after {
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: calc(14 * var(--rpx));
    background: #fff;
    transition: .5s linear;
}

.page-header__nav .nav-item:hover::after {
    width: 100%;
}

.page-header__fun {
    align-self: center;
}

.page-banner .page-banner__wrapper {
    --min-h: clamp(calc(480 * var(--rpx)), 33.5416vw, calc(644 * var(--rpx)));
    max-width: calc(1438 * var(--rpx));
    width: calc(100% - var(--space-16) * 2);
    min-height: var(--min-h);
    position: relative;
    margin: auto;
}

.page-banner .page-banner__section .desc {
    margin: calc(14 * var(--rpx)) auto 0;
}

.page-banner .page-banner__wrapper .logo {
    --l: clamp(calc(100 * var(--rpx)), 10.416vw, calc(200 * var(--rpx)));
    --bg: var(--primary-foreground);
    width: var(--l);
    height: var(--l);
    position: absolute;
}

.page-banner .page-banner__wrapper .logo::after {
    content: '';
    width: calc(var(--l) / 2);
    height: calc(var(--l) / 2);
    background: var(--bg);
    position: absolute;
    z-index: -1;
}

.page-banner .page-banner__wrapper .logo:nth-child(2) {
    --l: clamp(calc(80 * var(--rpx)), 9.375vw, calc(180 * var(--rpx)));
    left: calc(var(--l) / 6 * 5);
    top: calc(10 * var(--rpx));
}

.page-banner .page-banner__wrapper .logo:nth-child(2)::after {
    --bg: #FFBC56;
    left: 0;
    bottom: 0;
}

.page-banner .page-banner__wrapper .logo:nth-child(3) {
    right: 0;
    top: 0;
}

.page-banner .page-banner__wrapper .logo:nth-child(3)::after {
    --bg: #45BEBE;
    right: 0;
    bottom: 0;
}

.page-banner .page-banner__wrapper .logo:nth-child(4) {
    left: 0;
    bottom: 0;
}

.page-banner .page-banner__wrapper .logo:nth-child(4)::after {
    --bg: #A255E9;
    top: 0;
    right: 0;
}

.page-banner .page-banner__wrapper .logo:nth-child(5) {
    --l: clamp(calc(50 * var(--rpx)), 7.8125vw, calc(150 * var(--rpx)));
    bottom: calc(var(--l) / 30 * 19);
    right: calc(var(--l) / 15 * 17);
}

.page-banner .page-banner__wrapper .logo:nth-child(5)::after {
    top: 0;
    right: 0;
}

.layer-job {
    background: #F7F7F7;
}

.layer-job .layer-header .tag-box {
    margin-top: calc(20 * var(--rpx));
}

.layer-job .layer-main {
    padding-top: calc(44 * var(--rpx));
}

.job-box {
    min-height: calc(140 * var(--rpx));
    background: #fff;
    padding: calc(30 * var(--rpx)) clamp(calc(30 * var(--rpx)), 3.125vw, calc(50 * var(--rpx)));
    transition: .3s linear;
}

.job-box+.job-box {
    margin-top: calc(10 * var(--rpx));
}

.job-box .tag-box {
    margin-top: calc(20 * var(--rpx));
}

.job-box .job-name {
    font-size: var(--font-size-20);
    font-weight: 300;
}

.job-box .tag-box .tag-item {
    color: var(--primary);
    background: rgba(247, 247, 247, 1);
}

.job-box .icon {
    --l: calc(50 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    background: #F7F7F7;
}

.job-box:hover {
    background: var(--primary-foreground);
}

.job-box:hover .job-name {
    color: #fff;
}

.job-box:hover .tag-box .tag-item {
    color: #fff;
    background: rgba(247, 247, 247, .3);
}

.job-box:hover .icon {
    background: #fff;
}

.layer-job .layer-main .btn {
    margin: calc(40 * var(--rpx)) auto 0;
}

.layer-talent-program .layer-header {
    margin-right: auto;
}

.layer-talent-program .layer-header__section .title {
    line-height: 1;
}

.layer-talent-program .layer-main {
    max-width: calc(978 * var(--rpx));
    width: 100%;
    position: relative;
    z-index: 1;
}

.layer-talent-program .layer-main .section-wrapper p {
    font-size: calc(18 * var(--rpx));
    font-weight: 300;
}

.layer-talent-program .layer-main .section-wrapper p+p,
.layer-talent-program .layer-main .section-wrapper p+img {
    --m-t: clamp(calc(20 * var(--rpx)), 2.083vw, calc(40 * var(--rpx)));
    margin-top: var(--m-t);
}

.layer-talent-program .layer-main .section-wrapper img {
    width: 100% !important;
    height: auto !important;
}

.layer-talent-program .layer-bg {
    width: calc(1343 / 1920 * 100vw);
    margin-top: calc(-80 * var(--rpx));
    position: relative;
    inset: unset;
}

.layer-talent-program .layer-bg img {
    width: unset;
    height: unset;
    object-fit: unset;
}

/* drawer */
.drawer-box {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
}

.drawer-box .drawer-box__content {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transform: translateX(100%);
    transition: transform .3s linear;
}

.drawer-box .close-btn {
    --l: clamp(calc(50 * var(--rpx)), 4.166666vw, calc(80 * var(--rpx)));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    background: rgba(247, 247, 247, 1);
    margin-right: clamp(12px, 2.0833333vw, calc(40 * var(--rpx)));
    align-self: center;
    cursor: pointer;
}

.drawer-box .close-btn img {
    width: 50%;
}

.drawer-box .drawer-box__wrapper {
    max-width: calc(100vw - 12px);
    width: calc(960 * var(--rpx));
    height: 100%;
}

.drawer-box .drawer-box__main {
    flex: 1 1 0;
    background: #fff;
    overflow: auto;
}

.drawer-box::after {
    content: '';
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity .3s linear;
}

.drawer-box.visible {
    z-index: 999;
    visibility: visible;
}

.drawer-box .drawer-box__content.visible {
    transform: translateX(0);
}

.drawer-box.visible::after {
    opacity: 1;
}

.drawer-box .drawer-box__wrapper {
    max-width: calc(100vw - 12px);
    width: calc(1080 * var(--rpx));
    height: 100%;
}

.job-info__box .job-info__box-content {
    --padding-x: clamp(calc(20 * var(--rpx)), 4.166666vw, calc(80 * var(--rpx)));
    background: #fff;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.job-info__box-content .section-visual__header {
    padding: calc(40 * var(--rpx)) var(--padding-x);
    background: url(../images/bg-4.jpg) no-repeat center / cover;
}

.job-info__box-content .section-visual__title {
    color: #fff;
    font-size: var(--font-size-48);
    line-height: 1.2;
}

.job-info__box-content .section-visual__main {
    background: #f7f7f7;
    padding: calc(25 * var(--rpx)) var(--padding-x);
}

.job-info__box-content .info-item {
    font-size: var(--font-size-14);
}

.job-info__box-content .info-item+.info-item {
    margin-top: calc(12 * var(--rpx));
}

.job-info__box-content .info-item__label {
    width: calc(200 * var(--rpx));
    color: rgba(37, 37, 37, .5);
    padding-right: calc(30 * var(--rpx));
}

.job-info__box-content .particular-box {
    flex: 1 0 0;
    padding: calc(40 * var(--rpx)) var(--padding-x);
    overflow: auto;
}

.job-info__box-content .particular-box__item {
    padding: calc(34 * var(--rpx)) 0;
    border-bottom: 1px solid #e8e8e8;
}

.job-info__box-content .particular-box__title {
    font-size: var(--font-size-24);
    color: var(--primary);
    padding-bottom: calc(24 * var(--rpx));
}

.job-info__box-content .particular-box__desc {
    font-size: var(--font-size-18);
}

.job-info__box-content .particular-box__desc p {
    display: flex;
}

.job-info__box-content .particular-box__desc p::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #252525;
    margin-top: .8rem;
    margin-right: calc(16 * var(--rpx));
    flex: 0 0 auto;
}

.job-info__box-content .application-box {
    width: 100%;
    padding: calc(20 * var(--rpx)) var(--padding-x);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow: hidden;
    position: relative;
}

.job-info__box-content .application-box .btn {
    background-color: #fff;
    margin-left: auto;
    position: relative;
}

.job-info__box-content .application-box .btn input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.job-info__box-content .application-box .application-box__main {
    width: 100%;
    padding: calc(20 * var(--rpx)) var(--padding-x);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: translateY(100%);
    transition: transform .3s linear;
    flex-wrap: wrap;
}

.job-info__box-content .application-box:focus-within {
    overflow: visible;
}

.job-info__box-content .application-box:focus-within .application-box__main {
    transform: translateY(0);
}

.job-info__box-content .application-box .application-box__main .info-item {
    margin-top: 0;
}

.job-info__box-content .application-box .application-box__main .code-img {
    --l: calc(104 * var(--rpx));
    width: var(--l);
    height: var(--l);
    padding: calc(4 * var(--rpx));
    box-shadow: 0px 2px calc(10 * var(--rpx)) 0px rgba(0, 0, 0, 0.1);
}

.job-info__box-content .application-box .application-box__main .icon {
    --l: calc(40 * var(--rpx));
    width: var(--l);
    height: var(--l);
    background-color: var(--primary-foreground);
    border-radius: 50%;
}

.job-info__box-content .application-box .application-box__main .icon img {
    filter: url(#white-overlay);
}

.job-info__box {
    height: 100%;
}

@media screen and (max-width: 750px) {
    .layer-talent-program .layer-main {
        padding-top: calc(20 * var(--rpx));
    }

    .layer-talent-program .layer-bg {
        width: 100vw;
        margin-top: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

    .layer-talent-program .layer-bg img {
        margin-top: 50%;
        transform: translate(40%, -50%) rotate(90deg);
    }
}