@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

html {
    font-family: 'Pretendard', sans-serif, 'Apple SD Gothic Neo', Roboto, 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    /* transition: background-color 1.0s, color 1.0s; */
    -ms-overflow-style: none;
    -webkit-font-smoothing: antialiased;
	overflow-x: hidden;
    word-break: keep-all;
}

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;
}

a {
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, a, nav, form {
	box-sizing: border-box;
}

ol, ul, li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.icon-wrp {
    padding: 0;
}

.img-wrp {
    width: 100%;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

button {
	border: 0;
	background: transparent;
	cursor: pointer;
}

:root {

    /* */
    /* font size */

    --d0-fontSize: 10rem; /* 160px */
    --d1-fontSize: 7.5rem; /* 120px */
    --d2-fontSize: 5rem; /* 80px */
    --d3-fontSize: 3.75rem; /* 60px */
    --h1-fontSize: 3rem; /* 48px */
    --h2-fontSize: 2.625rem; /* 42px */
    --h3-fontSize: 2.25rem; /* 36px */
    --h4-fontSize: 2rem; /* 32px */
    --h5-fontSize: 1.75rem; /* 28px */
    --h6-fontSize: 1.5rem; /* 24px */
    --hl-fontSize: 1.25rem; /* 20px */
    --ph-fontSize: 1.125rem; /* 18px */
    --p-fontSize: 1rem; /* 16px */
    --ch-fontSize: 0.875rem; /* 14px */
    --c1-fontSize: 0.75rem; /* 12px */
    --c2-fontSize: 0.625rem; /* 10px */

    /* */
    /* colour system */

    /* custom colour */

    --customGreen: #01A654;
    --customGreen-secondary: #00984c;
    --customYellow: #F0C800;
    --customYellow-secondary: #eac300;
    --customDarkGrey: #1E1E1E;
    --customDarkGrey-secondary: #141414;

    /* system colour */

    --systemAccent: #2976FF;
    --systemBlack: #0F0F0F;
    --systemBlack-pure: #000000;
    --systemWhite: #FFFFFF;
    --systemWhite-pure: #FEFEFE;

    /* background colour */

    --systemBG: #FFFFFF;
    --systemBG-primary: #F5F5F5;
    --systemBG-secondary: #ECECEC;
    --systemBG-primary-hover: #EFEFEF;
    --systemBG-secondary-hover: #E0E0E0;

    --systemAccent-hover: #1f68e8;
    --systemAccent-bg-filled: #1FA1FF;
    --systemAccent-bg-filledTonal: rgba(31, 161, 255, 0.24);

    --systemPrimary-bg-filled: rgba(0, 0, 0, 0.92);
    --systemPrimary-bg-filledTonal: rgba(0, 0, 0, 0.68);

    /* primary to quinary */

    --systemPrimary: rgba(0, 0, 0, 0.92);
    --systemPrimary-onLight: rgba(0, 0, 0, 0.82);
    --systemPrimary-onDark: rgba(0, 0, 0, 0.94);

    --systemSecondary: rgba(0, 0, 0, 0.64);
    --systemSecondary-onLight: rgba(0, 0, 0, 0.62);
    --systemSecondary-onDark: rgba(0, 0, 0, 0.68);

    --systemTertiary: rgba(0, 0, 0, 0.48);
    --systemTertiary-onLight: rgba(0, 0, 0, 0.48);
    --systemTertiary-onDark: rgba(0, 0, 0, 0.48);

    --systemQuaternary: rgba(0, 0, 0, 0.18);
    --systemQuaternary-onLight: rgba(0, 0, 0, 0.16);
    --systemQuaternary-onDark: rgba(0, 0, 0, 0.20);

    --systemQuinary: rgba(0, 0, 0, 0.10);
    --systemQuinary-onLight: rgba(0, 0, 0, 0.12);
    --systemQuinary-onDark: rgba(0, 0, 0, 0.14);

    /* white system */

    --systemWhite-primary: rgba(255, 255, 255, 0.92);
    --systemWhite-secondary: rgba(255, 255, 255, 0.55);
    --systemWhite-tertiary: rgba(255, 255, 255, 0.25);
    --systemWhite-quaternary: rgba(255, 255, 255, 0.18);
    --systemWhite-quinary: rgba(255, 255, 255, 0.10);

    /* state */
    
    --systemDisabled-bg: #DCDCDC;
    --systemDisabled-txt: rgba(60, 60, 60, 0.3);

    --systemDisabled-darkMode-bg:  #3f3f3f;
    --systemDisabled-darkMode-txt: #797979;

    /* positive spacing */

    --systemSpacing-0: 0rem;
    --systemSpacing-1: 0.0625rem;
    --systemSpacing-2: 0.125rem;
    --systemSpacing-4: 0.25rem;
    --systemSpacing-6: 0.375rem;
    --systemSpacing-8: 0.5rem;
    --systemSpacing-10: 0.625rem;
    --systemSpacing-12: 0.75rem;
    --systemSpacing-16: 1rem;
    --systemSpacing-20: 1.25rem;
    --systemSpacing-22: 1.375rem;
    --systemSpacing-24: 1.5rem;
    --systemSpacing-28: 1.75rem;
    --systemSpacing-32: 2rem;
    --systemSpacing-36: 2.25rem;
    --systemSpacing-40: 2.5rem;
    --systemSpacing-44: 2.75rem;
    --systemSpacing-48: 3rem;
    --systemSpacing-52: 3.25rem;
    --systemSpacing-56: 3.5rem;
    --systemSpacing-60: 3.75rem;
    --systemSpacing-64: 4rem;
    --systemSpacing-68: 4.25rem;
    --systemSpacing-70: 4.375rem;
    --systemSpacing-72: 4.5rem;
    --systemSpacing-80: 5rem;
    --systemSpacing-88: 5.5rem;
    --systemSpacing-100: 6.25rem;
    --systemSpacing-120: 7.5rem;
    --systemSpacing-132: 8.25rem;
    --systemSpacing-140: 8.75rem;
    --systemSpacing-160: 10rem;
    --systemSpacing-180: 11.25rem;
    --systemSpacing-200: 12.5rem;
    --systemSpacing-240: 15rem;
    --systemSpacing-280: 17.5rem;
    --systemSpacing-300: 18.75rem;
    --systemSpacing-320: 20rem;
    --systemSpacing-360: 22.5rem;
    --systemSpacing-400: 25rem;
    --systemSpacing-420: 26.25rem;
    --systemSpacing-440: 27.5rem;
    --systemSpacing-480: 30rem;
    --systemSpacing-520: 32.5rem;
    --systemSpacing-560: 35rem;
    --systemSpacing-600: 37.5rem;
    --systemSpacing-680: 42.5rem;
    --systemSpacing-720: 45rem;
    --systemSpacing-740: 46.25rem;
    --systemSpacing-800: 50rem;
    --systemSpacing-820: 51.25rem;
    --systemSpacing-840: 52.5rem;
    --systemSpacing-880: 55rem;
    --systemSpacing-920: 57.5rem;
    --systemSpacing-960: 60rem;
    --systemSpacing-1000: 62.5rem;
    --systemSpacing-1100: 68.75rem;
    --systemSpacing-1200: 75rem;
    --systemSpacing-1294: 80.875rem;
    --systemSpacing-1400: 87.5rem;
    --systemSpacing-1520: 95rem;
    --systemSpacing-1600: 100rem;
    --systemSpacing-9999: 625rem;

    /* negative spacing */

    --negative-systemSpacing-1: -0.0625rem;
    --negative-systemSpacing-2: -0.125rem;
    --negative-systemSpacing-4: -0.25rem;
    --negative-systemSpacing-6: -0.375rem;
    --negative-systemSpacing-8: -0.5rem;
    --negative-systemSpacing-10: -0.625rem;
    --negative-systemSpacing-12: -0.75rem;
    --negative-systemSpacing-16: -1rem;
    --negative-systemSpacing-20: -1.25rem;
    --negative-systemSpacing-24: -1.5rem;
    --negative-systemSpacing-32: -2rem;
    --negative-systemSpacing-40: -2.5rem;
    --negative-systemSpacing-120: -7.5rem;
    --negative-systemSpacing-160: -10rem;

    /* dim */

    --systemDim-10: rgba(0, 0, 0, 0.1);
    --systemDim-15: rgba(0, 0, 0, 0.15);
    --systemDim-20: rgba(0, 0, 0, 0.2);
    --systemDim-25: rgba(0, 0, 0, 0.25);
    --systemDim-30: rgba(0, 0, 0, 0.3);
    --systemDim-35: rgba(0, 0, 0, 0.35);
    --systemDim-40: rgba(0, 0, 0, 0.4);
    --systemDim-45: rgba(0, 0, 0, 0.45);
    --systemDim-50: rgba(0, 0, 0, 0.5);
    --systemDim-55: rgba(0, 0, 0, 0.55);
    --systemDim-60: rgba(0, 0, 0, 0.6);
    --systemDim-65: rgba(0, 0, 0, 0.65);
    --systemDim-70: rgba(0, 0, 0, 0.7);
    --systemDim-75: rgba(0, 0, 0, 0.75);
    --systemDim-80: rgba(0, 0, 0, 0.8);
    --systemDim-85: rgba(0, 0, 0, 0.85);
    --systemDim-90: rgba(0, 0, 0, 0.9);
    --systemDim-95: rgba(0, 0, 0, 0.95);
    --systemDim-100: rgba(0, 0, 0, 1.0);

    /* */
    /* custom colour */

    --customBlue-bg: #E5F3FF;
    --customBlue-txt: #0085FF;
    --customGreen-bg: #E5F8EB;
    --customGreen-txt: #00BA34;
    --customCoral-bg: #FFEBEB;
    --customCoral-txt: #FF7B7B;
    --customGrey-bg: #e9e9e9;
    --customGrey-txt: #878787;
    --customPurple-bg: #F1D3FF;
    --customPurple-txt: #9604DD;

    --customDarkGrey-primary-bg: #E6E6E626;
    --customDarkGrey-secondary-bg: #E7E7E71A;

    /* */
    /* apple siri bg */

    --appleSiri-bg: #FBFBFD;
    /* */
    /* top navigation container */

    --topNavCtnr-bg: rgba(245, 245, 245, 0.52);

    /* */
    /* menu ctnr */

    --menuCtnr-bg: #363636;

    --menuCtnr-systemWhite-primary: rgba(255, 255, 255, 0.92);
    --menuCtnr-systemWhite-secondary: rgba(255, 255, 255, 0.55);
    --menuCtnr-systemWhite-tertiary: rgba(255, 255, 255, 0.25);
    --menuCtnr-systemWhite-quaternary: rgba(255, 255, 255, 0.18);
    --menuCtnr-systemWhite-quinary: rgba(255, 255, 255, 0.10);

    /* */
    /* iphone alert background */

    --alert-materialBG: linear-gradient(0deg, #383838 0%, #383838 100%), rgba(245, 245, 245, 0.82);
    --alert-dim: rgba(0, 0, 0, 0.4);

    /* */
    /* footer ctnr */

    --footerCtnr-bg: #141414;
}

.darkmode {

    /**/
    /**/
    
    --systemWhite: #0F0F0F;
    --systemBlack: #F5F5F5;

    --systemBG: #111111;
    --systemBG-primary: #171717;
    --systemBG-primary-hover: #191919;
    --systemBG-secondary: #1E1E1E;
    --systemBG-secondary-hover: #242424;

    --menuCtnr-bg: #161616;

    /* */
    /* primary to quinary colour */

    --systemPrimary: #FFFFFFD9;
    --systemPrimary-onLight: #FFFFFFE0;
    --systemPrimary-onDark: #FFFFFFD1;

    --systemSecondary: #FFFFFF8C;
    --systemSecondary-onLight: #FFFFFF94;
    --systemSecondary-onDark: #FFFFFF85;

    --systemTertiary: #FFFFFF40;
    --systemTertiary-onLight: #FFFFFF40;
    --systemTertiary-onDark: #FFFFFF40;

    --systemQuaternary: #FFFFFF1A;
    --systemQuaternary-onLight: #FFFFFF1F;
    --systemQuaternary-onDark:#FFFFFF14;

    --systemQuinary: #FFFFFF0D;
    --systemQuinary-onLight: #FFFFFF12;
    --systemQuinary-onDark: #FFFFFF0D;

    /* */
    /* custom color */

    --customBlue-bg: #2e363d;
    --customBlue-txt: #3d77ad;
    --customGreen-bg: #2d3a31;
    --customGreen-txt: #278a43;
    --customCoral-bg: #3a2b2b;
    --customCoral-txt: #b44a4a;
    --customGrey-bg: #424242;
    --customGrey-txt: #9c9c9c;
    --customPurple-bg: #322737;
    --customPurple-txt: #702b95;

    /* */
    /* top navigation container */

    --topNavCtnr-bg: rgba(80, 80, 80, 0.12);

    /* */
    /* iphone alert background */

    --alert-materialBG: linear-gradient(0deg, #8C8C8C 0%, #8C8C8C 100%), rgba(10, 10, 10, 0.82);
    --alert-dim: rgba(0, 0, 0, 0.6);
}


/* grid system */

.systemGrid-4x2 {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.systemGrid-2x2 {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    grid-auto-flow: row;
    grid-template-columns: auto;
    grid-template-rows: auto;
}


/* */
/* position */

.pos-abs {
    position: absolute;   
}

.pos-rel {
    position: absolute;
}


/* */
/* custom */

.mrg-b-025 {
    margin-bottom: var(--systemSpacing-4);
}

.mrg-b-05 {
    margin-bottom: var(--systemSpacing-8);
}

.mrg-b-cstm {
    margin-bottom: var(--systemSpacing-64);
}

.mrg-t-1 {
    margin-top: var(--systemSpacing-16);
}

.mrg-b-1 {
    margin-bottom: var(--systemSpacing-16);
}

.mrg-b-2 {
    margin-bottom: var(--systemSpacing-32);
}


.opa-80:hover {
    opacity: 80%;
    transition: all 0.2s ease-in-out;
}


/* */
/* text colour bold and align*/

/* black */

.systemPrimary {
    color: var(--systemPrimary);
}

.systemSecondary {
    color: var(--systemSecondary);
}

.systemTertiary {
    color: var(--systemTertiary);
}

.systemQuaternary {
    color: var(--systemQuaternary);
}

.word-break {
    word-break: keep-all;
}

/* white */

.systemWhite {
    color: var(--systemWhite);
}

.systemWhite-secondary {
    color: var(--systemWhite-secondary);
}


/* */
/* text bold */

.txt-b-600 {
    font-weight: 600;
}

.txt-b-500 {
    font-weight: 500;
}

.txt-b-400 {
    font-weight: 400;
}

.txt-align-c {
    text-align: center;
}


/* */
/* media query */


/* */
/* 1294px */


@media screen and (max-width: 960px) {

    .systemGrid-4x2 {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-auto-flow: row;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .mrg-b-cstm {
        margin-bottom: var(--systemSpacing-12);
    }

    .systemGrid-2x2 {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    
        grid-auto-flow: row;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
}