* {
    box-sizing: border-box;
}

html,
body {
    min-width: 320px;
    margin: 0;
}

body {
    font-family: OPPOSans;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Keep the mobile language caret native and suppress any injected Element icon glyph. */
.headerM .langBtnA .el-icon-caret-bottom {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.headerM .langBtnA .el-icon-caret-bottom::before {
    content: none;
}

.banner {
    position: relative;
    height: 766px;
    overflow: hidden;
    color: #fff;
    background: #13538d;
}

.banner::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(180deg, rgba(20, 92, 155, .04) 0%, rgba(12, 67, 120, .28) 48%, rgba(8, 53, 100, .93) 100%),
        linear-gradient(90deg, rgba(37, 108, 167, .12), rgba(3, 42, 84, .2));
}

.banner>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner .inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 73px;
}

.banner-text {
    padding-bottom: 150px;
    text-align: center;
}

.banner-text h1 {
    position: relative;
    display: inline-block;
    margin: 0 0 19px;
    color: rgba(255, 255, 255, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 42px;
    line-height: 55px;
}

.banner-text h1::after {
    position: absolute;
    z-index: -1;
    bottom: 8px;
    left: 0;
    width: 140px;
    height: 12px;
    content: "";
    background: #df1d38;
}

.banner-text p {
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
    text-transform: capitalize;
}

.banner-data {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    justify-items: center;
}

.banner-data-item {
    flex: 1 1 0;
    min-width: 0;
}

.banner-data-item strong,
.banner-data-item p {
    display: block;
    margin: 0;
}

.banner-data-item strong {
    color: rgba(255, 255, 255, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 46px;
    line-height: 61px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
}

.banner-data-item strong>span {
    margin-left: 2px;
    font-size: 26px;
}

.banner-data-item strong>.counter {
    margin-left: 0;
    font-size: inherit;
}

.banner-data-item strong>.counter-icon {
    width: clamp(26px, 3.6vw, 63px);
    height: clamp(26px, 3.6vw, 63px);
    flex: 0 0 auto;
    display: block;
    margin-left: 4px;
    object-fit: contain;
}

.banner-data-item sup {
    position: relative;
    top: -.37em;
    font-size: .55em;
}

/* .banner-data-item svg {
    display: inline-block;
    width: 20px;
    height: 12px;
    margin-left: 7px;
    transform: translateY(-7px) rotate(20deg);
} */

.banner-data-item p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
}


/* page1 */
.page1 {
    position: relative;
    height: 147px;
    overflow: hidden;
    background: #fff;
}

.page1::before,
.page1::after {
    position: absolute;
    content: "";
}

.page1::before {
    z-index: 0;
    top: 80px;
    left: -2%;
    width: 104%;
    height: 67px;
    background: #c7e3fe;
    transform: skewY(-2.15deg);
    transform-origin: top left;
}

.page1::after {
    z-index: 1;
    inset: 0 0 auto;
    height: 80px;
    background: #205b9e;
}

.page1-inner.inner {
    position: relative;
    z-index: 2;
    height: 80px;
}

.page1 .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    gap: 98px;
    background: transparent;
}

.page1 .nav-item {
    position: relative;
    height: 100%;
}

.page1 .nav-item a {
    display: flex;
    align-items: center;
    height: 100%;
    color: rgba(255, 255, 255, .57);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.page1 .nav-item:first-child a {
    color: #fff;
    font-weight: 600;
}

.page2 {
    background: #fff;
}

.page2 {
    background: #fff;
}

.page2-inner.inner {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 46px 54px 130px;


}

.company-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 432px;
}

.company-copy,
.company-copy-group {
    flex: 0 1 50%;
    max-width: 622px;
}

.company-copy-group {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 0 66px 0 20px;
}

.company-copy__line {
    display: block;
    width: 90px;
    height: 3px;
    margin-bottom: 16px;
    background: #df1d38;
}

.company-copy h2 {
    margin: 0 0 16px;
    color: #155da7;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
}

.company-copy p {
    margin: 0;
    color: #6190c3;
    font-size: 17px;
    line-height: 1.75;
}

