@charset "utf-8";

#service-list .col-8{display:grid;grid-template-columns:repeat(8, 1fr); gap: 30px;}
#service-list .icon-list img{width:72px}
#service-list .icon-list li{height:136px;border-radius:12px;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12)}
#service-list .icon-list li a{position:relative;display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%}
#service-list .icon-list li .desc{position:absolute;top:-20px;width:max-content;padding:5px 8px;border-radius:3px;color:#fff;font-weight: 600; font-size: var(--caption-xl); line-height: var(--caption-xl-lh); letter-spacing: var(--caption-xl-ls); text-align: center;background:var(--green)}
#service-list .icon-list li .desc span{color: var(--yellow-50, rgba(255, 242, 0, 1))}
#service-list .icon-list li .desc:after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--green)}

/* 반응형 [s] */
@media (max-width:1024px){
#service-list{background:#fff}
#service-list .col-8{grid-template-columns:repeat(3, 1fr);gap:20px}
#service-list .icon-list li{box-shadow:none}
#service-list .wh-1360{padding:28px 20px 48px !important}
#service-list .icon-list .num1{order:2}
#service-list .icon-list .num2{order:3}
#service-list .icon-list .num3{order:1}
#service-list .icon-list .num4{order:6}
#service-list .icon-list .num5{order:4}
#service-list .icon-list .num6{order:5}
#service-list .icon-list .num7{order:7}
#service-list .icon-list .num8{order:8}
}
@media (max-width:768px){
#service-list .col-8{gap:5px}
#service-list .icon-list li{height:130px}
#service-list .icon-list li .desc{top:-5px}
}