/*section{ position: sticky;top:0px;}
section:first-child{
  z-index: 1;
}
section:nth-child(2){
  z-index: 2;
}
section:nth-child(3){
  z-index: 3;
}
section:nth-child(4){
  z-index: 4;
}

section:nth-child(5){
  z-index: 5;
}*/




.form{
  padding: 0px 7%;
  margin: 9% 0;
}
.form p{
  color: #fff;
  line-height: 19px;
}
.forminfo p{
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 .85% 0;
}
.agree{
  color: #fff;
}
.agreeword{
  margin: 0 0 0 15px;
}

.md-trigger{
  float:none!important;
}
.max110{max-width: 110px;}
.max220{max-width: 220px;}
/*public*/

.area{
  height:100%;
  padding: 0px 0;
}

.closebtn{
  position: sticky;
  top:0;
  background: rgba(0,0,0,.5);
      z-index: 5;
}

.personal{
  margin: 15px 0 15px 0;
  padding: 0 10px;
  text-align: left;
}

.cover{
  position: absolute;
  width: 100%;
  height:100%;
  padding: 5% 0;  
  background:rgba(0,0,0,.35);
  z-index: 2 ;
  top:0px;
}

.scolldown{
  position: absolute;
  bottom:60px;
  /*background:#f00; */
}
.video{
  top: 0; 
  z-index: 1;
  background: #000;
}

.main1{
  background:url("../image/01mob.jpg") no-repeat center center ;
  top: 0; 
  z-index: 2;
}
.main2{
  background:#121212 ;
  top: 0; 
  z-index: 3;
}
.main3{
  background:url("../image/03mob.jpg") no-repeat center center ;
  top: 0; 
  z-index: 4;
}
.main4{
  background:#000 url("../image/04mob.jpg") no-repeat center top ;
  top: 0; 
  z-index: 4;
  min-height: 100vh;
  height: auto;
  background-size:  100%;
}

.main1,.main2,.main3,.video{
  position: sticky;
  background-size: cover;
}


#banner{
   height: 100%;
}
.slide01{background: url("../image/s1mob.jpg");}
.slide02{background: url("../image/s2mob.jpg");}
.slide03{background: url("../image/s3mob.jpg");}
.slide04{background: url("../image/s4mob.jpg");}
.slide05{background: url("../image/s5mob.jpg");}

.slide01,.slide02,.slide03,.slide04,.slide05{
  background-size: cover;
  background-position: center;
  /*-webkit-background-size:contain;*/
}

.slide01 .mobword{
  position: absolute;
  bottom: 20%;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0 0;
}

.mobword{
  position: absolute;
  bottom: 16%;
    padding: 0px 0 0 9%;
  color: #fff;
  font-size: 14px;
  line-height: 24px;

}

/*.slide05 .mobword{
  top: 40%;
}*/

.main3 .mobword{
  position: relative;
  /*top: 25%;*/
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
      float: left;
   position: absolute;
  bottom: 20%;

    padding: 0 0;
}

.main1 .mobword{
  position: absolute;
  bottom: 10%;
  color: #fff;
  font-size: 14px;
  line-height: 26px; 
  padding: 0 0;
}

.mobform{
  margin:   160px 0 0 0;
}





/*footer-----------------------------------*/
.footer{
  background:#172a39;
  padding: 1.35% 2%;
  position: relative;
    bottom: 0px;
}

.footer a{
  color: #fff;
}
.footer a:hover{
  color: #00AAFF;
}

#footer{
  color: #fff;
  letter-spacing: 0px;
  background:url(../image/footer.jpg) no-repeat ;
  background-size: cover; 
}

.footerword{
  width:100%;
  max-width: 900px;
  margin:0 auto;
  padding: 0 0; 
}

.wordarea{
  padding:10% 5%;
  background:rgba(0,0,0,.75); 
}

.social{
  float: none;
    margin: 0 auto;
    width: 30%;
}



.pagination {
  position:fixed;
  right:20px;
  top: 50%;
  transform: translateY(-50%);

  font-size:1.4em;
  z-index: 10;
}
.pagination a {
  display:block;
  height:20px;
  margin-bottom:5px;
  color:white;
  position:relative;
  padding:4px;
}
.pagination a.active:after {
  box-shadow:inset 0 0 0 5px;
}
.pagination a .hover-text {
  position:absolute;
  right:15px;
  top:7px;
  opacity:0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  padding-right: 15px;
  display:none;
}
.pagination a:hover .hover-text {
  opacity: 1;
}
.pagination a:after {
  -webkit-transition:box-shadow 0.5s ease;
  transition:box-shadow 0.5s ease;
  width:10px;
  height:10px;
  display: block;
  border:1px solid;
  border-radius:50%;
  content:'';
  position: absolute;
  margin:auto;
  top:0;
  right:4px;
  bottom:0;
}


