@charset "UTF-8";
/* 기본 스타일 (Reset + Common) */
* { -webkit-tap-highlight-color: transparent; word-break:keep-all; } 
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } 
html { font-size: 16px; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;  overflow-x: hidden; }
body { font-family: var(--font-default); font-size: 16px; line-height: 1.6; color: #000; background-color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; }
@supports (-webkit-touch-callout: none) { 
  body { overscroll-behavior: none; -webkit-overflow-scrolling: auto; } 
 }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: inherit; } 
h1 { font-size: 52px; line-height: 1.2; }
h2 { font-size: 40px; line-height: 1.45; }
h3 { font-size: 32px; line-height: 1.45; }
h4 { font-size: 28px; line-height: 1.45; }
h5 { font-size: 24px; line-height: 1.45; }
h6 { font-size: 20px; line-height: 1.45; }
small { font-size: 80%; } 
p { margin: 0; font-size: var(--font-size-base); } 
a { color: inherit; text-decoration: none; background-color: transparent; cursor:pointer; } 
a:hover, a:focus { outline: 0; } 
img { border-style: none; max-width: 100%; height: auto; vertical-align: top; } 
ul, ol { list-style: none; } 
table { border-collapse: collapse; border-spacing: 0; } 
button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; border: none; background: transparent; } 
button { cursor: pointer; background: transparent; border: none; outline: none; } 
button::-moz-focus-inner { border: 0; padding: 0; } 
input, textarea { outline: none; border: none; background: transparent; } 
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; outline-offset: -2px; } 
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
textarea { resize: vertical; overflow: auto; } 
blockquote, q { quotes: none; } 
blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; }
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid #ccc; margin: 1em 0; } 
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } 
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 
sub { bottom: -0.25em; }
sup { top: -0.5em; } 
audio, canvas, iframe, img, svg, video { vertical-align: middle; } 
svg { overflow: hidden; } 
fieldset { border: 0; margin: 0; padding: 0; } 
legend { color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } 
progress { vertical-align: baseline; } 
template { display: none; } 
[hidden] { display: none; } 
/* 숨김 텍스트 (스크린 리더 전용) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 
/* 포커스 아웃라인 제거 (접근성을 위해 주의해서 사용) */
*:focus { outline: none; } 
/* 접근성을 위한 포커스 표시 (키보드 사용자용) : 마우스/키보드 사용 시에만 포커스 표시, 터치 디바이스에서는 제거 */
@media (hover: hover) and (pointer: fine) { 
  *:focus-visible { /*outline: 1px solid var(--primary-color); outline-offset: 1px; */ }
 }
@media (hover: none) and (pointer: coarse) { 
  *:focus-visible { outline: none; } 
 }

/* CSS 변수 */
:root {
 --font-default: "Pretendard Variable", "Pretendard", "Noto Sans KR", sans-serif;
 
 --primary-color: #3A8DDE;
 --accent-color-01: #FFC629;
 --accent-color-02: #EF6E47;
 --accent-color-03: #00873B;
 --accent-color-04: #E60013;
 
 --primary-color-hover: #1A75D1;
 --accent-color-01-hover: #E6A800;
 --accent-color-02-hover: #E04E22;
 --accent-color-03-hover: #006B2E;
 --accent-color-04-hover: #C20010;
 
 --grey-scale-ff: #fff;
 --grey-scale-01: #f5f5f5;
 --grey-scale-02: #e5e5e5;
 --grey-scale-03: #cecccc;
 --grey-scale-04: #999;
 --grey-scale-05: #666;
 --grey-scale-00: #000;

 --clamp-size-16: clamp(12px, calc(0.5vw + 5px), 16px);
 --clamp-size-18: clamp(14px, calc(0.6vw + 6px), 18px);
 --clamp-size-20: clamp(18px, calc(0.7vw + 7px), 20px);
 --clamp-size-24: clamp(20px, calc(0.9vw + 8px), 24px);
 --clamp-size-28: clamp(24px, calc(1vw + 8px), 28px);
 --clamp-size-32: clamp(24px, calc(1.2vw + 10px), 32px);
 --clamp-size-40: clamp(28px, calc(1.2vw + 10px), 40px);
 --clamp-size-48: clamp(32px, calc(1.3vw + 12px), 48px);
 --clamp-size-56: clamp(32px, calc(2.4vw + 12px), 56px);
 --clamp-size-64: clamp(48px, calc(2.3vw + 20px), 64px);
 --clamp-size-100: clamp(60px, calc(4vw + 20px), 100px);

 --text-primary: #000000;
 --text-secondary: #747474;
 --text-muted: #bcbcbc;
 --text-white: #ffffff;
 --text-highlight: #3A8DDE;

 --border-light: #e5e5e5;
 --border-medium: #cdcdcd;
 --border-dark: #666;

 --container-sm: 640px;
 --container-md: 768px;
 --container-lg: 1024px;
 --container-xl: 1280px;
 --container-2xl: 1440px;
 --container-3xl: 1792px;

 --content-padding-x: calc(100vw / 1920 * 40);
 --content-padding-x-wide: clamp(calc(100vw / 1920 * 40), 3.4vw, calc(100vw / 1920 * 64));

 --breakpoint-sm: 640px;
 --breakpoint-md: 768px;
 --breakpoint-lg: 1024px;
 --breakpoint-xl: 1280px;
 --breakpoint-2xl: 1560px;

 --z-dropdown: 1000;
 --z-sticky: 1020;
 --z-fixed: 1030;
 --z-modal-backdrop: 1040;
 --z-modal: 1050;
 --z-popover: 1060;
 --z-tooltip: 1070;
 
} 

