/**
 * @author: Jicc(103698177)
 * @date: 2026-06-12
 * @phone: 13790890981
 */
.about-wrapper{}
.about-container{}
.about-section-1{
    width: 100%;
    padding-top: 99.5%;
    background-image: url('../images/about/about-bg-1.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.about-us-box{
    display: flex;
    width: 74.4%;
    position: absolute;
    top: 6.7%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.about-us-l{
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 15.2%;
    margin-right: 3.3%;
}
.about-icon{
    display: flex;
    width: 40.7%;
}
.about-icon img{
    width: 100%;
    height: auto;
}
.about-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    line-height: 1rem;
}
.about-us-r{
    width: 81.5%;
}
.about-us-r p{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-Medium', Arial;
    color: #000;
}
.our-fd{
    width: 100%;
    font-size: .8rem;
    font-family: 'Manrope-ExtraLight', Arial;
    line-height: 2.27rem;
    text-align: center;
    position: absolute;
    top: 49.6%;
    left: 0;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.since-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75.1%;
    position: absolute;
    top: 65.3%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.since-img{
    flex: none;
    display: flex;
    width: 50.2%;
    margin-right: 6%;
}
.since-img img{
    width: 100%;
    height: auto;
}
.since-info{
    display: flex;
    flex-direction: column;
}
.since-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
}
.since-desc{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #000;
    margin-top: .4rem;
}
.about-section-2{
    width: 100%;
    padding-top: 108%;
    background-image: url('../images/about/about-bg-2.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.master-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 28.1%;
    position: absolute;
    top: 20.5%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.master-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
}
.master-desc{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #000;
    margin-top: .4rem;
}
.master-img-1{
    display: flex;
    width: 31.8%;
    position: absolute;
    top: 42.3%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.master-img-1 img{
    width: 100%;
    height: auto;
}
.master-img-1 img:nth-child(1){
    display: block;
}
.master-img-1 img:nth-child(2){
    display: none;
}
.master-img-2{
    display: flex;
    width: 31.8%;
    position: absolute;
    top: 69.3%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.master-img-2 img{
    width: 100%;
    height: auto;
}
.master-img-2 img:nth-child(1){
    display: none;
}
.master-img-2 img:nth-child(2){
    display: block;
}
.master-img-3{
    display: flex;
    width: 37.5%;
    position: absolute;
    top: 15.6%;
    left: 50%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.master-img-3 img{
    width: 100%;
    height: auto;
}
.master-img-3 img:nth-child(1){
    display: block;
}
.master-img-3 img:nth-child(2){
    display: none;
}
.master-img-4{
    display: flex;
    width: 37.5%;
    position: absolute;
    top: 57.4%;
    left: 50%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.master-img-4 img{
    width: 100%;
    height: auto;
}
.master-img-4 img:nth-child(1){
    display: block;
}
.master-img-4 img:nth-child(2){
    display: none;
}
.about-section-3{
    width: 100%;
    padding-top: 118%;
    background-image: url('../images/about/about-bg-3.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.sec-img-1{
    display: flex;
    width: 17.8%;
    position: absolute;
    top: 44.3%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.sec-img-1 img{
    width: 100%;
    height: auto;
}
.sec-img-2{
    display: flex;
    width: 17.8%;
    position: absolute;
    top: 48.7%;
    left: 31.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.sec-img-2 img{
    width: 100%;
    height: auto;
}
.sec-img-3{
    display: flex;
    width: 17.8%;
    position: absolute;
    top: 44.3%;
    left: 50.6%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.sec-img-3 img{
    width: 100%;
    height: auto;
}
.sec-img-4{
    display: flex;
    width: 17.8%;
    position: absolute;
    top: 48.7%;
    left: 69.6%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.sec-img-4 img{
    width: 100%;
    height: auto;
}
.sec-img-5{
    display: flex;
    width: 17.8%;
    position: absolute;
    top: 82.4%;
    left: 50%;
}
.sec-img-5 img{
    width: 100%;
    height: auto;
}
.about-section-4{
    width: 100%;
    padding-top: 104%;
    background-image: url('../images/about/about-bg-4.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.dedi-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 38.6%;
    position: absolute;
    top: 50.5%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.dedi-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
}
.dedi-desc{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #000;
    margin-top: .4rem;
}
.dedi-img-1{
    display: flex;
    width: 32.1%;
    position: absolute;
    top: 55.8%;
    left: 55.3%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.dedi-img-1 img{
    width: 100%;
    height: auto;
}
.about-section-5{
    width: 100%;
    padding-top: 229%;
    background-image: url('../images/about/about-bg-5.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.work-list{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 75%;
    position: absolute;
    top: 4.2%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    grid-gap: 3%;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.work-list li{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.work-list li i{
    display: flex;
    width: 24.5%;
}
.work-list li i img{
    width: 100%;
    height: auto;
}
.work-list li h2{
    font-size: .32rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
    line-height: .32rem;
    margin-top: .24rem;
}
.work-list li p{
    font-size: .22rem;
    font-family: 'Manrope-Medium', Arial;
    color: #000;
    line-height: .4rem;
    text-align: center;
    margin-top: .32rem;
}
.work-img-1{
    display: flex;
    width: 75%;
    position: absolute;
    top: 14.9%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.work-img-1 img{
    width: 100%;
    height: auto;
}
.work-img-2{
    display: flex;
    width: 75%;
    position: absolute;
    top: 32.2%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.work-img-2 img{
    width: 100%;
    height: auto;
}
.work-img-3{
    display: flex;
    width: 75%;
    position: absolute;
    top: 54.8%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.work-img-3 img{
    width: 100%;
    height: auto;
}
.work-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75%;
    position: absolute;
    top: 69.9%;
    left: 50%;
    transform: translateX(-50%) translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.work-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
}
.work-desc{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #000;
    margin-top: .4rem;

}
.about-section-6{
    width: 100%;
    background-color: #FAF8F5;
    padding: .62rem 0 .95rem;
}
.certif-title{
    width: 75%;
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    line-height: 1.2rem;
    text-align: center;
    margin: 0 auto;
}
.certif-desc{
    width: 75%;
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-Medium', Arial;
    color: #000;
    margin: .2rem auto 0;
}
.certif-img{
    display: flex;
    width: 71.3%;
    margin: .4rem auto 0;
}
.certif-img img{
    width: 100%;
    height: auto;
}
.certif-img img:nth-child(1){
    display: block;
}
.certif-img img:nth-child(2){
    display: none;
}
.about-section-7{
    width: 100%;
    padding-top: 34.8%;
    background-image: url('../images/about/about-bg-7.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.markets-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 44.8%;
    position: absolute;
    top: 20%;
    left: 12.5%;
    transform: translateY(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.markets-title{
    font-size: .48rem;
    font-family: 'Manrope-SemiBold', Arial;
    color: #000;
}
.markets-desc{
    font-size: .28rem;
    line-height: .48rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #000;
    margin-top: .4rem;
}
.markets-img{
    display: none;
}

@media screen and (max-width: 767px) {
    .about-section-1{
        width: 100%;
        padding-top: 180%;
        background-image: url('../images/about/about-bg-m-1.png');
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .about-us-box{
        display: flex;
        flex-direction: column;
        width: 87.2%;
        position: absolute;
        top: 6.7%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .about-us-l{
        flex: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-right: 0;
    }
    .about-icon{
        display: flex;
        width: .29rem;
        margin-right: .11rem;
    }
    .about-icon img{
        width: 100%;
        height: auto;
    }
    .about-title{
        font-size: .18rem;
        line-height: .24rem;
    }
    .about-us-r{
        width: 100%;
        margin-top: .2rem;
    }
    .about-us-r p{
        font-size: .12rem;
        line-height: .24rem;
    }
    .our-fd{
        width: 100%;
        font-size: .18rem;
        line-height: .24rem;
        top: 64%;
        left: 0;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .since-box{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 .24rem;
        position: absolute;
        top: 73.6%;
        left: 50%;
        transform: translateX(-50%) translateY(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .since-img{
        flex: none;
        display: flex;
        width: 53%;
        margin-right: 4.5%;
    }
    .since-img img{
        width: 100%;
        height: auto;
    }
    .since-info{
        display: flex;
        flex-direction: column;
    }
    .since-title{
        font-size: .14rem;
    }
    .since-desc{
        font-size: .12rem;
        line-height: .2rem;
        margin-top: .12rem;
    }
    .about-section-2{
        width: 100%;
        padding-top: 297%;
        background-image: url('../images/about/about-bg-m-2.png');
    }
    .master-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 63.2%;
        position: absolute;
        top: 8.8%;
        left: 12.5%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .master-title{
        font-size: .14rem;
    }
    .master-desc{
        font-size: .12rem;
        font-family: 'Manrope-Medium', Arial;
        line-height: .24rem;
        margin-top: .1rem;
    }
    .master-img-1{
        display: flex;
        width: 76.2%;
        position: absolute;
        top: 62.9%;
        left: 17.3%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .master-img-1 img:nth-child(1){
        display: none;
    }
    .master-img-1 img:nth-child(2){
        display: block;
    }
    .master-img-2{
        display: flex;
        width: 76.2%;
        position: absolute;
        top: 78.7%;
        left: 6.4%;
        transform: translateY(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .master-img-2 img{
        width: 100%;
        height: auto;
    }
    .master-img-3{
        display: flex;
        width: 76.2%;
        position: absolute;
        top: 22.3%;
        left: 17.3%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .master-img-3 img:nth-child(1){
        display: none;
    }
    .master-img-3 img:nth-child(2){
        display: block;
    }
    .master-img-4{
        display: flex;
        width: 76.2%;
        position: absolute;
        top: 43.5%;
        left: 6.4%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .master-img-4 img:nth-child(1){
        display: none;
    }
    .master-img-4 img:nth-child(2){
        display: block;
    }
    .about-section-3{
        width: 100%;
        padding-top: 187%;
        background-image: url('../images/about/about-bg-m-3.png');
    }
    .sec-img-1{
        display: flex;
        width: 41.3%;
        position: absolute;
        top: 29.3%;
        left: 6.4%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .sec-img-1 img{
        width: 100%;
        height: auto;
    }
    .sec-img-2{
        display: flex;
        width: 41.3%;
        position: absolute;
        top: 35.9%;
        left: 52%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .sec-img-2 img{
        width: 100%;
        height: auto;
    }
    .sec-img-3{
        display: flex;
        width: 41.3%;
        position: absolute;
        top: 50.3%;
        left: 6.4%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .sec-img-3 img{
        width: 100%;
        height: auto;
    }
    .sec-img-4{
        display: flex;
        width: 41.3%;
        position: absolute;
        top: 57%;
        left: 53%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .sec-img-4 img{
        width: 100%;
        height: auto;
    }
    .sec-img-5{
        display: flex;
        width: 17.8%;
        position: absolute;
        top: 82.4%;
        left: 50%;
    }
    .sec-img-5 img{
        width: 100%;
        height: auto;
    }
    .about-section-4{
        width: 100%;
        padding-top: 164%;
        background-image: url('../images/about/about-bg-m-4.png');
    }
    .dedi-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 3.27rem;
        position: absolute;
        top: 52.4%;
        left: 6.4%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .dedi-title{
        font-size: .14rem;
        line-height: .2rem;
        display: flex;
        width: .88rem;
    }
    .dedi-desc{
        font-size: .12rem;
        line-height: .24rem;
        font-family: 'Manrope-Medium', Arial;
        margin-top: .12rem;
    }
    .dedi-img-1{
        display: flex;
        width: 57.6%;
        position: absolute;
        top: 35.2%;
        left: 36%;
        transform: translateY(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .dedi-img-1 img{
        width: 100%;
        height: auto;
    }
    .about-section-5{
        width: 100%;
        padding-top: 322%;
        background-image: url('../images/about/about-bg-m-5.png');
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .work-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: flex-start;
        width: 3.1rem;
        grid-gap: .16rem .24rem;
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .work-list li i{
        display: flex;
        width: .32rem;
    }
    .work-list li i img{
        width: 100%;
        height: auto;
    }
    .work-list li h2{
        font-size: .16rem;
        font-family: 'Manrope-SemiBold', Arial;
        color: #000;
        line-height: .2rem;
        margin-top: 0;
        text-align: center;
    }
    .work-list li p{
        font-size: .1rem;
        font-family: 'Manrope-Medium', Arial;
        color: #000;
        line-height: .16rem;
        text-align: center;
        margin-top: .08rem;
    }
    .work-img-1{
        display: flex;
        width: 3.2rem;
        position: absolute;
        top: 26.7%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .work-img-1 img{
        width: 100%;
        height: auto;
    }
    .work-img-2{
        display: flex;
        width: 3.2rem;
        position: absolute;
        top: 40.7%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .work-img-2 img{
        width: 100%;
        height: auto;
    }
    .work-img-3{
        display: flex;
        width: 3.2rem;
        position: absolute;
        top: 58.9%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .work-img-3 img{
        width: 100%;
        height: auto;
    }
    .work-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 3.2rem;
        position: absolute;
        top: 70.4%;
        left: 50%;
        transform: translateX(-50%) translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .work-title{
        font-size: .14rem;
        line-height: .2rem;
    }
    .work-desc{
        font-size: .12rem;
        line-height: .24rem;
        font-family: 'Manrope-Medium', Arial;
        color: #000;
        margin-top: .16rem;

    }
    .about-section-6{
        width: 100%;
        background-color: #FAF8F5;
        padding: .24rem 0 .34rem;
    }
    .certif-title{
        width: 100%;
        font-size: .14rem;
        font-family: 'Manrope-SemiBold', Arial;
        line-height: .2rem;
        text-align: center;
        margin: 0 auto;
    }
    .certif-desc{
        width: 3.2rem;
        font-size: .12rem;
        line-height: .24rem;
        font-family: 'Manrope-Medium', Arial;
        color: #000;
        margin: .16rem auto 0;
    }
    .certif-img{
        display: flex;
        width: 3.2rem;
        margin: .16rem auto 0;
    }
    .certif-img img{
        width: 100%;
        height: auto;
    }
    .certif-img img:nth-child(1){
        display: none;
    }
    .certif-img img:nth-child(2){
        display: block;
    }
    .about-section-7{
        width: 100%;
        padding-top: 73.8%;
        background-image: url('../images/about/about-bg-m-7.png');
    }
    .markets-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 3.2rem;
        position: absolute;
        top: 12.6%;
        left: 6.4%;
        transform: translateY(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .markets-title{
        font-size: .14rem;
        line-height: .2rem;
        text-align: center;
    }
    .markets-desc{
        font-size: .12rem;
        line-height: .24rem;
        font-family: 'Manrope-Medium', Arial;
        color: #000;
        margin-top: .16rem;
    }
    .markets-img{
        display: flex;
    }
    .markets-img img{
        width: 100%;
        height: auto;
    }
}