/* ============================================
   Index Page Styles - 首页样式
   ============================================ */

/* Main Banner Section */
.main-banner {
    width: 100%;
    height: 810px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.banner-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    padding-left: 220px; /* 与导航logo和intro-section的h2垂直对齐 */
    box-sizing: border-box;
    /* margin: 0 auto; */
}

.banner-image-wrapper {
    position: absolute;
    width: 1190px;
    right: 0;
    top: 0;
    height: 810px;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box; /* Safari 兼容性 */
}

.banner-image {
    width: 100%; /* Safari 兼容性：设置宽度 */
    height: 100%;
    -webkit-object-fit: cover; /* Safari 兼容性：旧版 Safari */
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0; /* Safari 兼容性：明确设置 top */
}

/* 默认：PC 显示 main-banner，隐藏 H5 图和大屏图 */
.banner-image-h5,
.banner-image-big,
.banner-image-mid {
    display: none;
}

@media screen and (min-width: 1840px) and (max-width: 2240px) {
    .banner-image-wrapper {
        width: 1410px;
    }
    
    .banner-image-mid {
        display: block;
    }
    .banner-image-pc,
    .banner-image-big {
        display: none;
    }
}
@media screen and (min-width: 2201px) {
    .banner-image-wrapper {
        width: 1850px;
    }
    
    .banner-image-big {
        display: block;
    }
    .banner-image-pc,
    .banner-image-mid {
        display: none;
    }
}

/* 移动端：只显示 H5 图 */
@media screen and (max-width: 768px) {
    .banner-image-pc,
    .banner-image-big,
    .banner-image-mid {
        display: none;
    }
    .banner-image-h5 {
        display: block;
    }
}

/* Banner Mask - 定位到 main-content，作为滑块 */
/* PC端 left 固定为 220px */
.banner-mask {
    position: absolute;
    top: 448px;
    left: 0;
    width: 310px;
    height: 80px;
    z-index: 100; 
    pointer-events: none;
    will-change: transform;
}

.mask-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-content {
    position: relative;
    z-index: 4;
    padding-top: 210px;
}

.banner-title {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    font-size: 90px;
    line-height: 1em;
    color: #384963;
    margin-bottom: 200px;
    white-space: pre-line; /* 保留 <br> 标签换行，防止自动换行 */
    word-break: keep-all; /* 防止在单词/字符中间换行 */
    overflow-wrap: break-word; /* Safari 兼容：防止溢出 */
    -webkit-hyphens: none; /* Safari 兼容：禁用自动连字符 */
    hyphens: none;
}


.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 17px;
    height: 200px;
    position: relative;
}

.scroll-bar {
    width: 2px;
    height: 120px;
    background: rgba(198, 157, 122, 0.2);
    position: relative;
    margin-top: 80px;
}

.scroll-progress {
    width: 2px;
    height: 60px;
    background: #C69D7A;
    position: absolute;
    top: 0;
    left: 0;
}

.scroll-text {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.06em;
    letter-spacing: 0.1em;
    color: #384963;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1600px) {
    .main-banner {
        height: 590px;
        padding: 0 100px;
    }
    
    .banner-container {
        padding: 0; 
    }
    
    /* 确保显示默认PC图，隐藏大屏图和中屏图 */
    .banner-image-big,
    .banner-image-mid {
        display: none;
    }
    .banner-image-pc {
        display: block;
    }

    .banner-image-wrapper {
        max-width: calc(100% - 320px);
        width: calc(100% - 320px); /* Safari 兼容性：明确设置宽度 */
        min-width: auto; /* Safari 兼容性：重置 min-width */
        height: 583px;
        box-sizing: border-box; /* Safari 兼容性 */
    }
    
    .banner-image-wrapper .banner-image {
        width: 100%; /* Safari 兼容性：确保图片宽度正确 */
        -webkit-object-fit: cover; /* Safari 兼容性 */
        object-fit: cover;
    }
    
    .banner-mask {
        top: 327px;
        right: auto;
        width: 226px;
        height: 58px;
    }
    
    .banner-content {
        padding-top: 153px;
    }
    
    .banner-title {
        font-size: 50px;
        margin-bottom: 146px;
        white-space: pre-line; /* 保留 <br> 标签换行，防止自动换行 */
        word-break: keep-all; /* 防止在单词/字符中间换行 */
        overflow-wrap: break-word; /* Safari 兼容：防止溢出 */
        -webkit-hyphens: none; /* Safari 兼容：禁用自动连字符 */
        hyphens: none;
    }
    
    /* English language: smaller font size for banner-title */
    .lang-en .banner-title {
        font-size: 57px;
    }
    
    /* Japanese language: font size for banner-title */
    .lang-ja .banner-title {
        font-size: 54px;
        word-break: keep-all; /* 日语：保持字符完整，不拆分 */
        -webkit-word-break: keep-all; /* Safari 兼容 */
    }
    
    .scroll-indicator {
        width: 12px;
        height: 146px;
    }
    
    .scroll-bar {
        height: 87px;
        margin-top: 58px;
    }
    
    .scroll-progress {
        height: 44px;
    }
    
    .scroll-text {
        font-size: 13px;
    }
}

