@charset "utf-8";

#mkMake{max-width:var(--mainsize);margin:150px auto}
#mkMake *{word-break:keep-all}
#mkMake .mb_tit2{margin-bottom:100px;font-size:35px;font-weight:700;color:#111}
#mkMake .step ul{display:grid;grid-template-columns:repeat(3,1fr);row-gap:50px}
#mkMake .step .num{position:relative}
#mkMake .step .num:before{position:absolute;content:'';z-index:-1;top:50%;width:100%;height:1px;border:1px solid #e1e1e1;transform:translateY(-50%)}
#mkMake .step .num:after{position:absolute;content:'';z-index:-1;top:50%;width:0;height:1px;border:1px solid var(--primary);opacity:0;transform:translateY(-50%);transition:width .5s}
#mkMake .step .num span{display:flex;justify-content:center;align-items:center;width:55px;height:55px;margin:0 auto;border-radius:50px;color:#fff;background:#aaa;transition:all .3s}
#mkMake .step .cont{display:flex;align-items:flex-start;gap:50px;padding:50px 20px}
#mkMake .step .cont h3{margin-bottom:20px;font-size:22px;font-weight:700;line-height:1.45;color:#111}
#mkMake .step a{display:inline-flex;align-items:center;margin-top:30px;padding:10px 20px;gap:20px;border-radius:50px;color:#aaa;background:#f2f2f2;transition:all .3s}
#mkMake .step a svg{width:18px}

@media(hover:hover){
#mkMake .step ul li:hover .num span{background:var(--primary)}
#mkMake .step ul li:hover .num:after{width:100%;opacity:1}
#mkMake .step a:hover{font-weight:600;color:#111}
}
@media(max-width:1400px){
#mkMake{margin:150px 15px} 
}
@media(max-width:1200px){
#mkMake .step ul{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
#mkMake{margin:100px 15px}
#mkMake .mb_tit2{margin-bottom:45px;font-size:30px}
#mkMake .step dt{margin-bottom:10px;font-size:20px}
}
@media(max-width:768px){
#mkMake{margin:65px 15px 30px}
#mkMake .mb_tit2{margin-bottom:60px;font-size:25px;text-align:center}
#mkMake .step .cont{align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center}
#mkMake .step .cont img{width:65px}
#mkMake .step .cont h3{margin-bottom:10px;font-size:18px}
#mkMake .step ul{gap:0}
#mkMake .step a{margin-top:15px}
}
@media(max-width:480px){
#mkMake .mb_tit2{margin-bottom:40px;font-size:24px}
#mkMake .step dt{font-size:16px}
#mkMake .step .cont{padding:35px 10px 50px}
#mkMake .step .cont img{width:60px}
#mkMake .step .num span{width:45px;height:45px}
#mkMake .step a{gap:10px;padding:6px 10px 6px 15px;font-size:13px}
#mkMake .step a svg{width:16px;height:16px}
}
@media(max-width:380px){
#mkMake{margin:65px 15px 0}
#mkMake .mb_tit2{font-size:20px}
#mkMake .step ul{grid-template-columns:repeat(1,1fr)}
}