@charset "UTF-8";
/*
Theme Name: flatsome Child
Description: This is a child theme for flatsome Theme
Author: dak
Template: flatsome
Version: 1.0.1
*/

/**
 * ==================== 性能优化说明 ====================
 * 所有CSS文件已通过 functions/script-style.php 使用 wp_enqueue_style 并行加载
 * 原18个 @import 串行加载已优化为并行加载，性能提升5-10倍
 *
 * 加载的CSS文件列表：
 * - diy.css (基础样式)
 * - css/product.css (产品单页)
 * - css/page.css (单页面)
 * - css/single-archive.css (文章存档)
 * - css/single.css (文章单页)
 * - css/block-faq-list.css (折叠卡)
 * - css/plugin.css (插件)
 * - css/font-type.css (字体)
 * - css/header.css (头部)
 * - css/footer.css (底部)
 * - css/block-btn.css (按钮)
 * - css/clean-layout.css (布局/间距/填充/阴影)
 * - css/icon.css (图标)
 * - css/block-breadcrumb.css (面包屑)
 * - css/block-slider.css (轮播)
 * - css/block-lightbox.css (弹窗)
 * - css/block-tabs.css (切换卡)
 * - css/block-UX.css (UX编辑器，条件加载)
 * ===================================================
 */
 
 
 @media (min-width: 851px) {
   .wpml-ls-statics-shortcode_actions {
                 width: 140px;
        min-width: 140px;
        max-width: 140px;
     }
      .wpml-ls-legacy-dropdown a {

    border: none !important;
padding: 12px 15px;

}

}

 .wpml-ls-legacy-dropdown a {

    border: none !important;


}

  
 
 /* WPML 手机端：只显示国旗，并缩短整个下拉框 */
@media (max-width: 849px) {

    /* 最外层宽度压缩 */
    .wpml-ls,
    .wpml-ls-item,
    .wpml-ls-item > a {
        width: auto !important;
        min-width: 0 !important;
    }

    /* 主按钮变窄 */
    .wpml-ls .wpml-ls-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        padding: 6px 8px !important;
        gap: 0 !important;
        line-height: 1 !important;
    }

    /* 隐藏语言文字 */
    .wpml-ls .wpml-ls-native,
    .wpml-ls .wpml-ls-display {
        display: none !important;
    }

    /* 国旗 */
    .wpml-ls .wpml-ls-flag {
        width: 22px !important;
        height: auto !important;
        margin: 0 !important;
        display: block;
    }

    /* 下拉菜单本身也缩窄 */
    .wpml-ls .wpml-ls-sub-menu {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
    }

    .wpml-ls .wpml-ls-sub-menu li,
    .wpml-ls .wpml-ls-sub-menu a {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        padding: 6px !important;
        text-align: center !important;
    }

    /* 去掉可能撑宽的文字 */
    .wpml-ls .wpml-ls-sub-menu .wpml-ls-native,
    .wpml-ls .wpml-ls-sub-menu .wpml-ls-display {
        display: none !important;
    }
}


 .text-box-content  h1{
    line-height: 1.4 !important;
}

 .seopress-user-consent button {
    padding: 5px 24px !important;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 1 auto;
    min-width: 120px;
    background: var(--fs-color-primary);
    color: #ffffff;
}

 
 /*
 * 页面名称：上海机械项目 - 工业工程标尺
 *
 * Section Class：
 * rule
 */

/* ==========================================================================
   Section 基础
   ========================================================================== */

