/* =========================================================
YUNASSIE QUALITY CONTROL
仅作用于：
#yunassie-manufacturing
========================================================= */

#yunassie-manufacturing{

    /* =====================================================
    【主要颜色修改位置】
    ====================================================== */

    --ym-blue:#55798d;
    --ym-blue-dark:#385d72;
    --ym-blue-soft:#edf4f7;

    --ym-green:#6f8b7f;
    --ym-green-dark:#4f6c60;
    --ym-green-soft:#f0f5f2;

    --ym-coral:#c47c64;
    --ym-coral-dark:#9d5c47;
    --ym-coral-soft:#fbf1ed;

    --ym-pink:#b97786;
    --ym-pink-soft:#fbf3f5;

    --ym-dark:#202529;
    --ym-text:#687176;
    --ym-soft:#959ca0;
    --ym-line:#e7ebed;

    width:100%;

    max-width:1600px;

    margin:0 auto;

    overflow:hidden;

    background:#ffffff;

    color:var(--ym-dark);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


#yunassie-manufacturing *,
#yunassie-manufacturing *::before,
#yunassie-manufacturing *::after{

    box-sizing:border-box;

}


#yunassie-manufacturing a{

    text-decoration:none !important;

}


/* =========================================================
TOP
========================================================= */

#yunassie-manufacturing
.ym-top{

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    min-height:650px;

    background:#fff;

}


/* =========================================================
TOP LEFT
========================================================= */

#yunassie-manufacturing
.ym-hero-content{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        75px
        clamp(48px,7vw,110px);

    background:#fff;

}


/* 左侧动态彩线 */

#yunassie-manufacturing
.ym-hero-content::before{

    content:"";

    position:absolute;

    left:0;
    top:14%;

    width:2px;
    height:72%;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--ym-blue),
            var(--ym-coral),
            var(--ym-green),
            transparent
        );

    background-size:100% 220%;

    animation:
        ymSideFlow
        7s
        linear
        infinite;

}


/* =========================================================
EYEBROW
========================================================= */

#yunassie-manufacturing
.ym-eyebrow{

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:23px;

    color:var(--ym-blue-dark);

    font-size:10px;

    font-weight:700;

    letter-spacing:2.6px;

}


#yunassie-manufacturing
.ym-dot{

    position:relative;

    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;

    background:var(--ym-blue);

    animation:
        ymDotPulse
        2.4s
        ease-in-out
        infinite;

}


#yunassie-manufacturing
.ym-dot::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:
        1px solid
        rgba(85,121,141,.25);

    animation:
        ymDotRing
        2.4s
        ease-out
        infinite;

}


/* =========================================================
TOP TITLE
========================================================= */

#yunassie-manufacturing
.ym-hero-content h2{

    max-width:720px;

    margin:0;

    color:var(--ym-dark);

    font-size:
        clamp(
            42px,
            4.1vw,
            64px
        );

    line-height:1.06;

    letter-spacing:-2.2px;

    font-weight:500;

}


#yunassie-manufacturing
.ym-hero-content h2 span{

    display:block;

    margin-top:5px;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            var(--ym-blue-dark),
            var(--ym-blue),
            var(--ym-coral),
            var(--ym-green),
            var(--ym-blue-dark)
        );

    background-size:250% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        ymTitleFlow
        8s
        linear
        infinite;

}


/* =========================================================
TOP LEAD
========================================================= */

#yunassie-manufacturing
.ym-lead{

    max-width:660px;

    margin:
        28px 0 0;

    color:var(--ym-text);

    font-size:15px;

    line-height:1.82;

}


/* =========================================================
BUTTONS
========================================================= */

#yunassie-manufacturing
.ym-actions{

    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-top:31px;

}


#yunassie-manufacturing
.ym-btn{

    position:relative;

    min-height:52px;

    padding:
        0 24px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:15px;

    overflow:hidden;

    border-radius:5px;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.25px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


#yunassie-manufacturing
.ym-btn b{

    display:inline-block;

    font-size:16px;

    font-weight:400;

    animation:
        ymArrow
        1.4s
        ease-in-out
        infinite;

}


#yunassie-manufacturing
.ym-btn-primary{

    color:#fff !important;

    border:
        1px solid
        var(--ym-blue-dark);

    background:
        linear-gradient(
            110deg,
            #355d72,
            #55798d,
            #668679
        );

    background-size:190% 100%;

    animation:
        ymButtonGradient
        6s
        ease-in-out
        infinite alternate;

}


#yunassie-manufacturing
.ym-btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-70%;

    width:35%;
    height:100%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    animation:
        ymButtonShine
        4.6s
        ease-in-out
        infinite;

}


