/* ============================================================
   HOW? — 3 step process. Figma: how? (top:2958 height:746)
   ============================================================ */
.how {
  position: relative;
  width: 1728px;
  height: 746px;
  background: var(--color-bg);
}
.how__heading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 64px;
  line-height: 68px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}
.how__card {
  position: absolute;
  left: 269px;
  top: 178px;
  width: 1190px;
  height: 500px;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
}
.how__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/png/how-photo.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.how__card-fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 223px;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.how__card img.how__play {
  position: absolute;
  left: 50%;
  top: 41%;
  width: 93px;
  height: 65px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.how__step { position: absolute; top: 505px; width: 305px; }
.how__step--01 { left: 336px; }
.how__step--02 { left: 726px; width: 310px; }
.how__step--03 { left: 1116px; }
.how__step-num {
  position: absolute;
  top: 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 28px;
  color: var(--color-accent-text);
  text-decoration: underline;
}
.how__step-text {
  position: absolute;
  top: 46px;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-white);
}
.how__arrow {
  position: absolute;
  width: 64px;
  height: 64px;
}
.how__arrow--01 { left: 631px; top: 492px; }
.how__arrow--02 { left: 1021px; top: 492px; }

.how__step-arrow { display: none; }