html,body{
	margin: 0;
	font-family: "微軟正黑體","Poppins", sans-serif;
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 0;
}
header {
  position: relative;
  width: 100%;
  height:770px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
header h1{
  font-size: 1px;
  text-indent: -1000px;
  overflow: hidden;
  float: left;
}

@media screen and (max-width:1300px){
  header{
    height: 700px;
  }
}
@media screen and (max-width:768px){
  header{
    height: 500px;
  }
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

header h2 {
  position: absolute;
  z-index: 3;
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color:rgb(255, 255, 255);
  text-shadow:2px 2px 2px rgb(109, 109, 109);
  mix-blend-mode:multiply;
}
header .parallax {
  position: relative;
  width: 100%;
  height: 100%;
}
header .parallax div {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

header .parallax .two {
  width: 580px;
  z-index: 3;
}
header .parallax .three {
  z-index: 2;
}
/*大於768px的表單 */
header .parallax .four {
 width: 580px;
  z-index: 10;
  top: 330px;
  background: #D5DBDB;
  border-radius: 10px;
  height: 250px;
}
header .parallax .four h3{
  font-weight: bold;
  font-size: 1.75rem;
  padding:10px;
}
/* rwd */
@media screen and (min-width:901px) and (max-width:1300px){
header .parallax .two{
  width: 500px;
  left: 43%;
  top: 160px;
}
header .parallax .three {
  left: 43.3%;
  top: 240px;
}
header .parallax .four {
  left: 43%;
  width: 500px;
  top: 300px;
}
}
@media screen and (min-width:1301px){
  header .parallax .two {
      left: 43%;
      top: 160px;
    }
    header .parallax .three {
      left: 43.3%;
      top: 260px;
    }
    header .parallax .four {
      left: 43%;
     
     }
}
@media screen and (min-width:769px) {
  .phone_iframe,.phone_iframe iframe{
    display: none;
  }
}
@media screen and (max-width:900px) {
  header .parallax .two {
    width: 450px;
    right: 4%;
    float:right;
    top: 160px;
  }
  header .parallax .three {
    width: 450px;
    right: 4%;
    float:right;
    top: 240px;
  }
  header .parallax .four {
    width: 450px;
    right: 4%;
    float:right;
  }
}
@media screen and (max-width:768px){
  header .parallax .two {
    max-width: 380px;
    float: right;
    right: 2%;
    top: 200px;
  }
  header .parallax .three {
    max-width: 380px;
    float: right;
    right:2%;
    top: 270px;
  }
  header .three h2{
    font-size: 1.75rem;
  }
  /* 手機平板表單 */
  header .parallax .four, .four iframe,header .parallax .four h3 {
    display: none;
  }
  .phone_iframe{
   width: 100%;
   background: #D5DBDB;
   height: 330px;
   z-index: 100;
 }
.phone_iframe iframe{
  margin: 0 auto;
   width: 90%;
 }
 .phone_iframe h3{
   font-weight: bold;
   padding: 10px;
 }
 }

@media screen and (min-width:496px) and (max-width:600px) {
  .phone_iframe{
    margin-top:5px;
  }
  header .parallax .two {
    max-width: 290px;
    float: right;
    right: 3%;
    top: 200px;
  }
  header .parallax .three {
    max-width: 290px;
    float: right;
    right:3%;
    top: 260px;
  }
  header .three h2{
    font-size: 1.3rem;
  }
}
@media screen and (max-width:500px){
  .phone_iframe{
    margin-top: -200px;
    z-index: 100;
    position: relative;
  }
  header .parallax .two {
    max-width: 290px;
    top: 100px;
    margin: 0 auto;
  }
  header .parallax .three {
    max-width: 290px;
    top: 160px;
    margin: 0 auto;
  }
  header .three h2{
    font-size: 1.3rem;
  }
  .phone_iframe h3{
 font-size: 1.2rem;
  }
}
@media screen and (max-width:460px){
  header .parallax .two {
    max-width: 250px;
  }
  header .parallax .three {
    max-width: 250px;
    top: 150px;
  }
  header .three h2{
    font-size: 1rem;
  }
}
@media screen and (max-width:320px){
  header .parallax .two {
    max-width: 230px;
  }
  header .parallax .three {
    max-width: 230px;
    top: 140px;
  }
 
}
/* header bg */
.one {
	position: absolute;
	z-index:-1;
	width: 100%;
	height: 900px;
	top:0;
	background: url("../img/bg.jpg") center top;
	background-size: cover;
  }
  .witness{
	  width: 780px;
	  height: 709px;	
	  top: 130px;
  }
  .witness img{
	  width: 728px;
  }
  @media screen and (min-width:1915px){
   .witness{
	position: absolute;
	left:17%;
   }

  }
  @media screen and (max-width:1914px){
	.witness{
		width: 680px;
		height:auto;
	   margin-top: 160px;
	   margin-left:15%;
	}
	.witness img{
		width: 680px;
	}
}
@media screen and (max-width:1650px){
	.witness{
	   margin-left: 13%;
	}
}
  @media screen and (max-width:1500px){
 .witness{
   margin-left: 10%;
 }
}
@media screen and (max-width:1300px){
  .witness{
    width: 600px;
    margin-left: 7%;
  }
 }
@media screen and (max-width:1100px){
  .witness{
    width: 550px;
    margin-left: 3%;
    margin-top: 200px;
  }
 }

  @media screen and (max-width:768px){
  .one{
    background: url("../img/bg_768.jpg") center top;
    height: 700px;
  }
  .witness{
    display: none;
  }
}
@media screen and (max-width:500px){
  .one{
    background: url("../img/bg_500.jpg") center top;
  }
}

/* main */
main {
  position: relative;
  height:1580px;
}
main .about{
	width: 100%;
  height: 950px;
  background: url(../img/section02phone_bg.jpg) center top;
}
.portfolio{
  width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: row;
margin-top: 80px;
}

.title_h4 {
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #595757;
  font-size: 36px;
  font-weight: bold;
  /*font-weight: bold;*/
  padding: 10px;
  /*background: #f7f8f8;*/
  border-bottom: 1px solid #595757;
  max-width:550px;
  margin:0px auto 20px auto;
  top: 30px;
}
.title_h4:after, .title_h4:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.title_h4:after {
	border-color: rgba(247, 248, 248, 0);
	border-top-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}
.title_h4:before {
	border-color: rgba(89, 87, 87, 0);
	border-top-color: #595757;
	border-width: 21px;
	margin-left: -21px;
}
.title_h4 span {
  color: #333;
}
/* resume */
main .about .resume{
  width: 550px;
  margin:25px 20px 0 0;
}
main .about .resume p{
  line-height: 24px;
  font-size: 18px;
  padding: 5px 0;
}

@media screen and (max-width:1200px) {
  main {
    height:2000px;
  }
  main .about{
    height: 1200px;
  }
  main .about .resume{
    width: 80%;
    margin:0 auto;
  }
  .portfolio{
    width: 90%;
    display: flex;
    flex-direction:column;
    margin-top: 60px;
  }
  .portfolio .film{
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  }

  @media screen and (max-width:600px) {
    main {
      height:auto;
    }
    main .about{
      height: 1400px;
    }
    .portfolio .film{
      width: 90%;
      margin: auto;
    }
    .portfolio .film iframe{
      width: 100%;
      height: 300px;
      margin-top: 30px;
    }
    .title_h4{
      width: 310px;
      font-size: 26px;
    }
   
  }
  
/*----green div-----*/
main .containerDiv{
	position: relative;
	height: 1000px;
	top:-500px;
}
main .formContainer {
  font-size: 1rem;
  color: #192a2e;
  background: #D5DBDB;
  background: url(../img/formbg.png)center top;
  width: 100%;
  height: 1130px;
  position: absolute;
  z-index: 20;
}
.advantage{
  display: flex;
  flex: row;
  width: 1100px;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 180px;
}
.advantage img{
  object-fit: contain;
}
.advantage h2{
  color: #c99359;
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
}
.advantage h3{
  color: #748d8d;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}
.advantage p{
  font-size: 1.1rem;
  margin-top: 10px;
}
.advantage .text_div{
  width: 80%;
  margin: 10px auto;
}
.text01,.text02,.text03{
  width: 320px;
  height: 460px;
  background: #ffffff;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.text02{
  margin-top: 68px;
}
.text03{
  margin-top: 136px;
}
main .formContainer a {
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  border-bottom: 2px dashed;
  color: #192a2e;
}
.bottom_form{
  position: relative;
  z-index: 110;
  top: 880px;
  width:100%;
  height: 250px;
  background: #191919;
  text-align: right;
}
.witness_form{
  width: 370px;
  position: absolute;
  z-index: 120;
  margin-left: 20%;
  bottom: 0;
}
.bottom_form h3{
margin-right: 200px;
  padding: 10px 0;
  color: #ffffff;
   font-weight: bold;
}
.bottom_iframe{
  width: 1100px;
  margin: 0 auto;
}
.bottom_form iframe{
  width: 600px;
  height: 200px;
 float: right;
 margin-right: 3%;
}
@media screen and (max-width:1500px) {
  .witness_form{
    margin-left: 15%;
  }
}
@media screen and (max-width:1200px) {
  .advantage{
    width: 100%;
    flex-direction: column;
    margin: 0;
    margin-top: 150px;
  }
  .advantage img{
    width: 250px;
    overflow: hidden;
  }
  .advantage h2{
    font-size: 1.6rem;
  }
  .advantage h3{
    font-size: 1.3rem;
  }
 
  .advantage .text_div{
    margin: 10px;
    justify-content: center;
  }
  .text01,.text02,.text03{
    width: 70%;
    height: 200px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
  }
  .text02{
    float: right;
    position: absolute;
    right: 0;
    margin-top: 260px;
  }
  .text03{
    margin-top: 260px;
  }
  .bottom_form{
    top: 1050px;
  }
  .bottom_iframe{
    width: 90%;
  }
  .witness_form{
    width: 350px;
    margin-left: 8%;
  }
}
@media screen and (min-width:1061px) {
  main{
    overflow: hidden;
  }
  .witness_phone{
    display: none;
  }
}
@media screen and (max-width:1060px) {
  /* main 高度 */
  main{
    height: 2150px;
  }
.witness_form{
  display: none;
}
.bottom_iframe,.bottom_iframe iframe{
  width: 550px;
}
.bottom_form{
  top: 1200px;
}
.bottom_form h3{
  width: 90%;
  margin: 0 auto;
 text-align: center;
}
/* phone img */
.witness_phone{
  position: absolute;
  bottom:-200px;
  z-index:99;
  width: 100%;
  height: 300px;
  background: url(../img/witness_phone.jpg) center top;
  background-size: cover;
}
}
@media screen and (max-width:700px) {
  main{
    margin-bottom: 110px;
  }
  .advantage img{
    display: none;
  }
  .advantage .text_div{
    margin: 10px auto;
  }
  .text01,.text02,.text03{
    height: 250px;
  }
  .text02{
    margin-top: 310px
  }
  .text03{
    margin-top: 310px;
  }
  .bottom_form{
    width: 100%;
    top: 1260px;
    height: 300px;
  }
  .bottom_iframe{
    width: 90%;
  }
  .bottom_iframe iframe{
    width: 100%;
  }
  .witness_phone{
    bottom: -300px;
  }
}

@media screen and (max-width:600px) {
  main{
    margin-bottom: 310px;
  }
  main .formContainer{
    height: 1500px;
  }
  .bottom_form h3{
    font-size: 1.5rem;
  }
}
  @media screen and (max-width:450px) {
    main{
      margin-bottom: 398px;
    }
    .bottom_form{
      top: 1250px;
      height: 400px;
    }
    .bottom_iframe iframe{
      height: 300px;
    }
  }

/* footer */
footer{
  z-index: 150;
  bottom: 0;
}