@charset "utf-8";

section {padding-bottom: 10.3rem;}
section .inner {width: 144rem; margin: 0 auto;}
section .minList {display: flex; flex-wrap: wrap; gap: 3.7rem 3rem;}
section .minList li {position: relative; width: calc(25% - 2.25rem); height: 23.6rem; border-radius: 1.5rem; border: 3px solid transparent;}
section .minList li a {height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 2.5rem 1rem 4rem 4rem;}
section .minList li a[hidden] {display: none;}
section .minList li a .badgeBx {display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 2.2rem;}
section .minList li a .badge {display: inline-block; padding: 0.7rem 1.5rem 0.5rem 1.5rem; border-radius: 1.4rem; font-size: 1.8rem; color: #fff; font-weight: 600;}
section .minList li a .tit {position: relative; font-size: 2.4rem; font-weight: 500; line-height: 1.2; word-break: keep-all; z-index: 1;}
section .minList li a .icon {position: absolute; bottom: 3.4rem; right: 3rem;}

section .minList li:hover {box-shadow: 0.3rem 0 2.1rem rgba(0, 0, 0, 0.11); transform: translateY(-0.7rem);}

/* 카테고리 분류 */
section .minList li.smallbiz {background: #faf2ee;}
section .minList li.smallbiz .badge {background: #e69153;}
section .minList li.smallbiz:hover {border-color: #e69153;}
section .minList li.citizen {background: #eefcfb;}
section .minList li.citizen .badge {background: #52a6bf;}
section .minList li.citizen:hover {border-color: #52a6bf;}
section .minList li.truck {background: #f7fcee;}
section .minList li.truck .badge {background: #7d915c;}
section .minList li.truck:hover {border-color: #7d915c;}
section .minList li.job {background: #faf3fa;}
section .minList li.job .badge {background: #b7458d;}
section .minList li.job:hover {border-color: #b7458d;}
section .minList li.relief {background: #f5f1fa;}
section .minList li.relief .badge {background: #9d6fe3;}
section .minList li.relief:hover {border-color: #9d6fe3;}


@media screen and (max-width: 1440px) {
    section .inner {width: 100%; padding: 0 2.4rem;}
}

@media screen and (max-width: 1280px) {
    section .minList li a {padding: 2.5rem 1rem 3rem 3rem;}
    section .minList li a .tit {font-size: 2rem;}
    section .minList li a .badge {font-size: 1.6rem;}
    section .minList li a .arr {width: 2.6rem;}
}

@media screen and (max-width: 1026px) {
    section .minList {gap: 3.2rem;}
    section .minList li {width: calc(33.333% - 2.13333rem); height: 21.3rem;}
    section .minList li a .icon {transform: scale(0.8); bottom: 0.5rem; right: 1rem;}
}

@media screen and (max-width: 768px) {
    section {padding-bottom: 4rem;}
    section .inner {padding: 0 1.5rem;}
    section .minList {gap: 1rem;}
    section .minList li {width: calc(50% - 0.5rem); height: 16.8rem; border-radius: 0.5rem;}
    section .minList li a {padding: 1rem 2.5rem 1rem 1rem;}
    section .minList li a .badgeBx {margin-bottom: 1.1rem; gap: 0.5rem;}
    section .minList li a .badge {padding: 0.7rem 1.2rem 0.5rem 1.2rem; font-size: 1.5rem;}
    section .minList li a .tit {font-size: 1.8rem; margin-left: 0.5rem;}
    section .minList li a .arr {width: 2.2rem;}
    section .minList li a .icon {transform: scale(0.5); bottom: 0.1rem; right: -1.5rem;}
}

@media screen and (max-width: 480px) {
    section .minList li[data-id="t1"], section .minList li[data-id="t3"] {height: 20rem;}
}