#yunassie-manufacturing
.ym-btn-secondary{

    color:var(--ym-dark) !important;

    background:#fff;

    border:
        1px solid
        #dce2e5;

}


#yunassie-manufacturing
.ym-btn:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 13px 28px
        rgba(35,45,50,.12);

}


/* =========================================================
MOQ JOURNEY
========================================================= */

#yunassie-manufacturing
.ym-moq{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:42px;

}


#yunassie-manufacturing
.ym-moq-item{

    display:flex;

    flex-direction:column;

    gap:4px;

}


#yunassie-manufacturing
.ym-moq-item strong{

    color:var(--ym-dark);

    font-size:17px;

    font-weight:600;

}


#yunassie-manufacturing
.ym-moq-item span{

    font-size:8px;

    font-weight:700;

    letter-spacing:1.25px;

}


#yunassie-manufacturing
.ym-moq-blue span{

    color:var(--ym-blue);

}


#yunassie-manufacturing
.ym-moq-coral span{

    color:var(--ym-coral);

}


#yunassie-manufacturing
.ym-moq-green span{

    color:var(--ym-green);

}


#yunassie-manufacturing
.ym-moq-divider{

    width:1px;
    height:29px;

    overflow:hidden;

    background:#dde2e4;

}


/* =========================================================
TOP IMAGE
========================================================= */

#yunassie-manufacturing
.ym-hero-image{

    position:relative;

    min-height:650px;

    overflow:hidden;

    background:#f2f4f4;

}


#yunassie-manufacturing
.ym-hero-image > img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


#yunassie-manufacturing
.ym-hero-image:hover > img{

    transform:
        scale(1.04);

}


#yunassie-manufacturing
.ym-hero-image::after{

    content:"";

    position:absolute;

    z-index:1;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(22,34,40,.02),
            transparent 52%,
            rgba(18,31,37,.11)
        );

}


/* =========================================================
IMAGE TAGS
========================================================= */

#yunassie-manufacturing
.ym-quality-tags{

    position:absolute;

    z-index:5;

    top:30px;
    right:30px;

    display:flex;

    gap:7px;

}


#yunassie-manufacturing
.ym-quality-tags span{

    padding:
        7px 9px;

    border:
        1px solid
        rgba(255,255,255,.72);

    background:
        rgba(255,255,255,.89);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.05);

    font-size:7px;

    font-weight:700;

    letter-spacing:1px;

    transition:
        transform .3s ease;

}


#yunassie-manufacturing
.ym-quality-tags span:nth-child(1){

    color:var(--ym-blue-dark);

}


#yunassie-manufacturing
.ym-quality-tags span:nth-child(2){

    color:var(--ym-coral-dark);

}


#yunassie-manufacturing
.ym-quality-tags span:nth-child(3){

    color:var(--ym-green-dark);

}


#yunassie-manufacturing
.ym-quality-tags span:hover{

    transform:
        translateY(-4px);

}


/* =========================================================
SUPPORT CARD
========================================================= */

#yunassie-manufacturing
.ym-capability-card{

    position:absolute;

    z-index:6;

    left:37px;
    bottom:31px;

    width:
        min(
            345px,
            calc(100% - 74px)
        );

    padding:
        22px 23px;

    border:
        1px solid
        rgba(255,255,255,.76);

    background:
        rgba(255,255,255,.94);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 18px 50px
        rgba(23,37,42,.14);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


#yunassie-manufacturing
.ym-hero-image:hover
.ym-capability-card{

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 58px
        rgba(23,37,42,.18);

}


#yunassie-manufacturing
.ym-capability-title{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:13px;

    color:var(--ym-blue-dark);

    font-size:8px;

    font-weight:700;

    letter-spacing:1.6px;

}


#yunassie-manufacturing
.ym-capability-title i{

    width:22px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--ym-blue),
            var(--ym-green)
        );

    animation:
        ymCapabilityLine
        2.8s
        ease-in-out
        infinite;

}


