@charset "utf-8";


/* Pretendard Font Family 정의 */
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
/* Token variables */
	/* color */
	--black: #000;
	--black-rgb: 0,0,0;
	--white: #fff;
	--white-rgb: 255,255,255;	
	
	--blue-500: #0d6efd;
	--blue-500-rgb: 13,110,253;
	--red-500: #D93B30;
	--red-500-rgb: 217,59,48;
	--green-500: #4B830D;
	--green-500-rgb: 75,131,13;
	--yellow-100: #FFFBF1;
	--yellow-100-rgb: 255, 251, 241;
	--yellow-200: #FBF1D4;
	--yellow-200-rgb: 251, 241, 212;
	--yellow-500: #FFB546;
	--yellow-500-rgb: 255,181,70;
	--violet-50: #F7F6FF; /*연보라색*/
	--violet-50-rgb: 247,246,255;
	--violet-500: #4C4197; /* f */ 
	--violet-500-rgb: 76, 65, 151;
	
	/* grayScale */
	--gray-100: #fbfbfb; /* f */ 
	--gray-100-rgb: 251, 251, 251;
	--gray-150: #f2f2f2; /* f */ 
	--gray-150-rgb: 242,242,242;
	--gray-200: #e9ecef;
	--gray-200-rgb: 233,236,239;
	--gray-300: #d9d9d9; /* f */ 
	--gray-300-rgb: 217,217,217;
	--gray-400: #c3c3c5; /* f */ 
	--gray-400-rgb: 195,195,197;
	--gray-500: #adb5bd;
	--gray-500-rgb: 173,181,189;
	--gray-600: #666666; /* f */ 
	--gray-600-rgb: 102,102,102;
	--gray-700: #4B506A;
	--gray-700-rgb: 75,80,106;
	--gray-800: #333333; /* f */ 
	--gray-800-rgb: 51,51,51;
	--gray-900: #222222; /* f */ 
	--gray-900-rgb: 34,34,34;

	/* primary */
	--color-primary: var(--violet-500);
	--color-primary-rgb: var(--violet-500-rgb);
	/* secondary */
	--color-secondary: var(--gray-700);
	--color-secondary-rgb: var(--gray-700-rgb);
	
	/* font base --font- */
	--font-family-base: 'Pretendard', 'Apple SD Gothic Neo', 'Segoe UI', system-ui, -apple-system, sans-serif;	
	/* ============================================
		Typography Scale (base 기준으로 scale ratio 적용)
		모바일(320px) :  약 14px	약 28px
		태블릿(768px) :  약 16px	약 32px
		pc(1920px)   :  약 18px	   약 36px
	============================================ */
	--font-size-base: clamp(1rem, 0.5rem + 1vw, 1.125rem); /* 본문 */
	--font-size-scale-ratio: 1.25; /* 각 단계 간 비율 (1.25 = 25% 증가) */

	--font-size-xs: calc(var(--font-size-base) / var(--font-size-scale-ratio));  /* 작은 글씨 14.4/18 12.8/16 */
	--font-size-sm: var(--font-size-base);                                       /* 기본(body) pC:18 mo:16 */
	--font-size-md: calc(var(--font-size-base) * var(--font-size-scale-ratio));  /* h6~h5 22.5/18 20/16 */
	--font-size-lg: calc(var(--font-size-base) * (var(--font-size-scale-ratio) * 1.25)); /* h4~h3 28.125/18 25/16 */
	--font-size-xl: calc(var(--font-size-base) * (var(--font-size-scale-ratio) * 1.5));  /* h2  34/18 30/16 */
	--font-size-xxl: calc(var(--font-size-base) * (var(--font-size-scale-ratio) * 2));   /* h1 45/18 40/16 */

	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-base: 1;
	--line-height-sm: 1.2;
	--line-height-md: 1.3;
	--line-height-lg: 1.6;

	--font-color-base: var(--gray-800);
	--font-color-base-rgb: var(--gray-800-rgb);
	--font-color-light: var(--gray-600);
	--font-color-light-rgb: var(--gray-600-rgb);
	--font-color-inverse: var(--white);
	--font-color-inverse-rgb: var(--white-rgb);
	--font-color-primary: var(--color-primary);
	--font-color-primary-rgb: var(--color-primary-rgb);

	/* background base --bg- */
	--bg-base: var(--white);
	--bg-base-rgb: var(--white-rgb);
	--bg-primary: var(--color-primary);
	--bg-tint-primary: var(--violet-50); /*연보라색*/
	--bg-tint-primary-rgb: var(--violet-50-rgb);
	--bg-tint-secondary: var(--gray-100);
	--bg-tint-secondary-rgb: var(--gray-100-rgb);
	--bg-tint-yellow: var(--yellow-100); /*연노란색*/
	--bg-tint-yellow-rgb: var(--yellow-100-rgb);

	/* shadow --shadow- */
	--shadow-base: 0 0.25em 0.25em rgba(var(--black-rgb), 0.15);

	/* radius --border-radius- */
	--border-radius-sm: 0.2500em;
	--border-radius-md: 0.5000em;
	--border-radius-lg: 0.7500em;

	/* padding --padding- */
	--padding-base-y: 1.5000em;
	--padding-base-x: 1.3125em;
	--padding-base: 1.3125em;

	/* border --border- */


