@font-face {
  font-family: TaiwanPearl;
  src: url("fonts/TaiwanPearl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: TaiwanPearl;
  src: url("fonts/TaiwanPearl-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Nunito;
  src: url("fonts/Nunito-Latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --brand-font: Nunito, TaiwanPearl, sans-serif;
}

body {
  --_🔠-typography---size--body-1: 20px;
  --_🔠-typography---line-height--body-1: 30px;
  --_🔠-typography---size--body-2: 17px;
  --_🔠-typography---line-height--body-2: 26px;
  --_🔠-typography---size--body-3: 15px;
  --_🔠-typography---line-height--body-3: 22px;
  --_🔠-typography---size--label-1: 15px;
  --_🔠-typography---line-height--label-1: 21px;
  --_🔠-typography---size--label-2: 13px;
  --_🔠-typography---line-height--label-2: 18px;
  --_🔠-typography---size--button-1: 16px;
  --_🔠-typography---line-height--button-1: 22px;
  --_🔠-typography---size--button-2: 16px;
  --_🔠-typography---line-height--button-2: 22px;
}

:root,
body,
.association-ui {
  --_🔠-typography---font--body: var(--brand-font);
  --_🔠-typography---font--heading-sans: var(--brand-font);
  --_🔠-typography---font--label: var(--brand-font);
  --_🔠-typography---font--button: var(--brand-font);
}

.association-ui {
  --brand-pink: #ec008c;
  --brand-green: #8dc63f;
  --brand-action: #ad0065;
  --brand-pink-tint: #fce9f5;
  --brand-green-tint: #eff7e3;
  --brand-ink: #281f24;
  --brand-font: TaiwanPearl, Nunito, sans-serif;
  font-family: var(--brand-font);
  color: var(--brand-ink);
}

.association-ui:lang(en),
.association-ui .association-language:lang(en) {
  --brand-font: Nunito, TaiwanPearl, sans-serif;
}

.association-ui .association-language:lang(zh) {
  --brand-font: TaiwanPearl, Nunito, sans-serif;
}

.association-ui :is(.nav-link, .nav-dropdown-toggle, .nav-dropdown-link, .button-text, .cta-small, .cta-main,
  h1, h2, h3, h4, h5, h6, [class^="text-"], [class^="label-"], .text-field, .cta-tertiary),
.association-ui .association-language {
  font-family: var(--brand-font);
  letter-spacing: normal;
}

.association-ui :is(.nav-link, .nav-dropdown-toggle, .nav-dropdown-link, .association-language) {
  color: var(--brand-ink);
  font-weight: 600;
}

.association-ui .nav-link:hover,
.association-ui .nav-dropdown-toggle:hover,
.association-ui .nav-dropdown-toggle.w--open,
.association-ui .nav-dropdown-link:hover {
  color: var(--brand-action);
}

.association-ui .brand-nav {
  width: clamp(190px, 22vw, 260px);
  min-width: 0;
  max-width: none;
}

.association-ui .logo-nav {
  display: block;
  width: 100%;
  height: auto;
}

.association-ui .nav-container {
  gap: clamp(10px, 2vw, 32px);
}

.master-navigation.association-ui .navbar {
  max-width: 68rem;
}

.association-ui .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.association-language {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  min-width: 38px;
  padding-inline: 6px;
  border-radius: 999px;
  font-size: var(--_🔠-typography---size--button-2);
  line-height: var(--_🔠-typography---line-height--button-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s;
}

.association-language:hover {
  background: var(--brand-green-tint);
}

.association-ui :is(.cta-small, .cta-main) {
  --_🎨-color--tokens---button-primary-default--background: var(--brand-action);
  --_🎨-color--tokens---button-primary-default--border: var(--brand-action);
  --_🎨-color--tokens---button-primary-default--text: white;
  --_🎨-color--tokens---button-primary-hover--background: var(--brand-ink);
  --_🎨-color--tokens---button-primary-hover--border: var(--brand-ink);
  --_🎨-color--tokens---button-primary-hover--text: white;
  --_🎨-color--tokens---button-secondary-default--background: var(--brand-green-tint);
  --_🎨-color--tokens---button-secondary-default--border: var(--brand-green);
  --_🎨-color--tokens---button-secondary-default--text: var(--brand-ink);
  --_🎨-color--tokens---button-secondary-hover--background: var(--brand-green);
  --_🎨-color--tokens---button-secondary-hover--border: var(--brand-green);
  --_🎨-color--tokens---button-secondary-hover--text: var(--brand-ink);
}

.association-ui :focus-visible {
  outline: 2px solid var(--brand-action);
  outline-offset: 3px;
}

.association-guide .association-guide-font {
  margin: 0;
  font-weight: 600;
  color: var(--brand-action);
}

.association-guide .colors-grid-style-guide {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.association-guide .association-swatch {
  background-color: var(--swatch);
  width: 100%;
  max-width: 144px;
}

.association-guide .text-field {
  margin-top: 8px;
}

.w-webflow-badge {
  display: none !important;
}

@media (min-width: 992px) {
  .association-ui .nav-container {
    gap: clamp(10px, 1.2vw, 20px);
  }

  .association-ui .nav-menu-inner > :is(.nav-link, .nav-dropdown) {
    white-space: nowrap;
  }

  .association-ui .nav-menu-inner :is(.nav-link, .nav-dropdown-toggle) {
    padding-inline: clamp(8px, 1vw, 14px);
  }
}

@media (min-width: 992px) and (max-width: 1100px) {
  .master-navigation.association-ui { padding-inline: 16px; }
  .association-ui .nav-menu-inner :is(.nav-link, .nav-dropdown-toggle) { padding-inline: 7px; }
}

@media (max-width: 479px) {
  .master-navigation.association-ui { padding-inline: 12px; }
  .master-navigation.association-ui .navbar { padding-inline: 10px; }
  .association-ui .nav-container { gap: 6px; }
  .association-ui .brand-nav { width: 210px; }
  .association-ui .nav-right { gap: 4px; }
  .association-language { min-width: 32px; }
  .association-ui .nav-right .cta-small { padding-inline: 12px; }
}

@media (max-width: 359px) {
  .master-navigation.association-ui { padding-inline: 8px; }
  .association-ui .nav-right { gap: 2px; }
  .association-ui .nav-right .cta-small { padding-inline: 6px; }
}