@media (max-width: 767px) {
  .layout {
    min-width: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 16px;
  }

  .section--pad {
    padding: 40px 0;
  }

  .section--pad.about {
    padding: 16px 0;
  }

  .section:has(.highlights__body) {
    padding: 24px 0;
  }

  .section:has(.quote) {
    padding: 0;
  }
  .section:has(.awards) {
    padding: 0;
  }

  .section:has(.subs) {
    padding: 24px 16px;
  }

  .section:has(.subs) .container {
    padding: 0;
  }

  .title {
    font-size: 28px;
    line-height: 32px;
  }

  .nav {
    height: 56px;
    background: rgba(0, 0, 0, 0.35);
  }

  .nav__inner {
    padding: 0 16px;
  }

  .nav__wordmark,
  .nav__lang {
    display: none;
  }

  .nav__brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav__symbol {
    display: block;
    width: 43px;
    height: auto;
  }

  .nav__title {
    font-size: clamp(12px, calc(7vw - 8.5px), 18px);
    line-height: 1.2;
    font-weight: 500;
    text-align: left;
    letter-spacing: calc(0.2px + var(--lsb));
    white-space: nowrap;
  }

  .nav__year {
    color: var(--red);
    font-weight: 700;
  }

  .nav__burger {
    display: flex;
  }

  .banner {
    height: 240px;
    background-size: cover;
    background-position: center;
  }

  .banner__heading,
  .banner__caption,
  .chapters {
    display: none;
  }

  .about__watermark {
    display: block;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: auto;
  }

  .about__watermark img {
    width: 100%;
    height: auto;
  }

  .two-col {
    flex-direction: column;
    gap: 24px;
  }

  .two-col__aside,
  .two-col__main {
    width: 100%;
  }

  .about__actions {
    flex-direction: column;
    gap: 12px;
  }

  .btn {
    width: 100%;
  }

  .btn__label {
    flex: 1;
    width: auto;
  }

  .media__img {
    width: 100%;
    height: 200px;
  }

  .highlights__body {
    gap: 30px;
  }

  .highlights__group {
    padding: 0;
    gap: 32px;
  }

  .highlights__top {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .kpi-customers {
    position: static;
    width: 100%;
  }

  .kpi-customers__big {
    font-size: 26px;
    line-height: 32px;
    white-space: normal;
  }

  .highlights__people {
    position: static;
    width: 100%;
    height: auto;
    max-width: 320px;
    margin: 0 0;
  }

  .highlights__graphic {
    display: block;
    width: 230px;
    max-width: 66%;
    height: auto;
    margin: 8px auto 4px;
  }

  .circles {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }

  .circle {
    width: 100% !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    display: block;
    text-align: left;
  }

  .circle__logo,
  .circle--1 .circle__logo,
  .circle--2 .circle__logo,
  .circle--3 .circle__logo {
    display: none !important;
  }

  .circle__text,
  .circle--1 .circle__text,
  .circle--2 .circle__text,
  .circle--3 .circle__text {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block;
    width: 100% !important;
    text-align: left;
  }

  .circle__value {
    white-space: normal !important;
    font-size: 30px !important;
    line-height: 38px !important;
  }

  .circle--1 .circle__label,
  .circle--2 .circle__label,
  .circle--3 .circle__label {
    font-size: 16px !important;
    line-height: 22px;
  }

  .circle--3 .circle__label,
  .circle--3 .circle__note {
    color: var(--ink) !important;
  }

  .circle--3 .circle__value {
    color: var(--red) !important;
  }

  .cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .card {
    width: 100%;
    height: auto;
    min-height: 160px;
  }

  .card::after {
    transform: translateX(calc(100% - 270px));
  }

  .card__watermark {
    z-index: 0;
  }

  .card__header,
  .card__content {
    position: relative;
    z-index: 1;
  }

  .card__content {
    margin-top: 16px;
  }

  .quote {
    flex-direction: column-reverse;
    height: auto;
  }

  .quote__left {
    width: 100%;
    padding: 28px 0 0;
    gap: 18px;
  }

  .quote__icon {
    display: none;
  }

  .quote__left::after {
    display: none;
  }

  .quote__body-wrap {
    gap: 23px;
    justify-content: flex-start;
  }

  .quote__sign {
    order: -1;
  }

  .quote__text {
    font-weight: 500;
    letter-spacing: calc(0em + var(--lsb));
    font-size: 18px;
    line-height: 24px;
  }

  .quote__right {
    width: calc(100% + 32px);
    margin: 0 -16px;
    height: 114.9vw;
    overflow: visible;
  }

  .quote__bg {
    inset: 0;
    clip-path: polygon(0 0, 80.92% 0, 100% 16.61%, 100% 100%, 0 100%);
  }

  .quote__photo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 137.44vw;
    background-image: url("../assets/images/chairman.png");
    background-repeat: no-repeat;
    background-size: 109.23vw 163.76vw;
    background-position: -3.08vw 0;
  }

  .quote__logo {
    top: 5.07vw;
    right: 12.27vw;
    width: 18.67vw;
    height: auto;
    z-index: 3;
  }

  .quote--msg-sm {
    padding-bottom: 300px;
  }
  .quote--msg .quote__left,
  .quote--msg-sm .quote__left {
    background: none;
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 28px 16px 0;
  }

  .quote--msg .quote__left > *,
  .quote--msg-sm .quote__left > * {
    position: relative;
  }

  .quote--msg .quote__left::before,
  .quote--msg-sm .quote__left::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    height: 153.6vw;
    background: linear-gradient(180deg, #dedede 0%, #f9f9f9 74.8%, #fdfdfd 100%);
    clip-path: polygon(0 0, 0 74.8%, 22.3% 100%, 100% 100%, 77.69% 74.8%, 100% 74.8%, 100% 0);
  }

  .awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .award {
    grid-column: auto;
  }

  .award--forbes,
  .award--asianbanker,
  .award--asset {
    grid-area: auto;
  }

  .award--asset {
    grid-column: 1 / -1;
  }

  .award__badge {
    --bw: 128px;
  }

  .award__cap {
    font-size: 14px;
    line-height: 20px;
    text-wrap-mode: wrap;
    white-space: normal;
  }

  .footer {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .footer__body {
    padding: 16px 0;
  }

  .footer__grid {
    flex-direction: column;
    gap: 32px;
  }

  .fcard {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .footer__sub {
    height: auto;
    padding: 16px 0;
  }

  .footer__sub-inner {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: center;
  }

  .footer__sub .btn {
    width: 100%;
  }

  .story1__img {
    width: 100%;
    height: auto;
  }

  .s3__img {
    width: calc(100% + 32px);
    margin: 0 -16px;
    height: auto;
    aspect-ratio: 375 / 167;
    background-size: 100% auto;
    background-position: center 41%;
  }

  .s4__img {
    width: 100%;
    height: 192.98px;
  }

  .s5__img--c1 {
    width: 100%;
    height: auto;
    aspect-ratio: 938 / 562;
  }

  .s5__img--c2 {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .qcard {
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 15px;
    padding: 20px 20px 20px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .qcard__logo {
    top: 90px;
  }

  .s7sec__right .qcard__logo {
    top: 58px;
  }

  .s7sec__right .qcard__text {
    margin: 0px 20px 0px 10px;
  }

  .qcard__mark {
    position: static;
    flex: none;
  }

  .qcard__mark--text {
    line-height: 0.8;
    min-width: 50px;
  }

  .qcard__text {
    position: static;
    flex: 1;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }

  .qcard--brand {
    padding-left: 20px;
  }

  .story1__row {
    flex-direction: column;
    gap: 24px;
  }

  .story1__col {
    width: 100%;
  }

  .story1__intro {
    width: 100%;
    letter-spacing: calc(0.01em + var(--lsb));
  }
  .story1__label {
    height: auto !important;
  }

  .story1__svc-list li + li {
    letter-spacing: calc(0.01em + var(--lsb));
  }
  .orgchart__box {
    width: 102px;
    height: 48px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .orgchart__box--root {
    width: 130px;
  }

  .orgchart::before {
    left: 51px;
    right: 51px;
  }

  .card--stat {
    width: 100%;
    height: 172px;
    min-height: 0;
    border-radius: 15px;
    clip-path: polygon(0 0, calc(100% - 53px) 0, 100% 53px, 100% 100%, 0 100%);
  }

  .s2 {
    padding: 37px 0;
    background-size: cover;
    background-position: center;
  }

  .s2__title {
    margin-bottom: 28px;
  }

  .s2__panel {
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 4px;
    gap: 25px;
  }

  .vmcard {
    width: 100%;
  }

  .vmcard__desc {
    margin-top: 16px;
    text-align: justify;
  }

  .vmcard__head {
    height: auto;
    min-height: 32px;
  }

  .section.s3 {
    padding: 39px 0 40px;
  }

  .s3__title {
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
  }

  .s3__quote {
    margin-bottom: 0;
  }

  .s3 .quote__right {
    width: calc(100% + 32px);
    margin: 0 -16px;
    height: 114.93vw;
    overflow: visible;
    position: relative;
  }

  .s3 .quote__bg {
    position: absolute;
    inset: 0;
    background: url("../assets/images/s3-panel.jpg") center/cover no-repeat;
    clip-path: polygon(0 0, 80.9% 0, 100% 16.5%, 100% 100%, 0 100%);
  }

  .s3 .quote__photo {
    position: absolute;
    bottom: 0;
    left: calc(50% - 42.4vw);
    transform: none;
    width: 84.8vw;
    height: 127.2vw;
    background-image: url("../assets/images/brand-leader.webp");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 1;
    margin: 0;
  }

  .s3 .quote__logo {
    display: block;
    top: 5.07vw;
    right: 12.27vw;
    width: 18.67vw;
    height: auto;
  }

  .s3 .quote__left {
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 24px 16px 59px;
  }

  .s3 .quote__body-wrap {
    gap: 16px;
  }

  .s3 .quote__text {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: calc(-0.36px + var(--lsb));
    color: var(--ink);
  }

  .s3 .quote__text b {
    font-weight: 700;
    color: #000;
  }

  .s3 .quote__left {
    background: none;
  }

  .s3 .quote__left > * {
    position: relative;
  }

  .s3 .quote__left::after {
    display: none;
  }

  .s3 .quote__left::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    height: 153.6vw;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.83) 0%,
      rgba(255, 255, 255, 0.157) 100%
    );
    clip-path: polygon(0 0, 0 74.8%, 22.3% 100%, 100% 100%, 77.69% 74.8%, 100% 74.8%, 100% 0);
  }

  .s3__bullets {
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
  }

  .s3__bullet {
    width: 100%;
  }

  .s3__bullet p {
    width: auto;
  }

  .s4 {
    padding: 40px 0;
  }

  .s4__row {
    flex-direction: column;
    gap: 24px;
  }

  .s4__card {
    width: 100%;
  }

  .s5 {
    padding-top: 40px;
  }

  .s5__row,
  .s5__row--c2 {
    flex-direction: column;
    gap: 24px;
  }

  .s5__tab--c1,
  .s5__tab--c2 {
    width: 100%;
  }

  .s5__banner {
    width: calc(100% + 32px);
    margin: 0 -16px;
    height: auto;
    padding: 24px 16px 30px;
  }

  .s5__banner-title {
    position: static;
    margin: 0;
    width: 280px;
  }

  .s5__stats {
    position: static;
    margin-top: 25px;
    gap: 20px;
  }

  .s5__stat {
    gap: 16px;
  }

  .s5__stat-num {
    font-size: 64px;
    line-height: 64px;
  }

  .s5__stat-desc {
    width: auto;
  }

  .s6 {
    padding: 40px 0 0;
  }

  .s6__timeline {
    margin: 0 -16px;
    width: calc(100% + 32px);
    scrollbar-width: none;
  }

  .s6__timeline::-webkit-scrollbar {
    display: none;
  }

  .s6__tl-track {
    width: 1270px;
    height: 133px;
  }

  .s6__tl-item {
    width: 56px;
  }

  .s6__tl-year {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: normal;
  }

  .s6__panels {
    min-height: 0;
  }

  .s6__cols {
    flex-direction: column;
    gap: 30px;
  }

  .s6__col {
    width: 100%;
  }

  .s6__tl-item[data-year="1993"] {
    left: 27px !important;
  }
  .s6__tl-item[data-year="2001"] {
    left: 91px !important;
  }
  .s6__tl-item[data-year="2003"] {
    left: 155px !important;
  }
  .s6__tl-item[data-year="2006"] {
    left: 219px !important;
  }
  .s6__tl-item[data-year="2008"] {
    left: 283px !important;
  }
  .s6__tl-item[data-year="2009"] {
    left: 347px !important;
  }
  .s6__tl-item[data-year="2010"] {
    left: 411px !important;
  }
  .s6__tl-item[data-year="2011"] {
    left: 475px !important;
  }
  .s6__tl-item[data-year="2012"] {
    left: 539px !important;
  }
  .s6__tl-item[data-year="2014"] {
    left: 603px !important;
  }
  .s6__tl-item[data-year="2015"] {
    left: 667px !important;
  }
  .s6__tl-item[data-year="2016"] {
    left: 731px !important;
  }
  .s6__tl-item[data-year="2017"] {
    left: 795px !important;
  }
  .s6__tl-item[data-year="2018"] {
    left: 859px !important;
  }
  .s6__tl-item[data-year="2019"] {
    left: 923px !important;
  }
  .s6__tl-item[data-year="2020"] {
    left: 987px !important;
  }
  .s6__tl-item[data-year="2021"] {
    left: 1051px !important;
  }
  .s6__tl-item[data-year="2022"] {
    left: 1115px !important;
  }
  .s6__tl-item[data-year="2023"] {
    left: 1179px !important;
  }
  .s6__tl-item[data-year="2024"] {
    left: 1243px !important;
  }

  .s7 {
    padding: 40px 0;
  }

  .s7__shares {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  .s7__shares-text {
    width: 100%;
  }

  .s7__shtable,
  .s7tbl,
  .s7ir {
    width: 100%;
  }

  .s7__shrow,
  .s7tbl__row {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    padding: 10px 16px;
    gap: 2px;
  }

  .s7__shrow dt,
  .s7tbl__k {
    width: auto;
  }

  .s7__bigdonut {
    position: relative;
    width: 100%;
    aspect-ratio: 343 / 425;
    height: auto;
    margin: 8px auto 0;
    overflow: hidden;
    zoom: 1;
  }

  .s7bd__svg {
    position: absolute;
    width: 121.6%;
    height: auto;
    left: -15%;
    top: 2.7%;
    max-width: none;
  }

  .s7__bigdonut .s7c__lead,
  .s7__bigdonut .s7c__dot {
    display: none;
  }

  .s7bd__msvg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .s7bd__mlead {
    stroke: #7d7d7d;
    stroke-width: 1;
    fill: none;
  }

  .s7bd__mdot {
    fill: #d9d9d9;
    stroke: #fff;
    stroke-width: 1.5;
  }

  .s7bd__mdot--red {
    fill: var(--red);
  }

  .s7bd__lbl {
    display: block;
    position: absolute;
    width: auto;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    white-space: nowrap;
  }

  .s7bd__lbl--r {
    top: 0;
    right: 2.3%;
    left: auto;
    text-align: right;
  }

  .s7bd__lbl--l {
    top: 16%;
    left: 5.2%;
    right: auto;
    text-align: left;
  }

  .s7sec {
    flex-direction: column;
    gap: 16px;
  }

  .s7sec__left,
  .s7sec__right {
    width: 100%;
  }

  .s7chart {
    flex-direction: column;
    gap: 16px;
  }

  .s7chart__img {
    width: 100%;
    height: auto;
  }

  .s7chart__legend {
    width: 100%;
  }

  .s7chart__ytd {
    justify-content: flex-start;
    padding-left: 116px;
  }

  .s7ir th,
  .s7ir td {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .s7ir__no {
    width: 44px;
  }

  .s7ir__q {
    width: 64px;
  }

  .s7__circles {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .s7c {
    zoom: 1;
  }

  .ceo {
    padding: 24px 0 40px;
  }

  .story__title {
    margin-top: 32px;
    min-height: 64px;
    margin-bottom: 32px;
  }

  .ceo .quote__photo {
    background-image: url("../assets/images/ceo-tgd.png");
    background-size: 100% auto;
    background-position: left bottom;
  }

  .msg {
    padding: 32px 0 0;
  }

  .msg__lead {
    font-size: 18px;
    line-height: 26px;
  }

  .col2 {
    flex-direction: column;
    gap: 0;
  }

  .col2__c {
    width: 100%;
  }

  .col2__c + .col2__c {
    margin-top: 24px;
  }

  .msg__h2 {
    margin: 24px 0 12px;
  }

  .fbox {
    padding: 48px;
  }
  .fbox__content {
    column-count: 1;
  }

  .ratings {
    flex-direction: column;
    gap: 16px;
  }

  .rcard {
    width: 100%;
    height: auto;
    min-height: 172px;
  }

  .rcard,
  .scard,
  .bcard {
    display: block;
  }

  .hyper {
    padding: 24px 0 0;
  }

  .hyper__intro {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
  }

  .hyper__intro-left,
  .hyper__intro-right {
    width: 100%;
  }

  .pillar {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }

  .pillar--row2 {
    margin-top: 30px;
  }

  .pillar__aside,
  .pillar__main {
    width: 100%;
  }

  .pillar__aside {
    min-height: 210px;
  }

  .pillar__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .pillar__img-people {
    width: 100%;
    height: auto;
    aspect-ratio: 343 / 220;
    margin-top: 24px;
  }

  .bcard {
    width: 100%;
  }

  .statgrid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .scard {
    width: 100%;
  }

  .block,
  .block--pad {
    padding: 32px 0 0;
  }

  .block__label {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: calc(-0.56px + var(--lsb));
  }

  .block__quote.qcard--ir {
    width: 100%;
    height: auto;
    padding: 20px;
  }
  .block__quote.block__quote--first .qcard__logo {
    top: 58px;
  }
  .block__quote.block__quote--second .qcard__logo {
    top: 138px;
  }

  .block__quote.block__quote--third .qcard__logo {
    top: 42px;
  }

  .block__quote.block__quote--third {
    padding-top: 52px;
  }

  .block__quote .qcard__mark {
    top: 26px;
  }

  .block__quote .qcard__text {
    position: static;
    right: auto;
    left: auto;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: calc(-0.03em + var(--lsb));
    color: var(--ink);
    font-weight: 600;
    text-align: left;
  }

  .plan3 {
    flex-direction: column;
    gap: 24px;
  }

  .plan3__col {
    width: 100%;
  }

  .sign__name {
    margin-top: 32px;
  }
  .sign {
    margin-bottom: 64px;
  }

  .letter__body {
    column-count: unset;
  }
  .pillar__aside--img {
    height: 100%;
  }

  body[data-chapter="3"] .title {
    line-height: 36px;
    letter-spacing: calc(-0.03em + var(--lsb));
  }
  body[data-chapter="3"] .block__label {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: calc(-0.66px + var(--lsb));
  }

  .wcard {
    width: 100%;
    height: auto;
    border-radius: 15px;
  }
  .wcard .content,
  .wcard .content--full {
    width: 100%;
  }

  .roe-roa {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .roe-roa .qcard__logo {
    top: 125px;
  }

  .kq-breakout {
    flex-direction: column-reverse;
    gap: 24px;
    margin-top: 24px;
  }
  .kq-breakout__aside {
    width: 100%;
    margin-left: 0;
    padding-top: 0;
    gap: 24px;
  }
  .kq-breakout__main {
    width: 100%;
  }

  .blockimg .image-box {
    width: 100%;
    height: auto;
    aspect-ratio: 55 / 23;
  }
  .blockimg .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.25);
  }

  .credit-charts img,
  .liq-table img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .goal-inline {
    flex-direction: column;
    gap: 4px;
  }
  .goal-text {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: calc(-0.48px + var(--lsb));
  }
  .goal-notes {
    margin-bottom: 32px;
  }

  .non-display {
    display: none;
  }
}