.timeline {
    position: relative;
    margin-top: 40px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.timeline:before {
    width: 980px;
    content: '';
    position: absolute;
    left: 100px;
    right: 80px;
    top: 340px;
    height: 4px;
    background: #e7e9ee;
}
.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: start;
    width: 110%;
    margin-left: -5%;
    /* width: 220px; */
}
.step {
    position: relative;
    text-align: center;
    padding-top: 12px;
}
.step .vstep {
    position: absolute;
    left: 94px;
    top: 290px;
    transform: rotate(-90deg);
    transform-origin: left top;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #3a63b7;
}
.step:nth-child(2) .vstep ,.step:nth-child(4) .vstep {
    top: -44px;
    left: 94pX;
}
.step .vline {
    position: absolute;
    left: 50%;
    top: 140px;
    transform: translateX(-50%);
    width: 3px;
    height: 150px;
    background: #e7e9ee;
    overflow: hidden;
}

/* 竖线填充动画覆盖层 */
.step .vline::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 0;
    background: linear-gradient(to bottom, #ffd700 0%, #ffc400 60%, #ffb800 100%);
    box-shadow: 0 0 10px rgba(255,184,0,0.55);
}
/* 第二步与第四步的竖线从下往上填充 */
.step:nth-child(2) .vline::before,
.step:nth-child(4) .vline::before {
    top: auto; bottom: 0;
    background: linear-gradient(to top, #ffd700 0%, #ffc400 60%, #ffb800 100%);
}

/* 选中步骤时：竖线自上而下填充为黄色 */
.step.step-active .vline::before { animation: vline-fill .6s ease-out forwards; }

@keyframes vline-fill { from { height: 0; } to { height: 100%; } }


/* 第二步和第四步的连线向上 */
.step:nth-child(2) .vline,
.step:nth-child(4) .vline {
    top: -90px;
    height: 150px;
}
/* 节点（外环+内球） */
.node {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, #f9fafc 0%, #eef1f6 60%, #e4e8ef 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08), inset 0 0 0 10px rgba(0,0,0,0.02);
}
.node:hover{
    box-shadow: 0 6px 16px rgba(125, 154, 233, 0.08), inset 0 0 0 10px rgba(0,0,0,0.02);
}

.node .inner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.06);
    background: radial-gradient(circle at 35% 35%, #8ec0ff 0%, #2b78ff 55%, #1554c7 100%);
}
.node.gray .inner { background: radial-gradient(circle at 35% 35%, #d7dbe2 0%, #aeb6c2 60%, #8d96a5 100%); }
.node.active .inner{
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.06);
    background: radial-gradient(circle at 35% 35%, #ffe68a 0%, #ffd200 55%, #ffb800 100%);
    }
    
.node.gray .inner:hover{
    background: radial-gradient(circle at 35% 35%, #91acdb 0%, #8fb0ec 55%, #869bc5 100%);
}
.node.gray .inner:active { background: radial-gradient(circle at 35% 35%, #2b4e8a 0%, #1554c7 55%, #003399 100%); }

.meta {
    margin-top: 170px;
    text-align: left;
    padding-left: 128px;
    width: 115%;
}
.step.step-active .meta { animation: text-pop .3s ease-out forwards; }
.step.step-active .meta .role { color: #e6b800; }
.step.step-active .vstep { animation: vstep-color-late .6s ease-out forwards; }
@keyframes text-pop { from { transform: scale(1); filter: none; } to { transform: scale(1.08); filter: brightness(1.04); } }
@keyframes vstep-color-late { 0%, 55% { color: #3a63b7; } 100% { color: #ffae00; } }
.meta .role {
    font-size: 20px;
    font-weight: 600;
    color: #3a63b7;
    margin-bottom: 8px;
    /* width: 200px; */
    /* 多语言文本适配 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.meta .desc {
    color: #3b4351;
    line-height: 1.8;
    font-weight: 500;
    /* width: 200px; */
    /* 多语言文本适配 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}
.meta .desc .muted { color: var(--muted); }
.step:nth-child(2) .meta,
.step:nth-child(4) .meta {
    margin-top: -110px;
}

/* Step4：默认让文字位于按钮上方并置于更高层级 */
.step:nth-child(4) .meta {
    margin-top: -110px; /* 与按钮位置对齐 */
    position: relative; /* 确保文字在按钮上方 */
    z-index: 3; /* 确保文字在按钮上方 */
}
h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 24px;
  }
  .sub-title {
    text-align: right;
    margin-bottom: 30px;
    font-style: italic;
  }
  

  .topbar {
    position: relative;
    padding-top: 6px;
    margin-bottom: 166px;
    /* border-bottom: 2px solid #e7e9ee; */
}
.title {
    display: inline-block;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 8px;
    position: relative;
}

/* 服务页：顶部图片与中央标题 */
.services-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.services-hero-img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.85);
}

.services-hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 80px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    z-index: 2;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .services-hero-title { 
        font-size: 36px; 
    }
}

@media (max-width: 480px) {
    .services-hero-title { 
        font-size: 28px; 
        letter-spacing: 1px;
    }
}

/* 通用样式 */
.service-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.service-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-header {
    margin-bottom: 40px;
}

.service-title {
    /* width: 100%; */
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
}
.service-title-text{
    width: 160px;
}
.service-title-underline {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 110%;
    height: 3px;
    background-color: #000000;
    margin: 0;
}

.service-title-underline::after { 
    content: '';
    position: absolute;
    right: -12px;
    bottom: -4px;
    width: 16px;
    height: 16px;
    background-color: #000000;
    border-radius: 50%;
}

.service-description {
    max-width: 800px;
    margin-left: 40px;
    margin-top: -30px;
}

.service-description p {
    font-size: 20px;
    line-height: 1.8;
    color: #5f5f5f;
    margin: 0;
    text-align: justify;
}

/* 2D艺术板块特定样式 */
.service-2d {
    background-color: #ffffff;
}

/* 2D艺术图片展示区域 */
.service-gallery {
    margin-top: 40px;
    width: 100vw; /* 使用视口宽度 */
    margin-left: calc(-50vw + 50%); /* 让容器从屏幕左边开始 */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0; /* 图片紧挨着，无间距 */
    width: 100%;
    margin: 0;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    z-index: 10;
}

.gallery-image {
    position: relative;
    width: 100%;
    height: 250px; 
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image img {
    transform: scale(1.1); 
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; 
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    
    background: rgba(0, 0, 0, 0);
}

.gallery-title {
    color: white;
    font-size: 30px; /* 从18px增加到22px */
    font-weight: 600;
    text-align: center;
    margin: 0;
    transform: translateY(0); /* 文字常驻显示，不位移 */
    transition: none; /* 文字保持固定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 添加文字阴影增强可读性 */
}




@media (max-width: 768px) {
    .service-section {
        padding: 60px 0;
    }
    
    .service-content {
        padding: 0 15px;
    }
    
    .service-title {
        font-size: 28px;
    }
    
    .service-description p {
        font-size: 15px;
        line-height: 1.7;
    }
    
    
    .service-gallery {
        margin-left: calc(-50vw + 50%);
        width: 100vw;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 2px;
        width: 100%;
    }
    
    .gallery-image {
        height: 180px; 
    }
    
    .gallery-title {
        font-size: 20px; 
    }
}

@media (max-width: 480px) {
    .service-section {
        padding: 40px 0;
    }
    
    .service-title {
        font-size: 24px;
    }
    
    .service-description p {
        font-size: 14px;
    }
    
    .service-gallery {
        margin-left: calc(-50vw + 50%);
        width: 100vw;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 4px;
        width: 100%;
    }
    
    .gallery-image {
        height: 150px; 
    }
    
    .gallery-title {
        font-size: 18px; 
    }
}

/* 3D艺术区块 */
.service-3d {
    background-color: #ffffff;
    padding-top: 0px;
}

/* 3D艺术图片展示区域 */
.service-3d .service-gallery-3d {
    margin-top: 40px;
    width: 100vw; /* 使用视口宽度 */
    margin-left: calc(-50vw + 50%); /* 让容器从屏幕左边开始 */
}

.service-3d .gallery-grid-3d {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4行2列网格布局 */
    grid-template-rows: repeat(4, 1fr);
    gap: 0; /* 图片紧挨着，无间距 */
    width: 100%;
    margin: 0;
}

/* 设置每张图片的具体位置 */
.service-3d .gallery-item-3d:nth-child(1) {
    grid-column: 1; /* 第1列 */
    grid-row: 1;    /* 第1行 */
}

/* 文字区域位置 - 第一行右侧 */
.service-3d .gallery-text-3d {
    grid-column: 2; /* 第2列 */
    grid-row: 1;    /* 第1行 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 120px 120px; /* 增加左右边距 */
    height: 300px; /* 与图片高度一致 */
}

.service-3d .gallery-text-3d p {
    color: #666666; /* 灰色文字 */
    font-size: 20px; /* 从16px增加到18px */
    line-height: 1.6;
    text-align: justify; /* 两端对齐 */
    margin: 0;
}

/* 第二段文案位置 - 第二行左侧 */
.service-3d .gallery-text-scene {
    grid-column: 1; /* 第1列 */
    grid-row: 2;    /* 第2行 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 120px 120px; /* 增加左右边距 */
    height: 300px; /* 与图片高度一致 */
}

.service-3d .gallery-text-scene p {
    color: #666666; /* 灰色文字 */
    font-size: 20px; /* 从16px增加到18px */
    line-height: 1.6;
    text-align: justify; /* 两端对齐 */
    margin: 0;
}

/* 第三段文案位置 - 第三行右侧 */
.service-3d .gallery-text-hard {
    grid-column: 2; /* 第2列 */
    grid-row: 3;    /* 第3行 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 120px 120px; /* 增加左右边距 */
    height: 300px; /* 与图片高度一致 */
}

.service-3d .gallery-text-hard p {
    color: #666666; /* 灰色文字 */
    font-size: 20px; /* 从16px增加到18px */
    line-height: 1.6;
    text-align: justify; /* 两端对齐 */
    margin: 0;
}

/* 第四段文案位置 - 第四行左侧 */
.service-3d .gallery-text-level {
    grid-column: 1; /* 第1列 */
    grid-row: 4;    /* 第4行 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 120px 120px; /* 增加左右边距 */
    height: 300px; /* 与图片高度一致 */
}

.service-3d .gallery-text-level p {
    color: #666666; /* 灰色文字 */
    font-size: 20px; /* 从16px增加到18px */
    line-height: 1.6;
    text-align: justify; /* 两端对齐 */
    margin: 0;
}

.service-3d .gallery-item-3d:nth-child(4) {
    grid-column: 2; /* 第2列 */
    grid-row: 2;    /* 第2行 */
}

.service-3d .gallery-item-3d:nth-child(5) {
    grid-column: 1; /* 第1列 */
    grid-row: 3;    /* 第3行 */
}

.service-3d .gallery-item-3d:nth-child(6) {
    grid-column: 2; /* 第2列 */
    grid-row: 4;    /* 第4行 */
}

.service-3d .gallery-item-3d {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-3d .gallery-item-3d:hover {
    z-index: 10;
}

.service-3d .gallery-image-3d {
    position: relative;
    width: 100%;
    height: 300px; /* 比2D艺术稍大一些 */
    overflow: hidden;
}

.service-3d .gallery-image-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-3d .gallery-item-3d:hover .gallery-image-3d img {
    transform: scale(1.1); 
}

.service-3d .gallery-overlay-3d {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0); /* 透明背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* 常驻显示 */
    transition: all 0.3s ease;
}

.service-3d .gallery-item-3d:hover .gallery-overlay-3d {
    background: rgba(0, 0, 0, 0);
}

.service-3d .gallery-title-3d {
    color: white;
    font-size: 30px; /* 与2D艺术保持一致 */
    font-weight: 600;
    text-align: center;
    margin: 0;
    transform: translateY(0); /* 文字常驻显示，不位移 */
    transition: none; /* 文字保持固定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 添加文字阴影增强可读性 */
}

/* 大屏幕适配 - 解决文字变形问题 */
@media (min-width: 1400px) {
    .service-3d .gallery-text-3d,
    .service-3d .gallery-text-scene,
    .service-3d .gallery-text-hard,
    .service-3d .gallery-text-level {
        padding: 80px 80px; /* 减少左右边距 */
    }
}

@media (min-width: 1600px) {
    .service-3d .gallery-text-3d,
    .service-3d .gallery-text-scene,
    .service-3d .gallery-text-hard,
    .service-3d .gallery-text-level {
        padding: 60px 60px; /* 进一步减少左右边距 */
    }
}

@media (min-width: 1920px) {
    .service-3d .gallery-text-3d,
    .service-3d .gallery-text-scene,
    .service-3d .gallery-text-hard,
    .service-3d .gallery-text-level {
        padding: 40px 40px; /* 大屏幕下使用更小的边距 */
    }
    
    .service-3d .gallery-text-3d p,
    .service-3d .gallery-text-scene p,
    .service-3d .gallery-text-hard p,
    .service-3d .gallery-text-level p {
        font-size: 22px; /* 大屏幕下稍微增大字体 */
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .service-3d .gallery-grid-3d {
        grid-template-columns: 1fr; /* 移动端改为单列 */
        grid-template-rows: repeat(4, 1fr);
    }
    
    .service-3d .gallery-image-3d {
        height: 250px;
    }
    
    .service-3d .gallery-title-3d {
        font-size: 24px;
    }
    
    /* 移动端文字区域适配 */
    .service-3d .gallery-text-3d,
    .service-3d .gallery-text-scene,
    .service-3d .gallery-text-hard,
    .service-3d .gallery-text-level {
        padding: 20px 15px; /* 移动端使用更小的边距 */
        height: auto; /* 移动端高度自适应 */
    }
    
    .service-3d .gallery-text-3d p,
    .service-3d .gallery-text-scene p,
    .service-3d .gallery-text-hard p,
    .service-3d .gallery-text-level p {
        font-size: 16px; /* 移动端使用较小字体 */
    }
}

@media (max-width: 480px) {
    .service-3d .gallery-image-3d {
        height: 200px;
    }
    
    .service-3d .gallery-title-3d {
        font-size: 20px;
    }
}



@media (max-width: 480px) {
    .service-3d .art-image img {
        height: 180px;
    }

    .service-3d .art-title {
        font-size: 18px;
    }
}

/* 动画板块特定样式 */
.service-animation {
    background-color: #ffffff;
    padding-top: 0px;
}

/* 动画板块图片展示区域 - 使用与2D艺术相同的3x1布局 */
.service-animation .service-gallery {
    margin-top: 40px;
    width: 100vw; /* 使用视口宽度 */
    margin-left: calc(-50vw + 50%); /* 让容器从屏幕左边开始 */
}

.service-animation .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0; /* 图片紧挨着，无间距 */
    width: 100%;
    margin: 0;
}

/* 第三张图片占满第二行全宽 */
.service-animation .gallery-item:nth-child(3) {
    grid-column: 1 / -1; /* 占满整行 */
}

.service-animation .gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-animation .gallery-item:hover {
    z-index: 10;
}

.service-animation .gallery-image {
    position: relative;
    width: 100%;
    height: 480px; 
    overflow: hidden;
}

.service-animation .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-animation .gallery-item:hover .gallery-image img {
    transform: scale(1.1); 
}

.service-animation .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0); /* 透明背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* 常驻显示 */
    transition: all 0.3s ease;
}

.service-animation .gallery-item:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0);
}

.service-animation .gallery-title {
    color: white;
    font-size: 30px; /* 与2D艺术保持一致 */
    font-weight: 600;
    text-align: center;
    margin: 0;
    transform: translateY(0); /* 文字常驻显示，不位移 */
    transition: none; /* 文字保持固定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 添加文字阴影增强可读性 */
}

/* 动作捕捉和数据清理文案样式 */
.animation-description {
    max-width: 800px;
    margin-left: 40px;
    margin-top: -30px;
}

.animation-description p {
    font-size: 20px;
    line-height: 1.8;
    color: #5f5f5f;
    margin: 0;
    text-align: justify;
}

.gallery-description {
    max-width: 1000px;
    margin: 40px auto 0; 
    padding: 0 20px;
}

.gallery-description p {
    font-size: 20px;
    line-height: 1.8;
    color: #5f5f5f;
    margin: 0;
    text-align: left;
}

/* 美术全流程板块样式 */
.service-fullprocess {
    background-color: #ffffff;
    padding: 0 0 80px 0;
}

.service-fullprocess-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 0;
}

.fullprocess-image {
    flex: 0 0 50%; 
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 
}

.fullprocess-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.fullprocess-image:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.fullprocess-image:hover .image-overlay {
    background: rgba(0, 0, 0, 0.05);
}

.fullprocess-content {
    flex: 1;
    padding-left: 20px;
}

.fullprocess-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 24px 0;
    line-height: 1.3;
    padding-bottom: 10px;
    position: relative;
}