#yunassie-manufacturing
.ym-capability-card ul{

    list-style:none;

    margin:0;

    padding:0;

}


#yunassie-manufacturing
.ym-capability-card li{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:9px;

    color:#4e5559;

    font-size:11px;

    transition:
        transform .25s ease;

}


#yunassie-manufacturing
.ym-capability-card li:hover{

    transform:
        translateX(5px);

}


#yunassie-manufacturing
.ym-capability-card li span{

    width:16px;
    height:16px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex:0 0 16px;

    border-radius:50%;

    color:var(--ym-green-dark);

    border:
        1px solid
        var(--ym-green);

    font-size:8px;

}


/* =========================================================
BOTTOM
========================================================= */

#yunassie-manufacturing
.ym-bottom{

    display:grid;

    grid-template-columns:
        1.02fr .98fr;

    min-height:620px;

    border-top:
        1px solid
        var(--ym-line);

}


/* =========================================================
BOTTOM VISUAL / VIDEO
========================================================= */

#yunassie-manufacturing
.ym-video{

    position:relative;

    min-height:620px;

    overflow:hidden;

    background:#eee;

}


#yunassie-manufacturing
.ym-video > img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


#yunassie-manufacturing
.ym-video:hover > img{

    transform:
        scale(1.04);

}


#yunassie-manufacturing
.ym-video::after{

    content:"";

    position:absolute;

    z-index:1;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(20,30,35,.02),
            rgba(20,30,35,.18)
        );

}


/* =========================================================
VIDEO LABEL
========================================================= */

#yunassie-manufacturing
.ym-video-label{

    position:absolute;

    z-index:6;

    left:34px;
    bottom:31px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        13px 17px;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.09);

}


#yunassie-manufacturing
.ym-video-line{

    width:2px;
    height:36px;

    background:
        linear-gradient(
            180deg,
            var(--ym-blue),
            var(--ym-green)
        );

}


#yunassie-manufacturing
.ym-video-label div{

    display:flex;

    flex-direction:column;

    gap:4px;

}


#yunassie-manufacturing
.ym-video-label small{

    color:var(--ym-blue);

    font-size:7px;

    font-weight:700;

    letter-spacing:1.5px;

}


#yunassie-manufacturing
.ym-video-label strong{

    color:var(--ym-dark);

    font-size:11px;

    font-weight:600;

}


/* =========================================================
BOTTOM RIGHT
========================================================= */

#yunassie-manufacturing
.ym-profile{

    position:relative;

    display:flex;

    align-items:center;

    background:#ffffff;

}


#yunassie-manufacturing
.ym-profile::before{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:130px;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--ym-blue),
            var(--ym-coral),
            var(--ym-green)
        );

    background-size:200% 100%;

    animation:
        ymProfileFlow
        6s
        linear
        infinite;

}


#yunassie-manufacturing
.ym-profile-inner{

    width:100%;

    padding:
        60px
        clamp(40px,5vw,75px);

}


/* =========================================================
BOTTOM SMALL TITLE
========================================================= */

#yunassie-manufacturing
.ym-small-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:17px;

    color:var(--ym-green-dark);

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


#yunassie-manufacturing
.ym-small-title span{

    width:25px;
    height:1px;

    background:var(--ym-green);

    animation:
        ymSmallLine
        2.8s
        ease-in-out
        infinite;

}


/* =========================================================
BOTTOM TITLE
========================================================= */

#yunassie-manufacturing
.ym-profile h2{

    max-width:570px;

    margin:
        0 0
        24px;

    color:var(--ym-dark);

    font-size:
        clamp(
            34px,
            3.3vw,
            49px
        );

    line-height:1.1;

    letter-spacing:-1.4px;

    font-weight:400;

}


#yunassie-manufacturing
.ym-profile h2 span{

    display:block;

    margin-top:5px;

    color:transparent;

    background:
        linear-gradient(
            90deg,
            var(--ym-blue),
            var(--ym-green),
            var(--ym-coral),
            var(--ym-blue)
        );

    background-size:220% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
        ymBottomTitle
        8s
        linear
        infinite;

}


/* =========================================================
BOTTOM TEXT
========================================================= */

#yunassie-manufacturing
.ym-profile p{

    max-width:560px;

    margin:
        0 0
        15px;

    color:var(--ym-text);

    font-size:14px;

    line-height:1.8;

}