.company-image {
    flex: 0 0 560px;
    max-width: 560px;
    padding: 10px 10px 0 0;
    background:
        linear-gradient(#df1d38, #df1d38) top right / calc(100% - 80px) 10px no-repeat,
        linear-gradient(#df1d38, #df1d38) top right / 10px calc(100% - 32px) no-repeat;
}

.company-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1.37;
    object-fit: cover;
    clip-path: polygon(36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 36px);
}

.company-block--product .company-copy,
.company-block--market .company-copy {
    padding: 86px 0 0 56px;
}

.company-block--service .company-copy {
    padding-left: 20px;
}

.company-block--product .company-image,
.company-block--market .company-image {
    margin-left: 20px;
    padding: 10px 0 0 10px;
    background:
        linear-gradient(#df1d38, #df1d38) top left / calc(100% - 80px) 10px no-repeat,
        linear-gradient(#df1d38, #df1d38) top left / 10px calc(100% - 32px) no-repeat;
}



/* 企业介绍 */
.page2-inner.inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 42px 54px 130px;
    position: relative;
    /* background: linear-gradient(#a5c8ec, #a5c8ec) center / 1px calc(100% - 42px) no-repeat; */
}

.page2-l,
.page2-r {
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
}

.page2-l {
    padding-right: 80px;
}

.page2-r {
    padding-left: 80px;
    /* border-left: 3px solid rgba(158, 188, 222, 1); */
}

.page2-line {
    position: absolute;
    height: 86%;
    top: 98px;
    bottom: 130px;
    left: 50%;
    width: 3px;
    background-color: rgba(158, 188, 222, 1);
}

.about-r-line {
    position: relative;
}

.about-r-line::after {
    content: '';
    position: absolute;
    top: 56px;
    left: -77px;
    height: 3px;
    width: 100%;
    background-color: rgba(158, 188, 222, 1);
}

.about-l-line {
    position: relative;
}

.about-l-line::after {
    bottom: 32px;
    content: '';
    position: absolute;
    /* top: 56px; */
    left: 151px;
    height: 3px;
   width: 100%;
    background-color: rgba(158, 188, 222, 1);
}





.about-copy {}

.about-copy>span {
    display: block;
    width: 90px;
    height: 3px;
    margin-bottom: 16px;
    background: #df1d38;
}

.about-copy h2 {
    margin: 0 0 16px;
    color: #155da7;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
}

.about-copy p {
    margin: 0;
    color: #6190c3;
    font-size: 17px;
    line-height: 1.75;
}

.about-copy--experience {
    margin-top: 102px;
}

.about-copy--service {
    margin-top: 92px;
}

.about-copy--product {
    margin-top: 186px;
}

.about-copy--market {
    margin-top: 104px;
}

.about-picture {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
}

.about-picture img {
    display: block;
    width: 100%;
    aspect-ratio: 1.37;
    object-fit: cover;
    clip-path: polygon(36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 36px);
}

.about-picture--left {
    margin-top: 78px;
    padding: 10px 0 0 10px;


}

.about-picture--right {
    padding: 10px 10px 0 0;

}

.page2-r .about-picture+.about-copy {
    margin-top: 186px;
}

.page2-r .about-copy+.about-picture {
    margin-top: 88px;
}

/* Connector rules linking the first/last images to the center guide */


.page2-r>.about-picture:first-child::before {
    left: -40px;
}



/* page3 */

.page3 {
    position: relative;
    background: #fff;
    min-height: 1400px;
    height: auto;
    /* overflow: hidden; */

}
.page3-back {
    position: absolute;
    top: -10%;
    left: 35%;
    width: 698px;
    height: 387px;
    opacity: 0.6;
    background: #16559d70;
    filter: blur(200px);
    z-index: 1;
}

.page3 .Culture {
    position: absolute;
    z-index: 3;
    left: -2%;
    width: 120%;
    height: 56.6px;
    transform: rotate(7.881857deg);
    white-space: nowrap;
    background: rgba(22, 85, 157, 1);
    overflow: hidden;
}

.page3 .Culture:not(.Culture2) {
    top: 20px;
}

.page3 .Culture2 {
    top: -38px;
    left: -2%;
    width: 120%;
    height: 56.6px;
    transform: rotate(-1.68deg);
    background: rgba(22, 85, 157, 1);
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
}

.page3 .culture-track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    animation: culture-scroll-left 16s linear infinite;
    will-change: transform;
}

.page3 .Culture2 .culture-track {
    animation-name: culture-scroll-right;
    animation-duration: 35s;
}

.page3 .culture-track-group {
    display: flex;
    align-items: center;
    gap: 74px;
    padding-right: 74px;
}

.page3 .Culture span {
    flex: none;
    color: #dceaff;
    font-size: 14px;
    line-height: 1;
}

@keyframes culture-scroll-left {
    to { transform: translateX(-50%); }
}

@keyframes culture-scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .page3 .culture-track {
        animation-play-state: paused;
    }
}

.page3-inenr {
    position: relative;
    z-index: 1;
    --culture-value-start: clamp(500px, 52vw, 640px);
    min-height: calc(var(--culture-value-start) + 520px);
    padding-top: 1px;
}

.culture-heading {
    position: absolute;
    z-index: 2;
    top: 250px;
    left: 7%;
    width: 270px;
    color: #15579d;
}

.culture-heading>span {
    display: block;
    width: 74px;
    height: 3px;
    margin-bottom: 16px;
    background: #df1d38;
}

.culture-heading h2 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
}

.culture-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.culture-trailer-wrap {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 2%;
    width: min(78%, 860px);
}

.culture-trailer-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 698px;
    height: 387px;
    background: rgba(22, 85, 157, 0.44);
    filter: blur(200px);
    pointer-events: none;
}