.fullprocess-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 1px;
    background-color: #cccccc;
}   


.fullprocess-description {
    font-size: 18px;
    line-height: 1.8;
    color: #5f5f5f;
    margin: 0;
    text-align: justify;
}
@media screen and (max-width: 1280px) {
    .steps { width: 100%;margin: 0 auto; }
    .step .vstep { left:78px; }
    .step:nth-child(2) .vstep ,.step:nth-child(4) .vstep {
        top: -46px;
        left: 78px;
    }

    
}
@media (max-width: 1024px) {
    .steps { width: 100%;margin: 0 auto; }
    .timeline:before { left: 80px; right: 40px;width: 80%; }
    .node { width: 72px; height: 72px; }
    .node .inner { width: 48px; height: 48px; }
    .meta { margin-top: 180px;padding-left: 100px }
    .step .vstep { left: 64px; }
    .step:nth-child(2) .vstep ,.step:nth-child(4) .vstep {
        top: -44px;
        left: 64pX;
    }
}
@media (max-width: 720px) {
    .steps { grid-template-columns: 1fr; gap: 36px; }
    .timeline:before { display: none; }
    .step .vline { display: none; }
    .node { position: relative; top: 0; transform: translate(-50%, 0); margin: 0 auto; }
    .step .vstep { position: static; transform: none; text-align: center; display: block; margin-bottom: 8px; }
    .meta { margin-top: 18px; padding-left: 0; }
    
    /* 移动端多语言文本优化 */
    .meta .role {
        font-size: 18px;
        text-align: center;
        margin-bottom: 6px;
    }
    .meta .desc {
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }
}

