.serviceTop, .serviceDown {
  width: 100%;
  position: relative;
  height: 600px;
}

.serviceTop > img, .serviceDown > img {
  width: 70%;
  position: absolute;
}

.serviceTop > img {
  top: 15%;
  left: 18%;
}

.serviceDown > img {
  top: 10%;
  left: 7%;
}

.serviceText {
  font-size: 1.5em;
  font-family: 'Noto Serif TC', serif;
  color: var(--bg-gray);
  position: absolute;
}

.textOne {
  top: 70%;
  left: 22.5%;
}

.textTwo {
  top: 40%;
  left: 35%;
}

.textThree {
  top: 40%;
  left: 59.5%;
}

.textFour {
  top: 60%;
  left: 73%;
}

.textFive {
  top: 70%;
  left: 85%;
}

.textSix {
  top: 67%;
  left: 22.5%;
}

.textSeven {
  top: 20%;
  left: 35%;
}

.textEight {
  top: 67%;
  left: 47.5%;
}

.textNine {
  top: 67%;
  left: 72%;
}



@media screen and (max-width: 1440px) {
  .serviceTop, .serviceDown {
    height: 450px;
  }
  .textOne {
    left: 22%;
  }
  
  .textTwo {
    left: 34%;
  }
  
  .textThree {
    left: 58.5%;
  }
  
  .textFour {
    left: 72%;
  }
  
  .textFive {
    left: 84%;
  }
  
  .textSix {
    left: 21.5%;
  }
  
  .textSeven {
    left: 34%;
  }
  
  .textEight {
    left: 46%;
  }
  
  .textNine {
    left: 71%;
  }
}

@media screen and (max-width: 1024px) {
  .serviceTop > img {
    left: 15%;
  }
  .textOne {
    top: 55%;
    left: 17%;
  }
  
  .textTwo {
    top: 30%;
    left: 30%;
  }
  
  .textThree {
    top: 30%;
    left: 54%;
  }
  
  .textFour {
    top: 48%;
    left: 68%;
  }
  
  .textFive {
    top: 55%;
    left: 80%;
  }
  
  .textSix {
    top: 50%;
    left: 19.5%;
  }
  
  .textSeven {
    top: 15%;
    left: 31.5%;
  }
  
  .textEight {
    top: 50%;
    left: 44.5%;
  }
  
  .textNine {
    top: 50%;
    left: 69%;
  }  
}

@media screen and (max-width: 820px) {
  .serviceText {
    font-size: 1em;
  }
  .serviceTop, .serviceDown {
    height: 380px;
  }  
}

@media screen and (max-width: 428px) {
  .banner img {
    content: url('../../main/img/mobile_05-bn.jpg');
  }
  .serviceText {
    font-size: 10px;
  }
  .serviceTop, .serviceDown {
    height: 150px;
  }
  .serviceTop > img {
    left: 10%;
  }
  
  .serviceDown > img {
    left: 10%;
  }
  .textOne {
    top: 60%;
    left: 11%;
  }
  
  .textTwo {
    top: 30%;
    left: 25%;
  }
  
  .textThree {
    top: 30%;
    left: 48%;
  }
  
  .textFour {
    top: 55%;
    left: 61%;
  }
  
  .textFive {
    top: 65%;
    left: 74%;
  }
  
  .textSix {
    top: 60%;
    left: 20.5%;
  }
  
  .textSeven {
    left: 33%;
  }
  
  .textEight {
    top: 60%;
    left: 46%;
  }
  
  .textNine {
    top: 60%;
    left: 71%;
  }
}

@media screen and (max-width: 375px) {
  .textOne {
    top: 55%;
  }
  
  .textTwo {
    left: 24%;
  }
  
  .textFour {
    top: 48%;
  }
  
  .textFive {
    top: 58%;
  }
  
  .textSix {
    top: 50%;
    left: 19%;
  }
  
  .textSeven {
    left: 32%;
  }
  
  .textEight {
    top: 50%;
    left: 44%;
  }
  
  .textNine {
    top: 50%;
    left: 69%;
  }
}