/* 電商ERP頁樣式 2026-10-13，搭配官網既有的 Bootstrap 5 使用 */
.ec-page{color:#0b2545;line-height:1.7;font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
.ec-page .ec-sec{position:relative;overflow:hidden;padding:96px 0}
.ec-page .container{position:relative;z-index:1}
.ec-page .ec-bg-white{background:#ffffff}.ec-page .ec-bg-light{background:#f5faff}.ec-page .ec-bg-dark{background:#0b2545;color:#ffffff}
.ec-page .ec-head{max-width:760px;margin:0 auto 40px;text-align:center}
.ec-page .ec-display{font-weight:900;line-height:1.15;margin:0 0 14px;color:#0b2545}
.ec-page .ec-kicker{font-weight:700;line-height:1.45;color:#1f6fcf;margin:0 0 10px}
.ec-page .ec-h2{font-weight:900;line-height:1.3;margin:0 0 12px;color:#0b2545}
.ec-page .ec-h2s{font-weight:900;line-height:1.35;margin:0 0 12px;color:#0b2545}
.ec-page .ec-h3{font-weight:700;line-height:1.5;margin:0 0 8px;color:#0b2545}
.ec-page .ec-lead{font-weight:500;line-height:1.5;color:#3d5a7a;margin:0 0 14px}
.ec-page .ec-text{margin:0 0 10px;color:#5a6f88}
.ec-page .ec-note{color:#5a6f88;text-align:center;margin:18px 0 0}
.ec-page .ec-badge{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #d6e6f5;border-radius:999px;padding:6px 16px 6px 8px;font-size:13.5px;margin-bottom:18px}
.ec-page .ec-badge b{background:#18b597;color:#ffffff;border-radius:999px;padding:1px 10px;font-size:12px}
.ec-page .ec-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ec-page .text-center .ec-ctas,.ec-page .ec-ctas.center{justify-content:center}
.ec-page .ec-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:14px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:16px;font-family:inherit}
.ec-page .ec-btn-primary{background:#0b2545;color:#ffffff;box-shadow:0 12px 28px rgba(11,37,69,.22)}
.ec-page .ec-btn-ghost{background:#ffffff;color:#0b2545;border:1px solid #c9dcef}
.ec-page .ec-link{color:#1f6fcf;font-weight:700;text-decoration:none}
.ec-page .ec-tags{font-size:13.5px;color:#5a6f88;margin:16px 0 0}
.ec-page .ec-blob{display:none}
.ec-page .ec-blob.b1{width:520px;height:520px;background:#bfe3ff;left:-160px;top:-120px}
.ec-page .ec-blob.b2{width:460px;height:460px;background:#c9f3e6;right:-120px;top:80px}
.ec-page .ec-blob.b3{width:380px;height:380px;background:#e2dcff;left:40%;bottom:-160px}
.ec-page .ec-shot{position:relative;margin:56px auto 0;max-width:1000px}
.ec-page .ec-browser{background:#ffffff;border-radius:18px;padding:10px;border:1px solid #d6e6f5;box-shadow:0 40px 80px rgba(11,37,69,.18)}
.ec-page .ec-tilt{transform:perspective(1800px) rotateX(6deg)}
.ec-page .ec-browser-bar{display:flex;gap:6px;padding:4px 8px 10px}
.ec-page .ec-browser-bar i{display:block;width:10px;height:10px;border-radius:50%;background:#ff8a7a}
.ec-page .ec-browser-bar i+i{background:#ffd166}.ec-page .ec-browser-bar i+i+i{background:#5dd6b8}
.ec-page .ec-float{position:absolute;z-index:2;width:220px;max-width:46%;background:#ffffff;border-radius:16px;padding:14px 16px;box-shadow:0 20px 40px rgba(11,37,69,.18);text-align:left;font-size:13.5px;line-height:1.55}
.ec-page .ec-float.f1{left:-12px;top:18%}.ec-page .ec-float.f2{right:-12px;bottom:10%}
.ec-page .ec-float .ft{display:block;font-size:12.5px;font-weight:700;color:#128a73;margin-bottom:4px}.ec-page .ec-float.f2 .ft{color:#c2560a}
.ec-page .ec-img{display:block;width:100%;height:auto;border-radius:10px}
.ec-page .ec-platstrip{text-align:center}
.ec-page .ec-platlabel{font-size:13.5px;color:#5a6f88;margin:0 0 12px}
.ec-page .ec-platnames{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;list-style:none;margin:0;padding:0;font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif;font-weight:800;font-size:20px;color:#7a8ea6}
.ec-page .ec-card{background:#f5faff;border-radius:22px;padding:26px;height:100%}
.ec-page .ec-bg-light .ec-card{background:#ffffff}
.ec-page .ec-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ec-page .ec-ico.c1{background:#d8ecff;color:#1f6fcf}.ec-page .ec-ico.c2{background:#dcf7ef;color:#128a73}.ec-page .ec-ico.c3{background:#ffeedd;color:#c2560a}
.ec-page .ec-ico.c4{background:#ece9ff;color:#5b45d6}.ec-page .ec-ico.c5{background:#ffe2ea;color:#c2335e}.ec-page .ec-ico.c6{background:#e6f4d9;color:#4c7a17}
.ec-page .ec-show-row+.ec-show-row{margin-top:88px}
.ec-page .ec-flow{container-type:inline-size;container-name:ecflow}
.ec-page .ec-flow-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ec-page .ec-flow-step{position:relative;display:flex;gap:14px;align-items:flex-start;background:#ffffff;border:1px solid #d6e6f5;border-radius:20px;padding:20px;box-shadow:0 16px 36px rgba(11,37,69,.08)}
.ec-page .ec-bg-white .ec-flow-step{background:#ffffff}
.ec-page .ec-flow-ico{flex:none;width:48px;height:48px;border-radius:14px;background:#e6f1fb;color:#1f6fcf;display:flex;align-items:center;justify-content:center}
.ec-page .ec-flow-step .ec-h3{margin:0}
.ec-page .ec-flow-sub{margin:0 0 6px;font-size:14px;font-weight:500;color:#0b2545}
.ec-page .ec-flow-tag{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;background:#e8f7f2;color:#0e7c66;font-size:13px;font-weight:700}
.ec-page .ec-flow-step:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:-30px;width:2px;height:20px;background:#8fa9c4}
.ec-page .ec-flow-step:not(:last-child)::before{content:'';position:absolute;left:calc(50% - 5px);bottom:-36px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #8fa9c4}
.ec-page .ec-flow-loop{margin:24px 0 0;font-size:14px;font-weight:700;color:#0e7c66}
@container ecflow (min-width:560px){.ec-page .ec-flow-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ec-page .ec-flow-step::before,.ec-page .ec-flow-step::after{display:none}}
@container ecflow (min-width:900px){.ec-page .ec-flow-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px}.ec-page .ec-flow-step{flex-direction:column;padding:24px}.ec-page .ec-flow-step:not(:last-child)::before,.ec-page .ec-flow-step:not(:last-child)::after{display:block}.ec-page .ec-flow-step:not(:last-child)::after{left:auto;right:-44px;top:50%;bottom:auto;width:32px;height:2px}.ec-page .ec-flow-step:not(:last-child)::before{left:auto;right:-46px;top:calc(50% - 6px);bottom:auto;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #8fa9c4;border-right:0}.ec-page .ec-flow-loop{padding:12px 16px;border:2px dashed #18b597;border-top:0;border-radius:0 0 20px 20px;text-align:center}}
.ec-page .ec-tag{display:block;font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;color:#1f6fcf;margin-bottom:8px}
.ec-page .ec-checklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ec-page .ec-checklist li::before{content:'✓';color:#18b597;font-weight:700;margin-right:8px}
.ec-page .ec-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid #d6e6f5;box-shadow:0 24px 50px rgba(11,37,69,.10);background:#ffffff}
.ec-page .ec-frame .ec-img{border-radius:0}
.ec-page .ec-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:#ffffff;color:#0b2545;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 10px 30px rgba(11,37,69,.3);pointer-events:none;transition:transform .15s}
.ec-page .ec-video .ec-img{aspect-ratio:16/9;object-fit:cover}
.ec-page .ec-video-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#0b2545;cursor:pointer}
.ec-page .ec-video-btn .ec-img{width:100%;height:100%}
.ec-page .ec-video-btn:hover .ec-play,.ec-page .ec-video-btn:focus-visible .ec-play{transform:scale(1.08)}
.ec-page .ec-video iframe,.ec-page .ec-video video{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0b2545}
.ec-page .ec-stat{text-align:center}
.ec-page .ec-stat-n{font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif;font-weight:800;font-size:48px;line-height:1.1;margin:0}
.ec-page .ec-stat-l{margin:4px 0 0;color:#b9cbe0;font-size:14.5px}
.ec-page .ec-quote{background:#ffffff;border:1px solid #e1ebf5;border-radius:22px;padding:26px;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.ec-page .ec-quote .q{margin:0;font-size:16.5px}
.ec-page .ec-person{display:flex;align-items:center;gap:12px;font-size:14px}
.ec-page .ec-person small{display:block;color:#5a6f88;font-size:13px}
.ec-page .ec-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.ec-page .ec-avatar-empty{display:inline-block;background:#e1ebf5}
.ec-page .ec-plan{position:relative;border:1px solid #e1ebf5;border-radius:22px;padding:28px;height:100%;display:flex;flex-direction:column;gap:6px;background:#ffffff}
.ec-page .ec-plan.hi{border:2px solid #1f8bff;background:#f2f8ff}
.ec-page .ec-plan .ec-ctas{margin-top:auto;padding-top:12px}.ec-page .ec-plan .ec-btn{width:100%}
.ec-page .ec-pbadge{position:absolute;top:-14px;left:24px;background:#1f6fcf;color:#ffffff;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 12px}
.ec-page .ec-plans{padding-top:14px}
.ec-page .ec-step{background:#ffffff;border-radius:20px;padding:22px;height:100%;border-top:4px solid #1f8bff}
.ec-page .ec-step.s3,.ec-page .ec-step.s4{border-top-color:#18b597}.ec-page .ec-step.s5{border-top-color:#8b78ff}
.ec-page .ec-step-no{display:block;font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif;font-weight:800;color:#1f6fcf;margin-bottom:6px}
.ec-page .ec-faq{max-width:860px;margin:0 auto}.ec-page .ec-faq.wide{max-width:none}
.ec-page .ec-qa{background:#f5faff;border-radius:16px;padding:18px 22px}
.ec-page .ec-bg-light .ec-qa{background:#ffffff}
.ec-page .ec-qa summary{cursor:pointer}
.ec-page .ec-qa summary .ec-h3{display:inline;margin:0}
.ec-page .ec-qa .ec-text{margin:10px 0 0}
.ec-page .ec-formcard{position:relative;overflow:hidden;background:#dff1ff;border-radius:32px;padding:56px}
.ec-page .ec-formcard .ec-blob.b2{right:-100px;top:-120px;width:360px;height:360px;filter:blur(50px)}
.ec-page .ec-form{position:relative;background:#ffffff;border-radius:24px;padding:32px;box-shadow:0 20px 50px rgba(11,37,69,.12)}
.ec-page .ec-field{margin-bottom:14px}
.ec-page .ec-label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.ec-page .ec-input{width:100%;min-height:46px;border:1px solid #d6e6f5;border-radius:12px;padding:10px 12px;font:inherit;background:#ffffff;box-sizing:border-box}
.ec-page .ec-checks{display:flex;flex-wrap:wrap;gap:8px}
.ec-page .ec-check{display:inline-flex;gap:6px;align-items:center;background:#f5faff;border-radius:999px;padding:7px 14px;font-size:14px}
.ec-page .ec-form .ec-btn{width:100%}
.ec-page .ec-quotebox{margin-top:24px;background:#dff1ff;border-radius:22px;padding:24px 28px}
.ec-page .ec-quotebox .ec-text{margin:0}
.ec-page .ec-casebox{background:#ffffff;border:1px solid #e1ebf5;border-radius:22px;padding:28px;box-shadow:0 20px 44px rgba(11,37,69,.08)}
.ec-page .ec-bg-white .ec-casebox{background:#f5faff;box-shadow:none}
.ec-page .ec-q{font-weight:700;color:#1f6fcf;margin:16px 0 4px}
.ec-page .ec-strong{font-weight:700;color:#0b2545}
.ec-page .ec-cta{position:relative;overflow:hidden;background:#0b2545;color:#ffffff;border-radius:32px;padding:64px 40px;text-align:center}
.ec-page .ec-cta .ec-blob.b1{left:auto;right:-160px;top:-200px;background:#1f6fcf;opacity:.55}
.ec-page .ec-cta .ec-h2{color:#ffffff}.ec-page .ec-cta .ec-text,.ec-page .ec-cta .ec-note{color:#b9cbe0}.ec-page .ec-cta .ec-strong{color:#ffffff;margin:16px 0 0}
.ec-page .ec-cta .ec-btn-primary{background:#ffffff;color:#0b2545}.ec-page .ec-cta .ec-btn-ghost{background:transparent;color:#ffffff;border-color:#4d6a8e}
.ec-page .ec-bg-dark .ec-h2,.ec-page .ec-bg-dark .ec-h2s,.ec-page .ec-bg-dark .ec-h3,.ec-page .ec-bg-dark .ec-display,.ec-page .ec-bg-dark .ec-lead{color:#ffffff}
.ec-page .ec-bg-dark .ec-text,.ec-page .ec-bg-dark .ec-note{color:#b9cbe0}
.ec-page .ec-bg-dark .ec-card,.ec-page .ec-bg-dark .ec-step,.ec-page .ec-bg-dark .ec-quote,.ec-page .ec-bg-dark .ec-qa{background:#14365e;border-color:#21497a}
.ec-page .ec-bg-dark .ec-link,.ec-page .ec-bg-dark .ec-tag{color:#8cc4ff}

/* 字級（電腦） */
.ec-page .ec-display{font-size:42px}
.ec-page .ec-kicker{font-size:20px}
.ec-page .ec-h2{font-size:32px}
.ec-page .ec-h2s{font-size:28px}
.ec-page .ec-h3{font-size:19px}
.ec-page .ec-lead{font-size:22px}
.ec-page .ec-text{font-size:16px}
.ec-page .ec-note{font-size:13px}
.ec-page{font-size:16px}

@media (max-width:767px){
.ec-page .ec-sec{padding:56px 0}
.ec-page .ec-head{margin-bottom:28px}
.ec-page .ec-tilt{transform:none}
.ec-page .ec-shot{margin-top:32px}
.ec-page .ec-float{display:none}
.ec-page .ec-ctas .ec-btn{width:100%}
.ec-page .ec-show-row+.ec-show-row{margin-top:56px}
.ec-page .ec-stat-n{font-size:36px}
.ec-page .ec-platnames{font-size:16px;gap:6px 18px}
.ec-page .ec-formcard{padding:22px;border-radius:24px}
.ec-page .ec-form{padding:20px}
.ec-page .ec-cta{padding:40px 20px;border-radius:24px}
.ec-page .ec-casebox{padding:20px}
/* 字級（手機） */
.ec-page .ec-display{font-size:26px}
.ec-page .ec-kicker{font-size:17px}
.ec-page .ec-h2{font-size:22px}
.ec-page .ec-h2s{font-size:22px}
.ec-page .ec-h3{font-size:17px}
.ec-page .ec-lead{font-size:18px}
.ec-page .ec-text{font-size:15px}
.ec-page .ec-note{font-size:13px}
.ec-page{font-size:15px}
}