/*--extra set--*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.web1{ 
  background:url(../image/index/b1.jpg); 
  height:auto;
}
.web2{ background:url(../image/index/b2.jpg); }
.web3{ background: #fff;}
.web4{ background:url(../image/index/v1.jpg) center center  no-repeat fixed;/*50% 0 no-repeat fixed;*/-moz-background-size: cover;
        background-size: cover;}
.web4-1{ background:url(../image/index/v2.jpg); }
.web5{ background:url(../image/index/contact.jpg);height:auto;padding-bottom: 5%; }

.web1,.web2,.web5{
  -moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  position: relative;
  background-position:center center; 
}

/*享受生活*/
.slogan{
  text-align: center;
  vertical-align: middle;
  margin: 10% 0 40% 0;
}
.slogan h1,.slogan h2,.slogan h3,.slogan h4{
  margin: 0 0 2% 0;
  font-weight: bold;
  color: #4d4d4d;
}
.slogan h4{
  margin: 0 0 .8% 0;
}
.slogan h1{
  font-size: 2em;
}

/*品牌理念*/
.brand{
  text-align: center;
  vertical-align: middle;
  margin: 22% 0 18% 0;
  float: right;
  color: #fff;
  font-weight: 600;
}
.brand h1{
  margin: 5% 0;
  font-weight:bold;
}
.brand h2{
  margin:2.5% 0;
  font-size: 1.12em;
  font-weight:bold;
}

/*為何有機*/
.organic{
  margin: 0% 0;
}
.organic .step1{
 margin: 10% 0 ;
 float: right;
}
.organic .step2,.organic .step3,.organic .step4{
 margin: 13% 0 ;
 float: right;
}
.pic{
  z-index: 1;
  max-width: 38%;
  text-align:center;
  margin: 0 1%;
}
.reason1 .describe,
.reason2 .describe{
  margin: 0% 0% 0 0%;
  max-width: 59%; 
  text-align: center;
}
.reason1 span,.reason1 h1,
.reason2 span,.reason2 h1, 
.reason3 span,.reason3 h1,
.reason4 span,.reason4 h1{
  letter-spacing: 2px;
  color:#717071;
  font-weight:bold;
}
.reason1 h1,.reason2 h1,
.reason3 h1,.reason4 h1{
  border-bottom: 1px solid #717071;
  font-size: 65px;
  padding: 0 0 1.5% 7%;
  letter-spacing: 4px;
}
.reason1 span,.reason2 span{
  padding: 1.5% 0 0% 7%;
}
.reason3 .describe,
  .reason4 .describe{
    margin: 0% 0 0 0%;
    max-width: 60%; 
    text-align: center;
    float: left;
  }
  .reason3 .pic,.reason4 .pic{
    z-index: 1;
    max-width: 38%;
    text-align:center;
    padding: 0 0 0 0%;
    position: absolute;
    right:0;
  }

  .step3 .detail,.step4 .detail{
    float: left;
    text-align: center;
    font-size: 17px;
    line-height: 30px;
    padding: 0 0 0 2%;
    margin: 5% 0 0 3%;
  }
.detail{
  float: right;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
  padding: 0 0 0 2%;
  margin: 5% 0 0 0;
}
/*品牌精神*/
.introleft,.introright{
  padding: 3% 0%; 
  color: #fff;
  line-height: 32px;
  margin: 7% 0;
  font-size: 18px;
  letter-spacing: 0px;
  text-align: justify;
}
.introleft p{
  margin: 1% 0;
}
.intromark{
  padding: 0 0 0 26px;
  margin: 0 0 1% 0;
}
.intromark::before{
  content:"◎";
  width:auto;
  height:100%;
  float: left;
  font-size: 1em;
  color: #fff;
 /* background:#f00;*/
  position: absolute;
  left:0;
}
.introlist{
  padding: 0 0 0 40px;
}
.introlist li::before{
  content:".";
  width:auto;
  height:100%;
  float: left;
  font-size: 40px;
  color: #fff;
 /*background:#f00;*/
  position: absolute;
  left:26px;
  line-height: 8px;
}
.introright{
  padding: 3% 0% 3% 0%; 
}

