@charset "utf-8";

/* ==================================================
   csrmanage 共用頁面樣式
   沿用 esg.css / esg-rwd.css，全頁僅補各頁專用樣式。
   ================================================== */

.csrmanage-page {
    width: 100%;
}

.csrmanage-intro {
    margin: 0 0 12px;
    color: #333;
    font-size: 15px;
    line-height: 1.65;
    text-indent: 2em;
}

.csrmanage-table-wrap {
    width: 100%;
    margin-top: 8px;
}

/* ==================================================
   csrmanage/index.aspx
   職業安全衛生績效
   ================================================== */

.csrmanage-performance-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

    .csrmanage-performance-table th,
    .csrmanage-performance-table td {
        width: 25%;
        vertical-align: top;
    }

    .csrmanage-performance-table th {
        padding: 8px 7px;
        border: 0;
        background: #f2dfcf;
        color: #333;
        font-weight: bold;
        text-align: center;
    }

    .csrmanage-performance-table td {
        padding: 8px 10px 9px;
        border: 0;
        border-bottom: 1px solid #b9b9b9;
        text-align: left;
    }

        .csrmanage-performance-table th + th,
        .csrmanage-performance-table td + td {
            border-left: 7px solid #fff;
        }

/* ==================================================
   csrmanage/standard.aspx
   短內容頁版型修正
   ================================================== */

.csrmanage-standard #com-content {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-areas: "secondary main" !important;
    align-items: start;
}

.csrmanage-standard #secondary {
    grid-area: secondary !important;
    align-self: start;
}

.csrmanage-standard .csrmanage-main-column {
    grid-area: main;
    position: relative;
    min-width: 0;
    width: 100%;
}

.csrmanage-standard #primary {
    margin: 0 !important;
}

/* ==================================================
   csrmanage/safe.aspx
   職業安全衛生管理系統
   ================================================== */

.csrmanage-intro-safe {
    margin-bottom: 28px;
}

.csrmanage-safe-section {
    margin-top: 18px;
}

.csrmanage-section-title-orange {
    margin: 0 0 12px;
    color: #f39a2d;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
}