@media (max-width: 768px){
  :root {
    --content-padding-x: calc(100vw / 768 * 40);
  }
  
}

:root {
  --font-size-small: 18px; --font-size-base: 20px; --font-size-large: 24px; --font-size-xl: 28px; --font-size-2xl: 36px; 
}
@media (max-width: 1024px){
 :root { 
  --font-size-small: 16px; --font-size-base: 20px; --font-size-large: 24px; --font-size-xl: 28px; --font-size-2xl: 32px; 
 } 
}
@media (max-width: 768px){
 :root { 
 --font-size-small: 16px; --font-size-base: 18px; --font-size-large: 22px; --font-size-xl: 26px; --font-size-2xl: 28px; 
 } 
}
@media (max-width: 640px){
 :root { 
 --font-size-small: 14px; --font-size-base: 16px; --font-size-large: 20px; --font-size-xl: 24px; --font-size-2xl: 28px; 
 } 
}
@media (max-width: 480px){
 :root { 
 --font-size-small: 14px; --font-size-base: 16px; --font-size-large: 20px; --font-size-xl: 24px; --font-size-2xl: 28px; } 
 }

 [data-theme="theme01"] {
  --color-theme: #3A8DDE;
  --color-theme-hover: #1A75D1;
  --color-theme-opacity: rgba(59, 140, 222, 0.1);
}

[data-theme="theme02"] {
  --color-theme: #FFC629;
  --color-theme-hover:#E6A800;
  --color-theme-opacity: rgba(255, 198, 41, 0.1);
}

[data-theme="theme03"] {
  --color-theme: #EF6E47;
  --color-theme-hover: #E04E22;
  --color-theme-opacity: rgba(239, 111, 72, 0.1);
}

[data-theme="theme04"] {
  --color-theme: #00873B;
  --color-theme-hover: #006B2E;
  --color-theme-opacity: rgba(0, 133, 57, 0.1);
}

[data-theme="theme05"] {
  --color-theme: #E60013;
  --color-theme-hover: #C20010;
  --color-theme-opacity: rgba(230, 0, 19, 0.1);
}

[data-theme="theme06"] {
  --color-theme: #0098AE;
  --color-theme-hover: #006a7a;
  --color-theme-opacity: rgba(0, 151, 174, 0.1);
}

/*  기본 클래스 */
.text-left { text-align: left; } 
.text-center { text-align: center; } 
.text-right { text-align: right; } 

td.left { text-align: left !important; } 
td.center { text-align: center !important; } 
td.right { text-align: right !important; } 

.font-default { font-family: var(--font-default); } 

.text-size-12, .text-xs { font-size: 12px; } 
.text-size-14, .text-sm { font-size: 14px; } 
.text-size-16, .text-base { font-size: 16px; }
.text-size-18, .text-lg { font-size: 18px; }
.text-size-20, .text-xl { font-size: 20px; }
.text-size-24, .text-2xl { font-size: 24px; }
.text-size-28, .text-3xl { font-size: 28px; }
.text-size-32, .text-4xl { font-size: 32px; }
.text-size-40, .text-5xl { font-size: 40px; }
.text-size-52, .text-6xl { font-size: 52px; } 

