/* ═══════════════════════════════════════════════════════════════════════════
   index2 的 EPC 工程服務段（接在 SOLUTIONS 後面）── 照設計稿 12.jpg（1306px 寬）
   動態照 list.html（js/epc.js、js/epc-cargo3d.js；吊掛段的規則出自 js/b2-editorial-chapter.js）：
     ① 開場釘住：捲動轉過 5 個應用（外環進度、圓點、SECTION 號碼、標籤、清單；3D 貨櫃自轉一圈＋爆炸圖，最後合回正面）
     ② 吊鉤降下、四條吊索扣上 → 放開釘住，貨櫃一邊往下吊一邊水平轉 3 圈、中段轉成線稿（經過的那一步亮起）
     ③ 結尾舞台釘在畫面底部：貨櫃轉回正面落進城市線稿（全寬、原色）→ 吊索鬆開、吊鉤收回
   全部 class 都有 epc- 前綴、變數只在 .epc 裡（首頁已經有 .ring、.dial 等同名 class）。
   ═══════════════════════════════════════════════════════════════════════════ */
.epc {
    --u: calc(100vw / 1306);
    --pad: calc(var(--u) * 122);
    --band: calc(var(--u) * 357);                /* 開場照片帶高度＝圓盤圓心高度 */
    --lane-x: 50%;                               /* 吊索（中軸）在畫面上的位置；手機移到右側 */
    --stage-h: max(560px, calc(var(--u) * 620));  /* 開場舞台（照片帶＋圓盤＋說明）的高度＝稿上開場的高度 */
    --epc-bg: #f1f1f1;
    --epc-ink: #131313;
    --epc-text: #272727;
    --epc-muted: #8b8b8b;
    --epc-mint: #76c5af;
    --epc-mint-band: #bae2d7;
    --epc-mint-pale: #b7e2d5;
    --epc-rule: #c6c6c6;
    --epc-rail: rgba(40, 50, 50, .16);           /* 中軸線＝吊索的顏色（.epc-rail-line 與 R5 的 .epc-rope 共用） */
    --epc-ease: cubic-bezier(.19, 1, .22, 1);
    --epc-en: 'Jost', 'Noto Sans TC', sans-serif;
    --epc-tc: 'Noto Sans TC', 'Jost', sans-serif;
    position: relative;
    overflow: clip;
    background: var(--epc-bg);
    color: var(--epc-text);
    font-family: var(--epc-tc);
    -webkit-font-smoothing: antialiased;
}
.epc *, .epc *::before, .epc *::after { box-sizing: border-box; }
:where(.epc) :where(p, h1, h2, h3, figure, ol) { margin: 0; padding: 0; }
:where(.epc) :where(button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
/* 簾幕揭露的「窗口」（內層由 js/index2-text-reveal.js 推上來）。
   overflow: clip 比 hidden 好 —— 不會生出捲動容器。
   .epc-sub 裡的 .epc-bar 是絕對定位在框內，一起被裁不影響。
   進場跑完 js 會掛 .rt-done 把裁切拿掉，字的下伸部才不會被切到。 */
.epc-eyebrow, .epc-title .epc-ln, .epc-sub { overflow: clip; }
.epc-eyebrow.rt-done, .epc-title .epc-ln.rt-done, .epc-sub.rt-done { overflow: visible; }
.epc-title .epc-ln > span { display: inline-block; }
.epc-sub > span { display: inline-block; }
.epc-ln { display: block; }

/* 進場那一秒才把這幾個元素提升成獨立合成層（js/epc.js 的 playIntro 掛 .is-entering，
   跑完就拿掉）。常駐掛 will-change 等於長期多佔幾張圖層，記憶體與合成成本都是白付的。 */
.epc.is-entering .epc-copy,
.epc.is-entering .epc-ring,
.epc.is-entering .epc-apps,
.epc.is-entering .epc-section-label,
.epc.is-entering .epc-intro-copy > * { will-change: transform, opacity; }
.epc-bar { position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; background: var(--epc-mint); transform-origin: 50% 100%; }
.epc-eyebrow { font: 400 clamp(10px, calc(var(--u) * 10.5), 14px)/1.3 var(--epc-en); letter-spacing: .02em; }
.epc-eyebrow > span { display: inline-block; }

/* ── ① 開場：跑道（釘住的長度由 js 依應用數量寫入）＋ 釘住的舞台 ───────────── */
.epc-intro { position: relative; height: 480vh; }
.epc-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; }
.epc-photo { position: absolute; left: 0; right: 0; top: 0; height: var(--band); overflow: hidden; background: #2d3538; }
.epc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.epc-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(20, 26, 29, .55) 0%, rgba(20, 26, 29, .18) 34%, rgba(20, 26, 29, 0) 55%),
                linear-gradient(180deg, rgba(20, 26, 29, .25), rgba(20, 26, 29, 0) 35%); }