.csrmanage-note {
    margin: 9px 0 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

.csrmanage-safe-table-wrap {
    position: relative;
    margin-top: 10px;
}

.csrmanage-safe-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

    .csrmanage-safe-table thead th {
        padding: 11px 8px;
        color: #333;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
    }

    .csrmanage-safe-table thead tr:first-child th {
        background: #e9d7c6;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }

        .csrmanage-safe-table thead tr:first-child th:first-child {
            font-size: 16px;
            border-top-left-radius: 4px;
        }

        .csrmanage-safe-table thead tr:first-child th:last-child {
            border-right: 0;
            border-top-right-radius: 4px;
        }

    .csrmanage-safe-table thead tr:nth-child(2) th {
        background: #f3e6da;
        border-right: 2px solid #fff;
        border-bottom: 1px solid #c7c7c7;
        padding-top: 9px;
        padding-bottom: 9px;
    }

        .csrmanage-safe-table thead tr:nth-child(2) th:last-child {
            border-right: 0;
        }

    .csrmanage-safe-table tbody th,
    .csrmanage-safe-table tbody td {
        padding: 10px 8px;
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid #bcbcbc;
    }

    .csrmanage-safe-table tbody th {
        font-weight: bold;
    }

        .csrmanage-safe-table tbody th + td,
        .csrmanage-safe-table tbody td + td {
            border-left: 7px solid #fff;
        }

.csrmanage-safe-staff-table col.col-year {
    width: 120px;
}

.csrmanage-safe-staff-table col.col-label {
    width: 152px;
}

.csrmanage-safe-staff-table thead th[rowspan] {
    width: 78px;
}


.csrmanage-cert-table thead th:last-child,
.csrmanage-cert-table tbody td:last-child {
    width: 110px;
}

.csrmanage-taf-badge {
    display: inline-block;
    min-width: 60px;
    padding: 4px 10px 3px;
    border: 3px solid #b891c8;
    border-radius: 999px;
    color: #8b64a9;
    background: #fff8ff;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.5px;
}

.csrmanage-cert-table-wrap {
    padding-bottom: 58px;
}

.csrmanage-iso-image-wrap {
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 72px;
}

.csrmanage-iso-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ==================================================
   RWD
   ================================================== */
@media screen and (max-width: 768px) {
    .csrmanage-intro {
        font-size: 15px;
        line-height: 1.75;
    }

    .csrmanage-performance-table,
    .csrmanage-performance-table tbody,
    .csrmanage-performance-table tr,
    .csrmanage-performance-table td {
        display: block;
        width: 100%;
    }

        .csrmanage-performance-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        .csrmanage-performance-table tr {
            margin-bottom: 18px;
            border-top: 1px solid #b9b9b9;
        }

        .csrmanage-performance-table td {
            padding: 10px 10px 12px;
            border-left: 0 !important;
            border-bottom: 1px solid #d2d2d2;
        }

            .csrmanage-performance-table td::before {
                display: block;
                margin: -10px -10px 9px;
                padding: 7px 10px;
                content: attr(data-label);
                background: #f2dfcf;
                color: #333;
                font-weight: bold;
                text-align: center;
            }

    .csrmanage-standard #com-content {
        grid-template-columns: 190px minmax(0, 1fr) !important;
        grid-template-areas: "secondary main" !important;
        column-gap: 40px;
    }

    .csrmanage-standard .csrmanage-main-column {
        position: relative;
        padding-top: 44px;
    }

    .csrmanage-standard #primary {
        position: static !important;
    }

    .csrmanage-standard #smenu_btn {
        top: 0 !important;
        left: 0 !important;
        z-index: 5;
    }

    .csrmanage-standard .csrmanage-intro {
        margin-top: 0;
    }

    .csrmanage-section-title-orange {
        font-size: 17px;
        line-height: 1.6;
    }

    .csrmanage-safe-table,
    .csrmanage-safe-table tbody,
    .csrmanage-safe-table tr,
    .csrmanage-safe-table th,
    .csrmanage-safe-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

        .csrmanage-safe-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        .csrmanage-safe-table tbody tr {
            margin-bottom: 18px;
            border: 1px solid #d9d9d9;
        }

        .csrmanage-safe-table tbody th {
            padding: 10px 12px;
            background: #f2dfcf;
            border-bottom: 1px solid #d9d9d9;
            text-align: center;
        }

        .csrmanage-safe-table tbody td {
            padding: 10px 12px;
            border-left: 0 !important;
            border-bottom: 1px solid #e2e2e2;
            text-align: left;
        }

            .csrmanage-safe-table tbody td::before {
                display: block;
                margin: -10px -12px 8px;
                padding: 6px 12px;
                content: attr(data-label);
                background: #f8efe6;
                color: #444;
                font-weight: bold;
                text-align: left;
            }

    .csrmanage-cert-table-wrap {
        padding-bottom: 0;
    }

    .csrmanage-iso-image-wrap {
        position: static;
        width: 72px;
        margin: 8px 0 0 auto;
    }
}

@media screen and (max-width: 500px) {
    .csrmanage-intro {
        text-indent: 0;
    }

    .csrmanage-performance-table {
        font-size: 14px;
        line-height: 1.6;
    }

    .csrmanage-note {
        font-size: 12px;
    }
}

/* ==================================================
   csrmanage/tech.aspx
   職業傷病與安衛風險
   ================================================== */

.csrmanage-tech-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 28px;
    align-items: start;
    margin-bottom: 26px;
}

.csrmanage-tech-intro {
    margin: 0;
}

.csrmanage-health-card {
    display: flex;
    min-height: 136px;
    padding: 18px 18px 16px;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    background: #fff1e4;
    color: #ff8d32;
}