@media screen and (max-width: 1200px) {
    div.main-banner {
        height: 506px;
        padding: 0 120px;
        
        /* banner-container与header-container对齐 */
        /* main-banner有padding: 0 120px，header-container有padding: 0 40px */
        /* logo在40px位置（相对于header-container），要让banner-content与logo对齐 */
        /* banner-container在main-banner内部，main-banner的padding会让它向右移动120px */
        /* 所以banner-container的padding-left应该是40px（相对于main-banner的padding之后） */
        .banner-container {
            padding-left: 40px; /* 与header-container的padding-left对齐 */
        }
        
        /* 确保显示默认PC图，隐藏大屏图和中屏图 */
        .banner-image-big,
        .banner-image-mid {
            display: none;
        }
        .banner-image-pc {
            display: block;
        }
        
        .banner-image-wrapper {
            max-width: 738px;
            width: 738px; /* Safari 兼容性：明确设置宽度 */
            min-width: auto; /* Safari 兼容性：重置 min-width */
            height: 500px;
            box-sizing: border-box; /* Safari 兼容性 */
        }
        
        .banner-image-wrapper img.banner-image-pc {
            position: absolute;
            right: 0;
            top: 0; /* Safari 兼容性：明确设置 top */
            width: 100%; /* Safari 兼容性：设置宽度 */
            height: 100%;
            object-fit: cover;
            -webkit-object-fit: cover; /* Safari 兼容性 */
        }
    }
    
    div.intro-section{
        top: 674px;
    }
    div.services-section{
        top: 1280px;
    }
    div.workflow-section{
        top: 2260px;
    }
    div.cooperation-section{
        top: 2800px;
    }
    div.career-section{
        top: 3450px;
    }
    div.contact-section{
        top: 4460px;
    }
    .banner-mask {
        top: 280px;
        right: auto;
        width: 194px;
        height: 50px;
    }
    
    .banner-content {
        padding-top: 131px;
    }
    
    .banner-title {
        font-size: 45px;
        margin-bottom: 125px;
        white-space: pre-line; /* 保留 <br> 标签换行，防止自动换行 */
        word-break: keep-all; /* 防止在单词/字符中间换行 */
        overflow-wrap: break-word; /* Safari 兼容：防止溢出 */
        -webkit-hyphens: none; /* Safari 兼容：禁用自动连字符 */
        hyphens: none;
    }
    
    /* English language: smaller font size for banner-title */
    .lang-en .banner-title {
        font-size: 47px;
    }
    
    /* Japanese language: font size for banner-title */
    .lang-ja .banner-title {
        font-size: 43px;
        word-break: keep-all; /* 日语：保持字符完整，不拆分 */
        -webkit-word-break: keep-all; /* Safari 兼容 */
    }
    
    .scroll-indicator {
        width: 11px;
        height: 125px;
    }
    
    .scroll-bar {
        height: 75px;
        margin-top: 50px;
    }
    
    .scroll-progress {
        height: 38px;
    }
    
    .scroll-text {
        font-size: 12px;
    }
}

