/* Jost Font Family */
@font-face {
  font-family: "Jost-Bold";
  src: url("../fonts/Jost-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost-SemiBold";
  src: url("../fonts/Jost-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Poppins Font Family */
@font-face {
  font-family: "Poppins-Regular";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Font Family */
@font-face {
  font-family: "Pretendard-Bold";
  src: url("../fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Light";
  src: url("../fonts/Pretendard-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Medium";
  src: url("../fonts/Pretendard-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Regular";
  src: url("../fonts/Pretendard-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-SemiBold";
  src: url("../fonts/Pretendard-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Variable Font Family */
@font-face {
  font-family: "Pretendard Variable-Light";
  src: url("../fonts/Pretendard-Variable.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Variable-Medium";
  src: url("../fonts/Pretendard-Variable.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Variable-Regular";
  src: url("../fonts/Pretendard-Variable.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Variable-SemiBold";
  src: url("../fonts/Pretendard-Variable.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Times New Roman Font Family */
@font-face {
  font-family: "Times New Roman-Bold";
  src: url("../fonts/TimesNewRoman-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman-Regular";
  src: url("../fonts/TimesNewRoman-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root { 
  --abbey: #4f5050;
  --aero-blue: #cfffe4;
  --alabaster: #fafafa;
  --alto: #d9d9d9;
  --black: #000000;
  --blue-chalk: #efe5ff;
  --blue-chalk-2: #f1e9f9;
  --blue-chalk-3: #eae1ff;
  --blue-ribbon: #0a68f5;
  --boulder: #787878;
  --cinderella: #ffe2d8;
  --conifer: #92d050;
  --flush-orange: #ff7f00;
  --fuscous-gray: #505050;
  --fuscous-gray-2: #4f4e4e;
  --gallery: #f0f0f0;
  --green-blue: #056ab6;
  --hint-of-red: #faf9f9;
  --hot-pink: #ff65a1;
  --international-orange: #ff5800;
  --jade: #00b050;
  --karry: #ffecd6;
  --lavender: #b975e1;
  --lemon-chiffon: #fffac9;
  --licorice: #111111;
  --lima: #76b531;
  --lochmara: #0070c0;
  --madang: #bbfebb;
  --mandarin-pearl: #f87246;
  --mariner: #286dd6;
  --masala: #3b3a3a;
  --mauve: #ce9fff;
  --mercury: #e3e3e3;
  --nobel: #b4b4b4;
  --orange: #ff7538;
  --pastel-green: #8ed973;
  --piggy-pink: #ffdbe8;
  --pippin: #ffe9e2;
  --pizazz: #ff8c00;
  --purple-heart: #673fc4;
  --purple-plum: #9b46cd;
  --razzmatazz: #dd1f65;
  --scarlet: #ff3300;
  --sea-green: #34a054;
  --seashell: #f1f1f1;
  --shady-lady: #aaaaaa;
  --shark: #282828;
  --sonic-silver: #777777;
  --st-tropaz: #20579f;
  --tory-blue: #134da5;
  --tundora: #464242;
  --violet-red: #fa3d86;
  --violet-red-2: #fc5294;
  --white: #ffffff;
  --white-2: #ffffff33;
  --white-3: #ffffff4c;
  --white-4: #ffffff1a;
  --white-5: #ffffff80;
 
  --font-size-l: 17px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 24px;
  --font-size-xxxxl: 30px;
 
  --font-family-jost-bold: "Jost-Bold", Helvetica;
  --font-family-jost-semibold: "Jost-SemiBold", Helvetica;
  --font-family-poppins-regular: "Poppins-Regular", Helvetica;
  --font-family-pretendard-bold: "Pretendard-Bold", Helvetica;
  --font-family-pretendard-light: "Pretendard-Light", Helvetica;
  --font-family-pretendard-medium: "Pretendard-Medium", Helvetica;
  --font-family-pretendard-regular: "Pretendard-Regular", Helvetica;
  --font-family-pretendard-semibold: "Pretendard-SemiBold", Helvetica;
  --font-family-pretendard_variable-light: "Pretendard Variable-Light", Helvetica;
  --font-family-pretendard_variable-medium: "Pretendard Variable-Medium", Helvetica;
  --font-family-pretendard_variable-regular: "Pretendard Variable-Regular", Helvetica;
  --font-family-pretendard_variable-semibold: "Pretendard Variable-SemiBold", Helvetica;
  --font-family-times_new_roman-bold: "Times New Roman-Bold", Helvetica;
  --font-family-times_new_roman-regular: "Times New Roman-Regular", Helvetica;
}
.pretendardvariable-regular-normal-fuscous-gray-16px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-white-20px {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-fuscous-gray-18px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-fuscous-gray-20px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-medium-white-18px {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.pretendard-semi-bold-white-18px {
  color: var(--white);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
}

.poppins-regular-normal-white-16px {
  color: var(--white);
  font-family: var(--font-family-poppins-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendard-medium-fuscous-gray-20px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendard-regular-normal-white-16px {
  color: var(--white);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendard-semi-bold-lemon-chiffon-16px {
  color: var(--lemon-chiffon);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.pretendard-medium-green-blue-20px {
  color: var(--green-blue);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-abbey-18px {
  color: var(--abbey);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.pretendard-regular-normal-fuscous-gray-16px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-semi-bold-lemon-chiffon-16px {
  color: var(--lemon-chiffon);
  font-family: var(--font-family-pretendard_variable-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.jost-semi-bold-white-17px {
  color: var(--white);
  font-family: var(--font-family-jost-semibold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
}

.pretendardvariable-semi-bold-white-30px {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-semibold);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 600;
}

.pretendard-medium-white-20px {
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendard-medium-white-16px {
  color: var(--white);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-medium-masala-16px {
  color: var(--masala);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-medium-alto-24px {
  color: var(--alto);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.pretendard-light-fuscous-gray-18px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-light);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 300;
}

.pretendard-regular-normal-fuscous-gray-14px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-fuscous-gray-14px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-white-16px {
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-sonic-silver-20px {
  color: var(--sonic-silver);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-sonic-silver-16px {
  color: var(--sonic-silver);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-white-24px {
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-medium-fuscous-gray-16px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-black-18px {
  color: var(--black);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-abbey-20px {
  color: var(--abbey);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.pretendard-regular-normal-tundora-20px {
  color: var(--tundora);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-fuscous-gray-24px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-nobel-16px {
  color: var(--nobel);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-fuscous-gray-18px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-fuscous-gray-20px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.pretendard-bold-white-46px {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
}

.pretendard-regular-normal-black-30px {
  color: var(--black);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-black-20px {
  color: var(--black);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-gallery-16px {
  color: var(--gallery);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-scarlet-14px {
  color: var(--scarlet);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.jost-bold-white-17px {
  color: var(--white);
  font-family: var(--font-family-jost-bold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.poppins-regular-normal-white-15px {
  color: var(--white-3);
  font-family: var(--font-family-poppins-regular);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-shark-24px {
  color: var(--shark);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-green-blue-16px {
  color: var(--green-blue);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendard-medium-white-20px-2 {
  color: var(--white);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-shark-16px {
  color: var(--shark);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendard-medium-fuscous-gray-18px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-medium-lemon-chiffon-20px {
  color: var(--lemon-chiffon);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-fuscous-gray-18px-2 {
  color: var(--fuscous-gray-2);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-medium-white-16px {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-abbey-14px {
  color: var(--abbey);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-white-8px {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

.pretendard-medium-fuscous-gray-30px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 500;
}

.pretendardvariable-regular-normal-black-16px {
  color: var(--black);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendard-regular-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.pretendard-regular-normal-shark-14px {
  color: var(--shark);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-semi-bold-lemon-chiffon-18px {
  color: var(--lemon-chiffon);
  font-family: var(--font-family-pretendard_variable-semibold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
}

.pretendard-semi-bold-fuscous-gray-24px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
}

.pretendardvariable-medium-white-24px-2 {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-medium);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.pretendard-bold-fuscous-gray-30px {
  color: var(--fuscous-gray);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
}

.pretendardvariable-regular-normal-white-16px-2 {
  color: var(--white);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.pretendardvariable-regular-normal-tory-blue-16px {
  color: var(--tory-blue);
  font-family: var(--font-family-pretendard_variable-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}