.csrmanage-health-card-text p {
    margin: 0 0 7px;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

    .csrmanage-health-card-text p:last-child {
        margin-bottom: 0;
    }

.csrmanage-health-card-text strong {
    color: #ff8d32;
    font-size: 24px;
    font-weight: normal;
}

.csrmanage-health-card-icon {
    width: 118px;
    color: #ff8d32;
}

    .csrmanage-health-card-icon svg {
        display: block;
        width: 100%;
        height: auto;
    }

.csrmanage-tech-grid {
    display: block;
}

    .csrmanage-tech-grid .csrmanage-tech-block + .csrmanage-tech-block {
        margin-top: 32px;
    }

.csrmanage-tech-block {
    min-width: 0;
}

.csrmanage-tech-table-wrap {
    margin-top: 8px;
}

.csrmanage-tech-health-table,
.csrmanage-tech-risk-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #333;
    font-size: 13px;
    line-height: 1.45;
}

    .csrmanage-tech-health-table th,
    .csrmanage-tech-health-table td,
    .csrmanage-tech-risk-table th,
    .csrmanage-tech-risk-table td {
        padding: 8px 7px;
        vertical-align: middle;
        border-bottom: 1px solid #bfbfbf;
    }

    .csrmanage-tech-health-table thead th,
    .csrmanage-tech-risk-table thead th {
        background: #f5dfcb;
        font-weight: bold;
        text-align: center;
    }

    .csrmanage-tech-health-table tbody th,
    .csrmanage-tech-risk-table tbody th {
        background: #f7f7f7;
        font-weight: bold;
        text-align: center;
    }

    .csrmanage-tech-health-table tbody td {
        text-align: left;
    }

    .csrmanage-tech-health-table th + th,
    .csrmanage-tech-health-table th + td,
    .csrmanage-tech-health-table td + td,
    .csrmanage-tech-risk-table th + th,
    .csrmanage-tech-risk-table th + td,
    .csrmanage-tech-risk-table td + td {
        border-left: 7px solid #fff;
    }

.csrmanage-tech-examinee-row td {
    text-align: center !important;
}

.csrmanage-health-chart {
    display: flex;
    min-height: 220px;
    margin: 10px 0 26px;
    padding: 8px 12px 0;
    align-items: flex-end;
    justify-content: space-around;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

.csrmanage-chart-item {
    display: flex;
    width: 18%;
    min-width: 45px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    color: #333;
    font-size: 12px;
}

.csrmanage-chart-value {
    margin-bottom: 3px;
}

.csrmanage-chart-bar {
    display: block;
    width: 32px;
    max-width: 70%;
    background: #f6b578;
}

.csrmanage-chart-item strong {
    margin: 6px 0 0;
    color: #111;
    font-size: 13px;
}

.csrmanage-tech-text {
    margin: 0 0 12px;
    color: #333;
    font-size: 15px;
    line-height: 1.65;
    text-indent: 2em;
}

.csrmanage-tech-risk-section {
    width: 100%;
    max-width: 680px;
    margin-top: 36px;
}

.csrmanage-tech-risk-table-wrap {
    width: 100%;
}

.csrmanage-tech-risk-table th:first-child {
    width: 92px;
}

.csrmanage-tech-risk-table th:last-child {
    width: 112px;
}

.csrmanage-risk-corner {
    position: relative;
    height: 58px;
    padding: 0 !important;
    overflow: hidden;
}

    .csrmanage-risk-corner::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 145%;
        height: 1px;
        content: "";
        background: rgba(255, 255, 255, 0.95);
        transform: rotate(32deg);
        transform-origin: left top;
    }

.csrmanage-risk-corner-item,
.csrmanage-risk-corner-year {
    position: absolute;
    z-index: 1;
    font-weight: bold;
    line-height: 1;
}

.csrmanage-risk-corner-item {
    top: 10px;
    right: 12px;
}

.csrmanage-risk-corner-year {
    bottom: 9px;
    left: 8px;
}

.csrmanage-tech-risk-table td {
    text-align: center;
}

.csrmanage-formula-list {
    margin: 14px 0 10px 22px;
    padding: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.65;
}

    .csrmanage-formula-list li {
        margin-bottom: 8px;
    }

.csrmanage-audit-box {
    margin: 8px 0 12px;
    padding: 10px 30px 11px;
    border-radius: 16px;
    background: #fde7d4;
    color: #333;
    font-size: 15px;
    line-height: 1.5;
}

    .csrmanage-audit-box p {
        margin: 0 0 5px;
    }

        .csrmanage-audit-box p:last-child {
            margin-bottom: 0;
        }

.csrmanage-audit-indent {
    padding-left: 28px;
}