/* Intro Section */
.intro-section {
    width: 100%;
    position: absolute;
    top: 980px;
    left: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.intro-section .container {
    min-height: 246.24px;
    display: -webkit-flex; /* Safari 兼容性 */
    display: flex;
    -webkit-justify-content: space-between; /* Safari 兼容性 */
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
    padding: 0 220px;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.intro-section .section-title-large {
    width: 336px;
    min-width: 300px;
    margin-bottom: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 106%;
    letter-spacing: 0;
    color: #C69D7A;
    padding-bottom: 116px;
}

/* English language: smaller font size */
.lang-en .intro-section .section-title-large {
    font-size: 39px;
}

.intro-content {
    min-height: 246.24px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    position: relative;
}

.intro-text {
    width: 100%;
    max-width: 830px;
    height: auto;
    padding-bottom: 164px;
    margin-bottom: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #384963;
}

.features-grid {
    width: 100%;
    height: 110px;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    .features-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    height: 110px;
}



.feature-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-title {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #384963;
    text-align: center;
    width: 200px;
    height: 30px;
    margin-top: 12px;
}

.intro-btn {
    position: absolute;
    left: 220px;
    bottom: 0;
    margin-top: 0;
    margin-left: 0;
}

@media screen and (min-width: 1440px) and (max-width: 1620px) {
    .intro-section .intro-content {
        width: auto;
    }
    
    .intro-section .section-title-large {
        font-size: 48px;
    }
}


@media screen and (max-width: 1600px) {
    .intro-section {
        top: 824px;
    }
    
    .intro-section .container {
        /* min-width: 1300px; */
        padding: 0 100px;
    }
    
    .intro-section .section-title-large {
        width: 250px;
        font-size: 41px;
    }
    
    .features-grid {
        width: 100%;
    }
    
    /* 英语和日语版本保持默认宽度 */
    .lang-en .feature-item,
    .lang-ja .feature-item {
        width: 120px;
    }
    
    .intro-btn {
        left: 100px;
        top: auto;
    }
}

/* Services Section */
.services-section {
    width: 100%;
    height: 916px;
    position: absolute;
    top: 1430px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.services-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 540px;
    z-index: 1;
}

.services-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.services-section .container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 916px;
    margin: 0 auto;
    padding: 0;
}

.services-title {
    position: absolute;
    left: clamp(20px, 11.46vw, 220px);
    top: 80px;
    width: 224px;
    height: 59px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.06em;
    color: #FCFBFB;
    white-space: nowrap;
}

.services-subtitle {
    position: absolute;
    left: clamp(20px, 11.46vw, 220px);
    top: 165px;
    white-space: nowrap;
    height: 25px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #FCFBFB;
}

.services-grid {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 916px;
}

.service-card {
    position: absolute;
    width: 310px;
    height: 500px;
}

.service-card:nth-child(1) {
    left: clamp(20px, 11.46vw, 220px);
    top: 340px;
}

.service-card:nth-child(2) {
    left: clamp(20px, 31.77vw, 610px);
    top: 240px;
}

.service-card:nth-child(3) {
    left: clamp(20px, 52.08vw, 1000px);
    top: 340px;
}

.service-card:nth-child(4) {
    left: clamp(20px, 72.66vw, 1395px);
    top: 240px;
}

.service-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    object-fit: cover;
}

.service-name {
    position: absolute;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.04em;
    color: #384963;
    text-align: center;
    z-index: 4;
    top: 540px;
    width: 100%;
    height: 36px;
}

.service-card:nth-child(1) .service-name {
    left: -27px;
}

.service-card:nth-child(2) .service-name {
    left: -12px;
}

.service-card:nth-child(3) .service-name {
    left: 3px;
}

.service-card:nth-child(4) .service-name {
    left: 13px;
}

.services-section .btn {
    position: absolute;
    right: clamp(20px, 11.46vw, 220px);
    top: 80px;
    margin: 0;
    z-index: 4;
}

/* Workflow Section */
.workflow-section {
    width: 100%;
    max-width: 1490px;
    height: 490px;
    position: absolute;
    top: 2510px;
    /* PC 默认：在 1920px 以内按 210px/1920px ≈ 10.94vw 比例向右偏移 */
    left: clamp(20px, 10.94vw, 210px);
    padding: 0;
    margin: 0;
}

.workflow-section .container {
    width: 100%;
    max-width: 1490px;
    height: 490px;
    position: relative;
    margin: 0;
    padding: 0;
}

.workflow-content {
    position: relative;
    width: 100%;
    height: 490px;
}

.workflow-image {
    position: absolute;
    left: 0;
    top: 0;
    width: min(36.98vw, 710px);
    height: 490px;
}

.workflow-image img {
    width: 100%;
    object-fit: cover;
}

.workflow-text {
    position: absolute;
    left: min(41.15vw, 790px);
    top: 0;
    width: min(36.46vw, 700px);
    height: 490px;
}

.workflow-text .section-title-large {
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 60px;
    width: 224px;
}

/* English language: smaller font size */
.lang-en .workflow-text .section-title-large {
    font-size: 40px;
}

.workflow-text .section-subtitle {
    position: absolute;
    left: 0;
    top: 145px;
    width: 198px;
    height: 25px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #384963;
    white-space: nowrap;
}

.workflow-text .section-description {
    position: absolute;
    left: 0;
    top: 206px;
    min-width: 390px;
    height: auto;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #384963;
}

.workflow-text .btn {
    position: absolute;
    left: 0;
    top: 294px;
    margin: 0;
}

/* English,Japanese language: adjust button top position */
.lang-en .workflow-text .btn,.lang-ja .workflow-text .btn {
    top: 375px;
}
/* Cooperation Section */
.cooperation-section {
    width: 100%;
    max-width: 1490px;
    height: 490px;
    position: absolute;
    top: 3140px;
    padding: 0;
    margin: 0;
}

.cooperation-section .container {
    width: 100%;
    max-width: 1490px;
    height: 490px;
    position: relative;
    margin: 0;
    padding: 0 clamp(20px, 10.94vw, 210px);
}