.rule {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* 内容始终显示在标尺上方 */
.rule .section-content,
.rule .row,
.rule .col,
.rule .col-inner {
    position: relative;
    z-index: 5;
}

/*
 * 修复旧版 CSS 可能遗留的隐藏状态。
 * 标题、正文和按钮保持正常显示。
 */
.rule .col-inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ==========================================================================
   上下标尺公共结构
   ========================================================================== */

.rule-ruler {
    --rule-unit-width: 18px;
    --rule-color: rgba(92, 98, 104, 0.56);
    --rule-color-strong: rgba(69, 74, 80, 0.78);
    --rule-base-color: rgba(92, 98, 104, 0.3);

    position: absolute;
    left: 0;
    z-index: 2;

    display: flex;
    width: max-content;
    height: 34px;

    pointer-events: none;
    user-select: none;

    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* 上方标尺 */
.rule-ruler.top {
    top: 0;
}

/* 下方标尺 */
.rule-ruler.bottom {
    bottom: 0;
}

/* 每一组重复标尺 */
.rule-ruler-group {
    position: relative;

    display: flex;
    flex: 0 0 auto;

    width: max-content;
    height: 34px;
}

/* ==========================================================================
   标尺基准线
   ========================================================================== */

.rule-ruler-group::before {
    content: "";

    position: absolute;
    left: 0;

    width: 100%;
    height: 1px;

    background: var(--rule-base-color);
}

/* 上方基准线位于顶部 */
.rule-ruler.top .rule-ruler-group::before {
    top: 0;
}

/* 下方基准线位于底部 */
.rule-ruler.bottom .rule-ruler-group::before {
    bottom: 0;
}

/* ==========================================================================
   单个刻度单位
   ========================================================================== */

.rule-mark {
    position: relative;

    display: block;
    flex: 0 0 var(--rule-unit-width);

    width: var(--rule-unit-width);
    height: 34px;
}

/* 刻度线公共样式 */
.rule-mark::before {
    content: "";

    position: absolute;
    left: 0;

    width: 1px;
    height: 8px;

    background: var(--rule-color);
}

/* 上方刻度向下 */
.rule-ruler.top .rule-mark::before {
    top: 0;
}

/* 下方刻度向上 */
.rule-ruler.bottom .rule-mark::before {
    bottom: 0;
}

/* 每 5 格一个中刻度 */
.rule-mark.medium::before {
    height: 13px;
}

/* 每 10 格一个大刻度 */
.rule-mark.large::before {
    width: 1px;
    height: 20px;

    background: var(--rule-color-strong);
}

/* ==========================================================================
   刻度数字
   ========================================================================== */

.rule-number {
    position: absolute;
    left: -3px;

    display: block;

    color: rgba(81, 86, 92, 0.72);

    font-size: 9px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
}

/* 上方数字放在刻度下方，朝向内容 */
.rule-ruler.top .rule-number {
    top: 23px;
    bottom: auto;
}

/* 下方数字放在刻度上方，朝向内容 */
.rule-ruler.bottom .rule-number {
    top: auto;
    bottom: 23px;
}

/* ==========================================================================
   防止旧样式和伪元素干扰
   ========================================================================== */

.rule::before,
.rule::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   平板
   ========================================================================== */

@media (max-width: 849px) {
    .rule-ruler {
        --rule-unit-width: 17px;
    }
}

/* ==========================================================================
   手机
   ========================================================================== */

@media (max-width: 549px) {
    .rule-ruler {
        --rule-unit-width: 16px;

        height: 29px;
    }

    .rule-ruler-group,
    .rule-mark {
        height: 29px;
    }

    .rule-mark::before {
        height: 7px;
    }

    .rule-mark.medium::before {
        height: 11px;
    }

    .rule-mark.large::before {
        height: 17px;
    }

    .rule-number {
        left: -2px;
        font-size: 8px;
    }

    .rule-ruler.top .rule-number {
        top: 20px;
    }

    .rule-ruler.bottom .rule-number {
        bottom: 20px;
    }
}

/* ==========================================================================
   减少动画偏好
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rule-ruler {
        will-change: auto;
    }
}


 
/*
 * Assembly Production - Hover Bottom Gradient Line
 */

.assembly-production .item {
    position: relative;
}

.assembly-production .item .col-inner {
    position: relative;
}


/* 底部渐变线 */
.assembly-production .item .col-inner::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

background: linear-gradient(
    90deg,
    #0F4C81 0%,
    #0F4C81 55%,
    rgba(255,255,255,.65) 100%
);

    transition:
        width .5s cubic-bezier(.22,1,.36,1);

    z-index: 5;
}


/* hover 从左向右展开 */
.assembly-production .item:hover .col-inner::after {
    width: 100%;
}


/* Assembly Production：PC 端图标与文字垂直居中 */
@media (min-width: 850px) {

    /* 卡片内部占满等高列 */
    .assembly-production .item > .col-inner {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Featured Box 横向排列并整体垂直居中 */
    .assembly-production .item .featured-box {
        display: flex !important;
        align-items: center !important;
        width: 100%;
        height: 100%;
    }

    /* 图标区域 */
    .assembly-production .item .icon-box-img {
        flex: 0 0 auto;
        margin: 0 20px 0 0 !important;
    }

    .assembly-production .item .icon-box-img .icon,
    .assembly-production .item .icon-box-img .icon-inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 文字区域 */
    .assembly-production .item .icon-box-text {
        display: flex;
        flex: 1;
        align-items: center;
        min-width: 0;
        padding: 0 !important;
    }

    /* 清除文字默认上下间距 */
    .assembly-production .item .icon-box-text .ux-text,
    .assembly-production .item .icon-box-text p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


 /*
 * 通用图标尺寸控制
 */

 
  .max-64 *{
     max-width: 64px;
 }
 
 /*
 * 页面名称：上海机械项目 - 不锈钢斜切 CTA
 *
 * Section Class：
 * cta-dak
 */

.cta-dak {
    --cta-navy: #0F4C81;
    --cta-red: #ee2124;
    --cta-cut-position: 50%;
    --cta-cut-width: 18px;

    position: relative;
    overflow: hidden;

    background: var(--cta-navy) !important;
    isolation: isolate;
}

/* 移除 Flatsome 原有背景遮罩 */
.cta-dak > .section-bg,
.cta-dak > .section-bg-overlay {
    opacity: 0 !important;
}

/* ==========================================================================
   左侧：拉丝不锈钢金属底
   ========================================================================== */

.cta-dak::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        /* 金属局部高光 */
        radial-gradient(
            circle at 24% 35%,
            rgba(255, 255, 255, 0.95) 0,
            rgba(255, 255, 255, 0.35) 18%,
            rgba(255, 255, 255, 0) 42%
        ),

        /* 拉丝细纹 */
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.11) 0,
            rgba(255, 255, 255, 0.11) 1px,
            rgba(35, 44, 54, 0.035) 1px,
            rgba(35, 44, 54, 0.035) 3px
        ),

        /* 主金属明暗 */
        linear-gradient(
            110deg,
            #8b9299 0%,
            #d7dadd 12%,
            #f8f9fa 24%,
            #aeb4ba 36%,
            #eef0f2 49%,
            #858c93 63%,
            #dfe2e5 78%,
            #a0a6ac 100%
        );

    clip-path: polygon(
        0 0,
        calc(var(--cta-cut-position) + 42px) 0,
        calc(var(--cta-cut-position) - 42px) 100%,
        0 100%
    );
}