.csrmanage-tech-final-text {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .csrmanage-tech-intro-grid,
    .csrmanage-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .csrmanage-health-card {
        width: 100%;
        min-height: 122px;
    }

    .csrmanage-tech-health-table,
    .csrmanage-tech-health-table tbody,
    .csrmanage-tech-health-table tr,
    .csrmanage-tech-health-table th,
    .csrmanage-tech-health-table td,
    .csrmanage-tech-risk-table,
    .csrmanage-tech-risk-table tbody,
    .csrmanage-tech-risk-table tr,
    .csrmanage-tech-risk-table th,
    .csrmanage-tech-risk-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

        .csrmanage-tech-health-table thead,
        .csrmanage-tech-risk-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        .csrmanage-tech-health-table tbody tr,
        .csrmanage-tech-risk-table tbody tr {
            margin-bottom: 18px;
            border: 1px solid #d9d9d9;
        }

        .csrmanage-tech-health-table tbody th,
        .csrmanage-tech-risk-table tbody th {
            padding: 9px 12px;
            background: #f2dfcf;
            border-bottom: 1px solid #d9d9d9;
        }

        .csrmanage-tech-health-table tbody td,
        .csrmanage-tech-risk-table tbody td {
            padding: 10px 12px;
            border-left: 0 !important;
            border-bottom: 1px solid #e2e2e2;
            text-align: left !important;
        }

            .csrmanage-tech-health-table tbody td::before,
            .csrmanage-tech-risk-table tbody td::before {
                display: block;
                margin: -10px -12px 8px;
                padding: 6px 12px;
                content: attr(data-label);
                background: #f8efe6;
                color: #444;
                font-weight: bold;
                text-align: left;
            }

    .csrmanage-health-chart {
        min-height: 190px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .csrmanage-chart-bar {
        width: 24px;
    }

    .csrmanage-tech-risk-section {
        max-width: 100%;
        margin-top: 24px;
    }

    .csrmanage-audit-box {
        padding: 12px 16px;
    }

    .csrmanage-audit-indent {
        padding-left: 14px;
    }
}

@media screen and (max-width: 500px) {
    .csrmanage-health-card {
        border-radius: 18px;
    }

    .csrmanage-health-card-icon {
        width: 96px;
    }

    .csrmanage-chart-item {
        font-size: 11px;
    }

        .csrmanage-chart-item strong {
            font-size: 12px;
        }

    .csrmanage-formula-list,
    .csrmanage-audit-box,
    .csrmanage-tech-text {
        font-size: 14px;
    }
}

/* ==================================================
   csrmanage/bonus.aspx
   職安衛教育訓練
   ================================================== */

.csrmanage-bonus-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 198px;
    gap: 26px;
    align-items: start;
}

.csrmanage-bonus-copy {
    min-width: 0;
}

.csrmanage-bonus-text {
    margin-bottom: 16px;
}

.csrmanage-bonus-health-text {
    margin-bottom: 0;
}

.csrmanage-bonus-stat-card {
    padding: 18px 18px 14px;
    border-radius: 24px;
    background: #fff1e4;
    color: #ff8d32;
}

.csrmanage-bonus-stat-list p {
    display: flex;
    margin: 0 0 8px;
    align-items: baseline;
    gap: 6px;
    color: #333;
    font-size: 14px;
    line-height: 1.35;
}

    .csrmanage-bonus-stat-list p:last-child {
        margin-bottom: 10px;
    }

.csrmanage-bonus-stat-list strong {
    color: #ff8d32;
    font-size: 25px;
    font-weight: normal;
}

.csrmanage-bonus-stat-icon {
    width: 122px;
    margin: 4px auto 0;
    color: #ff8d32;
}

    .csrmanage-bonus-stat-icon svg {
        display: block;
        width: 100%;
        height: auto;
    }

@media screen and (max-width: 768px) {
    .csrmanage-bonus-intro {
        display: block;
    }

    .csrmanage-bonus-stat-card {
        max-width: 290px;
        margin: 22px auto 0;
    }
}

@media screen and (max-width: 500px) {
    .csrmanage-bonus-stat-card {
        max-width: 100%;
        border-radius: 18px;
    }
}

/* ==================================================
   csrmanage/income.aspx - 勞資關係
   本頁依原稿採粉紅色系，不沿用 safe / tech 橘色系。
   ================================================== */

.csrmanage-income-page {
    --income-pink: #e96882;
    --income-pink-soft: #f6dce2;
    --income-pink-pale: #fcedf0;
    --income-line: #bdbdbd;
    --income-text: #333;
}