.font-weight-300, .font-light { font-weight:300 !important; }
.font-weight-400, .font-normal { font-weight: 400 !important; } 
.font-weight-500, .font-medium { font-weight: 500 !important; } 
.font-weight-600, .font-semibold { font-weight: 600 !important; } 
.font-weight-700, .font-bold { font-weight: 700 !important; } 
.font-weight-800, .font-extrabold { font-weight: 800 !important; } 

.text-primary { color: var(--text-primary); } 
.text-secondary { color: var(--text-secondary); } 
.text-muted { color: var(--text-muted); } 
.text-white { color: var(--text-white); } 
.text-highlight { color: var(--text-highlight); } 
.text-cancel { color: var(--accent-color-01); } 

.color-primary { color: var(--primary-color); } 
.color-accent01 { color: var(--accent-color-01); } 
.color-accent02 { color: var(--accent-color-02); } 
.color-accent03, .color-success { color: var(--accent-color-03); } 
.color-accent04, .color-error { color: var(--accent-color-04); } 

.bg-primary { background-color: var(--primary-color); color:#fff; } 
.bg-accent01 { background-color: var(--accent-color-01); color:#fff; } 
.bg-accent02 { background-color: var(--accent-color-02); color:#fff; } 
.bg-accent03 { background-color: var(--accent-color-03); color:#fff; } 
.bg-accent04 { background-color: var(--accent-color-04); color:#fff; } 
.bg-grey-scale-01 { background-color:var(--grey-scale-01); color:#111; }

.hb-bg-primary:hover, .bg-primary:hover { background-color: var(--primary-color-hover) !important; color:#fff !important; } 
.hb-bg-accent01:hover, .bg-accent01:hover { background-color: var(--accent-color-01-hover) !important; color:#fff !important; } 
.hb-bg-accent02:hover, .bg-accent02:hover { background-color: var(--accent-color-02-hover) !important; color:#fff !important; } 
.hb-bg-accent03:hover, .bg-accent03:hover { background-color: var(--accent-color-03-hover) !important; color:#fff !important; } 
.hb-bg-accent04:hover, .bg-accent04:hover { background-color: var(--accent-color-04-hover) !important; color:#fff !important; } 
.hb-bg-grey-scale-01:hover, .bg-grey-scale-01:hover { background-color:var(--grey-scale-02) !important; color:#111 !important; }

.block { display: block; } 
.inline { display: inline; } 
.inline-block { display: inline-block; } 
.flex { display: -webkit-flex; display: -ms-flexbox; display: flex; } 
.inline-flex { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } 
.grid { display: grid; } 
.hidden { display: none; } 

.flex-row { -webkit-flex-direction: row !important; -ms-flex-direction: row !important; flex-direction: row !important; } 
.flex-col { -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; } 
.flex-wrap { -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } 
.flex-nowrap { -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } 
.items-start { -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } 
.items-center { -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; } 
.items-end { -webkit-align-items: flex-end !important; -ms-flex-align: end !important; align-items: flex-end !important; } 
.justify-start { -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } 
.justify-center { -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; } 
.justify-end { -webkit-justify-content: flex-end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } 
.justify-between { -webkit-justify-content: space-between !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } 
.justify-around { -webkit-justify-content: space-around !important; -ms-flex-pack: distribute !important; justify-content: space-around !important; } 

.relative { position: relative; } 
.absolute { position: absolute; } 
.fixed { position: fixed; } 
.sticky { position: -webkit-sticky; position: sticky; } 

.overflow-hidden { overflow: hidden; } 
.overflow-auto { overflow: auto; } 
.overflow-scroll { overflow: scroll; } 

@-webkit-keyframes fadeIn { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }
@keyframes fadeIn { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }

@-webkit-keyframes fadeInUp { 
 from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 
 to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
 }

@keyframes fadeInUp { 
 from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 
 to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
 }

@-webkit-keyframes slideInRight { 
 from { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 
 to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 
 }

@keyframes slideInRight { 
 from { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 
 to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 
 }

.fade-in { -webkit-animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out; } 
.fade-in-up { -webkit-animation: fadeInUp 0.6s ease-out; animation: fadeInUp 0.6s ease-out; } 
.slide-in-right { -webkit-animation: slideInRight 0.4s ease-out; animation: slideInRight 0.4s ease-out; } 

::-webkit-scrollbar { width: 8px; height: 8px; } 
::-webkit-scrollbar-track { background: var(--grey-scale-02); border-radius: 9999px; } 
::-webkit-scrollbar-thumb { background: var(--grey-scale-03); border-radius: 9999px; } 
::-webkit-scrollbar-thumb:hover { background: var(--grey-scale-04); } 

/* 프린트 스타일 */
@media print { 
 * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } 
 a, a:visited { text-decoration: underline; } 
 a[href]:after { content: " (" attr(href) ")"; } 
 abbr[title]:after { content: " (" attr(title) ")"; } 
 .skip-links, .btn, nav { display: none !important; } 
}

/*  유틸리티 */
.m-0 { margin: 0 !important; } 
.m-8 { margin: 8px !important; } 
.m-16 { margin: 16px !important; } 
.m-20 { margin: 20px !important; } 
.m-24 { margin: 24px !important; } 
.m-32 { margin: 32px !important; } 
.m-40 { margin: 40px !important; } 
.m-48 { margin: 48px !important; } 
.m-64 { margin: 64px !important; } 
.m-80 { margin: 80px !important; } 

.mt-0 { margin-top: 0 !important; } 
.mt-8 { margin-top: 8px !important; } 
.mt-12 { margin-top: 12px !important; } 
.mt-16 { margin-top: 16px !important; } 
.mt-20 { margin-top: 20px !important; } 
.mt-24 { margin-top: 24px !important; } 
.mt-32 { margin-top: 32px !important; } 
.mt-40 { margin-top: 40px !important; } 
.mt-48 { margin-top: 48px !important; } 
.mt-64 { margin-top: 64px !important; } 
.mt-80 { margin-top: 80px !important; } 

.mb-0 { margin-bottom: 0 !important; } 
.mb-8 { margin-bottom: 8px !important; } 
.mb-12 { margin-bottom: 12px !important; } 
.mb-16 { margin-bottom: 16px !important; } 
.mb-20 { margin-bottom: 20px !important; } 
.mb-24 { margin-bottom: 24px !important; } 
.mb-32 { margin-bottom: 32px !important; } 
.mb-40 { margin-bottom: 40px !important; } 
.mb-48 { margin-bottom: 48px !important; } 
.mb-64 { margin-bottom: 64px !important; } 
.mb-80 { margin-bottom: 80px !important; } 

.ml-auto { margin-left:auto !important; }
.ml-0 { margin-left: 0 !important; } 
.ml-8 { margin-left: 8px !important; } 
.ml-16 { margin-left: 16px !important; } 
.ml-20 { margin-left: 20px !important; } 
.ml-24 { margin-left: 24px !important; } 
.ml-32 { margin-left: 32px !important; } 
.ml-40 { margin-left: 40px !important; } 

.mr-auto { margin-right:auto !important; }
.mr-0 { margin-right: 0 !important; } 
.mr-8 { margin-right: 8px !important; } 
.mr-16 { margin-right: 16px !important; } 
.mr-20 { margin-right: 20px !important; } 
.mr-24 { margin-right: 24px !important; } 
.mr-32 { margin-right: 32px !important; } 
.mr-40 { margin-right: 40px !important; } 

.mx-auto { margin-left: auto !important; margin-right: auto !important; } 
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } 
.mx-8 { margin-left: 8px !important; margin-right: 8px !important; } 
.mx-16 { margin-left: 16px !important; margin-right: 16px !important; } 
.mx-20 { margin-left: 20px !important; margin-right: 20px !important; } 
.mx-24 { margin-left: 24px !important; margin-right: 24px !important; } 

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } 
.my-8 { margin-top: 8px !important; margin-bottom: 8px !important; } 
.my-16 { margin-top: 16px !important; margin-bottom: 16px !important; } 
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; } 
.my-24 { margin-top: 24px !important; margin-bottom: 24px !important; } 
.my-32 { margin-top: 32px !important; margin-bottom: 32px !important; } 

.p-0 { padding: 0 !important; } 
.p-8 { padding: 8px !important; } 
.p-16 { padding: 16px !important; } 
.p-20 { padding: 20px !important; } 
.p-24 { padding: 24px !important; } 
.p-32 { padding: 32px !important; } 
.p-40 { padding: 40px !important; } 
.p-48 { padding: 48px !important; }
.p-64 { padding: 64px !important; } 

.pt-0 { padding-top: 0 !important; } 
.pt-8 { padding-top: 8px !important; } 
.pt-16 { padding-top: 16px !important; } 
.pt-20 { padding-top: 20px !important; } 
.pt-24 { padding-top: 24px !important; } 
.pt-32 { padding-top: 32px !important; } 
.pt-40 { padding-top: 40px !important; } 
.pt-48 { padding-top: 48px !important; } 

.pb-0 { padding-bottom: 0 !important; } 
.pb-8 { padding-bottom: 8px !important; } 
.pb-16 { padding-bottom: 16px !important; } 
.pb-20 { padding-bottom: 20px !important; } 
.pb-24 { padding-bottom: 24px !important; } 
.pb-32 { padding-bottom: 32px !important; } 
.pb-40 { padding-bottom: 40px !important; } 
.pb-48 { padding-bottom: 48px !important; } 

.pl-0 { padding-left: 0 !important; } 
.pl-8 { padding-left: 8px !important; } 
.pl-16 { padding-left: 16px !important; } 
.pl-20 { padding-left: 20px !important; } 
.pl-24 { padding-left: 24px !important; } 
.pl-32 { padding-left: 32px !important; } 

.pr-0 { padding-right: 0 !important; } 
.pr-8 { padding-right: 8px !important; } 
.pr-16 { padding-right: 16px !important; } 
.pr-20 { padding-right: 20px !important; } 
.pr-24 { padding-right: 24px !important; } 
.pr-32 { padding-right: 32px !important; } 

.px-0 { padding-left: 0 !important; padding-right: 0 !important; } 
.px-8 { padding-left: 8px !important; padding-right: 8px !important; } 
.px-16 { padding-left: 16px !important; padding-right: 16px !important; } 
.px-20 { padding-left: 20px !important; padding-right: 20px !important; } 
.px-24 { padding-left: 24px !important; padding-right: 24px !important; } 

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } 
.py-8 { padding-top: 8px !important; padding-bottom: 8px !important; } 
.py-16 { padding-top: 16px !important; padding-bottom: 16px !important; } 
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; } 
.py-24 { padding-top: 24px !important; padding-bottom: 24px !important; } 
.py-32 { padding-top: 32px !important; padding-bottom: 32px !important; } 

@media (max-width: 768px) {
  .p-40 { padding: 20px !important; }
  .p-48 { padding: 24px !important; }
  .p-64 { padding: 32px !important; }

  .pt-40 { padding-top: 20px !important; }
  .pt-48 { padding-top: 24px !important; }

  .pb-40 { padding-bottom: 20px !important; }
  .pb-48 { padding-bottom: 24px !important; }
  
  .pl-32 { padding-left: 16px !important; }
}

.mt-80-responsive { margin-top: 80px !important; } 
.mt-40-responsive { margin-top: 40px !important; } 
.mb-80-responsive { margin-bottom: 80px !important; } 
.mb-40-responsive { margin-bottom: 40px !important; } 

@media (max-width: 1280px){
 .mt-80-responsive { margin-top: 64px !important; } 
 .mb-80-responsive { margin-bottom: 64px !important; } 
 .mt-40-responsive { margin-top: 32px !important; } 
 .mb-40-responsive { margin-bottom: 32px !important; } 
}

@media (max-width: 1024px){
 .mt-80-responsive { margin-top: 48px !important; } 
 .mb-80-responsive { margin-bottom: 48px !important; } 
 .mt-40-responsive { margin-top: 24px !important; } 
 .mb-40-responsive { margin-bottom: 24px !important; } 
}

@media (max-width: 768px){
 .mt-80-responsive { margin-top: 40px !important; } 
 .mb-80-responsive { margin-bottom: 40px !important; } 
 .mt-40-responsive { margin-top: 20px !important; } 
 .mb-40-responsive { margin-bottom: 20px !important; } 
}

@media screen and (max-width: 768px) { 
  br.pc { display: none; } 
 .pc-only { display: none; } 
}

@media screen and (min-width: 769px) { 
  br.mo { display: none; } 
 .mo-only { display: none; } 
}

.link-underline { text-decoration: underline; cursor: pointer; } 
.link-underline:hover { text-decoration: underline; color: var(--text-highlight); }