/**
 * @author: Jicc(103698177)
 * @date: 2026-06-12
 * @phone: 13790890981
 */
.products-wrapper{}
.products-container{
    width: 100%;
    padding-top: 87.4%;
    background-image: url('../images/products/products-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.products-title{
    font-size: 1rem;
    font-family: 'Manrope-ExtraLight', Arial;
    color: #fff;
    line-height: 1.2rem;
    text-align: center;
    position: absolute;
    top: 7.4%;
    left: 50%;
    transform: translateX(-50%) translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-txt{
    font-size: .24rem;
    font-family: 'Manrope-Medium', Arial;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
}
.products-img-1{
    width: 17.9%;
    height: auto;
    position: absolute;
    top: 40.6%;
    left: 5.3%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-1 img{
    width: 100%;
    height: auto;
}
.txt-1{
    top: 72.1%;
    left: 14.2%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-2{
    width: 30.6%;
    height: auto;
    position: absolute;
    top: 25.3%;
    left: 24.4%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-2 img{
    width: 100%;
    height: auto;
}
.txt-2{
    top: 53.4%;
    left: 39.9%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-3{
    width: 21.2%;
    height: auto;
    position: absolute;
    top: 60.8%;
    left: 42.2%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-3 img{
    width: 100%;
    height: auto;
}
.txt-3{
    top: 85.5%;
    left: 47.8%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-4{
    width: 14.7%;
    height: auto;
    position: absolute;
    top: 41.9%;
    left: 67.6%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-4 img{
    width: 100%;
    height: auto;
}
.txt-4{
    top: 62.8%;
    left: 78.9%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-5{
    width: 15.78%;
    height: auto;
    position: absolute;
    top: 73.6%;
    left: 75.4%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-img-5 img{
    width: 100%;
    height: auto;
}
.txt-5{
    top: 92.7%;
    left: 77.2%;
    transform: translateX(.6rem);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.products-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}
.products-banner img{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .products-container{
        width: 100%;
        padding-top: 106%;
        background-image: url('../images/products/products-bg.png');
    }
    .products-title{
        font-size: .22rem;
        line-height: .28rem;
        top: 7.4%;
        left: 50%;
        transform: translateX(-50%) translateX(.3rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-txt{
        font-size: .08rem;
        font-family: 'Manrope-Medium', Arial;
        color: rgba(255, 255, 255, 0.6);
        position: absolute;
    }
    .products-img-1{
        width: 21.8%;
        height: auto;
        position: absolute;
        top: 40.6%;
        left: 5.6%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-1 img{
        width: 100%;
        height: auto;
    }
    .txt-1{
        top: 72.1%;
        left: 14.2%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-2{
        width: 37%;
        height: auto;
        position: absolute;
        top: 25.3%;
        left: 24.4%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-2 img{
        width: 100%;
        height: auto;
    }
    .txt-2{
        top: 53.4%;
        left: 30.4%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-3{
        width: 25.8%;
        height: auto;
        position: absolute;
        top: 60.8%;
        left: 42.2%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-3 img{
        width: 100%;
        height: auto;
    }
    .txt-3{
        top: 85.5%;
        left: 47.8%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-4{
        width: 17.8%;
        height: auto;
        position: absolute;
        top: 41.9%;
        left: 67.6%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-4 img{
        width: 100%;
        height: auto;
    }
    .txt-4{
        top: 62.8%;
        left: 78.9%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-5{
        width: 19.2%;
        height: auto;
        position: absolute;
        top: 73.6%;
        left: 75.4%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-img-5 img{
        width: 100%;
        height: auto;
    }
    .txt-5{
        top: 92.7%;
        left: 77.2%;
        transform: translateX(.6rem);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
    }
    .products-banner{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .products-banner img{
        width: 100%;
        height: auto;
    }
}