.income-section {
    margin-top: 28px;
}

.income-section-title {
    margin: 0 0 10px;
    color: var(--income-pink);
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
}

.income-summary-table,
.income-stat-table,
.income-total-table,
.income-site-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--income-text);
    font-size: 14px;
}

.income-summary-table {
    max-width: 420px;
}

    .income-summary-table th,
    .income-stat-table thead th,
    .income-total-table thead th,
    .income-site-table thead th {
        padding: 10px 8px;
        background: var(--income-pink-soft);
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

        .income-summary-table th:last-child,
        .income-stat-table thead th:last-child,
        .income-total-table thead th:last-child,
        .income-site-table thead th:last-child {
            border-right: 0;
        }

    .income-summary-table td,
    .income-stat-table tbody th,
    .income-stat-table tbody td,
    .income-total-table tbody th,
    .income-total-table tbody td,
    .income-site-table tbody th,
    .income-site-table tbody td {
        padding: 9px 8px;
        border-bottom: 1px solid var(--income-line);
        text-align: center;
        vertical-align: middle;
    }

.income-stat-table tbody th,
.income-total-table tbody th,
.income-site-table tbody th {
    background: #fafafa;
    font-weight: bold;
}

.income-stat-table th:first-child {
    width: 88px;
}

.income-table-wrap {
    width: 100%;
    overflow: visible;
}

.income-small-table-wrap + .income-small-table-wrap {
    margin-top: 20px;
}

.income-notes {
    margin-top: 20px;
    color: #444;
    font-size: 13px;
    line-height: 1.7;
}

    .income-notes p {
        margin: 0 0 6px;
    }

    .income-notes ul {
        margin: 0;
        padding-left: 22px;
    }

.income-relations {
    margin-top: 30px;
}

.income-policy-list {
    margin: 14px 0 20px;
    padding-left: 28px;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}

    .income-policy-list li {
        margin-bottom: 8px;
        padding-left: 2px;
    }

        .income-policy-list li::marker {
            color: var(--income-pink);
        }

    .income-policy-list strong {
        color: var(--income-pink);
    }

@media screen and (max-width: 768px) {
    .csrmanage-income-page .csrmanage-intro {
        text-indent: 0;
    }

    .income-section {
        margin-top: 24px;
    }

    .income-section-title {
        font-size: 17px;
    }

    .income-stat-table,
    .income-stat-table tbody,
    .income-stat-table tr,
    .income-stat-table th,
    .income-stat-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

        .income-stat-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .income-stat-table tbody tr {
            margin-bottom: 16px;
            border: 1px solid #ddd;
        }

        .income-stat-table tbody th {
            padding: 10px 12px;
            background: var(--income-pink-soft);
            border-bottom: 1px solid #ddd;
        }

        .income-stat-table tbody td {
            padding: 9px 12px;
            text-align: left;
        }

            .income-stat-table tbody td::before {
                display: inline-block;
                width: 58%;
                content: attr(data-label);
                color: #555;
                font-weight: bold;
            }

    .income-summary-table,
    .income-total-table,
    .income-site-table {
        font-size: 13px;
    }

    .income-total-table,
    .income-site-table {
        table-layout: auto;
    }

    .income-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .income-total-table {
        min-width: 480px;
    }

    .income-site-table {
        min-width: 680px;
    }
}

@media screen and (max-width: 500px) {
    .income-summary-table {
        max-width: none;
    }

    .income-policy-list {
        padding-left: 24px;
        font-size: 14px;
    }
}

.csrmanage-income-table th,
.csrmanage-income-table td {
    border-right: 1px solid #fff;
}

    .csrmanage-income-table th:last-child,
    .csrmanage-income-table td:last-child {
        border-right: 0;
    }

/* ==================================================
   csrmanage/respect.aspx - 員工招募與薪酬福利
   版型與配色延續 income.aspx 粉紅色系，改為由上往下瀏覽。
   ================================================== */

.csrmanage-respect-page {
    --respect-pink: #ea6c88;
    --respect-pink-soft: #f6dde3;
    --respect-pink-pale: #fdf1f3;
    --respect-line: #bdbdbd;
    --respect-text: #333;
}

    .csrmanage-respect-page .csrmanage-intro {
        margin-bottom: 14px;
        color: var(--respect-text);
    }

.respect-section {
    margin-top: 28px;
}

.respect-section-title {
    margin: 0 0 10px;
    color: var(--respect-pink);
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
}

.respect-subblock {
    margin-top: 20px;
}

.respect-subtitle,
.respect-year-title {
    margin: 0 0 10px;
    color: var(--respect-pink);
    font-size: 17px;
    line-height: 1.5;
    font-weight: bold;
}

.respect-year-block + .respect-year-block {
    margin-top: 18px;
}

.respect-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.respect-table-wrap-narrow {
    max-width: 580px;
}

.respect-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--respect-text);
    font-size: 14px;
}

    .respect-table th,
    .respect-table td {
        padding: 10px 8px;
        text-align: center;
        vertical-align: middle;
    }

    .respect-table thead th {
        background: var(--respect-pink-soft);
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-weight: bold;
    }

        .respect-table thead th:last-child {
            border-right: 0;
        }

    .respect-table tbody th,
    .respect-table tbody td {
        border-bottom: 1px solid var(--respect-line);
    }

    .respect-table tbody th {
        background: #fafafa;
        font-weight: bold;
    }