/* ==========================================================================
   中间：斜切钢板厚度
   使用多层高光与阴影制造金属侧边
   ========================================================================== */

/* ==========================================================================
   中间：斜切钢板厚度 (完全保留原汁原味多重渐变 + 解决上下缝隙)
   ========================================================================== */

.cta-dak .section-content::before {
    content: "";

    position: absolute;
    /* 修改：向上拉伸 50%，确保绝对超出外层容器 */
    top: -50%;
    left: calc(var(--cta-cut-position) - 5px);
    z-index: 1;

    width: var(--cta-cut-width);
    /* 修改：高度设为 200%，彻底填满并贯穿上下边缘 */
    height: 200%;

    /* 你的原始多重金属渐变 - 完全保留 */
    background:
        linear-gradient(
            90deg,
            #4e555c 0%,
            #858d94 8%,
            #e8ebed 18%,
            #ffffff 27%,
            #a3aab0 43%,
            #5c636a 58%,
            #ccd0d3 73%,
            #676e75 88%,
            #343a40 100%
        );

    /* 你的原始阴影与高光 - 完全保留 */
    box-shadow:
        -9px 0 16px rgba(0, 0, 0, 0.18),
        8px 0 18px rgba(0, 0, 0, 0.28),
        inset 2px 0 1px rgba(255, 255, 255, 0.85),
        inset -3px 0 3px rgba(0, 0, 0, 0.35);

    transform: translateX(-50%) skewX(-18deg);

    pointer-events: none;
}