/* 컴포넌트 */
	/* body font style */
	--body-font-family: var(--font-family-base);
	--body-font-size: var(--font-size-base);
	--body-font-weight: var(--font-weight-regular);
	--body-line-height: var(--line-height-lg);
	--body-font-color: var(--font-color-base);
	--body-font-color-rgb: var(--font-color-base-rgb);
	/* layout --layout- */
	--layout-max-width: 63.8750rem;
	--layout-padding-y-desktop: var(--padding-base-y);
	--layout-padding-y-mobile: var(--padding-base-y);
	--layout-padding-x-desktop: var(--padding-base-x);
	--layout-padding-x-mobile: var(--padding-base-x);
	--layout-padding-y: var(--padding-base-y);
	--layout-padding-x: var(--padding-base-x);
	/* section --section- */
	--section-padding-y-desktop: 5.0000em;
	--section-padding-x-desktop: 5.0000em;
	--section-padding-y-mobile: 3.5714em;
	--section-padding-x-mobile: 3.5714em;

}
/* reboot ------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*, *::before, *::after {
	box-sizing: border-box;
}
:focus {
	outline-width:medium;
}
a {
	text-decoration: none;
	color: inherit;
}
img, svg {
	vertical-align: middle;
}
button, input, optgroup, select, textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}
button {
	text-transform: none;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* common ------------------------------------------------------- */
/* 한국어 전용 스타일 */
:lang(ko) {
	word-break: keep-all;      /* 한글 단어 중간에서 줄바꿈 방지 */
	overflow-wrap: break-word; /* 필요시 줄바꿈 허용 */
}
/* 영어 전용 스타일 */
:lang(en) {
	word-break: normal;        /* 영어 단어는 기본 규칙 */
	overflow-wrap: anywhere;   /* 긴 영어 단어 줄바꿈 가능 */
}
/* 혼합 텍스트 보조 클래스 */
.hybrid-text {
	word-break: keep-all;      /* 기본 한글 */
	overflow-wrap: break-word; /* 필요시 줄바꿈 허용 */
}
/* 영어 단어 강조 필요시 span 사용 */
.hybrid-text span.en {
	word-break: normal;
	overflow-wrap: anywhere;
}

img {
	display: inline-block;
	width: 100%;
}
/* html {	
	font-size: var(--font-size-base);
} */
body {
	font-size: var(--body-font-size);
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--body-font-color);
	background-color: var(--color-bg);
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}
body.no-scroll {
  overflow: hidden;
}
/* hidden */
.hidden, .hide {
	display: none!important;
}
.visually-hidden {
	position: absolute!important;
	width: 0!important;
	height: 0!important;
	padding: 0!important;
	margin: -1px!important;
	overflow: hidden!important;
	clip: rect(0, 0, 0, 0)!important;
	white-space: nowrap!important;
	border: 0!important;
	color: transparent!important;
	font-size: 0!important;
	opacity: 0!important;
}
/* padding 0 */
.p-0 {padding: 0 !important;}
.px-0 {padding-left: 0 !important; padding-right: 0 !important;}
/* background color */
.bg-tint-primary {
	background-color: var(--bg-tint-primary);
}
.bg-tint-secondary {
	background-color: var(--bg-tint-secondary);
}
.bg-tint-yellow {
	background-color: var(--bg-tint-yellow);
}
.bg-grad-wy {
	background: -webkit-linear-gradient(top, var(--white), var(--yellow-200));
	background: -moz-linear-gradient(top, var(--white), var(--yellow-200));
	background: linear-gradient(to bottom, var(--white), var(--yellow-200));
}
.bg-grad-yy {
	background: -webkit-linear-gradient(top, var(--yellow-200), var(--yellow-100));
	background: -moz-linear-gradient(top, var(--yellow-200), var(--yellow-100));
	background: linear-gradient(to bottom, var(--yellow-200), var(--yellow-100));
}
.bg-grad-yg {
	background: -webkit-linear-gradient(top, var(--yellow-100), var(--gray-100));
	background: -moz-linear-gradient(top, var(--yellow-100), var(--gray-100));
	background: linear-gradient(to bottom, var(--yellow-100), var(--gray-100));
}
.bg-grad-gy {
	background: -webkit-linear-gradient(top, var(--gray-100), var(--yellow-100));
	background: -moz-linear-gradient(top, var(--gray-100), var(--yellow-100));
	background: linear-gradient(to bottom, var(--gray-100), var(--yellow-100));
}

