.cc-illust-shortcut { width: 100%; background: rgb(255, 255, 255); padding: 60px 0px; font-family: "Noto Sans KR", sans-serif; }
.cc-illust-grid { width: 85%; max-width: 1400px; margin: 0px auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cc-illust-card { background: rgb(255, 255, 255); border-radius: 28px; min-height: 250px; padding: 28px 20px; text-align: center; text-decoration: none; color: rgb(34, 34, 34); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.35s; box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 35px; }
.cc-illust-card:hover { transform: translateY(-8px); box-shadow: rgba(123, 31, 36, 0.16) 0px 18px 45px; background: rgb(255, 255, 255); }
.cc-illust-img { width: 170px; height: 120px; margin-bottom: 20px; background-image: url("/ci/buttom.png"); background-repeat: no-repeat; background-size: 500%; background-position-y: center; image-rendering: auto; }
.cc-illust-img.icon-1 { background-position: 0% center; }
.cc-illust-img.icon-2 { background-position: 25% center; }
.cc-illust-img.icon-3 { background-position: 50% center; }
.cc-illust-img.icon-4 { background-position: 75% center; }
.cc-illust-img.icon-5 { background-position: 100% center; }
.cc-illust-card strong { font-size: 21px; font-weight: 800; color: rgb(45, 45, 45); margin-bottom: 8px; }
.cc-illust-card em { font-style: normal; font-size: 15px; color: rgb(119, 119, 119); line-height: 1.5; }
.cc-illust-card:hover strong { color: rgb(123, 31, 36); }
.cc-illust-card:hover em { color: rgb(85, 85, 85); }
@media (max-width: 1200px) {.cc-illust-grid { width: 92%; gap: 18px; }
.cc-illust-img { width: 145px; height: 105px; }
.cc-illust-card strong { font-size: 19px; }}
@media (max-width: 900px) {.cc-illust-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 600px) {.cc-illust-grid { grid-template-columns: 1fr; }
.cc-illust-card { min-height: 220px; }
.cc-illust-img { width: 170px; height: 120px; }}