/* 大于 1920px 的超宽屏：按 210px / 1920px 的比例继续放大左右留白 */
@media screen and (min-width: 1921px) {
    .workflow-section {
        left: calc(210px * 100vw / 1920px);
    }
    .cooperation-section .container {
        padding: 0;
    }
}

.cooperation-content {
    position: relative;
    width: 100%;
    height: 490px;
}

.cooperation-text {
    position: absolute;
    left: 0;
    top: 0;
    width: min(36.46vw, 700px);
    height: 490px;
}

.cooperation-text .section-title-large {
    white-space: nowrap;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.06em;
    top: 60px;
    position: absolute
}

/* English language: smaller font size */
.lang-en .cooperation-text .section-title-large {
    font-size: 40px;
}

.cooperation-text .section-subtitle {
    position: absolute;
    left: 0;
    top: 155px;
    width: 162px;
    height: 25px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #384963;
    white-space: nowrap;
}

.cooperation-text .section-description {
    position: absolute;
    left: 0;
    top: 216px;
    height: auto;
    min-width: 390px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #384963;
}

.cooperation-text .btn {
    position: absolute;
    left: 0;
    top: 304px;
    margin: 0;
}

/* English language: adjust button top position */
.lang-en .cooperation-text .btn {
    top: 375px;
}

/* Japanese language: adjust button top position */
.lang-ja .cooperation-text .btn {
    top: 375px;
}

.cooperation-image {
    position: absolute;
    left: min(41.15vw, 790px);
    top: 0;
    width: min(36.98vw, 710px);
    height: 490px;
}

.cooperation-image img {
    width: 100%;
    object-fit: cover;
}

/* Career Section */
.career-section {
    width: 100%;
    height: 1002px;
    position: absolute;
    top: 3850px;
    left: 50%;
    -webkit-transform: translateX(-50%); /* Safari 兼容性 */
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    overflow: visible;
    z-index: 5;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.career-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1002px;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.career-mask-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.career-mask-bg img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover; /* Safari 兼容性 */
    object-fit: cover;
}

/* 默认 PC：显示原图，隐藏 H5 图 */
.career-mask-bg-h5 {
    display: none;
}

/* 移动端：只显示 H5 图 */
@media screen and (max-width: 768px) {
    .career-mask-bg-pc {
        display: none;
    }
    .career-mask-bg-h5 {
        display: block;
    }
}

.career-bg-group {
    position: absolute;
    top: 480px;
    left: 0;
    width: 47%; 
    max-width: 920px; /* Safari 兼容性：限制最大宽度 */
    height: 320px;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box; /* Safari 兼容性 */
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
    border-radius: 0 100px 0 100px;
}


.career-bg-group img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover; /* Safari 兼容性 */
    object-fit: cover;
    border-radius: inherit;
}

/* 默认 PC：使用 career-bg-group 原图，隐藏 H5 图 */
.career-bg-group-h5 {
    display: none;
}

/* 移动端：只显示 H5 图 */
@media screen and (max-width: 768px) {
    .career-bg-group-pc {
        display: none;
    }
    .career-bg-group-h5 {
        display: block;
    }
}

.career-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 clamp(20px, 11.46vw, 220px);
}

.career-left {
    position: relative; 
    left: 0;    
    top: 94px;
    height: auto;
}

.career-title {
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.06em;
    color: #FCFBFB;
    white-space: nowrap;
    padding-bottom: 26px;
}
.lang-en h2.section-title-large.career-title {
    font-size: 56px;
}

.career-subtitle {
    position: relative;
    left: 0;
    /* width: 216px; */
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #FCFBFB;
    padding-bottom: 100px;
}

.career-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    white-space: nowrap;
}

/* English language: adjust padding and add white-space */
.lang-en .career-btn {
    padding: 18px 25px;
}

.career-frame-3,
.career-frame-4 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 68px;
    z-index: 10;
}

.career-frame-3 {
    top: 840px;
}

.career-frame-4 {
    top: 934px;
    overflow: visible;
    z-index: 20;
}

.career-frame-3-wrapper,
.career-frame-4-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.career-frame-3-content,
.career-frame-4-content {
    display: -webkit-flex; /* Safari 兼容性 */
    display: flex;
    -webkit-flex-direction: row; /* Safari 兼容性 */
    flex-direction: row;
    -webkit-align-items: center; /* Safari 兼容性 */
    align-items: center;
    gap: 26px;
    height: 68px;
    width: -webkit-fit-content; /* Safari 兼容性 */
    width: fit-content;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0); /* Safari 兼容性 */
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden; /* Safari 兼容性 */
    backface-visibility: hidden;
    contain: layout style paint;
    --move-distance: 1930px;
}

