#yunassie-oem-module-03{


background:#ffffff;

padding:100px 30px;

font-family:

Arial,
Helvetica,
sans-serif;

overflow:hidden;


}



#yunassie-oem-module-03 *{

box-sizing:border-box;

}



.yo03-container{


max-width:1200px;

margin:auto;


}





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

标题

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


.yo03-title{


text-align:center;

margin-bottom:70px;


}




.yo03-tag{


font-size:10px;

letter-spacing:3px;

font-weight:700;

color:#52758b;


}



.yo03-title h2{


font-size:45px;

font-weight:400;

line-height:1.2;

margin:20px 0;


}



.yo03-title h2 span{


display:block;


background:

linear-gradient(
90deg,
#52758b,
#80738f,
#5f8778
);


-webkit-background-clip:text;

color:transparent;


animation:

yo03Color 6s infinite;


}




@keyframes yo03Color{


0%{

filter:hue-rotate(0deg);

}


50%{

filter:hue-rotate(30deg);

}


100%{

filter:hue-rotate(0deg);

}


}



.yo03-title p{


font-size:14px;

color:#666;

line-height:1.8;


}







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

流程区域

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


.yo03-process{


display:grid;

grid-template-columns:

repeat(5,1fr);

gap:25px;


}



.yo03-step{


text-align:center;

padding:25px 15px;

transition:.35s;


}



.yo03-step:hover{


transform:translateY(-10px);


}




.yo03-number{


width:50px;

height:50px;


margin:0 auto 20px;


border-radius:50%;


border:

1px solid #52758b;


display:flex;

align-items:center;

justify-content:center;


font-size:12px;

color:#52758b;


transition:.35s;


}



.yo03-step:hover .yo03-number{


background:#52758b;

color:white;

transform:scale(1.1);


}



.yo03-step h3{


font-size:17px;

margin-bottom:15px;


}



.yo03-step p{


font-size:12px;

color:#666;

line-height:1.8;


}






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

FAQ

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


.yo03-faq{


margin-top:100px;


padding:60px;


background:#f8fafb;


display:grid;


grid-template-columns:

1fr 1fr;


gap:60px;


}



.yo03-faq-left h2{


font-size:38px;

font-weight:400;


}



.yo03-faq-left h2 span{


display:block;

color:#52758b;


}



.yo03-faq-left p{


color:#666;

font-size:14px;

line-height:1.8;


}




.yo03-question{


border-bottom:

1px solid #ddd;


padding:18px 0;


font-size:14px;


display:flex;

justify-content:space-between;


cursor:pointer;


transition:.3s;


}



.yo03-question:hover{


color:#52758b;


}



.yo03-plus{


font-size:20px;

color:#52758b;


}






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

CTA

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


.yo03-cta{


margin-top:90px;


padding:60px 20px;


text-align:center;


background:

linear-gradient(
120deg,
#203c4d,
#75658e
);


color:white;


}



.yo03-cta h2{


font-size:35px;

font-weight:400;

margin-bottom:15px;


}



.yo03-cta p{


font-size:14px;

opacity:.85;


}



.yo03-buttons{


display:flex;

justify-content:center;

gap:20px;

margin-top:35px;


}



.yo03-btn{


padding:15px 35px;

font-size:11px;

font-weight:700;

letter-spacing:1px;

text-decoration:none;

transition:.35s;


}



.yo03-btn:hover{


transform:translateY(-5px);


}



.yo03-primary{


background:#5f8778;

color:white!important;


}



.yo03-secondary{


background:white;

color:#203c4d!important;


}







@media(max-width:900px){


.yo03-process{


grid-template-columns:

repeat(2,1fr);


}


.yo03-faq{


grid-template-columns:

1fr;


padding:35px;


}



}



@media(max-width:600px){


.yo03-process{


grid-template-columns:

1fr;


}



.yo03-buttons{


flex-direction:column;


}



}