.banner{
    width: 100%;
    /* height: 100vh; */
    height: 12.34rem;
    position: relative;
    overflow: hidden;
    padding-top: 1.54rem;
    background: var(--yofo-navy);
}
.banner>img,
.banner>video,
.banner>.bannerVideoEmbed{
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 10.8rem;
    object-fit: cover;
}
.banner>.bannerVideoEmbed {
    z-index: 1;
    overflow: hidden;
    background: #000000;
}
.banner>.bannerVideoEmbed iframe {
    display: block;
    margin: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0;
}
.banner .banner-content{
    position: absolute;
    inset: 0;
    transform: none;
    padding: 2.54rem 0 1.08rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    pointer-events: none;
    padding-bottom: 3.07rem;
    transition: opacity .25s ease, visibility .25s ease;
}
.banner.yofoVideoFrameActive .banner-content{
    opacity: 0;
    visibility: hidden;
}
.banner .banner-content .banner_class{
    color: #F5F7FC;
    font-size: 0.38rem;
    font-weight: 600;
    position: relative;
}
.banner .banner-content .banner_class::before{
    content: '';
    position: absolute;
    bottom: -0.08rem;
    left: 0;
    width: 1.2rem;
    height: 0.05rem;
    background: #F3AF4A;
}
.banner .banner-content .play{
    width: 1.3rem;
    height: 1.3rem;
    display: block;
    margin: 2.31rem auto 0;
    cursor: pointer;
}
.banner .banner-content .banner_title{
    max-width: 11.6rem;
    margin-top: .91rem;
    margin-top: auto;
    color: #F5F7FC;
    font-size: clamp(44px, .65rem, 65px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.18;
}





.sectionArrow {
    height: .46rem;
    background: url(../images/sectionArrow.png) center center / .435rem auto no-repeat;
    margin: 1rem auto 0.5rem;
}
.class_name{
    color: #2C3247;
    text-align: center;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 700;
    margin-bottom: 0.5rem;
}




/* Products */
.productItem {
    height: 5.38rem;
    padding: 1.47rem .72rem 0.8rem;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}
.productItem+.productItem {
    margin-top: .3rem;
}
.productImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.productText {
    max-width: 7.7rem;
    position: relative;
    z-index: 1;
}
.productItem+.productItem .productText {
    max-width: 9rem;
}
.productText h2 {
    color: #FFFFFF;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 600;
    line-height: 1.29;
}
.productText div {
    width: 100%;
    min-height: 1.02rem;
    margin-top: .33rem;
    color: #FFFFFF;
    font-family: 'Inter';
    font-size: clamp(18px, .22rem, 22px);
    line-height: 1.21;
    font-weight: 300;
}
.productText .arrowLink {
    display: block;
    width: fit-content;
    transform: none;
    margin: 0.05rem 0 0 auto;
    font-size: clamp(14px, .22rem, 22px);
    color: #FFFFFF;
    font-style: italic;
    font-weight: 300;
    transition: color .3s ease-in-out;
}

.productText .arrowLink b{
    color: #FFF;
    font-weight: 300;
}

.productText .arrowLink:hover {
    color: var(--yofo-orange);
}
.productText .arrowLink:hover b{
    color: var(--yofo-orange);
}



/* Validation */
.Innovation_body2{
    padding: 0.5rem 0;
    background: #EAEEFD;
}
.Validation_item{
    width: 100%;
    max-height: 5.85rem;
    display: flex;
    background: #F5F7FC;
    margin-top: 0.3rem;
}
.Validation_item:nth-child(2n){
    flex-direction: row-reverse;
}
.Validation_item .Validation_txt{
    width: calc(50% - 0.72rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.6rem 0 0.7rem;
    border-bottom: 0.04rem solid #08319B;
}
.Validation_item .Validation_txt .Validation_title{
    color: #2C3247;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.16;
}
.Validation_item .Validation_txt .Validation_info{
    color: #2C3247;
    font-family: 'Inter';
    font-size: clamp(18px, .28rem, 28px);
    font-weight: 400;
    line-height: 1.21;
    margin-top: 0.5rem;
}
.Validation_item .Validation_img{
    width: calc(50% + 0.72rem);
    height: auto;
    overflow: hidden;
}
.Validation_item .Validation_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.Validation_item .Validation_img:hover img{
    transform: scale(1.1);
}







/* Diagnostics */
.Innovation_box3 .main{
    display: flex;
    flex-wrap: wrap;
    gap: 0.26rem;
    max-width: 14.4rem;
}
.Diagnostics_item{
    width: calc(33.33% - 0.17333rem);
    height: 5.85rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.Diagnostics_item>img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.Diagnostics_item:hover>img{
    transform: scale(1.1);
}
.Diagnostics_item .Diagnostics_title{
    width: 100%;
    padding: 0.35rem 0.2rem;
    position: relative;
    color: #2C3247;
    text-align: center;
    font-size: 0.28rem;
    font-weight: 500;
    line-height: 1.14;
}
.Diagnostics_item .Diagnostics_info{
    position: relative;
    width: 100%;
    padding: 0.85rem 0.2rem 0.3rem;
    background: linear-gradient(180deg, rgba(238, 238, 238, 0.00) -4.64%, #FFF 100%);
    color: #2C3247;
    text-align: center;
    font-family: 'Inter';
    font-size: 0.22rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.227;
}




/* Insight */
.Innovation_box4 .main{
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.26rem;
    row-gap: 0.2rem;
    max-width: 14.4rem;
}
.Insight_item{
    width: 14.4rem;
    max-height: 9.6rem;
    display: flex;
    margin: 0.2rem auto 0; 
    position: relative;
    overflow: hidden;
}
.Insight_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Insight_item .Insight_txt{
    position: absolute;
    left: 1.04rem;
    bottom: 1.34rem;
    max-width: 4.33rem;
}
.Insight_item .Insight_txt .Insight_title{
    color: #2C3247;
    font-size: clamp(24px, .38rem, 38px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.Insight_item .Insight_txt .Insight_info{
    color: #2C3247;
    font-family: 'Inter';
    font-size: clamp(18px, .22rem, 22px);
    font-weight: 400;
    line-height: 1.21;
    margin-top: 0.5rem;
}
.Insight_item .Insight_txt .Insight_btn{
    width: fit-content;
    height: auto;
    padding: 0.12rem 0.4rem;
    border-radius: 26px;
    border: 1px solid #08319B;
    background: #08319B;
    color: #F5F7FC;
    font-family: 'Inter';
    font-size: clamp(22px, .22rem, 22px);
    font-weight: 400;
    line-height: 1.227;
    margin-top: 0.48rem;
    transition: background .3s ease, border-color .3s ease;
}
.Insight_item .Insight_txt .Insight_btn:hover{
    background: var(--yofo-orange);
    border-color: var(--yofo-orange);
}











/* Our Foundation */

.Foundation{
    background: #FFFFFF;
}

.Foundation_box{
    max-width: 12.77rem;
    margin: 0 auto;
    min-height: 3.85rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.Foundation_person{
    width: 3.26rem;
    height: auto;
}

.Foundation_person img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto .3rem;
    object-fit: cover;
}

.Foundation_name{
    color: #2C3247;
    font-size: .38rem;
    line-height: 1.29;
    text-align: center;
    font-weight: 600;
    font-style: normal;
}

.Foundation_role{
    margin-top: .15rem;
    color: #2C3247;
    font-size: .24rem;
    line-height: 1.29;
    text-align: center;
    font-weight: 400;
}


.Foundation_detail{
    max-width: 8.5rem;
    padding-top: .16rem;
}
.Foundation_logos{
    display: flex;
    justify-content: space-around;
    min-height: .54rem;
    margin-bottom: .37rem;
}
.Foundation_logos .Foundation_item{
    max-width: 2.92rem;
    height: auto;
    display: flex;
    gap: .15rem;
    flex-direction: column;
    justify-content: space-around;
}
.Foundation_logos .Foundation_item img{
    width: auto;
    height: .63rem;
    display: block;
    object-fit: contain;
}
.Foundation_logos .Foundation_item span{
    display: block;
    color: #2C3247;
    font-family: 'Inter';
    font-size: .28rem;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: 1.14286;
}
.Foundation_list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.Foundation_list li{
    padding: 0.13rem 0;
    border-bottom: .01rem solid #3C3C3B;
    color: #6D778A;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.227;
}






/* Built */
.Built{
    background: #FFFFFF;
}

.Built_box{
    max-width: 16.45rem;
    margin: 0 auto;
    min-height: 5.85rem;
    display: flex;
    border: .01rem solid #D8DCE6;
    background: #FFFFFF;
}

.Built_text{
    width: calc(50% - 0.73rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.14rem .87rem .42rem;
}
.Built_badges{
    display: flex;
    justify-content: space-between;
    margin-bottom: .28rem;
}

.Built_badge{
    color: #6D778A;
    text-align: center;
}
.Built_badge span{
    width: .53rem;
    height: .53rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0.3rem;
}
.Built_badge span img{
    width: 100%;
    height: 100%;
    display: contain;
}
.Built_badge p{
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.2;
    display: flex;
    height: calc(100% - .83rem);
    align-items: center;
    color: #6D778A;
}

.Built_copy{
    margin-top: .28rem;
    color: #2C3247;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.18;
}

.Built_img{
    width: calc(50% + 0.73rem);
    height: auto;
    overflow: hidden;
}
.Built_img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}
.Built_img:hover img{
    transform: scale(1.04);
}







/* Strengths */
.Strengths .class_name{
    color: #FFFFFF;
}
.Strengths_box{
    padding: .52rem 0 0;
    background: #2C3247;
}
.Strengths_box .class_name{
    margin-bottom: .39rem;
}
.Strengths_item{
    min-height: 3.12rem;
    border-top: .01rem solid rgba(245, 247, 252, .72);
    display: grid;
    grid-template-columns: 4.35rem minmax(0, 9.6rem);
    justify-content: start;
    padding: .49rem .72rem;
    align-items: center;
}
.Strengths_item:nth-of-type(3){
    min-height: 2.3rem;
}
.Strengths_item:nth-of-type(4){
    min-height: 1.54rem;
}
.Strengths_title{
    max-width: 2.15rem;
    /* grid-row: 1 / span 2; */
    align-self: center;
    color: #FFF;
    font-size: .38rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.16;
}
.Strengths_info{
    width: 100%;
    color: #FFFFFF;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.18;
}

.Strengths_btn{
    width: 1.97rem;
    min-height: .51rem;
    grid-column: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .18rem;
    padding: .1rem .25rem;
    border-radius: .26rem;
    background: #08319B;
    color: #FFFFFF;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.2;
    text-align: center;
    transition: background .3s ease;
}

.Strengths_btn:hover{
    background: var(--yofo-orange);
}




/* product */

.product{
    background: #FFFFFF;
}

.companyMilestones{
    width: 100%;
    padding-bottom: .18rem;
}

.companyMilestones .class_name{
    margin-bottom: .5rem;
}

.companyMilestoneSwiper{
    width: 100%;
}

.companyMilestoneCurrentYear{
    position: absolute;
    right: 4rem;
    bottom: .56rem;
    z-index: 2;
    color: #08319B;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
}

.companyMilestoneSlide{
    width: 100%;
    min-height: 5.85rem;
    display: grid;
    grid-template-columns: 6.56rem 8.1rem;
    justify-content: center;
    gap: .47rem;
    padding: .5rem 0 1.45rem;
}

.companyMilestoneCopy{
    font-family: 'Inter';
    color: #000000;
}

.companyMilestoneCopy p + p{
    margin-top: .5rem;
}

.companyMilestoneCopy strong,
.companyMilestoneCopy span{
    display: block;
}

.companyMilestoneCopy strong{
    font-size: .28rem;
    font-weight: 600;
    line-height: 1.15;
}

.companyMilestoneCopy span{
    margin-top: .18rem;
    font-size: .22rem;
    line-height: 1.2;
    font-family: 'Inter';
    font-weight: 400;
}

.companyMilestoneProducts{
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    display: flex;
    justify-content: flex-end;
    gap: .3rem;
}

.companyMilestoneProduct{
    width: calc((100% - .6rem) / 3);
    height: 3.4rem;
    /* padding: .42rem .25rem .25rem; */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* background: #EAEEFD; */
    /* color: #000000; */
    /* font-family: 'Inter'; */
    /* font-size: .22rem; */
}

.companyMilestoneProduct img{
    width: 100%;
    /* height: 2rem; */
    height: 100%;
    object-fit: contain;
}

.companyMilestoneFuture .companyMilestoneProducts{
    grid-template-columns: 2.5rem;
}

.companyMilestoneControls{
    position: absolute;
    left: calc(50% - 7.7rem);
    bottom: .52rem;
    z-index: 2;
    display: flex;
    gap: .4rem;
}

.companyMilestoneControls button{
    width: .46rem;
    height: .46rem;
    color: #08319B;
    font-size: .46rem;
    line-height: .4rem;
    cursor: pointer;
}

.companyMilestoneControls button.swiper-button-disabled{
    opacity: .5;
    filter: brightness(0);
}

.companyMilestoneControls button:not(.swiper-button-disabled):hover{
    color: var(--yofo-orange);
}

.companyMilestoneYears{
    height: .55rem;
    position: relative;
    border-top: 1px solid #08319B;
    color: #2C3247;
    font-family: 'Inter';
    font-size: .22rem;
    font-weight: 600;
}

.companyMilestoneYears .swiper-wrapper{
    align-items: flex-start;
    /* justify-content: flex-end; */
}

.companyMilestoneYear{
    width: auto;
    height: .55rem;
    min-width: .58rem;
    padding: .14rem .12rem 0;
    position: relative;
    border: 0;
    background: transparent;
    color: #2C3247;
    font-family: 'Inter';
    font-size: .22rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.companyMilestoneYear.swiper-slide-thumb-active::before{
    content: "";
    width: .59rem;
    height: .07rem;
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #08319B;
}

.companyMilestoneYear:focus-visible{
    outline: 2px solid #08319B;
    outline-offset: -2px;
}





/* purpose */

.purpose{
    padding-top: 0.5rem;
    padding-bottom: .8rem;
    background: #EAEFFD;
}

.purpose_box{
    width: 100%;
}

.purpose_box .class_name{
    margin-bottom: .49rem;
}

.companyPurpose{
    width: 82.7%;
    max-width: 15.88rem;
    min-height: 8.4rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    background: #F5F7FC;
}

.companyPurposeFeature{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #F5F7FC;
    color: #000000;
}

.companyPurposeFeature .swiper-wrapper{
    align-items: stretch;
}

.companyPurposePanel{
    height: auto;
    min-height: 8.4rem;
    display: block;
    padding: .98rem .75rem .36rem;
    position: relative;
}

.companyPurposePanel.swiper-slide-active{
    animation: companyPurposeIn .28s ease;
}

@keyframes companyPurposeIn{
    from { opacity: 0; }
    to { opacity: 1; }
}

.companyPurposePanel h2{
    color: #2C3247;
    font-size: .38rem;
    font-weight: 600;
    line-height: 1.2;
}

.companyPurposePanel p{
    width: 4.65rem;
    margin-top: .5rem;
    position: relative;
    z-index: 1;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.2;
}

.companyPurposePanel > img{
    width: 9.45rem;
    height: 6.62rem;
    display: block;
    /* margin: -.94rem 0 0 .28rem; */
    position: absolute;
    bottom: .21rem;
    left: 1.03rem;
    object-fit: contain;
}

.companyPurposePanel > span{
    display: block;
    /* margin-top: -.65rem; */
    color: #6D778A;
    font-family: 'Inter';
    font-size: .22rem;
    position: absolute;
    bottom: .91rem;
    left: .75rem;
}

.companyPurposeGrid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, 1fr);
}

.companyPurposeGrid > button,
.companyPurposeGrid > .companyPurposeEmpty{
    min-width: 0;
    padding: .5rem;
    border: 1px solid #EAEEFD;
    position: relative;
    background: #6D778A;
    color: #F5F7FC;
    font-family: 'Inter';
    font-size: .22rem;
    line-height: 1.2;
}

.companyPurposeGrid > button{
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .25s ease;
    display: flex;
    white-space: nowrap;
}

.companyPurposeGrid > button.active,
.companyPurposeGrid > button:hover,
.companyPurposeGrid > button:focus-visible{
    background: #08319B;
}

.companyPurposeGrid > button.active>img,
.companyPurposeGrid > button:hover>img,
.companyPurposeGrid > button:focus-visible>img{
    opacity: 1;
}

.companyPurposeGrid > button img{
    width: .5rem;
    height: .5rem;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    object-fit: contain;
    opacity: 0;
    transition: all 0.5s;
}









/* Vision */
.Vision_box{
    width: 100%;
    position: relative;
}
.Vision_box img{
    width: 100%;
}
.Vision_box .Vision_txt{
    position: absolute;
    top: 1.56rem;
    left: 0.75rem;
    width: 5.4rem;
}
.Vision_box .Vision_txt .Vision_key{
    color: #F3AF4A;
    font-size: clamp(16px, .38rem, 38px);
    font-style: normal;
    font-weight: 6600;
    line-height: normal;
    text-transform: uppercase;
    position: relative;
}
.Vision_box .Vision_txt .Vision_key::before{
    content: '';
    position: absolute;
    bottom: -0.08rem;
    left: 0;
    width: 0.8rem;
    height: 0.03rem;
    background: #F3AF4A;
}
.Vision_box .Vision_txt .Vision_info{
    width: 100%;
    margin-top: 0.84rem;
    color: #F5F7FC;
    font-size: clamp(20px, .48rem, 48px);
    font-weight: 500;
    line-height: 1.3;
}




/* Mission */
.Mission_box{
    display: flex;
    background: url(../images/mission_bg.png) no-repeat bottom center;
    background-size: contain;
}
.Mission_box .Mission_txt{
    width: calc(100% - 5.8rem);
    height: auto;
    position: relative;
    padding: 0.48rem 1rem 0.48rem 1.48rem;
}
.Mission_box .Mission_txt p{
    color: #2C3247;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.1;
}
.Mission_box .Mission_txt p + p{
    margin-top: 0.5rem;
}
.Mission_box .Mission_img{
    width: 5.8rem;
    height: auto;
}
.Mission_box .Mission_img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Values */
.Values_box{
    display: flex;
    column-gap: 1rem;
    margin-bottom: 0.3rem;
}
.Values_box + .Values_box{
    justify-content: flex-end;
}
.Values_box .Values_img{
    width: 5.86rem;
    height: 5.86rem;
    overflow: hidden;
}
.Values_box .Values_img>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Values_box .Values_txt{
    padding-top: 0.5rem;
    /* max-width: 7.48rem; */
    width: max-content;
}
.Values_box .Values_txt .Values_title{
    color: #2C3247;
    text-align: center;
    font-size: clamp(24px, .38rem, 38px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.29;
}
.Values_box .Values_txt .Values_desc{
    color: #08319B;
    text-align: center;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.36;
    margin: 0.23rem 0 1rem;
}
.Values_box .Values_txt .Values_li{
    width: 100%;
    margin-top: 0.15rem;
    color: #6D778A;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22rem);
    font-weight: 400;
    line-height: 1.23;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid #3C3C3B;
}


.Values_info{
    max-width: 14.4rem;
    margin: 1rem auto 0;
    border: 2px solid #08319B;
    padding: 0.63rem 0.6rem;
    color: #08319B;
    text-align: center;
    font-size: clamp(28px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.29;
}








/* Impact */
.Impact_box{
    padding: 0.5rem 0;
    background: #EAEEFD;
}
.Impact_item{
    display: flex;
    background: #F5F7FC;
    height: 5.85rem;
    margin-top: 0.3rem;
}
.Impact_item:nth-child(2n){
    flex-direction: row-reverse;
}
.Impact_item .Impact_txt{
    width: calc(50% - 0.73rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.5rem 0 0.74rem;
    row-gap: 0.3rem;
}
.Impact_item:nth-child(2n) .Impact_txt{
    padding: 0 0.74rem 0 0.5rem;
}
.Impact_item .Impact_txt .Impact_title{
    color: #2C3247;
    font-size: clamp(24px, .38rem, 38px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.16;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.Impact_item .Impact_txt .Impact_time{
    color: #08319B;
    font-family: 'Inter';
    font-size: clamp(28px, .38rem, 38px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.21;
}
.Impact_item .Impact_txt .Impact_info{
    color: #2C3247;
    font-family: 'Inter';
    font-size: clamp(14px, .22rem, 22px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.18; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.Impact_item .Impact_txt .Impact_btn{
    width: fit-content;
    height: auto;
    padding: 0.12rem 0.4rem;
    border-radius: 26px;
    border: 1px solid #08319B;
    background: #08319B;
    color: #F5F7FC;
    font-family: 'Inter';
    font-size: clamp(22px, .22rem, 22px);
    font-weight: 400;
    line-height: 1.227;
    margin: 0 0 0 auto;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.Impact_item .Impact_txt .Impact_btn:hover{
    background: var(--yofo-orange);
    border-color: var(--yofo-orange);
    color: #F5F7FC;
}
.Impact_item .Impact_img{
    width: calc(50% + 0.73rem);
    height: auto;
}

.Impact_item .Impact_img>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 1.x pages - mobile */
@media (max-width: 1024px) {
    .banner {
        /* height: min(600px, calc(100svh - 64px)); */
        min-height: 500px;
        max-height: none;
        margin-top: 64px;
    }

    .banner > img,
    .banner > video {
        object-position: 58% center;
    }

    .banner .banner-content {
        width: calc(100% - 40px);
        padding: 30px 0 46px;
    }

    .banner .banner-content .banner_class {
        font-size: 26px;
        line-height: 1.2;
    }

    .banner .banner-content .banner_class::before {
        bottom: -9px;
        width: 72px;
        height: 3px;
    }

    .banner .banner-content .play {
        width: 76px;
        height: 76px;
        margin: auto;
    }

    .banner .banner-content .banner_title {
        max-width: 100%;
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.12;
    }

    .sectionArrow {
        height: 36px;
        margin: 38px auto 24px;
        background-size: 18px auto;
    }

    .class_name {
        width: calc(100% - 40px);
        margin: 0 auto 24px;
        font-size: 26px;
        line-height: 1.24;
    }

    /* Innovation */
    .innovationPage .products,
    .Innovation_body2 > .main,
    .Innovation_box3 > .main,
    .Innovation_box4 > .main {
        width: calc(100% - 40px);
        max-width: none;
    }

    .productItem,
    .productItem + .productItem {
        height: auto;
        min-height: 0;
        margin-top: 16px;
        padding: 0;
        display: block;
        background: #53647A;
    }

    .productImg {
        position: relative;
        width: 100%;
        height: 220px;
        display: block;
        object-fit: cover;
        object-position: 70% center;
    }

    .productText,
    .productItem + .productItem .productText {
        max-width: 100%;
        padding: 22px 18px 26px;
    }

    .productText h2 {
        font-size: 22px;
        line-height: 1.18;
    }

    .productText div {
        min-height: 0;
        margin-top: 11px;
        font-size: 13px;
        line-height: 1.4;
    }

    .productText .arrowLink {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin-top: 12px;
        font-size: 14px;
    }

    .productItem + .productItem {
        background: #6F8FC8;
    }

    .productItem + .productItem .productImg {
        object-position: 72% center;
    }

    .Innovation_body2 {
        padding: 28px 0;
    }

    .Innovation_body2 .class_name {
        margin-bottom: 24px;
    }

    .Validation_item,
    .Validation_item:nth-child(2n) {
        max-height: none;
        display: flex;
        flex-direction: column-reverse;
        margin-top: 16px;
    }

    .Validation_item .Validation_img {
        width: 100%;
        height: 230px;
    }

    .Validation_item .Validation_txt {
        width: 100%;
        padding: 22px 18px 24px;
        border-bottom-width: 3px;
    }

    .Validation_item .Validation_txt .Validation_title {
        font-size: 22px;
        line-height: 1.2;
    }

    .Validation_item .Validation_txt .Validation_info {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    .Innovation_box3 .main,
    .Innovation_box4 .main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .Diagnostics_item {
        width: 100%;
        height: 480px;
    }

    .Diagnostics_item .Diagnostics_title {
        padding: 24px 18px;
        font-size: 22px;
        line-height: 1.2;
    }

    .Diagnostics_item .Diagnostics_info {
        padding: 70px 18px 24px;
        font-size: 15px;
        line-height: 1.4;
    }

    .Insight_item {
        max-width: none;
        max-height: none;
        display: block;
        margin: 0;
        background: #F5F7FC;
    }

    .Insight_item img {
        width: 100%;
        height: 240px;
        display: block;
        object-position: center;
    }

    .Insight_item .Insight_txt {
        position: static;
        max-width: none;
        padding: 22px 18px 24px;
    }

    .Insight_item .Insight_txt .Insight_title {
        font-size: 22px;
        line-height: 1.2;
    }

    .Insight_item .Insight_txt .Insight_info {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.4;
    }

    .Insight_item .Insight_txt .Insight_btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 18px auto  0;
        padding: 10px 22px;
        font-size: 14px;
    }

    /* Company */
    .companyPage .Foundation > .main,
    .companyPage .Built > .main,
    .companyPage .Strengths_box > .main {
        width: calc(100% - 40px);
        max-width: none;
    }

    .Foundation_box {
        max-width: none;
        min-height: 0;
        display: block;
    }

    .Foundation_person {
        width: min(260px, 76vw);
        margin: 0 auto 32px;
    }

    .Foundation_person img {
        margin-bottom: 18px;
    }

    .Foundation_name {
        font-size: 28px;
    }

    .Foundation_role {
        margin-top: 8px;
        font-size: 17px;
    }

    .Foundation_detail {
        max-width: none;
        padding-top: 0;
    }

    .Foundation_logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        min-height: 0;
        margin-bottom: 24px;
    }

    .Foundation_logos .Foundation_item {
        width: 100%;
        min-width: 0;
    }

    .Foundation_logos .Foundation_item img {
        width: 100%;
        height: 46px;
        margin-bottom: 12px;
    }

    .Foundation_logos .Foundation_item span {
        font-size: 15px;
        line-height: 1.25;
    }

    .Foundation_list li {
        padding: 12px 0;
        font-size: 14px;
        line-height: 1.45;
    }

    .Built_box {
        max-width: none;
        min-height: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .Built_img {
        width: 100%;
        height: 240px;
    }

    .Built_text {
        width: 100%;
        padding: 24px 18px 26px;
    }

    .Built_badges {
        gap: 10px;
        margin-bottom: 20px;
    }

    .Built_badge {
        flex: 1 1 0;
        min-width: 0;
    }

    .Built_badge span {
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
    }

    .Built_badge p {
        font-size: 12px;
        line-height: 1.3;
    }

    .Built_copy {
        margin-top: 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .Strengths_box {
        padding: 28px 0;
    }

    .Strengths_box .class_name {
        margin-bottom: 24px;
    }

    .Strengths_item {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 0;
    }

    .Strengths_title {
        max-width: none;
        grid-row: auto;
        font-size: 24px;
    }

    .Strengths_info {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }

    .Strengths_btn {
        width: fit-content;
        min-width: 110px;
        min-height: 44px;
        grid-column: auto;
        justify-self: start;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        border-radius: 24px;
        font-size: 14px;
        margin-top: 0;
    }

    .companyMilestones .class_name {
        margin-bottom: 8px;
    }

    .companyMilestoneSlide {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 20px 20px 76px;
    }

    .companyMilestoneCopy {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .companyMilestoneCopy p + p {
        margin-top: 0;
    }

    .companyMilestoneCopy strong {
        font-size: 16px;
        line-height: 1.25;
    }

    .companyMilestoneCopy span {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.35;
    }

    .companyMilestoneProducts {
        gap: 8px;
    }

    .companyMilestoneProduct {
        height: 174px;
        min-width: 0;
        /* padding: 16px 6px 12px; */
        /* font-size: 13px; */
    }

    /* .companyMilestoneProduct img {
        height: 120px;
    } */

    .companyMilestoneControls {
        left: 20px;
        bottom: 16px;
        gap: 18px;
    }

    .companyMilestoneCurrentYear {
        right: 20px;
        bottom: 10px;
        font-size: 44px;
    }

    .companyMilestoneControls button {
        width: 44px;
        height: 44px;
        font-size: 38px;
        line-height: 38px;
    }

    .companyMilestoneYears {
        height: 45px;
        font-size: 12px;
    }

    .companyMilestoneYear {
        width: auto;
        height: 45px;
        min-width: 64px;
        padding: 12px 8px 0;
    }

    .companyMilestoneYear.swiper-slide-thumb-active::before {
        width: calc(100% - 16px);
        max-width: 42px;
        height: 4px;
    }

    .purpose {
        padding-bottom: 40px;
    }

    .purpose_box .class_name {
        margin-bottom: 20px;
    }

    .companyPurpose {
        width: calc(100% - 40px);
        max-width: none;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .companyPurposeFeature {
        min-height: 470px;
    }

    .companyPurposePanel {
        min-height: 470px;
        padding: 26px 18px 20px;
    }

    .companyPurposePanel h2 {
        font-size: 24px;
    }

    .companyPurposePanel p {
        width: 100%;
        max-width: 320px;
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.4;
    }

    .companyPurposePanel > img {
        width: 100%;
        height: 300px;
        /* margin: -8px auto 0; */
        left: 0;
    }

    .companyPurposePanel > span {
        margin-top: 0px;
        font-size: 14px;
        bottom: 10px;
        left: 10px;
    }

    .companyPurposeGrid {
        grid-template-rows: repeat(4, 65px);
    }

    .companyPurposeGrid > button,
    .companyPurposeGrid > .companyPurposeEmpty {
        padding: 18px 14px;
        font-size: 14px;
        line-height: 1.3;
    }

    .companyPurposeGrid > button img {
        width: 38px;
        height: 38px;
        right: 14px;
        bottom: 14px;
    }

    /* Vision and values */
    .visionPage .Vision > .main,
    .visionPage .Mission > .main,
    .visionPage .Values > .main,
    .visionPage .Impact_box > .main {
        width: calc(100% - 40px);
        max-width: none;
    }

    .Vision_box {
        display: flex;
        flex-direction: column;
        background: #1D253A;
    }

    .Vision_box > img {
        width: 100%;
        height: 240px;
        display: block;
        object-fit: cover;
        object-position: 67% center;
    }

    .Vision_box .Vision_txt {
        position: static;
        width: 100%;
        padding: 24px 18px 28px;
    }

    .Vision_box .Vision_txt .Vision_key {
        font-size: 18px;
    }

    .Vision_box .Vision_txt .Vision_key::before {
        bottom: -8px;
        width: 54px;
        height: 3px;
    }

    .Vision_box .Vision_txt .Vision_info {
        margin-top: 28px;
        font-size: 25px;
        line-height: 1.25;
    }

    .Mission_box {
        display: flex;
        flex-direction: column-reverse;
        background-size: auto 50%;
    }

    .Mission_box .Mission_img {
        width: 100%;
        height: 250px;
    }

    .Mission_box .Mission_txt {
        width: 100%;
        padding: 26px 18px 30px;
        font-size: 25px;
        line-height: 1.2;
    }

    .Mission_box .Mission_txt p + p {
        margin-top: 24px;
    }

    .Values_box,
    .Values_box + .Values_box {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 28px;
    }

    .Values_box + .Values_box .Values_img {
        order: -1;
    }

    .Values_box .Values_img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .Values_box .Values_txt {
        width: 100%;
        max-width: none;
        padding: 24px 0 0;
    }

    .Values_box .Values_txt .Values_title {
        font-size: 25px;
        line-height: 1.25;
    }

    .Values_box .Values_txt .Values_desc {
        margin: 16px 0 24px;
        font-size: 16px;
        line-height: 1.45;
    }

    .Values_box .Values_txt .Values_li {
        margin-top: 0;
        padding: 12px 0;
        font-size: 14px;
        line-height: 1.45;
    }

    .Values_info {
        margin-top: 34px;
        padding: 24px 18px;
        border-width: 1px;
        font-size: 21px;
        line-height: 1.35;
    }

    .Impact_box {
        padding: 28px 0;
    }

    .Impact_item,
    .Impact_item:nth-child(2n) {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        margin-top: 16px;
    }

    .Impact_item .Impact_img {
        width: 100%;
        height: 240px;
    }

    .Impact_item .Impact_img img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .Impact_item .Impact_txt,
    .Impact_item:nth-child(2n) .Impact_txt {
        width: 100%;
        padding: 22px 18px 24px;
        gap: 12px;
    }

    .Impact_item .Impact_txt .Impact_title {
        font-size: 22px;
        line-height: 1.22;
    }

    .Impact_item .Impact_txt .Impact_time {
        font-size: 16px;
    }

    .Impact_item .Impact_txt .Impact_info {
        font-size: 14px;
        line-height: 1.5;
    }

    .Impact_item .Impact_txt .Impact_btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 4px 0 0;
        padding: 10px 22px;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .banner .banner-content .banner_title {
        font-size: 29px;
    }

    .productImg,
    .Validation_item .Validation_img,
    .Insight_item img,
    .Built_img,
    .Vision_box > img,
    .Impact_item .Impact_img {
        height: 210px;
    }

    .Diagnostics_item {
        height: 440px;
    }

    .Built_badge p {
        font-size: 11px;
    }
}

/* Final 1.x mobile containment after the desktop card revisions. */
@media (max-width: 1024px) {
    .innovationPage,
    .companyPage,
    .visionPage {
        max-width: 100%;
        overflow-x: clip;
    }

    .Innovation_box3 > .main,
    .Innovation_box4 > .main,
    .Diagnostics_item,
    .Insight_item,
    .Insight_item img,
    .Insight_item .Insight_txt {
        width: 100%;
        min-width: 0;
    }

    .Insight_item {
        max-width: 100%;
    }

    .Insight_item .Insight_txt .Insight_title,
    .Insight_item .Insight_txt .Insight_info,
    .Diagnostics_item .Diagnostics_title,
    .Diagnostics_item .Diagnostics_info,
    .companyPage h2,
    .companyPage h3,
    .companyPage p,
    .visionPage h2,
    .visionPage h3,
    .visionPage p {
        overflow-wrap: anywhere;
    }
    .Insight_item .Insight_txt .Insight_title,
    .Insight_item .Insight_txt .Insight_info{
        text-align: center
    }
}

@media (max-width: 480px) {
    .Diagnostics_item {
        height: 400px;
    }

    .companyMilestoneCopy {
        grid-template-columns: 1fr;
    }

    .companyMilestoneCurrentYear {
        font-size: 38px;
    }
}