.first-view-bg {
  background-color: #0baa6a;
}
.first-view-title {
  width: 100%;
  height: 230px;
  background-image: url("../assets/img/title.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  text-indent: -9999px;
  overflow: hidden;
}
.first-view-title.show {
  opacity: 1;
  transform: translateY(0);
}
.first-view-background {
  position: relative;
  width: 100%;
  height: 605px;
  background-image: url("../assets/img/first-view.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.pop-up-1 {
  margin-top: 10px;
  margin-left: 18%;
  width: 150px;
  height: 150px;
  background-image: url("../assets/img/pop_1.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.pop-up-2 {
  margin-top: 10px;
  margin-left: 1.5%;
  width: 150px;
  height: 150px;
  background-image: url("../assets/img/pop_2.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.pop-up-3 {
  margin-top: 10px;
  margin-left: 1.5%;
  width: 150px;
  height: 150px;
  background-image: url("../assets/img/pop_3.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

.fade-img {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-img.show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1600px) {
  .pop-up-1 {
    margin-left: 12%;
  }
}

@media screen and (max-width: 1538px) {
  .pop-up-1 {
    margin-left: 11%;
  }
}

@media screen and (max-width: 1476px) {
  .pop-up-1 {
    margin-left: 10%;
  }
}
@media screen and (max-width: 1414px) {
  .pop-up-1 {
    margin-left: 9%;
  }
}
@media screen and (max-width: 1352px) {
  .pop-up-1 {
    margin-left: 8%;
  }
}
@media screen and (max-width: 1280px) {
  .pop-up-1 {
    margin-left: 5%;
  }
}
@media screen and (max-width: 1220px) {
  .pop-up-1 {
    margin-left: 3%;
  }
}
@media screen and (max-width: 1166px) {
  .pop-up-1 {
    margin-left: 1%;
  }
}
@media screen and (max-width: 1104px) {
  .pop-up-1 {
    margin-left: -0.5%;
  }
}

@media screen and (max-width: 1024px) {
  .first-view-title {
    width: 100%;
    height: 15vh;
    background-image: url("../assets/img/title-me.png");
    background-size: contain;
  }
  .first-view-background {
    width: 100%;
    height: 485px;
    background-image: url("../assets/img/first-view-me.png");
    background-size: contain;
  }
  .pop-up-1 {
    margin-left: 4%;
    width: 120px;
    height: 120px;
    background-size: contain;
  }
  .pop-up-2 {
    margin-left: 1.5%;
    width: 120px;
    height: 120px;
    background-size: contain;
  }
  .pop-up-3 {
    margin-left: 1.5%;
    width: 120px;
    height: 120px;
    background-size: contain;
  }
}

@media screen and (max-width: 960px) {
  .first-view-title {
    background-image: url("../assets/img/title-sm.png");
  }
  .first-view-background {
    background-image: url("../assets/img/first-view-sm.png");
    height: 465px;
  }
  .pop-up-1 {
    margin-left: 5%;
    width: 100px;
    height: 100px;
  }
  .pop-up-2 {
    width: 100px;
    height: 100px;
  }
  .pop-up-3 {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 800px) {
  .first-view-background {
    height: 388px;
  }
  .pop-up-1 {
    margin-left: 3%;
  }
}
@media screen and (max-width: 767px) {
  .first-view-background {
    height: 372px;
  }
  .pop-up-1 {
    width: 95px;
    height: 95px;
  }
  .pop-up-2 {
    width: 95px;
    height: 95px;
  }
  .pop-up-3 {
    width: 95px;
    height: 95px;
  }
}

@media screen and (max-width: 670px) {
  .first-view-background {
    height: 325px;
  }
  .pop-up-1 {
    width: 85px;
    height: 85px;
  }
  .pop-up-2 {
    width: 85px;
    height: 85px;
  }
  .pop-up-3 {
    width: 85px;
    height: 85px;
  }
}

@media screen and (max-width: 608px) {
  .first-view-background {
    height: 295px;
  }
  .pop-up-1 {
    width: 75px;
    height: 75px;
  }
  .pop-up-2 {
    width: 75px;
    height: 75px;
  }
  .pop-up-3 {
    width: 75px;
    height: 75px;
  }
}

@media screen and (max-width: 540px) {
  .first-view-background {
    height: 262px;
  }
  .pop-up-1 {
    width: 65px;
    height: 65px;
  }
  .pop-up-2 {
    width: 65px;
    height: 65px;
  }
  .pop-up-3 {
    width: 65px;
    height: 65px;
  }
}

@media screen and (max-width: 430px) {
  .first-view-title {
    height: 10vh;
  }
  .first-view-background {
    height: 208px;
  }
  .pop-up-1 {
    margin-top: 2px;
    width: 55px;
    height: 55px;
  }
  .pop-up-2 {
    margin-top: 2px;
    width: 55px;
    height: 55px;
  }
  .pop-up-3 {
    margin-top: 2px;
    width: 55px;
    height: 55px;
  }
}

@media screen and (max-width: 414px) {
  .first-view-background {
    height: 201px;
  }
  .pop-up-1 {
    margin-top: -4px;
  }
  .pop-up-2 {
    margin-top: -4px;
  }
  .pop-up-3 {
    margin-top: -4px;
  }
}

@media screen and (max-width: 390px) {
  .first-view-title {
    height: 13vh;
  }
  .first-view-background {
    height: 189px;
  }
  .pop-up-1 {
    margin-top: -12px;
  }
  .pop-up-2 {
    margin-top: -12px;
  }
  .pop-up-3 {
    margin-top: -12px;
  }
}

@media screen and (max-width: 375px) {
  .first-view-title {
    height: 15vh;
  }
  .first-view-background {
    height: 182px;
  }
  .pop-up-1 {
    margin-top: -10px;
  }
  .pop-up-2 {
    margin-top: -10px;
  }
  .pop-up-3 {
    margin-top: -10px;
  }
}

@media screen and (max-width: 340px) {
  .first-view-background {
    height: 165px;
  }
  .pop-up-1 {
    margin-top: -26px;
  }
  .pop-up-2 {
    margin-top: -26px;
  }
  .pop-up-3 {
    margin-top: -26px;
  }
}