/* 质检全流程多语言文本适配优化 */
.timeline .meta .role[lang="en"] {
    font-size: 18px; /* 英文文本稍小，保持布局一致 */
    line-height: 1.2;
}

.timeline .meta .desc[lang="en"] {
    font-size: 14px;
    line-height: 1.5;
}
.timeline .meta[lang="en"] { padding-left: 104px; }

.timeline .meta .role[lang="ja"],
.timeline .meta .role[lang="ko"] {
    font-size: 19px; /* 日文韩文与中文相近 */
    line-height: 1.3;
}

.timeline .meta .desc[lang="ja"],
.timeline .meta .desc[lang="ko"] {
    font-size: 15px;
    line-height: 1.6;
}

/* 确保多语言文本不会破坏布局 */
.step .meta {
    min-height: 80px; /* 为多语言文本预留足够高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 动画板块移动端适配 */
@media (max-width: 768px) {
    .service-animation .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2px;
        width: 100%;
    }
    
    .service-animation .gallery-image {
        height: 180px; 
    }
    
    .service-animation .gallery-title {
        font-size: 20px;
    }
    
    .animation-description p {
        font-size: 15px;
        line-height: 1.7;
    }
    
    .gallery-description p {
        font-size: 15px;
        line-height: 1.7;
    }
    
    /* 美术全流程移动端适配 */
    .service-fullprocess-layout {
        flex-direction: column;
        gap: 30px;
    }
    
    .fullprocess-image {
        flex: none;
        width: 100%;
    }
    
    .fullprocess-content {
        padding-left: 0;
    }
    
    .fullprocess-title {
        font-size: 24px;
    }
    
    .fullprocess-description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .service-animation .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: 4px;
        width: 100%;
    }
    
    .service-animation .gallery-image {
        height: 150px; 
    }
    
    .service-animation .gallery-title {
        font-size: 18px;
    }
    
    .animation-description p {
        font-size: 14px;
    }
    
    .gallery-description p {
        font-size: 14px;
    }
    
    /* 美术全流程480px移动端适配 */
    .fullprocess-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .fullprocess-description {
        font-size: 14px;
        line-height: 1.6;
    }
}