@charset "utf-8";
/*-------------------------------------------------------------------
	분류그룹 : 웹폰트
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @ Pretendard GOV
-------------------------------------------------------------------*/
 @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');
} */

/*-------------------------------------------------------------------
    @ G Market Sans
-------------------------------------------------------------------*/
@font-face {
    font-family: 'gmarket';
    src: local('gmarket'),
    url('../../../font/GmarketSansLight.woff2') format('woff2'),
    url('../../../font/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'gmarket';
    src: local('gmarket'),
    url('../../../font/GmarketSansMedium.woff2') format('woff2'),
    url('../../../font/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'gmarket';
    src: local('gmarket'),
    url('../../../font/GmarketSansBold.woff2') format('woff2'),
    url('../../../font/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}


/*-------------------------------------------------------------------
	분류그룹 : Normalize
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* ------ font ------ */
html {font-size:10px}
body {font-size: 1.8rem; line-height: 1.6; color:var(--color-gray-70);}

/* ------ all style ------ */
* {line-height: 1.6; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body {color: var(--color-gray-70); word-break: keep-all; overflow-wrap: break-word; font-family: '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;}
button{background:none}
img{vertical-align:top}

/*-------------------------------------------------------------------
	@공통변수
-------------------------------------------------------------------*/
:root {
    /* ------ 여백 ------ */
    --sp-0 : 0;
    --sp-02 : 0.2rem;
    --sp-04 : 0.4rem;
    --sp-08 : 0.8rem;
    --sp-10 : 1rem;
    --sp-12 : 1.2rem;
    --sp-16 : 1.6rem;
    --sp-20 : 2rem;
    --sp-24 : 2.4rem;
    --sp-28 : 2.8rem;
    --sp-32 : 3.2rem;
    --sp-36 : 3.6rem;
    --sp-40 : 4rem;
    --sp-44 : 4.4rem;
    --sp-48 : 4.8rem;
    --sp-52 : 5.2rem;
    --sp-56 : 5.6rem;
    --sp-60 : 6rem;
    --sp-64 : 6.4rem;
    --sp-68 : 6.8rem;
    --sp-72 : 7.2rem;
    --sp-76 : 7.6rem;
    --sp-80 : 8rem;
    --sp-84 : 8.4rem;
    --sp-88 : 8.8rem;
    --sp-92 : 9.2rem;
    --sp-96 : 9.6rem;
    --sp-100 : 10rem;

    /* ------ 색상 ------ */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-danger: #E8003B;
    --color-danger-5: #FEECF0;
    --color-danger-10: #FCD4DE;
    --color-danger-20: #F799B1;
    --color-danger-30: #F36689;
    --color-danger-50: #E8003B;
    --color-danger-40: #EF3E5E;
    --color-danger-60: #D50136;
    --color-danger-70: #BD0023;
    --color-danger-80: #5E0018;
    --color-danger-90: #2F000C;

    --color-warning: #FFB724;
    --color-warning-5: #FFF8E9;
    --color-warning-10: #FFEAC1;
    --color-warning-20: #FFE2A7;
    --color-warning-30: #FFD47C;
    --color-warning-50: #FFB724;
    --color-warning-40: #FFC550;
    --color-warning-60: #98690A;
    --color-warning-70: #66490E;
    --color-warning-80: #4D370B;
    --color-warning-90: #332507;

    --color-success: #008A1E;
    --color-success-5: #EEF7F0;
    --color-success-10: #CEE9D4;
    --color-success-20: #B2DCBB;
    --color-success-30: #8CCA99;
    --color-success-40: #33A14B;
    --color-success-50: #008A1E;
    --color-success-60: #006E18;
    --color-success-70: #005312;
    --color-success-80: #00370C;
    --color-success-90: #002207;

    --color-info: #2768FF;
    --color-info-5: #E9F0FF;
    --color-info-10: #D4E1FF;
    --color-info-20: #A9C3FF;
    --color-info-30: #7DA4FF;
    --color-info-40: #5286FF;
    --color-info-50: #2768FF;
    --color-info-60: #1F53CC;
    --color-info-70: #173E99;
    --color-info-80: #0C1F4D;
    --color-info-90: #040A1A;

    --color-main: #125A9B;
    --color-main-5: #DFF4DF;
    --color-main-40: #82BB3B;
    --color-main-50: #3a8c1c;
    --color-main-70: #004751;

    /* 색상 > primary */
    --color-primary: #246BEB;
    --color-primary-5: #EFF5FF;
    --color-primary-10: #D3E1FB;
    --color-primary-20: #A7C4F7;
    --color-primary-30: #7CA6F3;
    --color-primary-40: #5089EF;
    --color-primary-50: #246BEB;
    --color-primary-60: #1D56BC;
    --color-primary-70: #16408D;
    --color-primary-80: #0E2B5E;
    --color-primary-90: #07152F;
    /* 색상 > secondary */
    --color-secondary: #003675;
    --color-secondary-5: #EDF1F5;
    --color-secondary-10: #CDD7E4;
    --color-secondary-20: #B4C4D6;
    --color-secondary-30: #99B0CB;
    --color-secondary-40: #2A5C96;
    --color-secondary-50: #003675;
    --color-secondary-60: #002B5E;
    --color-secondary-70: #002046;
    --color-secondary-80: #00162F;
    --color-secondary-90: #000B17;
    /* 색상 > point */
    --color-point: #E71825;
    --color-point-5: #FDF2F3;
    --color-point-10: #FAD1D3;
    --color-point-20: #F5A3A8;
    --color-point-30: #F1747C;
    --color-point-40: #EC4651;
    --color-point-50: #E71825;
    --color-point-60: #B9131E;
    --color-point-70: #8B0E16;
    --color-point-80: #5C0A0F;
    --color-point-90: #2E0507;

    /* 색상 > 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;

    --color-gray-blue : #6b7e9e;
    --color-gray-blue-5 : #f6f8fc;
    --color-gray-blue-10 : #eef1f7;
    --color-gray-blue-20 : #d6dce8;
    --color-gray-blue-30 : #b1b9cf;
    --color-gray-blue-40 : #8a96b2;
    --color-gray-blue-50 : #6b7e9e;
    --color-gray-blue-60 : #576689;
    --color-gray-blue-70 : #3f4e73;
    --color-gray-blue-80 : #2b395d;
    --color-gray-blue-90 : #1b2747;

    /* ------ 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;

    /* ------ 서체 ------ */
    --fz-display-sm: 4rem;
    --fz-display-md: 5rem;
    --fz-display-lg: 6.6rem;
    --fz-heading-sm: 3.2rem;
    --fz-heading-md: 4rem;
    --fz-heading-lg: 5rem;
    --fz-title-xsm: 1.5rem;
    --fz-title-sm: 1.7rem;
    --fz-title-md: 1.9rem;
    --fz-title-lg: 2.1rem;
    --fz-title-xlg: 2.5rem;
    --fz-title-xxlg: 3.2rem;
    --fz-body-sm: 1.5rem;
    --fz-body-md: 1.7rem;
    --fz-body-lg: 1.9rem;
    --fz-link-sm: 1.5rem;
    --fz-link-md: 1.7rem;
    --fz-link-lg: 1.9rem;
    --fz-detail-sm: 1.3rem;
    --fz-detail-md: 1.5rem;
    --fz-detail-lg: 1.7rem;
    --fz-label-xsm: 1.3rem;
    --fz-label-sm: 1.5rem;
    --fz-label-md: 1.7rem;
    --fz-label-lg: 1.9rem;

    --mobile-fz-display-sm: 2.5rem;
    --mobile-fz-display-md: 3.2rem;
    --mobile-fz-display-lg: 4rem;
    --mobile-fz-heading-sm: 2.5rem;
    --mobile-fz-heading-md: 3.2rem;
    --mobile-fz-heading-lg: 4rem;
    --mobile-fz-title-xxlg: 2.5rem;
}

/*-------------------------------------------------------------------
	분류이름 : blind
	분류그룹 : Accessibility
-------------------------------------------------------------------*/
.blind, .hidden {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}


/*-------------------------------------------------------------------
	분류이름 : 공통
	분류그룹 : essential
-------------------------------------------------------------------*/
.underline {text-decoration: underline;}

/* 스크롤 전파 방지 */
.prevent-scroll {overscroll-behavior: contain; -ms-scroll-chaining: none;}
/* 스크롤바 커스텀 */
@media (hover: hover) and (pointer: fine) {
	.scrollbar-custom::-webkit-scrollbar {width: 6px; height: 6px; box-sizing: content-box;}
	.scrollbar-custom::-webkit-scrollbar-thumb {border-radius: 6px; background: var(--color-gray-50);}
	.scrollbar-custom::-webkit-scrollbar-track {padding: 0 0.6rem; border-radius: 1rem; background: var(--color-gray-20);}
}

/*-------------------------------------------------------------------
	분류이름 : color
	분류그룹 : Typography
-------------------------------------------------------------------*/
.color-white {color: var(--color-white);}
.color-black {color: var(--color-black);}
.color-danger {color: var(--color-danger);}
.color-warning {color: var(--color-warning);}
.color-success {color: var(--color-success);}
.color-info {color: var(--color-info);}

/*-------------------------------------------------------------------
	분류이름 : 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;}

/*-------------------------------------------------------------------
	분류이름 : Grid
	분류그룹 : Layout
-------------------------------------------------------------------*/
.grid {display: block;}
.grid .row {display: flex; flex-wrap: wrap;}

/* default */
.grid .row [class*="col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.grid .row > .col-auto {width: auto;}
.grid .row > .col {width: auto; flex-grow: 1; flex-basis: 0;}
.grid .row > .col-1 {width: calc(100% / 12 * 1);}
.grid .row > .col-2 {width: calc(100% / 12 * 2);}
.grid .row > .col-3 {width: calc(100% / 12 * 3);}
.grid .row > .col-4 {width: calc(100% / 12 * 4);}
.grid .row > .col-5 {width: calc(100% / 12 * 5);}
.grid .row > .col-6 {width: calc(100% / 12 * 6);}
.grid .row > .col-7 {width: calc(100% / 12 * 7);}
.grid .row > .col-8 {width: calc(100% / 12 * 8);}
.grid .row > .col-9 {width: calc(100% / 12 * 9);}
.grid .row > .col-10 {width: calc(100% / 12 * 10);}
.grid .row > .col-11 {width: calc(100% / 12 * 11);}
.grid .row > .col-12 {width: calc(100% / 12 * 12);}

/* gutter */
.grid [class*="gap-"]:not([class*="gap-y-"]) {gap: 0;}
.grid .row.gap-04 {gap: var(--sp-04) 0;}
.grid .row.gap-04, .grid .row.gap-x-04 {margin-left: calc(var(--sp-02) * -1); margin-right: calc(var(--sp-02) * -1);}
.grid .row.gap-04 > [class*="col"], .grid .row.gap-x-04 > [class*="col"] {padding-left: var(--sp-02); padding-right: var(--sp-02);}
.grid .row.gap-08 {gap: var(--sp-08) 0;}
.grid .row.gap-08, .grid .row.gap-x-08 {margin-left: calc(var(--sp-04) * -1); margin-right: calc(var(--sp-04) * -1);}
.grid .row.gap-08 > [class*="col"], .grid .row.gap-x-08 > [class*="col"] {padding-left: var(--sp-04); padding-right: var(--sp-04);}
.grid .row.gap-16 {gap: var(--sp-16) 0;}
.grid .row.gap-16, .grid .row.gap-x-16 {margin-left: calc(var(--sp-08) * -1); margin-right: calc(var(--sp-08) * -1);}
.grid .row.gap-16 > [class*="col"], .grid .row.gap-x-16 > [class*="col"] {padding-left: var(--sp-08); padding-right: var(--sp-08);}
.grid .row.gap-24 {gap: var(--sp-24) 0;}
.grid .row.gap-24, .grid .row.gap-x-24 {margin-left: calc(var(--sp-12) * -1); margin-right: calc(var(--sp-12) * -1);}
.grid .row.gap-24 > [class*="col"], .grid .row.gap-x-24 > [class*="col"] {padding-left: var(--sp-12); padding-right: var(--sp-12);}
.grid .row.gap-32 {gap: var(--sp-32) 0;}
.grid .row.gap-32, .grid .row.gap-x-32 {margin-left: calc(var(--sp-16) * -1); margin-right: calc(var(--sp-16) * -1);}
.grid .row.gap-32 > [class*="col"], .grid .row.gap-x-32 > [class*="col"] {padding-left: var(--sp-16); padding-right: var(--sp-16);}
.grid .row.gap-40 {gap: var(--sp-40) 0;}
.grid .row.gap-40, .grid .row.gap-x-40 {margin-left: calc(var(--sp-20) * -1); margin-right: calc(var(--sp-20) * -1);}
.grid .row.gap-40 > [class*="col"], .grid .row.gap-x-40 > [class*="col"] {padding-left: var(--sp-20); padding-right: var(--sp-20);}
.grid .row.gap-48 {gap: var(--sp-48) 0;}
.grid .row.gap-48, .grid .row.gap-x-48 {margin-left: calc(var(--sp-24) * -1); margin-right: calc(var(--sp-24) * -1);}
.grid .row.gap-48 > [class*="col"], .grid .row.gap-x-48 > [class*="col"] {padding-left: var(--sp-24); padding-right: var(--sp-24);}
.grid .row.gap-56 {gap: var(--sp-56) 0;}
.grid .row.gap-56, .grid .row.gap-x-56 {margin-left: calc(var(--sp-28) * -1); margin-right: calc(var(--sp-28) * -1);}
.grid .row.gap-56 > [class*="col"], .grid .row.gap-x-56 > [class*="col"] {padding-left: var(--sp-28); padding-right: var(--sp-28);}
.grid .row.gap-64 {gap: var(--sp-64) 0;}
.grid .row.gap-64, .grid .row.gap-x-64 {margin-left: calc(var(--sp-32) * -1); margin-right: calc(var(--sp-32) * -1);}
.grid .row.gap-64 > [class*="col"], .grid .row.gap-x-64 > [class*="col"] {padding-left: var(--sp-32); padding-right: var(--sp-32);}

/* Align */
.grid .col.top {margin-bottom:auto;}
.grid .col.bottom {margin-top:auto;}
.grid .col.right {margin-left:auto;}
.grid .col.left {margin-right:auto;}

/* input */
input, select{height:3.8rem;padding:0 1rem;border:1px solid #ddd;font-size:1.5rem;color:#555}

/*-------------------------------------------------------------------
	@breakpoint
-------------------------------------------------------------------*/
@media screen and (min-width: 426px) {
    .grid .row [class*="xs-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .row > .xs-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .grid .row > .xs-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .grid .row > .xs-col-1 {width: calc(100% / 12 * 1);}
    .grid .row > .xs-col-2 {width: calc(100% / 12 * 2);}
    .grid .row > .xs-col-3 {width: calc(100% / 12 * 3);}
    .grid .row > .xs-col-4 {width: calc(100% / 12 * 4);}
    .grid .row > .xs-col-5 {width: calc(100% / 12 * 5);}
    .grid .row > .xs-col-6 {width: calc(100% / 12 * 6);}
    .grid .row > .xs-col-7 {width: calc(100% / 12 * 7);}
    .grid .row > .xs-col-8 {width: calc(100% / 12 * 8);}
    .grid .row > .xs-col-9 {width: calc(100% / 12 * 9);}
    .grid .row > .xs-col-10 {width: calc(100% / 12 * 10);}
    .grid .row > .xs-col-11 {width: calc(100% / 12 * 11);}
    .grid .row > .xs-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 601px) {
    .grid .row [class*="sm-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .row > .sm-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .grid .row > .sm-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .grid .row > .sm-col-1 {width: calc(100% / 12 * 1);}
    .grid .row > .sm-col-2 {width: calc(100% / 12 * 2);}
    .grid .row > .sm-col-3 {width: calc(100% / 12 * 3);}
    .grid .row > .sm-col-4 {width: calc(100% / 12 * 4);}
    .grid .row > .sm-col-5 {width: calc(100% / 12 * 5);}
    .grid .row > .sm-col-6 {width: calc(100% / 12 * 6);}
    .grid .row > .sm-col-7 {width: calc(100% / 12 * 7);}
    .grid .row > .sm-col-8 {width: calc(100% / 12 * 8);}
    .grid .row > .sm-col-9 {width: calc(100% / 12 * 9);}
    .grid .row > .sm-col-10 {width: calc(100% / 12 * 10);}
    .grid .row > .sm-col-11 {width: calc(100% / 12 * 11);}
    .grid .row > .sm-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 769px) {
    .grid .row [class*="md-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .row > .md-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .grid .row > .md-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .grid .row > .md-col-1 {width: calc(100% / 12 * 1);}
    .grid .row > .md-col-2 {width: calc(100% / 12 * 2);}
    .grid .row > .md-col-3 {width: calc(100% / 12 * 3);}
    .grid .row > .md-col-4 {width: calc(100% / 12 * 4);}
    .grid .row > .md-col-5 {width: calc(100% / 12 * 5);}
    .grid .row > .md-col-6 {width: calc(100% / 12 * 6);}
    .grid .row > .md-col-7 {width: calc(100% / 12 * 7);}
    .grid .row > .md-col-8 {width: calc(100% / 12 * 8);}
    .grid .row > .md-col-9 {width: calc(100% / 12 * 9);}
    .grid .row > .md-col-10 {width: calc(100% / 12 * 10);}
    .grid .row > .md-col-11 {width: calc(100% / 12 * 11);}
    .grid .row > .md-col-12 {width: calc(100% / 12 * 12);}
}
@media screen and (min-width: 1025px) {
    .grid .row [class*="lg-col-"] {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

    .grid .row > .lg-col-auto {width: auto; flex-grow: 0; flex-basis: auto;}
    .grid .row > .lg-col {width: auto; flex-grow: 1; flex-basis: 0;}
    .grid .row > .lg-col-1 {width: calc(100% / 12 * 1);}
    .grid .row > .lg-col-2 {width: calc(100% / 12 * 2);}
    .grid .row > .lg-col-3 {width: calc(100% / 12 * 3);}
    .grid .row > .lg-col-4 {width: calc(100% / 12 * 4);}
    .grid .row > .lg-col-5 {width: calc(100% / 12 * 5);}
    .grid .row > .lg-col-6 {width: calc(100% / 12 * 6);}
    .grid .row > .lg-col-7 {width: calc(100% / 12 * 7);}
    .grid .row > .lg-col-8 {width: calc(100% / 12 * 8);}
    .grid .row > .lg-col-9 {width: calc(100% / 12 * 9);}
    .grid .row > .lg-col-10 {width: calc(100% / 12 * 10);}
    .grid .row > .lg-col-11 {width: calc(100% / 12 * 11);}
    .grid .row > .lg-col-12 {width: calc(100% / 12 * 12);}
}

@media screen and (max-width:1024px){
    html{font-size:9px}
}
@media screen and (max-width:768px){
    html{font-size:8px}
}