/* ==========================================================================
       触屏点击时的「蓝色高亮块 / 焦点框」统一屏蔽（全断点生效，不放在 @media 内）
       --------------------------------------------------------------------------
       现象：Chrome DevTools 手机模式（以及真机 Android Chrome / 部分 WebView）点击
             quick-item、导航项、按钮、卡片时，元素上会闪出一个蓝色半透明矩形。
       成因：这是浏览器默认的 -webkit-tap-highlight-color，本站样式并没有画它；
             长按或拖动时还会额外触发文本选中（::selection）的蓝底和图片拖拽残影。
       修法：全局把 tap-highlight 置为透明；再对「纯交互」元素关掉文本选中与拖拽。
       注意：user-select: none 只加在交互元素上，正文 / 物流单号 / 电话仍可正常复制。
       ========================================================================== */
    html { -webkit-tap-highlight-color: transparent; }
    *, *::before, *::after { -webkit-tap-highlight-color: transparent; }

    /* 交互元素：点击/聚焦都不显示系统焦点框 */
    a, button, input, select, textarea, summary,
    [role="button"], [tabindex],
    .quick-item, .service-card, .swiper-slide,
    .swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet {
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    /* 图标 / 卡片类交互元素：禁止选中与拖拽，避免长按拖出蓝色选择块。
       输入框、正文段落不在此列，保持可选中可复制。 */
    .quick-item, .quick-item *,
    button, button *, [role="button"],
    .service-card, .swiper-slide,
    .swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;   /* 长按不弹系统菜单 */
    }

    /* 图片默认不可拖拽——拖拽过程中同样会出现蓝色选中残影 */
    img { -webkit-user-drag: none; }
    
/* 促进 logo-wall 及其轨道开启 GPU 硬件加速，防止在屏幕缩放/拖动时由于渲染队列不一致导致内容区域偶发性变白/空白的 Bug */
    .logo-wall {
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    .logo-track {
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* ==========================================================================
       滚动 Logo 墙 · 数量自适应
       --------------------------------------------------------------------------
       不再写死「两份拷贝 + translateX(-50%)」。运行时由 initLogoWall() 写入两个变量：
         --count   单份的 logo 个数
         --copies  拷贝份数（按 容器宽 / 单份宽 反推，保证任意数量都无缝）
       位移恒等于「一份」的宽度 = -100% / --copies
       时长 = --count × --pace，所以速度不随 logo 数量变化
       --pace 为「单个 logo 走完自己一格的秒数」，各断点按 pitch 定义
       ========================================================================== */
    .logo-track {
        --pace: 4.44s;                 /* 178px 步距 ÷ 40px/s ≈ 4.44s */
    }
    /* 用 .is-ready 做闸门：JS 把 --count / --copies 写好之后才开始动，
       否则首帧会拿默认值跑一下，出现一瞬间的错位 */
    .logo-wall.is-ready .logo-track {
        animation: logoScroll calc(var(--count, 9) * var(--pace)) linear infinite;
    }
    .logo-wall.is-ready .logo-track--right { animation-direction: reverse; }  /* 反向播放即向右滚 */

    @keyframes logoScroll {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-100% / var(--copies, 2))); }
    }

    /* 数量过少时不滚动，居中静态展示（由 JS 加 is-static） */
    .logo-track.is-static {
        animation: none !important;
        width: 100% !important;
        justify-content: center;
    }
    /* JS 未就绪（或被禁用）时只显示第一行的原始 logo，避免第二行空占高度 */
    .logo-wall:not(.is-ready) .logo-row + .logo-row { display: none; }
    /* 降级为静态展示时（logo 数 < 3，或 ≤839px 断点）同样收成一行 */
    .logo-wall.is-single-row .logo-row + .logo-row { display: none; }
    /* 单行静态时不需要行间距 */
    .logo-wall.is-single-row .logo-row { padding-bottom: 0; }

    /* ==========================================================================
       「每一次选择皆因信任」卡片 · 这里原来给 .swiper-card 和 .card-body 都加了
       backdrop-filter: blur(5px) saturate(100%)，现已删除。原因见下：

       1) .swiper-card 的 background 是不透明的 #fff，backdrop-filter 在它身上
          视觉上完全空转（背后没有任何东西能透上来），只白费一个渲染面。

       2) .card-body 上的那条是「左右各漏出 1px 照片」的根因。实测截图逐像素反推：
          卡片宽度落在小数像素上，边缘那一列只有约 50% 覆盖率；这一列里被合成进去的是
          「照片 + 卡片白底」，而 .card-body 的白渐变**完全没有参与**——
          例如文字块顶部那一行，边缘列 (129,174,211) ≈ 0.5×照片 + 0.5×页面底色，
          而同一行的内部是 (221,233,244)。
          原因是 backdrop-filter 会把 .card-body 提成独立的合成层，
          而这个层的边界（以及父级 .swiper-card 的 overflow/contain 裁切）都会
          **向内取整到整设备像素**，于是它就填不进卡片那条小数抗锯齿列，
          底下的照片从这 1px 里露了出来。
          （所以之前只把 .card-body 左右外扩 1px 是无效的：限制它的是父级那条
          取整后的裁切矩形，不是元素自己的盒子。必须先取消提层。）

       视觉代价很小：文字块背后的照片本来就被 .scale-img img 的 mask 渐隐掉了，
       反推出来只有文字块最顶上约 30px 能看到 18% 左右的照片，
       blur 与不 blur 的差别只有「那一点点照片是软的还是清晰的」。
       如果以后一定要把毛玻璃找回来，别再直接写在 .card-body 上——
       要么把白渐变挪到 .card-body::before（inset: 0 -1px、z-index:-1，
       同时给 .card-body 加 isolation: isolate 免得伪元素掉到照片下面），
       要么把 blur 放在一个左右各内缩 1px 的伪元素上。
       ========================================================================== */
/* Desktop override to keep Swiper elements styled as static grid on screens > 1024px */