/* ==========================================================================
   内容层
   ========================================================================== */

.cta-dak .section-content {
    position: relative;
    z-index: 3;
}

.cta-dak .row {
    position: relative;
    z-index: 4;
}

/* 左侧标题区域 */
.cta-dak .row > .col:first-child {
    padding-right: 76px;
}

.cta-dak .row > .col:first-child .col-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.cta-dak .row > .col:first-child h2 {

    margin: 0;

    color: #07101f !important;

    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65);
}

/* 右侧内容区域 */
.cta-dak .row > .col:nth-child(2) {
    padding-left: 76px;
}

.cta-dak .row > .col:nth-child(2) .col-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-height: 170px;
}

.cta-dak .row > .col:nth-child(2) p {
    max-width: 720px;
    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.7;
}

.cta-dak .row > .col:nth-child(2) p:last-child {
    margin-bottom: 20px;
}



/* ==========================================================================
   平板
   ========================================================================== */

@media (max-width: 849px) {
    .cta-dak {
        --cta-cut-position: 52%;
        --cta-cut-width: 72px;
    }

    .cta-dak .row > .col:first-child {
        padding-right: 52px;
    }

    .cta-dak .row > .col:nth-child(2) {
        padding-left: 52px;
    }



    .cta-dak .row > .col:first-child h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   手机：改为上下不锈钢 / 深蓝分区
   中间保留有厚度的斜切钢板
   ========================================================================== */

@media (max-width: 549px) {
    .cta-dak {
        background: var(--cta-navy) !important;
    }

    .cta-dak::before {
        height: 44%;
        background: transparent;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 26px),
            0 100%
        );
    }

    .cta-dak .section-content::before {
      
            display: none;
    }

    .cta-dak .section-content::after {
        top: calc(44% - 12px);
        left: -5%;

        width: 110%;
        height: 28px;

        transform: skewY(-4deg);

        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .cta-dak .row > .col:first-child,
    .cta-dak .row > .col:nth-child(2) {
        padding-right: 15px;
        padding-left: 15px;
    }



    .cta-dak .row > .col:first-child h2 {
        max-width: 100%;

        font-size: 25px;
        text-align: left;
        color: #fff !important;
        text-shadow: 0 0 BLACK;
    }

    .cta-dak .row > .col:nth-child(2) p {
        font-size: 14px;
    }
}
 
 
 /*
 * 页面名称:Development Service- 
 
 自动循环竖线时间轴
 *
 * 功能：
 * 1. 圆点始终与竖线圆心对齐
 * 2. 激活节点放大后不偏移
 * 3. 圆圈内部不显示穿过的竖线
 * 4. 支持 JS 自动循环填充
 * 5. 使用 Remix Icon 对勾图标
 */


.line-li-road {
    --timeline-color: #ee2124;
    --timeline-line-color: rgba(238, 33, 36, 0.2);
    --timeline-x: 13px;
    --timeline-progress: 0px;

    position: relative;
}

/* ==========================================================================
   列表基础
   ========================================================================== */

