:root { 
  --black: #000000;
  --bon-jour: #e0e0e0;
  --cape-cod: #414141;
  --cararra: #eeebe4;
  --coffee-bean: #281309;
  --kabul: #624d42;
  --kabul-2: #624c42;
  --mine-shaft: #333333;
  --mountain-mist: #999999;
  --sisal: #cfcbbd;
  --taupe-gray: #b4ad97;
  --white: #ffffff;
  --white-2: #ffffff80;
  --wood-bark: #281209;
 
  --font-size-l: 22px;
  --font-size-m: 20px;
  --font-size-s: 18px;
  --font-size-xl: 24px;
  --font-size-xs: 16px;
  --font-size-xxl: 26px;
  --font-size-xxxl: 27px;
 
  --font-family-aboreto: "Aboreto", Helvetica;
  --font-family-malgun_gothic-bold: "Noto Sans KR", Helvetica;
  --font-family-noto_serif_kr: "Noto Serif KR", Helvetica;
  --font-family-pretendard-bold: "Pretendard-Bold", Helvetica;
  --font-family-pretendard-light: "Pretendard-Light", Helvetica;
  --font-family-pretendard-regular: "Pretendard-Regular", Helvetica;
  --font-family-pretendard-semibold: "Pretendard-SemiBold", Helvetica;
}
.pretendard-regular-normal-cape-cod-22px {
  color: var(--cape-cod);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.pretendard-regular-normal-mine-shaft-24px {
  color: var(--mine-shaft);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.pretendard-bold-cape-cod-22px {
  color: var(--cape-cod);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

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

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

.pretendard-light-white-32px {
  font-family: var(--font-family-pretendard-light);
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
}

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

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

.aboreto-normal-cararra-24px {
  color: var(--cararra);
  font-family: var(--font-family-aboreto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

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

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

.pretendard-bold-coffee-bean-24px {
  color: var(--coffee-bean);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.pretendard-light-kabul-27px {
  color: var(--kabul);
  font-family: var(--font-family-pretendard-light);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 300;
}

.notoserifkr-light-kabul-68px {
  color: var(--kabul-2);
  font-family: var(--font-family-noto_serif_kr);
  font-size: 68px;
  font-style: normal;
  font-weight: 300;
}

.pretendard-light-coffee-bean-40px {
  color: var(--coffee-bean);
  font-family: var(--font-family-pretendard-light);
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
}

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

.malgungothic-bold-coffee-bean-28px {
  color: var(--coffee-bean);
  font-family: var(--font-family-malgun_gothic-bold);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

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

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

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

.pretendard-bold-cape-cod-16px {
  color: var(--cape-cod);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 700;
}

.pretendard-light-coffee-bean-20px {
  color: var(--coffee-bean);
  font-family: var(--font-family-pretendard-light);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.pretendard-light-white-18px {
  font-family: var(--font-family-pretendard-light);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 300;
}

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

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

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

.aboreto-normal-cararra-18px {
  color: var(--cararra);
  font-family: var(--font-family-aboreto);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

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

.pretendard-bold-coffee-bean-18px {
  color: var(--coffee-bean);
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
}

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