@charset "utf-8";

#inc03{overflow:hidden;background:#f5f5f5}
#inc03 .group_tit{text-align:center}
#inc03 .link{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
#inc03 .link a{position:relative;display:flex;flex-direction:column;border-radius:13px;padding:40px;background:#fff;transition:all .3s}
#inc03 .link a img{margin-left:auto}
#inc03 .link a .cir{position:absolute;bottom:40px;right:40px;display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50px;color:#fff;background:rgba(0,0,0,.3);transition:all .3s}
#inc03 .link a .sub_tit span{display:inline-block;padding:5px 15px;border-radius:50px;font-size:15px;font-weight:700;color:#fff;background:rgba(0,0,0,.3);transition:all .3s}
#inc03 .link a .sub_tit h3{margin:10px auto 5px;font-size:30px;font-weight:700;color:#000;transition:all .3s}
#inc03 .link a .sub_tit p{font-size:20px;font-weight:500;color:#000;transition:all .3s}
#inc03 .link a ul{margin-top:20px;font-size:17px;font-weight:500;color:#777;transition:all .3s}


#inc03 .step_area{margin-top:150px}
#inc03 .step_area h3{margin-bottom:50px;font-size:40px;font-weight:700;color:#000}
#inc03 .step_area ul{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
#inc03 .step_area img{display:block;margin:0 auto 30px}
#inc03 .step_area dl{margin-top:15px}
#inc03 .step_area dl dt{margin-bottom:5px;font-size:22px;font-weight:700}
#inc03 .step_area dl dd{color:#777}
#inc03 .step_area li p{position:relative}
#inc03 .step_area li span{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:0 auto;border-radius:50px;border:1px solid #e1e1e1;font-size:18px;font-weight:700;color:#bbb;background:#f5f5f5;transition:all .3s}
#inc03 .step_area li p:before{content:'';position:absolute;z-index:-1;top:50%;left:50%;width:0;height:2px;box-shadow:0px 0px 13px var(--primary);background:var(--primary);transform:translate(-50%, -50%);transition:width .5s}
#inc03 .step_area li p:after{content:'';z-index:-2;position:absolute;top:50%;left:0;width:100%;height:1px;background:#e1e1e1;transform:translateY(-50%)}
#inc03 .step_area li.on span{color:#fff;border:none;background:var(--primary)}
#inc03 .step_area li.on p:before{width:100%}

@media(hover:hover){
#inc03 .link a:hover{background:var(--gradient);box-shadow:0px 0px 12px 1px var(--primary)}
#inc03 .link a:hover .sub_tit h3{color:#fff}
#inc03 .link a:hover .sub_tit p{color:#fff}
#inc03 .link a:hover .cir{background:rgba(255,255,255,.3)}
#inc03 .link a:hover ul{color:rgba(255,255,255,.7)}
}

/* 반응형 [s] */
/* Desktop */
@media (max-width:1280px){
#inc03 .link{gap:20px}
#inc03 .link a{padding:30px}
#inc03 .link a .sub_tit span{font-size:13px}
#inc03 .link a .sub_tit h3{font-size:25px}
#inc03 .link a .sub_tit p{font-size:17px}
#inc03 .link a ul{font-size:15px}
#inc03 .link a .cir{width:50px;height:50px}
#inc03 .link a .cir svg{width:18px}
#inc03 .link a img{width:150px}

#inc03 .step_area{margin-top:80px}
#inc03 .step_area h3{font-size:30px}
#inc03 .step_area dl dt{font-size:20px}
#inc03 .step_area img{width:100px}
}

/* Tablet */
@media (max-width:1024px){
#inc03 .link a .sub_tit span{padding:2px 12px;font-weight:500}
#inc03 .link a .sub_tit h3{font-size:23px}
#inc03 .link a .sub_tit p{font-size:15px}
#inc03 .link a img{width:110px}
#inc03 .link a ul{display:none}
#inc03 .link a .cir{position:unset;margin-left:auto}
#inc03 .step_area h3{font-size:25px}
#inc03 .step_area li span{width:40px;height:40px;font-size:14px}
#inc03 .step_area img{width:80px}
#inc03 .step_area dl dt{font-size:18px}
}

/* Mobile */
@media (max-width:768px){
#inc03 .link{grid-template-columns:repeat(1,1fr);gap:10px}
#inc03 .link a .sub_tit h3{font-size:20px}
#inc03 .link a .cir{display:none}
#inc03 .link a img{position:absolute;top:50%;right:30px;width:90px;transform:translateY(-50%)}
#inc03 .step_area h3{margin-bottom:20px}
#inc03 .step_area ul{grid-template-columns:repeat(2,1fr)}
#inc03 .step_area li{display:flex;flex-direction:column}
#inc03 .step_area li span{width:30px;height:30px;font-size:12px}
#inc03 .step_area dl dd{display:none}
#inc03 .step_area img{margin:0 auto 20px;order:1}
}

/* Medium Mobile */
@media (max-width:580px){
#inc03 .link a{padding:20px}
#inc03 .link a img{width:70px}
#inc03 .link a .sub_tit h3{margin:5px 0 0}
#inc03 .link a .sub_tit p{font-weight:400;color:#777}
}

/* Small Mobile */
@media (max-width:480px){
#inc03 .step_area{margin-top:50px}
#inc03 .step_area h3{margin-bottom:15px;font-size:18px;text-align:center}
#inc03 .link{margin-top:30px}
#inc03 .link a .sub_tit{width:80%}
#inc03 .link a .sub_tit span{padding:1px 9px;font-size:11px}
#inc03 .link a .sub_tit p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#inc03 .link a .sub_tit h3{font-size:16px}
#inc03 .link a img{width:50px}
#inc03 .step_area dl dt{font-size:15px}
#inc03 .link a .sub_tit p{font-size:14px}
}
/* 반응형 [e] */