.line-li-road ul {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

/* 灰色底线 */
.line-li-road ul::before {
    content: "";

    position: absolute;
    top: 11px;
    bottom: 11px;
    left: var(--timeline-x);
    z-index: 0;

    width: 2px;

    background: var(--timeline-line-color);

    transform: translateX(-50%);
}

/* 红色动态填充线 */
.line-li-road ul::after {
    content: "";

    position: absolute;
    top: 11px;
    left: var(--timeline-x);
    z-index: 1;

    width: 2px;
    height: var(--timeline-progress);

    max-height: calc(100% - 22px);

    background: var(--timeline-color);

    transform: translateX(-50%);

    transition:
        height 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   每个时间轴项目
   ========================================================================== */

.line-li-road li {
    position: relative;
    z-index: 2;

    min-height: 30px;

    margin: 0 !important;
    padding: 0 0 22px 46px !important;

    color: #8891a3;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;

    list-style: none !important;

    transform: none !important;

    transition:
        color 0.4s ease,
        font-weight 0.4s ease,
        opacity 0.4s ease;
}

.line-li-road li:last-child {
    padding-bottom: 0 !important;
}

.line-li-road li::marker {
    content: "";
}

/* ==========================================================================
   圆形对勾节点
   ========================================================================== */

.line-li-road li::before {
    content: "\eb7b";

    position: absolute;
    top: 0.78em;
    left: var(--timeline-x);
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    border: 1px solid var(--timeline-color);
    border-radius: 50%;

    background: #fff;
    color: var(--timeline-color);

    font-family: "remixicon" !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    box-sizing: border-box;

    transition:
        width 0.35s ease,
        height 0.35s ease,
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        font-size 0.35s ease;
}

/*
 * 白色遮罩：
 * 遮住圆圈内部的竖线。
 * 和节点使用完全相同的圆心坐标。
 */
.line-li-road li::after {
    content: "";

    position: absolute;
    top: 0.78em;
    left: var(--timeline-x);
    z-index: 3;

    width: 14px;
    height: 22px;

    background: #fff;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    pointer-events: none;

    transition:
        width 0.35s ease,
        height 0.35s ease;
}

/* ==========================================================================
   已完成状态
   ========================================================================== */

.line-li-road li.is-complete {
    color: #31394a;
    opacity: 1;
}

.line-li-road li.is-complete::before {
    background: var(--timeline-color);
    border-color: var(--timeline-color);
    color: #fff;
}

/* ==========================================================================
   当前激活状态
   ========================================================================== */

/*
 * 不移动整个 li。
 * 否则圆点也会跟着文字一起偏移。
 */
.line-li-road li.is-active {
    color: #111827;
    font-weight: 600;

    transform: none !important;
    opacity: 1;
}

/*
 * 通过宽高放大，不使用 scale。
 * left 和 translate 始终不变，因此圆心永久对齐竖线。
 */
.line-li-road li.is-active::before {
    left: var(--timeline-x) !important;

    width: 24px;
    height: 24px;

    background: var(--timeline-color);
    border-color: var(--timeline-color);
    color: #fff;

    font-size: 13px;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    box-shadow:
        0 0 0 5px rgba(238, 33, 36, 0.12);
}

/* 激活节点内部遮罩同步增大 */
.line-li-road li.is-active::after {
    left: var(--timeline-x) !important;

    width: 18px;
    height: 28px;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
}

/* ==========================================================================
   未到达状态
   ========================================================================== */

.line-li-road li:not(.is-active):not(.is-complete) {
    opacity: 0.78;
}

/* ==========================================================================
   强制所有圆心共用同一个横坐标
   ========================================================================== */

.line-li-road ul::before,
.line-li-road ul::after {
    left: var(--timeline-x) !important;
    transform: translateX(-50%) !important;
}

.line-li-road li::before,
.line-li-road li::after,
.line-li-road li.is-active::before,
.line-li-road li.is-active::after {
    left: var(--timeline-x) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
}

/* ==========================================================================
   平板
   ========================================================================== */

@media (max-width: 849px) {
    .line-li-road {
        --timeline-x: 11px;
    }

    .line-li-road li {
        padding-left: 40px !important;
        padding-bottom: 19px !important;

        font-size: 15px;
    }

    .line-li-road li::before {
        width: 19px;
        height: 19px;

        font-size: 11px;
    }

    .line-li-road li::after {
        width: 13px;
        height: 21px;
    }

    .line-li-road li.is-active::before {
        width: 23px;
        height: 23px;

        font-size: 12px;
    }

    .line-li-road li.is-active::after {
        width: 17px;
        height: 27px;
    }
}

/* ==========================================================================
   手机
   ========================================================================== */

@media (max-width: 549px) {
    .line-li-road {
        --timeline-x: 10px;
    }

    .line-li-road li {
        padding-left: 36px !important;
        padding-bottom: 17px !important;

        font-size: 14px;
    }

    .line-li-road li::before {
        width: 18px;
        height: 18px;

        font-size: 10px;
    }

    .line-li-road li::after {
        width: 12px;
        height: 20px;
    }

    .line-li-road li.is-active::before {
        width: 22px;
        height: 22px;

        font-size: 11px;
    }

    .line-li-road li.is-active::after {
        width: 16px;
        height: 26px;
    }
}

/* ==========================================================================
   减少动画偏好
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .line-li-road ul::after,
    .line-li-road li,
    .line-li-road li::before,
    .line-li-road li::after {
        transition: none !important;
    }
}


/*
 * 页面名称：多数量横向卡片轮播
 *
 * Row Class 使用：
 * slider-dak-step-c show-3-5
 * slider-dak-step-c show-4-5
 * slider-dak-step-c show-5-5
 */

.dak-step-c-slider-shell {
    --dak-step-c-gap: 18px;
    --dak-step-c-side-padding: 5vw;
    --dak-step-c-item-width: 320px;

    position: relative;
    width: 100vw;
    max-width: none;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);

    overflow: hidden;
    background: var(--dak-step-c-bg);
    isolation: isolate;
}

/* ==========================================================================
   轮播轨道
   ========================================================================== */

.dak-step-c-slider-shell .slider-dak-step-c {
    position: relative;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        24px
        var(--dak-step-c-side-padding)
        18px !important;

    gap: var(--dak-step-c-gap);

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--dak-step-c-side-padding);

    overscroll-behavior-x: contain;
    scrollbar-width: none;

    cursor: grab;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;

    box-sizing: border-box;
}

