#yunassie-oem-module-01{

--blue:#426f8e;
--green:#4f8577;
--purple:#75658e;
--dark:#182027;
--text:#687178;

background:#ffffff;

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

padding:90px 0;

overflow:hidden;

}



#yunassie-oem-module-01 *{

box-sizing:border-box;

}



#yunassie-oem-module-01 .yo-wrap{

width:min(1240px,calc(100% - 50px));

margin:auto;

}



/* =========================

Hero

========================= */


#yunassie-oem-module-01 .yo-hero{


display:grid;

grid-template-columns:
1fr 1fr;

gap:70px;

align-items:center;


}




#yunassie-oem-module-01 .yo-tag{


font-size:11px;

letter-spacing:3px;

font-weight:800;

color:var(--blue);

margin-bottom:22px;


}




#yunassie-oem-module-01 h1{


font-size:
clamp(42px,5vw,70px);

line-height:1.05;

letter-spacing:-3px;

font-weight:600;

margin:0;

color:var(--dark);


}




#yunassie-oem-module-01 h1 span{


display:block;

margin-top:10px;

background:

linear-gradient(
90deg,
#426f8e,
#75658e,
#4f8577
);


-webkit-background-clip:text;

color:transparent;


background-size:200%;


animation:
yoGradient 6s linear infinite;


}




@keyframes yoGradient{


0%{

background-position:0%;

}


100%{

background-position:200%;

}


}




#yunassie-oem-module-01 .yo-desc{


margin-top:28px;

max-width:580px;

font-size:16px;

line-height:1.8;

color:var(--text);


}




/* 按钮 */


#yunassie-oem-module-01 .yo-buttons{


display:flex;

gap:15px;

margin-top:35px;

flex-wrap:wrap;


}



#yunassie-oem-module-01 .yo-btn{


height:50px;

padding:0 30px;

display:inline-flex;

align-items:center;

justify-content:center;

font-size:11px;

font-weight:800;

letter-spacing:1px;

text-decoration:none;

transition:.35s;


}




#yunassie-oem-module-01 .yo-primary{


background:var(--blue);

color:#fff;


}



#yunassie-oem-module-01 .yo-secondary{


background:var(--purple);

color:#fff;


}



#yunassie-oem-module-01 .yo-btn:hover{


transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(0,0,0,.15);


}






/* 图片 */


#yunassie-oem-module-01 .yo-photo{


position:relative;


}



#yunassie-oem-module-01 .yo-photo img{


width:100%;

border-radius:22px;

box-shadow:
0 25px 60px rgba(0,0,0,.12);


animation:
yoFloat 5s ease-in-out infinite;


}



@keyframes yoFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}




/* =========================

MOQ

========================= */



#yunassie-oem-module-01 .yo-moq-title{


text-align:center;

margin:100px 0 45px;


}



#yunassie-oem-module-01 .yo-moq-title h2{


font-size:42px;

font-weight:400;

margin:0 0 15px;


}




#yunassie-oem-module-01 .yo-moq-title p{


color:var(--text);

font-size:14px;


}





#yunassie-oem-module-01 .yo-cards{


display:grid;

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

gap:25px;


}




#yunassie-oem-module-01 .yo-card{


border:1px solid #e8ecef;

padding:35px 30px;

background:white;

transition:.35s;

position:relative;

overflow:hidden;


}



#yunassie-oem-module-01 .yo-card:hover{


transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(0,0,0,.08);


}




#yunassie-oem-module-01 .yo-card-number{


font-size:11px;

font-weight:800;

letter-spacing:2px;

color:var(--blue);


}



#yunassie-oem-module-01 .yo-card h3{


font-size:28px;

margin:15px 0;


}



#yunassie-oem-module-01 .yo-card p{


height:70px;

font-size:13px;

line-height:1.7;

color:var(--text);


}




#yunassie-oem-module-01 .yo-card a{


display:inline-flex;

margin-top:20px;

padding:12px 25px;

color:white;

font-size:10px;

font-weight:800;

letter-spacing:1px;

text-decoration:none;


}



.yo-sample{


background:var(--purple);


}



.yo-private{


background:var(--green);


}



.yo-oem{


background:var(--blue);


}



@media(max-width:900px){


#yunassie-oem-module-01 .yo-hero{


grid-template-columns:1fr;


}



#yunassie-oem-module-01 .yo-cards{


grid-template-columns:1fr;


}


}