/* The original homepage's environmental lines, social circles and governance leaves. */
.home-esg-section {
    --esg-ink: #285666;
    --esg-muted: #5e737a;
    letter-spacing: 0;
}
.home-esg-section .sec_img_box { max-width: 100%; }
.home-esg-metrics { padding: 12px 0 12px; }
.home-esg-section { padding-bottom: 40px; }
.home-esg-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}
.home-esg-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-esg-item {
    min-width: 0;
    text-align: center;
    color: var(--esg-ink);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
}
.home-esg-shape {
    min-width: 0;
    padding: 24px;
    min-height: 216px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.home-esg-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.home-esg-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.home-esg-title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-wrap: balance;
    min-height: 54px;
    display: grid;
    align-items: center;
}
.home-esg-subtitle {
    width: 100%;
    min-height: 28px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--esg-muted);
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.home-esg-subtitle--empty { visibility: hidden; }
.home-esg-values {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: end;
    gap: 12px 20px;
    width: 100%;
    min-width: 0;
    min-height: 88px;
}
.home-esg-metric { flex: 1 1 0; min-width: 0; }
.home-esg-metric-label {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.home-esg-value {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 6px;
    line-height: 1.25;
    min-height: 50px;
}
.home-esg-value strong {
    font-size: 48px;
    font-weight: 600;
    max-width: 100%;
    overflow-wrap: normal;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.home-esg-trend {
    flex: 0 0 auto;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
}
.home-esg-unit { font-size: 18px; white-space: nowrap; }
.home-esg-value [data-kpi-value="0"][data-kpi-animated="1"] {
    animation: home-esg-zero-reveal 650ms ease-out both;
}
@keyframes home-esg-zero-reveal {
    from { opacity: 0.3; }
    to { opacity: 1; }
}
.home-esg-note-segment { display: block; }
.home-esg-keep { white-space: nowrap; overflow-wrap: normal; }
.home-esg-metrics--e .home-esg-shape {
    background: linear-gradient(#e7f3ee, #f8fbfa);
    border-top: 3px solid #79a78b;
    min-height: 216px;
    padding-inline: 24px;
}
.home-esg-metrics--e .home-esg-heading { flex-direction: row; justify-content: center; gap: 12px; }
.home-esg-metrics--e .home-esg-values { min-height: 64px; }
.home-esg-metrics--e .home-esg-value { min-height: 64px; }
.home-esg-metrics--e .home-esg-value strong { font-size: 52px; }
.home-esg-metrics--s { padding-top: 22px; }
.home-esg-metrics--s .sbg_line_2 {
    top: 110px;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    background-size: 100% 98px;
    pointer-events: none;
}
.home-esg-metrics--s .soc_sp_1,
.home-esg-metrics--s .soc_sp_2,
.home-esg-metrics--s .soc_sp_3,
.home-esg-metrics--s .soc_sp_4 { pointer-events: none; }
.home-esg-metrics--s .home-esg-shape {
    --social-title-height: 52px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 60px 40px;
    align-content: center;
    justify-items: center;
    width: 100%;
    max-width: 284px;
    min-height: 0;
    aspect-ratio: 1;
    margin-inline: auto;
    padding: 22px;
    gap: 8px;
    border-radius: 50%;
    background: #bfe1f3;
}
.home-esg-metrics--s .home-esg-shape::before {
    content: "";
    position: absolute;
    inset: -4px 3px 3px -4px;
    border: 2px solid #009fe8;
    border-radius: inherit;
    pointer-events: none;
}
.home-esg-metrics--s .home-esg-item:nth-child(4n + 2) .home-esg-shape { background: #fffac2; }
.home-esg-metrics--s .home-esg-item:nth-child(4n + 3) .home-esg-shape { background: #dfefc9; }
.home-esg-metrics--s .home-esg-item:nth-child(4n + 4) .home-esg-shape { background: #cbf0ee; }
.home-esg-metrics--s .home-esg-item:nth-child(even) .home-esg-shape::before { inset: 3px -4px -4px 3px; }
.home-esg-metrics--s .home-esg-heading {
    grid-row: 1;
    display: grid;
    grid-template-rows: 28px var(--social-title-height);
    justify-items: center;
    gap: 8px;
}
.home-esg-metrics--s .home-esg-icon { width: 28px; height: 28px; }
.home-esg-metrics--s .home-esg-title {
    font-size: 17px;
    line-height: 24px;
    min-height: 0;
    height: var(--social-title-height);
    align-content: center;
}
.home-esg-metrics--s .home-esg-values {
    grid-row: 2;
    min-height: 0;
    height: 60px;
    align-items: center;
    column-gap: 12px;
}
.home-esg-metrics--s .home-esg-subtitle {
    grid-row: 3;
    min-height: 0;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    align-self: start;
}
.home-esg-metrics--s .home-esg-value { min-height: 0; }
.home-esg-metrics--s .home-esg-value strong { font-size: 40px; line-height: 1.4; }
.home-esg-metrics--s .home-esg-values:has(.home-esg-metric:nth-child(2)) .home-esg-value strong { font-size: 30px; }
.home-esg-metrics--s .home-esg-metric-label { min-height: 45px; }
.home-esg-metrics--s .soc_sp_2 { left: -8px; bottom: 28px; }
.home-esg-metrics--s .soc_sp_3 { right: -12px; top: 36px; }
html:lang(en) .home-esg-metrics--s .home-esg-shape { --social-title-height: 66px; }
html:lang(en) .home-esg-metrics--s .home-esg-title { font-size: 16px; line-height: 22px; }
.home-esg-metrics--g .home-esg-shape {
    background: #e0f3f3;
    min-height: 256px;
    border-radius: 16px 86px 16px 86px;
    padding: 24px;
}
.home-esg-metrics--g .home-esg-item:nth-child(even) .home-esg-shape { border-radius: 86px 16px 86px 16px; }
.home-esg-metrics--g .home-esg-values { min-height: 60px; }
.home-esg-metrics--g .home-esg-value strong { font-size: 42px; }
@media (max-width: 1199px) {
    .home-esg-list:not(.home-esg-list--three) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .home-esg-metrics--s .home-esg-shape { max-width: 300px; }
    .home-esg-metrics--g .home-esg-shape { width: 100%; max-width: 340px; margin-inline: auto; }
    .home-esg-metrics--g .home-esg-item:nth-child(n) { margin-top: 0; }
    .home-esg-metrics--s .sbg_line_2,
    .home-esg-metrics--s .soc_sp_1,
    .home-esg-metrics--s .soc_sp_2,
    .home-esg-metrics--s .soc_sp_3,
    .home-esg-metrics--s .soc_sp_4 { display: none; }
}
@media (max-width: 767px) {
    .home-esg-section .isoc_row, .home-esg-section .imng_row { margin-bottom: 32px; }
    .home-esg-list--three { grid-template-columns: 1fr; gap: 24px; }
    .home-esg-section .sec_img_box.right { margin-right: 12px; }
    .home-esg-section .manage_div1_con { padding-top: 28px; }
    .home-esg-shape { min-height: 190px; }
}
@media (max-width: 599px) {
    .home-esg-list:not(.home-esg-list--three) { grid-template-columns: 1fr; gap: 32px; }
    .home-esg-metrics--s .home-esg-shape { width: calc(100% - 16px); }
    .home-esg-metrics--g .home-esg-shape { min-height: 220px; }
}