.respect-summary-table {
    max-width: 580px;
}

.respect-salary-table,
.respect-simple-table,
.respect-notice-table,
.respect-review-table,
.respect-parental-table {
    min-width: 520px;
}

    .respect-parental-table tbody th {
        text-align: left;
    }

.respect-note {
    margin: 8px 0 0;
    color: #555;
    font-size: 13px;
    line-height: 1.65;
}

.respect-number-list,
.respect-bullet-list {
    margin: 10px 0 0;
    padding-left: 24px;
    color: var(--respect-text);
    font-size: 15px;
    line-height: 1.75;
}

    .respect-number-list li,
    .respect-bullet-list li {
        margin-bottom: 8px;
    }

        .respect-number-list li::marker {
            color: var(--respect-pink);
            font-weight: bold;
        }

        /* 分項說明的實心點維持原稿黑色 */
        .respect-bullet-list li::marker {
            color: #333;
            font-weight: normal;
        }

    .respect-number-list .list-title {
        color: var(--respect-pink);
        font-weight: bold;
    }

.respect-subtitle + .csrmanage-intro {
    margin-top: 0;
}

.respect-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
    align-items: stretch;
}

.respect-photo-card {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border: 1px solid #f1d4da;
    border-radius: 22px;
    background: #f7f7f7;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
}

    .respect-photo-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 依各照片主體位置微調裁切焦點，避免人物被截掉。 */
    .respect-photo-card:nth-child(1) img {
        object-position: 50% 44%;
    }

    .respect-photo-card:nth-child(2) img {
        object-position: 50% 50%;
    }

    .respect-photo-card:nth-child(3) img {
        object-position: 50% 50%;
    }

@media screen and (max-width: 768px) {
    .csrmanage-respect-page .csrmanage-intro {
        text-indent: 0;
    }

    .respect-section {
        margin-top: 24px;
    }

    .respect-section-title,
    .respect-subtitle,
    .respect-year-title {
        font-size: 17px;
    }

    .respect-table {
        font-size: 13px;
    }

    .respect-photo-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
    }

    .respect-photo-card {
        aspect-ratio: 4 / 3;
        border-radius: 18px;
    }
}

/* ==================================================
   respect.aspx - 育嬰留停表格欄寬調整
   第一欄加寬，女／男／總計欄縮窄，減少項目文字折行。
   ================================================== */
.respect-parental-table {
    table-layout: fixed;
}

    .respect-parental-table thead th:first-child,
    .respect-parental-table tbody th:first-child {
        width: 55%;
    }

    .respect-parental-table thead th:nth-child(2),
    .respect-parental-table thead th:nth-child(3),
    .respect-parental-table thead th:nth-child(4),
    .respect-parental-table tbody td:nth-child(2),
    .respect-parental-table tbody td:nth-child(3),
    .respect-parental-table tbody td:nth-child(4) {
        width: 15%;
    }

    .respect-parental-table tbody th:first-child {
        padding-right: 12px;
        padding-left: 12px;
        white-space: normal;
        word-break: keep-all;
    }

@media screen and (max-width: 768px) {
    .respect-parental-table {
        min-width: 650px;
    }
}


