@charset "utf-8";

#mkRecommend{overflow:hidden;position:relative;padding:130px 0 105px;background-image:url(./img/mk_recommend_bg.png);background-position:center bottom;background-repeat:no-repeat;background-size:cover}
#mkRecommend .inner{display:flex;flex-direction:column;justify-content:space-between;width:100%}
#mkRecommend .group-title{color:#fff !important}
#mkRecommend .group-cont .data{display:flex;align-items:flex-end}
#mkRecommend .group-cont .data-list{display:grid;grid-template-columns:repeat(4,1fr);place-items:center}
#mkRecommend .group-cont .data-list li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
#mkRecommend .group-cont .data-list .data{font-size:20px;font-weight:700;color:#fff}
#mkRecommend .group-cont .data-list .count{padding-right:8px;font-variant-numeric:tabular-nums;font-family:var(--outfit);font-size:60px;font-weight:700;line-height:100%}
#mkRecommend .group-cont .data-list h4{font-size:22px;font-weight:700;color:#aaa}

#mkRecommend .cont-wrap{display:flex;flex-direction:column;align-items:center;height:100%}
#mkRecommend .path-wrap{position:relative;width:100%;height:420px}
#mkRecommend .line{position:absolute;width:100%;margin-top:-12.5%;pointer-events:none}
#mkRecommend .line svg{display:block;width:100%;height:auto}

/* 반응형 [s] */
/* 풀스크린 */
@media (max-width:2200px){
#mkRecommend .line{margin-top:-11%}
}
@media (max-width:1900px){
#mkRecommend .path-wrap{height:24vw}
#mkRecommend .line{margin-top:-8%}
}
@media (max-width:1600px){
#mkRecommend .line{margin-top:-9%}
#mkRecommend .group-cont .data-list .count{font-size:54px}
}
@media (max-width:1400px){
#mkRecommend{padding:100px 0 90px}
#mkRecommend .path-wrap{height:23vw}

#mkRecommend .group-cont .data-list .count{font-size:46px}
#mkRecommend .group-cont .data-list .data{font-size:18px}
#mkRecommend .group-cont .data-list h4{font-size:20px}
}
@media (max-width:1200px){
#mkRecommend .group-cont .data-list .count{padding-right:4px;font-size:40px}
#mkRecommend .group-cont .data-list .data{font-size:16px}
#mkRecommend .group-cont .data-list h4{font-size:18px}
}
@media (max-width:1024px){
#mkRecommend{padding:80px 0 70px}
#mkRecommend .path-wrap{height:27vw}
#mkRecommend .line{margin-top:-7%}
#mkRecommend .group-cont .data-list .count{font-size:32px}
#mkRecommend .group-cont .data-list .data{font-size:15px}
#mkRecommend .group-cont .data-list h4{font-size:16px}
}
@media (max-width:768px){
#mkRecommend .inner{padding:0 20px}
#mkRecommend .path-wrap{height:30vw}
#mkRecommend .line{margin-top:-4%}
#mkRecommend .group-cont .data-list{grid-template-columns:repeat(2,1fr);gap:34px 0}
}
@media (max-width:590px){
#mkRecommend .group-title h3{white-space:normal !important}
}
@media (max-width:480px){
#mkRecommend{padding:60px 0 50px}
#mkRecommend .path-wrap{height:32vw}
#mkRecommend .group-cont .data-list{gap:22px 0}
#mkRecommend .group-cont .data-list li{gap:4px}
#mkRecommend .group-cont .data-list .count{font-size:28px}
#mkRecommend .group-cont .data-list .data{font-size:14px}
#mkRecommend .group-cont .data-list h4{font-size:15px}
}
@media (max-width:390px){
#mkRecommend{padding:60px 0 50px}
#mkRecommend .path-wrap{height:auto;margin-bottom:20px}
#mkRecommend .line{position:static;margin-top:0}
#mkRecommend .group-cont .data-list{grid-template-columns:repeat(1,1fr);gap:26px 0}
}
/* 반응형 [e] */