/* 字体 */
@font-face {
  font-family: "Delirium";
  src: url("https://res.cloudinary.com/cpz7s2g7/raw/upload/v1790154692/DeliriumNCV.ttf");
}
@font-face {
  font-family: "Oswald";
  src: url("https://res.cloudinary.com/cpz7s2g7/raw/upload/v1790154694/Oswald-Regular.ttf");
}
@font-face {
  font-family: "Playfair";
  src: url("https://res.cloudinary.com/cpz7s2g7/raw/upload/v1790154701/PlayfairDisplay-Regular.ttf");
}
@font-face {
  font-family: "Playfair";
  src: url("https://res.cloudinary.com/cpz7s2g7/raw/upload/v1790154698/PlayfairDisplay-Italic.ttf");
  font-style: italic;
}

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

body {
  background-color: #EBEBED;
}

.poster {
  width: 1128px;
  margin: 0 auto;
  padding: 0 56px;
  background-color: #EBEBED;
  color: #3A3436;
}

/* 灰色分隔线 */
.line {
  border-top: 2px solid #A2A2A2;
}
.line-short {
  width: 768px;
}
.line-half {
  width: 428px;
}

/* 顶部 */
header {
  position: relative;
  padding-top: 41px;
}

h1 {
  font-family: "Delirium", sans-serif;
  font-size: 190px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transform: scaleX(0.99);
  transform-origin: left top;
  margin: 3px 0 0 -2px;
}

h2 {
  font-family: "Delirium", sans-serif;
  font-size: 75px;
  text-transform: uppercase;
  line-height: 0.91;
  white-space: nowrap;
  transform: scaleX(0.82);
  transform-origin: left top;
}

.note {
  font-family: "Playfair", serif;
  font-style: italic;
  font-size: 20px;
}

/* 右上角竖排的步数，用rotate转-90度 */
.steps-word {
  position: absolute;
  left: 806px;
  top: 299px;
  transform: rotate(-90deg);
  transform-origin: top left;
  font-family: "Delirium", sans-serif;
  font-size: 196px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: #EDDF00;
}
.steps-num {
  position: absolute;
  left: 804px;
  top: 489px;
  transform: rotate(-90deg) scaleY(0.935) scaleX(0.847);
  transform-origin: top left;
  font-family: "Delirium", sans-serif;
  font-size: 228px;
  line-height: 1;
}
.steps-note {
  position: absolute;
  left: 988px;
  top: 482px;
  transform: rotate(-90deg);
  transform-origin: top left;
  white-space: nowrap;
  font-family: "Playfair", serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.5px;
  line-height: 1;
}

header .line-short {
  margin-top: 31px;
}

/* 食物部分 */
.food {
  display: flex;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 23px;
}
.food h2 {
  font-size: 108px;
  transform: scaleX(0.74);
  width: 300px;
}
.food-img {
  width: 314px;
  margin-left: 2px;
}
.food-list {
  font-family: "Playfair", serif;
  font-size: 28px;
  margin-top: 10px;
  margin-left: 27px;
  padding-left: 26px;
}
.food-list li {
  margin-bottom: 6px;
}
.food-list li:last-child {
  margin-bottom: 0;
}

/* 中间两栏 */
.mid {
  display: flex;
  padding-top: 34px;
}
.left-col {
  width: 428px;
}
.right-col {
  width: 532px;
  margin-left: 54px;
}

/* 左栏的柱状图 */
.hs-chart {
  display: flex;
  align-items: flex-end;
  height: 143px;
  padding-left: 4px;
}
.hs-item {
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
}
.hs-name {
  width: 19px;
  height: 117px;
  position: relative;
}
.hs-name span {
  position: absolute;
  bottom: 0;
  left: 21px;
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  font-family: "Oswald", sans-serif;
  font-size: 23px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.vbar {
  width: 24px;
  background-color: #EDDF00;
  margin-left: 11px;
}

.hs-bottom {
  display: flex;
  margin-top: 26px;
}
.hs-bottom .note {
  width: 250px;
  margin-left: -32px;
  font-size: 19px;
}
.left-col .line-half {
  margin-top: 25px;
}

/* 交通方式横条 */
.transport {
  margin-top: 26px;
}
.t-row {
  display: flex;
  align-items: flex-end;
  height: 68px;
}
.t-label {
  font-family: "Delirium", sans-serif;
  font-size: 75px;
  text-transform: uppercase;
  line-height: 0.73;
  transform: scaleX(0.77);
  transform-origin: left bottom;
}
.hbar {
  height: 55px;
  background-color: #EDDF00;
}
.t-note {
  margin-top: 14px;
  font-size: 21px;
}
.left-col .line-half:last-child {
  margin-top: 29px;
}

/* 右栏歌单 */
.playlist-zone {
  display: flex;
  align-items: flex-start;
}
.playlist-text {
  width: 186px;
  flex-shrink: 0;
}
.playlist-text h2 {
  transform: scaleX(0.8);
  margin-top: 3px;
}
.playlist {
  font-family: "Playfair", serif;
  font-size: 17px;
  margin-top: 19px;
  padding-left: 22px;
}
.playlist li {
  margin-bottom: 4px;
}
.playlist-text .note {
  margin-top: 9px;
  font-size: 19px;
}
.pie {
  width: 346px;
  margin-top: -4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* 餐厅评分框 */
.rest-box {
  border: 2px solid #A2A2A2;
  margin-top: 41px;
  padding: 16px 10px 19px 19px;
}
.rest-head {
  display: flex;
}
.rest-head h2 {
  font-size: 76px;
  transform: scaleX(0.82);
  width: 300px;
  margin-left: -2px;
}
.rest-head .note {
  width: 208px;
  margin-top: 6px;
  font-size: 19px;
}
.rest-row {
  display: flex;
  margin-top: 26px;
  margin-left: -2px;
}
.rest {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  margin-right: 18px;
}
.rest:last-child {
  margin-right: 0;
}
.rest-name {
  width: 19px;
  height: 115px;
  position: relative;
}
.rest-name span {
  position: absolute;
  bottom: 0;
  left: 21px;
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  font-family: "Oswald", sans-serif;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.stars {
  display: flex;
  flex-direction: column;
  margin-left: 7px;
}
.stars img {
  width: 20px;
  margin-bottom: 3px;
}
.stars img:last-child {
  margin-bottom: 0;
}

/* 每周时间表 */
.weekly {
  position: relative;
  margin-top: 15px;
  padding-top: 41px;
}
.weekly h2 {
  position: absolute;
  top: 22px;
  left: 5px;
  transform: scaleX(0.84);
}
.weekly-img {
  display: block;
  width: 994px;
  margin-left: 23px;
}
.days {
  position: relative;
  height: 0;
}
.days span {
  position: absolute;
  top: -27px;
  font-family: "Playfair", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
}
.weekly .line {
  position: relative;
  margin-top: -2px;
}

/* 底部作息时间 */
.time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 38px;
  padding-bottom: 19px;
}
.big-time {
  font-family: "Delirium", sans-serif;
  font-size: 197px;
  letter-spacing: 2px;
  line-height: 1;
}
.time-mid {
  margin-left: 13px;
  margin-top: -16px;
}
.time-mid .note {
  font-size: 21px;
  line-height: 1;
}
.arrow {
  display: block;
  width: 278px;
  margin: 0;
}