body{
	margin: 0;
  font-family: "微軟正黑體","Poppins", sans-serif;
  background:url(../img/pattern_bg.png)center top repeat;
  background-size: contain;
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 0;
}
.wrapper{
background: url(../img/bg.jpg) center top no-repeat;
width: 100%;
height: 800px;
}
.range{
  max-width: 1100px;
  margin: 0 auto;
}
.title01 h1{
  margin-left: -2000px;
}
.title01 img{
  width: 550px;
  margin:40px 0 0 60px;
}
.title01 h2{
  margin:10px 0 0 70px;
  color: #fff;
  font-weight: bolder;
  background: #321aaa;
  display: inline-block;
  text-transform: uppercase;
  padding: 5px 10px 2px 10px;
}
.title01 p{
  margin-left: 14%;
    padding: 15px 0 0 0;
    font-size: 20px;
    font-weight: bold;
}
.form{
  margin-left: 5%;
  width:500px;
  height: 280px;
  background: #fff;
  margin-top: 35px;
  border-radius: 5px;
  box-shadow: 4px 4px 5px #00000057;
}
.form iframe{
  width: 400px;
  margin: 0 auto;
  display: flex;
  text-align: center;
}
.form h3{
  color: #321aaa;
  text-align: center;
  font-weight: bolder;
  padding: 20px 0 10px 0;
}
@media screen and (max-width:1100px){
  .wrapper{
    background: url(../img/bg_md.jpg) center top no-repeat;
    height: 750px;
  }
  .title01 img{
    width:52vw;
    margin:40px 0 0 5%;
  }
  .title01 h2{
    margin:10px 0 0 5%;
    font-size: 28px;
  }
  .title01 p{
    margin-left: 10%;
      font-size: 18px;
  }
  .form{
    margin-top: 20px;
    height: 280px;
  }
}
@media screen and (max-width:768px){
  .wrapper{
    background: url(../img/bg_sm.jpg) center top no-repeat;
    height: 620px;
  }
  .title01 img{
    width:55%;
    margin:40px 0 0 5%;
  }
  .title01 h2{
    margin:10px 0 0 5%;
    font-size: 22px;
  }
  .title01 p{
    margin-left:8%;
      font-size: 16px;
  }
.form{
  width: 100%;
  height: 300px;
  margin:20px auto 0 auto;
}
.form iframe{
  width: 80%;
}
}
@media screen and (max-width:500px){
  .wrapper{
    background: url(../img/bg_500.jpg) center top no-repeat;
    background-size: contain;
    height:auto;
  }
  .title01 h2{
    font-size: 18px;
  }
  .title01 p{
    font-size: 15px;
  }
  .form{
    height: 330px;
  }
  .form h3{
    font-size: 20px;
  }
}
/* 看看 */
.sec_div{
  background: url(../img/sec_bg.png)center top no-repeat;
  width: 100%;
  height:auto;
  padding:50px 0 25px  0;
}
.wrapper2{
  display: flex;
  flex-direction: row;
}
.text{
  width: 450px;
  height: 420px;
  margin-left: 2%;
}
.text h3{
  text-align: center;
  padding-top: 30px;
  font-weight: bolder;
  font-size: 33px;
  color: #321aaa;
}
.text p{
  width: 380px;
  margin:15px auto; 
  line-height: 2;
  color: #3d3d3f;
}
.vedio{
  margin-top: 30px;
}
@media screen and (max-width:1100px){
  .sec_div{
    background: none;
  }
  .wrapper2{
    display: flex;
    flex-direction: column;
  }
  .wrapper2>div{
    margin: 0 auto;
    width: 100%;
  }
  .text p{
    width: 450px;
  }
  .vedio{
    padding: 0;
    background: none;
    display: flex;
    justify-content: center;
  }
  .step1{
    text-align: center;
  }
}
@media screen and (max-width:768px){
.sec_div{
  margin-top: 50px;
}
  .text p{
    width: 80%;
  }
  .vedio{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .vedio iframe{
    width: 90%;
  }
}
/* 你也可以這樣做！ */
.third_div{
  width: 100%;
  height:auto;
  background:url(../img/three_bg.png)center bottom no-repeat;
  justify-content: center;
}
.third_div h3{
  font-size: 33px;
  padding: 70px 0 0 0;
  font-weight: bolder;
  line-height: 1;
  color: #321aaa;
  text-align: center;
  background: url(../img/h3_bg.png) center top no-repeat;
}

.third_div .witness{
  width: 50%;
}
.step1{
  display: flex;
  flex-wrap: wrap;
}
.step1>div{
  flex: 1;
  justify-content: center;
  height: auto;
}
.step1 img{
  width:80%;
  margin:0 auto 50px auto;
}
.download_sm{
  display: none;
}
.btn{
  position: absolute;
  z-index: 110;
}
@media screen and (min-width:1101px){
  .btn{
    margin-top: 30%;
    margin-left: 40%;
    width: 195px;
  }
}
@media screen and (max-width:1100px){
  .step1 img{
    width: 100%;
  }
  .btn{
    margin-top: 410px;
    margin-left: 40%;
    width: 180px;
  }
}
@media screen and (max-width:1040px){
  .btn{
    margin-top:38%;
  }
}
@media screen and (max-width:970px){
  .btn{
    margin-left: 39%;
  }
}
@media screen and (max-width:768px){
  .download_sm{
    display: block;
  }
  .download{
    display: none;
  }
  .step1 img{
    width:80%;
  }
  .btn{
    margin-left: 21%;
    margin-top: 46%;
   width: 200px;
  }
}
@media screen and (max-width:700px){
  .btn{
    margin-left: 20%;
  }
}
@media screen and (max-width:500px){
  .step1 img{
    width: 90%;
  }
  .btn{
    margin-left: 17%;
    margin-top: 51%;
    width: 160px;
  }
}
@media screen and (max-width:415px){
  .btn{
    margin-left: 12%;
  }
}

/* four */
.four_div{
  clip-path: polygon(0 0, 100% 0, 100% 45%, 100% 90%, 55% 90%, 50% 100%, 45% 90%, 0 90%);
  width: 100%;
  background: #5050b9;
  margin-bottom: 50px;
  margin-top: -50px;
}
.four_div h3{
  font-size: 33px;
  font-weight: bolder;
  line-height: 1;
  padding-top: 30px;
  color: #fff;
}
.four_div h4{
  color: #ffce00;
}
.four_div p{
  color: #fff;
}
.four_div h3::before{
  content: url(../img/02.png);
  }
  .step2{
    display: flex;
    flex-direction: row;
    margin-top:30px;
  }
  .step2>div{
    flex: 1;
    text-align: center;
  }
  .center {
    display: grid;
    justify-content: center;
    padding-bottom: 100px;
  }
  .center img{
    margin: 0 auto;
  }
  .center h4{
    font-weight: bolder;
    margin-top: 15px;
  }
  .center p{
    max-width: 250px;
    margin-top: 15px;
  }
@media screen and (max-width:900px){
  
   .four_div{
    clip-path: polygon(0 0, 100% 0, 100% 45%, 100% 95%, 65% 95%, 50% 100%, 35% 95%, 0 95%);
  }
  .four_div h3{
    padding-bottom: 15px;
    margin-left: 20px;
  }
  .four_div .three{
    padding-bottom: 200px;
  }
  .center{
    padding-bottom: 45px;
  }
  .step2{
    display: flex;
    flex-direction: column;
    margin-top:15px;
  }
}
@media screen and (max-width:768px){
.step1 , .step2{
  display: flex;
  flex-direction: column;
}
}
@media screen and (max-width:500px){
  .four_div{
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
    height: auto;
  }
  .four_div h3{
    font-size: 25px;
  }
  .center h4{
    margin: 10px auto;
  }
  .center p{
    width: 80%;
    margin: 0 auto;
  }
}
/* five */
.five_div .range{
  display: flex;
  flex-direction: row;
}
.form2{
  width: 600px;
  height:250px;
  margin-top: -20px;
}

.form2 h3{
  color: #321aaa;
  font-weight: bolder;
  margin-left: 30px;
  padding: 10px 0;
}
.form2 img{
  width: 360px;
}
.talk_sm{
  display: none;
}
.witness {
  width: 400px;
  z-index: 30;
  margin-top: -150px;
  bottom: 0;
}
.witness img{
  width: 300px;
 
}
@media screen and (max-width:700px){
  .five_div .range{
    display: flex;
    flex-direction: column;
  }
  .witness{
    max-width: 280px;
    margin: auto;
  margin-top: -180px;
  }
  .witness img{
    max-width: 280px;
  }
  .form2{
    width: 100%;
    background: #fff;
    margin-top: 0;
    height: auto;
  }
.form2 iframe{
  height:250px;
}
.form2 img{
  width: 70%;
  margin: 0 auto;
}
.talk_sm{
  display: block;
}
.talk{
  display: none;
}
}
@media screen and (max-width:460px){
  .form2 iframe{
    height:280px;
  }
}