*{
    font-family: 'Microsoft JhengHei','LiHei Pro Medium', Arial, Helvetica, sans-serif;
  }

  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-8px);
    }
    100% {
      transform: translatey(0px);
    }
  }
  @keyframes down{
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-4px);
    }
    100% {
      transform: translatey(0px);
    }
  }
.range{
  max-width: 1100px;
  margin: 0 auto;
}
.banner {
  width: 100%;
  height:1050px;
  background: url(../img/bg.jpg) center top no-repeat;
  background-size: cover;
}
.title01 p{
  color: #e8a3e8;
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  padding-top: 130px;
  line-height: 1.5;
}
.title02{
  margin: 0 auto;
  text-align: center;
}
.title_anima {
  -webkit-animation: hithere 2s alternate linear;
          animation: hithere 2s alternate linear;
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .title01 p{
    font-size: 24px;
  }
}
@media screen and (max-width:550px) {
  .banner {
    height: 850px;
  }
  .title01 p{
    font-size: 20px;
  }
  .title02{
    width: 90%;
  }
}
@media screen and (max-width: 450px) {
  .title01 p{
    padding-top: 100px;
    font-size: 14px;
  }
}

.border{
  max-width: 800px;
  height: 300px;
  border: 5px solid #58c5ff;
  margin: 30px auto 0 auto;
  box-shadow: 0px 0px 7px #18acfa;
}
.form {
  max-width: 800px;
  height: 290px;
  text-align: center;
  background: #091330;
}
.form span{
  color: #c61e8e;
  font-size: 24px;
}
.form h2{
  font-size: 38px;
  padding-top: 10px;
  font-weight: bold;
  color: #8effff;
}
.form h3{
  color: #e8a3e8;
  font-weight: bold;
  padding-top: 10px;
  font-size: 20px;
}
.form p{
  font-size: 18px;
}
.form iframe {
 max-width: 525px;
 height: 260px;
 margin: 10px auto;
}


@media screen and (max-width: 400px) {
  .border{
    height: 440px;
  }
  .form spav{
 font-size: 20px;
  }
  .form h2{
    font-size: 32px;
  }
  .form h3{
    font-size: 16px;
  }
  .form {
    height: 430px;
  }
  .form iframe{
    width: 90%;
    height: 300px;
  }
}
.content{
  margin-bottom: 20px;
}
.content h3{
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.content .range{
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.content .range>div{
  flex: 1;
  text-align: center;
}
.content .range img{
  max-width: 300px;
  margin: 0 auto 5px auto;
}
.content p{
  width: 210px;
  font-weight: bold;
  font-size: 16px;
  margin: 10px auto;
  color:rgb(185, 169, 169);
}
.imgbox{
  margin: 10px auto;
}
@media screen and (max-width: 768px) {
 

}


/*# sourceMappingURL=wg.css.map */