.epc-copy { position: absolute; left: var(--pad); top: calc(var(--u) * 88); z-index: 2; color: #fff; }
.epc-title { margin-top: calc(var(--u) * 8); font: 500 clamp(30px, calc(var(--u) * 47), 88px)/1.02 var(--epc-en); letter-spacing: .004em; }
.epc-sub { position: relative; margin-top: calc(var(--u) * 24); padding-left: 14px; font: 500 clamp(13px, calc(var(--u) * 15), 22px)/1.25 var(--epc-tc); letter-spacing: .22em; }

/* 圓盤：圓心在照片帶下緣、畫面正中 */
.epc-dial { position: absolute; left: 50%; top: var(--band); z-index: 1; width: calc(var(--u) * 500); height: calc(var(--u) * 500);
    margin: calc(var(--u) * -250) 0 0 calc(var(--u) * -250); pointer-events: none; }
.epc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.epc-ring .epc-track { fill: none; stroke: url(#epc-ring-grad); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
/* 外環進度（list.html 的 orbit-progress）：從第一個點開始沿順時針填滿，第五個點＝整圈的 4/5。
   ⚠ 不能加 vector-effect: non-scaling-stroke —— 那會讓虛線改用螢幕座標、pathLength 的比例就對不上（弧長會畫錯） */
.epc-ring .epc-progress { fill: none; stroke: var(--epc-mint); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* 圓點（list.html 的 phase-node）：平常白點（淺底上多一圈薄荷細框），目前那一個實心薄荷＋白色內圈 */
.epc-ring .epc-dot { fill: #fff; stroke: none; transition: fill .25s, stroke .25s; }
.epc-ring .epc-dot.is-light { stroke: var(--epc-mint); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.epc-ring .epc-dot.is-on { fill: var(--epc-mint); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.epc-quads { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 356); height: calc(var(--u) * 356); margin: calc(var(--u) * -178) 0 0 calc(var(--u) * -178); }
.epc-quads > i { position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--epc-mint-pale) 0 90deg, transparent 90deg 180deg, var(--epc-mint-band) 180deg 270deg, transparent 270deg); }
.epc-section { position: absolute; left: calc(50% - var(--u) * 153); top: calc(50% - var(--u) * 176); z-index: 2; color: var(--epc-mint-pale); }
.epc-section-label { display: block; font: 400 clamp(9px, calc(var(--u) * 11), 15px)/1 var(--epc-en); letter-spacing: .02em; color: rgba(255, 255, 255, .8); }
.epc-num { display: block; margin-top: calc(var(--u) * 6); font: 500 calc(var(--u) * 88)/1 var(--epc-en); letter-spacing: -.02em; }
.epc-label { position: absolute; left: calc(50% + var(--u) * 27); top: calc(50% - var(--u) * 122); z-index: 2;
    font: 500 clamp(11px, calc(var(--u) * 12.5), 17px)/1.4 var(--epc-tc); letter-spacing: .16em; color: #fff; }
.epc-home { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

/* 右側：前後鈕＋應用清單（點了捲到那個應用） */
.epc-apps { position: absolute; right: var(--pad); top: calc(var(--band) - var(--u) * 18); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; }
.epc-app-nav { display: flex; gap: calc(var(--u) * 13); }
.epc-round { display: grid; place-items: center; width: max(34px, calc(var(--u) * 36)); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--epc-mint);
    box-shadow: 0 6px 18px rgba(40, 60, 60, .08); transition: transform .6s var(--epc-ease), background-color .35s, color .35s, opacity .35s; }
.epc-round svg { width: 34%; height: 34%; fill: currentColor; }
.epc-round:hover { transform: translateY(-3px); background: var(--epc-mint); color: #fff; }
.epc-round:disabled { opacity: .45; cursor: default; transform: none; background: #fff; color: var(--epc-mint); }
.epc-round:focus-visible { outline: 2px solid var(--epc-mint); outline-offset: 3px; }
.epc-app-list { margin-top: calc(var(--u) * 42); list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 7.5); }
.epc-app { display: flex; align-items: center; gap: calc(var(--u) * 11); padding: 3px 0; font: 400 clamp(11px, calc(var(--u) * 11), 15px)/1.4 var(--epc-tc); letter-spacing: .1em; color: #a6a6a6; transition: color .4s; }
.epc-app i { width: 5px; height: 5px; border-radius: 50%; background: #c3d6cf; transition: background-color .4s, box-shadow .4s, transform .6s var(--epc-ease); }
.epc-app:hover { color: #4b4b4b; }
.epc-app.is-on { color: var(--epc-text); font-weight: 500; }
.epc-app.is-on i { background: var(--epc-mint); box-shadow: 0 0 0 3px rgba(118, 197, 175, .22); transform: scale(1.25); }
.epc-app:focus-visible { outline: 1px solid var(--epc-mint); outline-offset: 3px; }

/* 左下：說明 */
.epc-intro-copy { position: absolute; left: var(--pad); top: calc(var(--u) * 408); z-index: 2; width: calc(var(--u) * 300); min-width: 250px; }
.epc-intro-title { font: 700 clamp(13px, calc(var(--u) * 13.5), 19px)/1.5 var(--epc-tc); letter-spacing: .08em; color: var(--epc-text); }
.epc-intro-desc { margin-top: calc(var(--u) * 22); font: 400 clamp(11px, calc(var(--u) * 10.5), 14px)/1.9 var(--epc-tc); letter-spacing: .06em; color: var(--epc-muted); }
.epc-statement { position: relative; margin-top: calc(var(--u) * 40); padding-left: 12px; font: 500 clamp(12px, calc(var(--u) * 12.5), 17px)/1.62 var(--epc-tc); letter-spacing: .1em; color: #333; }
.epc-statement::before { content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 2px; background: var(--epc-mint); }

/* ── ② EPC PROCESS ───────────────────────────────────────────────── */
.epc-process { position: relative; padding-top: calc(var(--u) * 31); outline: none; }
.epc-process-head { margin-left: var(--pad); }
.epc-process-title { margin-top: calc(var(--u) * 6); font: 500 clamp(30px, calc(var(--u) * 47), 88px)/1.08 var(--epc-en); letter-spacing: .004em; color: var(--epc-ink); }
.epc-process-sub { position: relative; margin-top: calc(var(--u) * 18); padding-left: 14px; font: 500 clamp(13px, calc(var(--u) * 15), 22px)/1.25 var(--epc-tc); letter-spacing: .22em; color: var(--epc-text); }
.epc-steps { position: relative; z-index: 0; margin: calc(var(--u) * 42) var(--pad) 0; list-style: none; }
.epc-step { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--u) * 152);
    /* 分隔線改實線（使用者要求：線條不要斷掉）。原本是「1px 實 ＋ 3px 空」
       的重複漸層（background-size: 4px 1px）＝ 點線；現在整條 1px 高鋪滿。 */
    background-image: linear-gradient(var(--epc-rule), var(--epc-rule)); background-size: 100% 1px; background-repeat: no-repeat; }
/* 最後一條（整組底線）同樣改實線 */
.epc-steps::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--epc-rule); }
.epc-step::before { content: ''; position: absolute; z-index: -1; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: 1px; bottom: 0;
    background: var(--epc-mint-band); transform: scaleY(0); transition: transform .85s var(--epc-ease); }
.epc-step.is-on::before { transform: scaleY(1); }
.epc-step-copy { align-self: stretch; padding: calc(var(--u) * 24) 0 calc(var(--u) * 22) calc(var(--u) * 5); }
.epc-step-no { display: flex; align-items: baseline; gap: calc(var(--u) * 12); }
.epc-step-idx { font: 400 clamp(10px, calc(var(--u) * 10.5), 13px)/1 var(--epc-en); letter-spacing: .06em; color: #555; }
.epc-step-name { font: 700 clamp(13px, calc(var(--u) * 13.5), 19px)/1.3 var(--epc-tc); letter-spacing: .14em; color: var(--epc-text); }
.epc-step-title { margin-top: calc(var(--u) * 38); font: 700 clamp(12px, calc(var(--u) * 12.5), 17px)/1.5 var(--epc-tc); letter-spacing: .1em; color: var(--epc-text); }
.epc-step-desc { margin-top: calc(var(--u) * 8); max-width: calc(var(--u) * 282); min-width: 230px; font: 400 clamp(11px, calc(var(--u) * 10.5), 14px)/1.85 var(--epc-tc); letter-spacing: .08em; color: #6f6f6f; }
/* 照片（list.html 的 b2-service-media）：框固定是寬的那個尺寸，平常左邊裁掉 22%（稿：216 ÷ 278），目前那一步整張打開 */
.epc-step-photo { flex: none; width: calc(var(--u) * 278); height: calc(var(--u) * 115); overflow: hidden; border-radius: 3px;
    clip-path: inset(0 0 0 22.3%); transition: clip-path .72s cubic-bezier(.215, .61, .355, 1); }
.epc-step-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .72s cubic-bezier(.215, .61, .355, 1); }
.epc-step.is-on .epc-step-photo { clip-path: inset(0 0 0 0); }
.epc-step.is-on .epc-step-photo img { transform: scale(1.025); }
/* R2.3 照片進退（使用者 2026-09-27：捲動時圖片都要有 zoom in/out；js/epc.js 的 CFG.media，開著才掛 .is-zoom）
   · 開場空拍照：js 寫 transform: scale()（這張沒有 transition），縮放期間用合成層，不必每格重畫整張大圖
   · 步驟照：捲動的縮放寫在獨立的 scale 屬性（js 寫 style.scale），跟上面 is-on 的 transform 相乘、互不干擾；
     transform 的 .72s 過渡只管「亮起」那一下，捲動的縮放不經過它，不會拖泥帶水。
     開著捲動縮放時，底圖倍率從 list.html 的 1.04 → 1.025 改成 1.015 → 1（相對幅度一樣 −1.5%），
     列中心「退」到 CFG.media.steps.mid 時，亮起的那一步就是那個倍率（預設 1 ＝ 原尺寸），不會多疊一層 4% */
.epc.is-zoom .epc-photo img { will-change: transform; }
/* 步驟照的捲動縮放（style.scale）每幀都在變：升層，不然整段流程區（1440×3830 的大圖層）每幀重畫（2026-09-27 效能量測） */
.epc.is-zoom .epc-step-photo img { will-change: transform, scale; }
.epc.is-zoom .epc-step-photo img { transform: scale(1.015); }
.epc.is-zoom .epc-step.is-on .epc-step-photo img { transform: scale(1); }
.epc-step.is-on .epc-step-idx { color: var(--epc-text); }

/* ── ③ POWER ON! SYSTEM LIVE：跑道（高度由 js 寫）＋ 釘在畫面底部的舞台（top 由 js 寫＝視窗高 − 舞台高）── */
.epc-finale { position: relative; }
.epc-finale-stage { position: sticky; top: 0; z-index: 5; padding: calc(var(--u) * 104) 0 0; }    /* 城市線稿下面直接接雙圖帶（css/closing.css 的 .cl-duo）；
   z 5 高於 3D 畫布（z 4）：吊下來的貨櫃從標題字後面經過；落點空位裡只有地面線，不會蓋到貨櫃 */
.epc-finale-title { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 26); font: 500 clamp(28px, calc(var(--u) * 47), 88px)/1.05 var(--epc-en); letter-spacing: .004em; color: var(--epc-ink); }
.epc-bolt { width: calc(var(--u) * 16); height: calc(var(--u) * 30); min-width: 11px; min-height: 20px; fill: var(--epc-mint); overflow: visible; }
.epc-city { position: relative; width: 100%; aspect-ratio: 2001 / 353; margin-top: calc(var(--u) * 58); }
/* 城市線稿（list.html：原檔黑線、整張 50%、multiply —— 看起來是灰線，全程不變色） */
.epc-city > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; opacity: .5;
    /* 效能（2026-09-27）：拿掉 mix-blend-mode: multiply —— 線條一律是純黑（js 寫 stroke #000），黑色相乘跟一般疊加的結果逐像素相同，
       卻會多一個隔離的混合群組；另外自成合成層，最後那段一條條畫出來時不拖著上面的標題與雙圖帶一起重畫 */
    will-change: transform; }
/* 一段段畫出來（list.html 的 paintLandscape：第 i 條線延後 (i % 9) × .017、每條用 .76 的長度 smoothstep 畫完）；--draw 由 js 寫在 svg 上 */
.epc-city svg [data-draw] { --t: clamp(0, (var(--draw, 1) - var(--d, 0)) / .76, 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t) * var(--t) * (3 - 2 * var(--t))); }
.epc-city svg [data-dash] { opacity: clamp(0, (var(--draw, 1) - var(--d, 0)) / .76, 1); }
/* 貨櫃落點（xline2.svg 中央空位；viewBox -30 440 2001 353：x 790.5–1150.5、地面 y 790） */
.epc-slot { position: absolute; left: calc(820.5 / 2001 * 100%); width: calc(360 / 2001 * 100%); top: calc(211 / 353 * 100%); bottom: calc(3 / 353 * 100%); }

/* ── 中軸線＋3D 貨櫃的固定畫布 ─────────────────────────────────────── */
.epc-rail { position: absolute; left: var(--lane-x); top: 0; z-index: 1; width: 1px; margin-left: -.5px; pointer-events: none; }
.epc-rail > i { position: absolute; left: 0; width: 1px; display: block; }
.epc-rail-photo { top: 0; height: var(--band); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .55)); }
.epc-rail-line { top: var(--band); bottom: 0; background: var(--epc-rail); transform-origin: 50% 0; }   /* 長度由 js 依吊鉤位置 scaleY（線＝吊索，拉到哪畫到哪） */
.epc > .epc-rail .epc-rail-line { top: 0; }                 /* 舞台之後那段：整條都是線（接在舞台底下，不留缺口） */
/* 開場的中軸線在釘住的舞台裡（跟著釘住）；舞台之後那段是 .epc 底下這條 */
.epc-stage .epc-rail { height: 100%; }
.epc-gl { position: fixed; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; }
.epc-gl.is-on { visibility: visible; }
/* R5 吊索（使用者 2026-09-27：「吊繩線斷了」）：文件上的中軸線只畫到最後一步的底、而且跟著頁面捲走，吊鉤卻停在釘住的結尾舞台上，
   中間只剩 3D 的上方鋼索（落地比例下不到 1px，線稿模式畫出來是斷的）。這條以「視窗」為基準的吊索從線的盡頭接到吊鉤頂。
   位置與長度由 js/epc.js 每幀寫：left（版面，跟 .epc-rail-line 落在同一個像素欄）＋ transform: translateY() scaleY(長度 ÷ 視窗高)；
   高度＝視窗高（js 寫 px）。z 4 跟 3D 畫布同層、排在畫布前面 → 吊鉤畫在它上面；結尾舞台（z 5）的標題從它前面經過。 */
.epc-rope { position: fixed; left: 0; top: 0; z-index: 4; display: block; width: var(--epc-rope-w, 1px); height: 100vh;
    background: var(--epc-rail); transform-origin: 0 0; pointer-events: none; visibility: hidden; }
/* 3D 還沒好之前的靜態圖（開場圓盤上） */
.epc-still { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--u) * 369); aspect-ratio: 8.9 / 4.1; transform: translate(-50%, -50%);
    background: url('../images/epc/container-front.png') center / contain no-repeat; transition: opacity .5s; }
