@charset "utf-8";

/* BUILD: 20260820-customer-6 | Refactored & Consolidated */

/* =========================================================
   1. 全域共用樣式 (Global Consolidated Styles)
   針對跨網頁重複宣告的容器、間距、排版與表格進行整併
   ========================================================= */

/* Box-Sizing 重置 */
.company-customer-page *, .company-customer-page *::before, .company-customer-page *::after,
.company-governance-page *, .company-governance-page *::before, .company-governance-page *::after,
.company-manage-page, .company-manage-page *,
.company-awards *, .company-awards *::before, .company-awards *::after,
.company-future-page, .company-future-page *,
.company-org-page, .company-org-page *,
.company-tech-page, .company-tech-page * {
    box-sizing: border-box;
}

/* 頁面外層容器 */
.company-customer-page,
.company-governance-page,
.company-manage-page,
.company-awards,
.company-future-page,
.company-org-page,
.company-tech-page {
    width: 100%;
    line-height: 1.8;
}

.company-manage-page,
.company-awards,
.company-future-page,
.company-org-page,
.company-tech-page {
    color: #555;
    font-size: 16px;
}

.company-customer-page {
    color: #444;
    font-size: 16px;
}

.company-governance-page {
    color: #555;
    line-height: 1.75;
    --gov-border: #cfe0e5;
    --gov-head: #c9e7f7;
}

/* 區塊共用間距 */
.company-customer-page section,
.company-future-page section,
.company-org-page section,
.company-tech-page section,
.awards-section {
    margin: 0 0 32px;
}

/* 內文段落 (p.space) */
.company-customer-page p.space,
.company-governance-page p.space,
.company-governance-page > p,
.company-manage-page p.space,
.company-awards .awards-intro,
.company-future-page p.space,
.company-org-page p.space,
.company-tech-page p.space {
    margin: 0 0 18px;
    text-align: justify;
}

.company-customer-page p.space {
    margin: 0 0 14px;
    text-indent: 2em;
}

/* 共用主標題 */
.flow-title,
.sec-title {
    margin: 24px 0 12px;
    padding-left: 12px;
    border-left: 3px solid #58c9db;
    color: #008cca;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.4;
}

/* 共用副標題 */
.customer-subtitle,
.future-subtitle,
.tech-lead-title,
.tech-chart-title {
    margin: 22px 0 10px;
    color: #008fd3;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.customer-subtitle {
    margin: 24px 0 12px;
    color: #0087d5;
}

/* 條列清單 */
.policy-list,
.future-list,
.communication-list,
.tech-number-list {
    margin: 0 0 16px;
    padding-left: 1.6em;
}

    .policy-list li,
    .future-list li,
    .communication-list li,
    .tech-number-list li {
        margin-bottom: 6px;
    }

/* 基礎數據表格 (管理、法遵、風險、稅務) */
.manage-training-table,
.future-data-table,
.org-risk-table,
.tax-table {
    width: 100%;
    border-collapse: collapse;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    table-layout: fixed;
    min-width: 0;
}

.tax-table {
    font-size: 16px;
}

    .manage-training-table th, .manage-training-table td,
    .future-data-table th, .future-data-table td,
    .org-risk-table th, .org-risk-table td,
    .tax-table th, .tax-table td {
        padding: 9px 12px;
        border: 0;
        border-bottom: 1px solid #b9b9b9;
        vertical-align: middle;
    }

.future-data-table th, .future-data-table td {
    padding: 9px 10px;
}

.org-risk-table th, .org-risk-table td {
    padding: 10px 12px;
}

.tax-table th, .tax-table td {
    padding: 11px 10px;
    text-align: center;
    white-space: nowrap;
}

.manage-training-table thead th,
.future-data-table thead th,
.org-risk-table thead th,
.tax-table thead th {
    background-color: #c8e5f5 !important;
    font-weight: 700;
    text-align: center;
    color: #333;
}

.manage-training-table tbody th,
.future-data-table tbody th,
.org-risk-table tbody th,
.tax-table tbody th {
    background-color: #f5f5f5;
    font-weight: 700;
    color: #333;
}

.manage-training-table tbody th, .org-risk-table tbody th {
    text-align: center;
}

.future-data-table tbody th {
    text-align: left;
}

.manage-training-table tbody td,
.future-data-table tbody td,
.org-risk-table tbody td,
.tax-table tbody td {
    background-color: #fff;
}

/* 手機版全域縮放 (700px) */
@media screen and (max-width: 700px) {
    .company-manage-page,
    .company-awards,
    .company-future-page,
    .company-org-page,
    .company-tech-page {
        font-size: 15px;
    }

        .company-manage-page p.space,
        .company-future-page p.space,
        .company-org-page p.space,
        .company-tech-page p.space {
            text-align: left;
        }
}


/* =========================================================
   2. 各頁面專屬獨立樣式 (Page-Specific Styles)
   保留各網頁特定的圖表、特定間距、定位邏輯等
   ========================================================= */

/* --- Index.aspx：公司治理 --- */
.company-governance-page > * {
    max-width: 100%;
}

.company-governance-page .container,
.company-governance-page .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 12px;
    padding-left: 12px;
}

.company-governance-page .row {
    --page-gutter-x: 0;
    --page-gutter-y: 0;
    display: flex;
    margin-top: calc(-1 * var(--page-gutter-y));
    margin-right: calc(-0.5 * var(--page-gutter-x));
    margin-left: calc(-0.5 * var(--page-gutter-x));
    flex-wrap: wrap;
}

    .company-governance-page .row > * {
        width: 100%;
        max-width: 100%;
        margin-top: var(--page-gutter-y);
        padding-right: calc(0.5 * var(--page-gutter-x));
        padding-left: calc(0.5 * var(--page-gutter-x));
        flex-shrink: 0;
    }