/* ==================================
해상도 구간 : PC First(PC(기준 해상도 1440px) → 모바일)
-------------------------------
XXX-Large: 1400px~
XX-Large: ~1399px, 1200~1399px
X-Large: ~1199px, 992~1199px
Large: ~991px, 768~991px
Medium: ~767px, 576~767px
Small: 575px, 480~575px
X-Small: ~479px
================================== */
/* XXX-Large devices (extra large desktops, 1400px and up) */
/* mobile hidden : PC 기준 항상 보이게 */
.pc-only {display: block;}
.mo-only {display: none;}
.only-mobile,
.only-tablet,
.only-wide {
	display: none !important;
}
.only-desktop {display: block !important;}

/* row: 열 */
.row { 
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 0.6250rem;
}
.section-block.row {
	justify-content: center;
}
/* col: row 안 아이템 균등비율 필요 시 */
.col { 
	flex: 1;
}
.row-reverse {
	flex-direction: row-reverse;
}
/* column: flex 세로 정렬  */
.column { 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 1.8750rem;
}
.text-wrap.column {
	gap: 0.9375rem;
}
.section-block.column {
	gap: 0.9375rem;
}
.column-start {
	align-items: flex-start;
	text-align: left;
}
.column-end {
	align-items: flex-end;
	text-align: right;
}
.image-wrap {
	position: relative;
}
/* section */
.section {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-inline: var(--layout-padding-x-desktop);
}
.section-block {
	--section-padding-y: var(--section-padding-y-desktop);
	width: 100%;
	height: 100%;
	max-width: var(--layout-max-width);
	padding-block: var(--section-padding-y);
	margin: 0 auto;
}
.section__title {
	font-size: var(--font-size-md);
	line-height: var(--line-height-md);
	font-weight: var(--font-weight-bold);
	color: var(--font-color-base);
}
.section__title--lg {
	font-size: var(--font-size-xl);
}
.section__text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-md); 
	font-weight: var(--font-weight-medium);
	color: var(--font-color-base);
}
.section__text--lg {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.text--primary {
	color: var(--font-color-primary);
}
.text--gray {
	color: var(--font-color-light);
}
.text--white {
	color: var(--font-color-inverse);
}
/* list-group */
.list-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.list-group-item {
	display: flex;
	justify-content: space-between;
}
/* tag */
.tag {
	--bg-color: var(--color-primary);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--color-primary);
	--border-radius: 0.2500rem;
	
	background-color: var(--bg-color);
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	padding: 0.5000em 1em;
}
.tag--ghost {
	--bg-color: transparent;
	--border-width: 0;
	--border-color: transparent;
	padding: 0;
}
.tag__text {
	--font-size: 0.8333em;
	--line-height: var(--line-height-base);
	--font-weight: var(--font-weight-semibold);
	--font-color: var(--font-color-inverse);
	--text-align: center;

	display: inline-block;
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	text-align: var(--text-align);
	color: var(--font-color);
}
.tag--ghost .tag__text {
	--font-color: var(--font-color-primary);
}
/* badge */
.badge {
	--bg-color: var(--color-primary);
	--border-width: 1px;	
	--border-style: solid;
	--border-color: var(--bg-color);
	--border-radius: 0.2500rem;
	--font-size: 0.75em;
	--line-height: var(--line-height-md);
	--font-weight: var(--font-weight-medium);
	--font-color: var(--font-color-inverse);
	--text-align: center;

	display: inline-block;
	background-color: var(--bg-color);
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);	
	color: var(--font-color);
	text-align: var(--text-align);
	padding: 0.2813em 0.4219em;
}
.badge--primary {
	--bg-color: var(--color-primary);
	--font-color: var(--font-color-inverse);
}
.badge--secondary {
	--bg-color: var(--white);
	--border-color: var(--white);
	--font-color: var(--font-color-primary);
}
.badge--line {
	--bg-color: transparent;
	--font-color: var(--font-color-primary);
}
.badge--ghost {
	--bg-color: transparent;
	--border-color: transparent;
	--font-color: var(--font-color-primarye);
	border: none;
}

