@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
:root {
  --default-font-family: "Pretendard", sans-serif !important;

}
:root {
    --default-foreground: #555 !important;
}

 
head, body {
    font:
        "Pretendard" !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-extrabold {
  font-weight: 800 !important;
}



/* transform transition */
.transition-transform {
    transition-property: transform;
}

/* duration */
.duration-300 {
    transition-duration: 300ms;
}

/* easing */
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* 기본 transition-all 이 필요한 경우 */
.transition-all {
    transition-property: all;
}
.hoverani {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hoverani:hover {
  transform: translateY(-8px);           /* 살짝 위로 */
  box-shadow: 0 15px 30px rgba(0,0,0,.15); /* 그림자 조금 강하게 */
}

.h-40px { height: 40px; }
.w-350px { width: 350px; }

/* breadcrumb 전체 wrap에 subtle shadow */
.breadcrumb-wrap {
    transition: all .25s ease;
}

.breadcrumb-wrap:hover {
    color: #222;
}

/* divider 스타일을 조금 더 예쁘게 */
.breadcrumb-wrap span {
    opacity: .6;
}

/* 링크 hover 부드럽게 */
.breadcrumb-wrap a {
    transition: color .25s ease;
}



/* 상단 얇은 바용 높이 프리셋 */
.topbar-xs {
    padding-top: 4px;
    padding-bottom: 4px;
}

.topbar-sm {
    padding-top: 6px;
    padding-bottom: 6px;
}

.topbar-md {
    padding-top: 8px;
    padding-bottom: 8px;
}

.kt-menu-title-G{font-size: 18px;} 
.kt-menu-title-active{color: #37D243;} 

/* 공통 카드 hover 효과 */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border-color: #cbd5e1; /* slate-300 ~ 400 중간 */
}
/* grid 기본 */
.grid {
  display: grid;
}

/* 2열 */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* lg: 4열 (데스크탑) */
@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


@media (max-width: 768px) {
  html {
    font-size: 100% !important; /* rem 기준을 16px로 복구 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}


/* ===========================================================
   TAILWIND FULL COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */


/* ================================
   1. SLATE
   ================================ */
.bg-slate-100 { background:#f1f5f9; }
.bg-slate-300 { background:#cbd5e1; }
.bg-slate-500 { background:#64748b; }
.bg-slate-700 { background:#334155; }
.bg-slate-900 { background:#0f172a; }
.text-slate-100 { color:#f1f5f9; }
.text-slate-300 { color:#cbd5e1; }
.text-slate-500 { color:#64748b; }
.text-slate-700 { color:#334155; }
.text-slate-900 { color:#0f172a; }
.border-slate-300 { border-color:#cbd5e1; }


/* ================================
   2. ZINC
   ================================ */
.bg-zinc-100 { background:#f4f4f5; }
.bg-zinc-300 { background:#d4d4d8; }
.bg-zinc-500 { background:#71717a; }
.bg-zinc-700 { background:#3f3f46; }
.bg-zinc-900 { background:#18181b; }
.text-zinc-500 { color:#71717a; }
.text-zinc-700 { color:#3f3f46; }
.border-zinc-300 { border-color:#d4d4d8; }


/* ================================
   3. NEUTRAL
   ================================ */
.bg-neutral-100 { background:#f5f5f5; }
.bg-neutral-300 { background:#d4d4d4; }
.bg-neutral-500 { background:#737373; }
.bg-neutral-700 { background:#404040; }
.bg-neutral-900 { background:#171717; }
.text-neutral-500 { color:#737373; }
.border-neutral-300 { border-color:#d4d4d4; }


/* ================================
   4. STONE
   ================================ */
.bg-stone-100 { background:#f5f5f4; }
.bg-stone-300 { background:#d6d3d1; }
.bg-stone-500 { background:#78716c; }
.bg-stone-700 { background:#44403c; }
.bg-stone-900 { background:#1c1917; }


/* ================================
   5. RED
   ================================ */
.bg-red-100 { background:#fee2e2; }
.bg-red-300 { background:#fca5a5; }
.bg-red-500 { background:#ef4444; }
.bg-red-700 { background:#b91c1c; }
.bg-red-900 { background:#7f1d1d; }
.text-red-500 { color:#ef4444; }
.border-red-300 { border-color:#fca5a5; }


/* ================================
   6. ORANGE
   ================================ */
.bg-orange-100 { background:#ffedd5; }
.bg-orange-300 { background:#fdba74; }
.bg-orange-500 { background:#f97316; }
.bg-orange-700 { background:#c2410c; }
.bg-orange-900 { background:#7c2d12; }


/* ================================
   7. AMBER
   ================================ */
.bg-amber-100 { background:#fef3c7; }
.bg-amber-300 { background:#fcd34d; }
.bg-amber-500 { background:#f59e0b; }
.bg-amber-700 { background:#b45309; }
.bg-amber-900 { background:#78350f; }


/* ================================
   8. YELLOW
   ================================ */
.bg-yellow-100 { background:#fef9c3; }
.bg-yellow-300 { background:#fde047; }
.bg-yellow-500 { background:#eab308; }
.bg-yellow-700 { background:#a16207; }
.bg-yellow-900 { background:#713f12; }


/* ================================
   9. LIME
   ================================ */
.bg-lime-100 { background:#ecfccb; }
.bg-lime-300 { background:#bef264; }
.bg-lime-500 { background:#84cc16; }
.bg-lime-700 { background:#4d7c0f; }
.bg-lime-900 { background:#365314; }


/* ================================
   10. GREEN
   ================================ */
.bg-green-100 { background:#dcfce7; }
.bg-green-300 { background:#86efac; }
.bg-green-500 { background:#22c55e; }
.bg-green-700 { background:#15803d; }
.bg-green-900 { background:#14532d; }


/* ================================
   11. EMERALD
   ================================ */
.bg-emerald-100 { background:#d1fae5; }
.bg-emerald-300 { background:#6ee7b7; }
.bg-emerald-500 { background:#10b981; }
.bg-emerald-700 { background:#047857; }
.bg-emerald-900 { background:#064e3b; }


/* ================================
   12. TEAL
   ================================ */
.bg-teal-100 { background:#ccfbf1; }
.bg-teal-300 { background:#5eead4; }
.bg-teal-500 { background:#14b8a6; }
.bg-teal-700 { background:#0f766e; }
.bg-teal-900 { background:#134e4a; }


/* ================================
   13. CYAN
   ================================ */
.bg-cyan-100 { background:#cffafe; }
.bg-cyan-300 { background:#67e8f9; }
.bg-cyan-500 { background:#06b6d4; }
.bg-cyan-700 { background:#0e7490; }
.bg-cyan-900 { background:#164e63; }


/* ================================
   14. SKY
   ================================ */
.bg-sky-100 { background:#e0f2fe; }
.bg-sky-300 { background:#7dd3fc; }
.bg-sky-500 { background:#0ea5e9; }
.bg-sky-700 { background:#0369a1; }
.bg-sky-900 { background:#0c4a6e; }


/* ================================
   15. BLUE
   ================================ */
.bg-blue-100 { background:#dbeafe; }
.bg-blue-300 { background:#93c5fd; }
.bg-blue-500 { background:#3b82f6; }
.bg-blue-700 { background:#1d4ed8; }
.bg-blue-900 { background:#1e3a8a; }


/* ================================
   16. INDIGO
   ================================ */
.bg-indigo-100 { background:#e0e7ff; }
.bg-indigo-300 { background:#a5b4fc; }
.bg-indigo-500 { background:#6366f1; }
.bg-indigo-700 { background:#4338ca; }
.bg-indigo-900 { background:#312e81; }


/* ================================
   17. VIOLET
   ================================ */
.bg-violet-100 { background:#ede9fe; }
.bg-violet-300 { background:#c4b5fd; }
.bg-violet-500 { background:#8b5cf6; }
.bg-violet-700 { background:#6d28d9; }
.bg-violet-900 { background:#4c1d95; }


/* ================================
   18. PURPLE
   ================================ */
.bg-purple-100 { background:#f3e8ff; }
.bg-purple-300 { background:#d8b4fe; }
.bg-purple-500 { background:#a855f7; }
.bg-purple-700 { background:#7e22ce; }
.bg-purple-900 { background:#581c87; }


/* ================================
   19. FUCHSIA
   ================================ */
.bg-fuchsia-100 { background:#fae8ff; }
.bg-fuchsia-300 { background:#f0abfc; }
.bg-fuchsia-500 { background:#d946ef; }
.bg-fuchsia-700 { background:#a21caf; }
.bg-fuchsia-900 { background:#701a75; }


/* ================================
   20. PINK
   ================================ */
.bg-pink-100 { background:#fce7f3; }
.bg-pink-300 { background:#f9a8d4; }
.bg-pink-500 { background:#ec4899; }
.bg-pink-700 { background:#be185d; }
.bg-pink-900 { background:#831843; }


/* ================================
   21. ROSE
   ================================ */
.bg-rose-100 { background:#ffe4e6; }
.bg-rose-300 { background:#fda4af; }
.bg-rose-500 { background:#f43f5e; }
.bg-rose-700 { background:#be123c; }
.bg-rose-900 { background:#881337; }

/* ===========================================================
   TEXT COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */


/* ================================
   1. SLATE
   ================================ */
.text-slate-100 { color:#f1f5f9; }
.text-slate-300 { color:#cbd5e1; }
.text-slate-500 { color:#64748b; }
.text-slate-700 { color:#334155; }
.text-slate-900 { color:#0f172a; }


/* ================================
   2. ZINC
   ================================ */
.text-zinc-100 { color:#f4f4f5; }
.text-zinc-300 { color:#d4d4d8; }
.text-zinc-500 { color:#71717a; }
.text-zinc-700 { color:#3f3f46; }
.text-zinc-900 { color:#18181b; }


/* ================================
   3. NEUTRAL
   ================================ */
.text-neutral-100 { color:#f5f5f5; }
.text-neutral-300 { color:#d4d4d4; }
.text-neutral-500 { color:#737373; }
.text-neutral-700 { color:#404040; }
.text-neutral-900 { color:#171717; }


/* ================================
   4. STONE
   ================================ */
.text-stone-100 { color:#f5f5f4; }
.text-stone-300 { color:#d6d3d1; }
.text-stone-500 { color:#78716c; }
.text-stone-700 { color:#44403c; }
.text-stone-900 { color:#1c1917; }


/* ================================
   5. RED
   ================================ */
.text-red-100 { color:#fee2e2; }
.text-red-300 { color:#fca5a5; }
.text-red-500 { color:#ef4444; }
.text-red-700 { color:#b91c1c; }
.text-red-900 { color:#7f1d1d; }


/* ================================
   6. ORANGE
   ================================ */
.text-orange-100 { color:#ffedd5; }
.text-orange-300 { color:#fdba74; }
.text-orange-500 { color:#f97316; }
.text-orange-700 { color:#c2410c; }
.text-orange-900 { color:#7c2d12; }


/* ================================
   7. AMBER
   ================================ */
.text-amber-100 { color:#fef3c7; }
.text-amber-300 { color:#fcd34d; }
.text-amber-500 { color:#f59e0b; }
.text-amber-700 { color:#b45309; }
.text-amber-900 { color:#78350f; }


/* ================================
   8. YELLOW
   ================================ */
.text-yellow-100 { color:#fef9c3; }
.text-yellow-300 { color:#fde047; }
.text-yellow-500 { color:#eab308; }
.text-yellow-700 { color:#a16207; }
.text-yellow-900 { color:#713f12; }


/* ================================
   9. LIME
   ================================ */
.text-lime-100 { color:#ecfccb; }
.text-lime-300 { color:#bef264; }
.text-lime-500 { color:#84cc16; }
.text-lime-700 { color:#4d7c0f; }
.text-lime-900 { color:#365314; }


/* ================================
   10. GREEN
   ================================ */
.text-green-100 { color:#dcfce7; }
.text-green-300 { color:#86efac; }
.text-green-500 { color:#22c55e; }
.text-green-700 { color:#15803d; }
.text-green-900 { color:#14532d; }


/* ================================
   11. EMERALD
   ================================ */
.text-emerald-100 { color:#d1fae5; }
.text-emerald-300 { color:#6ee7b7; }
.text-emerald-500 { color:#10b981; }
.text-emerald-700 { color:#047857; }
.text-emerald-900 { color:#064e3b; }


/* ================================
   12. TEAL
   ================================ */
.text-teal-100 { color:#ccfbf1; }
.text-teal-300 { color:#5eead4; }
.text-teal-500 { color:#14b8a6; }
.text-teal-700 { color:#0f766e; }
.text-teal-900 { color:#134e4a; }


/* ================================
   13. CYAN
   ================================ */
.text-cyan-100 { color:#cffafe; }
.text-cyan-300 { color:#67e8f9; }
.text-cyan-500 { color:#06b6d4; }
.text-cyan-700 { color:#0e7490; }
.text-cyan-900 { color:#164e63; }


/* ================================
   14. SKY
   ================================ */
.text-sky-100 { color:#e0f2fe; }
.text-sky-300 { color:#7dd3fc; }
.text-sky-500 { color:#0ea5e9; }
.text-sky-700 { color:#0369a1; }
.text-sky-900 { color:#0c4a6e; }


/* ================================
   15. BLUE
   ================================ */
.text-blue-100 { color:#dbeafe; }
.text-blue-300 { color:#93c5fd; }
.text-blue-500 { color:#3b82f6; }
.text-blue-700 { color:#1d4ed8; }
.text-blue-900 { color:#1e3a8a; }


/* ================================
   16. INDIGO
   ================================ */
.text-indigo-100 { color:#e0e7ff; }
.text-indigo-300 { color:#a5b4fc; }
.text-indigo-500 { color:#6366f1; }
.text-indigo-700 { color:#4338ca; }
.text-indigo-900 { color:#312e81; }


/* ================================
   17. VIOLET
   ================================ */
.text-violet-100 { color:#ede9fe; }
.text-violet-300 { color:#c4b5fd; }
.text-violet-500 { color:#8b5cf6; }
.text-violet-700 { color:#6d28d9; }
.text-violet-900 { color:#4c1d95; }


/* ================================
   18. PURPLE
   ================================ */
.text-purple-100 { color:#f3e8ff; }
.text-purple-300 { color:#d8b4fe; }
.text-purple-500 { color:#a855f7; }
.text-purple-700 { color:#7e22ce; }
.text-purple-900 { color:#581c87; }


/* ================================
   19. FUCHSIA
   ================================ */
.text-fuchsia-100 { color:#fae8ff; }
.text-fuchsia-300 { color:#f0abfc; }
.text-fuchsia-500 { color:#d946ef; }
.text-fuchsia-700 { color:#a21caf; }
.text-fuchsia-900 { color:#701a75; }


/* ================================
   20. PINK
   ================================ */
.text-pink-100 { color:#fce7f3; }
.text-pink-300 { color:#f9a8d4; }
.text-pink-500 { color:#ec4899; }
.text-pink-700 { color:#be185d; }
.text-pink-900 { color:#831843; }


/* ================================
   21. ROSE
   ================================ */
.text-rose-100 { color:#ffe4e6; }
.text-rose-300 { color:#fda4af; }
.text-rose-500 { color:#f43f5e; }
.text-rose-700 { color:#be123c; }
.text-rose-900 { color:#881337; }


/* ===========================================================
   BORDER COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */


/* ================================
   1. SLATE
   ================================ */
.border-slate-100 { border-color:#f1f5f9; }
.border-slate-300 { border-color:#cbd5e1; }
.border-slate-500 { border-color:#64748b; }
.border-slate-700 { border-color:#334155; }
.border-slate-900 { border-color:#0f172a; }


/* ================================
   2. ZINC
   ================================ */
.border-zinc-100 { border-color:#f4f4f5; }
.border-zinc-300 { border-color:#d4d4d8; }
.border-zinc-500 { border-color:#71717a; }
.border-zinc-700 { border-color:#3f3f46; }
.border-zinc-900 { border-color:#18181b; }


/* ================================
   3. NEUTRAL
   ================================ */
.border-neutral-100 { border-color:#f5f5f5; }
.border-neutral-300 { border-color:#d4d4d4; }
.border-neutral-500 { border-color:#737373; }
.border-neutral-700 { border-color:#404040; }
.border-neutral-900 { border-color:#171717; }


/* ================================
   4. STONE
   ================================ */
.border-stone-100 { border-color:#f5f5f4; }
.border-stone-300 { border-color:#d6d3d1; }
.border-stone-500 { border-color:#78716c; }
.border-stone-700 { border-color:#44403c; }
.border-stone-900 { border-color:#1c1917; }


/* ================================
   5. RED
   ================================ */
.border-red-100 { border-color:#fee2e2; }
.border-red-300 { border-color:#fca5a5; }
.border-red-500 { border-color:#ef4444; }
.border-red-700 { border-color:#b91c1c; }
.border-red-900 { border-color:#7f1d1d; }


/* ================================
   6. ORANGE
   ================================ */
.border-orange-100 { border-color:#ffedd5; }
.border-orange-300 { border-color:#fdba74; }
.border-orange-500 { border-color:#f97316; }
.border-orange-700 { border-color:#c2410c; }
.border-orange-900 { border-color:#7c2d12; }


/* ================================
   7. AMBER
   ================================ */
.border-amber-100 { border-color:#fef3c7; }
.border-amber-300 { border-color:#fcd34d; }
.border-amber-500 { border-color:#f59e0b; }
.border-amber-700 { border-color:#b45309; }
.border-amber-900 { border-color:#78350f; }


/* ================================
   8. YELLOW
   ================================ */
.border-yellow-100 { border-color:#fef9c3; }
.border-yellow-300 { border-color:#fde047; }
.border-yellow-500 { border-color:#eab308; }
.border-yellow-700 { border-color:#a16207; }
.border-yellow-900 { border-color:#713f12; }


/* ================================
   9. LIME
   ================================ */
.border-lime-100 { border-color:#ecfccb; }
.border-lime-300 { border-color:#bef264; }
.border-lime-500 { border-color:#84cc16; }
.border-lime-700 { border-color:#4d7c0f; }
.border-lime-900 { border-color:#365314; }


/* ================================
   10. GREEN
   ================================ */
.border-green-100 { border-color:#dcfce7; }
.border-green-300 { border-color:#86efac; }
.border-green-500 { border-color:#22c55e; }
.border-green-700 { border-color:#15803d; }
.border-green-900 { border-color:#14532d; }


/* ================================
   11. EMERALD
   ================================ */
.border-emerald-100 { border-color:#d1fae5; }
.border-emerald-300 { border-color:#6ee7b7; }
.border-emerald-500 { border-color:#10b981; }
.border-emerald-700 { border-color:#047857; }
.border-emerald-900 { border-color:#064e3b; }


/* ================================
   12. TEAL
   ================================ */
.border-teal-100 { border-color:#ccfbf1; }
.border-teal-300 { border-color:#5eead4; }
.border-teal-500 { border-color:#14b8a6; }
.border-teal-700 { border-color:#0f766e; }
.border-teal-900 { border-color:#134e4a; }


/* ================================
   13. CYAN
   ================================ */
.border-cyan-100 { border-color:#cffafe; }
.border-cyan-300 { border-color:#67e8f9; }
.border-cyan-500 { border-color:#06b6d4; }
.border-cyan-700 { border-color:#0e7490; }
.border-cyan-900 { border-color:#164e63; }


/* ================================
   14. SKY
   ================================ */
.border-sky-100 { border-color:#e0f2fe; }
.border-sky-300 { border-color:#7dd3fc; }
.border-sky-500 { border-color:#0ea5e9; }
.border-sky-700 { border-color:#0369a1; }
.border-sky-900 { border-color:#0c4a6e; }


/* ================================
   15. BLUE
   ================================ */
.border-blue-100 { border-color:#dbeafe; }
.border-blue-300 { border-color:#93c5fd; }
.border-blue-500 { border-color:#3b82f6; }
.border-blue-700 { border-color:#1d4ed8; }
.border-blue-900 { border-color:#1e3a8a; }


/* ================================
   16. INDIGO
   ================================ */
.border-indigo-100 { border-color:#e0e7ff; }
.border-indigo-300 { border-color:#a5b4fc; }
.border-indigo-500 { border-color:#6366f1; }
.border-indigo-700 { border-color:#4338ca; }
.border-indigo-900 { border-color:#312e81; }


/* ================================
   17. VIOLET
   ================================ */
.border-violet-100 { border-color:#ede9fe; }
.border-violet-300 { border-color:#c4b5fd; }
.border-violet-500 { border-color:#8b5cf6; }
.border-violet-700 { border-color:#6d28d9; }
.border-violet-900 { border-color:#4c1d95; }


/* ================================
   18. PURPLE
   ================================ */
.border-purple-100 { border-color:#f3e8ff; }
.border-purple-300 { border-color:#d8b4fe; }
.border-purple-500 { border-color:#a855f7; }
.border-purple-700 { border-color:#7e22ce; }
.border-purple-900 { border-color:#581c87; }


/* ================================
   19. FUCHSIA
   ================================ */
.border-fuchsia-100 { border-color:#fae8ff; }
.border-fuchsia-300 { border-color:#f0abfc; }
.border-fuchsia-500 { border-color:#d946ef; }
.border-fuchsia-700 { border-color:#a21caf; }
.border-fuchsia-900 { border-color:#701a75; }


/* ================================
   20. PINK
   ================================ */
.border-pink-100 { border-color:#fce7f3; }
.border-pink-300 { border-color:#f9a8d4; }
.border-pink-500 { border-color:#ec4899; }
.border-pink-700 { border-color:#be185d; }
.border-pink-900 { border-color:#831843; }


/* ================================
   21. ROSE
   ================================ */
.border-rose-100 { border-color:#ffe4e6; }
.border-rose-300 { border-color:#fda4af; }
.border-rose-500 { border-color:#f43f5e; }
.border-rose-700 { border-color:#be123c; }
.border-rose-900 { border-color:#881337; }


/* ============================================================
   BUTTON COLOR SYSTEM (21 COLOR PALETTE)
   .btn-{color}
   .btn-{color}-outline
   .btn-{color}-soft
   ============================================================ */

/* 기본 구조 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease;
}



/* ================================
   TEMPLATE (참고용)
   ================================
.btn-blue     { background:#3b82f6; color:#fff; }
.btn-blue:hover { background:#1d4ed8; }
.btn-blue-outline { border:1px solid #3b82f6; color:#3b82f6; background:transparent; }
.btn-blue-outline:hover { background:#3b82f6; color:#fff; }
.btn-blue-soft { background:#dbeafe; color:#1d4ed8; }
.btn-blue-soft:hover { background:#bfdbfe; }
================================ */


/* ============================================================
   1. SLATE
   ============================================================ */
.btn-slate { background:#64748b; color:#fff; }
.btn-slate:hover { background:#475569; }
.btn-slate-outline { border:1px solid #64748b; background:transparent; color:#64748b; }
.btn-slate-outline:hover { background:#64748b; color:#fff; }
.btn-slate-soft { background:#f1f5f9; color:#334155; }
.btn-slate-soft:hover { background:#e2e8f0; }


/* ============================================================
   2. ZINC
   ============================================================ */
.btn-zinc { background:#71717a; color:#fff; }
.btn-zinc:hover { background:#52525b; }
.btn-zinc-outline { border:1px solid #71717a; background:transparent; color:#71717a; }
.btn-zinc-outline:hover { background:#71717a; color:#fff; }
.btn-zinc-soft { background:#f4f4f5; color:#3f3f46; }
.btn-zinc-soft:hover { background:#e4e4e7; }


/* ============================================================
   3. NEUTRAL
   ============================================================ */
.btn-neutral { background:#737373; color:#fff; }
.btn-neutral:hover { background:#525252; }
.btn-neutral-outline { border:1px solid #737373; color:#737373; background:transparent; }
.btn-neutral-outline:hover { background:#737373; color:#fff; }
.btn-neutral-soft { background:#f5f5f5; color:#404040; }
.btn-neutral-soft:hover { background:#e5e5e5; }


/* ============================================================
   4. STONE
   ============================================================ */
.btn-stone { background:#78716c; color:#fff; }
.btn-stone:hover { background:#57534e; }
.btn-stone-outline { border:1px solid #78716c; color:#78716c; }
.btn-stone-outline:hover { background:#78716c; color:#fff; }
.btn-stone-soft { background:#f5f5f4; color:#44403c; }
.btn-stone-soft:hover { background:#e7e5e4; }


/* ============================================================
   5. RED
   ============================================================ */
.btn-red { background:#ef4444; color:#fff; }
.btn-red:hover { background:#b91c1c; }
.btn-red-outline { border:1px solid #ef4444; color:#ef4444; background:transparent; }
.btn-red-outline:hover { background:#ef4444; color:#fff; }
.btn-red-soft { background:#fee2e2; color:#b91c1c; }
.btn-red-soft:hover { background:#fecaca; }


/* ============================================================
   6. ORANGE
   ============================================================ */
.btn-orange { background:#f97316; color:#fff; }
.btn-orange:hover { background:#c2410c; }
.btn-orange-outline { border:1px solid #f97316; color:#f97316; }
.btn-orange-outline:hover { background:#f97316; color:#fff; }
.btn-orange-soft { background:#ffedd5; color:#c2410c; }
.btn-orange-soft:hover { background:#fed7aa; }


/* ============================================================
   7. AMBER
   ============================================================ */
.btn-amber { background:#f59e0b; color:#fff; }
.btn-amber:hover { background:#b45309; }
.btn-amber-outline { border:1px solid #f59e0b; color:#f59e0b; }
.btn-amber-outline:hover { background:#f59e0b; color:#fff; }
.btn-amber-soft { background:#fef3c7; color:#b45309; }
.btn-amber-soft:hover { background:#fde68a; }


/* ============================================================
   8. YELLOW
   ============================================================ */
.btn-yellow { background:#eab308; color:#fff; }
.btn-yellow:hover { background:#a16207; }
.btn-yellow-outline { border:1px solid #eab308; color:#eab308; }
.btn-yellow-outline:hover { background:#eab308; color:#fff; }
.btn-yellow-soft { background:#fef9c3; color:#a16207; }
.btn-yellow-soft:hover { background:#fef08a; }


/* ============================================================
   9. LIME
   ============================================================ */
.btn-lime { background:#84cc16; color:#fff; }
.btn-lime:hover { background:#4d7c0f; }
.btn-lime-outline { border:1px solid #84cc16; color:#84cc16; }
.btn-lime-outline:hover { background:#84cc16; color:#fff; }
.btn-lime-soft { background:#ecfccb; color:#4d7c0f; }
.btn-lime-soft:hover { background:#d9f99d; }


/* ============================================================
   10. GREEN
   ============================================================ */
.btn-green { background:#22c55e; color:#fff; }
.btn-green:hover { background:#15803d; }
.btn-green-outline { border:1px solid #22c55e; color:#22c55e; }
.btn-green-outline:hover { background:#22c55e; color:#fff; }
.btn-green-soft { background:#dcfce7; color:#15803d; }
.btn-green-soft:hover { background:#bbf7d0; }


/* ============================================================
   11. EMERALD
   ============================================================ */
.btn-emerald { background:#10b981; color:#fff; }
.btn-emerald:hover { background:#047857; }
.btn-emerald-outline { border:1px solid #10b981; color:#10b981; }
.btn-emerald-outline:hover { background:#10b981; color:#fff; }
.btn-emerald-soft { background:#d1fae5; color:#047857; }
.btn-emerald-soft:hover { background:#a7f3d0; }


/* ============================================================
   12. TEAL
   ============================================================ */
.btn-teal { background:#14b8a6; color:#fff; }
.btn-teal:hover { background:#0f766e; }
.btn-teal-outline { border:1px solid #14b8a6; color:#14b8a6; }
.btn-teal-outline:hover { background:#14b8a6; color:#fff; }
.btn-teal-soft { background:#ccfbf1; color:#0f766e; }
.btn-teal-soft:hover { background:#99f6e4; }


/* ============================================================
   13. CYAN
   ============================================================ */
.btn-cyan { background:#06b6d4; color:#fff; }
.btn-cyan:hover { background:#0e7490; }
.btn-cyan-outline { border:1px solid #06b6d4; color:#06b6d4; }
.btn-cyan-outline:hover { background:#06b6d4; color:#fff; }
.btn-cyan-soft { background:#cffafe; color:#0e7490; }
.btn-cyan-soft:hover { background:#a5f3fc; }


/* ============================================================
   14. SKY
   ============================================================ */
.btn-sky { background:#0ea5e9; color:#fff; }
.btn-sky:hover { background:#0369a1; }
.btn-sky-outline { border:1px solid #0ea5e9; color:#0ea5e9; }
.btn-sky-outline:hover { background:#0ea5e9; color:#fff; }
.btn-sky-soft { background:#e0f2fe; color:#0369a1; }
.btn-sky-soft:hover { background:#bae6fd; }


/* ============================================================
   15. BLUE
   ============================================================ */
.btn-blue { background:#3b82f6; color:#fff; }
.btn-blue:hover { background:#1d4ed8; }
.btn-blue-outline { border:1px solid #3b82f6; color:#3b82f6; background:transparent; }
.btn-blue-outline:hover { background:#3b82f6; color:#fff; }
.btn-blue-soft { background:#dbeafe; color:#1d4ed8; }
.btn-blue-soft:hover { background:#bfdbfe; }


/* ============================================================
   16. INDIGO
   ============================================================ */
.btn-indigo { background:#6366f1; color:#fff; }
.btn-indigo:hover { background:#4338ca; }
.btn-indigo-outline { border:1px solid #6366f1; color:#6366f1; }
.btn-indigo-outline:hover { background:#6366f1; color:#fff; }
.btn-indigo-soft { background:#e0e7ff; color:#4338ca; }
.btn-indigo-soft:hover { background:#c7d2fe; }


/* ============================================================
   17. VIOLET
   ============================================================ */
.btn-violet { background:#8b5cf6; color:#fff; }
.btn-violet:hover { background:#6d28d9; }
.btn-violet-outline { border:1px solid #8b5cf6; color:#8b5cf6; }
.btn-violet-outline:hover { background:#8b5cf6; color:#fff; }
.btn-violet-soft { background:#ede9fe; color:#6d28d9; }
.btn-violet-soft:hover { background:#ddd6fe; }


/* ============================================================
   18. PURPLE
   ============================================================ */
.btn-purple { background:#a855f7; color:#fff; }
.btn-purple:hover { background:#7e22ce; }
.btn-purple-outline { border:1px solid #a855f7; color:#a855f7; }
.btn-purple-outline:hover { background:#a855f7; color:#fff; }
.btn-purple-soft { background:#f3e8ff; color:#7e22ce; }
.btn-purple-soft:hover { background:#e9d5ff; }


/* ============================================================
   19. FUCHSIA
   ============================================================ */
.btn-fuchsia { background:#d946ef; color:#fff; }
.btn-fuchsia:hover { background:#a21caf; }
.btn-fuchsia-outline { border:1px solid #d946ef; color:#d946ef; }
.btn-fuchsia-outline:hover { background:#d946ef; color:#fff; }
.btn-fuchsia-soft { background:#fae8ff; color:#a21caf; }
.btn-fuchsia-soft:hover { background:#f5d0fe; }


/* ============================================================
   20. PINK
   ============================================================ */
.btn-pink { background:#ec4899; color:#fff; }
.btn-pink:hover { background:#be185d; }
.btn-pink-outline { border:1px solid #ec4899; color:#ec4899; }
.btn-pink-outline:hover { background:#ec4899; color:#fff; }
.btn-pink-soft { background:#fce7f3; color:#be185d; }
.btn-pink-soft:hover { background:#fbcfe8; }


/* ============================================================
   21. ROSE
   ============================================================ */
.btn-rose { background:#f43f5e; color:#fff; }
.btn-rose:hover { background:#be123c; }
.btn-rose-outline { border:1px solid #f43f5e; color:#f43f5e; background:transparent; }
.btn-rose-outline:hover { background:#f43f5e; color:#fff; }
.btn-rose-soft { background:#ffe4e6; color:#be123c; }
.btn-rose-soft:hover { background:#fecdd3; }


/* 0% ~ 100% 투명도 유틸리티 */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }


.mainHeroSection-img-1     {   background-image:url('/setting/media/images/pattern.png');  }


.mainHeroSection-img-1 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, #0DC004 00%, #8ebbe5 100%);
}