.epc.is-3d .epc-still { opacity: 0; }

/* ── 平板 ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .epc { --u: calc(100vw / 1180); --pad: calc(var(--u) * 70); }
    .epc-intro-copy { top: calc(var(--band) + 52px); }
}
/* ── 手機（≤ 760px）：照片帶變高、圓盤縮小置中；步驟單欄、吊索移到右側的軌道 ── */
@media (max-width: 760px) {
    .epc { --u: calc(100vw / 390); --pad: 22px; --band: 104vw; --lane-x: 84%; }
    .epc-photo img { object-position: 42% 50%; }
    .epc-copy { top: 88px; }
    .epc-title { font-size: 9.4vw; }
    .epc-sub { font-size: 14px; letter-spacing: .18em; }
    .epc-dial { width: 86vw; height: 86vw; margin: -43vw 0 0 -43vw; }
    .epc-quads { width: 60vw; height: 60vw; margin: -30vw 0 0 -30vw; }
    .epc-section { left: calc(50% - 28vw); top: calc(50% - 32vw); }
    .epc-num { font-size: 16vw; }
    .epc-label { left: calc(50% + 5vw); top: calc(50% - 22vw); font-size: 12px; }
    .epc-still { width: 66vw; }
    .epc-apps { left: var(--pad); right: var(--pad); top: calc(var(--band) + 43vw + 14px); align-items: stretch; }
    .epc-app-nav { justify-content: flex-end; }
    .epc-app-list { margin-top: 10px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }
    .epc-app { font-size: 12px; }
    .epc-intro-copy { display: none; }
    .epc-stage .epc-rail { display: none; }
    .epc-process { padding-top: 56px; }
    .epc-process-title { font-size: 9.4vw; }
    .epc-steps { margin: 28px var(--pad) 0; }
    .epc-step { flex-direction: column; align-items: flex-start; padding-right: 30vw; min-height: 0; }
    .epc-step-copy { padding: 22px 0 14px; }
    .epc-step-title { margin-top: 18px; }
    .epc-step-desc { max-width: none; min-width: 0; }
    .epc-step-photo { width: 100%; height: 34vw; margin-bottom: 22px; }
    .epc-finale-stage { padding: 56px 0 0; }
    .epc-finale-title { gap: 10px; font-size: 7.4vw; }
    .epc-city { width: 240vw; margin-left: -70vw; margin-top: 30px; }     /* list.html 手機：線稿 2.4 倍寬、置中裁切 */
    .epc { --stage-h: calc(var(--band) + 43vw + 150px); }
}
@media (prefers-reduced-motion: reduce) {
    .epc-step::before, .epc-step-photo, .epc-step-photo img, .epc-app i, .epc-round, .epc-ring .epc-dot { transition: none; }
}