/* table */
.table-wrap {
	width: 100%;
	overflow-x: auto;
	/* -webkit-overflow-scrolling: touch; */
	border-radius: 0.5rem;
}
table {
	width: 100%;
	table-layout: fixed;
	text-align: center;
}
th,
td {
	--font-size: 0.7528em;
	--font-color: var(--font-color-base);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--gray-200);
	--bg-color: var(--bg-base);
	
	font-size: var(--font-size);
	line-height: var(--line-height-sm);
	color: var(--font-color);
	font-weight: var(--font-weight-medium);
	border-bottom: var(--border-width) var(--border-style) var(--border-color);
	background-color: var(--bg-color);
	padding: 0.6875rem 0.5vw;
	vertical-align: middle;
}
th[scope="row"] {
	padding: 0.6875rem 1.5vw;
}
th[colspan] {
	--font-size:1.0000rem;
	--border-width: 0;
	font-weight: var(--font-weight-semibold);	
	padding: 0.7500rem 0.7380em;
}
thead th {
	--bg-color: var(--color-primary);
	--font-size: 0.7528em;
	--font-color: var(--font-color-inverse);
}
tbody th,
tbody td {
	--font-size: 0.7778em;
}
tbody th {
	text-align: left;
}
tbody tr:not(:first-child) th[colspan] {
	padding-top: 1.8750rem;
}
tbody tr:hover th:not(th[colspan]),
tbody tr:hover td {
	--bg-color: var(--bg-tint-primary);
}
.option-badge {
	--font-size: 0.8333em;
	display: inline-block;
	font-size: var(--font-size);
}
.icon-check {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url(../images/icon_check.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}
.icon-help {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url(../images/icon_help.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}
.icon-help:hover {
	background-image: url(../images/icon_help_hover.svg);
}
/* popover */
.pop-comp-wrapper {
	--font-size: 0.7500rem;
	--font-color: var(--font-color-base);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--gray-300);
	--border-radius: var(--border-radius-md);
	--bg-color: var(--bg-base);
	
	font-size:var(--font-size);
	color: var(--font-color);
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--bg-color);
	box-shadow: var(--shadow-base);
	text-align: left;
	flex-wrap: wrap;
	padding: 0.5rem;
	z-index: 1;
}
/* button */
.btn {
	--bg-color: var(--gray-200);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--gray-150);
	--border-radius: 0.2500rem;
	--font-size: 0.8889em;
	--line-height: var(--line-height-md);
	--font-weight: var(--font-weight-medium);
	--font-color: var(--font-color-base);
	--text-align: center;
	background-color: var(--bg-color);
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	color: var(--font-color);
	text-align: var(--text-align);
	padding: var(--padding-y) var(--padding-x);
}
.btn-primary {
	--bg-color: var(--color-primary);
	--border-color: var(--color-primary);
	--font-color: var(--font-color-inverse);
}
.btn-secondary {
	--bg-color: var(--gray-600);
	--border-color: var(--gray-600);
	--font-color: var(--font-color-inverse);
}
.btn-fit {
	--min-width: 100%;
	min-width: var(--min-width);
}
.btn-sm {
	--min-width: 5.0000em;
	--min-height: 1.0000em;
	--font-size: 0.7778em;
	--line-height: var(--line-height-sm);
	--font-weight: var(--font-weight-semibold);	
	--padding-y: 0.2222em;
	--padding-x: 0.5000em;
	min-width: var(--min-width);
	min-height: var(--min-height);
}
.btn-md {
	--font-size: 1.0000em;
	--line-height: var(--line-height-sm);
	--font-weight: var(--font-weight-semibold);
	--padding-y: 0.5556em;
	--padding-x: 0.5556em;	
}
.btn-lg {
	--min-width: 10em;
	--font-size: clamp(1em, 1.5vw, 1.3333em);
	--line-height: 1.1875em;
	--font-weight: var(--font-weight-semibold);
	--padding-y: 0.4444em;
	--padding-x: 0.7778em;
	
	min-width: var(--min-width);
}
.ic-btn {
	padding: 0.5em;
}
/* accordion */
.accordion {
	display: block;
	width: 100%;
}
.collapse:not(.is-show) {
	display: none;
}
.accordion-item {
	border-bottom: 1px solid var(--gray-200);
}
.accordion-button {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7778em;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-sm);
	color: var(--gray-800);
	text-align: left;
	transition: opacity .2s ease, transform .2s ease;
	padding: 0.9375rem 1.4286em;
	overflow-anchor: none;
}
.accordion-collapse {
	padding: 0.6250rem 0.8333em 1.2500rem;
}
.accordion-body {
	min-height: 5.2857em;
	display: flex;
	align-items: center;	
	font-size: 0.7778em;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-sm);
	color: var(--gray-800);
	text-align: left;
	padding: 1.4286em;
}
/* collapsed icon */
.icon.collap {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	transition: transform 0.25s;
}
.icon.collap:after {
	display: inline-block;
	content: " ";
	width: 0.5rem;
	height: 0.5rem;	
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	transform: translateX(-0.25em);
	transform: translateY(-0.25em);
	transform: rotate(135deg);
	margin-top: -0.25em;
}
.is-active > .icon.collap,
.accordion-button:not(.collapsed) > .icon.collap {
	transform: rotate(-180deg);
}
/* swiper */
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	position: relative;
}
.swiper-button-next,.swiper-button-prev {
	--swiper-navigation-size: 2rem;
	--swiper-theme-color: var(--gray-600);
	--swiper-navigation-sides-offset: -6px;
	top: var(--swiper-navigation-top-offset,50%);
	width: calc(var(--swiper-navigation-size)/ 44 * 60);
}
.swiper-pagination-bullet {
	--swiper-pagination-color: var(--gray-600);
	--swiper-pagination-bullet-inactive-color: var(--gray-600);
}
/* layout ------------------------------------------------------- */
/* 헤더 */
.header {
	position: relative;
	width: 100%;
	min-height: 4.2500em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5000em;
	margin: auto;
	z-index: 1020;
}
.header__inner {
	width: 100%;
	max-width: var(--layout-max-width);
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 5.0000em;
	row-gap: 1em;
}
.navbar-toggler {
	display: none;
}
.header__content {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}
.control {
	display: flex;
	align-items: center;
	gap: 0.7500em;	
	padding-right: 2.0000em;
	margin-left: auto;
}
.control_m {
	display: none;
}
.header__brand .brand-img {
	width: 5.2500em;
}
.offcanvas-body {
	width: 100%;
	display: flex;
	align-items: center;
}
.navbar-nav {
	display: flex;
	align-items: center;
	column-gap: 3.3333em;
}
.nav-item {
	flex: 1 auto;
	display: flex;
	flex-direction: column;
}
.nav-link {
	flex: 1 auto;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.25em;
	color: var(--gray-800);
	padding: 0.2500em;
	cursor: pointer;
}
.nav-link:hover {
	color: var(--gray-800);
}
.nav-link > span {
	flex: auto;
	font-size: 1.1250rem;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-sm);
}
.btn_toggle {
	display: none;
}
/* dropdown */
.dropdown {
	position: relative;
}
.dropdown > ul:not(.dropdown-menu) {
	display: flex;
	align-items: center;
}
.dropdown-menu {
	display: none;
	min-width: 10em;
	position: absolute;
	top: 100%;
	left: 40%;
	border: 1px solid var(--gray-300);
	background-color: var(--white);
	padding: 0.5em 0;
	border-radius: 0.3125rem;
	white-space: nowrap;
	box-shadow: var(--shadow-base);

	opacity: 0;
	visibility: hidden;
	/* transform: translateY(10px); */
	transition: opacity .2s ease, transform .2s ease;
}
.dropdown-menu .nav-link > span {
	font-size: 1rem;
}
.dropdown-menu > .nav-item {
	flex-direction: row;
	align-items: center;
	padding: 0.4444rem 1em;
	gap: 0.4444rem;
}
.dropdown-menu > .nav-item > .nav-link {
	padding: 0;
}
.dropdown-menu .nav-link .icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 1.0000rem;
	height: 1.0000rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.qr { background-image: url(../images/icon_qr.svg); }
