* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

:root {
  --header-height: 80px;
  --footer-height: 80px;
  --sidebar-width: 265px;
  --sidebar-close-width: 75px;

  /*color*/
  --bg-color: #f5f5f9;
  --primary-light: #f4f4fd;
  --primary-hover-light: #ededff;
  --primary-active-20: rgba(136,28,84, 0.5);
  --primary-active: #881c54;
  --primary-dark: #5c0d36;

  --secondary-light: #fde4b6;
  --secondary-active: #f2ba53;
  --secondary-dark: #ac3f1e;

  --grey-white: #ffffff;
  --grey-100: #f8f9fa;
  --grey-200: #eff2f5;
  --grey-300: #dbdfe9;
  --grey-400: #b5b5c3;
  --grey-500: #a1a5b7;
  --grey-600: #70748b;
  --grey-700: #545974;
  --grey-800: #383b4f;
  --grey-900: #11152b;

  --warning-light: #fff5e7;
  --warning-active: #ffa621;
  --warning-dark: #e48c07;

  --success-light: #e8fff3;
  --success-active: #50cd89;
  --success-dark: #15803d;

  --info-light: #f8f5ff;
  --info-active: #7239ea;
  --info-dark: #5014d0;

  --danger-light: #fff5f8;
  --danger-hover-light: #fbe8ed;
  --danger-active: #eb325f;
  --danger-dark: #d31443;

  --blue-light: #eff6ff;
  --blue-active: #1b84ff;

  --neutral-100: #f5f5f5;

  --background-body: var(--grey-100);
  --background-card: var(--grey-white);
  --background-card-on-dark: rgba(0, 0, 0, 0.4);
  --background-hover-light: var(--grey-200);

  --text-headline-title: var(--grey-800);
  --text-label-body: var(--grey-700);
  --text-label-body-light: var(--grey-600);
  --text-label-light: var(--grey-white);

  --icon-light: var(--grey-600);
  --icon-on-color: var(--grey-white);
  --icon-main: var(--grey-800);
  --icon-brand: var(--primary-active);

  --borad-light: var(--grey-300);
  --borad-active: var(--primary-active);

  --light-active: #fcfcfc;

  /*spacing*/
  --spacing-none: 0px;
  --spacing-xx-sm: 4px;
  --spacing-x-sm: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-big: 20px;
  --spacing-x-big: 24px;
  --spacing-xx-big: 28px;
  --spacing-xxx-big: 32px;
  --spacing-lg: 40px;
  --spacing-x-lg: 48px;
  --spacing-xx-lg: 64px;
  --spacing-xxx-lg: 80px;
  --spacing-container-sm: 20px;
  --spacing-container: 88px;
  --spacing-huge: 96px;
  --spacing-xx-huge: 128px;

  /*radius*/
  --radius-none: 0px;
  --radius-xx-sm: 2px;
  --radius-x-sm: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-big: 16px;
  --radius-lg: 32px;
  --radius-full: 9999px;

  /*shadow*/
  --shadow-widget: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  --shadow-widget-intence: 0px -2px 8px 0px rgba(49, 49, 49, 0.08) inset;
  --shadow-light: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
  --shadow-primary: 0px 4px 12px 0px rgba(40, 132, 239, 0.35);
  --shadow-success: 0px 4px 12px 0px rgba(53, 189, 100, 0.35);
  --shadow-danger: 0px 4px 12px 0px rgba(241, 65, 108, 0.35);
  --shadow-info: 0px 4px 12px 0px rgba(114, 57, 234, 0.35);
  --shadow-warning: 0px 4px 12px 0px rgba(246, 192, 0, 0.35);
  --shadow-dark: 0px 4px 12px 0px rgba(37, 47, 74, 0.35);
  --shadow-orange: 0px 4px 12px 0px rgba(255, 111, 30, 0.35);
  --shadow-dropdown: 0px 7px 18px 0px rgba(0, 0, 0, 0.09);
  --shadow-dropdown-lg: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
  --shadow-select-click: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

  .display {
    font-size: 34px; /* 34px */
    line-height: 115%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .display2 {
    font-size: 30px; /* 30px */
    line-height: 115%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .display3 {
    font-size: 22px; /* 22px */
    line-height: 115%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .h1 {
    font-size: 20px; /* 20px */
    line-height: 130%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .h2 {
    font-size: 18px; /* 18px */
    line-height: 130%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .h3 {
    font-size: 16px; /* 16px */
    line-height: 130%;
    letter-spacing: 0;
    font-weight: 600;
  }

  .label1 {
    font-size: 15px; /* 15px */
    line-height: 125%;
    letter-spacing: 0;
    font-weight: 500;
  }

  .label2 {
    font-size: 13px; /* 14px */
    line-height: 125%;
    letter-spacing: 0.1px;
    font-weight: 500;
  }

  .label3 {
    font-size: 13px; /* 13px */
    line-height: 125%;
    letter-spacing: 0;
    font-weight: 450000;
  }

  .label4 {
    font-size: 12px; /* 12px */
    line-height: 125%;
    letter-spacing: 0;
    font-weight: 500;
  }

  .body1 {
    font-size: 16px; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    font-weight: 400;
  }

  .body2 {
    font-size: 14px; /* 14px */
    line-height: 150%;
    letter-spacing: 0;
    font-weight: 400;
  }

  .body3 {
    font-size: 13px; /* 13px */
    line-height: 150%;
    letter-spacing: 0;
    font-weight: 400;
  }

  .body4 {
    font-size: 11px; /* 11px */
    line-height: 12px;
    letter-spacing: 0;
    font-weight: 400;
  }

  .body-11-12-500 {
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px; /* 109.091% */
  }

  .body-13-14-500 {
    font-size: 13px; /* 13px */
    line-height: 14px;
    letter-spacing: -0.13px;
    font-weight: 500;
  }

  .body-14-14-500 {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 100% */
  }

  .body-15-16-500 {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 106.667% */
  }
}

.my-card {
  width: 100%;
  background: var(--background-card);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-big);
  box-shadow: var(--shadow-widget);
}

a {
  text-decoration: none;
}

button {
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}