@charset "utf-8";
/*-------------------------------------------------------------------
	분류그룹 : 웹폰트
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @ Pretendard
-------------------------------------------------------------------*/
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	src: local('Pretendard Black'),
    url(../../../font/Pretendard-Black.woff2) format('woff2'),
    url(../../../font/Pretendard-Black.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	src: local('Pretendard ExtraBold'),
    url(../../../font/Pretendard-ExtraBold.woff2) format('woff2'),
    url(../../../font/Pretendard-ExtraBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src: local('Pretendard Bold'),
    url(../../../font/Pretendard-Bold.woff2) format('woff2'),
    url(../../../font/Pretendard-Bold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	src: local('Pretendard SemiBold'),
    url(../../../font/Pretendard-SemiBold.woff2) format('woff2'),
    url(../../../font/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src: local('Pretendard Medium'),
    url(../../../font/Pretendard-Medium.woff2) format('woff2'),
    url(../../../font/Pretendard-Medium.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: local('Pretendard Regular'),
    url(../../../font/Pretendard-Regular.woff2) format('woff2'),
    url(../../../font/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src: local('Pretendard Light'),
    url(../../../font/Pretendard-Light.woff2) format('woff2'),
    url(../../../font/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	src: local('Pretendard ExtraLight'),
    url(../../../font/Pretendard-ExtraLight.woff2) format('woff2'),
    url(../../../font/Pretendard-ExtraLight.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	src: local('Pretendard Thin'),
    url(../../../font/Pretendard-Thin.woff2) format('woff2'),
    url(../../../font/Pretendard-Thin.woff) format('woff');
}


/*-------------------------------------------------------------------
	분류그룹 : Normalize
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* ------ font ------ */
html {font-size: 62.5%;}
body {font-size: 1.7rem; line-height: 1.5;}

/* ------ all style ------ */
* {line-height: 1.5; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body {color: var(--color-gray-90); word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', 'Noto Sans KR', sans-serif;}
/* html, body {color: var(--color-gray-90); word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard GOV','Pretendard', 'Noto Sans KR', sans-serif;} */
html, body {-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none;} /* 폰트확대X */

/* ------ tag ------ */
body, div, p, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd, table, th, td,
form, fieldset, legend, input, textarea, a, button, select,
span, strong, em, label, ::before, ::after {margin:0px; padding:0px; line-height: inherit; box-sizing: border-box;}
header, footer, article, aside, details, figcaption, figure, hgroup, main, menu, nav, section {display: block; margin:0px; padding:0px;}
pre {font-family: inherit;}
table, th, td {border-spacing: 0px; border-collapse:collapse;}
img, fieldset {max-width: 100%; border: 0px;}
em {font-style: normal;}
/* ------ list ------ */
ul, ol, dl, dt, dd {list-style:none;}
/* ------ link ------*/
a, a:link, a:visited, a:active, a:hover, a:focus {color: inherit; text-decoration:none;}
/* ------ form ------ */
input, textarea, select, button {border: 0; font-family: inherit;}
input[type=text], input[type=tel], input[type=password], input[type=file], input[type=number], input[type=email], input[type=date], input[type=search], select,
textarea {vertical-align:middle; -webkit-box-shadow: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px #ffffff inset !important; -webkit-text-fill-color: inherit; transition: background-color 5000s ease-in-out 0s;} /* 자동완성 */
input[type="text"]::-ms-clear {display: none;}
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {margin: 0; appearance: none; -webkit-appearance: none;}
button, input[type="button"], input[type="submit"] {cursor: pointer;}
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {display: none;}

@media screen and (max-width: 1024px) {
    html {font-size: 59%;}
}
@media screen and (max-width: 640px) {
    html {font-size: 57.5%;}
}

/*-------------------------------------------------------------------
	@공통변수
-------------------------------------------------------------------*/
:root {
    /* ------ REM ------ */
    --r-0 : 0;
    --r-02 : 0.2rem;
    --r-04 : 0.4rem;
    --r-08 : 0.8rem;
    --r-10 : 1rem;
    --r-12 : 1.2rem;
    --r-16 : 1.6rem;
    --r-20 : 2rem;
    --r-24 : 2.4rem;
    --r-28 : 2.8rem;
    --r-32 : 3.2rem;
    --r-36 : 3.6rem;
    --r-40 : 4rem;
    --r-44 : 4.4rem;
    --r-48 : 4.8rem;
    --r-52 : 5.2rem;
    --r-56 : 5.6rem;
    --r-60 : 6rem;
    --r-64 : 6.4rem;
    --r-68 : 6.8rem;
    --r-72 : 7.2rem;
    --r-76 : 7.6rem;
    --r-80 : 8rem;
    --r-84 : 8.4rem;
    --r-88 : 8.8rem;
    --r-92 : 9.2rem;
    --r-96 : 9.6rem;
    --r-100 : 10rem;

    /* ------ 색상 ------ */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-red: #FF3E3E;
    --color-red-5: #FFEAEA;
    --color-red-10: #FFD2D2;
    --color-red-20: #FFA3A3;
    --color-red-30: #FF7575;
    --color-red-40: #FF4747;
    --color-red-50: #FF3E3E;
    --color-red-60: #D93232;
    --color-red-70: #B32626;
    --color-red-80: #7A1919;
    --color-red-90: #3F0C0C;

    --color-yellow: #FFB724;
    --color-yellow-5: #FFF8E9;
    --color-yellow-10: #FFEAC1;
    --color-yellow-20: #FFE2A7;
    --color-yellow-30: #FFD47C;
    --color-yellow-50: #FFB724;
    --color-yellow-40: #FFC550;
    --color-yellow-60: #98690A;
    --color-yellow-70: #66490E;
    --color-yellow-80: #4D370B;
    --color-yellow-90: #332507;

    --color-green: #008A1E;
    --color-green-5: #EEF7F0;
    --color-green-10: #CEE9D4;
    --color-green-20: #B2DCBB;
    --color-green-30: #8CCA99;
    --color-green-40: #33A14B;
    --color-green-50: #008A1E;
    --color-green-60: #006E18;
    --color-green-70: #005312;
    --color-green-80: #00370C;
    --color-green-90: #002207;

    /* 색상 > primary */
    --color-primary: #002F7B;
    --color-primary-5: #EAF2FF;
    --color-primary-10: #cdd9e9;
    --color-primary-20: #b3c6de;
    --color-primary-30: #99b3d3;
    --color-primary-40: #668dbd;
    --color-primary-50: #005BAC;
    --color-primary-60: #002F7B;
    --color-primary-70: #00255f;
    --color-primary-80: #001c44;
    --color-primary-90: #001228;
    /* 색상 > secondary */
    --color-secondary: #07A33E;
    --color-secondary-5: #E6F7EC;
    --color-secondary-10: #C2EFD3;
    --color-secondary-20: #99E6B8;
    --color-secondary-30: #66D98F;
    --color-secondary-40: #33C966;
    --color-secondary-50: #07A33E;
    --color-secondary-60: #068C35;
    --color-secondary-70: #04762C;
    --color-secondary-80: #045A22;
    --color-secondary-90: #034219;
    /* 색상 > point */
    --color-point: #EB6100;
    --color-point-5: #FFF4E8;
    --color-point-10: #FFD9B3;
    --color-point-20: #FFC285;
    --color-point-30: #FFAA57;
    --color-point-40: #FF931A;
    --color-point-50: #EB6100;
    --color-point-60: #C44F00;
    --color-point-70: #9D3E00;
    --color-point-80: #662900;
    --color-point-90: #331400;

    /* 색상 > gray */
    --color-gray-5: #F8F8F8;
    --color-gray-10: #F0F0F0;
    --color-gray-20: #E4E4E4;
    --color-gray-30: #D8D8D8;
    --color-gray-40: #C6C6C6;
    --color-gray-50: #8E8E8E;
    --color-gray-60: #717171;
    --color-gray-70: #555555;
    --color-gray-80: #2D2D2D;
    --color-gray-90: #1D1D1D;

    /* ------ border ------ */
    --radius-1: 0.1rem;
    --radius-2: 0.2rem;
    --radius-4: 0.4rem;
    --radius-6: 0.6rem;
    --radius-8: 0.8rem;
    --radius-10: 1rem;
    --radius-12: 1.2rem;
    --radius-full: 9999px;

    /* ------ 서체 ------ */
    /* Visual 폰트 (가장 큰 제목용) */
    --fz-visual-lg: 6.6rem;
    --fz-visual-md: 5rem;
    --fz-visual-sm: 4rem;

    --fz-tablet-visual-lg: 5.5rem;
    --fz-tablet-visual-md: 4.2rem;
    --fz-tablet-visual-sm: 3.4rem;

    --fz-mobile-visual-lg: 4.4rem;
    --fz-mobile-visual-md: 3.2rem;
    --fz-mobile-visual-sm: 2.8rem;

    /* Heading 폰트 (섹션 제목용) */
    --fz-heading-lg: 5rem;
    --fz-heading-md: 4rem;
    --fz-heading-sm: 3.2rem;

    --fz-tablet-heading-lg: 4.2rem;
    --fz-tablet-heading-md: 3.4rem;
    --fz-tablet-heading-sm: 2.8rem;

    --fz-mobile-heading-lg: 3.2rem;
    --fz-mobile-heading-md: 2.6rem;
    --fz-mobile-heading-sm: 2.2rem;

    /* Title 폰트 (일반 제목용) */
    --fz-tit-xxl: 3.2rem;
    --fz-tit-xl: 2.5rem;
    --fz-tit-lg: 2.1rem;
    --fz-tit-md: 1.9rem;
    --fz-tit-sm: 1.7rem;
    --fz-tit-xs: 1.5rem;

    --fz-tablet-tit-xxl: 2.8rem;
    --fz-tablet-tit-xl: 2.2rem;
    --fz-tablet-tit-lg: 1.9rem;
    --fz-tablet-tit-md: 1.7rem;
    --fz-tablet-tit-sm: 1.6rem;
    --fz-tablet-tit-xsm: 1.4rem;

    --fz-mobile-tit-xxl: 2.4rem;
    --fz-mobile-tit-xl: 2rem;
    --fz-mobile-tit-lg: 1.8rem;
    --fz-mobile-tit-md: 1.7rem;
    --fz-mobile-tit-sm: 1.5rem;
    --fz-mobile-tit-xsm: 1.4rem;

    /* Text 폰트 (본문용) */
    --fz-txt-lg : 1.9rem;
    --fz-txt-md : 1.7rem;
    --fz-txt-sm : 1.5rem;
    --fz-txt-xs : 1.3rem;

    --fz-tablet-txt-lg : 1.7rem;
    --fz-tablet-txt-md : 1.6rem;
    --fz-tablet-txt-sm : 1.4rem;
    --fz-tablet-txt-xsm : 1.3rem;

    --fz-mobile-txt-lg : 1.6rem;
    --fz-mobile-txt-md : 1.5rem;
    --fz-mobile-txt-sm : 1.4rem;
    --fz-mobile-txt-xsm : 1.3rem;

    /* ------ box-shadow ------ */
    --shadow : 1px 1px 6px 0 rgb(0 0 0 / 0.15);
    --shadow-md : 0 4px 10px 0 rgb(0 0 0 / 0.15), 4px 2px 6px 0 rgb(0 0 0 / 0.1);
    --shadow-lg : 0 7px 15px 0 rgb(0 0 0 / 0.15), 5px 2px 8px 0 rgb(0 0 0 / 0.1);
    --shadow-xl : 0 15px 25px 0 rgb(0 0 0 / 0.15), 8px 2px 12px 0 rgb(0 0 0 / 0.15);
}

/*-------------------------------------------------------------------
	분류이름 : blind
	분류그룹 : Accessibility
-------------------------------------------------------------------*/
.blind,
.hidden {overflow: hidden !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;}

/*-------------------------------------------------------------------
	분류이름 : 공통
	분류그룹 : essential
-------------------------------------------------------------------*/
/* 스크롤 전파 방지 */
.prevent-scroll {overscroll-behavior: contain; -ms-scroll-chaining: none;}

/* 스크롤바 커스텀 */
@media (hover: hover) and (pointer: fine) {
	.scrollbar-custom::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;}
	.scrollbar-custom::-webkit-scrollbar-thumb {border-radius: 8px; background: var(--color-gray-50);}
	.scrollbar-custom::-webkit-scrollbar-track {padding: 0 8px; border-radius: 10px; background: var(--color-gray-20);}
}


/*-------------------------------------------------------------------
	분류이름 : Display
	분류그룹 : Display
-------------------------------------------------------------------*/
.block {display: block;}
.inline-block {display: inline-block;}
.inline {display: inline;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}


/*-------------------------------------------------------------------
	분류이름 : width
	분류그룹 : sizing
-------------------------------------------------------------------*/
#wrap .w-auto {width: auto;}
#wrap .w-0  {width: 0;}
/* rem level */
#wrap .w-02 {width: var(--r-02);}
#wrap .w-04 {width: var(--r-04);}
#wrap .w-08 {width: var(--r-08);}
#wrap .w-12 {width: var(--r-12);}
#wrap .w-16 {width: var(--r-16);}
#wrap .w-20 {width: var(--r-20);}
#wrap .w-24 {width: var(--r-24);}
#wrap .w-28 {width: var(--r-28);}
#wrap .w-32 {width: var(--r-32);}
#wrap .w-36 {width: var(--r-36);}
#wrap .w-40 {width: var(--r-40);}
#wrap .w-44 {width: var(--r-44);}
#wrap .w-48 {width: var(--r-48);}
#wrap .w-52 {width: var(--r-52);}
#wrap .w-56 {width: var(--r-56);}
#wrap .w-60 {width: var(--r-60);}
#wrap .w-64 {width: var(--r-64);}
#wrap .w-68 {width: var(--r-68);}
#wrap .w-72 {width: var(--r-72);}
#wrap .w-76 {width: var(--r-76);}
#wrap .w-80 {width: var(--r-80);}
#wrap .w-84 {width: var(--r-84);}
#wrap .w-88 {width: var(--r-88);}
#wrap .w-92 {width: var(--r-92);}
#wrap .w-96 {width: var(--r-96);}
#wrap .w-100 {width: var(--r-100);}
/* percent */
#wrap .w-5p {width: 5%;}
#wrap .w-10p {width: 10%;}
#wrap .w-15p {width: 15%;}
#wrap .w-20p {width: 20%;}
#wrap .w-25p {width: 25%;}
#wrap .w-30p {width: 30%;}
#wrap .w-35p {width: 35%;}
#wrap .w-40p {width: 40%;}
#wrap .w-45p {width: 45%;}
#wrap .w-50p {width: 50%;}
#wrap .w-55p {width: 55%;}
#wrap .w-60p {width: 60%;}
#wrap .w-65p {width: 65%;}
#wrap .w-70p {width: 70%;}
#wrap .w-75p {width: 75%;}
#wrap .w-80p {width: 80%;}
#wrap .w-85p {width: 85%;}
#wrap .w-90p {width: 90%;}
#wrap .w-95p {width: 95%;}
#wrap .w-100p {width: 100%;}
#wrap .w-screen {width: 100vw;}

/*-------------------------------------------------------------------
	분류이름 : height
	분류그룹 : sizing
-------------------------------------------------------------------*/
#wrap .h-auto {height: auto;}
#wrap .h-0 {height: 0;}
/* rem level */
#wrap .h-02 {height: var(--r-02);}
#wrap .h-04 {height: var(--r-04);}
#wrap .h-08 {height: var(--r-08);}
#wrap .h-12 {height: var(--r-12);}
#wrap .h-16 {height: var(--r-16);}
#wrap .h-20 {height: var(--r-20);}
#wrap .h-24 {height: var(--r-24);}
#wrap .h-28 {height: var(--r-28);}
#wrap .h-32 {height: var(--r-32);}
#wrap .h-36 {height: var(--r-36);}
#wrap .h-40 {height: var(--r-40);}
#wrap .h-44 {height: var(--r-44);}
#wrap .h-48 {height: var(--r-48);}
#wrap .h-52 {height: var(--r-52);}
#wrap .h-56 {height: var(--r-56);}
#wrap .h-60 {height: var(--r-60);}
#wrap .h-64 {height: var(--r-64);}
#wrap .h-68 {height: var(--r-68);}
#wrap .h-72 {height: var(--r-72);}
#wrap .h-76 {height: var(--r-76);}
#wrap .h-80 {height: var(--r-80);}
#wrap .h-84 {height: var(--r-84);}
#wrap .h-88 {height: var(--r-88);}
#wrap .h-92 {height: var(--r-92);}
#wrap .h-96 {height: var(--r-96);}
#wrap .h-100 {height: var(--r-100);}
/* percent */
#wrap .h-5p {height: 5%;}
#wrap .h-10p {height: 10%;}
#wrap .h-15p {height: 15%;}
#wrap .h-20p {height: 20%;}
#wrap .h-25p {height: 25%;}
#wrap .h-30p {height: 30%;}
#wrap .h-35p {height: 35%;}
#wrap .h-40p {height: 40%;}
#wrap .h-45p {height: 45%;}
#wrap .h-50p {height: 50%;}
#wrap .h-55p {height: 55%;}
#wrap .h-60p {height: 60%;}
#wrap .h-65p {height: 65%;}
#wrap .h-70p {height: 70%;}
#wrap .h-75p {height: 75%;}
#wrap .h-80p {height: 80%;}
#wrap .h-85p {height: 85%;}
#wrap .h-90p {height: 90%;}
#wrap .h-95p {height: 95%;}
#wrap .h-100p {height: 100%;}
#wrap .h-screen {height: 100vh;}

/*-------------------------------------------------------------------
	분류이름 : Margin
	분류그룹 : sizing
-------------------------------------------------------------------*/
#wrap .m-auto {margin: auto !important;}
#wrap .m-0 {margin: 0;}
#wrap .m-02 {margin: var(--r-02);}
#wrap .m-04 {margin: var(--r-04);}
#wrap .m-08 {margin: var(--r-08);}
#wrap .m-12 {margin: var(--r-12);}
#wrap .m-16 {margin: var(--r-16);}
#wrap .m-20 {margin: var(--r-20);}
#wrap .m-24 {margin: var(--r-24);}
#wrap .m-28 {margin: var(--r-28);}
#wrap .m-32 {margin: var(--r-32);}
#wrap .m-36 {margin: var(--r-36);}
#wrap .m-40 {margin: var(--r-40);}
#wrap .m-44 {margin: var(--r-44);}
#wrap .m-48 {margin: var(--r-48);}
#wrap .m-52 {margin: var(--r-52);}
#wrap .m-56 {margin: var(--r-56);}
#wrap .m-60 {margin: var(--r-60);}
#wrap .m-64 {margin: var(--r-64);}
#wrap .m-68 {margin: var(--r-68);}
#wrap .m-72 {margin: var(--r-72);}
#wrap .m-76 {margin: var(--r-76);}
#wrap .m-80 {margin: var(--r-80);}
#wrap .m-84 {margin: var(--r-84);}
#wrap .m-88 {margin: var(--r-88);}
#wrap .m-92 {margin: var(--r-92);}
#wrap .m-96 {margin: var(--r-96);}
#wrap .m-100 {margin: var(--r-100);}
/* top */
#wrap .m-t-auto {margin-top: auto;}
#wrap .m-t-0  {margin-top: 0;}
#wrap .m-t-02 {margin-top: var(--r-02);}
#wrap .m-t-04 {margin-top: var(--r-04);}
#wrap .m-t-08 {margin-top: var(--r-08);}
#wrap .m-t-12 {margin-top: var(--r-12);}
#wrap .m-t-16 {margin-top: var(--r-16);}
#wrap .m-t-20 {margin-top: var(--r-20);}
#wrap .m-t-24 {margin-top: var(--r-24);}
#wrap .m-t-28 {margin-top: var(--r-28);}
#wrap .m-t-32 {margin-top: var(--r-32);}
#wrap .m-t-36 {margin-top: var(--r-36);}
#wrap .m-t-40 {margin-top: var(--r-40);}
#wrap .m-t-44 {margin-top: var(--r-44);}
#wrap .m-t-48 {margin-top: var(--r-48);}
#wrap .m-t-52 {margin-top: var(--r-52);}
#wrap .m-t-56 {margin-top: var(--r-56);}
#wrap .m-t-60 {margin-top: var(--r-60);}
#wrap .m-t-64 {margin-top: var(--r-64);}
#wrap .m-t-68 {margin-top: var(--r-68);}
#wrap .m-t-72 {margin-top: var(--r-72);}
#wrap .m-t-76 {margin-top: var(--r-76);}
#wrap .m-t-80 {margin-top: var(--r-80);}
#wrap .m-t-84 {margin-top: var(--r-84);}
#wrap .m-t-88 {margin-top: var(--r-88);}
#wrap .m-t-92 {margin-top: var(--r-92);}
#wrap .m-t-96 {margin-top: var(--r-96);}
#wrap .m-t-100 {margin-top: var(--r-100);}
/* left */
#wrap .m-l-auto {margin-left: auto;}
#wrap .m-l-0  {margin-left: 0;}
#wrap .m-l-02 {margin-left: var(--r-02);}
#wrap .m-l-04 {margin-left: var(--r-04);}
#wrap .m-l-08 {margin-left: var(--r-08);}
#wrap .m-l-12 {margin-left: var(--r-12);}
#wrap .m-l-16 {margin-left: var(--r-16);}
#wrap .m-l-20 {margin-left: var(--r-20);}
#wrap .m-l-24 {margin-left: var(--r-24);}
#wrap .m-l-28 {margin-left: var(--r-28);}
#wrap .m-l-32 {margin-left: var(--r-32);}
#wrap .m-l-36 {margin-left: var(--r-36);}
#wrap .m-l-40 {margin-left: var(--r-40);}
#wrap .m-l-44 {margin-left: var(--r-44);}
#wrap .m-l-48 {margin-left: var(--r-48);}
#wrap .m-l-52 {margin-left: var(--r-52);}
#wrap .m-l-56 {margin-left: var(--r-56);}
#wrap .m-l-60 {margin-left: var(--r-60);}
#wrap .m-l-64 {margin-left: var(--r-64);}
#wrap .m-l-68 {margin-left: var(--r-68);}
#wrap .m-l-72 {margin-left: var(--r-72);}
#wrap .m-l-76 {margin-left: var(--r-76);}
#wrap .m-l-80 {margin-left: var(--r-80);}
#wrap .m-l-84 {margin-left: var(--r-84);}
#wrap .m-l-88 {margin-left: var(--r-88);}
#wrap .m-l-92 {margin-left: var(--r-92);}
#wrap .m-l-96 {margin-left: var(--r-96);}
#wrap .m-l-100 {margin-left: var(--r-100);}
/* right */
#wrap .m-r-auto {margin-right: auto;}
#wrap .m-r-0  {margin-right: 0;}
#wrap .m-r-02 {margin-right: var(--r-02);}
#wrap .m-r-04 {margin-right: var(--r-04);}
#wrap .m-r-08 {margin-right: var(--r-08);}
#wrap .m-r-12 {margin-right: var(--r-12);}
#wrap .m-r-16 {margin-right: var(--r-16);}
#wrap .m-r-20 {margin-right: var(--r-20);}
#wrap .m-r-24 {margin-right: var(--r-24);}
#wrap .m-r-28 {margin-right: var(--r-28);}
#wrap .m-r-32 {margin-right: var(--r-32);}
#wrap .m-r-36 {margin-right: var(--r-36);}
#wrap .m-r-40 {margin-right: var(--r-40);}
#wrap .m-r-44 {margin-right: var(--r-44);}
#wrap .m-r-48 {margin-right: var(--r-48);}
#wrap .m-r-52 {margin-right: var(--r-52);}
#wrap .m-r-56 {margin-right: var(--r-56);}
#wrap .m-r-60 {margin-right: var(--r-60);}
#wrap .m-r-64 {margin-right: var(--r-64);}
#wrap .m-r-68 {margin-right: var(--r-68);}
#wrap .m-r-72 {margin-right: var(--r-72);}
#wrap .m-r-76 {margin-right: var(--r-76);}
#wrap .m-r-80 {margin-right: var(--r-80);}
#wrap .m-r-84 {margin-right: var(--r-84);}
#wrap .m-r-88 {margin-right: var(--r-88);}
#wrap .m-r-92 {margin-right: var(--r-92);}
#wrap .m-r-96 {margin-right: var(--r-96);}
#wrap .m-r-100 {margin-right: var(--r-100);}
/* bottom */
#wrap .m-b-auto {margin-bottom: auto;}
#wrap .m-b-0  {margin-bottom: 0;}
#wrap .m-b-02 {margin-bottom: var(--r-02);}
#wrap .m-b-04 {margin-bottom: var(--r-04);}
#wrap .m-b-08 {margin-bottom: var(--r-08);}
#wrap .m-b-12 {margin-bottom: var(--r-12);}
#wrap .m-b-16 {margin-bottom: var(--r-16);}
#wrap .m-b-20 {margin-bottom: var(--r-20);}
#wrap .m-b-24 {margin-bottom: var(--r-24);}
#wrap .m-b-28 {margin-bottom: var(--r-28);}
#wrap .m-b-32 {margin-bottom: var(--r-32);}
#wrap .m-b-36 {margin-bottom: var(--r-36);}
#wrap .m-b-40 {margin-bottom: var(--r-40);}
#wrap .m-b-44 {margin-bottom: var(--r-44);}
#wrap .m-b-48 {margin-bottom: var(--r-48);}
#wrap .m-b-52 {margin-bottom: var(--r-52);}
#wrap .m-b-56 {margin-bottom: var(--r-56);}
#wrap .m-b-60 {margin-bottom: var(--r-60);}
#wrap .m-b-64 {margin-bottom: var(--r-64);}
#wrap .m-b-68 {margin-bottom: var(--r-68);}
#wrap .m-b-72 {margin-bottom: var(--r-72);}
#wrap .m-b-76 {margin-bottom: var(--r-76);}
#wrap .m-b-80 {margin-bottom: var(--r-80);}
#wrap .m-b-84 {margin-bottom: var(--r-84);}
#wrap .m-b-88 {margin-bottom: var(--r-88);}
#wrap .m-b-92 {margin-bottom: var(--r-92);}
#wrap .m-b-96 {margin-bottom: var(--r-96);}
#wrap .m-b-100 {margin-bottom: var(--r-100);}

/*-------------------------------------------------------------------
	분류이름 : Padding
	분류그룹 : sizing
-------------------------------------------------------------------*/
#wrap .p-0 {padding: 0;}
#wrap .p-02 {padding: var(--r-02);}
#wrap .p-04 {padding: var(--r-04);}
#wrap .p-08 {padding: var(--r-08);}
#wrap .p-12 {padding: var(--r-12);}
#wrap .p-16 {padding: var(--r-16);}
#wrap .p-20 {padding: var(--r-20);}
#wrap .p-24 {padding: var(--r-24);}
#wrap .p-28 {padding: var(--r-28);}
#wrap .p-32 {padding: var(--r-32);}
#wrap .p-36 {padding: var(--r-36);}
#wrap .p-40 {padding: var(--r-40);}
#wrap .p-44 {padding: var(--r-44);}
#wrap .p-48 {padding: var(--r-48);}
#wrap .p-52 {padding: var(--r-52);}
#wrap .p-56 {padding: var(--r-56);}
#wrap .p-60 {padding: var(--r-60);}
#wrap .p-64 {padding: var(--r-64);}
#wrap .p-68 {padding: var(--r-68);}
#wrap .p-72 {padding: var(--r-72);}
#wrap .p-76 {padding: var(--r-76);}
#wrap .p-80 {padding: var(--r-80);}
#wrap .p-84 {padding: var(--r-84);}
#wrap .p-88 {padding: var(--r-88);}
#wrap .p-92 {padding: var(--r-92);}
#wrap .p-96 {padding: var(--r-96);}
#wrap .p-100 {padding: var(--r-100);}
/* top */
#wrap .p-t-0 {padding-top: 0;}
#wrap .p-t-02 {padding-top: var(--r-02);}
#wrap .p-t-04 {padding-top: var(--r-04);}
#wrap .p-t-08 {padding-top: var(--r-08);}
#wrap .p-t-12 {padding-top: var(--r-12);}
#wrap .p-t-16 {padding-top: var(--r-16);}
#wrap .p-t-20 {padding-top: var(--r-20);}
#wrap .p-t-24 {padding-top: var(--r-24);}
#wrap .p-t-28 {padding-top: var(--r-28);}
#wrap .p-t-32 {padding-top: var(--r-32);}
#wrap .p-t-36 {padding-top: var(--r-36);}
#wrap .p-t-40 {padding-top: var(--r-40);}
#wrap .p-t-44 {padding-top: var(--r-44);}
#wrap .p-t-48 {padding-top: var(--r-48);}
#wrap .p-t-52 {padding-top: var(--r-52);}
#wrap .p-t-56 {padding-top: var(--r-56);}
#wrap .p-t-60 {padding-top: var(--r-60);}
#wrap .p-t-64 {padding-top: var(--r-64);}
#wrap .p-t-68 {padding-top: var(--r-68);}
#wrap .p-t-72 {padding-top: var(--r-72);}
#wrap .p-t-76 {padding-top: var(--r-76);}
#wrap .p-t-80 {padding-top: var(--r-80);}
#wrap .p-t-84 {padding-top: var(--r-84);}
#wrap .p-t-88 {padding-top: var(--r-88);}
#wrap .p-t-92 {padding-top: var(--r-92);}
#wrap .p-t-96 {padding-top: var(--r-96);}
#wrap .p-t-100 {padding-top: var(--r-100);}
/* left */
#wrap .p-l-0 {padding-left: 0;}
#wrap .p-l-02 {padding-left: var(--r-02);}
#wrap .p-l-04 {padding-left: var(--r-04);}
#wrap .p-l-08 {padding-left: var(--r-08);}
#wrap .p-l-12 {padding-left: var(--r-12);}
#wrap .p-l-16 {padding-left: var(--r-16);}
#wrap .p-l-20 {padding-left: var(--r-20);}
#wrap .p-l-24 {padding-left: var(--r-24);}
#wrap .p-l-28 {padding-left: var(--r-28);}
#wrap .p-l-32 {padding-left: var(--r-32);}
#wrap .p-l-36 {padding-left: var(--r-36);}
#wrap .p-l-40 {padding-left: var(--r-40);}
#wrap .p-l-44 {padding-left: var(--r-44);}
#wrap .p-l-48 {padding-left: var(--r-48);}
#wrap .p-l-52 {padding-left: var(--r-52);}
#wrap .p-l-56 {padding-left: var(--r-56);}
#wrap .p-l-60 {padding-left: var(--r-60);}
#wrap .p-l-64 {padding-left: var(--r-64);}
#wrap .p-l-68 {padding-left: var(--r-68);}
#wrap .p-l-72 {padding-left: var(--r-72);}
#wrap .p-l-76 {padding-left: var(--r-76);}
#wrap .p-l-80 {padding-left: var(--r-80);}
#wrap .p-l-84 {padding-left: var(--r-84);}
#wrap .p-l-88 {padding-left: var(--r-88);}
#wrap .p-l-92 {padding-left: var(--r-92);}
#wrap .p-l-96 {padding-left: var(--r-96);}
#wrap .p-l-100 {padding-left: var(--r-100);}
/* right */
#wrap .p-r-0 {padding-right: 0;}
#wrap .p-r-02 {padding-right: var(--r-02);}
#wrap .p-r-04 {padding-right: var(--r-04);}
#wrap .p-r-08 {padding-right: var(--r-08);}
#wrap .p-r-12 {padding-right: var(--r-12);}
#wrap .p-r-16 {padding-right: var(--r-16);}
#wrap .p-r-20 {padding-right: var(--r-20);}
#wrap .p-r-24 {padding-right: var(--r-24);}
#wrap .p-r-28 {padding-right: var(--r-28);}
#wrap .p-r-32 {padding-right: var(--r-32);}
#wrap .p-r-36 {padding-right: var(--r-36);}
#wrap .p-r-40 {padding-right: var(--r-40);}
#wrap .p-r-44 {padding-right: var(--r-44);}
#wrap .p-r-48 {padding-right: var(--r-48);}
#wrap .p-r-52 {padding-right: var(--r-52);}
#wrap .p-r-56 {padding-right: var(--r-56);}
#wrap .p-r-60 {padding-right: var(--r-60);}
#wrap .p-r-64 {padding-right: var(--r-64);}
#wrap .p-r-68 {padding-right: var(--r-68);}
#wrap .p-r-72 {padding-right: var(--r-72);}
#wrap .p-r-76 {padding-right: var(--r-76);}
#wrap .p-r-80 {padding-right: var(--r-80);}
#wrap .p-r-84 {padding-right: var(--r-84);}
#wrap .p-r-88 {padding-right: var(--r-88);}
#wrap .p-r-92 {padding-right: var(--r-92);}
#wrap .p-r-96 {padding-right: var(--r-96);}
#wrap .p-r-100 {padding-right: var(--r-100);}
/* bottom */
#wrap .p-b-0 {padding-bottom: 0;}
#wrap .p-b-02 {padding-bottom: var(--r-02);}
#wrap .p-b-04 {padding-bottom: var(--r-04);}
#wrap .p-b-08 {padding-bottom: var(--r-08);}
#wrap .p-b-12 {padding-bottom: var(--r-12);}
#wrap .p-b-16 {padding-bottom: var(--r-16);}
#wrap .p-b-20 {padding-bottom: var(--r-20);}
#wrap .p-b-24 {padding-bottom: var(--r-24);}
#wrap .p-b-28 {padding-bottom: var(--r-28);}
#wrap .p-b-32 {padding-bottom: var(--r-32);}
#wrap .p-b-36 {padding-bottom: var(--r-36);}
#wrap .p-b-40 {padding-bottom: var(--r-40);}
#wrap .p-b-44 {padding-bottom: var(--r-44);}
#wrap .p-b-48 {padding-bottom: var(--r-48);}
#wrap .p-b-52 {padding-bottom: var(--r-52);}
#wrap .p-b-56 {padding-bottom: var(--r-56);}
#wrap .p-b-60 {padding-bottom: var(--r-60);}
#wrap .p-b-64 {padding-bottom: var(--r-64);}
#wrap .p-b-68 {padding-bottom: var(--r-68);}
#wrap .p-b-72 {padding-bottom: var(--r-72);}
#wrap .p-b-76 {padding-bottom: var(--r-76);}
#wrap .p-b-80 {padding-bottom: var(--r-80);}
#wrap .p-b-84 {padding-bottom: var(--r-84);}
#wrap .p-b-88 {padding-bottom: var(--r-88);}
#wrap .p-b-92 {padding-bottom: var(--r-92);}
#wrap .p-b-96 {padding-bottom: var(--r-96);}
#wrap .p-b-100 {padding-bottom: var(--r-100);}

/*-------------------------------------------------------------------
	분류이름 : Gap
	분류그룹 : sizing
-------------------------------------------------------------------*/
.gap-0 {gap: 0;}
.gap-02 {gap: var(--r-02);}
.gap-04 {gap: var(--r-04);}
.gap-08 {gap: var(--r-08);}
.gap-12 {gap: var(--r-12);}
.gap-16 {gap: var(--r-16);}
.gap-20 {gap: var(--r-20);}
.gap-24 {gap: var(--r-24);}
.gap-28 {gap: var(--r-28);}
.gap-32 {gap: var(--r-32);}
.gap-36 {gap: var(--r-36);}
.gap-40 {gap: var(--r-40);}
.gap-44 {gap: var(--r-44);}
.gap-48 {gap: var(--r-48);}
.gap-52 {gap: var(--r-52);}
.gap-56 {gap: var(--r-56);}
.gap-60 {gap: var(--r-60);}
.gap-64 {gap: var(--r-64);}
.gap-68 {gap: var(--r-68);}
.gap-72 {gap: var(--r-72);}
.gap-76 {gap: var(--r-76);}
.gap-80 {gap: var(--r-80);}
.gap-84 {gap: var(--r-84);}
.gap-88 {gap: var(--r-88);}
.gap-92 {gap: var(--r-92);}
.gap-96 {gap: var(--r-96);}
.gap-100 {gap: var(--r-100);}
/* x축 */
.gap-x-02 {gap: 0 var(--r-02);}
.gap-x-04 {gap: 0 var(--r-04);}
.gap-x-08 {gap: 0 var(--r-08);}
.gap-x-12 {gap: 0 var(--r-12);}
.gap-x-16 {gap: 0 var(--r-16);}
.gap-x-20 {gap: 0 var(--r-20);}
.gap-x-24 {gap: 0 var(--r-24);}
.gap-x-28 {gap: 0 var(--r-28);}
.gap-x-32 {gap: 0 var(--r-32);}
.gap-x-36 {gap: 0 var(--r-36);}
.gap-x-40 {gap: 0 var(--r-40);}
.gap-x-44 {gap: 0 var(--r-44);}
.gap-x-48 {gap: 0 var(--r-48);}
.gap-x-52 {gap: 0 var(--r-52);}
.gap-x-56 {gap: 0 var(--r-56);}
.gap-x-60 {gap: 0 var(--r-60);}
.gap-x-64 {gap: 0 var(--r-64);}
.gap-x-68 {gap: 0 var(--r-68);}
.gap-x-72 {gap: 0 var(--r-72);}
.gap-x-76 {gap: 0 var(--r-76);}
.gap-x-80 {gap: 0 var(--r-80);}
.gap-x-84 {gap: 0 var(--r-84);}
.gap-x-88 {gap: 0 var(--r-88);}
.gap-x-92 {gap: 0 var(--r-92);}
.gap-x-96 {gap: 0 var(--r-96);}
.gap-x-100 {gap: 0 var(--r-100);}
/* y축 */
.gap-y-02 {gap: var(--r-02) 0;}
.gap-y-04 {gap: var(--r-04) 0;}
.gap-y-08 {gap: var(--r-08) 0;}
.gap-y-12 {gap: var(--r-12) 0;}
.gap-y-16 {gap: var(--r-16) 0;}
.gap-y-20 {gap: var(--r-20) 0;}
.gap-y-24 {gap: var(--r-24) 0;}
.gap-y-28 {gap: var(--r-28) 0;}
.gap-y-32 {gap: var(--r-32) 0;}
.gap-y-36 {gap: var(--r-36) 0;}
.gap-y-40 {gap: var(--r-40) 0;}
.gap-y-44 {gap: var(--r-44) 0;}
.gap-y-48 {gap: var(--r-48) 0;}
.gap-y-52 {gap: var(--r-52) 0;}
.gap-y-56 {gap: var(--r-56) 0;}
.gap-y-60 {gap: var(--r-60) 0;}
.gap-y-64 {gap: var(--r-64) 0;}
.gap-y-68 {gap: var(--r-68) 0;}
.gap-y-72 {gap: var(--r-72) 0;}
.gap-y-76 {gap: var(--r-76) 0;}
.gap-y-80 {gap: var(--r-80) 0;}
.gap-y-84 {gap: var(--r-84) 0;}
.gap-y-88 {gap: var(--r-88) 0;}
.gap-y-92 {gap: var(--r-92) 0;}
.gap-y-96 {gap: var(--r-96) 0;}
.gap-y-100 {gap: var(--r-100) 0;}


/*-------------------------------------------------------------------
	분류이름 : float
	분류그룹 : Layout
-------------------------------------------------------------------*/
.float-l {float: left;}
.float-r {float: right;}
.float-none	{float: none;}
.clearfix::after {content:''; display: block; clear: both;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .xs-float-l {float: left;}
    .xs-float-r {float: right;}
    .xs-float-none	{float: none;}
}
@media screen and (min-width: 601px) {
    .sm-float-l {float: left;}
    .sm-float-r {float: right;}
    .sm-float-none	{float: none;}
}
@media screen and (min-width: 769px) {
    .md-float-l {float: left;}
    .md-float-r {float: right;}
    .md-float-none	{float: none;}
}
@media screen and (min-width: 1025px) {
    .lg-float-l {float: left;}
    .lg-float-r {float: right;}
    .lg-float-none	{float: none;}
}


/*-------------------------------------------------------------------
	분류이름 : flex
	분류그룹 : Layout
-------------------------------------------------------------------*/
.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}
.flex-wrap {flex-wrap: wrap !important;}
.flex-nowrap {flex-wrap: nowrap !important;;}

.justify-normal {justify-content: normal;}
.justify-start {justify-content: start;}
.justify-center {justify-content: center;}
.justify-end {justify-content: end;}
.justify-between {justify-content: space-between;}

.align-items-start {align-items: flex-start;}
.align-items-end {align-items: flex-end;}
.align-items-center {align-items: center;}
.align-items-baseline {align-items: baseline;}
.align-items-stretch {align-items: stretch;}


/*-------------------------------------------------------------------
	분류이름 : Grid
	분류그룹 : Layout
-------------------------------------------------------------------*/
.grid {display: block;}
.g-row {display: flex; flex-wrap: wrap;}

/* default */
.g-row [class*="col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.g-row > .col-auto {width: auto;}
.g-row > .col {width: auto; flex-grow: 1; flex-basis: 0;}
.g-row > .col-1 {width: calc(100% / 12 * 1);}
.g-row > .col-2 {width: calc(100% / 12 * 2);}
.g-row > .col-3 {width: calc(100% / 12 * 3);}
.g-row > .col-4 {width: calc(100% / 12 * 4);}
.g-row > .col-5 {width: calc(100% / 12 * 5);}
.g-row > .col-6 {width: calc(100% / 12 * 6);}
.g-row > .col-7 {width: calc(100% / 12 * 7);}
.g-row > .col-8 {width: calc(100% / 12 * 8);}
.g-row > .col-9 {width: calc(100% / 12 * 9);}
.g-row > .col-10 {width: calc(100% / 12 * 10);}
.g-row > .col-11 {width: calc(100% / 12 * 11);}
.g-row > .col-12 {width: calc(100% / 12 * 12);}

/* gutter */
.grid.gap-04 .g-row + .g-row {margin-top: 0.4rem;}
.grid.gap-08 .g-row + .g-row {margin-top: 0.8rem;}
.grid.gap-12 .g-row + .g-row {margin-top: 1.2rem;}
.grid.gap-16 .g-row + .g-row {margin-top: 1.6rem;}
.grid.gap-20 .g-row + .g-row {margin-top: 2.0rem;}
.grid.gap-24 .g-row + .g-row {margin-top: 2.4rem;}
.grid.gap-32 .g-row + .g-row {margin-top: 3.2rem;}
.grid.gap-40 .g-row + .g-row {margin-top: 4rem;}

/* [class*="gap-"]:not([class*="gap-y-"]) {gap: 0;} */
.g-row.gap-04 {gap: var(--r-04) 0;}
.g-row.gap-04, .g-row.gap-x-04 {margin-left: calc(var(--r-02) * -1); margin-right: calc(var(--r-02) * -1);}
.g-row.gap-04 > [class*="col"], .g-row.gap-x-04 > [class*="col"] {padding-left: var(--r-02); padding-right: var(--r-02);}
.g-row.gap-08 {gap: var(--r-08) 0;}
.g-row.gap-08, .g-row.gap-x-08 {margin-left: calc(var(--r-04) * -1); margin-right: calc(var(--r-04) * -1);}
.g-row.gap-08 > [class*="col"], .g-row.gap-x-08 > [class*="col"] {padding-left: var(--r-04); padding-right: var(--r-04);}
.g-row.gap-16 {gap: var(--r-16) 0;}
.g-row.gap-16, .g-row.gap-x-16 {margin-left: calc(var(--r-08) * -1); margin-right: calc(var(--r-08) * -1);}
.g-row.gap-16 > [class*="col"], .g-row.gap-x-16 > [class*="col"] {padding-left: var(--r-08); padding-right: var(--r-08);}
.g-row.gap-20 {gap: var(--r-20) 0;}
.g-row.gap-20, .g-row.gap-x-20 {margin-left: calc(var(--r-10) * -1); margin-right: calc(var(--r-10) * -1);}
.g-row.gap-20 > [class*="col"], .g-row.gap-x-20 > [class*="col"] {padding-left: var(--r-10); padding-right: var(--r-10);}
.g-row.gap-24 {gap: var(--r-24) 0;}
.g-row.gap-24, .g-row.gap-x-24 {margin-left: calc(var(--r-12) * -1); margin-right: calc(var(--r-12) * -1);}
.g-row.gap-24 > [class*="col"], .g-row.gap-x-24 > [class*="col"] {padding-left: var(--r-12); padding-right: var(--r-12);}
.g-row.gap-32 {gap: var(--r-32) 0;}
.g-row.gap-32, .g-row.gap-x-32 {margin-left: calc(var(--r-16) * -1); margin-right: calc(var(--r-16) * -1);}
.g-row.gap-32 > [class*="col"], .g-row.gap-x-32 > [class*="col"] {padding-left: var(--r-16); padding-right: var(--r-16);}
.g-row.gap-40 {gap: var(--r-40) 0;}
.g-row.gap-40, .g-row.gap-x-40 {margin-left: calc(var(--r-20) * -1); margin-right: calc(var(--r-20) * -1);}
.g-row.gap-40 > [class*="col"], .g-row.gap-x-40 > [class*="col"] {padding-left: var(--r-20); padding-right: var(--r-20);}
.g-row.gap-48 {gap: var(--r-48) 0;}
.g-row.gap-48, .g-row.gap-x-48 {margin-left: calc(var(--r-24) * -1); margin-right: calc(var(--r-24) * -1);}
.g-row.gap-48 > [class*="col"], .g-row.gap-x-48 > [class*="col"] {padding-left: var(--r-24); padding-right: var(--r-24);}
.g-row.gap-56 {gap: var(--r-56) 0;}
.g-row.gap-56, .g-row.gap-x-56 {margin-left: calc(var(--r-28) * -1); margin-right: calc(var(--r-28) * -1);}
.g-row.gap-56 > [class*="col"], .g-row.gap-x-56 > [class*="col"] {padding-left: var(--r-28); padding-right: var(--r-28);}
.g-row.gap-64 {gap: var(--r-64) 0;}
.g-row.gap-64, .g-row.gap-x-64 {margin-left: calc(var(--r-32) * -1); margin-right: calc(var(--r-32) * -1);}
.g-row.gap-64 > [class*="col"], .g-row.gap-x-64 > [class*="col"] {padding-left: var(--r-32); padding-right: var(--r-32);}

/* Align */
.g-row [class*="col"].top {margin-bottom:auto;}
.g-row [class*="col"].bottom {margin-top:auto;}
.g-row [class*="col"].right {margin-left:auto;}
.g-row [class*="col"].left {margin-right:auto;}

/*-------------------------------------------------------------------
	@breakpoint
-------------------------------------------------------------------*/
@media screen and (min-width: 426px) {
    .g-row [class*="xs-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .xs-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .xs-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .xs-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .xs-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .xs-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .xs-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .xs-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .xs-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .xs-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .xs-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .xs-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .xs-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .xs-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .xs-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 601px) {
    .g-row [class*="sm-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .sm-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .sm-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .sm-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .sm-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .sm-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .sm-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .sm-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .sm-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .sm-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .sm-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .sm-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .sm-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .sm-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .sm-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 769px) {
    .g-row [class*="md-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .md-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .md-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .md-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .md-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .md-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .md-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .md-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .md-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .md-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .md-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .md-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .md-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .md-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .md-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 1025px) {
    .g-row [class*="lg-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .lg-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .lg-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .lg-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .lg-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .lg-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .lg-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .lg-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .lg-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .lg-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .lg-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .lg-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .lg-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .lg-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .lg-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 1200px) {
    .g-row [class*="xl-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .xl-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .xl-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .xl-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .xl-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .xl-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .xl-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .xl-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .xl-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .xl-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .xl-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .xl-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .xl-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .xl-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .xl-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 1440px) {
    .g-row [class*="xxl-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
    
    .g-row > .xxl-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .g-row > .xxl-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .g-row > .xxl-col-1 {width: calc(100% / 12 * 1);}
    .g-row > .xxl-col-2 {width: calc(100% / 12 * 2);}
    .g-row > .xxl-col-3 {width: calc(100% / 12 * 3);}
    .g-row > .xxl-col-4 {width: calc(100% / 12 * 4);}
    .g-row > .xxl-col-5 {width: calc(100% / 12 * 5);}
    .g-row > .xxl-col-6 {width: calc(100% / 12 * 6);}
    .g-row > .xxl-col-7 {width: calc(100% / 12 * 7);}
    .g-row > .xxl-col-8 {width: calc(100% / 12 * 8);}
    .g-row > .xxl-col-9 {width: calc(100% / 12 * 9);}
    .g-row > .xxl-col-10 {width: calc(100% / 12 * 10);}
    .g-row > .xxl-col-11 {width: calc(100% / 12 * 11);}
    .g-row > .xxl-col-12 {width: calc(100% / 12 * 12);}
}



/*-------------------------------------------------------------------
	분류이름 : text-overflow
	분류그룹 : Typography
-------------------------------------------------------------------*/
.text-overflow-1 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.text-overflow-2 {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.text-overflow-3 {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.text-overflow-4 {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}
.text-overflow-5 {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5;}


/*-------------------------------------------------------------------
	분류이름 : radius
	분류그룹 : border
-------------------------------------------------------------------*/
.radius-0, .radius-none {border-radius: 0;}
.radius-1 {border-radius: var(--radius-1);}
.radius-2 {border-radius: var(--radius-2);}
.radius-4 {border-radius: var(--radius-4);}
.radius-6 {border-radius: var(--radius-6);}
.radius-8 {border-radius: var(--radius-8);}
.radius-10 {border-radius: var(--radius-10);}
.radius-12 {border-radius: var(--radius-12);}
.radius-full {border-radius: var(--radius-full);}


/*-------------------------------------------------------------------
	분류이름 : box-shadow
	분류그룹 : Effect
-------------------------------------------------------------------*/
.shadow {box-shadow: var(--shadow);}
.shadow-md {box-shadow: var(--shadow-md);}
.shadow-lg {box-shadow: var(--shadow-lg);}
.shadow-xl {box-shadow: var(--shadow-xl);}