.nowrap {
  white-space: nowrap;
}
.relative {
  position: relative;
}
.box {
  width: 100%;
  min-height: 100vh;
  background-image: url("../assets/images/paralax/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.box * {
  font-family: "Mitr";
}

.box .img-box {
  position: relative;
}

.box .img-box img {
  width: 150px;
}

.box .img-box img:not(:first-child) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.box .title svg {
  width: 250px;
}

.box .title span:first-child {
  color: #16e940;
}

.box #content1 img {
  width: 80px;
}

.box #content1 img.last {
  width: 150px;
}

.box .content {
  position: absolute;
}

.box .content p {
  font-size: 1.25rem;
  font-weight: 300;
}

.box .content ul {
  list-style: none;
}

.box .content ul li {
  position: relative;
  padding: 5px 0;
  font-weight: 300;
}

.box .content ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../assets/images/paralax/icon/check.png");
  background-size: contain;
}

@media (min-width: 768px) {
  .box .img-box img {
    width: 100%;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box .title span {
    font-size: 3rem;
  }
  .box .title {
    justify-content: start;
  }

  #content1 img {
    width: 150px;
  }

  .box .content {
    font-size: 1.5rem;
  }

  .box .content p {
    font-size: 2rem;
  }

  .box .title svg {
    width: 350px;
  }
}

@media (min-width: 1200px) {
  .box .img-box img {
    width: 300px;
  }
  .box #content1 img {
    width: 100px;
  }

  .box #content1 img.last {
    width: 300px;
  }
}