@font-face {
  font-family: "Menu Dream HC W27";
  src:
    local("Dream Han Sans HC W27"),
    local("DreamHanSansHC-W27"),
    url("./fonts/DreamHanSans-W27.ttc") format("collection");
  font-display: block;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Menu Dream HC W22";
  src:
    local("Dream Han Sans HC"),
    local("DreamHanSansHC-W22"),
    url("./fonts/DreamHanSans-W22.ttc") format("collection");
  font-display: block;
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Menu Gotham Black";
  src:
    local("Gotham-Black"),
    url("./fonts/Gotham-Black.otf") format("opentype");
  font-display: block;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Menu Gotham Bold";
  src:
    local("Gotham-Bold"),
    url("./fonts/Gotham-Bold.otf") format("opentype");
  font-display: block;
  font-style: normal;
  font-weight: 700;
}

:root {
  --menu-red: #f51b28;
  --menu-black: #050505;
  --menu-white: #ffffff;
  --menu-canvas-width: 841.89;
  --menu-canvas-height: 595.276;
  --menu-product-size: 100px;
  --menu-style-size: 50px;
  --menu-price-size: 105px;
  --menu-volume-size: 32px;
  --menu-small-currency-x: 74.6675px;
  --menu-small-price-x: 121.9683px;
  --menu-small-volume-x: 263.6943px;
  --menu-large-currency-x: 489.4473px;
  --menu-large-price-x: 537.4575px;
  --menu-large-volume-x: 678.5611px;
}

.menu-card-host {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.menu-card {
  -webkit-text-size-adjust: none;
  background: var(--menu-white);
  color: var(--menu-black);
  height: 595.276px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: top left;
  text-size-adjust: none;
  width: 841.89px;
  font-family: "Menu Dream HC W22", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
}

.menu-card p,
.menu-card h1 {
  margin: 0;
}

.menu-number-band {
  align-items: center;
  background: var(--menu-red);
  color: var(--menu-white);
  display: flex;
  inset: 0 0 66.72% 0;
  justify-content: center;
  position: absolute;
}

.menu-number-band span {
  font-family: "Menu Gotham Black", "Arial Black", sans-serif;
  font-size: 160px;
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 1;
}

.menu-name-area {
  inset: 0;
  position: absolute;
}

.menu-product-name {
  font-family: "Menu Dream HC W27", "PingFang SC", sans-serif;
  font-size: var(--menu-product-size);
  font-weight: 900;
  left: 0;
  letter-spacing: -5.135px;
  line-height: 1;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  text-overflow: clip;
  top: 216.99px;
  transform: translateX(-12.502px);
  white-space: nowrap;
}

.menu-style-name {
  font-family: "Menu Dream HC W22", "PingFang SC", sans-serif;
  font-size: var(--menu-style-size);
  left: 5%;
  line-height: 1;
  letter-spacing: -0.749px;
  position: absolute;
  right: 5%;
  text-align: center;
  top: 332.002px;
  transform: translateX(-26.499px);
  white-space: nowrap;
}

.menu-meta {
  align-items: center;
  border-bottom: 5.725px solid var(--menu-red);
  border-top: 5.725px solid var(--menu-red);
  box-sizing: border-box;
  display: flex;
  font-size: 40px;
  height: 70.315px;
  justify-content: space-between;
  left: 1.8%;
  padding: 0 34.416px 0 22.857px;
  position: absolute;
  right: 1.8%;
  top: 66.5%;
  white-space: nowrap;
}

.menu-prices {
  inset: 0;
  position: absolute;
}

.menu-price {
  inset: 0;
  position: absolute;
  white-space: nowrap;
}

.menu-price .currency {
  font-family: "Menu Gotham Black", "Arial Black", sans-serif;
  font-size: 45.47px;
  line-height: 1;
  position: absolute;
  top: 524.897px;
}

.menu-price strong {
  font-family: "Menu Gotham Black", "Arial Black", sans-serif;
  font-size: var(--menu-price-size);
  font-weight: 900;
  letter-spacing: -2.627px;
  line-height: 1;
  position: absolute;
  top: 470.991px;
}

.menu-price .volume {
  align-items: center;
  background: var(--menu-red);
  border-radius: 6.963px;
  box-sizing: border-box;
  color: var(--menu-white);
  display: flex;
  font-family: "Menu Gotham Bold", "Arial Black", sans-serif;
  font-size: var(--menu-volume-size);
  font-weight: 800;
  height: 40.516px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 524.256px;
}

.menu-price-small .currency { left: var(--menu-small-currency-x); }
.menu-price-small strong { left: var(--menu-small-price-x); }
.menu-price-small .volume { left: var(--menu-small-volume-x); width: 131.207px; }
.menu-price-large .currency { left: var(--menu-large-currency-x); }
.menu-price-large strong { left: var(--menu-large-price-x); }
.menu-price-large .volume { left: var(--menu-large-volume-x); width: 93.905px; }