.dak-step-c-slider-shell .slider-dak-step-c::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.dak-step-c-slider-shell .slider-dak-step-c::before,
.dak-step-c-slider-shell .slider-dak-step-c::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   卡片宽度
   同时兼容 .item 和 .col
   ========================================================================== */

.dak-step-c-slider-shell
.slider-dak-step-c
> .item,
.dak-step-c-slider-shell
.slider-dak-step-c
> .col {
    position: relative !important;
    left: auto !important;

    display: block !important;
    float: none !important;

    flex: 0 0 var(--dak-step-c-item-width) !important;

    width: var(--dak-step-c-item-width) !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    transform: none !important;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    box-sizing: border-box;
}

/* 保留 Flatsome 的 col-inner */
.dak-step-c-slider-shell
.slider-dak-step-c
> .item
> .col-inner,
.dak-step-c-slider-shell
.slider-dak-step-c
> .col
> .col-inner {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   图片比例
   重要：不再强制所有 .img 宽度为 100%
   UX Builder 设置的 18%、20%、100% 都会保留
   ========================================================================== */

/*
 * 不修改 .img 外层宽度。
 * Flatsome 生成的：
 *
 * #image_xxx {
 *     width: 18%;
 * }
 *
 * 可以正常生效。
 */
.dak-step-c-slider-shell
.slider-dak-step-c
.img {
    max-width: 100%;
}

/* 固定比例图片容器 */
.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-ux-ratio {
    position: relative !important;

    width: 100% !important;
    height: 0 !important;

    padding-top: var(--dak-step-c-ux-ratio) !important;

    overflow: hidden;
}

/* 固定比例图片 */
.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-ux-ratio
> img {
    position: absolute !important;
    inset: 0 !important;

    display: block;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit:
        var(--dak-step-c-object-fit, cover) !important;

    object-position:
        var(
            --dak-step-c-object-position,
            center center
        ) !important;

    transform: none !important;
}

/* 自然比例图片容器：适合图标、Logo、小图 */
.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-natural-ratio {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    padding-top: 0 !important;

    overflow: visible;
}

/* 自然比例图片保持自身比例 */
.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-natural-ratio
> img {
    position: static !important;
    inset: auto !important;

    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
}

/* ==========================================================================
   禁止图片原生拖拽，但保留链接点击
   ========================================================================== */

.dak-step-c-slider-shell
.slider-dak-step-c img {
    pointer-events: auto !important;

    -webkit-user-drag: none;
    user-drag: none;

    user-select: none;
    -webkit-user-select: none;
}

.dak-step-c-slider-shell
.slider-dak-step-c a,
.dak-step-c-slider-shell
.slider-dak-step-c button,
.dak-step-c-slider-shell
.slider-dak-step-c input,
.dak-step-c-slider-shell
.slider-dak-step-c select,
.dak-step-c-slider-shell
.slider-dak-step-c textarea,
.dak-step-c-slider-shell
.slider-dak-step-c label {
    pointer-events: auto !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c a,
.dak-step-c-slider-shell
.slider-dak-step-c button {
    cursor: pointer;
}

/* ==========================================================================
   PC 拖拽状态
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .dak-step-c-slider-shell
    .slider-dak-step-c {
        cursor: grab;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging {
        cursor: grabbing !important;

        scroll-snap-type: none !important;
        scroll-behavior: auto !important;

        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging
    > .item,
    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging
    > .col {
        cursor: grabbing !important;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging
    *,
    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging
    *::before,
    .dak-step-c-slider-shell
    .slider-dak-step-c.is-dragging
    *::after {
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}

/* ==========================================================================
   两侧渐隐
   ========================================================================== */

.dak-step-c-slider-shell::before,
.dak-step-c-slider-shell::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;

    width: clamp(40px, 5vw, 100px);

    pointer-events: none !important;
}

.dak-step-c-slider-shell::before {
    left: 0;

    background: linear-gradient(
        90deg,
        var(--dak-step-c-bg) 0%,
        rgba(245, 245, 248, 0.92) 28%,
        rgba(245, 245, 248, 0.48) 62%,
        rgba(245, 245, 248, 0) 100%
    );
}

.dak-step-c-slider-shell::after {
    right: 0;

    background: linear-gradient(
        270deg,
        var(--dak-step-c-bg) 0%,
        rgba(245, 245, 248, 0.92) 28%,
        rgba(245, 245, 248, 0.48) 62%,
        rgba(245, 245, 248, 0) 100%
    );
}

/* ==========================================================================
   左右按钮
   ========================================================================== */

.dak-step-c-nav {
    position: absolute !important;
    top: 46% !important;
    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 48px !important;
    min-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.72) !important;

    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, 0.82) !important;

    color: #151515 !important;

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.14) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(140%);

    backdrop-filter:
        blur(16px)
        saturate(140%);

    cursor: pointer !important;
    pointer-events: auto !important;

    transform:
        translateY(-50%) !important;

    transition:
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.dak-step-c-nav--prev {
    left: clamp(8px, 1.6vw, 28px) !important;
}