.page { background-image: url(../images/icon_page.svg); }
.contact { background-image: url(../images/icon_contact.svg); }
.data { background-image: url(../images/icon_data.svg); }
.cs { background-image: url(../images/icon_cs.svg);	}
.business { background-image: url(../images/icon_business.svg); }
.marketing { background-image: url(../images/icon_marketing.svg); }
.parking { background-image: url(../images/icon_parking.svg); }
/* PC hover & JS toggle 공통 */
.dropdown-menu.is-open {
	display: flex;
	flex-direction: column;
	row-gap: 0.2500em;
}
/* dropdown-menu : Mobile toggle*/
.dropdown-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(-0.000em);
}

/* Footer */
.footer {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: var(--gray-800);
	color: var(--font-color-inverse);
	padding: 2.8125rem 1.8750rem;
}
.footer strong {
	font-weight: var(--font-weight-bold);
}
.footer__inner {
	width: 100%;
	max-width: 95.7925rem;	
	display:flex;
	flex-wrap: wrap;
	column-gap: 1.8750em;
	row-gap: 1.8750em;
	/* padding: 0 5.764vw; */
}
.footer__content {
	display:flex;
}
.company {
	flex-direction: column;
}
.footer__brand {
	margin-bottom: 2.0000rem;
}
.footer__brand .brand-img {
	max-width: 6.5000em;
}
.footer__info {
	display: flex;
	flex-direction: column;
	gap: 0.6250em;
}
.footer__info > * {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.6250rem;
	row-gap: 0.2500rem;
	font-size: 0.7222em;
	line-height: 1.2;
}
.footer__info strong {
	font-weight: var(--font-weight-semibold);
}
.sitemap {
	flex-wrap: wrap;
	gap: 3rem;
	margin: 0 auto;
}
.sitemap > * {
	min-width: 10em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.content__col > * {
	display: flex;
	flex-direction: column;
	gap: 1.1667em;
}
.sitemap * {
	font-size: 1rem;
	line-height: var(--line-height-sm);
	font-weight: var(--font-weight-light);
}
.sitemap h4 {
	font-weight: var(--font-weight-semibold);
}
.externalLink {
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
}
.externalLink img {
	max-width: 8.7819em;
}
.card {
	--font-color: var(--font-color-base);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--gray-200);
	--border-radius: var(--border-radius-md);
	--bg-color: var(--bg-base);
	--box-shadow: var(--shadow-base);

	display: inline-block;
	border: var(--border-width) var(--border-style) var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--bg-color);
	box-shadow: var(--box-shadow);
}
.card__header {
	border-bottom: var(--border-width) var(--border-style) var(--border-color);
	border-radius: calc(var(--border-radius) - var(--border-width)) calc(var(--border-radius) - var(--border-width)) 0 0;
	padding: calc(var(--padding-base) / 2) calc(var(--padding-base) / 1.5);
}
.card__title {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: var(--font-weight-semibold);
	color: var(--font-color);
}
.card__body {	
	padding: calc(var(--padding-base) / 2) calc(var(--padding-base) / 1.5);
}
.card__footer {
	border-top: var(--border-width) var(--border-style) var(--border-color);
	border-radius: 0 0 calc(var(--border-radius) - var(--border-width)) calc(var(--border-radius) - var(--border-width));
	padding: calc(var(--padding-base) / 2) calc(var(--padding-base) / 1.5);
}
/* ribbon */
.ribbon {
	--font-color: var(--font-color-inverse);
	--font-size: 0.7rem;
	--line-height: 20px;
	--font-weight: var(--font-weight-semibold);
	--bg-color: var(--red-500);
	--box-shadow: 0 3px 10px -3px rgba(var(--gray-600-rgb), 1);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--red-500);
	--border-radius: 0.2500rem;

	width: 75px;
	height: 75px;
	position: absolute;
	top: -5px;
	right: -5px;
	text-align: right;
	overflow: hidden;
	z-index: 1;
}
.ribbon span {
	width: 100px;
	display: block;
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	color: var(--font-color);
	background-color: var(--bg-color);
	box-shadow: var(--box-shadow);
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	top: 19px;
	right: -21px;
	transform: rotate(45deg);
}
.ribbon span {
	--font-color: var(--font-color-inverse);
	--font-size: 0.7rem;
	--line-height: 20px;
	--font-weight: var(--font-weight-semibold);
	--bg-color: var(--red-500);
	--box-shadow: 0 3px 10px -3px rgba(var(--gray-600-rgb), 1);
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--red-500);
	--border-radius: 0.2500rem;
	
	display: block;
	width: 100px;
	position: absolute;
	top: 19px;
	right: -21px;

	background-color: var(--bg-color);
	box-shadow: 0 3px 10px -3px rgba(var(--gray-600-rgb), 1);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	line-height: var(--line-height);
	color: var(--font-color);
	text-align: center;
	text-transform: uppercase;
	transform: rotate(45deg);
	
}
.ribbon span:before,
.ribbon span:after {
	--border-width: 3px;
	--border-color: var(--red-500);
	content: "";
	position: absolute;
	top: 100%;
	z-index: -1;
}
.ribbon span:before {
	left: 0;
	border-top: var(--border-width) var(--border-style) var(--border-color);
	border-right: var(--border-width) var(--border-style) transparent;
	border-bottom: var(--border-width) var(--border-style) transparent;
	border-left: var(--border-width) var(--border-style) var(--border-color);
}
.ribbon span:after {
	right: 0;
	border-top: var(--border-width) var(--border-style) var(--border-color);
	border-right: var(--border-width) var(--border-style) var(--border-color);
	border-bottom: var(--border-width) var(--border-style) transparent;
	border-left: var(--border-width) var(--border-style) transparent;
}