/*------------------------------------*/

.consultation input[type="checkbox"],
.consultation input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.consultation label {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 0px;
  padding-left: 25px;
  padding-right: 10px;
  line-height: 36px;
  cursor: pointer;
  min-width: 20px;
  min-height:20px;
  z-index: 1;
  color: #fff;
}
.consultation label::before {
  content: " ";
  position: absolute;
  top: 6px;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  z-index: -1;
}
.consultation input[type="radio"] + label::before {
  border-radius: 18px;
}
/* Checked */
.consultation input[type="checkbox"]:checked + label,
.consultation input[type="radio"]:checked + label {
  padding-left: 10px;
  color: #fff;
  
}
.consultation input[type="checkbox"]:checked + label::before,
.consultation input[type="radio"]:checked + label::before {
  top: 0;
  width: 100%;
  height: 100%;
  background: #00AAFF;/*#2995cc*/
  border: 2px solid #00AAFF;

}
/* Transition */
.consultation label,
.consultation label::before {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

.social .socialicon{
    padding: 0 5px;
    text-align: center;
  }

@media only screen and (min-width: 360px){
.main3 .mobword{
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20%;
}
}
@media only screen and (min-width: 370px){

  .slide01 .mobword{
  position: absolute;
     bottom: 20%;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  padding: 0 0;
}

.mobword{

  bottom: 16%;

  font-size: 16px;
  line-height: 24px;

}

.main3 .mobword{
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20%;
}

.main1 .mobword{
  bottom: 10%;
  font-size: 16px;
  line-height: 26px;
  padding: 0 0;
}


}
@media only screen and (min-width: 600px){
  
  .area{
    padding: 0px 0;
    min-height: 100vh;
    max-height: 100vh;
        height: 100vh;
    overflow: hidden;
  }
  .main4{
    min-height: 100vh;
    height: auto;
    max-height: unset;
  }


  .slide01 .mobword,.main3 .mobword,.main1 .mobword,.mobword{
    font-size: 24px;
    line-height: 1.5em;
  }
   
}

@media (min-width: 768px) {
  

}
@media (min-width: 961px) {

  .main1{
    background:url("../image/01.jpg") no-repeat center center ;
  }
  .slide01{background: url("../image/s1.jpg");}
  .slide02{background: url("../image/s2.jpg");}
  .slide03{background: url("../image/s3.jpg");}
  .slide04{background: url("../image/s4.jpg");}
  .slide05{background: url("../image/s5.jpg");}
.slide01,.slide02,.slide03,.slide04,.slide05{
  background-size: cover;
  background-position: center;
}

  .main3{
    background:url("../image/03.jpg") no-repeat center center ;
  }



  .footer{
   
    padding: 0.35% 2%;
    position: relative;
      bottom: 0px;
  }
}

@media screen and (min-width: 1000px){
  /*橫線*/
  .line{
    margin:40px 0; 
  }
  .wordarea{
    padding:10% 15%;
  }
  .social .socialicon{
    padding: 0 10px;
    text-align: center;
  }
  .social .socialicon:last-child{
    border-left:1px solid #ccc;
  }
  .md-trigger{
    float:right!important;
  }

  .form{
  padding: 0px 7%;
  margin: 3% 0;
}

.main4{
  background:#000 url("../image/04.jpg") no-repeat center center ;
  position: sticky;
  background-size: cover;
}

.mobform{
  margin:   0 0 0 0;
}





}

@media screen and (min-width: 1000px) and (max-width: 1500px){

  .main1,.main2,.main3,.main4,.video{
    position: sticky;
    background-size: cover;
  }


  .max110{max-width: 130px;}
  .max220{max-width: 250px;}


 


 
}

@media (min-width: 1500px) {
  
  .footer{
  
    padding: 0.35% 2%;
    position:absolute;
      bottom: 0px;
  }

  .max110{max-width: 150px;}
  .max220{max-width: 300px;}

   .personal{margin: 30px 0 0 0;}
}