/* ==================================================
   csrmanage/relastion.aspx - 人權保障與多元包容
   配色延續 income / respect 粉紅色系，內容改為由上往下瀏覽。
   ================================================== */
.csrmanage-relastion-page {
    --rel-pink: #ec6b86;
    --rel-pink-soft: #f8dfe5;
    --rel-line: #bdbdbd;
    --rel-text: #333;
}

    .csrmanage-relastion-page .csrmanage-intro {
        color: var(--rel-text);
        margin-bottom: 16px;
    }

.relastion-section {
    margin-top: 28px;
}

.relastion-section-title {
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 4px solid #f4c9d3;
    color: var(--rel-pink);
    font-size: 20px;
    line-height: 1.45;
    font-weight: bold;
}

.relastion-subtitle {
    margin: 18px 0 12px;
    color: var(--rel-pink);
    font-size: 18px;
    font-weight: bold;
}

.relastion-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.relastion-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--rel-text);
    font-size: 14px;
    line-height: 1.55;
}

    .relastion-table th,
    .relastion-table td {
        padding: 10px 9px;
        vertical-align: middle;
        border-bottom: 1px solid var(--rel-line);
    }

    .relastion-table thead th {
        background: var(--rel-pink-soft);
        text-align: center;
        border-right: 1px solid #fff;
    }

        .relastion-table thead th:last-child {
            border-right: 0;
        }

    .relastion-table tbody th {
        width: 105px;
        background: #fafafa;
        text-align: center;
        font-weight: bold;
    }

.relastion-risk-table thead th:nth-child(1) {
    width: 9%;
}

.relastion-risk-table thead th:nth-child(2) {
    width: 11%;
}

.relastion-risk-table thead th:nth-child(3) {
    width: 29%;
}

.relastion-risk-table thead th:nth-child(4) {
    width: 32%;
}

.relastion-risk-table thead th:nth-child(5) {
    width: 19%;
}

.relastion-left {
    text-align: left;
}

    .relastion-left ul {
        margin: 0;
        padding-left: 20px;
    }

    .relastion-left li {
        margin-bottom: 3px;
    }

.relastion-bullet-list,
.relastion-number-list {
    margin: 10px 0 0;
    padding-left: 24px;
    color: var(--rel-text);
    font-size: 15px;
    line-height: 1.75;
}

    .relastion-bullet-list li {
        margin-bottom: 10px;
    }

        .relastion-bullet-list li::marker {
            color: #333;
        }

    .relastion-bullet-list strong {
        color: #333;
    }

    .relastion-number-list li {
        margin-bottom: 10px;
    }

        .relastion-number-list li::marker,
        .relastion-number-list li > span {
            color: var(--rel-pink);
        }

        .relastion-number-list li > span {
            font-weight: normal;
        }

    .relastion-number-list p {
        margin: 2px 0 0;
        color: var(--rel-text);
    }

.relastion-chart-wrap {
    width: 100%;
    margin: 10px 0 24px;
    overflow-x: auto;
}

.relastion-chart {
    display: block;
    width: 100%;
    min-width: 980px;
    height: auto;
}

.chart-grid line {
    stroke: #d7d7d7;
    stroke-width: 1;
}

.chart-bars-male rect, .legend-male {
    fill: #6fb2de;
}

.chart-bars-female rect, .legend-female {
    fill: #eb6d82;
}

.chart-line, .legend-line {
    fill: none;
    stroke: #9a5b66;
    stroke-width: 2;
}

.chart-points circle, .legend-point {
    fill: #9a5b66;
}

.chart-labels text, .chart-legend text {
    fill: #333;
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
}

.chart-year-label {
    font-size: 16px;
    font-weight: 600;
}

.chart-value-label {
    font-size: 15px;
    font-weight: 600;
}

.chart-percent-label {
    font-size: 15px;
    font-weight: 600;
}

.chart-legend-label {
    font-size: 16px;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .csrmanage-relastion-page .csrmanage-intro {
        text-indent: 0;
    }

    .relastion-section-title {
        font-size: 18px;
    }

    .relastion-subtitle {
        font-size: 17px;
    }

    .relastion-table {
        min-width: 980px;
    }

    .relastion-chart {
        min-width: 980px;
    }
}


