@charset "utf-8";
#mkService{padding:194px 0 294px}
#mkService *{word-break:keep-all}
#mkService .group-title{padding-bottom:100px}

#mkService .group-cont ul{display:grid;grid-template-columns:repeat(2,minmax(0, 437px));justify-content:center;gap:21px}
#mkService .group-cont .link-service{overflow:hidden;position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:40px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1);border-radius:13px;transition:color 0.2s}
#mkService .group-cont .link-service::before{opacity:0;z-index:-1;position:absolute;content:'';inset:0%;width:100%;height:100%;background:linear-gradient(to top, #07346e 0%, #1698d9 100%);transition:opacity 0.2s}
#mkService .group-cont .link-service h4{padding-bottom:40px;font-size:20px;font-weight:700;font-family:var(--outfit);text-align:center}
#mkService .group-cont .link-service h5{padding-bottom:15px;font-size:22px;font-weight:700;text-align:center}
#mkService .group-cont .link-service p.desc{padding-bottom:30px;font-size:16px;font-weight:500;text-align:center;color:#aaa;transition:color 0.2s}
#mkService .group-cont .link-service strong{padding-bottom:16px;font-size:40px;text-align:center}
#mkService .group-cont .link-service .btn--primary{margin-bottom:50px;height:53px;background-color:#fff;color:var(--primary);border-color:var(--primary);font-weight:700}
#mkService .group-cont .link-service .info{display:flex;flex-direction:column;gap:34px}
#mkService .group-cont .link-service .info dl{display:flex;flex-direction:column;gap:10px}
#mkService .group-cont .link-service .info dt{font-size:16px;font-weight:700}
#mkService .group-cont .link-service .info dd{font-size:16px;line-height:1.6;color:#777;transition:color 0.2s}
#mkService .group-cont .link-service .info dd p span{position:relative;padding-left:10px}
#mkService .group-cont .link-service .info dd p span::before{position:absolute;top:7px;left:0;content:'';width:3px;height:3px;margin-right:4px;border-radius:10px;background-color:#aaa;transition:background-color 0.2s}

/* active 상태 */
#mkService .group-cont .link-service.active{color:#fff}
#mkService .group-cont .link-service.active::before{opacity:1}
#mkService .group-cont .link-service.active p.desc{color:rgba(255,255,255,0.5)}
#mkService .group-cont .link-service.active .info dd{color:#fff}
#mkService .group-cont .link-service.active .info dd p::before{background-color:#fff}
#mkService .group-cont .link-service.active .btn--primary{border-color:#fff}

/* 반응형 [s] */
@media (max-width:1600px){
#mkService{padding:130px 0 180px}
#mkService .group-title{padding-bottom:60px}
}
@media (max-width:1400px){
#mkService .group-cont .link-service h4{padding-bottom:30px}
#mkService .group-cont .link-service h5{padding-bottom:14px}
#mkService .group-cont .link-service p.desc{padding-bottom:28px}
#mkService .group-cont .link-service strong{padding-bottom:20px;font-size:36px}
#mkService .group-cont .link-service .btn--primary{margin-bottom:36px;font-size:17px}
#mkService .group-cont .link-service .info{gap:28px}
#mkService .group-cont .link-service .info dl{gap:6px}
}
@media (max-width:1200px){
#mkService .group-cont .link-service h4{padding-bottom:22px;font-size:18px}
#mkService .group-cont .link-service h5{padding-bottom:6px}
#mkService .group-cont .link-service p.desc{padding-bottom:22px}
#mkService .group-cont .link-service strong{padding-bottom:22px}
}
@media (max-width:1024px){
#mkService{padding:80px 20px 130px}
#mkService .group-title{padding-bottom:50px}
#mkService .group-cont .link-service{padding:40px 34px}
#mkService .group-cont .link-service h4{padding-bottom:18px;font-size:17px}
#mkService .group-cont .link-service h5{padding-bottom:4px;font-size:19px}
#mkService .group-cont .link-service p.desc{padding-bottom:18px;font-size:15px}
#mkService .group-cont .link-service strong{padding-bottom:18px;font-size:32px}
#mkService .group-cont .link-service .btn--primary{margin-bottom:28px}
#mkService .group-cont .link-service .info{gap:20px}
#mkService .group-cont .link-service .info dl{gap:4px}
#mkService .group-cont .link-service .info dt{font-size:15px}
#mkService .group-cont .link-service .info dd{font-size:15px}
#mkService .group-cont .link-service .btn--primary{font-size:16px}
}
@media (max-width:768px){
#mkService .group-title{padding-bottom:40px}
#mkService .group-cont ul{grid-template-columns:repeat(1,1fr);gap:18px}
#mkService .group-cont .link-service{padding:34px 30px}
#mkService .group-cont .link-service h4{font-size:16px}
#mkService .group-cont .link-service h5{padding-bottom:2px;font-size:18px}
#mkService .group-cont .link-service p.desc{padding-bottom:10px}
#mkService .group-cont .link-service .btn--primary{height:48px;width:auto;margin:0 auto 22px;padding:0 30px;font-size:15px}
#mkService .group-cont .link-service .info{align-items:center;gap:14px}
#mkService .group-cont .link-service .info dl{align-items:center;text-align:center}
#mkService .group-cont .link-service .info dd{max-width:50ch}
}
@media (max-width:480px){
#mkService{padding:60px 20px}
#mkService .group-cont .link-service{padding:30px}
#mkService .group-cont .link-service h4{padding-bottom:14px;font-size:15px}
#mkService .group-cont .link-service h5{font-size:17px}
#mkService .group-cont .link-service p.desc{font-size:14px}
#mkService .group-cont .link-service strong{padding-bottom:14px;font-size:28px}
#mkService .group-cont .link-service .btn--primary{margin:0 auto 20px}
#mkService .group-cont .link-service .info dl{gap:2px}
#mkService .group-cont .link-service .info dt{font-size:14px}
#mkService .group-cont .link-service .info dd{font-size:14px}
}
@media (max-width:390px){
#mkService{padding:60px 20px 110px}
}
/* 반응형 [e] */