/* Safari 兼容性：为不支持 gap 的浏览器添加 margin */
@supports not (gap: 26px) {
    .career-frame-3-content > *:not(:last-child),
    .career-frame-4-content > *:not(:last-child) {
        margin-right: 26px;
    }
}

.career-frame-4-content {
    --half-item-width: 160px;
}

.frame3-item,
.frame4-item {
    width: 320px;
    height: 68px;
    flex-shrink: 0;
    display: -webkit-flex; /* Safari 兼容性 */
    display: flex;
    -webkit-align-items: center; /* Safari 兼容性 */
    align-items: center;
    -webkit-justify-content: center; /* Safari 兼容性 */
    justify-content: center;
    border-radius: 70px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    -webkit-transform: translateZ(0); /* Safari 兼容性 */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; /* Safari 兼容性 */
    backface-visibility: hidden;
    will-change: opacity;
    contain: layout style paint;
    isolation: isolate;
}

.frame4-item {
    justify-content: center;
}

/* PC端：使用gray图片作为遮罩层 */
.frame3-item::before,
.frame4-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--gray-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    isolation: isolate;
}

.frame3-item:hover::before,
.frame4-item:hover::before {
    opacity: 0;
}



.frame3-item img,
.frame4-item img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover; /* Safari 兼容性 */
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
    -webkit-transform: translateZ(0); /* Safari 兼容性 */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; /* Safari 兼容性 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes scroll-frame3 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--move-distance, 1930px) * -1));
    }
}

@keyframes scroll-frame4 {
    0% {
        transform: translateX(calc(var(--half-item-width, 160px) * -1));
    }
    100% {
        transform: translateX(calc(var(--move-distance, 1930px) * -1 + var(--half-item-width, 160px) * -1));
    }
}

.career-content {
    position: absolute;
    right: clamp(20px, 11.46vw, 220px);
    top: 94px;
    width: min(36.46vw, 700px);
    max-width: 700px;
    display: block;
}

.career-description {
    position: absolute;
    left: 0;
    top: 0;
    width: 700px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #FCFBFB;
}

.career-list {
    position: absolute;
    left: 0;
    top: 96px;
    width: 700px;
}

.career-item {
    width: 100%;
}

.career-item-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 30px;
    width: 700px;
}

.career-item.expanded .career-item-header {
    background: rgba(255, 255, 255, 0.05);
}

.career-item:not(.expanded) .career-item-header {
    background: transparent;
}

.career-number {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #FCFBFB;
    width: 30px;
    flex-shrink: 0;
}

.career-item-content {
    flex: 1;
    width: 560px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.career-job-title {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #B29786;
    margin-bottom: 20px;
    width: 560px;
    height: 25px;
}

.career-item:first-child .career-item-content .career-job-desc {
    display: block !important;
}

.career-job-desc {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #FCFBFB;
    /* width: 536px;
    height: 86px; */
    display: none;
}

.career-item.expanded .career-item-content .career-job-desc {
    display: block;
}

.career-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0; 
    margin-top: 2px;
    transition: transform 0.3s ease;
}

.career-arrow.rotated {
    transform: rotate(180deg);
}

.career-arrow svg,
.career-arrow img {
    width: 16px;
    height: 16px;
    stroke: #FCFBFB;
    stroke-width: 2.5px;
}

.career-divider {
    width: 700px;
    height: 1px;
    background: #FCFBFB;
}

.career-divider-1 {
    opacity: 0.1;
}

.career-divider-2 {
    opacity: 0.5;
}

.career-divider-3 {
    opacity: 0.1;
}

.career-divider-4 {
    opacity: 0.1;
    display: none;
}

/* Contact Section */
.contact-section {
    width: 100%;
    position: absolute;
    top: 4840px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    overflow: hidden;
    z-index: 1;
}

.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    z-index: 1;
}

.contact-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 默认 PC：显示原图，隐藏 H5 图 */
.contact-bg-h5 {
    display: none;
}

/* 移动端：只显示 H5 图 */
@media screen and (max-width: 768px) {
    .contact-bg-pc {
        display: none;
    }
    .contact-bg-h5 {
        display: block;
    }
}

.contact-section .container {
    position: relative;
    z-index: 2;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-title {
    white-space: nowrap;
    position: relative;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 2.92vw, 56px);
    line-height: 1.06em;
    color: #C69D7A;
    text-align: center;
}

.contact-subtitle {
    position: relative;
    /* width: min(28.93vw, 421px); */
    margin-bottom: clamp(20px, 3vw, 57.47px);
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 0.94vw, 18px);
    line-height: 1.4em;
    color: #384963;
    text-align: center;
}

.contact-info {
    white-space: nowrap;
    position: relative;
    width: min(44.79vw, 860px);
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #384963;
    text-align: center;
}
.lang-en .section-title-large.contact-title {
    font-size:54px;
}

