:root { --primary-blue: #305FCC; --primary-orange: #FF7913; --bg-light: #f8f9fa; --text-dark: #222; --gray-text: #666; --case-blue: #7297EC; }
.container-s5 { width: 100%; max-width: 1480px; margin: 0 auto; }
h2.section-title { text-align: center; font-size: 3.75rem; color: #002140; font-weight: 700; margin-bottom: 10px; }
p.section-subtitle { text-align: center; color: var(--text-dark); margin-bottom: 40px; font-size: 1.5rem; }
.s5 { padding: 50px 100px 100px 100px; color: #002140 !important; }
/* --- 1. 現在 vs 我們幫你做到 --- */
.comparison-grid { display: flex; justify-content: center; gap: 50px; margin-bottom: 80px; flex-wrap: wrap; }
.compare-item { display: flex; align-items: center; gap: 20px; text-align: left; flex: 1; min-width: 300px; justify-content: center; }
.visual-box { position: relative; width: 307px; height: 160px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bg-red { background: #ffefef; }
.bg-green { background: #f0fff0; }
.status-badge { position: absolute; top: 10px; right: 10px; width: 35px; height: 35px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.badge-red { background: #ff4d4d; }
.badge-green { background: #2ecc71; }
.compare-content h3 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
.text-red { color: #EC4E4E; }
.text-green { color: #0A9B00; }
.compare-content ul { list-style: none; }
.compare-content li { margin-bottom: 5px; list-style: none !important; font-size: 1.25rem; margin-left: 0 !important; }
.compare-content li::before { content: "•"; margin-right: 8px; font-weight: bold; }
@media (max-width: 1300px){
    .s5 { padding: 50px 50px 80px 50px;}
    .visual-box{
        width: 200px;
    }
    .comparison-grid{
        margin-bottom: 0;
    }
    .compare-content h3{
        font-size: 2rem;
    }
}
@media (max-width: 1024px){
    .comparison-grid{
        gap: 30px;
    }
    .compare-item{
        gap: 6px;
    }
}
/* --- 2. 數據統計與藍色按鈕 --- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; margin-top: 40px; ; }
.stat-card { border: 1px solid var(--primary-blue); border-radius: 12px; padding: 15px; text-align: center; }
.stat-card h2 { color: var(--primary-blue); font-size: 3.4rem; margin-bottom: 0px; font-weight: bold; }
.stat-card p { margin-bottom: 0; font-size: 1.25rem; }
.btn-blue { display: block; width: fit-content; margin: 0 auto; background: var(--primary-blue); color: white; padding: 18px 80px; border-radius: 50px; text-decoration: none !important; font-weight: bold; font-size: 1.8rem; transition: 0.3s; border: 0; }
.btn-blue:hover { opacity: 0.9; transform: translateY(-2px); }
/* --- 3. 你是哪一種？ --- */
.prob-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) {
 .prob-grid { grid-template-columns: repeat(2, 1fr); gap: 20px;}
 }
@media (min-width: 1024px) {
 .prob-grid { grid-template-columns: repeat(4, 1fr); }
 }
.prob-card { border-radius: 20px; padding: 20px 30px 30px 30px; /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
    transition: 0.3s; height: 100%; }
.prob-card:hover { transform: translateY(-5px); }
.prob-card img { width: auto; max-width: 100%; border-radius: 12px; margin-bottom: 15px; object-fit: cover; }
.prob-card>div { text-align: center; }
/* 情境背景色 */
.prob-card:nth-child(1) { background: #C7E8EC; }
.prob-card:nth-child(2) { background: #CEE2FF; }
.prob-card:nth-child(3) { background: #FBE6B2; }
.prob-card:nth-child(4) { background: #FFD5D5; }
.prob-card h4 { font-size: 2rem; margin-bottom: 8px; font-weight: 700; }
.prob-card p { font-size: 1.125rem; margin-bottom: 10px; min-height: 45px; font-weight: 500; }
.prob-list { font-size: 1rem; padding-top: 10px; }
.prob-list li { margin-bottom: 7px; position: relative; padding-left: 20px; list-style: none !important; margin-left: 0 !important;}
.prob-list li::before { content: "✔"; position: absolute; left: 0; font-weight: bold; font-size: 1.3rem; }
/* --- 4. 我們的做法 --- */
.method-wrapper { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 60px; }
.method-item { flex: 1; max-width: 280px; text-align: center; }
.method-circle { width: 277px; height: 284px; /* border-radius: 50%; */
    /* background: #fff; */
    margin: 0 auto 25px; position: relative; /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
    display: flex; align-items: center; justify-content: center; }
.method-circle img { /* width: 85%; border-radius: 50%; */ }
.method-item h4 { font-size: 2rem; font-weight: bold; }
.method-item p { font-size: 1.125rem; }
.m-num { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: var(--primary-blue); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; /* border: 4px solid #fff; */
    font-size: 2rem; }
.method-arrow { color: #a5c7f9; font-size: 4.2rem; }
.case-banner { background: var(--case-blue); color: white; text-align: center; padding: 50px 20px; border-radius: 15px; margin-top: 40px; }
.case-banner h2 { font-size: 4rem; font-weight: 800; margin: 10px 0; }
.case-banner p { font-size: 1.5rem; }
/* --- 5. 為什麼選擇我們 --- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; margin-top: 50px; }
@media (min-width: 768px) {
 .why-grid { grid-template-columns: repeat(4, 1fr); gap: 20px;}
 }
.why-card { padding: 40px 20px 20px 20px; border-radius: 20px; color: white; text-align: center; }
.why-card img { width: 100%; border-radius: 12px; margin-bottom: 20px; /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ }
.orange { background: #ff7043; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 179, 0, 1)), to(rgba(254, 93, 33, 1))); background: linear-gradient(to bottom, rgba(255, 179, 0, 1) 0%, rgba(254, 93, 33, 1) 100%); }
.blue { background: #3f51b5; background: -webkit-gradient(linear, left top, left bottom, from(rgba(62, 146, 255, 1)), to(rgba(65, 73, 187, 1))); background: linear-gradient(to bottom, rgba(62, 146, 255, 1) 0%, rgba(65, 73, 187, 1) 100%); }
.green { background: #00897b; background: -webkit-gradient(linear, left top, left bottom, from(rgba(2, 212, 121, 1)), to(rgba(0, 129, 101, 1))); background: linear-gradient(to bottom, rgba(2, 212, 121, 1) 0%, rgba(0, 129, 101, 1) 100%); }
.purple { background: #8e24aa; background: -webkit-gradient(linear, left top, left bottom, from(rgba(207, 109, 228, 1)), to(rgba(87, 56, 148, 1))); background: linear-gradient(to bottom, rgba(207, 109, 228, 1) 0%, rgba(87, 56, 148, 1) 100%); }
/* --- 6. 合作流程 (摺疊選單) --- */
.accordion-item { border: 1px solid #FF882D; border-radius: 15px !important; margin-bottom: 15px; overflow: hidden; background: #fff; }
.header-top-row { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.accordion-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 25px; background-color: #fff; cursor: pointer; transition: background-color 0.2s; }
.header-title { font-weight: 600; font-size: 1.6rem; }
.header-subtitle { color: #666; font-size: 1.125rem; font-weight: normal; margin: 0; }
.accordion-header:hover { background-color: #fffcf5; }
.accordion-content { padding: 25px; display: none; background: #fffcf9; border-top: 1px solid #ffe0b2; }
.accordion-item p { font-size: 1.125rem; font-weight: normal; margin: 0; }
.arrow-icon { font-size: 1em; color: #FF882D; transition: 0.3s ease; }
.process-desc { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.process-desc .title { font-size: 1.8rem; font-weight: 500; }
.step-flex { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.step-box { border: 1px solid #ffcc80; padding: 20px; border-radius: 12px; text-align: center; flex: 1; min-width: 160px; background: white; }
.step-box strong { display: block; font-size: 1.15rem; margin-bottom: 5px; color: #002140; }
.step-box p { margin: 0; line-height: 1.4; }
.step-info-footer { margin-top: 25px; padding-top: 15px; border-top: 1px dashed #ffe0b2; color: #444; font-size: 1.125rem; }
.s-num { background: #ffb74d; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold; }
/* --- 產業卡片佈局 --- */
.industry-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin-bottom: 40px; }
.ind-card {
    border: 1px solid #FFE0B2;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    transition: transform 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center; /* 確保內容水平置中 */
    justify-content: center;
}
.ind-card:hover { transform: translateY(-5px); background-color: #FFFDF9; }
.ind-icon {
    width: 54px; /* 設定固定寬度 */
    height: 50px; /* 設定固定高度 */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ind-icon svg {
    width: 100%;
    /* height: auto;  */
    display: block;
}

.ind-name {
    font-weight: 600;
    color: #002140;
    font-size: 1rem;
    line-height
    Determines the block-progression dimension of the text content area of an inline box.
    
    Widely available across major browsers (Baseline since January 2018)
    Learn more
    
    Don't show
    : 1.2;
}
.ind-icon-placeholder { font-size: 2.5rem; margin-bottom: 10px; }
/* --- 認證標題與圓圈 --- */
.cert-title { font-size: 1.25rem; color: #002140; margin-bottom: 25px; font-weight: 600; }
.cert-flex { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px; }
.cert-circle { width: 180px; height: 180px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-weight: 700; text-align: center; line-height: 1.2; font-size: 1.4rem; }
.cert-circle.orange { background-color: #FF882D; }
.cert-circle.blue { background-color: #305FCC; }
.cert-circle.green { background-color: #4CAF50; }
.cert-circle .num { font-size: 2.6rem; }
.cert-circle .txt { font-size: 1.125rem; font-weight: normal; margin-top: 4px; }
/* 手機版適配 */
@media (max-width: 768px) {
 .industry-grid { grid-template-columns: repeat(3, 1fr); }
.cert-circle { width: 120px; height: 120px; font-size: 1.1rem; }
 }
/* --- 系統類型 Grid 佈局 --- */
.sys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.sys-box {
    padding: 25px;
    border-radius: 12px;
    border: 1px solid transparent;
    display: flex;
    align-items: center; 
    gap: 30px;
    text-align: left;
}
.sys-box h4 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 700; margin-top: 0; }
.sys-box p { color: #555; font-size: 0.95rem; margin-bottom: 15px; }
.sys-tag { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.85rem; }
.sys-footer-text { font-weight: bold; color: #002140; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.sys-icon {
    flex-shrink: 0;      /* 確保圖片不會被文字擠壓變形 */
    width: 120px;        /* 根據圖片比例設定寬度 */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sys-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.sys-info {
    flex-grow: 1;        /* 佔滿剩餘空間 */
}

.sys-info h4 {
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 700;
}

.sys-info p {
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .sys-box {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
    }
    .sys-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 0px;
    }
}
/* 系統類型顏色配置 */
.sys-blue { background-color: #EEF4FF; border-color: #D0E2FF; }
.sys-blue h4 { color: #305FCC; }
.sys-blue .sys-tag { background: #D0E2FF; color: #305FCC; }
.sys-purple { background-color: #F9F0FF; border-color: #EBD5FF; }
.sys-purple h4 { color: #8E24AA; }
.sys-purple .sys-tag { background: #EBD5FF; color: #8E24AA; }
.sys-green { background-color: #E6FFF0; border-color: #C2FFDA; }
.sys-green h4 { color: #0A9B00; }
.sys-green .sys-tag { background: #C2FFDA; color: #0A9B00; }
.sys-orange { background-color: #FFF4E6; border-color: #FFE0B2; }
.sys-orange h4 { color: #BC6004; }
.sys-orange .sys-tag { background: #FFE0B2; color: #BC6004; }
/* 手機版 RWD */
@media (max-width: 768px) {
 .sys-grid { grid-template-columns: 1fr;gap: 10px; }
 }
/* --- 7. 客戶回饋 (單則) & 底部按鈕 --- */
.testimonial { margin-top: 60px; }
.testimonial h2 { font-size: 2rem; }
.testimonial-single { border: 2px solid #ffcc80; border-radius: 25px; padding: 60px; background: #fffdf9; position: relative; margin-top: 20px; }
.quote-icon { font-size: 10rem; color: #FF882D; position: absolute; /* top: 10px; */
    left: 25px; opacity: 0.5; font-family: serif; }
.testi-text { font-size: 1.125rem; color: #444; line-height: 1.8; position: relative; z-index: 1; }
.user-info { display: flex; align-items: center; gap: 15px; margin-top: 25px; }
.user-info img { width: 60px; height: 60px; border-radius: 50%; background: #eee; }
.cta-box { text-align: center; padding: 20px 20px; margin-top: 40px; }
.btn-orange { display: inline-block; background: var(--primary-orange); color: white; padding: 20px 60px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.8rem; margin-top: 5px; transition: 0.3s; text-decoration: none !important; border: 0; }
.btn-orange:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(243, 130, 33, 0.2); }
/* --- 8. FAQ --- */
h2.section-title.faq { margin-bottom: 40px; }
.faq-item { background: #ffffff; margin-bottom: 12px; border-radius: 12px; border: 1px solid #eee; }
.faq-item:hover { border: 1px solid #999; }
.faq-q { padding: 18px 25px; cursor: pointer; display: flex; justify-content: space-between; font-weight: 500; font-size: 1.3rem; }
.faq-a { padding: 0 25px 20px; display: none; }
.faq-q span { color: #ccc; font-size: .8rem; }
/* 手機版調整 */
@media (max-width: 1200px) {
 .s5 { padding: 50px 50px 50px 50px; }
 }
@media (max-width: 768px) {
 .container-s5 { padding: 40px 0; }
.comparison-grid { flex-direction: column; gap: 30px; }
.compare-item { flex-direction: column; text-align: center; }
.visual-box { margin-bottom: 15px; }

.stats-grid { grid-template-columns: 1fr; gap: 10px;}
.method-arrow { display: none; }
.method-item { margin-bottom: 50px; }
.case-banner h2 { font-size: 2rem; }
.btn-orange { width: 100%; padding: 18px 20px; font-size: 1.3rem;}
 }
 @media (max-width: 550px){
    .container-s5{
        padding: 20px 0; 
    }
    h2.section-title{
        font-size: 2.4rem;
    }
    .s5 {
        padding: 50px 30px 50px 30px;
    }
    .btn-blue{
        width: 100%;
        padding: 18px 20px;
        text-align: center;
        font-size: 1.3rem;
    }
    .why-grid{
        gap: 15px;
    }
    .why-card img{
        width: 70%;
    }
    .testimonial-single{
        padding: 20px;
    }
    .accordion-header{
        padding: 15px;
    }
    .header-title {
        font-size: 1.3rem;
    }
    .testimonial h2 {
        font-size: 1.5rem;
    }
    .cta-box{
        padding: 20px 0px;
    }
    .method-item{
        max-width: 100%;
    }
    .why-grid{
        margin-top: 20px; 
    }
 }
 @media (max-width: 400px){
    .compare-item{
        min-width: 200px;  
    }
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .method-circle{
        width: 200px; 
    }
 }
 .open-popup-but{
    cursor: pointer;
 }