.company-governance-page .g-0 {
    --page-gutter-x: 0;
    --page-gutter-y: 0;
}

.company-governance-page .g-3 {
    --page-gutter-x: 16px;
    --page-gutter-y: 16px;
}

.company-governance-page .col-12 {
    width: 100%;
    flex: 0 0 auto;
}

.company-governance-page .d-flex {
    display: flex;
}

.company-governance-page .align-items-center {
    align-items: center;
}

.company-governance-page .justify-content-center {
    justify-content: center;
}

.company-governance-page .text-center {
    text-align: center;
}

.company-governance-page .text-muted {
    color: #6c757d;
}

.company-governance-page .fw-bold {
    font-weight: bold;
}

.company-governance-page .small {
    font-size: 87.5%;
}

.company-governance-page .list-unstyled {
    padding-left: 0;
    list-style: none;
}

.company-governance-page .mb-0 {
    margin-bottom: 0;
}

.company-governance-page .mb-2 {
    margin-bottom: 8px;
}

.company-governance-page .mb-3 {
    margin-bottom: 16px;
}

.company-governance-page .mt-3 {
    margin-top: 16px;
}

.company-governance-page .my-3 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.company-governance-page .my-4 {
    margin-top: 24px;
    margin-bottom: 24px;
}

.company-governance-page .my-5 {
    margin-top: 48px;
    margin-bottom: 48px;
}

.company-governance-page .py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.company-governance-page .py-3 {
    padding-top: 16px;
    padding-bottom: 16px;
}

