@charset "utf-8";

/* =========================================
   1. 首頁區塊樣式 (Sections)
   ========================================= */

/* --- 服務介紹 (Service Intro) --- */
.service-intro { padding: 80px 0; background: white; }
.service-photo { margin: 50px; }

.section-title h2 {
    font-size: 2.5rem;
    line-height: 55px;
    font-weight: bold;
    color: #333;
    font-family: 'Noto Serif TC', "微軟正黑體", serif;
}

.text-secondary {
    font-size: 1.4em;
    color: #5b5b5b;
    line-height: 30px;
    font-family: "微軟正黑體", "Zen Old Mincho", serif;
}

.service-intro-font01 {
    font-size: 1.3em;
    font-weight: bolder;
    color: #fe0040;
    line-height: 26px;
    font-family: "微軟正黑體", "Zen Old Mincho", serif;
}

/* --- 動態資訊 (News) --- */
.news-section {
    background: url('../images/in-news-backgroup.png') no-repeat center center/cover;
    padding: 80px 0;
    position: relative;
}
.news-header h2 { color: white; font-family: 'Oswald', sans-serif; }
.news-header span { display: block; color: white; font-size: 1.5rem; }

.news-card {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    height: 100%;
    background: #fff;
}
.news-card:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transform: translateY(-5px); }
.news-img { height: auto; object-fit: cover; width: 100%; }
.news-body { padding: 20px; }
.news-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; font-family: "微軟正黑體", sans-serif; line-height: 24px; }
.news-desc { font-size: 0.95rem; color: #666; margin-bottom: 20px; min-height: 60px; font-family: "微軟正黑體", sans-serif; line-height: 20px; }

/* --- 服務特色方塊 (Features) --- */
.feature-grid .feature-box {
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #fe0040;
    height: 100%;
    transition: 0.3s;
    text-decoration: none;
}

.feature-grid .feature-box:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    text-decoration: none;
}

.feature-box.red-box { background-color: #fe0040; color: white; border: none; }
.feature-box.white-box { background-color: #f6f6f6; color: #333; }
.feature-box i { font-size: 3rem; margin-right: 15px; }
.feature-box .text { font-size: 1.2rem; font-weight: bold; text-decoration: none; }
.white-box i { color: #fe0040; }

/* 去除超連結底線 */
.feature-link { text-decoration: none; color: inherit; display: block; }
.feature-link:hover { text-decoration: none; }

/* --- 統計部分 (Stats) --- */
.stats-section { background-color: #fe0040; color: white; padding: 60px 0; }
.stat-item { text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.3); }
.stat-item:last-child { border-right: none; }
.stat-number { font-size: 3rem; font-weight: bold; font-family: 'Oswald', sans-serif; margin-bottom: 50px; }
.stat-font { font-size: 1.3rem; font-weight: bold; font-family: "微軟正黑體", sans-serif; }

/* --- 案例分享 (Cases) --- */
.cases-section { padding: 80px 0; background: white; }
.section-header-bar { border-left: 8px solid #fe0040; padding-left: 30px; margin-bottom: 40px; }
.section-header-font { font-weight: 900; font-size: 2em; font-family: "微軟正黑體", sans-serif; }
.section-header-font01 { font-size: 1.8em; font-family: 'Oswald', sans-serif; }

.client-logo-box {
    border: 1px solid #c6c6c6;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 20px;
}
.client-logo-box img { max-width: 100%; max-height: 100%; transition: 0.3s; }
.client-logo-box:hover img { transform: translateY(-5px); }


/* =========================================
   2. RWD 斷點設定 - 一般螢幕與行動裝置
   [桌機優先 Desktop First: max-width]
   ========================================= */

/* 大型平板 / 小筆電 (< 1200px) */
@media (max-width: 1199.98px) {
    .section-title h2 { font-size: 2.2rem; }
    .service-intro-font01 { font-size: 1.2em; }
}

/* 平板直向 (< 992px) */
@media (max-width: 991.98px) {
    .service-photo { margin: 30px auto; max-width: 80%; display: block; }
    .stat-item { border-right: none; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .stat-item:last-child { border-bottom: none; margin-bottom: 0; }
    .section-title h2 { font-size: 2rem; line-height: 1.3; }
}

/* 橫向手機 (< 768px) */
@media (max-width: 767.98px) {
    .service-intro, .news-section, .cases-section { padding: 60px 0; }
    .text-secondary { font-size: 1.2em; }
}

/* 直向手機 (< 576px) */
@media (max-width: 575.98px) {
    .service-intro, .news-section, .cases-section, .stats-section { padding: 40px 0; }
    .section-title h2 { font-size: 1.6rem; line-height: 1.3; }
    .section-header-font { font-size: 1.5rem; }
    .section-header-font01 { font-size: 1.3rem; }
    .stat-number { font-size: 2.5rem; margin-bottom: 15px; }
    .feature-grid .feature-box { padding: 20px 10px; }
    .feature-box i { font-size: 2.5rem; }
    .feature-box .text { font-size: 1rem; }
    .client-logo-box { height: 120px; padding: 10px; }
}

/* =========================================
   3. RWD 斷點設定 - 2K 與 4K 超大螢幕
   [針對 > 1920px 使用 min-width 覆蓋]
   ========================================= */

@media (min-width: 1921px) {
    /* 1. 區塊上下留白加大，更有呼吸感 */
    .service-intro, .news-section, .feature-grid, .stats-section, .cases-section {
        padding: 120px 0;
    }

    /* 2. 標題字體顯著放大 */
    .section-title h2 {
        font-size: 3.5rem; /* 原本 2.5rem */
    }
    .service-intro-font01 {
        font-size: 1.8em;
    }

    /* 3. 統計數字放大 */
    .stat-number {
        font-size: 4.5rem; /* 原本 3rem */
    }

    /* 4. 新聞區塊文字優化 */
    .news-title {
        font-size: 1.5rem;
        line-height: 1.6;
    }
    .news-desc {
        font-size: 1.1rem;
        line-height: 1.8;
    }
    
    /* 5. 案例標題放大 */
    .section-header-font { font-size: 2.5em; }
    .section-header-font01 { font-size: 2.2em; }
    
    /* 6. 特色方塊調整 */
    .feature-grid .feature-box {
        padding: 60px 30px;
    }
    .feature-box i {
        font-size: 4rem;
    }
}