/* =========================================================
SUPPLY CHAIN
========================================================= */

#yunassie-manufacturing
.ym-chain{

    position:relative;

    margin-top:30px;

    padding:
        22px 0;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:9px;

    border-top:
        1px solid
        #e8ebed;

    border-bottom:
        1px solid
        #e8ebed;

}


/* 动态线 */

#yunassie-manufacturing
.ym-chain::before{

    content:"";

    position:absolute;

    top:-1px;
    left:-30%;

    width:30%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ym-blue),
            var(--ym-coral),
            var(--ym-green),
            transparent
        );

    animation:
        ymChainFlow
        4s
        linear
        infinite;

}


#yunassie-manufacturing
.ym-chain-item{

    position:relative;

    min-height:61px;

    padding:
        10px 10px
        10px 15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border-left:
        2px solid
        #e5e9eb;

    transition:
        transform .3s ease,
        border-color .3s ease;

}


#yunassie-manufacturing
.ym-chain-item:nth-child(1),
#yunassie-manufacturing
.ym-chain-item:nth-child(4){

    border-color:var(--ym-blue);

}


#yunassie-manufacturing
.ym-chain-item:nth-child(2),
#yunassie-manufacturing
.ym-chain-item:nth-child(5){

    border-color:var(--ym-coral);

}


#yunassie-manufacturing
.ym-chain-item:nth-child(3),
#yunassie-manufacturing
.ym-chain-item:nth-child(6){

    border-color:var(--ym-green);

}


#yunassie-manufacturing
.ym-chain-item:hover{

    transform:
        translateX(5px);

}


#yunassie-manufacturing
.ym-chain-item small{

    margin-bottom:4px;

    color:#a0a5a8;

    font-size:7px;

    font-weight:700;

    letter-spacing:1px;

}


#yunassie-manufacturing
.ym-chain-item strong{

    color:#34383b;

    font-size:11px;

    font-weight:600;

}


/* =========================================================
STATS
========================================================= */

#yunassie-manufacturing
.ym-stats{

    display:flex;

    flex-wrap:wrap;

    gap:35px;

    margin-top:29px;

}


#yunassie-manufacturing
.ym-stat{

    display:flex;

    flex-direction:column;

}


#yunassie-manufacturing
.ym-stat strong{

    font-size:29px;

    font-weight:500;

    line-height:1;

    transition:
        transform .3s ease;

}


#yunassie-manufacturing
.ym-stat:hover strong{

    transform:
        translateY(-4px);

}


#yunassie-manufacturing
.ym-stat-blue strong{

    color:var(--ym-blue);

}


#yunassie-manufacturing
.ym-stat-coral strong{

    color:var(--ym-coral);

}


#yunassie-manufacturing
.ym-stat-green strong{

    color:var(--ym-green);

}


#yunassie-manufacturing
.ym-stat strong span{

    font-size:.55em;

}


#yunassie-manufacturing
.ym-stat small{

    margin-top:7px;

    color:#555b5f;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.15px;

}


/* =========================================================
BOTTOM CTA
========================================================= */

#yunassie-manufacturing
.ym-profile-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:15px;

    margin-top:32px;

    padding-bottom:8px;

    color:
        var(--ym-blue-dark) !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.2px;

}


#yunassie-manufacturing
.ym-profile-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--ym-blue),
            var(--ym-coral),
            var(--ym-green)
        );

    transform:
        scaleX(.35);

    transform-origin:
        left center;

    transition:
        transform .4s ease;

}


#yunassie-manufacturing
.ym-profile-link:hover::after{

    transform:
        scaleX(1);

}


#yunassie-manufacturing
.ym-profile-link span{

    font-size:17px;

    animation:
        ymArrow
        1.4s
        ease-in-out
        infinite;

}


/* =========================================================
ANIMATIONS
【动态速度修改位置】
========================================================= */

@keyframes ymSideFlow{

    from{
        background-position:
            center 0%;
    }

    to{
        background-position:
            center 220%;
    }

}


@keyframes ymDotPulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }

}


@keyframes ymDotRing{

    0%{
        transform:scale(.7);
        opacity:1;
    }

    100%{
        transform:scale(1.7);
        opacity:0;
    }

}