@media screen and (min-width: 768px) {
    .company-governance-page .col-md-2 {
        width: 16.666667%;
        flex: 0 0 auto;
    }

    .company-governance-page .col-md-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .company-governance-page .col-md-5 {
        width: 41.666667%;
        flex: 0 0 auto;
    }

    .company-governance-page .col-md-6 {
        width: 50%;
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 992px) {
    .company-governance-page .col-lg-11 {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 1200px) {
    .company-governance-page .col-xl-3 {
        width: 100%;
    }
}

.company-governance-page figure {
    margin: 16px 0 24px;
}

    .company-governance-page figure img {
        max-width: 100%;
        height: auto;
    }

.location-icon {
    margin-right: 3px;
    vertical-align: middle;
}

/* 圖例與董事資料卡 */
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
}

.b1 {
    background: #078fd3;
}

.b2 {
    background: #57bf58;
}

.b3 {
    background: #ef9b45;
}

.b4 {
    background: #159a72;
}

.b5 {
    background: #777;
}

.group-frame {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.board-card {
    height: 100%;
    border: 1px solid var(--gov-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.board-name {
    padding: 9px 12px;
    background: var(--gov-head);
    font-weight: bold;
    text-align: center;
}

.board-body {
    padding: 12px 14px;
}

.board-item {
    display: flex;
    gap: 6px;
    margin: 5px 0;
    align-items: flex-start;
}

    .board-item .legend-dot {
        flex: 0 0 auto;
        margin-top: 7px;
    }

/* 治理表格區 */
.gov-header .col-12 > div, .board-header .pill {
    padding: 10px 12px;
    background: var(--gov-head);
    font-weight: bold;
    text-align: center;
}

.gov-header {
    margin-right: 0;
    margin-left: 0;
    border: 1px solid #cfd7d9;
    border-bottom: 0;
    font-size: 16px;
    line-height: 1.5;
}

    .gov-header > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    .gov-header .col-12 > div {
        display: flex;
        height: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #fff;
    }

    .gov-header .col-12:last-child > div {
        border-right: 0;
    }

.gov-table-wrapper, .committee-table {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid #cfd7d9;
    -webkit-overflow-scrolling: touch;
    font-size: 15px;
    line-height: 1.7;
}

    .gov-table-wrapper ol {
        margin: 0;
        padding-left: 1.6em;
        font-size: 15px;
        line-height: 1.7;
    }

    .gov-table-wrapper li {
        margin-bottom: 6px;
    }

        .gov-table-wrapper li:last-child {
            margin-bottom: 0;
        }

.gov-row {
    display: flex;
    flex-wrap: wrap;
}

    .gov-row + .gov-row {
        border-top: 1px solid #c9c9c9;
    }

.gov-cell {
    display: flex;
    padding: 12px;
    align-items: center;
    border-right: 1px solid #ddd;
}

    .gov-cell:last-child {
        border-right: 0;
    }

.gov-left, .gov-title {
    background: #f5f5f5;
    font-weight: bold;
}

/* 董事多元化矩陣 */
.board-table-wrapper {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #cfd7d9;
    border-radius: 4px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

    .board-table-wrapper:focus {
        outline: 3px solid rgba(0, 140, 202, .25);
        outline-offset: 2px;
    }

.board-header, .board-matrix, .board-subtitle {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(92px, 1.65fr) repeat(11, minmax(0, 1fr));
}

    .board-header .board-directors {
        grid-column: 2 / 9;
    }

    .board-header .board-independent {
        grid-column: 9 / 13;
    }

.board-cell {
    display: flex;
    min-height: 36px;
    min-width: 0;
    padding: 8px 3px;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #c9c9c9;
    text-align: center;
    overflow-wrap: anywhere;
}

.board-name-row .board-cell:not(.board-left) {
    min-height: 124px;
    padding: 8px 2px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    letter-spacing: 2px;
    line-height: 1.25;
}

.board-header {
    position: relative;
    z-index: 2;
    background: #fff;
}

    .board-header .pill {
        display: flex;
        min-height: 46px;
        padding: 8px 10px;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #fff;
        border-radius: 0;
        background: var(--gov-head);
        color: #37474f;
        font-weight: bold;
        text-align: center;
    }

    .board-header .board-role-title, .board-matrix .board-left {
        position: relative;
        z-index: 1;
    }

    .board-header .board-role-title {
        z-index: 4;
    }

.board-left {
    background: #e5f2f8;
    font-weight: bold;
}

.board-subtitle .board-cell:first-child {
    grid-column: 1 / -1;
    background: var(--gov-head);
}

.board-span-all {
    grid-column: 2 / -1;
}

/* 董事會成員性別及年齡分布圖表 */
.board-age-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 28px 0 38px;
    color: #333;
    overflow: hidden;
}

.board-age-title {
    margin-top: 0;
}

.board-age-layout {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: start;
}

.board-age-table-wrap, .board-age-chart-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

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

.board-age-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
}

    .board-age-table th, .board-age-table td {
        height: 42px;
        padding: 8px 10px;
        border-bottom: 1px solid #bbb;
        text-align: center;
        vertical-align: middle;
    }

    .board-age-table thead th {
        background: #c9e5f6;
        font-size: 16px;
        font-weight: bold;
    }

    .board-age-table tbody th, .board-age-table tfoot th, .board-age-table tfoot td {
        background: #f5f5f5;
        font-weight: bold;
    }

.diagonal-heading {
    position: relative;
    width: 34%;
    height: 58px !important;
    padding: 0 !important;
    background: linear-gradient( to top right, transparent 49.4%, #fff 49.7%, #fff 50.3%, transparent 50.6% ), #c9e5f6 !important;
    overflow: hidden;
}

    .diagonal-heading::after {
        display: none;
        content: none;
    }

.diagonal-total {
    position: absolute;
    z-index: 2;
    top: 4px;
    right: 10px;
    line-height: 1.3;
}

.diagonal-age {
    position: absolute;
    z-index: 2;
    bottom: 5px;
    left: 8px;
    line-height: 1.3;
}

.board-age-chart {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 290px;
    grid-template-columns: 30px minmax(0, 1fr);
}

.chart-y-axis {
    display: flex;
    padding: 0 6px 32px 0;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
}

.chart-plot {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.chart-group {
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(0, 1fr) 38px;
}

.chart-bars {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.chart-bar {
    display: block;
    width: min(38%, 38px);
    height: calc(var(--value) / 3 * 100%);
    min-height: 0;
    transition: opacity 0.2s ease;
}

    .chart-bar:hover {
        opacity: 0.8;
    }

    .chart-bar.male, .legend-color.male {
        background: #287fbd;
    }

    .chart-bar.female, .legend-color.female {
        background: #87c8ec;
    }

.chart-label {
    padding-top: 7px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.board-age-legend {
    display: flex;
    margin-top: 12px;
    justify-content: center;
    gap: 28px;
}

    .board-age-legend span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.legend-color {
    display: inline-block;
    width: 14px;
    height: 14px;
}

/* 其他一般資料表 */
.company-governance-section {
    margin: 36px 0;
}

.company-table-title {
    margin: 18px 0 10px;
    color: #008cca;
    font-size: 17px;
    font-weight: bold;
}

.company-table-wrap {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid #d5e2e5;
}

.company-data-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

    .company-data-table th:nth-child(1), .company-data-table td:nth-child(1) {
        width: 52%;
    }

    .company-data-table th:nth-child(2), .company-data-table td:nth-child(2) {
        width: 30%;
    }

    .company-data-table th:nth-child(3), .company-data-table td:nth-child(3) {
        width: 18%;
    }

    .company-data-table th, .company-data-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #c9c9c9;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .company-data-table thead th, .company-data-table .phase-row th {
        background: var(--gov-head);
        text-align: center;
    }

    .company-data-table td:nth-child(3) {
        text-align: center;
        white-space: normal;
    }

.committee-table .gov-cell {
    justify-content: center;
    text-align: center;
}

.committee-attendance-table {
    width: 100%;
    table-layout: fixed;
}

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

        .committee-attendance-table th:nth-child(1) {
            width: 18%;
        }

        .committee-attendance-table th:nth-child(2) {
            width: 13%;
        }

        .committee-attendance-table th:nth-child(3) {
            width: 22%;
        }

        .committee-attendance-table th:nth-child(4), .committee-attendance-table th:nth-child(5), .committee-attendance-table th:nth-child(6) {
            width: 15.66%;
        }

    .committee-attendance-table .committee-term {
        background-color: #f4f4f4;
        font-weight: 600;
        line-height: 1.6;
    }

    .committee-attendance-table .committee-note {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.4;
    }

    .committee-attendance-table tbody tr:nth-child(4) > * {
        border-top: 2px solid #b8c6cc;
    }

/* 董事會績效評估流程 */
.performance-flow {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 30px auto;
    padding: 0 14px 0 74px;
    box-sizing: border-box;
}

.performance-flow-list {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.performance-flow-item {
    position: relative;
    width: 100%;
    margin: 0 0 26px;
}

    .performance-flow-item span {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        padding: 7px 18px;
        border-radius: 22px;
        background-color: #1599df;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        box-sizing: border-box;
    }

    .performance-flow-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 7px;
        height: 26px;
        background-color: #78c3ec;
        transform: translateX(-50%);
    }

    .performance-flow-item:not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: 3;
        bottom: -26px;
        left: 50%;
        width: 0;
        height: 0;
        border-top: 11px solid #78c3ec;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        transform: translateX(-50%);
    }

.performance-flow-last {
    margin-bottom: 0;
}

.performance-flow-return {
    position: absolute;
    z-index: 1;
    top: 20px;
    bottom: 20px;
    left: 26px;
    width: 39px;
    border-top: 8px solid #78c3ec;
    border-bottom: 8px solid #78c3ec;
    border-left: 8px solid #78c3ec;
    border-radius: 21px 0 0 21px;
    box-sizing: border-box;
}

    .performance-flow-return::before {
        content: "";
        position: absolute;
        z-index: 4;
        top: -14px;
        right: -7px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 13px solid #78c3ec;
    }

    .performance-flow-return::after {
        display: none;
    }

.board-introduction {
    width: 100%;
}

.board-legend {
    display: flex;
    margin: 12px 0 20px;
    gap: 10px 20px;
    align-items: center;
    flex-wrap: wrap;
}

    .board-legend > span {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

/* 治理 RWD */
@media screen and (max-width: 820px) {
    .board-age-section {
        overflow: visible;
    }

    .board-age-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .board-age-chart {
        height: 300px;
    }
}

@media screen and (min-width: 601px) {
    .company-data-table th:last-child, .company-data-table td:last-child {
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .company-data-table col:nth-child(1) {
        width: 50%;
    }

    .company-data-table col:nth-child(2) {
        width: 28%;
    }

    .company-data-table col:nth-child(3) {
        width: 22%;
    }

    .committee-section > .flow-title {
        margin-bottom: 24px;
    }

    .committee-block {
        margin: 0 0 40px;
        padding-left: 14px;
        border-left: 1px solid #b8e4ee;
    }

    .committee-title {
        margin: 0 0 14px;
        padding: 0;
        border: 0;
        color: #008fc5;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
    }

    .committee-block .space {
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media screen and (min-width: 768px) {
    .company-governance-page .group-frame .col-md-6, .company-governance-page .group-frame .col-xl-3 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
}

@media screen and (max-width: 768px) {
    .company-governance-page {
        padding: 0 12px;
    }

        .company-governance-page p.space, .company-governance-page > p {
            text-align: left;
        }

    .gov-row {
        display: block;
    }

    .gov-cell {
        width: 100% !important;
        border-right: 0;
        border-bottom: 1px solid #ddd;
    }

    .gov-title, .gov-left {
        background: var(--gov-head);
    }

    .gov-header, .gov-table-wrapper, .gov-table-wrapper ol {
        font-size: 16px;
    }

    .gov-table-wrapper {
        line-height: 1.75;
    }

    .company-governance-page .group-frame .col-12, .company-governance-page .group-frame .col-md-6, .company-governance-page .group-frame .col-xl-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media screen and (max-width: 600px) {
    .board-header, .board-matrix, .board-subtitle {
        width: 100%;
        min-width: 0;
        grid-template-columns: 68px repeat(11, minmax(0, 1fr));
    }

    .board-cell {
        min-height: 32px;
        padding: 6px 1px;
        font-size: 11px;
        line-height: 1.25;
    }

    .board-header .pill {
        min-height: 40px;
        padding: 6px 2px;
        font-size: 12px;
    }

    .board-name-row .board-cell:not(.board-left) {
        min-height: 112px;
        padding: 6px 0;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .company-table-wrap {
        overflow: visible;
        border: 0;
    }

    .company-data-table, .company-data-table tbody {
        display: block;
        width: 100%;
    }

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

        .company-data-table tbody tr:not(.phase-row) {
            display: block;
            margin: 0 0 14px;
            overflow: hidden;
            border: 1px solid #c9dfe5;
            border-radius: 6px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(35, 89, 102, .08);
        }

        .company-data-table tbody tr.phase-row, .company-data-table .phase-row th {
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .company-data-table .phase-row th {
            margin: 20px 0 8px;
            padding: 10px 12px;
            border: 0;
            border-left: 4px solid #58c9db;
            text-align: left;
        }

        .company-data-table tbody tr.phase-row:first-child th {
            margin-top: 0;
        }

        .company-data-table tbody td, .company-data-table tbody td:nth-child(1), .company-data-table tbody td:nth-child(2), .company-data-table tbody td:nth-child(3) {
            display: grid;
            width: 100%;
            min-height: 44px;
            box-sizing: border-box;
            grid-template-columns: 84px minmax(0, 1fr);
            gap: 10px;
            padding: 10px 12px;
            border-bottom: 1px solid #e1eaec;
            text-align: left;
            white-space: normal;
        }

            .company-data-table tbody td:last-child {
                border-bottom: 0;
            }

            .company-data-table tbody td::before {
                content: attr(data-label);
                color: #087f99;
                font-weight: bold;
            }

            .company-data-table tbody td:empty::after {
                content: "—";
                color: #8a9699;
            }

    .board-legend {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .board-legend > span {
            white-space: normal;
        }

    .board-age-section {
        margin: 22px 0 30px;
    }

    .board-age-title {
        font-size: 18px;
    }

    .board-age-table {
        min-width: 390px;
        font-size: 14px;
    }

        .board-age-table thead th {
            font-size: 15px;
        }

    .board-age-chart {
        height: 270px;
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .chart-plot {
        gap: 4px;
    }

    .chart-bars {
        gap: 2px;
    }

    .chart-bar {
        width: min(40%, 28px);
    }

    .chart-label {
        font-size: 12px;
    }

    .committee-section > .flow-title {
        margin-bottom: 20px;
    }

    .committee-block {
        margin-bottom: 32px;
        padding-left: 10px;
    }

    .committee-title {
        font-size: 19px;
    }

    .committee-block .space {
        margin-left: 0;
        margin-right: 0;
    }

    .performance-flow {
        max-width: 340px;
        padding: 0 10px 0 64px;
    }

    .performance-flow-item span {
        min-height: 40px;
        padding: 7px 12px;
        font-size: 15px;
    }

    .performance-flow-return {
        left: 18px;
        width: 37px;
    }
}


/* --- customer.aspx：客戶溝通 --- */
.company-customer-page .flow-title {
    margin: 26px 0 12px;
    padding-left: 14px;
    border-left: 4px solid #62c6e3;
    color: #0087d5;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
}

.customer-policy-flow {
    display: grid;
    align-items: center;
    max-width: 820px;
    margin: 22px auto 30px;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
}

.policy-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    border: 5px solid #e4e9f1;
    border-radius: 44px;
    color: #0087d5;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.policy-items {
    display: grid;
    gap: 10px;
}

    .policy-items article {
        position: relative;
        margin: 0;
        padding: 13px 18px;
        border-radius: 12px;
        background: #72bce6;
        color: #fff;
    }

        .policy-items article:nth-child(3) {
            background: #078bd8;
        }

        .policy-items article:nth-child(n+4) {
            background: #07689c;
        }

    .policy-items h3, .policy-items p {
        margin: 0;
        color: inherit;
    }

    .policy-items h3 {
        font-size: 16px;
    }

    .policy-items p {
        line-height: 1.55;
    }

.customer-table-wrap {
    width: 100%;
    margin: 18px 0 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.customer-data-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

    .customer-data-table th, .customer-data-table td {
        padding: 11px 12px;
        border-bottom: 1px solid #bbb;
        vertical-align: middle;
        line-height: 1.5;
        text-align: center;
    }

    .customer-data-table thead th {
        background: #c9e7f8;
        color: #333;
        font-weight: 700;
    }

    .customer-data-table tbody th {
        background: #f4f4f4;
        font-weight: 700;
    }

.customer-risk-table td:last-child {
    text-align: left;
}

.customer-risk-table .risk-group-col {
    width: 7%;
}

.customer-risk-table .operation-col {
    width: 7%;
}

.customer-risk-table .issue-col {
    width: 31%;
}

.customer-risk-table .materiality-col {
    width: 14%;
}

.customer-risk-table .action-col {
    width: 41%;
}

.customer-risk-table thead th:first-child {
    background: linear-gradient(to right, #c9e7f8 0 50%, #f1f1f1 50% 100%);
}

.customer-risk-table .risk-group, .customer-risk-table .operation-group {
    padding: 8px 4px;
    font-weight: 700;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 5px;
}

.customer-risk-table .risk-group {
    background: #c9e7f8;
}

.customer-risk-table .operation-group {
    background: #f1f1f1;
}

.customer-risk-table .opportunity-start > * {
    border-top: 8px solid #fff;
}

.customer-risk-table tbody td:nth-last-child(3), .customer-risk-table tbody td:nth-last-child(2) {
    text-align: center;
}

.customer-channel-list {
    display: grid;
    gap: 12px;
}

    .customer-channel-list article {
        display: grid;
        align-items: center;
        min-height: 82px;
        padding: 14px 18px 14px 84px;
        border-radius: 16px;
        background: #e1f2fc;
        grid-template-columns: minmax(190px, 34%) minmax(0, 1fr);
        gap: 18px;
        position: relative;
    }

    .customer-channel-list h3, .customer-channel-list p {
        margin: 0;
    }

    .customer-channel-list h3 {
        font-size: 16px;
        font-weight: 700;
    }

.channel-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 64px;
    height: 64px;
    border: 0;
    object-fit: contain;
    transform: translateY(-50%);
}

.customer-kpi-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

    .customer-kpi-table th:first-child {
        width: 18%;
    }

    .customer-kpi-table th:nth-child(2) {
        width: 20%;
    }

    .customer-kpi-table th:nth-child(3) {
        width: 16%;
    }

    .customer-kpi-table th:nth-child(4) {
        width: 13%;
    }

    .customer-kpi-table th:nth-child(5) {
        width: 17%;
    }

    .customer-kpi-table th:nth-child(6) {
        width: 16%;
    }

    .customer-kpi-table th, .customer-kpi-table td {
        font-size: 14px;
    }

.customer-bar-chart {
    display: grid;
    position: relative;
    width: 100%;
    max-width: 720px;
    height: 300px;
    margin: 16px auto 34px;
    padding: 30px 50px 52px;
    border-bottom: 1px solid #bbb;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #ddd 44px);
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

.bar-group {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;
    text-align: center;
}

.bar-set {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 190px;
    gap: 10px;
}

    .bar-set i {
        display: block;
        position: relative;
        width: 34px;
        height: var(--height);
        min-height: 96px;
        background: #83bfe2;
        font-style: normal;
    }

        .bar-set i:nth-child(2) {
            background: #078bd8;
        }

        .bar-set i:nth-child(3) {
            background: #12547c;
        }

        .bar-set i b {
            position: absolute;
            bottom: 100%;
            left: 50%;
            white-space: nowrap;
            font-size: 11px;
            transform: translateX(-50%);
        }

.chart-legend {
    display: flex;
    position: absolute;
    right: 0;
    bottom: -34px;
    left: 0;
    justify-content: center;
    gap: 28px;
}

    .chart-legend span::before {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 5px;
        background: #83bfe2;
        content: "";
    }

    .chart-legend span:nth-child(2)::before {
        background: #078bd8;
    }

    .chart-legend span:nth-child(3)::before {
        background: #12547c;
    }

.payment-tags {
    display: grid;
    margin: 16px 0 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

    .payment-tags span {
        padding: 11px 8px;
        border-radius: 9px;
        background: #d9effa;
        color: #075d8f;
        font-weight: 700;
        text-align: center;
    }

.customer-line-chart {
    width: 100%;
    max-width: 700px;
    margin: 12px auto 30px;
    overflow: hidden;
}

.customer-line-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

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

    .customer-line-svg .line-axis-labels text {
        fill: #666;
        font-size: 13px;
        text-anchor: end;
    }

    .customer-line-svg .growth-line {
        fill: none;
        stroke: #078bd8;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .customer-line-svg .growth-points circle {
        fill: #078bd8;
    }

    .customer-line-svg .growth-points text {
        fill: #555;
        font-size: 14px;
        text-anchor: middle;
    }

    .customer-line-svg .growth-points .point-value {
        font-weight: 700;
    }

.paperless-table {
    max-width: 680px;
    margin: auto;
}

.line-service-wrap::after {
    display: block;
    clear: both;
    content: "";
}

.line-service-figure {
    float: right;
    width: 180px;
    max-width: 34%;
    margin: 0 0 12px 24px;
    text-align: center;
}

    .line-service-figure img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 18px;
        filter: drop-shadow(0 3px 6px rgba(21, 91, 130, .25));
    }

    .line-service-figure figcaption {
        margin-top: 7px;
        color: #555;
        font-size: 13px;
        line-height: 1.4;
    }

.customer-stats-grid {
    display: grid;
    margin: 18px 0 28px;
    grid-template-columns: 1fr;
    gap: 24px;
}

    .customer-stats-grid h3 {
        margin: 0 0 10px;
        color: #0087d5;
        font-size: 17px;
    }

@media screen and (max-width: 760px) {
    .company-customer-page {
        font-size: 15px;
    }

    .customer-policy-flow {
        grid-template-columns: 1fr;
    }

    .policy-core {
        width: 150px;
        height: 110px;
        margin: auto;
        border-radius: 28px;
    }

    .customer-channel-list article {
        padding: 72px 16px 16px;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .channel-icon {
        top: 14px;
        left: 16px;
        transform: none;
    }

    .line-service-figure {
        float: none;
        width: 220px;
        max-width: 100%;
        margin: 0 auto 18px;
    }

    .customer-risk-table {
        min-width: 720px;
    }

    .customer-bar-chart {
        gap: 20px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .payment-tags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .customer-kpi-table {
        min-width: 720px;
    }
}

/* --- manage.aspx：誠信經營 --- */
.company-manage-page .policy-list {
    margin: 0 0 22px;
    padding-left: 1.8em;
}

    .company-manage-page .policy-list li {
        margin-bottom: 5px;
        padding-left: 0;
        line-height: 1.7;
    }

        .company-manage-page .policy-list li::before {
            content: none;
        }

.manage-table-intro {
    margin: 22px 0 6px;
    color: #008fd3;
    font-weight: 700;
}

.manage-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.manage-training-table {
    min-width: 620px;
}

    .manage-training-table thead th:nth-child(1) {
        width: 17%;
    }

    .manage-training-table thead th:nth-child(2) {
        width: 58%;
    }

    .manage-training-table thead th:nth-child(3) {
        width: 25%;
    }

    .manage-training-table .training-rate {
        color: #008fd3;
        font-weight: 700;
        white-space: nowrap;
    }

.manage-footnote {
    margin: 8px 0 18px;
    font-size: 13px;
    line-height: 1.6;
}

@media screen and (max-width: 700px) {
    .manage-training-table {
        min-width: 560px;
        font-size: 13px;
    }

        .manage-training-table th, .manage-training-table td {
            padding: 8px;
        }
}

/* --- awards.aspx：營運績效 --- */
.company-awards .flow-title, .company-awards .company-table-title {
    margin: 0 0 18px;
    color: #008fd3;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    border-left: none;
    padding-left: 0;
}

.awards-section {
    width: 100%;
    margin: 0 0 28px;
}

.awards-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.chart-unit {
    flex: 0 0 auto;
    color: #666;
    font-size: 14px;
    white-space: nowrap;
}

.css-bar-chart {
    width: 100%;
    padding: 18px 12px 0;
}

.bar-scale {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 245px;
    padding: 16px 4px 0;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

.bar-column {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    width: 14%;
    height: 100%;
    flex-direction: column;
}

    .bar-column span {
        margin-bottom: 4px;
        color: #333;
        font-size: 14px;
        line-height: 1.2;
    }

    .bar-column i {
        display: block;
        width: min(52px, 72%);
        height: var(--bar-height);
        min-height: 4px;
        background: #87c8e9;
    }

    .bar-column b {
        position: absolute;
        top: calc(100% + 6px);
        color: #222;
        font-size: 14px;
        font-weight: 600;
    }

.value-formula {
    margin: 0 0 24px;
    font-weight: 600;
    text-align: center;
}

.financial-section {
    padding-bottom: 8px;
}

.financial-chart {
    width: 100%;
    margin: 0 0 34px;
    padding: 0 4px 22px;
    border-bottom: 1px solid #d9e2e6;
}

    .financial-chart h3 {
        margin: 0 0 12px;
        color: #008fd3;
        font-size: 18px;
    }

.mini-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 190px;
    padding: 10px 0 0;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

    .mini-bars > div {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        width: 14%;
        height: 100%;
        flex-direction: column;
    }

    .mini-bars span {
        margin-bottom: 4px;
        color: #222;
        font-size: 13px;
    }

    .mini-bars i {
        display: block;
        width: min(42px, 70%);
        height: var(--bar-height);
        min-height: 2px;
        background: #87c8e9;
    }

    .mini-bars b {
        position: absolute;
        top: calc(100% + 6px);
        font-size: 13px;
        font-weight: 600;
    }

.text-section .flow-title:not(:first-child) {
    margin-top: 34px;
}

.tax-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.tax-note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.awards-chart-figure {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.awards-chart-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    background-color: #fff;
    cursor: zoom-in;
}

    .awards-chart-image:focus {
        outline: 3px solid #1599df;
        outline-offset: 4px;
    }

.awards-chart-figure .image-zoom-hint {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
    text-align: center;
}

.value-section .awards-heading-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

    .value-section .awards-heading-row > .chart-unit {
        display: block;
        margin: 0 0 10px auto;
        text-align: right;
    }

@media screen and (max-width: 700px) {
    .awards-section {
        margin-bottom: 22px;
    }

    .awards-heading-row {
        display: block;
    }

    .chart-unit {
        display: block;
        margin: -12px 0 12px;
        text-align: right;
    }

    .bar-scale, .mini-bars {
        height: 180px;
    }

        .bar-column span, .mini-bars span {
            font-size: 11px;
        }

        .bar-column b, .mini-bars b {
            font-size: 12px;
        }

    .value-formula {
        text-align: left;
    }

    .awards-chart-image {
        width: 100%;
    }

    .value-section .awards-heading-row {
        display: flex;
    }

        .value-section .awards-heading-row > .chart-unit {
            margin: 0 0 10px auto;
        }
}

@media screen and (max-width: 600px) {
    .awards-chart-figure {
        max-width: 100%;
    }

    .awards-chart-image {
        width: 100%;
    }

    .tax-table th, .tax-table td {
        padding: 9px 4px;
        white-space: normal;
    }
}

/* --- future.aspx：法規遵循 --- */
.audit-process {
    margin: 18px 0;
    padding: 18px 24px;
    border-radius: 20px;
    background: #e3f3fb;
}

    .audit-process h3 {
        margin: 0 0 8px;
        color: #008fd3;
        font-size: 17px;
    }

    .audit-process ol {
        margin: 0;
        padding-left: 1.5em;
        font-size: 14px;
        line-height: 1.6;
    }

.future-table-wrap {
    width: 100%;
    margin: 8px 0 18px;
    overflow-x: auto;
}

.violation-table th, .violation-table td {
    padding: 8px 6px;
    overflow-wrap: anywhere;
    word-break: normal;
}

    .violation-table th:nth-child(1) {
        width: 6%;
    }

    .violation-table th:nth-child(2) {
        width: 13%;
    }

    .violation-table th:nth-child(3) {
        width: 17%;
    }

    .violation-table th:nth-child(4) {
        width: 17%;
    }

    .violation-table th:nth-child(5) {
        width: 10%;
    }

    .violation-table th:nth-child(6) {
        width: 37%;
    }

.violation-table tbody td:nth-child(1), .violation-table tbody td:nth-child(2), .violation-table tbody td:nth-child(5) {
    text-align: center;
}

.audit-item-table th:last-child, .audit-item-table td:last-child {
    width: 16%;
    text-align: center;
}

.performance-table-wrap {
    max-width: 520px;
}

.performance-table th, .performance-table td {
    text-align: center;
}

.performance-table tbody th {
    width: 50%;
    text-align: center;
}

.performance-table .total-row th, .performance-table .total-row td {
    font-weight: 700;
}

@media screen and (max-width: 700px) {
    .audit-process {
        padding: 16px;
        border-radius: 14px;
    }

    .violation-table {
        min-width: 800px;
    }

    .audit-item-table {
        min-width: 700px;
    }

    .performance-table {
        min-width: 420px;
    }
}

/* --- org.aspx：風險管理 --- */
.risk-flowchart {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
    margin: 26px 0 12px;
}

.risk-flow-column {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.risk-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 76px;
    padding: 12px 10px;
    border-radius: 11px;
    color: #fff;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.risk-flow-board .risk-flow-box {
    background: #2599dc;
}

.risk-flow-management .risk-flow-box {
    background: #0575b9;
}

.risk-flow-department .risk-flow-box {
    background: #69b2df;
}

.risk-flow-down {
    display: block;
    position: relative;
    width: 28px;
    height: 24px;
    color: transparent;
    font-size: 0;
}

    .risk-flow-down::before {
        position: absolute;
        inset: 0;
        background: #178ecf;
        clip-path: polygon(40% 0, 60% 0, 60% 62%, 100% 62%, 50% 100%, 0 62%, 40% 62%);
        content: "";
    }

.risk-flow-horizontal {
    position: relative;
}

    .risk-flow-horizontal::before, .risk-flow-horizontal::after {
        position: absolute;
        top: 50%;
        width: 36px;
        height: 24px;
        background: #178ecf;
        clip-path: polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
        color: #178ecf;
        content: "";
        transform: translateY(-50%);
    }

    .risk-flow-horizontal::before {
        right: calc(100% + 8px);
    }

    .risk-flow-horizontal::after {
        left: calc(100% + 8px);
    }

.risk-flow-reverse::before, .risk-flow-reverse::after {
    transform: translateY(-50%) rotate(180deg);
}

.org-table-wrap {
    width: 100%;
    margin: 8px 0 18px;
    overflow-x: auto;
}

.org-risk-table thead th:first-child {
    width: 18%;
}

.org-monitor-figure {
    width: 100%;
    margin: 18px 0 0;
    text-align: center;
}

.org-monitor-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 460px;
    margin: 0 auto;
    border-radius: 20px;
    object-fit: cover;
    cursor: zoom-in;
}

    .org-monitor-image:focus {
        outline: 3px solid #1599df;
        outline-offset: 4px;
    }

@media screen and (max-width: 700px) {
    .risk-flowchart {
        display: block;
        margin-top: 18px;
    }

    .risk-flow-column {
        margin-bottom: 22px;
    }

    .risk-flow-horizontal::before, .risk-flow-horizontal::after {
        content: none;
    }

    .org-risk-table {
        min-width: 620px;
    }

    .org-monitor-image {
        border-radius: 14px;
    }
}

/* --- tech.aspx：資訊安全 --- */
.security-org-chart {
    display: flex;
    align-items: center;
    width: 360px;
    max-width: 100%;
    margin: 20px auto 4px;
    flex-direction: column;
}

.security-org-node {
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    padding: 10px 18px;
    border: 2px solid #078bd8;
    border-radius: 28px;
    background: #fff;
    color: #333;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.security-org-primary {
    border-color: #078bd8;
    background: #078bd8;
    color: #fff;
}

.security-org-line {
    display: block;
    width: 3px;
    height: 26px;
    background: #078bd8;
}

.security-org-branch-line {
    position: relative;
    width: 100%;
    height: 60px;
    background: transparent;
}

    .security-org-branch-line::before {
        position: absolute;
        top: 0;
        height: 30px;
        left: 50%;
        width: 3px;
        background: #078bd8;
        content: "";
        transform: translateX(-50%);
    }

    .security-org-branch-line::after {
        position: absolute;
        top: 30px;
        left: calc(25% - 2.5px);
        width: calc(50% + 5px);
        height: 3px;
        background: #078bd8;
        content: "";
    }

.security-org-groups {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .security-org-groups > div {
        position: relative;
        min-height: 120px;
        padding: 42px 16px 16px;
        border-radius: 12px;
        background: #c8e8f8;
        text-align: center;
    }

        .security-org-groups > div::before {
            position: absolute;
            top: -30px;
            left: 50%;
            width: 3px;
            height: 30px;
            background: #078bd8;
            content: "";
            transform: translateX(-50%);
        }

    .security-org-groups h4 {
        position: absolute;
        top: -1px;
        right: 0;
        left: 0;
        margin: 0;
        padding: 7px 8px;
        border-radius: 20px;
        background: #6dbce8;
        color: #075d8f;
        font-size: 16px;
    }

    .security-org-groups p {
        margin: 8px 0 0;
        line-height: 1.5;
    }

.security-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 0;
}

    .security-stats > div {
        overflow: hidden;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
        text-align: center;
    }

    .security-stats strong {
        display: block;
        padding: 6px;
        background: #078bd8;
        color: #fff;
    }

    .security-stats span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 66px;
        padding: 10px;
        color: #0075c9;
        font-weight: 700;
        line-height: 1.4;
    }

.security-event-flow {
    display: grid;
    align-items: center;
    width: 100%;
    margin: 18px 0 0;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    grid-template-rows: 52px 30px 52px 30px 52px 30px 52px 30px 52px;
}

.security-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #078bd8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.security-event-start {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
}

    .security-event-start::before, .security-event-start::after {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        content: none !important;
    }

.flow-notify {
    grid-column: 3;
    grid-row: 1;
}

.flow-response {
    grid-column: 3;
    grid-row: 3;
}

.flow-site {
    position: relative;
    overflow: visible;
    grid-column: 1;
    grid-row: 5;
}

    .flow-site::after {
        position: absolute;
        top: 50%;
        left: 100%;
        width: 70px;
        height: 5px;
        background: #078bd8;
        content: "";
        transform: translateY(-50%);
    }

    .flow-site::before {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 100%;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 16px solid #078bd8;
        border-bottom: 10px solid transparent;
        content: "";
        transform: translateY(-50%);
    }

.flow-judgement {
    grid-column: 3;
    grid-row: 5;
}

.flow-process {
    grid-column: 3;
    grid-row: 7;
}

.flow-end {
    grid-column: 3;
    grid-row: 9;
}

.security-flow-arrow {
    display: block;
    position: relative;
    align-self: stretch;
    justify-self: stretch;
}

    .security-flow-arrow::before {
        position: absolute;
        inset: 0;
        background: #078bd8;
        content: "";
    }

.flow-arrow-start {
    grid-column: 2;
    grid-row: 1;
}

    .flow-arrow-start::before {
        clip-path: polygon(0 45%, 75% 45%, 75% 20%, 100% 50%, 75% 80%, 75% 55%, 0 55%);
    }

.flow-arrow-down-1 {
    grid-column: 3;
    grid-row: 2;
}

.flow-arrow-down-2 {
    grid-column: 3;
    grid-row: 4;
}

.flow-arrow-down-3 {
    grid-column: 3;
    grid-row: 6;
}

.flow-arrow-down-4 {
    grid-column: 3;
    grid-row: 8;
}

    .flow-arrow-down-1::before, .flow-arrow-down-2::before, .flow-arrow-down-3::before, .flow-arrow-down-4::before {
        clip-path: polygon(47% 0, 53% 0, 53% 68%, 62% 68%, 50% 100%, 38% 68%, 47% 68%);
    }

@media screen and (max-width: 700px) {
    .security-org-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .security-org-chart {
        width: 360px;
        max-width: 100%;
    }

    .security-org-branch-line::after {
        top: 30px;
        left: calc(25% - 2.5px);
        width: calc(50% + 5px);
        height: 3px;
    }

    .security-event-flow {
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    }

    .security-flow-box {
        padding: 8px;
        font-size: 14px;
    }

    .flow-site::after {
        width: 44px;
    }
}