@media screen and (max-width: 1440px) {
    .service-card {
        width: 16.15vw;
        height: 500px;
    }
    
    .service-name {
        top: 430px;
    }
}

@media screen and (min-width: 1920px) {
    .workflow-section,
    .cooperation-section {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================
   移动端适配 - 将所有绝对定位改为相对定位
   ============================================ */
@media screen and (max-width: 768px) {
    /* index-main-content 内部所有使用绝对定位的元素改为相对定位 */
    .main-content section > *,
    .index-main-content section > * {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }
    /* 移动端主banner样式 */
    section.main-banner{
        padding: 0;
        height: 580px;
        width: 100%;
        margin: 12px 0 calc(70px * 100vw / 390px);
    }
    section.main-banner .banner-image-wrapper{
        position: absolute;
        width: 350px ; /* 确保覆盖默认的 60% 宽度 */
        max-width: 350px ; /* 确保最大宽度也是 350px */
        height: 430px;
        top: 148px;
        right: 0;
        z-index: 2;
        overflow: hidden;
        border-radius: 0 0 0 85px;
        box-sizing: border-box;
    }
    
    section.main-banner .banner-image-wrapper .banner-image {
        width: 100% ;
        height: 100% ;
        object-fit: cover;
        -webkit-object-fit: cover;
        border-radius: 0 0 0 85px;
    }
    
    section.main-banner .banner-content{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
    }
 
    .banner-mask{
        width: 158px;
        height: 36px;
        top: 130px;
        left: 30px;
        position: absolute;
        /* 默认在移动端仍显示，但层级低于移动端导航弹层 */
        z-index: 90;
    }

    /* 打开移动端导航时，完全隐藏 banner-mask，避免通过半透明背景透出来 */
    body.mobile-nav-open .banner-mask {
        display: none;
    }
      /* 移动端日语：banner-title 字体大小 34px */
      .lang-ja section.main-banner .banner-content  .banner-title{
        font-size: 34px;
        word-break: keep-all; /* 日语：保持字符完整，不拆分 */
        -webkit-word-break: keep-all; /* Safari 兼容 */
    }
    .lang-ja section.services-section  div.services-grid,
    .lang-en section.services-section  div.services-grid{
        gap: calc(40px * 100vw / 390px);
        .service-name{
            font-size: 16px;
        }
        .service-card:nth-child(2) .service-name,
        .service-card:nth-child(4) .service-name {
                top: 270px;
        }
    }
    
    section.main-banner .banner-container {
        padding-left: 0; /* 移动端重置padding */
    }
    
    section.main-banner .banner-content{
        padding: 0 30px;
        .banner-title{
            font-family: Noto Sans SC;
            font-weight: 700;
            font-size: 40px;
            line-height: 1.2;
            letter-spacing: 2px;
            padding: 0;
            margin: 0;
            color: #384963;
            white-space: pre-line; /* 保留 <br> 标签换行，防止自动换行 */
            word-break: keep-all; /* 防止在单词/字符中间换行 */
            overflow-wrap: break-word; /* Safari 兼容：防止溢出 */
            -webkit-hyphens: none; /* Safari 兼容：禁用自动连字符 */
            hyphens: none;
        }
        
      
      
        .scroll-indicator{
            height: 150px;
            top: 450px;
            left: 13px;
            position: absolute;
        }
    }
    /* 移动端英文：banner-title letter-spacing 为 0 */
    .lang-en section.main-banner .banner-content .banner-title {
        letter-spacing: 0;
    }
    /* 移动端intro-section样式 */
    section.intro-section{
        margin-bottom: calc(90px * 100vw / 390px);
        .container{
            width: 100%;
            height: auto;
            min-width: auto;
            display: flex;
            flex-direction: column;
            padding: 0 30px 30px;
        }
        h2.section-title-large{
            font-size: 44px;
            width: 100%;
            padding-bottom: 20px;
        }
        .intro-content{
            width: 100%;
            margin-bottom: 90px;
            height: auto;
            .intro-text{
                font-size: 14px;
                height: auto;
                margin-bottom: 44px;
                padding-bottom: 234px;
            }
            .features-grid{
                width: 100%;
                height: auto;
                .features-container{
                    width: 100%;
                    display: -webkit-grid; /* Safari 兼容性 */
                    display: grid;
                    -webkit-grid-template-columns: repeat(2, 1fr); /* Safari 兼容性 */
                    grid-template-columns: repeat(2, 1fr);
                    -webkit-grid-template-rows: repeat(2, 1fr); /* Safari 兼容性 */
                    grid-template-rows: repeat(2, 1fr);
                    -webkit-grid-gap: calc(20px * 100vw / 390px); /* Safari 兼容性 */
                    grid-gap: calc(20px * 100vw / 390px); /* 旧版 Safari 支持 */
                    gap: calc(20px * 100vw / 390px);
                    /* 移动端：grid 单元格内容居中 */
                    -webkit-place-items: center; /* Safari 兼容性 */
                    place-items: center;
                }
                .feature-item{
                    position: relative;
                    right: auto;
                    /* 移动端：内容在区域内居中展示 */
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
        .intro-btn{
            left: 30px;
            bottom: 0;
            top: auto;
            height: 54px;
            padding: 14px 18px;
            gap: 10px;
            font-size: 14px;
            >img{
                width: 26px;
                height: 26px;
            }
        }

    }
    section.services-section{
        height: auto;
        transform: none;
        margin-bottom: 0;
        .services-bg{
            position: absolute;
            top: 0;
            left: 0;
            height:340px;
            overflow: hidden;
            img{
                height: 100%;
                width: 1048px;
                height: 806px;
                top: 1276px;
                left: -288px;

            }
        }
        .services-overlay{
            margin-bottom: 0;
        }
        .container{
            top: 0;
            height:960px;
            .services-title{
                top: 60px;
                left: 30px;
                font-size: 44px;
                color: #FCFBFB;
            }
            .section-subtitle.services-subtitle{
                color: #FCFBFB;
                font-size: 16px;
                top: 127px;
                left: 30px;
            }
            .btn-primary{
                height: 54px;
                top: 60px;
                left: 227px;
                white-space: nowrap;
                padding: 14px;
                font-size: 14px;
                right: auto;
                color: #FCFBFB;
                img{
                    width: 26px;
                    height: 26px;
                }
            }
            /* 服务遮罩层 */
            /* .services-overlay 样式在移动端保持默认 */
            /* 服务卡片 */
            .services-grid{
               position: relative;
               top: 182px;
               left: 0;
               right: auto;
               bottom: auto;
               height: auto;
               display: -webkit-grid; /* Safari 兼容性 */
               display: grid;
               -webkit-grid-template-columns: repeat(2, 1fr); /* Safari 兼容性 */
               grid-template-columns: repeat(2, 1fr);
               -webkit-grid-gap: calc(20px * 100vw / 390px); /* Safari 兼容性 */
               grid-gap: calc(20px * 100vw / 390px); /* 旧版 Safari 支持 */
               gap: calc(20px * 100vw / 390px);
               width: 100%;
               padding: 0 30px;
               box-sizing: border-box;
               .service-card{
                    position: relative;
                    width: 158px;
                    height: 305px;
                    left: 0;
                    top: 0;
                    .service-name{
                        top: 320px;
                        left: 0;
                    }
               }
               
               /* 第一个和第三个 service-card 的图片 top: 60px */
               .service-card:nth-child(1) .service-image,
               .service-card:nth-child(3) .service-image {
                    top: 60px;
               }

               .service-card:nth-child(2) .service-name,
               .service-card:nth-child(4) .service-name {
                    top: 260px;
                    left: 0;
               }
            }
        }

    }
    section.workflow-section,section.cooperation-section{
        height: auto;
        margin-bottom: 90px;
        .container{
            min-height: 549px;
            padding: 0 30px;
            .workflow-content,.cooperation-content{
                left: 0;
                height: auto;
            }
            .workflow-image,.cooperation-image{
                position: absolute;
                width: 100%;
                height: auto;
                top: 100%;
                left: auto;
            }
            .workflow-text,.cooperation-text{
                position: relative;
                left: 0;
                top: 0;
                width: 100%;
                height: auto;
                .section-title-large{
                    top: 0;
                    position: relative;
                    margin-bottom: 20px;
                    font-size: 44px;
                }
                .section-subtitle{
                    position: relative;
                    top: 0;
                    font-size: 16px;
                    margin-bottom: 30px;
                    white-space: wrap;
                    width: 100%;
                }
                .section-description{
                    position: relative;
                    top: 0;
                    font-size: 14px;
                    height: auto;
                    min-width: auto;
                }
                .btn{
                    position: relative;
                    left: 0;
                    top: 0;
                    width: auto;
                    height: auto;
                    margin-top: 30px;
                    margin-bottom: 27px;
                    height: 54px;
                    padding: 14px 18px;
                    gap: 10px;
                    font-size: 14px;
                    >img{
                        width: 26px;
                        height: 26px;
                    }
                }

            }
        }
    }
    
    /* 移动端英语版本：workflow-section 和 cooperation-section 的 margin-bottom 为 140px */
    .lang-en section.workflow-section,
    .lang-en section.cooperation-section {
        margin-bottom: 140px;
    }
    
    /* 移动端日语版本：workflow-section 和 cooperation-section 的 margin-bottom 为 120px */
    .lang-ja section.workflow-section,
    .lang-ja section.cooperation-section {
        margin-bottom: 120px;
    }
    
    section.career-section{
        width: 100%;
        height: auto;
        min-height: 1010px;
        margin-top: 59px;
        left: 0;
        top: 0;
        transform: none;
        .container{
            width: 100%;
            height: auto;
            padding:0 30px;
            .career-left{
                margin-bottom: 30px;
                top: 0;
                .career-title{
                    padding-top: 74px;
                    font-size: 44px;
                }
                .career-subtitle{
                    font-size: 16px;
                    margin-bottom: 30px;
                    padding: 0;
                }
                .career-btn{
                    position: relative;
                    height: 54px;
                    padding: 14px 18px;
                    gap: 10px;
                    font-size: 14px;
                    >img{
                        width: 26px;
                        height: 26px;
                    }
                }
            }
            .career-content{
                position: relative;
                right: auto;
                left: 0;
                top: 0;
                width: 100%;
                height: auto;
                .career-description{
                    position: relative;
                    width: 100%;
                    height: auto;
                    margin-bottom: 30px;
                    font-size: 14px;
                    
                }
                .career-list{
                    position: relative;
                    width: 100%;
                    height: auto;
                    top: 0;
                    .career-divider{
                        width: 100%;
                    }
                    .career-item-header{
                        width: 100%;
                        gap: 10px;
                        padding: 20px;
                        .career-item-content{
                            width: auto;
                            .career-job-title{
                                font-size: 16px;
                                width: 100%;
                            }
                            .career-job-desc{
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
       .career-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        overflow: visible;
        .career-mask-bg{
            position: relative;
            width: 100%;
            height: auto;
            max-height: 860px;
        }
       }
       .career-bg-group{
            width: 360px;
            height: 140px;
            bottom: -45px;
            top: auto;
            z-index: 2;
            border-radius: 0;
       }
       /* 移动端：调整两个跑马灯高度与位置 */
       .career-frame-3,
       .career-frame-4{
        position: absolute;
        top: auto;
        height: 34px; /* 整体高度 34px */
        margin-bottom: 10px;
       }
       .career-frame-3{
        bottom: 41px;
       }
       .career-frame-4{
        bottom: 0;
       }
    }
    /* 英文版和日文版：职位描述字体再缩小一点，标题 padding-top 调整为 10px */
    .lang-en .career-item-header,.lang-ja .career-item-header{
        padding: 15px !important;
        .career-job-desc{
            font-size: 12px !important;
        }
        h4.career-job-title{
            margin-bottom: 10px;
        }
    }
     

    .lang-en section.career-section .career-left .career-title{
        padding-top: 20px ;
    }
    
    /* 屏幕宽度大于420px时，添加 margin-top */
    @media screen and (min-width: 421px) {
        .lang-en section.career-section .career-left .career-title{
            padding-top: 50px;
        }
    }

    /* 移动端：跑马灯内容高度及每个 item 尺寸 */
    .career-frame-3-content,
    .career-frame-4-content{
        height: 34px;
    }

    /* 移动端：career-frame-4-wrapper 初始状态向右移动一个屏幕宽度 */
    .career-frame-4-wrapper {
        transform: translateX(85vw);
    }

    .frame3-item,
    .frame4-item{
        width: 160px;
        height: 34px;
    }

    /* 移动端：移除遮罩层，让图片全部高亮显示 */
    .frame3-item::before,
    .frame4-item::before {
        display: none;
    }

    /* 保持某些元素的特殊定位（不在main-content内） */
    .modal,
    .modal-overlay {
        position: fixed;
    }
    
    .mobile-nav-overlay {
        position: fixed;
    }
    
    #header-container {
        position: relative;
    }
    
    /* 移动端多语言弹窗打开时，header-container 变为 fixed */
    #header-container.lang-dropdown-open {
        position: fixed;
    }
    .contact-section{
        transform: none;
        padding-top: 50px;
        .contact-bg{
            height: 480px;
            margin-bottom: 0;
        }
        .container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0 30px;
            justify-content: unset;
            .contact-title{
                font-size: 44px;
            }
            .contact-subtitle{
                font-size: 16px;
                text-align: center;
            }
            .contact-info{
                font-size: 14px;
                white-space: wrap;
                width: 100%;
            }
        }
    }
    .mobile-nav-footer {
        position: absolute;
    }
    
    /* 容器元素保持相对定位 */
    .container,
    .main-content,
    .index-main-content {
        position: relative;
    }
    
    /* 为各个section内部元素添加间距占位 */
    .main-content > section > *,
    .index-main-content > section > * {
        margin-bottom: calc(20px * 100vw / 390px);
    }
    
    .main-content > section > *:last-child,
    .index-main-content > section > *:last-child {
        margin-bottom: 0;
    }
}