/* 1920px样式 */
@media (min-width: 1920px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }
        body { width: 100%; min-width: 0;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 1440px; margin: 0 auto; }
        .container-responsive .block-title{
            margin-bottom: 68px;
        }
        .container-1680 { width: 1680px; margin: 0 auto; }

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: 645px;
            overflow: hidden;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }

        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 60px;
            padding: 0 24px;
            z-index: 2;
        }
        .announce-inner {
            width: 1440px;
            margin: 0 auto;
            display: flex;
        }
        .announce-icon {
            width: 48px; height: 48px;
            /* 红色圆底已经画在 notice.png 里了，不要再叠 border-radius / box-shadow，
               否则会在图外围多出一圈红色光晕 */
            background: url(/assets/image/notice-icon.png);
            background-size: 100% 100%;
        }
        .announce-item dt {
            font-size: 18px; font-weight: 500; line-height: 24px;
            color: #fff;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .announce-item dd {
            margin-top: 2px;
            font-size: 14px; line-height: 18px;
            color: #FFFFFF;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .pagination {
            display: inline-flex; align-items: center; gap: 6px;
        }
        .pagination i {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px; height: 8px; border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -40px;
            padding: 0 24px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar { width: 100%; max-width: 1440px;
            margin: 0 auto;
            border-radius: 38px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px) saturate(100%);
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.15);
            padding: 16px;
            display: flex;
            align-items: center;
        }
        .yundan-search {
            position: relative;
            flex: 0 1 565px;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            flex: 1 0 auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .quick-item {
            display: flex; align-items: center;
            padding: 6px 18px;
            border-radius: 30px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; margin-right: 16px; }
        .quick-item span { font-size: 18px; color: #222222; white-space: nowrap;line-height: 24px; }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 120px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: #222;
            margin-bottom: 80px;
            line-height: 42px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 120px 0; }
        .service-list {
            display: flex;
            gap: 20px;
            justify-content: space-between;
        }
        .service-swiper > .service-list.swiper-wrapper {
            gap: 20px !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide {
            width: 276px !important;
            flex: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.active {
            width: 552px !important;
            flex: none !important;
        }
        .service-card {
            position: relative;
            width: 276px;
            height: 430px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            background-size: cover;
            background-position: center;
            transition: width .5s cubic-bezier(0.32,0.72,0.16,1);
        }
        .service-card.active {
            width: 552px;
            box-shadow: 0 16px 24px -14px rgba(41,0,5,0.28);
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 276px; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 32px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;
        }
        .service-card.active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 32px; left: 32px; bottom: 32px;
            width: 488px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            padding: 0 24px;
            background: #fff;
            color: var(--primary);
            border-radius: 24px;
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom {
            margin-top: auto;
        }
        .service-card .desc {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 120px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        /* 内容压在装饰之上 */
        .block-steps .container-responsive { position: relative; z-index: 2; }
        .step-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 288px;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 288px;
            height: 240px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(41,0,5,0.05);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
        }
        .step-card ul li {
            font-family: San Francisco Text;
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: normal;
            color: #999999;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #999999;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 84px;
            flex-shrink: 0;
        }
        .step-arrow img { width: 100%; height: 100%; display: block; }
        .step-more {
            text-align: center;
            margin-top: 80px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 40px;
            line-height: 48px;
            background: #fff;
            border-radius: 24px;
            color: var(--primary);
            font-size: 16px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover {
            background: var(--primary);
            color: #fff;
        }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages {
            padding: 120px 0;
            background: #fff;
        }
        .block-advantages .block-title {
            margin-bottom: 80px;
        }
        .advantage-desc {
            font-family: "San Francisco Text", "PingFang SC", sans-serif;
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: normal;
            color: #999999;
            text-align: center;
            margin-bottom: 24px;
        }
        .advantage-wrap {
            display: flex;
            gap: 40px;
        }
        .advantage-left {
            width: 211px;
            background: #FFF9F9;
            border-radius: 16px;
            padding: 24px 0;
            flex-shrink: 0;
        }
        .advantage-tab {
            display: flex;
            align-items: center;
            padding: 20px 24px;
            margin-bottom: 24px;
            cursor: pointer;
            position: relative;
            transition: background .3s;
        }
        .advantage-tab:last-child { margin-bottom: 0; }
        .advantage-tab.active {
            background: linear-gradient(270deg, #ffffff00 0%, #ffffff80 50%, #ffffff 100%);
        }
        .advantage-tab::after {
            content: '';
            position: absolute;
            left: 0; top: 50%;
            /* 宽度固定 3px，靠 scaleY 从中间纵向展开。
               原来是 width 0→3px 做过渡：3px 只有 4 个整数像素档位，
               浏览器会把中间值吸附到整像素，看起来就是「先出一根细线、再突然变粗」的台阶感；
               而且宽度小于 4px 时 border-radius 会把方块啃成椭圆。
               transform 走合成层、不吸附整像素，36.6px 的行程足够走出平滑补间。 */
            width: 3px; height: 36.6px;
            transform: translateY(-50%) scaleY(0);
            transform-origin: center;
            background: var(--primary);
            border-radius: 2px;
            transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        }
        .advantage-tab.active::after { transform: translateY(-50%) scaleY(1); }
        .advantage-tab img {
            width: 32px; height: 32px;
            margin-right: 16px;
        }
        .advantage-tab span {
            font-size: 16px;
            color: #222;
        }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            max-width: 100%;
            max-height: 520px;
        }

        /* ===================== CASES（直接对照原 leyifan-home.css 复刻） ===================== */
        .block-cases {
            padding: 120px 0px 80px 0px;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .block-cases .block-title {
            margin-bottom: 100px;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 15%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 40px;
            cursor: grab;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper {
            align-items: center;
        }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: 536px;
            height: 536px;
            box-sizing: border-box;
        }
        .swiper-cases .scale-img {
            height: 100%;
        }
        .swiper-cases .scale-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0,0,0,0.3) calc(100% - 50px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0,0,0,0.3) calc(100% - 50px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.82) 0%,
                rgba(255, 255, 255, 0.92) 40%,
                rgba(255, 255, 255, 0.98) 75%,
                rgba(255, 255, 255, 1) 100%
            );
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 20px 20px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar {
            width: 32px;
            height: 32px;
            margin-right: 12px;
        }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            color: #222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name {
            font-size: 24px;
            line-height: 24px;
        }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #222222;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text {
            font-size: 16px;
            line-height: 24px;
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 120px 0px 120px 0px;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 80px; }
        .logo-wall {
            width: 1440px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            padding: 10px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        }
        .logo-wall::before,
        .logo-wall::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .logo-wall::before {
            left: 0;
            background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-wall::after {
            right: 0;
            background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-row {
            padding-bottom: 24px;
        }
        .logo-row:last-child {
            padding-bottom: 8px;
        }
        .logo-track {
            display: flex;
            width: max-content;
            padding: 6px 0;
            margin: -6px 0;
        }
        .logo-track .logo-item {
            margin-right: 24px;
            flex-shrink: 0;
        }
        /* 滚动动画已统一到文件顶部：@keyframes logoScroll
           位移 = -100% / var(--copies)，时长 = var(--count) * var(--pace)
           两个变量由页面底部的 initLogoWall() 在运行时写入 */
        .logo-item {
            width: 154px;
            height: 70px;
            border-radius: 12px;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 0px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }
        .logo-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

}

/* 1440px样式 */
@media (min-width: 1440px) and (max-width: 1919px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        /* 1440px 容器：填满 1440 视口，两端无多余空白 */
        .container-responsive { width: 100%; max-width: 1440px; margin: 0 auto; }
        .container-responsive .block-title{
            margin-bottom: 72px;
        }

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: 645px;
            overflow: hidden;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 60px;
            padding: 0 24px;
            z-index: 2;
        }
        .announce-inner {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            display: flex;
        }
        .announce-icon {
            width: 48px; height: 48px;
            /* 红色圆底已经画在 notice.png 里了，不要再叠 border-radius / box-shadow，
               否则会在图外围多出一圈红色光晕 */
            background: url(/assets/image/notice-icon.png);
            background-size: 100% 100%;
        }
        .announce-item dt {
            font-size: 18px; font-weight: 500; line-height: 24px;
            color: #fff;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .announce-item dd {
            margin-top: 2px;
            font-size: 14px; line-height: 18px;
            color: #FFFFFF;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .pagination {
            display: inline-flex; align-items: center; gap: 6px;
        }
        .pagination i {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px; height: 8px; border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -40px;
            padding: 0 24px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            border-radius: 38px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px) saturate(100%);
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.15);
            padding: 16px;
            display: flex;
            align-items: center;
        }
        .yundan-search {
            position: relative;
            flex: 0 1 565px;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            line-height: 22px;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            flex: 1 0 auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .quick-item {
            display: flex; align-items: center;
            padding: 6px 16px;
            border-radius: 30px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; margin-right: 16px; }
        .quick-item span { font-size: 18px; color: #222222; white-space: nowrap; line-height: 24px; }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 100px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            line-height: 42px;
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 80px;
            letter-spacing: normal;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 120px 0; }
        .service-list {
            display: flex;
            justify-content: space-between;
        }
        .service-swiper > .service-list.swiper-wrapper {
            gap: 0 !important;
            justify-content: space-between !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide {
            width: 260px !important;
            flex: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.active {
            width: 552px !important;
            flex: none !important;
        }
        .service-card {
            position: relative;
            width: 260px;
            height: 430px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: width .5s cubic-bezier(0.32,0.72,0.16,1);
        }
        .service-card.active {
            width: 552px;
            box-shadow: 0 16px 24px -14px rgba(41,0,5,0.28);
        }
        /* 3×214 + 540 + 3×16 = 642 + 540 + 48 = 1230... 
           实际 container 内宽 = 1440 - 48 = 1392
           剩余 space-between 分配: 1392 - 1230 = 162px / 3 gaps extra, OK with justify-content: space-between */
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 260px; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 32px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;
        }
        .service-card.active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 28px; left: 28px; bottom: 28px;
            width: 480px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 24px;
            font-size: 18px;
            line-height: 24px;
            font-weight: 500;
            width:144px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 120px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .container-responsive {
            padding: 0 40px;
            /* 压在装饰之上：伪元素是定位元素，不加这条会盖住 h2.block-title */
            position: relative;
            z-index: 2;
        }
        .step-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 32px;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            flex: 1;
            width: 268px;
            padding-top: 52px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 104px;
            height: 104px;
            z-index: 2;
        }
        .step-icon img {
            width: 104px;
            height: 104px;
            display: block;
        }
        .step-card {
            width: 100%;
            height: 240px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(41,0,5,0.05);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul { list-style: none; padding: 0; }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 3px; height: 3px;
            border-radius: 50%;
            background: #999999;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 78px;
            flex-shrink: 0;
        }
        .step-arrow img { width: 100%; height: 100%; display: block; }
        .step-more {
            text-align: center;
            margin-top: 64px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 32px;
            line-height: 44px;
            background: #fff;
            border-radius: 22px;
            color: var(--primary);
            font-size: 15px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 120px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 80px; }
        .advantage-desc {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 24px;
        }
        .advantage-wrap { display: flex; gap: 48px; }
        .advantage-left {
            width: 211px;
            background: #FFF9F9;
            border-radius: 12px;
            padding: 24px 0;
            flex-shrink: 0;
        }
        .advantage-tab {
            display: flex;
            align-items: center;
            padding: 20px 24px 20px 27px;
            margin-bottom: 24px;
            cursor: pointer;
            position: relative;
            transition: background .3s;
        }
        .advantage-tab:last-child { margin-bottom: 0; }
        .advantage-tab.active {
            background: linear-gradient(270deg, #ffffff00 0%, #ffffff80 50%, #ffffff 100%);
        }
        .advantage-tab::after {
            content: '';
            position: absolute;
            left: 0; top: 50%;
            /* 同 1920 断点：宽度固定，改用 scaleY 纵向展开，避免 3px 宽度过渡的整像素台阶 */
            width: 3px; height: 36.6px;
            transform: translateY(-50%) scaleY(0);
            transform-origin: center;
            background: var(--primary);
            border-radius: 3px;
            transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        }
        .advantage-tab.active::after { transform: translateY(-50%) scaleY(1); }
        .advantage-tab img { width: 32px; height: 32px; margin-right: 16px; }
        .advantage-tab span { font-size: 15px; color: #222;line-height: 22px; }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img { max-width: 100%; max-height: 480px; }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 120px 0px 80px 0px;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .block-cases .block-title { margin-bottom: 98.13px; }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 12%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 40px;
            cursor: grab;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: 536px;
            height: 536px;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 20px 20px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar {
            width: 32px; height: 32px;
            margin-right: 12px;
        }
        .swiper-cases .case-name {
            font-size: 20px; font-weight: 500; line-height: 20px; color: #222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #222222;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { font-size: 16px;line-height: 24px; }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 120px 0px 120px 0px;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 80px; }
        .logo-wall {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            padding: 10px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        }
        .logo-wall::before,
        .logo-wall::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .logo-wall::before {
            left: 0;
            background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-wall::after {
            right: 0;
            background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-row {
            padding-bottom: 24px;
        }
        .logo-row:last-child {
            padding-bottom: 8px;
        }
        .logo-track {
            display: flex;
            width: max-content;
            padding: 6px 0;
            margin: -6px 0;
        }
        .logo-track .logo-item {
            margin-right: 24px;
            flex-shrink: 0;
        }
        /* 滚动动画已统一到文件顶部：@keyframes logoScroll
           位移 = -100% / var(--copies)，时长 = var(--count) * var(--pace)
           两个变量由页面底部的 initLogoWall() 在运行时写入 */
        .logo-item {
            width: 154px;
            height: 70px;
            border-radius: 12px;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 0px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }
        .logo-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        
}

/* 1280px样式 */
@media (min-width: 1280px) and (max-width: 1439px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        /* 1280px 容器：填满 1280 视口，两端无多余空白 */
        .container-responsive { width: 100%; margin: 0 auto; padding: 0 24px; }

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: 44.79vw;
            overflow: hidden;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 62px;
            padding: 0 24px;
            z-index: 2;
        }
        .announce-inner {
            width: 100%;
            margin: 0 auto;
            display: flex;
        }
        .announce-icon {
            width: 48px; height: 48px;
            /* 红色圆底已经画在 notice.png 里了，不要再叠 border-radius / box-shadow，
               否则会在图外围多出一圈红色光晕 */
            background: url(/assets/image/notice-icon.png);
            background-size: 100% 100%;
        }
        .announce-item dt {
            font-size: 18px; font-weight: 500; line-height: 24px;
            color: #fff;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .announce-item dd {
            margin-top: 2px;
            font-size: 14px; line-height: 18px;
            color: #FFFFFF;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .pagination {
            display: inline-flex; align-items: center; gap: 6px;
        }
        .pagination i {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px; height: 8px; border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -40px;
            padding: 0 24px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar { width: 100%; max-width: 1392px; margin: 0 auto;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 300px;
            padding: 16px;
            display: flex;
            align-items: center;
        }
        .yundan-search {
            position: relative;
            flex: 0 1 565px;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px; 
            line-height: 22px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            flex: 1 0 auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .quick-item {
            display: flex; align-items: center;
            padding: 6px 12px;
            border-radius: 30px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; margin-right: 16px; }
        .quick-item span { font-size: 18px; color: #222222; white-space: nowrap;line-height: 24px; }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 80px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 80px;
            line-height: 42px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 120px 0; }
        .service-list {
            display: flex;
            justify-content: space-between;
        }
        /* container-1280 with padding: 0 24px → inner = 1392px
           3 × 222 + 444 + 3 × 16 = 666 + 444 + 48 = 1158... not matching
           Let me recalculate: we want 4 cards (3 normal + 1 active) + 3 gaps to fill 1392px
           active = 2 × normal (ratio from 1920: 552/276 = 2)
           3n + 2n + 3×16 = 1392 → 5n = 1392 - 48 = 1344 → n = 268.8 ≈ 268
           active = 2 × 268 = 536 -- keep same active width, normal = 268 */
        .service-card {
            position: relative;
            width: 240px;
            height: 430px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: width .5s cubic-bezier(0.32,0.72,0.16,1);
        }
        .service-card.active {
            width: 452px;
            box-shadow: 0 16px 24px -14px rgba(41,0,5,0.28);
        }
        /* 3×214 + 540 + 3×16 = 642 + 540 + 48 = 1230... 
           实际 container 内宽 = 1280 - 48 = 1392
           剩余 space-between 分配: 1392 - 1230 = 162px / 3 gaps extra, OK with justify-content: space-between */
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 240px; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 32px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 22px; font-weight: 600; color: #fff;
        }
        .service-card.active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: 416px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 24px;
            font-size: 18px;
            font-weight: 500;
            width: 140px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 16px;
            line-height: 22px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #fff;
            font-size: 14px;
        }
        .service-card .more img { width: 12px; height: 12px; }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 120px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .container-responsive {
            /* 压在装饰之上，否则伪元素会盖住 h2.block-title */
            position: relative;
            z-index: 2;
        }
        .step-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 32px;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            flex: 1;
            width: 228px;
            padding-top: 48px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 92px;
            height: 92px;
            z-index: 2;
        }
        .step-icon img {
            width: 92px;
            height: 92px;
            display: block;
        }
        .step-card {
            width: 100%;
            height: 240px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 16px rgba(41,0,5,0.05);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            line-height: 26px;
            letter-spacing: normal;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul { list-style: none; padding: 0; }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: normal;
            color: #999999;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 3px; height: 3px;
            border-radius: 50%;
            background: #999999;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 68px;
            flex-shrink: 0;
        }
        .step-arrow img { width: 100%; height: 100%; display: block; }
        .step-more {
            text-align: center;
            margin-top: 48px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 28px;
            line-height: 40px;
            background: #fff;
            border-radius: 20px;
            color: var(--primary);
            font-size: 14px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 120px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 80px; }
        /* 1280：横向 tab 布局 */
        .advantage-tabs-row {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 32px;
        }
        .advantage-desc {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 32px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        /* 隐藏旧左栏 */
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 227.2px;
            height: 64px;
            border-radius: 50px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: rgba(247, 64, 84, 0.1);
        }
        .advantage-tab img { width: 32px; height: 32px; margin-right: 0; }
        /* 非激活状态隐藏图标 */
        .advantage-tab:not(.active) img { display: none; }
        .advantage-tab span { font-size: 16px; color: #222222; line-height: 22px; white-space: nowrap; }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img { width: 1232px; }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 120px 0px 60px 0px;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 12%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px;
            cursor: grab;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: 536px;
            height: 536px;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0,0,0,0.3) calc(100% - 40px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.05);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 20px 20px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 32px; height: 32px; margin-right: 12px; }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px;line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #222222;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { font-size: 16px;line-height: 24px;}

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 120px 0px 120px 0px;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 80px; }
        .logo-wall {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            padding: 10px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        }
        .logo-wall::before,
        .logo-wall::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .logo-wall::before {
            left: 0;
            background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-wall::after {
            right: 0;
            background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-row {
            padding-bottom: 24px;
        }
        .logo-row:last-child {
            padding-bottom: 8px;
        }
        .logo-track {
            display: flex;
            width: max-content;
            padding: 6px 0;
            margin: -6px 0;
        }
        .logo-track .logo-item {
            margin-right: 24px;
            flex-shrink: 0;
        }
        /* 滚动动画已统一到文件顶部：@keyframes logoScroll
           位移 = -100% / var(--copies)，时长 = var(--count) * var(--pace)
           两个变量由页面底部的 initLogoWall() 在运行时写入 */
        .logo-item {
            width: 154px;
            height: 70px;
            border-radius: 12px;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 0px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }
        .logo-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* service card overrides for 1280px viewport */
        .block-services .container-responsive {
            max-width: 1440px !important;
        }
        .service-swiper > .service-list.swiper-wrapper {
            gap: 20px !important;
            justify-content: flex-start !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide {
            width: calc(12.5vw + 80px) !important;
            flex: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.active {
            width: calc(62.5vw - 348px) !important;
            flex: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .compact {
            width: 100% !important;
        }
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .expand {
            left: calc(2.5vw - 8px) !important;
            top: calc(2.5vw - 8px) !important;
            bottom: calc(2.5vw - 8px) !important;
            width: calc(40vw - 96px) !important;
        }

        /* step card overrides for 1280px viewport */
        .block-steps .container-responsive {
            max-width: 1440px !important;
            padding: 0 40px !important;
        }
        .block-steps .step-item {
            flex: none !important;
            width: calc(25vw - 92px) !important;
        }
        .block-steps .step-card {
            width: 100% !important;
            height: 240px !important;
            padding: 68px 32px 32px !important;
        }


}

/* 1024px 样式 */
@media (min-width: 1024px) and (max-width: 1279px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 24px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: 408px;
            overflow: hidden;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 60px;
            padding: 0 28px;
            z-index: 2;
        }
        .announce-inner {
            width: 100%;
            margin: 0 auto;
            display: flex;
        }
        .announce-icon {
            width: 48px; height: 48px;
            /* 红色圆底已经画在 notice.png 里了，不要再叠 border-radius / box-shadow，
               否则会在图外围多出一圈红色光晕 */
            background: url(/assets/image/notice-icon.png);
            background-size: 100% 100%;
        }
        .announce-item dt {
            font-size: 18px; font-weight: 500; line-height: 24px;
            color: #fff;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .announce-item dd {
            margin-top: 2px;
            font-size: 14px; line-height: 18px;
            color: #FFFFFF;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .pagination {
            display: inline-flex; align-items: center; gap: 5px;
        }
        .pagination i {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px; height: 8px; border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -36px;
            padding: 0 24px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 16px 16px 20px 16px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 16px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; }
        .quick-item span {
            font-size: 18px;
            color: #222222;
            line-height: 24px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 80px;
            line-height: 42px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 120px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: 452px;
            height: 430px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 24px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: calc(100% - 48px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 18px;
            font-weight: 500;
            width: 144px;
            line-height: 24px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 1024px - 1279px 分辨率下，图片和图片间距 20px，两边距离固定 24px，宽度自适应 calc(50% - 10px)，高度 430px */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) {
            display: flex !important;
            justify-content: center !important;
            gap: 20px !important;
            width: 100% !important;
            padding: 0 24px !important;
            box-sizing: border-box !important;
            transform: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: calc(50% - 10px) !important;
            height: 430px !important;
            flex: none !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 32px !important;
            right: 32px !important;
            top: 32px !important;
            bottom: 32px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 120px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .step-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: calc(100% - 96px);
            width: 896px;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100%;
            min-height: 158px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            white-space: normal;
            flex: 1 1 0%;
            min-width: 0;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 6px;
            margin-top: 9px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg);
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 120px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 80px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 24px;
        }
        .advantage-desc {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 24px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 64px;
            border-radius: 50px;
            cursor: pointer;
            background: #F5F5F5;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 32px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: rgba(247, 64, 84, 0.1);
        }
        .advantage-tab img { width: 32px; height: 32px; margin-right: 0; }
        .advantage-tab:not(.active) img { display: none; }
        .advantage-tab span { font-family: San Francisco Text;
font-size: 16px;
font-weight: normal;
line-height: 22px;
letter-spacing: normal;
color: #222222; }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 120px 0 60px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px;
            cursor: grab;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: 536px;
            height: 536px;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 32px; height: 32px;margin-right: 12px; }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #222222;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { font-size: 16px;line-height: 24px; }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 120px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 80px; }
        .logo-wall {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            padding: 10px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        }
        .logo-wall::before,
        .logo-wall::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .logo-wall::before {
            left: 0;
            background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-wall::after {
            right: 0;
            background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-row {
            padding-bottom: 24px;
        }
        .logo-row:last-child {
            padding-bottom: 8px;
        }
        .logo-track {
            display: flex;
            width: max-content;
            padding: 6px 0;
            margin: -6px 0;
        }
        .logo-track .logo-item {
            margin-right: 24px;
            flex-shrink: 0;
        }
        /* 滚动动画已统一到文件顶部：@keyframes logoScroll
           位移 = -100% / var(--copies)，时长 = var(--count) * var(--pace)
           两个变量由页面底部的 initLogoWall() 在运行时写入 */
        .logo-item {
            width: 154px;
            height: 70px;
            border-radius: 12px;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 0px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }
        .logo-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* 1024px to 1280px fluid scaling overrides */
        .container-responsive {
            max-width: 1280px !important;
        }
        .banner {
            height: calc(44.922vw - 2px) !important;
        }
        .block-steps .container-responsive {
            padding: 0 64px !important;
        }
        .block-steps .step-item {
            width: 100% !important;
            max-width: 1152px !important;
        }
        .block-steps .container-responsive .block-title{
            margin-bottom: 68px !important;
        }
        .advantage-tabs-row {
            width: calc(100% + 48px) !important;
            margin-left: -24px !important;
            margin-right: -24px !important;
            padding: 0 24px !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            justify-content: flex-start !important;
            gap: 24px !important;
            scrollbar-width: none;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none !important;
        }
        .advantage-tab {
            flex: 1 0 auto !important;
            height: 64px !important;
            padding: 0 32px !important;
            box-sizing: border-box !important;
        }
        .advantage-tab span {
            white-space: nowrap !important;
        }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        @media (min-width: 1025px) {
            /* header desktop menu overrides for 1024px-1280px range */
            .header .logo {
                margin-right: 32px !important;
            }
            .header .main-menu {
                display: flex !important;
                gap: 32px !important;
            }
            .header .main-menu > li > a {
                padding: 0 !important;
                font-size: 16px !important;
            }
            .header .header-actions {
                margin-left: auto !important;
            }
            .header .nav-toggle {
                display: none !important;
            }

        }

}

/* 840px 样式 */
@media (min-width: 840px) and (max-width: 1023px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; margin: 0 auto; padding: 0 24px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: calc(44.809vw - 0.4px);
            overflow: hidden;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 60px;
            padding: 0 28px;
            z-index: 2;
        }
        .announce-inner {
            width: 100%;
            margin: 0 auto;
            display: flex;
        }
        .announce-icon {
            width: 48px; height: 48px;
            /* 红色圆底已经画在 notice.png 里了，不要再叠 border-radius / box-shadow，
               否则会在图外围多出一圈红色光晕 */
            background: url(/assets/image/notice-icon.png);
            background-size: 100% 100%;
        }
        .announce-item dt {
            font-size: 18px; font-weight: 500; line-height: 24px;
            color: #fff;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .announce-item dd {
            margin-top: 2px;
            font-size: 14px; line-height: 18px;
            color: #FFFFFF;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .pagination {
            display: inline-flex; align-items: center; gap: 5px;
        }
        .pagination i {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px; height: 8px; border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -36px;
            padding: 0 24px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 16px 16px 20px 16px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 16px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; }
        .quick-item span {
            font-size: 18px;
            color: #222222;
            line-height: 24px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 64px;
            line-height: 42px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 100px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: 452px;
            height: 430px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 24px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: calc(100% - 48px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 18px;
            font-weight: 500;
            width: 144px;
            line-height: 24px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 840px - 1023px 分辨率下，图片和图片间距 20px，两边距离固定 24px，宽度自适应 calc(50% - 10px)，高度 430px */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) {
            display: flex !important;
            justify-content: center !important;
            gap: 20px !important;
            width: 100% !important;
            padding: 0 24px !important;
            box-sizing: border-box !important;
            transform: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: calc(50% - 10px) !important;
            height: 430px !important;
            flex: none !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 32px !important;
            right: 32px !important;
            top: 32px !important;
            bottom: 32px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 100px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .container-responsive .block-title{
            margin-bottom: 52px !important;
        }
        .block-steps .container-responsive {
            padding: 0 24px !important;
            max-width: 944px !important;
            margin: 0 auto !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .step-list {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 0 !important;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 100% !important;
            max-width: 896px !important;
            padding-top: 56px !important;
            box-sizing: border-box !important;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100% !important;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            white-space: normal;
            flex: 1 1 0%;
            min-width: 0;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 6px;
            margin-top: 9px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px !important;
            margin-bottom: 12px !important;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg) !important;
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 100px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 64px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: flex-start;
            gap: 24px;
            margin: 0 -24px 24px -24px;
            padding: 0 24px;
            width: calc(100% + 48px);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none;
        }
        .advantage-desc {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 32px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 64px;
            border-radius: 50px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 32px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: rgba(247, 64, 84, 0.1);
        }
        .advantage-tab img { width: 32px; height: 32px; margin-right: 0; flex-shrink: 0; }
        .advantage-tab:not(.active) img { display: none; }
        .advantage-tab span { font-family: San Francisco Text;
font-size: 16px;
font-weight: normal;
line-height: 22px;
letter-spacing: normal;
color: #222222; }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 100px 0 40px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px 0;
            cursor: grab;
            overflow: hidden;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: calc(17.486vw + 357.1px) !important;
            height: 536px !important;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 32px; height: 32px;margin-right: 12px; }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #222222;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { 
            font-size: 16px;
            line-height: 24px; 
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 100px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 64px; }
        .logo-wall {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            padding: 10px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
        }
        .logo-wall::before,
        .logo-wall::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 80px;
            z-index: 2;
            pointer-events: none;
        }
        .logo-wall::before {
            left: 0;
            background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-wall::after {
            right: 0;
            background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
        }
        .logo-row {
            padding-bottom: clamp(19.69px, calc(-0.09px + 2.355vw), 24px);
        }
        .logo-row:last-child {
            padding-bottom: 6px;
        }
        .logo-track {
            display: flex;
            width: max-content;
            padding: 6px 0;
            margin: -6px 0;
            --pace: 3.9s;   /* 该区间 pitch 随 vw 缩小，pace 同步调小以保持速度观感一致 */
        }
        .logo-track .logo-item {
            margin-right: clamp(19.69px, calc(-0.09px + 2.355vw), 24px);
            flex-shrink: 0;
        }
        /* 滚动动画已统一到文件顶部：@keyframes logoScroll
           位移 = -100% / var(--copies)，时长 = var(--count) * var(--pace)
           两个变量由页面底部的 initLogoWall() 在运行时写入 */
        .logo-item {
            width: clamp(126.33px, calc(-0.68px + 15.12vw), 154px);
            height: clamp(57.42px, calc(-0.32px + 6.874vw), 70px);
            border-radius: clamp(9.84px, calc(-0.07px + 1.18vw), 12px);
            background: #FFFFFF;
            box-sizing: border-box;
            border: 0px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(6.56px, calc(-0.05px + 0.787vw), 8px);
        }
        .logo-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

}

/* 768px 样式 */
@media (min-width: 768px) and (max-width: 839px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; margin: 0 auto; padding: 0 24px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: calc(45.07vw - 2.14px);
            overflow: hidden;
            margin-top: 96px;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 32px;
            padding: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
        }
        .announce-inner {
            width: auto;
            margin: 0;
            display: block;
        }
        .notive-carousel {
            display: none !important;
        }
        .announce-icon {
            display: none !important;
        }
        .announce-item {
            display: none !important;
        }
        .pagination {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }
        .pagination i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px;
            height: 8px;
            border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -20px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 16px 16px 20px 16px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 16px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; }
        .quick-item span {
            font-size: 18px;
            color: #222222;
            line-height: 24px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 64px;
            line-height: 42px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 100px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: 452px;
            height: 430px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 24px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: calc(100% - 48px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 30px; height: 30px; }
        .service-card .expand-top h3 {
            font-size: 26px; font-weight: 500; color: #fff; line-height: 34px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 18px;
            font-weight: 500;
            width: 144px;
            line-height: 24px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 16px;
            line-height: 24px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
        }
        .service-card .more img { width: 10px; height: 10px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 768px - 839px 分辨率下，图片和图片间距 20px，两边距离固定 24px，宽度自适应 calc(50% - 10px)，高度 430px */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) {
            display: flex !important;
            justify-content: center !important;
            gap: 20px !important;
            width: 100% !important;
            padding: 0 24px !important;
            box-sizing: border-box !important;
            transform: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: calc(50% - 10px) !important;
            height: 430px !important;
            flex: none !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 32px !important;
            right: 32px !important;
            top: 32px !important;
            bottom: 32px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 100px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .block-title {
            margin-bottom: 52px;
        }
        .step-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 100%;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100%;
            min-height: 158px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 32px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            white-space: normal;
            flex: 1 1 0%;
            min-width: 0;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 6px;
            margin-top: 9px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg);
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 100px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 64px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: flex-start;
            gap: 24px;
            margin: 0 -24px 24px -24px;
            padding: 0 24px;
            width: calc(100% + 48px);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none;
        }
        .advantage-desc {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 32px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 64px;
            border-radius: 50px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 32px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: rgba(247, 64, 84, 0.1);
        }
        .advantage-tab img { width: 32px; height: 32px; margin-right: 0; flex-shrink: 0; }
        .advantage-tab:not(.active) img { display: none; }
        .advantage-tab span { font-family: San Francisco Text;
font-size: 16px;
font-weight: normal;
line-height: 22px;
letter-spacing: normal;
color: #222222; }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 100px 0 40px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px 0;
            cursor: grab;
            overflow: hidden;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: 460px;
            height: 536px;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 32px; height: 32px;margin-right: 12px; }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 100px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 64px; }
        .logo-wall {
            width: 100%;
            box-sizing: border-box;
            padding: 0 24px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
        .logo-wall::before,
        .logo-wall::after {
            display: none !important;
        }
        .logo-row {
            padding-bottom: 0;
        }
        .logo-row:nth-child(2) {
            display: none !important;
        }
        .logo-track {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;   /* 末行余数靠左，跟上面各行左边缘对齐 */
            gap: 16px !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            animation: none !important;
            transform: none !important;
        }
        /* 移动端不滚动：隐藏用于无缝循环的拷贝件和第二行，避免出现重复 logo */
        .logo-item--clone { display: none !important; }
        .logo-row + .logo-row { display: none !important; }
        .logo-track .logo-item {
            margin-right: 0 !important;
            flex-shrink: 1 !important;
        }
        .logo-item {
            width: calc((100% - 3 * 16px) / 4) !important;   /* 4 列 */
            height: 70px !important;
            border-radius: 12px !important;
            background: #FFFFFF !important;
            box-sizing: border-box !important;
            border: 0px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 8px 12px !important;
        }
        /* 注意：这里曾有 .logo-item:nth-child(n+17){display:none}，
           那是旧结构（一条 track 写死 9×2=18 个）为了凑满 4×4 砍掉末尾 2 个重复项的 hack。
           现在克隆项由 .logo-item--clone 单独隐藏，这条规则会静默截断真实 logo，故移除。
           移动端需要把 CMS 配置的 logo 全部展示出来，不设数量截断。 */
        .logo-item img {
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }

        /* ===================== EVALUATION / CASES ===================== */
        .swiper-cases .swiper-slide {
            width: 432px;
            height: 432px;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: calc(61.972vw - 15.94px) !important;
            height: 536px !important;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 24px; height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 32px; height: 32px;margin-right: 12px; }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; line-height: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            line-height: 22px;
            color: #222222;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { 
            font-size: 16px;
            line-height: 24px;
        }

}

/* 600px 样式 */
@media (min-width: 600px) and (max-width: 767px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; margin: 0 auto; padding: 0 16px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: calc(44.91vw - 0.46px);
            overflow: hidden;
            margin-top: 96px;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 32px;
            padding: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
        }
        .announce-inner {
            width: auto;
            margin: 0;
            display: block;
        }
        .notive-carousel {
            display: none !important;
        }
        .announce-icon {
            display: none !important;
        }
        .announce-item {
            display: none !important;
        }
        .pagination {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }
        .pagination i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px;
            height: 8px;
            border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -20px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 16px 16px 20px 16px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 16px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 16px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; }
        .quick-item span {
            font-size: 18px;
            color: #222222;
            line-height: 24px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 48px;
            line-height: 32px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 72px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: 452px;
            height: 430px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 24px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: calc(100% - 48px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 24px; height: 24px; }
        .service-card .expand-top h3 {
            font-size: 22px; font-weight: 500; color: #fff; line-height: 28px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 18px;
            font-weight: 500;
            width: 144px;
            line-height: 24px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 600px - 767px 分辨率下，图片和图片间距 16px，两边距离固定 16px，宽度自适应 calc(50% - 8px)，高度 430px */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) {
            display: flex !important;
            justify-content: center !important;
            gap: 16px !important;
            width: 100% !important;
            padding: 0 16px !important;
            box-sizing: border-box !important;
            transform: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: calc(50% - 8px) !important;
            height: 430px !important;
            flex: none !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 24px !important;
            right: 24px !important;
            top: 24px !important;
            bottom: 24px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 72px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .block-title {
            margin-bottom: 36px;
        }
        .step-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 100%;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100%;
            min-height: 158px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 16px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 26px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            white-space: normal;
            flex: 1 1 0%;
            min-width: 0;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 6px;
            margin-top: 9px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg);
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 72px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 48px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: flex-start;
            gap: 16px;
            margin: 0 -16px 24px -16px;
            padding: 0 16px;
            width: calc(100% + 32px);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none;
        }
        .advantage-desc {
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            color: #999999;
            text-align: center;
            margin-bottom: 32px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 56px;
            border-radius: 50px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 16px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: rgba(247, 64, 84, 0.1);
        }
        .advantage-tab img { width: 24px; height: 24px; margin-right: 0; flex-shrink: 0; }
        .advantage-tab:not(.active) img { display: none; }
        .advantage-tab span { font-family: San Francisco Text;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: normal;
            color: #222222; 
        }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 72px 0 32px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .block-cases .block-title {
            margin-bottom: 68px;
        }
        .swiper-cases-container {
            width: 100%;
            position: relative;
            margin-top: 20px;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px 0;
            cursor: grab;
            overflow: hidden;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: calc(51.5vw + 37.02px) !important;
            height: 432px !important;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: calc(59.88vw + 0.72px) !important;
            height: 536px !important;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: 432px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: 536px;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 16px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 16px 20px 20px;
        }
        .swiper-cases .case-avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .swiper-cases .case-name {
            font-size: 20px;
            font-weight: 500;
            line-height: 26px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 24px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 14px;
            line-height: 22px;
            color: #222222;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text {
            font-size: 16px;
            line-height: 24px;
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 72px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 48px; }
        .logo-wall {
            width: 100%;
            box-sizing: border-box;
            padding: 0 16px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
        .logo-wall::before,
        .logo-wall::after {
            display: none !important;
        }
        .logo-row {
            padding-bottom: 0;
        }
        .logo-row:nth-child(2) {
            display: none !important;
        }
        .logo-track {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;   /* 末行余数靠左，跟上面各行左边缘对齐 */
            gap: 12px !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            animation: none !important;
            transform: none !important;
        }
        /* 移动端不滚动：隐藏用于无缝循环的拷贝件和第二行，避免出现重复 logo */
        .logo-item--clone { display: none !important; }
        .logo-row + .logo-row { display: none !important; }
        .logo-track .logo-item {
            margin-right: 0 !important;
            flex-shrink: 1 !important;
        }
        .logo-item {
            width: calc((100% - 3 * 12px) / 4) !important;   /* 4 列 */
            height: 64px !important;
            border-radius: 12px !important;
            background: #FFFFFF !important;
            box-sizing: border-box !important;
            border: 0px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 6px 10px !important;
        }
        /* 注意：这里曾有 .logo-item:nth-child(n+17){display:none}，
           那是旧结构（一条 track 写死 9×2=18 个）为了凑满 4×4 砍掉末尾 2 个重复项的 hack。
           现在克隆项由 .logo-item--clone 单独隐藏，这条规则会静默截断真实 logo，故移除。
           移动端需要把 CMS 配置的 logo 全部展示出来，不设数量截断。 */
        .logo-item img {
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }

}

/* 480px 样式 */
@media (min-width: 480px) and (max-width: 599px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; margin: 0 auto; padding: 0 16px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: calc(45.378vw - 2.82px);
            overflow: hidden;
            margin-top: 96px;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 32px;
            padding: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
        }
        .announce-inner {
            width: auto;
            margin: 0;
            display: block;
        }
        .notive-carousel {
            display: none !important;
        }
        .announce-icon {
            display: none !important;
        }
        .announce-item {
            display: none !important;
        }
        .pagination {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }
        .pagination i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px;
            height: 8px;
            border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -20px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 8px 8px 16px 8px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 12px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 28px; height: 28px; }
        .quick-item span {
            font-size: 16px;
            color: #222222;
            line-height: 22px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 32px;
            line-height: 26px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 56px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: calc(75.63vw - 1.03px) !important;
            height: calc(72.269vw - 2.89px) !important;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 24px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 24px; left: 24px; bottom: 24px;
            width: calc(100% - 48px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 26px; height: 26px; }
        .service-card .expand-top h3 {
            font-size: 22px; font-weight: 500; color: #fff; line-height: 28px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 18px;
            font-weight: 500;
            width: 144px;
            line-height: 24px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            margin-bottom: 12px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 480px - 599px 分辨率下，图片宽度固定 276px，高度 430px，同时两张图都强制保持展开状态 */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: 276px !important;
            height: 430px !important;
            flex-shrink: 0 !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
            will-change: auto !important;
            transition: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 24px !important;
            right: 24px !important;
            top: 24px !important;
            bottom: 24px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 56px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .block-title {
            margin-bottom: 20px;
        }
        .step-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 100%;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100%;
            min-height: 158px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 16px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 22px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: normal;
            width: 100%;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg);
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 56px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 32px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            margin: 0 -24px 24px -24px;
            padding: 0 24px;
            width: calc(100% + 48px);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none;
        }
        .advantage-desc {
            font-size: 12px;
            font-weight: normal;
            line-height: 18px;
            color: #999999;
            text-align: center;
            margin-bottom: 24px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 56px;
            border-radius: 40px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 16px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: #FFE9EB;
        }
        .advantage-tab img { display: none !important; }
        .advantage-tab span { font-family: San Francisco Text;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: normal;
            color: #222222; 
        }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 56px 0 16px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .block-cases .block-title { margin-bottom: 52px; }
        .swiper-cases-container {
            width: 100%;
            position: relative;
            margin-top: 20px;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px 0;
            cursor: grab;
            overflow: hidden;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: calc(58.244vw - 2.88px) !important;
            height: calc(72.723vw - 3.61px) !important;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: calc(60.5vw - 2.42px) !important;
            height: calc(89.916vw - 2.6px) !important;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: calc(72.723vw - 3.61px) !important;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: calc(89.916vw - 2.6px) !important;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 12px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .card-body {
            padding: 12px 16px;
        }
        .swiper-cases .case-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar {
            width: 24px; height: 24px;
            margin-right: 8px;
        }
        .swiper-cases .case-name {
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 16px;line-height: 22px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 12px;
            line-height: 16px;
            color: #222222;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text {
            font-size: 16px;
            line-height: 24px;
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 56px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 32px; }
        .logo-wall {
            width: 100%;
            box-sizing: border-box;
            padding: 0 16px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
        .logo-wall::before,
        .logo-wall::after {
            display: none !important;
        }
        .logo-row {
            padding-bottom: 0;
        }
        .logo-row:nth-child(2) {
            display: none !important;
        }
        .logo-track {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;   /* 末行余数靠左，跟上面各行左边缘对齐 */
            gap: 16px !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            animation: none !important;
            transform: none !important;
        }
        /* 移动端不滚动：隐藏用于无缝循环的拷贝件和第二行，避免出现重复 logo */
        .logo-item--clone { display: none !important; }
        .logo-row + .logo-row { display: none !important; }
        .logo-track .logo-item {
            margin-right: 0 !important;
            flex-shrink: 1 !important;
        }
        .logo-item {
            width: calc((100% - 2 * 16px) / 3) !important;   /* 3 列 */
            height: 64px !important;
            border-radius: 12px !important;
            background: #FFFFFF !important;
            box-sizing: border-box !important;
            border: 0px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 6px 10px !important;
        }
        /* 同上：原 .logo-item:nth-child(n+13){display:none} 属于旧结构遗留的截断 hack，已移除。
           移动端需要把 CMS 配置的 logo 全部展示出来，不设数量截断。 */
        .logo-item img {
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }

}

/* 360px 样式 */
@media (min-width: 360px) and (max-width: 479px), (max-width: 359px) {

* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --primary: #F74054;
            --primary-light: #FFC7CE;
            --primary-dark: #C80000;
            --text-dark: #222;
            --text-normal: #666;
            --text-light: #999;
        }
        html, body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-dark);
            background: #fff;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            width: 100%;
        }
        body { width: 100%; max-width: none;
            margin: 0 auto;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; outline: none; }
        img { display: block; max-width: 100%; }
        ul { list-style: none; }

        .container-responsive { width: 100%; margin: 0 auto; padding: 0 16px;}

        /* ===================== BANNER ===================== */
        .banner {
            position: relative;
            width: 100%;
            height: calc(45.168vw - 1.36px);
            overflow: hidden;
            margin-top: 96px;
        }
        .banner img {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .announce-wrap {
            position: absolute;
            left: 0; right: 0;
            bottom: 32px;
            padding: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
        }
        .announce-inner {
            width: auto;
            margin: 0;
            display: block;
        }
        .notive-carousel {
            display: none !important;
        }
        .announce-icon {
            display: none !important;
        }
        .announce-item {
            display: none !important;
        }
        .pagination {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }
        .pagination i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            display: inline-block;
            transition: all .2s ease;
        }
        .pagination i.active {
            width: 32px;
            height: 8px;
            border-radius: 4px;
            background: var(--primary);
        }

        /* ===================== QUICK BAR ===================== */
        .quickly {
            margin-top: -20px;
            position: relative;
            z-index: 3;
        }
        .quickly-bar {
            width: 100%;
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 24px rgba(41,0,5,0.15);
            border-radius: 24px;
            padding: 8px 8px 16px 8px;
            display: block;
        }
        .yundan-search {
            position: relative;
            width: 100%;
        }
        .yundan-search input {
            width: 100%;
            height: 48px;
            /* 默认给 1px 透明边，hover/focus 只换颜色，避免出现 1px 的布局抖动 */
            border: 1px solid transparent;
            color: #222222;              /* 已填写的单号文字 */
            text-overflow: ellipsis;     /* 失焦时超长单号省略，对应设计稿第四态 */
            transition: border-color .2s;
            border-radius: 300px;
            padding: 0 56px 0 24px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(41,0,5,0.05);
            outline: none;
        }
        .yundan-search input::placeholder { color: #999999; }
        /* 设计稿输入框四态：默认/失焦无边框，hover #FF6B77 边，聚焦(输入中) #F74054 边 */
        .yundan-search input:hover { border-color: #FFF0F0; }
        .yundan-search input:focus { border-color: #FFF0F0; }
        .yundan-search button {
            position: absolute;
            right: 4px; top: 4px;
            width: 40px; height: 40px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yundan-search button svg { width: 20px; height: 20px; fill: #fff; }
        .quick-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 16px;
        }
        .quick-item {
            min-width: 0;   /* 配合 overflow-wrap，允许收窄到比最长单词更细 */
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            /* 原为 transition: background .2s，hover 背景块已按设计稿去掉，
               过渡改挂在 .quick-item span 的 color 上 */
            gap: 12px;
        }
        /* 设计稿：三个按钮的交互只改文字颜色，不加背景块 */
        .quick-item span   { transition: color .2s; }
        .quick-item:hover  span { color: #F74054;}
        .quick-item:active span { color: #D12C45; }
        .quick-item img { width: 32px; height: 32px; }
        .quick-item span {
            font-size: 14px;
            color: #222222;
            line-height: 18px;
            white-space: normal;        /* 原为 nowrap，就是这条导致 360 下文字不换行 */
            text-align: center;         /* 换成两行后要居中，否则和上面的图标对不齐 */
            overflow-wrap: break-word;  /* 兜底：单个超长单词也不撑破卡片 */
        }

        /* ===================== COMMON BLOCK ===================== */
        .block { padding: 60px 0; }
        .block-title {
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85); 
            margin-bottom: 32px;
            line-height: 26px;
        }

        /* ===================== SERVICES ===================== */
        .block-services { padding: 56px 0; }
        .service-swiper {
            overflow: hidden;
        }
        .service-list {
            display: flex;
            justify-content: flex-start;
            gap: 0;
        }
        .service-card {
            position: relative;
            width: calc(60.5vw + 72.19px) !important;
            height: calc(57.143vw + 70.29px) !important;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 14px -6px rgba(41,0,5,0.12);
            cursor: pointer;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .service-card .mask {
            position: absolute; inset: 0;
            background: rgba(64,58,58,0.6);
            opacity: 0;
            transition: opacity .45s ease;
            z-index: 1;
        }
        .service-card.swiper-slide-active .mask { opacity: 1; }
        .service-card .compact {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 16px;
            color: #fff;
            z-index: 2;
            transition: opacity .45s ease;
        }
        .service-card .compact img { width: 30px; height: 30px; }
        .service-card .compact h3 {
            font-size: 26px; font-weight: 600; color: #fff;line-height: 34px;
        }
        .service-card.swiper-slide-active .compact { opacity: 0; }
        .service-card .expand {
            position: absolute;
            top: 16px; left: 16px; bottom: 16px;
            width: calc(100% - 32px);
            z-index: 2;
            display: flex;
            flex-direction: column;
            color: #fff;
            opacity: 0;
            transition: opacity .45s ease .15s;
        }
        .service-card.swiper-slide-active .expand { opacity: 1; }
        .service-card .expand-top {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
        }
        .service-card .expand-top img { width: 26px; height: 26px; }
        .service-card .expand-top h3 {
            font-size: 22px; font-weight: 500; color: #fff; line-height: 28px;
        }
        .service-card .btn-apply {
            margin-top: 12px;
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 40px;
            background: #fff;
            color: var(--primary);
            border-radius: 20px;
            font-size: 16px;
            font-weight: 500;
            width: 136px;
            line-height: 22px;
            justify-content: center;
        }
        /* 箭头由 <img> 改成伪元素：CSS 换不了 img 的 src，只有背景图才能按状态切换 */
        .service-card .btn-apply::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(/assets/images/new/right.png) center/contain no-repeat;
        }
        .service-card .btn-apply:hover::after  { background-image: url(/assets/images/new/right-hover.png); }
        .service-card .btn-apply:active::after { background-image: url(/assets/images/new/right-active.png); }
        /* 设计稿：default #F74054(= --primary) / hover #FF6B77 / active #D12C45，只变文字颜色 */
        .service-card .btn-apply        { transition: color .2s; }
        .service-card .btn-apply:hover  { color: #F74054;}
        .service-card .btn-apply:active { color: #D12C45; }
        .service-card .expand-bottom { margin-top: auto; }
        .service-card .desc {
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            margin-bottom: 8px;
            display: -webkit-box;
            line-clamp: 4;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .service-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 14px;
            line-height: 18px;
        }
        .service-card .more img { width: 12px; height: 12px; }
        .service-card:not(.swiper-slide-active) .expand {
            opacity: 0;
            pointer-events: none;
        }
        .service-card:not(.swiper-slide-active) .compact {
            opacity: 1;
        }

        /* 当且仅当服务卡片只有2个时，在 < 480px 分辨率下，图片宽度固定 276px，高度 430px，同时两张图都强制保持展开状态 */
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
            width: 276px !important;
            height: 430px !important;
            flex-shrink: 0 !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            outline: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
            will-change: auto !important;
            transition: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
            opacity: 1 !important;
            background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .compact {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
            opacity: 1 !important;
            pointer-events: auto !important;
            width: auto !important;
            left: 24px !important;
            right: 24px !important;
            top: 24px !important;
            bottom: 24px !important;
        }

        /* ===================== STEPS ===================== */
        .block-steps {
            padding: 56px 0;
            background: linear-gradient(65deg, #ffffff4d 0%, #ffffff00 38%),
                        linear-gradient(231deg, #ffffff80 0%, #ffffff00 24%),
                        linear-gradient(109deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            position: relative;
            overflow: hidden;
        }
        .block-steps .block-title {
            margin-bottom: 20px;
        }
        
        .step-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            z-index: 2;
        }
        .step-item {
            position: relative;
            width: 100%;
            padding-top: 56px;
        }
        .step-icon {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 112px;
            height: 112px;
            z-index: 2;
        }
        .step-icon img {
            width: 112px;
            height: 112px;
            display: block;
        }
        .step-card {
            width: 100%;
            min-height: 158px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(41,0,5,0.04);
            padding: 68px 16px 32px;
            box-sizing: border-box;
        }
        .step-card h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 500;
            color: #222222;
            text-align: center;
            margin-bottom: 24px;
            line-height: 22px;
        }
        .step-card h3::after {
            content: '';
            display: inline-block;
            min-width: 10px;
            height: 14px;
            background: url(/assets/images/new/back.png) center/contain no-repeat;
        }
        /* 设计稿：四个步骤标题 default #222222 / hover #FF6B77 / active #D12C45，
           末尾的 › 同步换 back-hover.png / back-active.png */
        .step-card h3        { transition: color .2s; cursor: pointer; }
        .step-card h3:hover  { color: #F74054;}
        .step-card h3:active { color: #D12C45; }
        .step-card h3:hover::after  { background-image: url(/assets/images/new/back-hover.png); }
        .step-card h3:active::after { background-image: url(/assets/images/new/back-active.png); }
        .step-card ul {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        .step-card ul li {
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            color: #999999;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: normal;
            width: 100%;
        }
        .step-card ul li:last-child { margin-bottom: 0; }
        .step-card ul li::before {
            content: '';
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #999999;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .step-arrow {
            width: 32px;
            height: 32px;
            align-self: center;
            margin-top: 24px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .step-arrow img {
            width: 100%;
            height: 100%;
            display: block;
            /* right.png 是右向箭头；先顺时针转 90° 变成向下，再水平镜像，
               弯钩才朝正确的一侧（scaleX 写在前面 = 后作用于旋转结果，顺序不能颠倒） */
            transform: scaleX(-1) rotate(90deg);
            transform-origin: center;
        }
        .step-more {
            text-align: center;
            margin-top: 36px;
        }
        .step-more a {
            display: inline-block;
            padding: 0 20px;
            line-height: 32px;
            background: #fff;
            border-radius: 16px;
            color: var(--primary);
            font-size: 12px;
            box-shadow: 0 2px 12px rgba(41,0,5,0.08);
            transition: all .3s;
        }
        .step-more a:hover { background: var(--primary); color: #fff; }

        /* ===================== ADVANTAGES ===================== */
        .block-advantages { padding: 56px 0; background: #fff; }
        .block-advantages .block-title { margin-bottom: 32px; }
        .advantage-tabs-row {
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            margin: 0 -16px 16px -16px;
            padding: 0 16px;
            width: calc(100% + 32px);
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }
        .advantage-tabs-row::-webkit-scrollbar {
            display: none;
        }
        .advantage-desc {
            font-size: 12px;
            font-weight: normal;
            line-height: 18px;
            color: #999999;
            text-align: center;
            margin-bottom: 16px;
        }
        .advantage-wrap { display: flex; flex-direction: column; align-items: center; }
        .advantage-left { display: none; }
        .advantage-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 48px;
            border-radius: 40px;
            cursor: pointer;
            background: #F8F8F8;
            transition: background .25s, color .25s;
            position: relative;
            flex-shrink: 0;
            padding: 0 16px;
        }
        .advantage-tab::after { display: none; }
        .advantage-tab.active {
            background: #FFE9EB;
        }
        .advantage-tab img { display: none !important; }
        .advantage-tab span { font-family: San Francisco Text;
            font-size: 13px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: normal;
            color: #222222; 
        }
        /* 设计稿：default #222222 / hover #F74054 / 选中(.active) #F74054 + 字重 500 */
        .advantage-tab span        { transition: color .2s; }
        .advantage-tab:hover span  { color: #F74054; }
        .advantage-tab.active span { color: #F74054; font-weight: 500; }
        .advantage-right {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .advantage-right img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ===================== CASES ===================== */
        .block-cases {
            padding: 56px 0 12px 0;
            background: linear-gradient(57deg, #ffffff4d 0%, #ffffff00 39%),
                        linear-gradient(222deg, #ffffff80 1%, #ffffff00 28%),
                        linear-gradient(115deg, #fff9f9 0%, #fdf7f7 47%, #fffdf8 100%);
            overflow: hidden;
        }
        .block-cases .block-title { margin-bottom: 48px; }
        .swiper-cases-container {
            width: 100%;
            position: relative;
            margin-top: 20px;
        }
        .swiper-cases-container::before,
        .swiper-cases-container::after {
            display: block;
            content: "";
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .swiper-cases-container::before {
            left: 0;
            background: linear-gradient(to right, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases-container::after {
            right: 0;
            background: linear-gradient(to left, #fffcfc 1%, rgba(245, 247, 251, 0) 100%);
        }
        .swiper-cases {
            width: 100%;
            padding: 0 0 60px 0;
            cursor: grab;
            overflow: hidden;
        }
        .swiper-cases.swiper-grabbing { cursor: grabbing; }
        .swiper-cases .swiper-wrapper { align-items: center; }
        .swiper-cases .swiper-slide {
            width: calc(57.992vw - 1.09px) !important;
            height: calc(62.319vw + 46.95px) !important;
            box-sizing: border-box;
            transition: width 0.5s ease;
        }
        .swiper-cases .swiper-slide.swiper-slide-active {
            width: calc(60.361vw - 1.13px) !important;
            height: calc(89.563vw - 0.43px) !important;
        }
        .swiper-cases .scale-img { height: 100%; }
        .swiper-cases .scale-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            -webkit-user-drag: none;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), rgba(0,0,0,0.3) calc(100% - 25px), transparent 100%);
        }
        .swiper-cases .swiper-slide.swiper-slide-active .scale-img img {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0,0,0,0.3) calc(100% - 32px), transparent 100%);
        }
        .swiper-cases .swiper-card {
            width: 100%;
            height: calc(62.319vw + 46.95px) !important;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0px 2px 16px 0px rgba(41, 0, 5, 0.1);
            position: relative;
            background: #fff;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform;
            contain: paint;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
            height: calc(89.563vw - 0.43px) !important;
            box-shadow: 0px 8px 24px 0px rgba(41, 0, 5, 0.12);
        }
        .swiper-cases .card-body {
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.92) 40%,
                rgba(255,255,255,0.98) 75%,
                rgba(255,255,255,1) 100%
            );
            position: absolute;
            left: 0; bottom: 0;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 16px 16px;
        }
        .swiper-cases .case-avatar {
            width: 15px; height: 15px;
            border-radius: 50%;
            margin-right: 4.5px;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-avatar { width: 18px; height: 18px; margin-right: 6px; }
        .swiper-cases .case-name {
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: normal;
            color: #222222;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .case-name { font-size: 14px;line-height: 18px; }
        .swiper-cases .swiper-card .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .swiper-cases .swiper-card .card-text {
            font-size: 12px;
            line-height: 18px;
            color: #222222;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text {
            font-size: 12px;
            line-height: 16px;
        }

        /* ===================== SHOP LINKS ===================== */
        .block-shop {
            padding: 56px 0;
            background: #fff;
        }
        .block-shop .block-title { margin-bottom: 32px; }
        .logo-wall {
            width: 100%;
            box-sizing: border-box;
            padding: 0 16px;
            margin: 0 auto;
            overflow: visible;
            position: relative;
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }
        .logo-wall::before,
        .logo-wall::after {
            display: none !important;
        }
        .logo-row {
            padding-bottom: 0;
        }
        .logo-row:nth-child(2) {
            display: none !important;
        }
        .logo-track {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;   /* 末行余数靠左，跟上面各行左边缘对齐 */
            gap: 12px !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            animation: none !important;
            transform: none !important;
        }
        /* 移动端不滚动：隐藏用于无缝循环的拷贝件和第二行，避免出现重复 logo */
        .logo-item--clone { display: none !important; }
        .logo-row + .logo-row { display: none !important; }
        .logo-track .logo-item {
            margin-right: 0 !important;
            flex-shrink: 1 !important;
        }
        .logo-item {
            width: calc((100% - 2 * 12px) / 3) !important;   /* 3 列 */
            height: 56px !important;
            border-radius: 10px !important;
            background: #FFFFFF !important;
            box-sizing: border-box !important;
            border: 0px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0px 2px 8px 0px rgba(41, 0, 5, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 4px 8px !important;
        }
        /* 同上：原 .logo-item:nth-child(n+13){display:none} 属于旧结构遗留的截断 hack，已移除。
           移动端需要把 CMS 配置的 logo 全部展示出来，不设数量截断。 */
        .logo-item img {
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }

}

@media (min-width: 1280px) {

    .service-swiper {
        overflow: visible !important;
    }
    .service-swiper > .service-list.swiper-wrapper {
        display: flex !important;
        transform: none !important;
        width: 100% !important;
        gap: 24px !important;
        
        /* 把这一行卡片声明成「容器」，下面展开层的宽度就能用 cqw 按这一整行的宽度来算。
           这一行的宽度在展开动画期间是恒定的（卡片之间只是互相让位），
           所以文字容器的宽度从第一帧就是最终宽度，不会跟着卡片宽度一帧一帧重新折行。 */
        container-type: inline-size;
    }
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide {
        width: auto !important;
        flex: 1 !important;
        flex-shrink: 1 !important;
    }
    
    /* 简约态（居中的图标+标题）和展开态（左上角的图标+标题+按钮）是两套不同的元素，
       原来两层的淡入淡出大幅重叠：同一个标题同时以半透明出现在「中间」和「左上角」两个位置，
       大脑会把它们认成同一个物体在瞬移，于是看着像抖动。
       解决办法是把两层错开、不同时出现 ——
       展开：0~0.14s 简约态先淡出，0.18s 之后展开态才淡入并轻微上浮；
       收起：0~0.16s 展开态先淡出，0.16s 之后简约态才回来。
       全程只有 opacity / transform 在变，都是合成器属性，不会引起重排。 */
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .compact {
        transition: opacity 0.22s ease 0.16s !important;    /* 收起时：等展开层走完再回来 */
    }
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.active .compact {
        transition: opacity 0.14s ease !important;          /* 展开时：立刻快速淡出，不和展开层重叠 */
    }
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .expand {
        transition: opacity 0.3s ease 0.18s, transform 0.34s cubic-bezier(0.32, 0.72, 0.16, 1) 0.18s !important;

        /* 展开层的尺寸现在是完全固定的（宽度写死、上下各 32px 定位、卡片高度不变），
           所以把它提升成独立的合成层：动画期间浏览器只需要整层平移 + 淡入，
           不用逐帧重新排版和重绘里面的文字，标题和按钮就不会再有亚像素抖动。
           顺带让它从下方 8px 处浮上来，给「内容是被展开出来的」一个明确的方向感，
           而不是凭空闪现在另一个位置。 */
        transform: translate3d(0, 8px, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: opacity, transform !important;
    }
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.active .expand {
        transform: translate3d(0, 0, 0) !important;
    }
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide:not(.active) .expand {
        transition: opacity 0.16s ease, transform 0s linear 0.16s !important;   /* 收起：快速淡出，位置等看不见了再复位 */
    }
    /* 上下两块都不允许被压缩：万一动画中间某一帧内容比容器高，
       flex 默认会把它们挤扁，表现就是图标／标题／按钮整体上下位移。 */
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .expand > .expand-top,
    .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide .expand > .expand-bottom {
        flex: none !important;
    }

    /* 动画期间「哪条边不动」取决于这一对卡片的左右关系：
       同时变化的两张卡片合起来占的宽度是恒定的，动的只有它们中间那条边。
       所以靠左那张的左边缘不动（默认 left: 32px 就行），
       靠右那张的左边缘会跟着往左滑 —— 它的文字必须改成贴右定位，
       否则整块文字会一边淡入一边横向平移几百像素，看着就是「抖动位移」。
       两个锚点在卡片处于展开态时算出来的框完全一样（宽度 = 卡片宽 - 64），
       所以切换锚点本身不会产生任何跳动。JS 只负责给靠右那张加 .anchor-right。 */
    @supports (container-type: inline-size) {
        .service-swiper > .service-list.swiper-wrapper > .service-card.swiper-slide.anchor-right {
            --exp-left: auto;
            --exp-right: 32px;
        }
    }

    /* 当且仅当服务卡片只有2个时，采用平滑的 flex-width 过渡动画，宽度融合（第一、二、三张宽度融合）且间距不变 */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide {
        width: calc(25% - 18px) !important;
        flex: none !important;
        border: none !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: width, box-shadow !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        transition: width 0.5s cubic-bezier(0.32, 0.72, 0.16, 1), box-shadow 0.5s cubic-bezier(0.32, 0.72, 0.16, 1) !important;
        
        /* 屏蔽点击并按住/拖拽时产生的蓝色高亮选择块及焦点框 */
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide.active {
        width: calc(75% - 6px) !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 16px 24px -14px rgba(41, 0, 5, 0.28) !important;
    }
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .mask {
        background: linear-gradient(180deg, #413a3700 40%, #403a3ab3 100%) !important;
    }
    /* 展开层的宽度按「展开后」的卡片内宽写死（2 张时展开卡 = 75% - 6px，左右各留 32px 内边距），
       用 cqw 而不是 % —— % 会以卡片自身为基准，卡片宽度正在做 0.5s 过渡，
       文字容器就会跟着一帧一帧变宽、每帧重新折行，看起来就是抖动。
       写死成最终宽度后，文字一开始就按最终排版好，只有 opacity 在渐现，收起时超出部分由卡片的 overflow:hidden 裁掉。 */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide .expand {
        width: auto !important;                    /* 回退：不支持容器查询的老浏览器仍按 left/right 撑开 */
        width: calc(75cqw - 70px) !important;      /* 75% - 6px - 32px*2 */
        left: var(--exp-left, 32px) !important;
        right: var(--exp-right, 32px) !important;  /* left 不是 auto 时这条会被忽略，也是老浏览器的回退 */
        top: 32px !important;
        bottom: 32px !important;
    }

    /* 当且仅当服务卡片只有3个时，采用平滑的 flex-width 过渡动画，宽度融合且间距不变 */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(3)) > .service-card.swiper-slide {
        width: calc(25% - 18px) !important;
        flex: none !important;
        border: none !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: width, box-shadow !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        transition: width 0.5s cubic-bezier(0.32, 0.72, 0.16, 1), box-shadow 0.5s cubic-bezier(0.32, 0.72, 0.16, 1) !important;
        
        /* 屏蔽点击并按住/拖拽时产生的蓝色高亮选择块及焦点框 */
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(3)) > .service-card.swiper-slide.active {
        width: calc(50% - 12px) !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 16px 24px -14px rgba(41, 0, 5, 0.28) !important;
    }
    /* 同上：3 张时展开卡 = 50% - 12px */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(3)) > .service-card.swiper-slide .expand {
        width: auto !important;
        width: calc(50cqw - 76px) !important;      /* 50% - 12px - 32px*2 */
        left: var(--exp-left, 32px) !important;
        right: var(--exp-right, 32px) !important;
        top: 32px !important;
        bottom: 32px !important;
    }

    /* 当且仅当服务卡片有4个时，同样采用平滑的 flex-width 过渡动画，宽度融合且间距不变 */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(4)) > .service-card.swiper-slide {
        width: calc(20% - 19.2px) !important;
        flex: none !important;
        border: none !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: width, box-shadow !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(41, 0, 5, 0.12) !important;
        transition: width 0.5s cubic-bezier(0.32, 0.72, 0.16, 1), box-shadow 0.5s cubic-bezier(0.32, 0.72, 0.16, 1) !important;
        
        /* 屏蔽点击并按住/拖拽时产生的蓝色高亮选择块及焦点框 */
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(4)) > .service-card.swiper-slide.active {
        width: calc(40% - 14.4px) !important;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 16px 24px -14px rgba(41, 0, 5, 0.28) !important;
    }
    /* 同上：4 张时展开卡 = 40% - 14.4px（当前首页就是 4 张） */
    .service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(4)) > .service-card.swiper-slide .expand {
        width: auto !important;
        width: calc(40cqw - 78.4px) !important;    /* 40% - 14.4px - 32px*2 */
        left: var(--exp-left, 32px) !important;
        right: var(--exp-right, 32px) !important;
        top: 32px !important;
        bottom: 32px !important;
    }

}

@media (max-width: 1279px) {

    .block-services .container-responsive {
        max-width: none !important;
        padding: 0 !important;
    }

}

@media (max-width: 768px) {

    .top-announce {
        display: flex !important;
        align-items: center !important;
    }

}

@media (max-width: 839px) {

    .pagination .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.6);
    }
    .pagination .swiper-pagination-bullet-active {
        background: var(--primary);
    }

}

/* 评论区 */
@media (max-width: 840px) {
    .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { 
        -webkit-line-clamp: 4;
    }
}
@media (max-width: 600px) {
    .swiper-cases .swiper-card .card-text { 
        -webkit-line-clamp: 4;
    }
    .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { 
        -webkit-line-clamp: 5;
    }
}
@media (max-width: 480px) {
    .swiper-cases .swiper-slide.swiper-slide-active .swiper-card .card-text { 
        -webkit-line-clamp: 6;
    }
}
@media (max-width: 480px) {
    .swiper-cases .swiper-card .card-text { 
        -webkit-line-clamp: 6;
    }
}

/* Banner Swiper Global Override Styles */
.banner-swiper {
    overflow: hidden;
    position: relative;
}
.banner-swiper .swiper-slide {
    overflow: hidden;
}
.banner-swiper img {
    transition: transform 1s linear 2s !important;
    transform: scale(1.1) !important;
}
.banner-swiper .swiper-slide-active img,
.banner-swiper .swiper-slide-duplicate-active img {
    transition: transform 6s linear !important;
    transform: scale(1) !important;
}

/* 取消案例评价部分的左右渐隐效果。
   原本只在 @media (max-width: 1280px) 里关掉，2026-08-27 用户要求全断点都去掉，
   所以把 @media 拆了 —— 9 个手绘断点里的 .swiper-cases-container::before/::after
   一行都没删（width:15% + 白色渐变还在原处），要恢复只需把这条包回
   @media (max-width: 1280px)。 */
.swiper-cases-container::before,
.swiper-cases-container::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   「每一次选择皆因信任」卡片 · 文字块左右各漏 1px 照片 —— 兜底外扩
   --------------------------------------------------------------------------
   上面已经把 .card-body 的 backdrop-filter 删掉了（根因，见文件顶部那段注释）。
   这里再补一道保险：把白渐变的绘制区域左右各外扩 1px，
   这样即使浏览器把 width: 100% 算出来比卡片少了个零点几像素，
   多出来的那 1px 也一定盖得住卡片的抗锯齿列，多余部分由父级
   .swiper-card 的 overflow: hidden + border-radius 裁掉。

   用「负 left + 透明边框」而不是直接改 padding，是为了让文字位置分毫不动：
   盒子是 border-box，外扩的 2px 正好被左右两条 1px 透明边框吃掉，
   内容盒的位置和宽度跟改之前完全一样；而背景默认按 border-box 绘制，
   会一直画到透明边框外沿，也就是卡片边缘之外。

   必须同时把自己的 border-radius 清掉：外扩之后它的圆角圆心比父级的裁切圆角
   内缩了 1px，底部两个圆角处会露出一道没被渐变盖住的细月牙；交给父级裁就没这个问题。

   放在 </style> 最末尾而不是文件开头：10 个断点里的 .card-body 规则和这条
   同特异性（0-2-0），写在前面会被后面的断点规则覆盖。写 !important 也是为了
   这段能原样贴进线上 CMS 的样式表。
   ========================================================================== */
.swiper-cases .card-body {
    left: -1px !important;
    right: auto !important;
    width: calc(100% + 2px) !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-radius: 0 !important;
    background-clip: border-box !important;
}

/* ==========================================================================
   「每一次选择皆因信任」卡片 · 关掉两条帮倒忙的性能提示
   --------------------------------------------------------------------------
   10 个断点的 .swiper-cases .swiper-card 里都写了：
       transform: translateZ(0);
       will-change: transform;
   这两条在这里是**负收益**，理由：
   1) 卡片自己的 transform 从来不变 —— 会动的是外层 .swiper-wrapper 的
      translate3d。给一个 transform 恒定的元素加 will-change: transform，
      是 will-change 的典型误用（MDN 明确写了不要长期挂在大量元素上）。
   2) 这两条会把**每一张**卡单独提成合成层。循环模式下 DOM 里有 20~30 张卡，
      每张一整屏大小的纹理，2x 屏下光显存就是几十 MB 量级。
   3) 最关键的一条：卡片宽高在切换时是**动画中的**（.swiper-slide 有
      transition: width .5s，激活态 432→536），尺寸每帧都在变，
      图层内容每帧本来就必须重新光栅化 —— 提层带不来任何复用，
      反而每帧多一道「合成层上传 + 合成」的开销。
   删掉之后卡片改为画进 wrapper 自己那一层，视觉上**没有任何变化**：
   .swiper-card 本来就有 position: relative 和 contain: paint，
   .card-body 的绝对定位包含块、以及圆角裁切都不依赖 transform，一切照旧。
   （这里用末尾覆盖而不是去改那 10 个断点，是为了不动已经对着设计稿画好的那部分；
   这一整段随时可以整块删掉，删掉就回到原状。）

   2026-08-25 更新：这块从「全断点」收窄到「≤1023」。因为 ≥1024 换成了下面那块
   transform 方案（卡片的 transform 恰恰就是动画本体，不能再 none 掉）；
   ≤1023 仍然是老的宽度方案，上面三条理由原样成立，继续关。
   ========================================================================== */
@media (max-width: 1023px) {
    .swiper-cases .swiper-card {
        transform: none !important;
        will-change: auto !important;
    }
}

/* ==========================================================================
   案例轮播 · transform 方案（2026-08-25，仅 ≥1024 生效）
   --------------------------------------------------------------------------
   老方案动画 .swiper-slide 的宽度（432↔536，transition: width .5s），宽高是
   布局属性，每帧都在主线程重排整排卡片 —— 这就是滑动时一顿一顿的根源。
   新方案布局恒定、只动 transform（合成器线程，不重排）：

   几何（≥1024 四个断点共用：小卡 432、大卡 536、间距 24，双轴等比 0.805970）：
     · slide 布局宽固定 432、spaceBetween 24 → 相邻中心步距 456 恒定
     · card 按「激活态」536×536 写死，在 432 的 slide 里 flex 居中，左右各溢出 52
     · 侧卡 scale(432/536=0.805970) → 视觉 432 ✔；再 translateX(±52×--t) 推开
       → 激活↔邻居、邻居↔次邻居间距全部恒等 24，与设计稿零偏差（已脚本验算）
     · translateX 必须写在 scale 前面，否则位移会被缩放缩小
     · --t（0=激活 1=侧边）、--dir（左-1 右+1）由 JS 按 slide.progress 写入，
       连续量，拖拽跨过中心不会跳
   ≤1023 不动：那些断点设计稿里激活卡是「变形」的（方卡→竖长卡，宽高比在变），
   等比 scale 数学上到不了那个端点，非等比又会把头像圆压扁 —— 保留手绘老方案。

   内饰全按激活态写死，侧卡整体 ×0.805970：名字 24→19.3(设计20)、正文 16→12.9(14)、
   头像 32→25.8(24)。偏差全放在陪衬的侧卡上；激活卡 scale(1)，与设计稿逐像素一致。
   圆角/阴影是绘制属性、单独补偿：侧卡写 设计值÷0.805970，缩回去正好还原。
   mask 用激活态值，缩完 ≈ 设计稿侧卡值（差 ≤5px 的渐变起点，肉眼不可见）。

   手绘的 .swiper-slide-active 各规则（字号 24、阴影 .12 等）与本方案的常量值
   相同，天然兼容，不需要覆盖；这里只覆盖「非激活态」的那半套。

   删除方式：本块 + JS 里 CASE_TRANSFORM 那段 一起删，再把上一块的
   @media (max-width:1023px) 包裹拆掉，就完全回到旧方案。
   ========================================================================== */

/* 滑行曲线：保持浏览器默认 ease，与 case-carousel-demo.html 里 B 版的默认观感
   一致（用户定的）。之前这里试过 ease-out（治「半空中被打断后原地爬行」），
   用户对比后要求回到 demo 默认 —— 如果以后又想换，规则是：
   .swiper-cases .swiper-wrapper { transition-timing-function: cubic-bezier(0,0,.2,1); } */

@media (min-width: 1024px) {
    /* slide 布局恒定，激活态也不再变宽；杀掉宽度动画 */
    .swiper-cases .swiper-slide,
    .swiper-cases .swiper-slide.swiper-slide-active {
        width: 432px;
        height: 536px;
        transition: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    .swiper-cases .swiper-card {
        width: 536px;
        height: 536px;
        flex: 0 0 536px;

        --s-min: 0.805970;   /* 432 / 536 */
        --push: 52px;        /* (536 - 432) / 2 */
        --t: 1;              /* 0=激活 1=侧边，JS 写入 */
        --dir: 1;            /* -1=激活卡左边 +1=右边，JS 写入 */

        transform:
            translateX(calc(var(--dir) * var(--push) * var(--t)))
            scale(calc(1 - var(--t) * (1 - var(--s-min))));
        transform-origin: center center;
        /* 手绘的 will-change: transform 在这里重新变成负收益（30 张卡常驻提层
           + 缩放态文字一直用低精度位图发虚），拆掉，让浏览器自己决定 */
        will-change: auto;
        /* 兜底过渡；真正的时长由 JS 在 setTransition 里接管（拖拽时置 0 跟手） */
        transition: transform .5s cubic-bezier(0, 0, .2, 1),
                    box-shadow .5s cubic-bezier(0, 0, .2, 1),
                    border-radius .5s cubic-bezier(0, 0, .2, 1);
        /* 侧卡补偿值：20÷0.805970=24.81 / 阴影 2,16 ×1.2407 = 2.48,19.85 */
        border-radius: 24.81px;
        box-shadow: 0 2.48px 19.85px 0 rgba(41, 0, 5, .1);
    }
    /* 激活卡回到设计原值（手绘 active 规则只有 height+shadow，圆角得在这补） */
    .swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
        border-radius: 20px;
        z-index: 2;
    }
    /* 内饰按激活态写死（激活态的手绘规则同值，互不打架） */
    .swiper-cases .card-body { padding: 16px 20px 20px; }
    .swiper-cases .case-avatar { width: 32px; height: 32px; margin-right: 12px; }
    .swiper-cases .case-name { font-size: 24px; line-height: 24px; }
    .swiper-cases .swiper-card .card-text { font-size: 16px; line-height: 24px; }
}
/* mask / 圆角 / 底影按手绘的分档取「激活态」值 */
@media (min-width: 1024px) and (max-width: 1279px) {
    .swiper-cases .swiper-card { border-radius: 19.85px; }  /* 16 ÷ 0.805970 */
    .swiper-cases .swiper-slide.swiper-slide-active .swiper-card { border-radius: 16px; }
    .swiper-cases .scale-img img {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0, 0, 0, 0.3) calc(100% - 32px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), rgba(0, 0, 0, 0.3) calc(100% - 32px), transparent 100%);
    }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    /* 这一档手绘底影是 0 8 24 .05，补偿：×1.2407 = 9.93, 29.78 */
    .swiper-cases .swiper-card { box-shadow: 0 9.93px 29.78px 0 rgba(41, 0, 5, .05); }
    .swiper-cases .scale-img img {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.3) calc(100% - 40px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.3) calc(100% - 40px), transparent 100%);
    }
}
@media (min-width: 1440px) and (max-width: 1919px) {
    .swiper-cases .scale-img img {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.3) calc(100% - 40px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.3) calc(100% - 40px), transparent 100%);
    }
}
@media (min-width: 1920px) {
    .swiper-cases .scale-img img {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0, 0, 0, 0.3) calc(100% - 50px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), rgba(0, 0, 0, 0.3) calc(100% - 50px), transparent 100%);
    }
}

/* ======================================================================
   乐一番的优势 · 1280-1439 这一档的 tab 行（2026-08-26）
   整块可以直接删掉，删掉就完全回到原样；上面 10 个手绘断点里一行都没动。

   === 为什么 1280-1439 看不到 tab（真因不在 all.html 里）===
   `header.html` 的样式表里，**顶层、没有任何 @media 包裹**地写了一条：
         .advantage-tabs-row { display: none; }        （header.html:80）
   然后只在 `@media (max-width: 1024px)` 里把它放出来：
         .advantage-tabs-row { display: flex !important; }   （header.html:3412）
   header.html 是被 fetch 进 #header-placeholder 的，它那段样式在文档里排在
   all.html 这段样式 **后面**，特异度又同为 (0,1,0) —— 后来者胜。
   于是每一档的实际结果是：
     · ≤1024        header 的 `display:flex !important` 赢          → 显示 ✔
     · 1025-1279    all.html:3135 那组也是 !important，赢回来        → 显示 ✔
     · 1280-1439    all.html:2075 的 `display:flex` **没带 !important**
                    → 被 header 顶层那条 display:none 压掉          → 整行消失 ✘
     · ≥1440        被压掉，而这一档本来就该用左侧竖排，属于歪打正着 ✔
   所以 2071-2124 那一整套胶囊样式一直都在、也一直生效，只是整行被 display:none 了。
   下面这条 `display:flex !important` 就是专门把它抢回来。
   更干净的做法是去 header.html 把第 80 行那条挪进 `@media (min-width:1440px)`，
   但那是共用文件、线上还要跟着改，所以先在这里就地修。

   === 顺带把写死的宽度改成等分 ===
   这一档 tab 宽度原本写死 `227.2px` + `flex-shrink:0`，
   227.2 是拿 1280 反算的：(1280 - 24×2 - 24×4) / 5 = 227.2，
   所以 1280 这个端点和设计稿逐像素吻合（量过你的稿：5 个等宽胶囊、间距 24、
   左右各留 24、高 64、标题到 tab 行 80、tab 行到描述 32）。
   但写死之后 1281→1439 窗口变宽而 tab 不长，1232px 整行被 justify-content:center
   越推越居中，到 1439 左右各空出约 104px。改成按容器等分：
     · 1280：(1232 - 96) / 5 = 227.2px  ← 和原来写死的值逐位相同，端点观感零变化
     · 1439：(1391 - 96) / 5 = 259px    ← 跟着长，左右始终只留 24
   用等分而不是照抄 1024-1279 那档的 `flex:1 0 auto; padding:0 32px`，
   是因为你 1280 设计稿里 5 个胶囊量出来是等宽的，
   `flex:1 0 auto` 会变成按文字长短各不相同。
   ====================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
    /* 1) 抢回被 header.html 顶层 display:none 压掉的整行 */
    .advantage-tabs-row { display: flex !important; }

    /* 2) 宽度由写死 227.2px 改为按容器等分，96px = 4 个 24px 间距 */
    .advantage-tab {
        width: calc((100% - 96px) / 5) !important;
        flex: 0 0 auto !important;
    }

    /* 3) 未选中底色与 1024-1279 那档对齐（#F8F8F8 → #F5F5F5）：
          你给的 1280 设计稿反算出来更接近 245,245,245。
          不认这条就单独删掉下面这一行，其余照旧。 */
    .advantage-tab:not(.active) { background: #F5F5F5 !important; }
}

/* ======================================================================
   单号查询输入框 · 「输入中」态：去投影 + 外圈 2px 浅红描边（2026-08-26）
   整块可以直接删掉，删掉就完全回到原样；上面 10 个手绘断点里一行都没动。

   设计稿（输入框状态组件，属性 focus输入中）：border-radius 40px，
   外圈 `2px solid #FFF0F0`（红色/red-1），内圈保持主题色 #F74054 的描边，无投影。

   为什么用 box-shadow 的扩散(spread)而不是真的加一层 border：
     · 真加 border 会让盒子长大 4px（或者要靠 padding 反补），聚焦瞬间整行会跳一下；
       现有 10 个断点的做法正是「默认就留 1px 透明边，hover/focus 只换颜色」来防抖动，
       扩散式阴影同理 —— 它画在边框外沿、不占布局、还会自动跟随 300px 的胶囊圆角。
     · `0 0 0 2px` 没有偏移和模糊，视觉上就是一圈实心描边，不是投影。
     · 它同时**替换**掉了默认那条 `0 4px 8px rgba(41,0,5,0.05)` 的投影
       （10 个断点里这条投影值完全一致），正好满足「投影去掉」。
   内圈的 #F74054 由各断点原有的 `input:focus{border-color:#F74054}` 提供，这里不动。
   hover 态和失焦态维持原样，只有聚焦（= 输入中）才换。
   ====================================================================== */
.yundan-search input {
    /* 原本只有 border-color，补上 box-shadow 让描边和投影一起淡入淡出，
       不加的话失焦时描边会瞬间消失，和边框的 .2s 渐变对不上 */
    transition: border-color .2s, box-shadow .2s !important;
}
.yundan-search input:focus {
    box-shadow: 0 0 0 2px #FFF0F0 !important;
}

/* ======================================================================
   「行业领先的服务」卡片：去掉底部投影（缺陷单，2026-08-26）
   整块可以直接删掉，删掉就完全回到原样；上面 10 个手绘断点里一行都没动。

   原本的投影分两处，都要盖掉：
     1) 9 个断点里的 .service-card { box-shadow: 0 6px 14px -6px rgba(41,0,5,.12) }
        以及 1920/1440/1280 三档的 .service-card.active { 0 16px 24px -14px rgba(41,0,5,.28) }
        —— 这两个值在各断点里完全一致，所以不用包 @media，一条就够。
     2) 前面那些 :has(2/3/4 张卡) 的规则（≥1280 那三组 + 1024/840/768/600/480/360
        六档里的 2 张卡那组），它们带 !important 且特异度到 (0,8,0)/(0,9,0)，
        普通选择器压不住，必须原样抄一遍选择器、放在更后面再覆盖。
        那三组里的 `inset 0 0 0 1.5px rgba(255,255,255,…)` 是卡片自身的边缘高光
        （展开动画期间用来盖住 1px 缝），**不是投影，保留**；只删掉后面那条外投影。
   transition 里的 box-shadow 不用动，去掉后本来就没东西可过渡。
   ====================================================================== */
.service-card,
.service-card.active {
    box-shadow: none !important;
}
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide,
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(3)) > .service-card.swiper-slide,
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(4)) > .service-card.swiper-slide {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12) !important;
}
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(2)) > .service-card.swiper-slide.active,
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(3)) > .service-card.swiper-slide.active,
.service-swiper > .service-list.swiper-wrapper:has(> .service-card:first-child:nth-last-child(4)) > .service-card.swiper-slide.active {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35) !important;
}

/* ======================================================================
   「行业领先的服务」卡片里的「申请合作」按钮：英文下左右间距被挤掉
   （缺陷单，2026-08-27）。整块可以直接删掉，删掉就完全回到原样；
   上面 10 个手绘断点里一行都没动。

   成因：9 个断点里有 8 个是给按钮写**死宽度** + justify-content:center
   （1440-1919/1024-1279/840-1023/768-839/600-767/480-599 是 144px，
     1280-1439 是 140px，360-479 是 136px），只有 ≥1920 那档写的是
     padding: 0 24px（宽度自适应）。
   死宽度是照中文「申请合作」量的：18px 四个汉字 = 72，加 gap 4 + 箭头 20
   = 内容 96，144 - 96 = 48，左右各 24px —— 和 ≥1920 那档的 padding 一致。
   换成英文 "Cooperation" 内容涨到约 123，144 - 123 = 21，左右只剩 10px 出头，
   就成了截图里那样贴边。

   修法：把死宽度换成 min-width + 左右 padding，数值取「中文正好等于原宽度」
   的那一组，所以**中文下渲染结果和以前一模一样**（96 + 48 = 144 命中 min-width），
   英文超出 min-width 之后按钮自己变宽，左右照样各 24px。
   全局有 * { box-sizing: border-box }，min-width 含 padding，算得上。
   .expand-top 是 column flex + align-items:flex-start，width:auto 会收缩到内容宽，
   所以按钮不会被拉满。
   ≥1920 那档本来就是 padding 写法，英文已经是 24px，这里没管它。
   ====================================================================== */
/* 原来 144px / 中文左右各 24px 的六档 */
@media (min-width: 1440px) and (max-width: 1919px),
       (min-width: 480px) and (max-width: 1279px) {
    .service-card .btn-apply {
        width: auto;
        min-width: 144px;
        padding: 0 24px;
    }
}
/* 1280-1439 这档原来是 140px，中文左右各 22px，保持它自己的观感 */
@media (min-width: 1280px) and (max-width: 1439px) {
    .service-card .btn-apply {
        width: auto;
        min-width: 140px;
        padding: 0 22px;
    }
}
/* 360-479 及以下：字号是 16px，中文内容 88，136 - 88 = 48，左右各 24px */
@media (max-width: 479px) {
    .service-card .btn-apply {
        width: auto;
        min-width: 136px;
        padding: 0 24px;
    }
}

/* ======================================================================
   案例轮播（「每一次选择，都是信任」）卡片投影太重（缺陷单，2026-08-27）
   整块可以直接删掉，删掉就完全回到原样；上面 10 个手绘断点里一行都没动。

   只调**浓度**，每一档的几何（offset / blur）都按原样抄回来，观感形状不变：
     侧卡  rgba(41,0,5,.1)  → .05    （1280-1439 那档原本就是 .05 → .03）
     激活卡 rgba(41,0,5,.12) → .06
   截图实测（1901px 宽，即 1440-1919 档）：激活卡下沿最深 239，侧卡 244；
   减半后约 245 / 249。还嫌重就只改这几个 alpha，别动 offset/blur。

   注意 ≥1024 走的是 transform 缩放方案，侧卡被 scale(0.805970) 缩过，
   所以那一档的数值是预乘 ×1.2407 的补偿值（2×1.2407=2.48，16×1.2407=19.85），
   和上面「案例轮播 transform 方案」那块保持同一套算法。
   ====================================================================== */
@media (min-width: 1024px) {
    .swiper-cases .swiper-card {
        box-shadow: 0 2.48px 19.85px 0 rgba(41, 0, 5, .05);
    }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    .swiper-cases .swiper-card {
        box-shadow: 0 9.93px 29.78px 0 rgba(41, 0, 5, .03);
    }
}
@media (max-width: 1023px) {
    .swiper-cases .swiper-card {
        box-shadow: 0 2px 16px 0 rgba(41, 0, 5, .05);
    }
}
/* 激活卡各档手绘值完全一致（0 8 24 .12），一条顶层规则就够，
   特异度和手绘那条一样(0,4,0)，靠在后面取胜，不用 !important */
.swiper-cases .swiper-slide.swiper-slide-active .swiper-card {
    box-shadow: 0 8px 24px 0 rgba(41, 0, 5, .06);
}