@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --font-nb: "Roboto","Noto Sans TC", sans-serif;
  --G00: #fff;
  --G30: #f7f7f7;
  --G50: #f0f0f0;
  --G100: #d9d9d9;
  --G300: #afafaf;
  --G400: #909090;
  --G500: #6f6f6f;
  --G700: #4b4b4b;
  --G900: #292929;
  --PFC: #9c8a72;
  --PSC: #d7c0a3;
  --PTC: #7c6546;
  --PFUC: #ede7e0;
  --SFC: #f58807;
  --SSC: #a7681e;
  --STC: #ffbf75;
  --OC1: #ede7e0;
  --OC2: #db4200;
  --OC3: #00a070;
  --OC4: #f9d6d6;
  --EBC1: #408ec6;
  --EBC2: #ed6d6d;
}

body * {
  font-family: "Noto Sans TC", sans-serif !important;
  font-weight: 400;
}

.icon-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.icon-wrap i {
  display: block;
  width: 24px;
  height: 24px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: var(--G500);
}
.icon-wrap.share i {
  mask-image: url(../assets/icon/icon_share.png);
}
.icon-wrap.favorite i {
  mask-image: url(../assets/icon/icon_favorite.png);
  background-color: var(--G700);
}
.icon-wrap.trial i {
  transform: translateY(-1px);
  mask-image: url(../assets/icon/icon_trial.png);
  background-color: var(--G00);
}
.icon-wrap.cart i {
  mask-image: url(../assets/icon/icon_cart_n.png);
  background-color: var(--G00);
}
.icon-wrap.gift i {
  mask-image: url(../assets/icon/icon_gift.png);
  background-color: var(--PFC);
}
.icon-wrap.menu-point i {
  mask-image: url(../assets/icon/icon_menu_point.png);
  background-color: var(--G00);
}
.icon-wrap.note i {
  mask-image: url(../assets/icon/icon-quection.png);
}
.icon-wrap.video i {
  mask-image: url(../assets/icon/icon_video.png);
}
.icon-wrap.arrow-tb i {
  mask-image: url(../assets/icon/icon_arrow_tb.png);
}
.icon-wrap.arrow-lr i {
  mask-image: url(../assets/icon/icon_arrow_lr.png);
}

.btn-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: max-content;
  height: 32px;
  border-radius: 5px;
  border: 1px solid var(--G00);
  background-color: var(--G00);
  cursor: pointer;
}

.text-wrap p.line-limit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  white-space: normal;
}/*# sourceMappingURL=uistyleguide.css.map */