@font-face {
  font-family: Pretendard;
  font-weight: 800;
  src: url('https://cdn.fint.co.kr/static/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
    url('https://cdn.fint.co.kr/static/fonts/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: Pretendard;
  font-weight: 700;
  src: url('https://cdn.fint.co.kr/static/fonts/Pretendard-Bold.woff2') format('woff2'),
    url('https://cdn.fint.co.kr/static/fonts/Pretendard-Bold.woff') format('woff');
}
@font-face {
  font-family: Pretendard;
  font-weight: 600;
  src: url('https://cdn.fint.co.kr/static/fonts/Pretendard-SemiBold.woff2') format('woff2'),
    url('https://cdn.fint.co.kr/static/fonts/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
  font-family: Pretendard;
  font-weight: 500;
  src: url('https://cdn.fint.co.kr/static/fonts/Pretendard-Medium.woff2') format('woff2'),
    url('https://cdn.fint.co.kr/static/fonts/Pretendard-Medium.woff') format('woff');
}
@font-face {
  font-family: Pretendard;
  font-weight: 400;
  src: url('https://cdn.fint.co.kr/static/fonts/Pretendard-Regular.woff2') format('woff2'),
    url('https://cdn.fint.co.kr/static/fonts/Pretendard-Regular.woff') format('woff');
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  padding: 0;
  margin: 0;
  font-display: optional;
}

h1.header_large_bold {
  font-family: 'Pretendard';
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

h1.header_large_medium {
  font-family: 'Pretendard';
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
}

h2.header_medium_bold {
  font-family: 'Pretendard';
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

h2.header_medium_medium {
  font-family: 'Pretendard';
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
}
h2.header_medium_regular {
  font-family: 'Pretendard';
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
}

h3.header_small_bold {
  font-family: 'Pretendard';
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

h3.header_small_medium {
  font-family: 'Pretendard';
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

h4.subheader_default_bold {
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

h4.subheader_default_medium {
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

h4.subheader_default_regular {
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

h5.subheader_small_bold {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
h5.subheader_small_regular {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

p.body_medium_bold {
  font-family: 'Pretendard';
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  margin-top: 0;
}

p.body_medium_medium {
  font-family: 'Pretendard';
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  margin-top: 0;
}
p.body_medium_regular {
  font-family: 'Pretendard';
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-top: 0;
}
p.body_default_bold {
  font-family: 'Pretendard';
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  margin-top: 0;
}

p.body_default_medium {
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 0;
}
p.body_default_regular {
  font-family: 'Pretendard';
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 0;
}
p.body_small_bold {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  margin-top: 0;
}

p.body_small_medium {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  margin-top: 0;
}
p.body_small_regular {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
p.body_tiny_regular {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 0;
}

span.label_medium_bold {
  font-family: 'Pretendard';
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

span.label_medium_medium {
  font-family: 'Pretendard';
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
span.label_medium_regular {
  font-family: 'Pretendard';
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
span.label_default_bold {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

span.label_default_medium {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
span.label_default_regular {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
span.label_small_bold {
  font-family: 'Pretendard';
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

span.label_small_medium {
  font-family: 'Pretendard';
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}
span.label_small_regular {
  font-family: 'Pretendard';
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

span.number_xxxlarge_bold {
  font-family: 'Pretendard';
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
}
span.number_xxlarge_bold {
  font-family: 'Pretendard';
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}
span.number_xlarge_heavy {
  font-family: 'Pretendard';
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;
}
span.number_xlarge_bold {
  font-family: 'Pretendard';
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}
span.number_large_bold {
  font-family: 'Pretendard';
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
span.number_medium_bold {
  font-family: 'Pretendard';
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
span.number_default_Pretendard {
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

span.number_medium_bold {
  font-family: 'Pretendard';
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

span.number_default_bold {
  font-family: 'Pretendard';
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
}

span.number_default_medium {
  font-family: 'Pretendard';
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
span.number_default_regular {
  font-family: 'Pretendard';
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

span.number_small_bold {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}

span.number_small_medium {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
span.number_small_regular {
  font-family: 'Pretendard';
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

span.number_tiny_medium {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
span.number_tiny_regular {
  font-family: 'Pretendard';
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

a.link_default_medium {
  font-family: 'Pretendard';
  font-size: 15px;
  font-style: medium;
  line-height: 24px;
  text-decoration-line: underline;
}
a.link_small_medium {
  font-family: 'Pretendard';
  font-size: 14px;
  font-style: medium;
  line-height: 22px;
  text-decoration-line: underline;
}
a.link_tiny_medium {
  font-family: 'Pretendard';
  font-size: 12px;
  font-style: medium;
  line-height: 18px;
  text-decoration-line: underline;
}

div.space_2 {
  height: 2px;
  width: 100%;
}
div.space_4 {
  height: 4px;
  width: 100%;
}
div.space_08 {
  height: 8px;
  width: 100%;
}
div.space_12 {
  height: 12px;
  width: 100%;
}
div.space_16 {
  height: 16px;
  width: 100%;
}
div.space_20 {
  height: 20px;
  width: 100%;
}
div.space_24 {
  height: 24px;
  width: 100%;
}
div.space_32 {
  height: 32px;
  width: 100%;
}
div.space_48 {
  height: 48px;
  width: 100%;
}
div.space_56 {
  height: 56px;
  width: 100%;
}
div.space_64 {
  height: 64px;
  width: 100%;
}
div.space_72 {
  height: 72px;
  width: 100%;
}

section.space_48 {
  height: 48px;
  width: 100%;
}

.teal_500 {
  color: #007899;
}

.grey_600 {
  color: #333333;
}

ul > li {
  margin-bottom: 0;
}

b {
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  margin-top: 0;
  display: inline-block;
}
:root {
  /* Safe-Area */
  --safeAreaTop: env(safe-area-inset-top);
  --safeAreaRight: env(safe-area-inset-right);
  --safeAreaBottom: env(safe-area-inset-bottom);
  --safeAreaLeft: env(safe-area-inset-left);
  /* Colors */
  --white: #ffffff;
  --gray50: #f8f9f9;
  --gray100: #f2f4f5;
  --gray200: #e9eaeb;
  --gray300: #dedfe0;
  --gray400: #cacbcc;
  --gray500: #929394;
  --gray600: #666767;
  --gray700: #4c4c4d;
  --gray800: #323333;
  --gray900: #262626;
  --black: #101112;
  --blackalpha10: #101112;
  --blackalpha20: #101112;
  --blackalpha40: #101112;
  --blackalpha80: #101112;
  --whitealpha10: #ffffff;
  --whitealpha20: #ffffff;
  --whitealpha40: #ffffff;
  --whitealpha80: #ffffff;
  --teal50: #f2fdff;
  --teal100: #e5fbff;
  --teal200: #bdf3fc;
  --teal300: #89e8fa;
  --teal400: #55daf3;
  --teal500: #00c9ed;
  --teal600: #01b8d9;
  --teal700: #008199;
  --teal800: #006173;
  --teal900: #003a45;
  --red50: #fff8f7;
  --red100: #ffeceb;
  --red200: #ffc2bf;
  --red300: #fa8f89;
  --red400: #ff6259;
  --red500: #ff4940;
  --red600: #e54239;
  --red700: #992c26;
  --red800: #73211d;
  --red900: #451411;
  --blue50: #f5fbff;
  --blue100: #e5f5ff;
  --blue200: #bde3fc;
  --blue300: #89cdfa;
  --blue400: #59bdff;
  --blue500: #0091f2;
  --blue600: #0082d9;
  --blue700: #005c99;
  --blue800: #004573;
  --blue900: #002945;
  --yellow50: #fffcf2;
  --yellow100: #fff9e5;
  --yellow200: #fcedbd;
  --yellow300: #fade89;
  --yellow400: #ffd559;
  --yellow500: #ffc20d;
  --yellow600: #d9a50b;
  --yellow700: #997508;
  --yellow800: #735706;
  --yellow900: #453303;
  --green50: #f7fffe;
  --green100: #e3fcf8;
  --green200: #bbfaee;
  --green300: #88f7e3;
  --green400: #3df2d0;
  --green500: #00cca7;
  --green600: #00b292;
  --green700: #00997d;
  --green800: #00735e;
  --green900: #004538;
  --purple50: #f7f9ff;
  --purple100: #edefff;
  --purple200: #e0e3ff;
  --purple300: #ccd1ff;
  --purple400: #8c97ff;
  --purple500: #5969ff;
  --purple600: #3d4bcc;
  --purple700: #2e3999;
  --purple800: #222a73;
  --purple900: #151945;
  --orange50: #fffcf7;
  --orange100: #fff5e6;
  --orange200: #ffe7bf;
  --orange300: #ffd38c;
  --orange400: #ffb53f;
  --orange500: #ffa719;
  --orange600: #cc7e00;
  --orange700: #995e00;
  --orange800: #734700;
  --orange900: #452a00;

  /* Design Token - Light */
  --bgDefault: var(--white);
  --bgPress: var(--gray50);
  --bgBorder: var(--gray200);
  --bgSkeleton: var(--gray50);
  --bgBoxGrayNormal: var(--gray50);
  --bgBoxGrayPress: var(--gray100);
  --bgBoxYellowNormal: var(--yellow100);
  --bgBoxYellowPress: var(--yellow200);
  --bgBoxRed: var(--red50);
  --bgBoxTealNormal: var(--teal50);
  --bgBoxTealPress: var(--teal100);
  --bgWarning: var(--yellow500);
  --bgInputNormal: var(--white);
  --bgInputPress: var(--gray50);
  --bgInputDisabled: var(--gray100);
  --bgOutlineNormal: var(--gray300);
  --bgOutlineHighlight: var(--teal500);
  --bgOutlineError: var(--red500);
  --bgOutlineDisabled: var(--gray200);
  --bgThumbnail: var(--gray50);
  --bgPopup: var(--white);
  --bgBottomsheet: var(--white);
  --bgBottomNavigation: var(--white);
  --bgHighlight: var(--teal500);
  --bgDanger: var(--red500);
  --bgSnackbar: var(--gray900);
  --bgSwitchActive: var(--teal500);
  --bgSwitchInactive: var(--gray200);
  --bgSwitchToggle: var(--white);
  --bgBadgeNew: var(--red500);
  --bgPaginationWhiteInactive: var(--whitealpha20);
  --bgPaginationWhiteActive: var(--white);
  --bgPaginationInactive: var(--blackalpha10);
  --bgPaginationActive: var(--teal500);
  --textPrimary: var(--gray900);
  --textSecondary: var(--gray700);
  --textTertiary: var(--gray500);
  --textPlaceholder: var(--gray400);
  --textDisabled: var(--gray400);
  --textHighlight: var(--teal700);
  --textDanger: var(--red600);
  --textInverse: var(--white);
  --textRevenueUp: var(--red600);
  --textRevenueDown: var(--blue600);
  --textTransferIn: var(--teal600);
  --textTransferOut: var(--red600);
  --textSnackbar: var(--white);
  --textBasicBannerTitle: var(--white);
  --textBasicBannerDescription: var(--whitealpha80);
  --bgBtnPrimaryTealNormal: var(--teal500);
  --bgBtnPrimaryTealPress: var(--teal600);
  --bgBtnPrimaryRedNormal: var(--red500);
  --bgBtnPrimaryRedPress: var(--red600);
  --bgSecondaryGrayNormal: var(--gray100);
  --bgSecondaryGrayPress: var(--gray200);
  --bgSecondaryTealNormal: var(--teal100);
  --bgSecondaryTealPress: var(--teal200);
  --bgSecondaryRedNormal: var(--red100);
  --bgSecondaryRedPress: var(--red200);
  --bgSecondaryBlueNormal: var(--blue100);
  --bgSecondaryBluePress: var(--blue200);
  --bgSecondaryYellowNormal: var(--yellow100);
  --bgSecondaryYellowPress: var(--yellow200);
  --bgSecondaryGreenNormal: var(--green100);
  --bgSecondaryGreenPress: var(--green200);
  --bgSecondaryPurpleNormal: var(--purple100);
  --bgSecondaryPurplePress: var(--purple200);
  --bgSecondaryOrangeNormal: var(--orange100);
  --bgSecondaryOrangePress: var(--orange200);
  --bgBtnDisabled: var(--gray300);
  --textBtnPrimary: var(--white);
  --textSecondaryGray: var(--gray600);
  --textSecondaryTeal: var(--teal600);
  --textSecondaryRed: var(--red600);
  --textSecondaryBlue: var(--blue600);
  --textSecondaryYellow: var(--yellow600);
  --textSecondaryGreen: var(--green600);
  --textSecondaryPurple: var(--purple600);
  --textSecondaryOrange: var(--orange600);
  --textBtnGray: var(--gray500);
  --textBtnGrayPress: var(--gray600);
  --textBtnWhite: var(--white);
  --textBtnWhitePress: var(--gray50);
  --textTabActiveWhite: var(--white);
  --textTabActiveGray: var(--gray900);
  --bgAvatarGray: var(--gray50);
  --bgAvatarTeal: var(--teal100);
  --bgAvatarRed: var(--red100);
  --bgAvatarBlue: var(--blue100);
  --bgAvatarYellow: var(--yellow100);
  --bgAvatarGreen: var(--green100);
  --bgAvatarPurple: var(--purple100);
  --bgAvatarOrange: var(--orange100);
  --textAvatarGray: var(--gray600);
  --textAvatarTeal: var(--teal600);
  --textAvatarRed: var(--red600);
  --textAvatarBlue: var(--blue600);
  --textAvatarYellow: var(--yellow600);
  --textAvatarGreen: var(--green600);
  --textAvatarPurple: var(--purple600);
  --textAvatarOrange: var(--orange600);
  --bgUsaStock: var(--teal500);
  --bgDollarEtf: var(--green500);
  --bgWonEtf: var(--yellow500);
  --bgUsaStockDetail01: var(--teal500);
  --bgUsaStockDetail02: var(--teal400);
  --bgUsaStockDetail03: var(--teal200);
  --bgUsaStockDetail04: var(--teal300);
  --bgUsaStockDetail05: var(--teal600);
  --bgUsaStockDetail06: var(--teal700);
  --bgUsaStockDetail07: var(--teal800);
  --bgUsaStockDetail08: var(--teal900);
  --bgUsaStockDetail09: var(--blue900);
  --bgUsaStockDetail10: var(--blue800);
  --bgUsaStockDetail11: var(--blue700);
  --bgUsaStockDetail12: var(--blue600);
  --bgDollarEtfDetail01: var(--green500);
  --bgDollarEtfDetail02: var(--green400);
  --bgDollarEtfDetail03: var(--green600);
  --bgDollarEtfDetail04: var(--green700);
  --bgDollarEtfDetail05: var(--green800);
  --bgDollarEtfDetail06: var(--green900);
  --bgWonEtfDetail01: var(--yellow500);
  --bgWonEtfDetail02: var(--yellow400);
  --bgWonEtfDetail03: var(--yellow600);
  --bgWonEtfDetail04: var(--yellow700);
  --bgWonEtfDetail05: var(--yellow800);
  --bgWonEtfDetail06: var(--yellow900);
  --bgRevenueUp: var(--red600);
  --bgRevenueDown: var(--blue600);
  --bgRadialChart: var(--teal500);
  --bgStopTrading: var(--gray400);

  --bgKoUsaStockDetail01: var(--red500);
  --bgKoUsaStockDetail02: var(--red400);
  --bgKoUsaStockDetail03: var(--red200);
  --bgKoUsaStockDetail04: var(--red300);
  --bgKoUsaStockDetail05: var(--red600);
  --bgKoUsaStockDetail06: var(--red700);
  --bgKoUsaStockDetail07: var(--red800);
  --bgKoUsaStockDetail08: var(--red900);
  --bgKoUsaStockDetail09: var(--orange800);
  --bgKoUsaStockDetail10: var(--orange700);
  --bgKoUsaStockDetail11: var(--orange600);
  --bgKoUsaStockDetail12: var(--orange500);

  --bgFloating: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);

  /* Design Token - Dark */

  /* Color Value */

  --main-bg-color: brown;
}