.culture-trailer {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.culture-values {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.culture-value {
    position: absolute;
    z-index: 1;
    width: 290px;
    color: #111;
}

.culture-value b {
    display: block;
    margin-bottom: 14px;
    color: #a6d3ff;
    font-family: OPPOSans;
    font-size: 44px;
    line-height: 1;
}

.culture-value-number {
    display: block;
    width: 70px;
    height: 78px;
    margin-bottom: 14px;
    object-fit: contain;
}

.culture-value h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.culture-value p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.45;
}

.culture-value-lines {
    position: absolute;
    z-index: 0;
    display: block;
    top: 57%;
    left: 14%;
    max-width: none;
    width: 70%;
    height: auto;
    pointer-events: none;
}

.culture-value--1 {
    top: var(--culture-value-start);
    left: 7%;
}

.culture-value--2 {
    top: calc(var(--culture-value-start) + 223px);
    left: 29%;
}

.culture-value--3 {
    top: calc(var(--culture-value-start) + 365px);
    left: 56%;
}

.culture-value--4 {
    top: calc(var(--culture-value-start) + 355px);
    left: 81%;
}






/*page4  */

.page4 {
    margin-top: 100px;
    position: relative;
    z-index: 1;
    padding-bottom: clamp(56px, 6vw, 100px);
}

.page4-back {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 698px;
    height: 387px;
    opacity: 0.6;
    background: #16559d70;
    filter: blur(200px);
}

.page4-inner {}

.page4-inner h1 {
    text-align: center;
    color: rgba(22, 85, 157, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 38px;
    line-height: 60px;
}

.page4-inner .tab {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.page4-inner .tab .tab-l,
.page4-inner .tab .tab-r {
    display: inline-flex;
    place-content: flex-start;
    place-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 8px 8px 8px 19px;
    border-radius: 14px;
    background: rgba(22, 85, 157, 1);
    color: rgba(255, 255, 255, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.page4-inner .tab .tab-r {
    background: rgba(22, 85, 157, 0.5);
}

.page4-inner .tab .certificate-tab {
    background: rgba(22, 85, 157, 0.5);
}

.page4-inner .tab .certificate-tab.is-active {
    background: rgba(22, 85, 157, 1);
}

.page4-inner .tab .certificate-icon--inactive {
    display: none;
}

.page4-inner .tab .certificate-tab:not(.is-active) .certificate-icon--active {
    display: none;
}

.page4-inner .tab .certificate-tab:not(.is-active) .certificate-icon--inactive {
    display: inline-block;
}

.page4-box {
    margin-top: 67px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    align-items: center;
    row-gap: 30px;
    column-gap: 27px;
}

.page4-box[hidden] {
    display: none;
}

.page4-box.is-certificate-panel-hidden,
.page4-box .page4-item.is-page-hidden {
    display: none !important;
}

.page4-box .page4-item {
    width: 100%;
    min-width: 0;
    min-height: 397px;
    height: auto;
    border-radius: 14px;
    background: rgba(235, 248, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page4-box .page4-item-image {
    position: relative;
    display: block;
    width: 84%;
    height: 280px;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.page4-box .page4-item-image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.page4-box .page4-item-image::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: block;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(22, 85, 157, .2);
    border-top-color: #16559d;
    border-radius: 50%;
    content: '';
    animation: certificate-image-loading .8s linear infinite;
}

.page4-box .page4-item-image > img {
    position: relative;
    z-index: 1;
}

.page4-box .page4-item-image.is-image-loaded::before,
.page4-box .page4-item-image.is-image-error::before {
    display: none;
}

.page4-box .page4-item-image.is-image-error {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page4-box .page4-item-image.is-image-error > img {
    display: none;
}

.certificate-image-status {
    display: none;
    padding: 12px;
    color: #6d7782;
    font-size: 14px;
}

.page4-box .page4-item-image.is-image-error .certificate-image-status {
    display: block;
}

@keyframes certificate-image-loading {
    to { transform: rotate(360deg); }
}

.certificate-preview {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: rgba(0, 0, 0, .78);
}

.certificate-preview[hidden] {
    display: none;
}

.certificate-preview-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.certificate-preview-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #16559d;
    background: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

body.certificate-preview-open {
    overflow: hidden;
}

.zhengshu {
    width: 400px;
    height: 280px;
    background: pink;
    border-radius: 14px;
}

.page4-box .page4-item p {
    margin-top: 32px;
    color: rgba(0, 0, 0, 1);
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    text-align: center;
}

.page4-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.page4-btn .currPage {
    padding: 5px;
    margin-top: 60px;
    width: 216px;
    height: 50px;
    border-radius: 30px;
    background: rgba(228, 239, 249, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    line-height: 24px;
}

.page4-btn .currPage .next,
.page4-btn .currPage .prev {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(201, 216, 229, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page4-btn .currPage .prev {
    background: rgba(22, 85, 157, 1);
}

.page4-btn .currPage .next:focus-visible,
.page4-btn .currPage .prev:focus-visible {
    outline: 2px solid rgba(22, 85, 157, .45);
    outline-offset: 2px;
}

.page4-btn .currPage button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.currPage .active {
    color: rgba(212, 24, 38, 1);
    font-family: OPPOSans;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

.page5 {
    position: relative;
    z-index: 2;
    clear: both;
    padding: 82px 0 90px;
}

.responsibility-heading {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: clamp(24px, 3vw, 48px);
    position: relative;
    z-index: 3;
    text-align: center;
    color: #16559d;
}

.responsibility-heading h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.5;
}

.responsibility-heading p {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
}

.responsibility-panel {
    margin-top: 232px;
    height: 383px;
    border-radius: 12px;
    width: 100%;
    background-color: #0758a1;
    background-image: radial-gradient(circle at 8px 0, transparent 7px, rgba(255, 255, 255, .12) 7.5px, transparent 8.5px), radial-gradient(circle at 24px 0, transparent 7px, rgba(255, 255, 255, .12) 7.5px, transparent 8.5px);
  position: relative;

}

.responsibility-list{
    width: 100%;
    height: 455px;
    position: absolute;
    bottom: 104px;
    display: flex;
    justify-content: space-around;
}

.list-item{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.list-item img{
    display: block;
    width: 100%;
    height: 100%;
}

.list-item .text{
    position: absolute;
    bottom: 28px;
    padding: 0 34px;
}
.list-item .text h3{
    text-align: center;
     color: rgba(255, 255, 255, 1);
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 28px;
  line-height: 35px;
}
.list-item .text p{
    margin-top: 8px;
    color: rgba(255, 255, 255, 1);
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}

/* @media 1600px */
@media only screen and (max-width: 1600px) {
    .banner {
        height: auto;
        aspect-ratio: 2.1 / 1;
    }

    .banner .inner {
        padding-bottom: 40px;
    }

    .banner-text {
        padding-bottom: 58px;
    }

    .banner-text h1 {
        margin-bottom: 16px;
        font-size: 38px;
        line-height: 50px;
    }

    .banner-text p {
        font-size: 18px;
        line-height: 27px;
    }

    .banner-data {
        gap: 20px;
    }

    .banner-data-item strong {
        font-size: 40px;
        line-height: 53px;
    }

    .banner-data-item strong > span {
        font-size: 23px;
    }

    .banner-data-item p {
        margin-top: 8px;
        font-size: 21px;
        line-height: 29px;
    }

    .page1 .nav {
        gap: 70px;
    }

    .page1 .nav-item a {
        font-size: 18px;
    }

    .page2-inner.inner {
        padding: 36px 42px 90px;
    }

    .page2-l {
        padding-right: 55px;
    }

    .page2-r {
        padding-left: 55px;
    }

    .about-copy h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .about-copy p {
        font-size: 16px;
        line-height: 28px;
    }

    .about-copy--experience,
    .about-copy--service,
    .about-copy--market {
        margin-top: 72px;
    }

    .about-copy--product,
    .page2-r .about-picture + .about-copy {
        margin-top: 130px;
    }

    .page2-r .about-copy + .about-picture {
        margin-top: 68px;
    }

    .about-picture--left {
        margin-top: 58px;
    }

    .page3 {
        min-height: 1450px;
    }

    .culture-heading {
        top: 210px;
        width: 18%;
    }

    .culture-heading h2 {
        font-size: 27px;
    }

    .culture-heading p {
        font-size: 15px;
        line-height: 23px;
    }

    .culture-trailer-wrap {
        width: 74%;
    }

    .culture-value {
        width: 20%;
    }

    .culture-value h3 {
        font-size: 18px;
    }

    .culture-value p {
        font-size: 13px;
        line-height: 20px;
    }

    .page4 {
        margin-top: 70px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 34px;
        line-height: 50px;
    }

    .page4-box {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        margin-top: 45px;
    }

    .page4-box .page4-item {
        flex: 0 1 48%;
        width: auto;
        height: auto;
        min-height: 0;
        aspect-ratio: 1.21 / 1;
    }

    .page4-box .page4-item-image {
        height: clamp(180px, 20vw, 280px);
    }

    .page5 {
        padding: 60px 0 65px;
    }

    .responsibility-heading p {
        font-size: 15px;
        line-height: 23px;
    }

    .responsibility-panel {
        margin-top: 160px;
    }
}

/* @media 1440px */
@media only screen and (max-width: 1440px) {
    .banner {
        aspect-ratio: 2.15 / 1;
    }

    .banner .inner {
        padding-bottom: 25px;
    }

    .banner-text {
        padding-bottom: 25px;
    }

    .banner-text h1 {
        margin-bottom: 14px;
        font-size: 35px;
        line-height: 46px;
    }

    .banner-text p {
        font-size: 17px;
        line-height: 26px;
    }

    .banner-data {
        gap: 16px;
    }

    .banner-data-item strong {
        font-size: 36px;
        line-height: 48px;
    }

    .banner-data-item strong > svg {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .banner-data-item strong > span {
        font-size: 21px;
    }

    .banner-data-item p {
        margin-top: 6px;
        font-size: 19px;
        line-height: 27px;
    }

    .page1 .nav {
        gap: 48px;
    }

    .page1 .nav-item a {
        font-size: 17px;
    }

    .page2-inner.inner {
        padding: 25px;
    }

    .page2-l {
        padding-right: 25px;
    }

    .page2-r {
        padding-left: 25px;
    }

    .page2-line {
        top: 70px;
        bottom: 40px;
    }

    .about-copy h2 {
        font-size: 31px;
        line-height: 39px;
    }

    .about-copy p {
        font-size: 15px;
        line-height: 26px;
    }

    .about-copy--experience,
    .about-copy--service,
    .about-copy--market {
        margin-top: 25px;
    }

    .about-copy--product,
    .page2-r .about-picture + .about-copy {
        margin-top: 25px;
    }

    .page2-r .about-copy + .about-picture {
        margin-top: 25px;
    }

    .about-picture--left {
        margin-top: 25px;
    }

    .page3 {
        min-height: 1300px;
        margin-top: clamp(16px, 9.72vw, 140px);
    }
    .culture-value-lines {
        top: 54%;
    }
    .culture-heading {
        top: 190px;
        left: 5%;
        width: 18%;
    }

    .culture-heading h2 {
        font-size: 25px;
    }

    .culture-heading p {
        font-size: 14px;
        line-height: 22px;
    }

    .culture-trailer-wrap {
        width: 72%;
    }

    .culture-value {
        width: 20%;
    }

    .culture-value b {
        font-size: 38px;
    }

    .culture-value-number {
        width: 60px;
        height: 67px;
    }

    .culture-value h3 {
        font-size: 17px;
    }

    .culture-value p {
        font-size: 13px;
        line-height: 19px;
    }

    .page4 {
        margin-top: 25px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 31px;
        line-height: 45px;
    }

    .page4-inner .tab {
        margin-top: 25px;
        gap: 16px;
    }

    .page4-box {
        margin-top: 25px;
        gap: 18px;
    }

    .page5 {
        padding: 25px 0;
    }

    .responsibility-heading p {
        font-size: 14px;
        line-height: 22px;
    }

    .responsibility-panel {
        height: auto;
        margin-top: 32px;
        padding: 30px 0 24px;
    }

    .responsibility-list {
        position: relative;
        bottom: auto;
        height: auto;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 18px;
    }

    .list-item {
        flex: 0 1 31%;
    }

    .list-item img {
        height: auto;
    }
}

/* Keep the combined culture line aligned with the staggered text blocks. */
@media only screen and (max-width: 1600px) and (min-width: 1481px) {
    .page3-inenr {
        --culture-value-start: 800px;
    }
}

@media only screen and (max-width: 1480px) {
    .culture-value--2 {
        top: calc(var(--culture-value-start) + 170px);
    }

    .culture-value--3,
    .culture-value--4 {
        top: calc(var(--culture-value-start) + 270px);
    }
}

/* @media 1280px */
@media only screen and (max-width: 1280px) {
    .banner {
        aspect-ratio: 2.1 / 1;
    }

    .banner-text h1 {
        font-size: 32px;
        line-height: 43px;
    }

    .banner-text p {
        font-size: 16px;
        line-height: 25px;
    }

    .banner-data {
        gap: 12px;
    }

    .banner-data-item strong {
        font-size: 32px;
        line-height: 43px;
    }

    .banner-data-item strong > svg {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
    }

    .banner-data-item strong > span {
        font-size: 19px;
    }

    .banner-data-item p {
        font-size: 17px;
        line-height: 25px;
    }

    .page1 .nav {
        gap: 30px;
    }

    .page1 .nav-item a {
        font-size: 16px;
    }

    .page2-inner.inner {
        padding: 22px;
    }

    .page2-l {
        padding-right: 22px;
    }

    .page2-r {
        padding-left: 22px;
    }

    .page2-line {
        top: 58px;
        bottom: 30px;
    }

    .about-copy h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .about-copy p {
        font-size: 14px;
        line-height: 24px;
    }

    .about-copy--experience,
    .about-copy--service,
    .about-copy--market {
        margin-top: 22px;
    }

    .about-copy--product,
    .page2-r .about-picture + .about-copy {
        margin-top: 22px;
    }

    .page2-r .about-copy + .about-picture {
        margin-top: 22px;
    }

    .about-picture--left {
        margin-top: 22px;
    }

    .culture-heading {
        top: 160px;
        width: 20%;
    }

    .culture-heading h2 {
        font-size: 22px;
    }

    .culture-heading p {
        font-size: 13px;
        line-height: 20px;
    }

    .culture-value b {
        font-size: 34px;
    }

    .culture-value-number {
        width: 54px;
        height: 60px;
    }

    .culture-value h3 {
        font-size: 16px;
    }

    .culture-value p {
        font-size: 13px;
        line-height: 18px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 28px;
        line-height: 40px;
    }

    .page4-inner .tab {
        gap: 12px;
    }

    .page4-inner .tab .tab-l,
    .page4-inner .tab .tab-r {
        font-size: 16px;
        line-height: 22px;
    }

    .page4-box {
        margin-top: 22px;
        gap: 14px;
    }

    .responsibility-panel {
        margin-top: 22px;
    }
}

/* @media 1024px */
@media only screen and (max-width: 1024px) {
    .banner {
        aspect-ratio: 1.9 / 1;
    }

    .banner .inner {
        padding-bottom: 20px;
    }

    .banner-text {
        padding-bottom: 24px;
    }

    .banner-text h1 {
        margin-bottom: 10px;
        font-size: 29px;
        line-height: 39px;
    }

    .banner-text p {
        font-size: 15px;
        line-height: 23px;
    }

    .banner-data-item strong {
        font-size: 28px;
        line-height: 38px;
    }

    .banner-data-item strong > svg {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .banner-data-item strong > span {
        font-size: 17px;
    }

    .banner-data-item p {
        margin-top: 4px;
        font-size: 15px;
        line-height: 22px;
    }

    .page1 {
        height: auto;
        padding-bottom: 16px;
    }

    .page1-inner.inner,
    .page1 .nav {
        height: auto;
    }

    .page1 .nav {
        gap: 0;
        padding: 0 12px;
    }

    .page1 .nav-item {
        flex: 0 1 25%;
        height: auto;
    }

    .page1 .nav-item a {
        justify-content: center;
        padding: 20px 0;
        font-size: 15px;
    }

    .page2-inner.inner {
        padding: 20px 20px 25px;
    }

    .page2-l,
    .page2-r {
        padding-left: 10px;
        padding-right: 10px;
    }

    .about-copy h2 {
        font-size: 25px;
        line-height: 33px;
    }

    .about-copy p {
        font-size: 13px;
        line-height: 22px;
    }

    .about-copy--experience,
    .about-copy--service,
    .about-copy--market {
        margin-top: 20px;
    }

    .about-copy--product,
    .page2-r .about-picture + .about-copy {
        margin-top: 20px;
    }

    .page2-r .about-copy + .about-picture {
        margin-top: 20px;
    }

    .about-picture--left {
        margin-top: 20px;
    }

    .culture-heading {
        top: 135px;
        left: 4%;
        width: 22%;
    }

    .culture-heading h2 {
        font-size: 20px;
    }

    .culture-heading p {
        font-size: 13px;
        line-height: 19px;
    }

    .culture-trailer-wrap {
        width: 70%;
    }

    .culture-value {
        width: 18%;
    }

    .culture-value b {
        font-size: 30px;
    }

    .culture-value-number {
        width: 48px;
        height: 53px;
    }

    .culture-value h3 {
        font-size: 15px;
        line-height: 21px;
    }

    .culture-value p {
        font-size: 13px;
        line-height: 18px;
    }

    .culture-value--3,
    .culture-value--4 {
        top: calc(var(--culture-value-start) + 240px);
    }

    .page4 {
        margin-top: 25px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 25px;
        line-height: 36px;
    }

    .page4-box {
        margin-top: 24px;
    }

    .page4-box .page4-item p {
        margin-top: 18px;
        font-size: 15px;
        line-height: 22px;
    }

    .page5 {
        padding: 25px 0;
    }

    .responsibility-heading p {
        font-size: 13px;
        line-height: 20px;
    }

    .responsibility-panel {
        height: auto;
        margin-top: 20px;
        padding: 25px 0 18px;
    }

    .responsibility-list {
        position: relative;
        bottom: auto;
        height: auto;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 12px;
    }

    .list-item {
        flex: 0 1 31%;
    }

    .list-item img {
        height: auto;
    }

    .list-item .text {
        bottom: 18px;
        padding: 0 16px;
    }

    .list-item .text h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .list-item .text p {
        margin-top: 5px;
        font-size: 13px;
        line-height: 19px;
    }

    .page3 {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .page3 .Culture,
    .page3 .Culture2 {
        position: relative;
        top: auto;
        left: auto;
        width: 120%;
        margin-left: -2%;
        flex: 0 0 auto;
    }

    .page3 .Culture {
        height: auto;
        padding: 12px 0;
    }

    .page3 .Culture2 {
        top: auto;
    }

    .page3-inenr {
        min-height: 0;
        padding: 25px 0;
        display: flex;
        flex-direction: column;
    }

    .culture-heading {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        text-align: center;
    }

    .culture-heading > span {
        margin: 0 auto 12px;
    }

    .culture-heading p {
        width: 92%;
        margin: 0 auto;
    }

    .culture-trailer-wrap {
        display: none;
    }

    .culture-values {
        position: relative;
        inset: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 22px;
    }

    .culture-value {
        position: relative;
        top: auto;
        left: auto;
        width: 48%;
    }

    .culture-value-lines {
        display: none;
    }
}

/* @media 820px */
@media only screen and (max-width: 820px) {
    .banner {
        aspect-ratio: 1.75 / 1;
    }

    .banner .inner {
        padding-bottom: 18px;
    }

    .banner-text {
        padding-bottom: 18px;
    }

    .banner-text h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .banner-text p {
        font-size: 14px;
        line-height: 22px;
    }

    .banner-data {
        flex-wrap: wrap;
        gap: 10px;
    }

    .banner-data-item {
        flex: 0 1 30%;
    }

    .banner-data-item strong {
        font-size: 24px;
        line-height: 33px;
    }

    .banner-data-item strong > svg {
        width: 33px;
        height: 33px;
        flex: 0 0 33px;
    }

    .banner-data-item strong > span {
        font-size: 15px;
    }

    .banner-data-item p {
        font-size: 13px;
        line-height: 20px;
    }

    .page1 {
        background: #205b9e;
        padding-bottom: 12px;
    }

    .page1::before {
        display: none;
    }

    .page1::after {
        height: 100%;
    }

    .page1 .nav {
        padding: 0 8px;
    }

    .page1 .nav-item {
        flex-basis: 50%;
        height: auto;
    }

    .page1 .nav-item a {
        padding: 14px 0;
        font-size: 14px;
    }

    .page2-inner.inner {
        flex-direction: column;
        gap: 18px;
        padding: 18px 18px 25px;
    }

    .page2-l,
    .page2-r {
        width: 100%;
        flex: 0 1 100%;
        padding: 0;
    }

    .page2-line {
        display: none;
    }

    .about-picture {
        max-width: none;
    }

    .about-picture img {
        aspect-ratio: 1.37;
    }

    .about-copy h2 {
        font-size: 23px;
        line-height: 31px;
    }

    .about-copy p {
        font-size: 14px;
        line-height: 23px;
    }

    .about-copy--experience,
    .about-copy--service,
    .about-copy--market,
    .about-copy--product,
    .page2-r .about-picture + .about-copy {
        margin-top: 20px;
    }

    .page2-r .about-copy + .about-picture {
        margin-top: 22px;
    }

    .about-picture--left {
        margin-top: 18px;
    }

    .about-r-line::after,
    .about-l-line::after {
        display: none;
    }

    .page2-l {
        display: flex;
        flex-direction: column;
    }

    .page2-l > .about-copy--intro {
        order: 1;
        margin-top: 0;
    }

    .page2-l > .about-picture:nth-child(3) {
        order: 2;
        margin-top: 18px;
    }

    .page2-l > .about-copy--experience {
        order: 3;
        margin-top: 20px;
    }

    .page2-l > .about-picture:nth-child(5) {
        order: 4;
        margin-top: 22px;
    }

    .page2-l > .about-copy--service {
        order: 5;
        margin-top: 20px;
    }

    .page3 {
        min-height: 0;
        padding-top: 0;
        display: flex;
        flex-direction: column;
    }

    .page3 .Culture,
    .page3 .Culture2 {
        position: relative;
        top: auto;
        left: auto;
        width: 120%;
        margin-left: -2%;
        flex: 0 0 auto;
    }

    .page3 .Culture {
        height: auto;
        padding: 12px 0;
    }

    .page3 .Culture2 {
        top: auto;
    }

    .page3-inenr {
        min-height: 0;
        padding: 25px 0;
        display: flex;
        flex-direction: column;
    }

    .culture-heading {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        text-align: center;
    }

    .culture-heading > span {
        margin: 0 auto 12px;
    }

    .culture-heading h2 {
        font-size: 22px;
        line-height: 31px;
    }

    .culture-heading p {
        width: 92%;
        margin: 0 auto;
        font-size: 14px;
        line-height: 22px;
    }

    .culture-trailer-wrap {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 18px;
    }

    .culture-values {
        position: relative;
        inset: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 22px;
    }

    .culture-value {
        position: relative;
        top: auto;
        left: auto;
        width: 48%;
    }

    .culture-value b {
        margin-bottom: 8px;
        font-size: 32px;
    }

    .culture-value-number {
        width: 46px;
        height: 51px;
        margin-bottom: 8px;
    }

    .culture-value h3 {
        font-size: 17px;
        line-height: 24px;
    }

    .culture-value p {
        font-size: 13px;
        line-height: 20px;
    }

    .culture-value-lines {
        display: none;
    }

    .page4-inner .tab {
        gap: 10px;
    }

    .page4-inner .tab .tab-l,
    .page4-inner .tab .tab-r {
        flex: 0 1 48%;
        justify-content: center;
        padding: 7px 8px;
        font-size: 14px;
    }

    .page4-box {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .page4-box .page4-item {
        flex: 0 0 auto;
        flex-basis: 100%;
        width: 100%;
        min-height: 0;
        aspect-ratio: 1.37 / 1;
    }

    .page4-box .page4-item-image {
        height: clamp(180px, 48vw, 280px);
    }

    .page4-box .page4-item-image {
        width: 78%;
    }

    .page4-btn .currPage {
        width: 55%;
        margin-top: 22px;
    }

    .responsibility-panel {
        margin-top: 20px;
        padding: 25px 0 18px;
    }

    .responsibility-list {
        gap: 12px;
    }

    .list-item {
        flex-basis: 48%;
    }
}

/* @media 768px */
@media only screen and (max-width: 768px) {
    .culture-value-number {
        width: 44px;
        height: 49px;
    }
    .banner-text h1::after{
        display: none;
    }
    .banner {
        aspect-ratio: 1.7 / 1;
    }

    .banner-text h1 {
        font-size: 24px;
        line-height: 33px;
    }

    .banner-text p {
        font-size: 13px;
        line-height: 21px;
    }

    .banner-data-item {
        flex-basis: 31%;
    }

    .banner-data-item strong {
        font-size: 22px;
        line-height: 31px;
    }

    .banner-data-item strong > svg {
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
    }

    .page2-inner.inner {
        padding: 16px 16px 22px;
    }

    .about-copy h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .about-copy p {
        font-size: 13px;
        line-height: 22px;
    }

    .page3-inenr {
        padding-top: 22px;
    }

    .culture-values {
        gap: 14px;
    }

    .culture-value h3 {
        font-size: 16px;
        line-height: 23px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 23px;
        line-height: 32px;
    }

    .page4-inner .tab .tab-l,
    .page4-inner .tab .tab-r {
        font-size: 13px;
    }

    .page4-box .page4-item p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 21px;
    }

    .responsibility-panel {
        margin-top: 18px;
        padding: 25px 0 18px;
    }

    .list-item .text {
        bottom: 14px;
        padding: 0 12px;
    }

    .list-item .text h3 {
        font-size: 19px;
        line-height: 28px;
    }

    .list-item .text p {
        font-size: 13px;
        line-height: 18px;
    }
}

/* @media 640px */
@media only screen and (max-width: 640px) {
    .culture-value-number {
        width: 42px;
        height: 47px;
    }

    .banner {
        aspect-ratio: 1.6 / 1;
    }

    .banner .inner {
        padding-bottom: 14px;
    }

    .banner-text {
        padding-bottom: 14px;
    }

    .banner-text h1 {
        margin-bottom: 8px;
        font-size: 22px;
        line-height: 31px;
    }

    .banner-text p {
        width: 92%;
        margin: 0 auto;
        font-size: 13px;
        line-height: 20px;
    }

    .banner-data {
        gap: 8px;
    }

    .banner-data-item {
        flex-basis: 47%;
    }

    .banner-data-item strong {
        font-size: 20px;
        line-height: 29px;
    }

    .banner-data-item strong > svg {
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
    }

    .banner-data-item strong > span {
        font-size: 13px;
    }

    .banner-data-item p {
        font-size: 13px;
        line-height: 19px;
    }

    .page1 .nav-item {
        height: auto;
    }

    .page1 .nav-item a {
        padding: 12px 0;
        font-size: 13px;
    }

    .page2-inner.inner {
        gap: 14px;
        padding: 14px 14px 20px;
    }

    .about-copy h2 {
        font-size: 21px;
        line-height: 29px;
    }

    .about-copy p {
        font-size: 13px;
        line-height: 21px;
    }

    .culture-heading h2 {
        font-size: 20px;
        line-height: 29px;
    }

    .culture-heading p {
        font-size: 13px;
        line-height: 21px;
    }

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

    .culture-value {
        width: 100%;
    }

    .page4-inner .tab {
        flex-direction: column;
        align-items: stretch;
    }

    .page4-inner .tab .tab-l,
    .page4-inner .tab .tab-r {
        flex-basis: auto;
        width: 100%;
    }

    .page4-box .page4-item {
        min-height: 0;
        aspect-ratio: 1.25 / 1;
    }

    .page4-box .page4-item-image {
        height: clamp(180px, 52vw, 240px);
    }

    .page4-btn .currPage {
        width: 70%;
    }

    .responsibility-panel {
        margin-top: 18px;
        padding: 18px 0;
    }

    .responsibility-list {
        flex-direction: column;
        gap: 12px;
        padding: 0 10px;
        align-items: stretch;
    }

    .list-item {
        width: 100%;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .list-item img {
        width: 100%;
        height: auto;
    }

    .list-item .text {
        bottom: 20px;
        padding: 0 24px;
    }

    .list-item .text h3 {
        font-size: 20px;
        line-height: 29px;
    }
}

/* @media 414px */
@media only screen and (max-width: 414px) {
    .culture-value-number {
        width: 38px;
        height: 42px;
    }

    .banner {
        aspect-ratio: 1.4 / 1;
    }

    .banner-text h1 {
        font-size: 20px;
        line-height: 29px;
    }

    .banner-text p {
        line-height: 19px;
    }

    .banner-data-item strong {
        font-size: 19px;
        line-height: 27px;
    }

    .banner-data-item strong > svg {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
    }

    .banner-data-item p {
        font-size: 13px;
        line-height: 18px;
    }

    .page1 {
        padding-bottom: 10px;
    }

    .page1 .nav-item {
        height: auto;
    }

    .page1 .nav-item a {
        padding: 11px 0;
    }

    .page2-inner.inner {
        padding: 12px 12px 18px;
    }

    .about-copy h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .about-copy p {
        font-size: 13px;
        line-height: 20px;
    }

    .page3 {
        padding-top: 0;
    }

    .page3 .Culture2 {
        top: auto;
    }

    .page3-inenr {
        padding: 20px 0 18px;
    }

    .culture-trailer-wrap {
        margin-top: 14px;
    }

    .culture-values {
        margin-top: 18px;
    }

    .page4 {
        margin-top: 18px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 21px;
        line-height: 29px;
    }

    .page4-box .page4-item p {
        font-size: 13px;
        line-height: 20px;
    }

    .page5 {
        padding: 18px 0 20px;
    }

    .responsibility-heading p {
        font-size: 13px;
        line-height: 19px;
    }

    .responsibility-panel {
        margin-top: 16px;
    }

    .list-item .text {
        bottom: 16px;
        padding: 0 18px;
    }
}

/* Mobile page-one navigation: match the draggable horizontal navigation used on pros. */
@media only screen and (max-width: 1024px) {
    .page1 .nav {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        user-select: none;
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page1 .nav::-webkit-scrollbar {
        display: none;
    }

    .page1 .nav.is-dragging {
        cursor: grabbing;
    }

    .page1 .nav-item {
        flex: 0 0 auto;
    }

    .page1 .nav-item a {
        padding-inline: 18px;
        white-space: nowrap;
    }
}

/* @media 375px */
@media only screen and (max-width: 375px) {
    .banner {
        aspect-ratio: 1.35 / 1;
    }

    .banner .inner {
        padding-bottom: 10px;
    }

    .banner-text {
        padding-bottom: 10px;
    }

    .banner-text p {
        font-size: 13px;
        line-height: 18px;
    }

    .banner-data-item strong {
        font-size: 18px;
        line-height: 26px;
    }

    .banner-data-item strong > svg {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .page1 .nav-item {
        height: auto;
    }

    .page1 .nav-item a {
        padding: 10px 0;
        font-size: 13px;
    }

    .page2-inner.inner {
        padding: 10px 10px 16px;
    }

    .about-copy p {
        line-height: 19px;
    }

    .page3 {
        padding-top: 0;
    }

    .page3 .Culture2 {
        top: auto;
    }

    .page3-inenr {
        padding-top: 18px;
    }

    .page4-inner h1,
    .responsibility-heading h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .page4-btn .currPage {
        width: 78%;
    }

    .page5 {
        padding: 16px 0 18px;
    }
}

/* Keep the complete About banner content visible below the fixed header. */
@media only screen and (max-width: 1280px) {
    .banner .inner {
        justify-content: center;
    }

    .banner-data {
        justify-content: center;
    }
}

@media only screen and (max-width: 640px) {
    .banner {
        height: auto;
        min-height: clamp(360px, 86vw, 460px);
        aspect-ratio: auto;
    }

    .banner .inner {
        height: auto;
        min-height: inherit;
        padding-top: clamp(24px, 7vw, 40px);
        padding-bottom: clamp(24px, 7vw, 40px);
    }

    .banner-text {
        padding-bottom: clamp(16px, 4.5vw, 24px);
    }

    .banner-text h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .banner-text p {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .banner-data {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 12px 14px;
    }

    .banner-data-item {
        min-width: 0;
        text-align: center;
    }

    .banner-data-item strong {
        justify-content: center;
    }

    .banner-data-item p {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media only screen and (max-width: 414px) {
    .banner {
        min-height: clamp(350px, 106vw, 430px);
    }

    .banner .inner {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .banner-data {
        gap: 10px 12px;
    }

    .banner-data-item p {
        margin-top: 4px;
    }
}
/* About-page hover states for navigation, tabs, pagination and imagery. */
.page1 .nav-item a,.page4-inner .tab .tab-l,.page4-inner .tab .tab-r,.page3-btn .currPage .next,.page3-btn .currPage .prev,.page4-btn .currPage .next,.page4-btn .currPage .prev,.page4-box .page4-item-image > img,.list-item,.list-item img,.thumb-arrow-prev,.thumb-arrow-next { transition: transform .5s ease, color .5s ease, background-color .5s ease, box-shadow .5s ease, opacity .5s ease; }
.page1 .nav-item a:hover,.page1 .nav-item a:focus-visible { color: #fff; transform: translateY(-2px); }
.about-picture img { transition: transform .5s ease; }
.about-picture:hover img { transform: scale(1.05); }
.culture-value h3 { transition: color .5s ease; }
.culture-value:hover h3 { color: #16559d; }
.page4-inner .tab .tab-l:hover,.page4-inner .tab .tab-l:focus-visible,.page4-inner .tab .tab-r:hover,.page4-inner .tab .tab-r:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(22,85,157,.16); }
.page4-box .page4-item-image { overflow: hidden; }
.page4-box .page4-item-image:hover > img,.page4-box .page4-item-image:focus-visible > img,.list-item:hover img { transform: scale(1.08); }
.list-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20,61,96,.12); }
.page3-btn .currPage .next:hover,.page3-btn .currPage .next:focus-visible,.page3-btn .currPage .prev:hover,.page3-btn .currPage .prev:focus-visible,.page4-btn .currPage .next:hover,.page4-btn .currPage .next:focus-visible,.page4-btn .currPage .prev:hover,.page4-btn .currPage .prev:focus-visible,.thumb-arrow-prev:hover,.thumb-arrow-prev:focus-visible,.thumb-arrow-next:hover,.thumb-arrow-next:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(22,85,157,.2); }