@font-face {
  font-family: 'Delirium';
  src: url('用到的字体/delirium.ttf') format('truetype');
}
@font-face {
  font-family: 'OswaldLocal';
  src: url('用到的字体/oswald.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Italic';
  src: url('用到的字体/playfair-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Regular';
  src: url('用到的字体/playfair-regular.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #EBEBED;
}

.poster {
  position: relative;
  width: 1128px;
  height: 1692px;
  margin: 0 auto;
  background: #EBEBED;
  color: #3A3436;
  overflow: hidden;
}

.poster > * {
  position: absolute;
}

.poster img {
  display: block;
}

.sec-h {
  font-family: 'Delirium', sans-serif;
  white-space: nowrap;
  line-height: 1;
  transform-origin: top left;
}

.serif-i {
  font-family: 'Playfair Italic', serif;
}

.title {
  font-family: 'Delirium', sans-serif;
  font-weight: normal;
  font-size: 188px;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  left: 51px;
  top: 37px;
  transform: scaleY(1.22);
  transform-origin: top left;
}

.steps-line {
  font-family: 'Delirium', sans-serif;
  font-size: 160px;
  line-height: 117px;
  white-space: nowrap;
  left: 1016px;
  top: 54px;
  transform: rotate(90deg) scaleY(1.22);
  transform-origin: top left;
}

.steps-word {
  color: #EDDF00;
  letter-spacing: 12px;
}

.steps-num {
  color: #3A3436;
  letter-spacing: 4px;
  margin-left: -54px;
}

.steps-caption {
  font-family: 'Playfair Italic', serif;
  font-size: 21px;
  line-height: 38px;
  white-space: nowrap;
  left: 1084px;
  top: 62px;
  transform: rotate(90deg);
  transform-origin: top left;
}

.rule {
  background: #A2A2A2;
  height: 2px;
}

.rule-1 {
  left: 56px;
  top: 264px;
  width: 1013px;
  background: linear-gradient(to right, #A2A2A2 0 767px, transparent 767px 1004px, #A2A2A2 1004px);
}

.rule-2 {
  left: 56px;
  top: 533px;
  width: 1023px;
  background: linear-gradient(to right, #A2A2A2 0 427px, transparent 427px 480px, #A2A2A2 480px);
}

.rule-3 {
  left: 56px;
  top: 831px;
  width: 427px;
}

.rule-4 {
  left: 56px;
  top: 1200px;
  width: 1013px;
  background: linear-gradient(to right, #A2A2A2 0 427px, transparent 427px 482px, #A2A2A2 482px);
}

.rule-5 {
  left: 56px;
  top: 1435px;
  width: 1015px;
}

.goods-h1 {
  left: 55px;
  top: 298px;
  font-size: 84px;
  transform: scaleY(1.30);
}

.goods-h2 {
  left: 55px;
  top: 396px;
  font-size: 84px;
  transform: scaleY(1.30);
  letter-spacing: -0.5px;
}

.dot {
  width: 84px;
  height: 84px;
  background: #EDDF00;
  border-radius: 50%;
}

.dot-1 { left: 426px; top: 304px; }
.dot-2 { left: 578px; top: 304px; }
.dot-3 { left: 426px; top: 402px; }
.dot-4 { left: 578px; top: 403px; }

.food {
  position: absolute;
}

.food-figs {
  left: 376px;
  top: 305px;
  width: 107px;
}

.food-salmon {
  left: 515px;
  top: 306px;
  width: 138px;
}

.food-egg {
  left: 378px;
  top: 400px;
  width: 116px;
}

.food-avocado {
  left: 517px;
  top: 409px;
  width: 126px;
}

.goods-list {
  list-style: none;
  left: 723px;
  top: 301px;
  font-family: 'Playfair Regular', serif;
  font-size: 33px;
  line-height: 48px;
  transform: scaleX(0.72);
  transform-origin: top left;
}

.goods-list li {
  position: relative;
}

.goods-list li::before {
  content: '';
  position: absolute;
  left: -31px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A3436;
}

.hs-bar {
  background: #EDDF00;
  width: 24px;
}

.hs-b1 { left: 92px;  top: 572px; height: 138px; }
.hs-b2 { left: 168px; top: 588px; height: 122px; }
.hs-b3 { left: 242px; top: 652px; height: 58px; width: 26px; }
.hs-b4 { left: 316px; top: 684px; height: 26px; }
.hs-b5 { left: 386px; top: 668px; height: 42px; }
.hs-b6 { left: 460px; top: 692px; height: 18px; }

.vlabel {
  font-family: 'OswaldLocal', sans-serif;
  font-size: 24px;
  line-height: 19px;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: top left;
}

.hs-l1 { left: 63px;  top: 710px; }
.hs-l2 { left: 139px; top: 710px; }
.hs-l3 { left: 213px; top: 710px; }
.hs-l4 { left: 287px; top: 710px; }
.hs-l5 { left: 357px; top: 710px; }
.hs-l6 { left: 431px; top: 710px; }

.hs-h {
  left: 55px;
  top: 732px;
  font-size: 62px;
  transform: scaleY(1.24);
}

.hs-cap {
  left: 265px;
  top: 753px;
  font-size: 20px;
  line-height: 22px;
}

.pl-h1 {
  left: 535px;
  top: 558px;
  font-size: 60px;
  transform: scaleY(1.25);
}

.pl-h2 {
  left: 535px;
  top: 627px;
  font-size: 60px;
  transform: scaleY(1.25);
}

.pl-list {
  list-style: none;
  left: 537px;
  top: 713px;
  font-family: 'Playfair Regular', serif;
  font-size: 24px;
  line-height: 28px;
  transform: scaleX(0.72);
  transform-origin: top left;
}

.pl-cap {
  left: 537px;
  top: 868px;
  font-size: 21px;
}

.pie {
  left: 735px;
  top: 569px;
  width: 332px;
  height: 333px;
}

.tr-l1 { left: 55px; top: 865px;  font-size: 58px; transform: scaleY(1.30); }
.tr-l2 { left: 55px; top: 933px;  font-size: 58px; transform: scaleY(1.30); }
.tr-l3 { left: 55px; top: 1000px; font-size: 58px; transform: scaleY(1.30); }
.tr-l4 { left: 55px; top: 1068px; font-size: 58px; transform: scaleY(1.30); }

.tr-bar {
  background: #EDDF00;
  height: 56px;
}

.tr-b1 { left: 110px; top: 872px;  width: 230px; }
.tr-b2 { left: 168px; top: 940px;  width: 234px; }
.tr-b3 { left: 122px; top: 1008px; width: 350px; }
.tr-b4 { left: 110px; top: 1076px; width: 128px; }

.tr-cap {
  left: 55px;
  top: 1146px;
  font-size: 21px;
}

.eat-box {
  left: 538px;
  top: 952px;
  width: 531px;
  height: 249px;
  border: 1.5px solid #A2A2A2;
}

.eat-h {
  left: 557px;
  top: 966px;
  font-size: 62px;
  letter-spacing: 0.5px;
  transform: scaleY(1.24);
}

.eat-cap {
  left: 830px;
  top: 980px;
  font-size: 19px;
  line-height: 39px;
}

.eat-n1 { left: 561px;  top: 1180px; }
.eat-n2 { left: 625px;  top: 1180px; }
.eat-n3 { left: 689px;  top: 1180px; }
.eat-n4 { left: 753px;  top: 1180px; }
.eat-n5 { left: 817px;  top: 1180px; }
.eat-n6 { left: 881px;  top: 1180px; }
.eat-n7 { left: 945px;  top: 1180px; }
.eat-n8 { left: 1009px; top: 1180px; }

.star {
  width: 22px;
  height: 20px;
  position: absolute;
}

.wk-h1 {
  left: 59px;
  top: 1237px;
  font-size: 63px;
  transform: scaleY(1.22);
}

.wk-h2 {
  left: 59px;
  top: 1304px;
  font-size: 63px;
  transform: scaleY(1.22);
}

.area-chart {
  left: 79px;
  top: 1258px;
  width: 980px;
  height: 177px;
  background: #EDDF00;
  clip-path: polygon(
    0% 98.87%, 11.02% 83.62%, 16.02% 90.40%, 27.35% 42.94%,
    29.90% 13.56%, 33.37% 33.90%, 37.65% 70.62%, 40.51% 82.49%,
    47.04% 75.14%, 49.69% 52.54%, 54.49% 51.98%, 75.00% 0%,
    85.82% 71.75%, 100% 98.87%, 100% 100%, 0% 100%
  );
}

.day {
  font-size: 22px;
}

.day-m  { left: 61px;  top: 1401px; }
.day-t  { left: 304px; top: 1401px; }
.day-w  { left: 513px; top: 1401px; }
.day-th { left: 720px; top: 1401px; }
.day-f  { left: 911px; top: 1401px; }

.time-wake {
  font-family: 'Delirium', sans-serif;
  font-size: 197px;
  line-height: 1;
  letter-spacing: 1.5px;
  white-space: nowrap;
  left: 54px;
  top: 1473px;
}

.time-sleep {
  font-family: 'Delirium', sans-serif;
  font-size: 197px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 2px;
  left: 708px;
  top: 1471px;
}

.time-cap {
  left: 409px;
  top: 1517px;
  font-size: 21px;
  line-height: 42px;
}

.arrow {
  left: 408px;
  top: 1540px;
  width: 274px;
  height: 46px;
}