* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Microsoft JhengHei";
}

img {
  vertical-align: bottom;
}

section {
  max-width: 100vw;
}

.tablet-d-show {
  display: none;
}

.w-100 {
  width: 100%;
}

.bg {
  width: 100%;
}

.position-relative {
  position: relative;
}

.play-key {
  position: absolute;
  top: 68%;
  left: 17.5%;
  width: 3%;
}

.play-key::before {
  content: '';
  position: absolute;
  margin-left: -4vw;
  margin-top: -3.5vw;
  display: block;
  width: 10vw;
  height: 10vw;
  background-color: rgba(255, 255, 255, .1);
  border-radius: 50%;
  animation: circle 3s infinite;
}

.play-key::after {
  content: '';
  position: absolute;
  margin-left: -2.4vw;
  margin-top: -5.4vw;
  display: block;
  width: 7vw;
  height: 7vw;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 50%;
  animation: circle 3s infinite;
}

@keyframes circle {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(2);
    opacity: 0;
  }
}

.card-box {
  position: absolute;
  display: flex;
}

.card {
  margin-right: 2vw;
  width: 15vw;
  cursor: pointer;
}

.box-1 {
  top: 1%;
  left: 45%;
}

.box-2 {
  top: 26%;
  left: 45%;
}

.box-3 {
  top: 50%;
  left: 45%;
}

.box-4 {
  top: 75%;
  left: 45%;
}

.bg-blue {
  background-color: rgb(204, 225, 230);
  padding-bottom: 30px;
}

.tips-box {
  box-sizing: border-box;
  width: 70%;
  margin: 0 auto;
  background-color: rgb(242, 242, 242);
  border-radius: 20px;
  padding: 2%;

}

.tips-box .tips-title {
  width: 20%;
  margin-bottom: 3%;
}

.tips-box .tips-card-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.tips-box .tips-card-box .tips-card {
  position: relative;
  width: 48%;
}

.tips-box .tips-card-box .tips-card .qr-code {
  position: absolute;
  top: 58%;
  left: 63%;
  width: 25%;
}


/*screen under 768px */

@media (max-width: 768px) {
  .tablet-d-none {
    display: none;
  }

  .tablet-d-show {
    display: block;
  }

}

@media screen and (max-width:768px) {
  .play-key {
    top: 33%;
    left: 5.5vw;
    width: 8vw;
  }

  .play-key::before {
    margin-left: -7vw;
    margin-top: -6vw;
    width: 20vw;
    height: 20vw;
  }

  .play-key::after {
    margin-left: -4.5vw;
    margin-top: -12.5vw;
    width: 15vw;
    height: 15vw;
  }


  .card {
    width: 35vw;
  }

  .card:first-child {
    margin-right: 10vw;
  }

  .box-1 {
    top: 8%;
    left: 15%;
  }

  .box-2 {
    top: 30%;
    left: 15%;
  }

  .box-3 {
    top: 53%;
    left: 15%;
  }

  .box-4 {
    top: 77%;
    left: 60%;
  }

  .box-4 .card:first-child {
    margin-right: 0;
  }

  .tips-box {
    width: 90%;
    padding: 2% 5%;
  }

  .tips-box .tips-title {
    width: 40%;
    margin-bottom: 5%;
  }

  .tips-box .tips-card-box {
    flex-direction: column;
  }

  .tips-box .tips-card-box .tips-card {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 3vw;
  }
}