/* ==================================================
   csrmanage/train.aspx - 人才培育與發展
   配色延續 income / respect / relastion 粉紅色系。
   ================================================== */
.csrmanage-train-page {
    --train-pink: #ec6b86;
    --train-pink-soft: #f8dfe5;
    --train-pink-pale: #fff7f9;
    --train-line: #bdbdbd;
    --train-text: #333;
}

    .csrmanage-train-page .csrmanage-intro {
        color: var(--train-text);
        margin-bottom: 16px;
    }

.train-section {
    margin-top: 28px;
}

    .train-section:first-child {
        margin-top: 0;
    }

.train-section-title {
    margin: 0 0 12px;
    padding-left: 10px;
    border-left: 4px solid #f4c9d3;
    color: var(--train-pink);
    font-size: 20px;
    line-height: 1.45;
    font-weight: bold;
}

.train-subtitle {
    margin: 0 0 12px;
    color: var(--train-pink);
    font-size: 18px;
    line-height: 1.45;
    font-weight: bold;
}

.train-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
}

.train-card {
    padding: 22px 28px;
    border: 5px solid var(--train-pink-soft);
    background: #fff;
}

    .train-card h3 {
        margin: 0 0 12px;
        color: var(--train-pink);
        font-size: 17px;
        line-height: 1.5;
    }

    .train-card p {
        margin: 0;
        color: var(--train-text);
        font-size: 15px;
        line-height: 1.75;
        text-indent: 2em;
    }

.train-photo-grid {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.train-photo-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.train-photo-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
}

.train-photo-card {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #f0d4da;
    border-radius: 24px;
    background: #f7f7f7;
}

    .train-photo-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.train-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.train-table-gap {
    margin-top: 18px;
}

.train-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--train-text);
    font-size: 14px;
    line-height: 1.45;
}

    .train-table th,
    .train-table td {
        padding: 10px 9px;
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid var(--train-line);
    }

    .train-table thead th {
        background: var(--train-pink-soft);
        border-right: 1px solid #fff;
        font-weight: bold;
    }

        .train-table thead th:last-child {
            border-right: 0;
        }

    .train-table tbody th {
        background: #fafafa;
        font-weight: bold;
    }

.train-license-wrap {
    max-width: 760px;
}

.train-license-table th:first-child {
    width: 72%;
}

.train-license-table th:last-child,
.train-license-table td:last-child {
    width: 28%;
}

.train-unit {
    margin: -4px 0 8px;
    text-align: right;
    color: #555;
    font-size: 13px;
}

.train-note {
    margin: 8px 0 0;
    color: #555;
    font-size: 13px;
    line-height: 1.65;
}

.train-pink-bullet-list,
.train-number-list {
    margin: 10px 0 0;
    padding-left: 24px;
    color: var(--train-text);
    font-size: 15px;
    line-height: 1.75;
}

    .train-pink-bullet-list li,
    .train-number-list li {
        margin-bottom: 12px;
    }

        .train-pink-bullet-list li::marker {
            color: var(--train-pink);
        }

        .train-pink-bullet-list li > span,
        .train-esg-block > h3 {
            color: var(--train-pink);
            font-weight: normal;
        }

    .train-pink-bullet-list p,
    .train-number-list p,
    .train-esg-block p {
        margin: 4px 0 0;
        color: var(--train-text);
    }

.train-esg-block {
    margin-top: 18px;
}

    .train-esg-block h3 {
        margin: 0 0 8px;
        font-size: 17px;
        line-height: 1.5;
    }

.train-number-list strong {
    color: var(--train-text);
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    .csrmanage-train-page .csrmanage-intro {
        text-indent: 0;
    }

    .train-section-title {
        font-size: 18px;
    }

    .train-subtitle {
        font-size: 17px;
    }

    .train-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .train-card {
        padding: 18px 18px;
        border-width: 4px;
    }

        .train-card p {
            text-indent: 0;
            font-size: 14px;
        }

    .train-photo-grid-three,
    .train-photo-grid-two {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
    }

    .train-table {
        min-width: 620px;
    }

    .train-license-table {
        min-width: 520px;
    }
}


/* respect.aspx 圖片放大提示：整組照片顯示一次，避免破壞三欄排版 */
.respect-photo-hint {
    margin: 16px 0 8px;
    text-align: center;
}