@keyframes ymTitleFlow{

    from{
        background-position:
            0% center;
    }

    to{
        background-position:
            250% center;
    }

}


@keyframes ymButtonGradient{

    from{
        background-position:
            0% center;
    }

    to{
        background-position:
            100% center;
    }

}


@keyframes ymButtonShine{

    0%,35%{
        left:-70%;
    }

    72%,100%{
        left:135%;
    }

}


@keyframes ymArrow{

    0%,100%{
        transform:
            translateX(0);
    }

    50%{
        transform:
            translateX(6px);
    }

}


@keyframes ymCapabilityLine{

    0%,100%{
        width:18px;
    }

    50%{
        width:32px;
    }

}




@keyframes ymProfileFlow{

    from{
        background-position:
            0% center;
    }

    to{
        background-position:
            200% center;
    }

}


@keyframes ymSmallLine{

    0%,100%{
        width:20px;
    }

    50%{
        width:36px;
    }

}


@keyframes ymBottomTitle{

    from{
        background-position:
            0% center;
    }

    to{
        background-position:
            220% center;
    }

}


@keyframes ymChainFlow{

    from{
        left:-30%;
    }

    to{
        left:105%;
    }

}


/* =========================================================
TABLET
========================================================= */

@media(max-width:1000px){

    #yunassie-manufacturing
    .ym-top{

        grid-template-columns:
            1fr 1fr;

    }


    #yunassie-manufacturing
    .ym-hero-content{

        padding:
            60px 40px;

    }


    #yunassie-manufacturing
    .ym-bottom{

        grid-template-columns:
            1fr 1fr;

    }


    #yunassie-manufacturing
    .ym-profile-inner{

        padding:
            50px 37px;

    }


    #yunassie-manufacturing
    .ym-chain{

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:720px){

    #yunassie-manufacturing
    .ym-top{

        display:flex;

        flex-direction:column;

    }


    #yunassie-manufacturing
    .ym-hero-content{

        padding:
            54px 20px
            48px;

    }


    #yunassie-manufacturing
    .ym-hero-content::before{

        display:none;

    }


    #yunassie-manufacturing
    .ym-hero-content h2{

        font-size:38px;

        line-height:1.09;

        letter-spacing:-1.25px;

    }


    #yunassie-manufacturing
    .ym-lead{

        font-size:14px;

    }


    #yunassie-manufacturing
    .ym-actions{

        display:grid;

        grid-template-columns:1fr;

    }


    #yunassie-manufacturing
    .ym-btn{

        width:100%;

        justify-content:space-between;

    }


    #yunassie-manufacturing
    .ym-moq{

        gap:13px;

        justify-content:space-between;

    }


    #yunassie-manufacturing
    .ym-moq-item strong{

        font-size:14px;

    }


    #yunassie-manufacturing
    .ym-moq-item span{

        font-size:6px;

    }


    #yunassie-manufacturing
    .ym-hero-image{

        min-height:470px;

    }


    #yunassie-manufacturing
    .ym-quality-tags{

        top:17px;
        right:17px;

    }


    #yunassie-manufacturing
    .ym-quality-tags span{

        padding:6px;

        font-size:6px;

    }


    #yunassie-manufacturing
    .ym-capability-card{

        left:18px;
        bottom:18px;

        width:
            calc(100% - 36px);

    }


    #yunassie-manufacturing
    .ym-bottom{

        display:flex;

        flex-direction:column;

    }


    #yunassie-manufacturing
    .ym-video{

        min-height:430px;

    }


    #yunassie-manufacturing
    .ym-video-label{

        left:18px;
        bottom:18px;

    }


    #yunassie-manufacturing
    .ym-profile-inner{

        padding:
            50px 20px
            58px;

    }


    #yunassie-manufacturing
    .ym-profile h2{

        font-size:34px;

    }


    #yunassie-manufacturing
    .ym-profile p{

        font-size:13px;

    }


    #yunassie-manufacturing
    .ym-chain{

        grid-template-columns:1fr 1fr;

    }


    #yunassie-manufacturing
    .ym-stats{

        gap:24px;

    }

}


@media(prefers-reduced-motion:reduce){

    #yunassie-manufacturing *,
    #yunassie-manufacturing *::before,
    #yunassie-manufacturing *::after{

        animation:none !important;

        transition-duration:.2s !important;

    }

}