.dak-step-c-nav--next {
    right: clamp(8px, 1.6vw, 28px) !important;
}

.dak-step-c-nav:hover,
.dak-step-c-nav:focus-visible {
    background:
        rgba(255, 255, 255, 0.98) !important;

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.19) !important;

    transform:
        translateY(-50%)
        scale(1.04) !important;
}

.dak-step-c-nav:active {
    transform:
        translateY(-50%)
        scale(0.96) !important;
}

.dak-step-c-nav svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

/* ==========================================================================
   小尺寸点位
   ========================================================================== */

.dak-step-c-dots {
    position: relative;
    z-index: 35;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    width: 100%;
    min-height: 12px;

    padding: 0 20px 14px;

    box-sizing: border-box;
}

.dak-step-c-dot {
    display: block !important;

    width: 5px !important;
    min-width: 5px !important;

    height: 5px !important;
    min-height: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        rgba(20, 20, 20, 0.2) !important;

    box-shadow: none !important;

    opacity: 1 !important;

    cursor: pointer;

    transition:
        width 0.25s ease,
        min-width 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.dak-step-c-dot.is-active {
    width: 14px !important;
    min-width: 14px !important;

    background:
        var(--primary-color, #ee2124) !important;
}

.dak-step-c-dot:hover {
    background:
        rgba(20, 20, 20, 0.42) !important;

    transform: scale(1.08);
}

.dak-step-c-dot.is-active:hover {
    background:
        var(--primary-color, #ee2124) !important;
}

.dak-step-c-dot:focus-visible {
    outline:
        2px solid
        var(--primary-color, #ee2124);

    outline-offset: 3px;
}

/* ==========================================================================
   Flickity 残留清理
   ========================================================================== */

.dak-step-c-slider-shell
.flickity-viewport,
.dak-step-c-slider-shell
.flickity-slider {
    position: static !important;

    width: auto !important;
    height: auto !important;

    overflow: visible !important;
    transform: none !important;
}

.dak-step-c-slider-shell
.flickity-button,
.dak-step-c-slider-shell
.flickity-page-dots {
    display: none !important;
}

/* ==========================================================================
   内容不足时
   ========================================================================== */

.dak-step-c-slider-shell.is-static
.slider-dak-step-c {
    justify-content: center;

    overflow-x: hidden !important;
    scroll-snap-type: none !important;

    cursor: default;
}

.dak-step-c-slider-shell.is-static
.dak-step-c-nav,
.dak-step-c-slider-shell.is-static
.dak-step-c-dots {
    display: none !important;
}

.dak-step-c-slider-shell.is-static::before,
.dak-step-c-slider-shell.is-static::after {
    display: none !important;
}

/* ==========================================================================
   平板
   ========================================================================== */

@media (max-width: 849px) {
    .dak-step-c-slider-shell {
        --dak-step-c-gap: 16px;
        --dak-step-c-side-padding: 5vw;
    }

    .dak-step-c-nav {
        width: 44px !important;
        min-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
    }

    .dak-step-c-nav svg {
        width: 19px;
        height: 19px;
    }

    .dak-step-c-slider-shell::before,
    .dak-step-c-slider-shell::after {
        width: clamp(32px, 5vw, 68px);
    }
}

/* ==========================================================================
   手机
   ========================================================================== */

@media (max-width: 549px) {
    .dak-step-c-slider-shell {
        --dak-step-c-gap: 12px;
        --dak-step-c-side-padding: 18px;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    .dak-step-c-slider-shell::before,
    .dak-step-c-slider-shell::after {
        width: 24px;
    }

    .dak-step-c-nav {
        display: none !important;
    }

    .dak-step-c-dots {
        gap: 4px;
        padding-bottom: 10px;
    }

    .dak-step-c-dot {
        width: 4px !important;
        min-width: 4px !important;

        height: 4px !important;
        min-height: 4px !important;
    }

    .dak-step-c-dot.is-active {
        width: 12px !important;
        min-width: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dak-step-c-nav,
    .dak-step-c-dot {
        transition: none !important;
    }
}

/* ==========================================================================
   修复切换动画被强制吸附
   ========================================================================== */

.dak-step-c-slider-shell
.slider-dak-step-c {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c
> .item,
.dak-step-c-slider-shell
.slider-dak-step-c
> .col {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c.is-dragging,
.dak-step-c-slider-shell
.slider-dak-step-c.is-animating {
    scroll-snap-type: none !important;
}


/* ==========================================================================
   上海机械项目 - lis-3 列表圆点使用主题色
   ========================================================================== */

.lis-3 ul li::marker {
    color: var(--primary-color);
}


/* ==========================================================================
   上海机械项目 - 服务卡片按钮底部对齐
   对应 Row Class：btn-bottom
   ========================================================================== */

/* 每个列拉伸为等高布局 */
.btn-bottom > .col {
    display: flex;
}

/* 卡片内部使用纵向 Flex */
.btn-bottom > .col > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* 最后的按钮自动推到底部 */
.btn-bottom > .col > .col-inner > .button {
    margin-top: auto;
    margin-bottom: 0;
    align-self: flex-start;
}