/*品牌精神*/
.sign{
  padding: 3% 0%;
  margin:3% 0 3% 0;
  text-align: center;
  color: #fff;
  line-height: 40px;
}
.signright{
  text-align: left;
}
.signtop{
  margin: 0 0 6% 0;
}
.signtop h1{
  font-size: 2.55em;
  font-weight: bold;
}
.signtop h2{
  font-size: 2em;
  font-weight: bold;
}
.signtop h3{
  margin:0 0 4% 0;
  font-size: 1.8em;
}
.signtop h4{
  margin:0 0 1% 0;
  font-size: 1.6em;
  font-weight: bold;
}
.signtop h3::before{
  content: "";
  width:26%;
  height:2px;
  background-color: #fff;
  position: absolute;
  z-index: 3;
  left: 0%;
  top:50%;
  float: left;
}
.signtop h3::after{
  content: "";
  width:26%;
  height:2px;
  background-color: #fff;
  position: absolute;
  z-index: 3;
  right: 0%;
  top:50%;
  float: left;
}

.signright h2{
  margin:1.5% 0;
}

/*聯絡我們*/
.topic{
  margin: 8% 0 4% 0;
  text-align: center;
}
.topic h1,.topic h2{
  margin: 0% 0 0.8% 0;
  color: #595757;
  letter-spacing: 2px;
  font-weight: bold;
}
.topic h1{
 font-size: 2.5em;
}
.topic h2{
 font-size: 2.3em;
}
.coninfo{
  padding: 0 2%;
  margin: 3% 0%;
  letter-spacing: 2px;
}
.coninfo h3{
  line-height: 34px;
  font-weight: bold;
  color: #595757;
  letter-spacing: 1px;
}

.coninfo .tels{
  margin: 3% 0 0 0;
}




@media only screen and (min-width: 600px) {
  
  .organic .step1,.organic .step2,.organic .step3,.organic .step4{
    width: 49%;
    float: left;
    margin: 10% 0;
    box-sizing:border-box;
    padding: 0 .5%;
  }
}