/* page ------------------------------------------------------- */
.bg-tint-primary .section-block {
	--section-padding-y: 3.8889em;
}
.onboarding.column {
	gap: 8.8889em;
}
.onboarding .column {
	text-align: left;
	align-items: flex-start;
	gap: 0.4444em;
}
.onboarding > .column {
	align-items: flex-start;
	gap: 0.7778em;
}
.onboarding .section__text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-md);
	font-weight: var(--font-weight-bold);
}
/* 앱 다운로드 */
.card-externalLink {
	position: absolute;
	left: 0.5em;
	bottom: 0.5em;
	border: none;
}
.card-externalLink .card__header {
	--font-color: var(--font-color-inverse);
	--bg-color: var(--color-primary);
	background-color: var(--bg-color);
}
.card-externalLink .externalLink {
	gap: clamp(0.25em, 1vw, 0.6250em);
}
.card-externalLink .externalLink img {
	max-width: clamp(4.0000em, 20vw, 7.5000em);
}
/* 가격 안내 */
.pricing-card > .column,
.pricing-table > .column {
	width: 100%;
}
.pricing-card .text-wrap.information {
	align-items: flex-end;
	text-align: right;
	padding: 0 calc(var(--swiper-navigation-size) * 0.5);
}
.information .section__text {
	--font-size-sm: 0.7778em;
}
.pricing-card .swiper {
	display: flex;
}
.pricing-card .swiper-wrapper {
	height: unset;
	align-items: stretch;
}
.pricing-card .swiper-slide {
	padding: 0.5000rem;
}
.card-pricing {	
	--border-color: var(--gray-200);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background-clip: border-box;
}
.card-pricing:hover {
	--border-color: var(--color-primary);
}
.card-pricing > * {
	padding: calc(var(--padding-base) / 1) calc(var(--padding-base) / 2);
}
.card-pricing .card__header {
	--font-size: var(--font-size-sm);
	--line-height: var(--line-height-md);
	--font-weight: var(--font-weight-medium);
	--bg-color: var(--bg-tint-primary);
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	background-color: var(--bg-color);
	min-height: 12.5000rem;
}
.card-pricing .card__header .text-wrap {
	height: 100%;
	justify-content: space-between;
	gap: 0.75rem;
}
.card-pricing .card__header .text-wrap > .text {
	font-size: calc(var(--font-size-sm) / 1.15);
}
.pric {
	--font-weight: var(--font-weight-bold);
	font-size: calc(var(--font-size) * 1.5);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	margin-top: auto;
}
.pric .unit {
	--line-height: var(--line-height-sm);
	--font-weight: var(--font-weight-medium);
	font-size: calc(var(--font-size) / 1.25);
}
.card-pricing .badge {
	--bg-color: transparent;
	--font-color: var(--font-color-base);
}
.card-pricing:hover .badge {
	--bg-color: var(--bg-base);
	--font-color: var(--font-color-primary);

}
.card-pricing:hover .card__header {
	--bg-color: var(--bg-primary);
	color: var(--font-color-inverse);
	background-color: var(--bg-color);
}
.card-pricing .card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: calc(var(--padding-base) / 1);
}
.card-pricing .card__body .title {
	font-size: 1rem;
	line-height: var(--line-height-lg);
	font-weight: var(--font-weight-semibold);
	text-align: left;
}
.card-pricing .list-group {
	font-size: 0.8750rem;
	line-height: var(--line-height-sm);
	font-weight: var(--font-weight-medium);
	gap: 0.75rem;
}
.card-pricing .list-group .list-group-item {
	gap: 0.75em;
}
.card-pricing .list-group .list-group-item > * {
	display: flex;
	gap: 0.5em;
}
.card-pricing .card__footer {
	border: none;
	margin-top: auto;
}
.card-pricing:hover .btn {
	--bg-color: var(--color-primary);
	--font-color: var(--font-color-inverse);
}
.pricing-box {
	height: 100%;
	justify-content: center;
	z-index: 2;
}
/* 대형 데스크탑 */
/* XX-Large devices (large desktops, 1200px ~ 1399.98px) */
@media (max-width: 1399.98px) {
	.hidden-xxl { display: none !important; }
	.show-xxl { display: block !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { }

/* 일반 데스크탑 */
/* X-Large devices (desktops, 992px ~ 1199.98px) */
@media (max-width: 1199.98px) {
	.hidden-xl { display: none !important; }
	.show-xl { display: block !important; }
	.control_m {
		display: none;
	}

	.control {
		display: block;
	}

}
@media (min-width: 992px) and (max-width: 1199.98px) { }

/* 모바일 가로 / 태블릿 세로 */
/* Large devices (tablets & small desktops, 768px ~ 991.98px) */
@media (max-width: 991.98px) {
	.hidden-lg { display: none !important; }
	.show-lg { display: block !important; }
	
	.pc-only { display: none; }
	.mo-only { display: block; }

	.header {
		min-height: 3.8750rem;
	}
	.header__inner {
		column-gap: 1rem;
	}
	.control_m {
		display: block;
	}
	.control {
		display: none;
	}
	.navbar-toggler {
		display: block;
	}
	.navbar-nav {
		width: 100%;
		flex-direction: column;
	}
	.offcanvas {
		visibility: hidden;
		width: 100%;
		max-width: 100%;
		position: fixed;
		top: 3.8750rem;
		right: 0;
		bottom: 0;
		transform: translateX(100%);
		background-color: var(--bg-base);
		padding: 0.6250em 0;
		display: flex;
		flex-direction: column;		
		transition: transform .2s ease-in-out;	
	}
	.offcanvas.is-show {
		visibility: visible;
		transform: none;
		overflow: auto;
	}
	.offcanvas.is-show .offcanvas-body {
		padding: 0 1.2500em;
	}
	/* dropdown */
	.dropdown {
		width: 100%;
	}
	.dropdown > ul:not(.dropdown-menu) {
		width: 100%;
		border-top: 1px solid rgba(var(--black-rgb), 0.15);
	}
	.dropdown:first-child > ul:not(.dropdown-menu) {
		border-top: 0 solid rgba(var(--black-rgb), 0.15);
	}
	.nav-link > span {
		font-size: 1.2500em;		
	}
	.dropdown-menu {
		position: static;
		min-width: unset;
		border: none;
		background-color: var(--gray-100);
		padding: 0.9375em 0;
		box-shadow: none ;
		margin: 0 1rem 1rem;
		row-gap: 0.500em;
	}
	.dropdown-menu .nav-link .icon {
		width: 1.25em;
		height: 1.25em;
	}
	.dropdown-menu .nav-link > span  {
		font-size: 1.12500em;
		line-height: var(--line-height-md);
	}
	.dropdown:not(.dropdown-menu) > ul:not(.dropdown-menu) .nav-item .nav-link {
		flex: 1 auto;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: var(--gray-800);
		padding: 0.9375em;
	}
	
	/* page ------------------------------------------------------- */
	.pricing-card .card-pricing {
		--border-color: var(--color-primary);
	}
	.pricing-card .card-pricing .badge {
		--bg-color: var(--bg-base);
		--font-color: var(--font-color-primary);
	}
	.pricing-card .card-pricing .card__header {
		--bg-color: var(--bg-primary);
		color: var(--font-color-inverse);
		background-color: var(--bg-color);
	}
	.pricing-card .btn {
		--bg-color: var(--color-primary);
		--font-color: var(--font-color-inverse);
	}
	.pricing-card .swiper {
		padding: 0 calc(var(--swiper-navigation-size) * 0.75);
	}
	.card-pricing .card__header {
		min-height: 11.8750rem;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) { }

/* 대형 모바일 / 태블릿 가로 */
/* Medium devices (tablets & large mobile, 576px ~ 767.98px) */
@media (max-width: 767.98px) {
	.hidden-md { display: none !important; }
	.show-md { display: block !important; }
	
	.card-pricing .card__header .text-wrap > .text {
		font-size: calc(var(--font-size-sm) / 1);
	}
	.pric {
		font-size: calc(var(--font-size) * 2);
	}
	
}
@media (min-width: 576px) and (max-width: 767.98px) {}

/* 작은 모바일 (가로형) */
/* Small devices (landscape phones, 480px ~ 575.98px) */
@media (max-width: 575.98px) {	
	.hidden-sm { display: none !important; }
	.show-sm { display: block !important; }	

	/* row, column 정렬 변경 */
	.row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.column-end, .column-start {
		align-items: center;
		text-align: center;
	}
	/* table */
	th, td {
		padding: 0.6875rem 0.75vw;
	}

	/* page ------------------------------------------------------- */
	.card__body {
		padding: calc(var(--padding-base) / 3) calc(var(--padding-base) / 2);
	}	
}
@media (min-width: 480px) and (max-width: 575.98px) { }

/* 초소형 모바일 (세로형) */
/* X-Small devices (mobile, up to 479.98px) */
@media (max-width: 479.98px) {
	.hidden-xs { display: none !important; }
	.show-xs { display: block !important; }	
}


/* ==================================
	DEVICE
================================== */
/* 모바일 (터치 전용 기기) */
@media (pointer: coarse) or (hover: none) {

	.pc-only { display: none; }
	.mo-only { display: block; }

	.header {
		min-height: 3.8750rem;
	}
	.header__inner {
		column-gap: 1rem;
	}
	.control {
		display: none;
	}
	.navbar-toggler {
		display: block;
	}
	.navbar-nav {
		width: 100%;
		max-width: var(--layout-max-width);
		flex-direction: column;
		margin: 0 auto;
	}
	.offcanvas {
		visibility: hidden;
		width: 100%;
		max-width: 100%;
		position: fixed;
		top: 3.8750rem;
		right: 0;
		bottom: 0;
		transform: translateX(100%);
		background-color: var(--bg-base);
		padding: 0.6250em 0;
		display: flex;
		flex-direction: column;		
		transition: transform .2s ease-in-out;	
	}
	.offcanvas.is-show {
		visibility: visible;
		transform: none;
		overflow: auto;
	}
	.offcanvas.is-show .offcanvas-body {
		padding: 0 1.2500em;
	}
	/* dropdown */
	.dropdown {
		width: 100%;
	}
	.dropdown > ul:not(.dropdown-menu) {
		width: 100%;
		border-top: 1px solid rgba(var(--black-rgb), 0.15);
	}
	.dropdown:first-child > ul:not(.dropdown-menu) {
		border-top: 0 solid rgba(var(--black-rgb), 0.15);
	}
	.nav-link > span {
		font-size: 1.2500em;		
	}
	.dropdown-menu {
		position: static;
		min-width: unset;
		border: none;
		background-color: var(--gray-100);
		padding: 0.9375em 0;
		box-shadow: none ;
		margin: 0 1rem 1rem;
		row-gap: 0.500em;
	}
	.dropdown-menu .nav-link .icon {
		width: 1.25em;
		height: 1.25em;
	}
	.dropdown-menu .nav-link > span  {
		font-size: 1.12500em;
		line-height: var(--line-height-md);
	}
	.dropdown:not(.dropdown-menu) > ul:not(.dropdown-menu) .nav-item .nav-link {
		flex: 1 auto;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: var(--gray-800);
		padding: 0.9375em;
	}
	
	/* page ------------------------------------------------------- */
	/* 가격 비교표 */
	.price-comparison tbody th {
		text-align: center;
	}
	.price-comparison tr th:last-child,
	.price-comparison tr td:last-child {
		display: none;
	}	
	.price-comparison .section-row {
		display: none;
	}
	.pricing-card .card-pricing {
		--border-color: var(--color-primary);
	}
	.pricing-card .card-pricing .badge {
		--bg-color: var(--bg-base);
		--font-color: var(--font-color-primary);

	}
	.pricing-card .card-pricing .card__header {
		--bg-color: var(--bg-primary);
		color: var(--font-color-inverse);
		background-color: var(--bg-color);
	}
	.pricing-card .btn {
		--bg-color: var(--color-primary);
		--font-color: var(--font-color-inverse);
	}
	
}
/* PC (정교한 포인터, 마우스) */
@media (pointer: fine) or (hover: hover) {

}
/* PC: hover 가능 */
@media (hover: hover) {
}
/* 모바일: hover 불가능 → 대체 스타일 */
@media (hover: none) {
}