@media (min-width: 768px) {
  
  /*享受生活*/
  .slogan h1{
    font-size: 2.3em;
  }
  .slogan{
    margin: 32% 0;
  }
  /*品牌理念*/
  .brand{
    margin: 18% 0 18% 0;
  }
  .brand h1{
    margin: 3% 0 3% 0;
    font-size: 5em;
  }
  .brand h2{
    margin:1.4% 0;
    font-size: 1.8em;
  }
  .introleft,.introright{
    font-size: 20px;
  }

  /*為何有機*/
  .reason1 h1,.reason2 h1{
    font-size: 100px;
  }

  .organic .step1,.organic .step2,.organic .step3,.organic .step4{
    width: 49%;
    float: left;
    margin: 10% 0;
  }

  /*品牌精神*/
  .signtop h1{
    font-size: 5em;
  }
  .signtop h2{
    font-size: 3em;
  }
  .signtop h3{
    margin:0 0 4% 0;
    font-size: 2.4em;
  }
  .signtop h4{
    margin:0 0 1% 0;
    font-size: 2em;
  }
  .signtop h3::before{
  
    width:14%;
    left: 20%;
  }
  .signtop h3::after{
   
    width:14%;
    right: 20%;
  }
  .intromark::before{


  font-size: 2em;

}
  /*聯絡我們*/
  .topic h1{
    font-size: 5em;
  }
}
@media (min-width: 1000px) {

  .web4-1{
  -moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  position: relative;
  background-position:center center; 
}

  .web1{ 
    height:100%;
  }
  
  /*享受生活*/
  .slogan{
    margin: 32% 0;
  }
  /*品牌理念*/
  .brand h2{
    font-size: 1.5em;
  }

  /*為何有機*/
  .organic .step1,.organic .step2,.organic .step3,.organic .step4{
    width:75%;
    float: left;
  }

  .organic{
   margin: 5% 0;
  }
  .web3::before{
    content:"";
    width:100%;
    margin: 0 auto;
    height: 100%;
    /*max-width: 1234px;*/
    overflow: hidden;
    background: url(../image/index/hand.png) top center no-repeat;
    background-size:100%; 
    top:0;
    position: absolute;
    z-index: 1;
      
  }
  .organic .step1{
   margin: 10% 0 ;
   float: left;
  }
  .organic .step2{
   margin: 0% 10% 0 0;
   float: right;
  }
  .organic .step3{
   margin: 10% 0 ;
   float:right;
  }
  .organic .step4{
   margin: 0% 10% 0 0;
   float: right;
  }
  .organic .step2 .reason2::after{
    content:"";
    display: block;
    right: 0%;
    top:0px;
    float: right;
    width:1px;
    height:100%;
    background: #717071;
    position: absolute;
    transform-origin:left bottom;
  transform:rotate(25deg);
  }
  .reason1 .pic,.reason2 .pic{
    z-index: 1;
    max-width: 70%;
    text-align:center;
    padding: 0 0 0 0%;
    position: absolute;
    left:3%;
  }
  .reason1 .describe,
  .reason2 .describe{
    margin: 20% 0 0 -6%;
    max-width: 60%; 
    text-align: center;
    float: right;
  }
  .reason2 .describe{
    float: right;
  }
  .reason2{
    /*background:#f00;*/
    /*border:1px solid #ccc;*/
    padding: 0 0 0% 0;
  }
  .detail{
    float: right;
    text-align: center;
    font-size: 17px;
    line-height: 30px;
    padding: 0 0 0 2%;
    margin: 5% 0 0 0;
  }
  .reason1 span,.reason1 h1,
  .reason2 span,.reason2 h1,
  .reason3 span,.reason3 h1,
  .reason4 span,.reason4 h1{
    letter-spacing: 2px;
    color:#717071;
    font-weight:normal;
  }
  .reason1 h1,.reason2 h1,
  .reason3 h1,.reason4 h1{
    border-bottom: 1px solid #717071;
    font-size: 50px;
    padding: 0 0 1.5% 0%;
    letter-spacing: 0px;
    font-style:italic; 
    font-weight: lighter;
  }
  .reason1 span,.reason2 span,
  .reason3 span,.reason4 span{
    padding: 1.5% 0 0% 7%;
  }
  
  .reason3,.reason4{
    float: right;
  }
  .reason3 .describe,
  .reason4 .describe{
    margin: 20% 0 0 0%;
    max-width: 60%; 
    text-align: center;
    float: left;
  }
  .reason3 .pic,.reason4 .pic{
    z-index: 1;
    max-width: 70%;
    text-align:center;
    padding: 0 0 0 0%;
    position: absolute;
    right:0;
  }

  .step3 .detail,.step4 .detail{
    float: left;
    text-align: center;
    font-size: 17px;
    line-height: 34px;
    padding: 0 0 0 2%;
    margin: 5% 0 0 3%;
  }

  .organic .step4 .reason4::after{
    content:"";
    display: block;
    left: 0%;
    top:0px;
    float: left;
    width:1px;
    height:100%;
    background: #717071;
    position: absolute;
    transform-origin:left bottom;
  transform:rotate(-25deg);
  }

  /*品牌精神*/
  .sign{
    margin:12% 0;
  }
  .introright{
    padding: 3% 4% 3% 5%; 
  }
  .introleft,.introright{
    font-size: 18px;
  }
  .intromark::before{


  font-size: 20px;

}

  /*聯絡我們*/
  .coninfo h3{
    line-height: 42px;
  }

}
@media (min-width: 1000px) {
  .web3::before{
    background-size:98%; 
  }
  /*品牌精神*/
  .signtop h1{
    font-size: 3em;
  }
  .signtop h2{
    font-size: 2em;
  }
  .signtop h3{
    margin:0 0 4% 0;
    font-size: 1.8em;
  }
  .signtop h4{
    margin:0 0 1% 0;
    font-size: 2em;
  }
  .signright h2{
    font-size: 1.4em;
  }
}

@media (min-width: 1200px) {

  .web3::before{
    background-size:100%; 
  }

  /*為何有機*/
  .reason1 h1,.reason2 h1,
  .reason3 h1,.reason4 h1{
    font-size: 70px;
  }
  .organic .step2{
   margin: 10% 10% 0 0;
  }
   .organic .step4{
   margin: 9% 10% 0 0;
  }
   

}

@media (min-width: 1600px) {

  
  /*為什麼有機*/
  .web3::before{
    background-size:100%; 
  }
  .reason1 h1,.reason2 h1,
  .reason3 h1,.reason4 h1{
    font-size: 100px;
  }
  .step3 .detail,.step4 .detail,.detail{
    font-size: 20px;
  }
  .organic .step4{
    margin: 10% 10% 0 0;
  }
  /*品牌理念*/
  .brand h2{
    font-size: 1.8em;
  }
  /*品牌精神*/
  .signtop h1{
    font-size: 5em;
  }
  .signtop h2{
    font-size: 3em;
  }
  .signtop h3{
    font-size: 2.4em;
  }
  .signtop h4{
    font-size: 2em;
  }
  .signright h2{
    font-size: 2em;
  }
  
}