.yellow{
  background:rgba(228,109,127,.75);
}

.lines{
  max-width: 260px;
  height: 8px;
  background: #fff;
  margin: 20px 0;
}

.menuset{
  left: 0;
  background: #f1f1f1;
  margin: 0px 0 0 0px;
  padding: 0 0px;
  height: auto;
}


.topmenu{
  background: #f1f1f1;
  padding: 0 0 0px 0;
  
  z-index: 3;
  border-bottom:1px solid #dfdfdf;
  top:0;
  position: relative;
}
.logo{
 /* background: #fff;*/
  max-width: 90px;
  overflow: hidden;
  border-radius: 2px;
}

/*第一區塊*/
.main1,.main2{
  padding: 0 15px;
}

.area1pra h1{
  font-style: italic;
  font-weight: bold;
  color: #fff;
}
.area1pra p{
  font-size: 1.2em;
  line-height: 1.9em;
  color: #fff;
}

#item1 .singleone{
  padding: 0 0%;
  margin: 0 0 ;
  max-height: 595px;
}


.singleone{
  padding: 0 2%;
  text-align: center;
  line-height: 1.45em;
 margin: 1% 0;
}

/*.singleone755{
  min-height: 340px;
}*/

.promise{
  border: 1px solid #fff;
  padding: 20px 20px;
  text-align: center;
  margin: 30px 0;
}

.promise h1{
  color:#2ec4b6;
  font-weight: bold;
}

/*區塊共同元素*/
.sections{
  padding: 3.5% 0;
}
#item5{
  padding: 6.5% 0 2% 0;
}
.turquoise{
  color:#050505;
  font-weight: bold;
}
.whytitle{
  color: #e4ba4a;
  margin: 0 0 20px 0;
  font-weight: bold;
}
.white{
  color:#fff;
  font-weight: bold;
  margin: 0 0 15px 0;
}

.white h1{
  font-style: italic;
  font-weight: bold;
}


.border{
  margin: 40px 0; 
  border:2px solid #f8ce2d;
  color:#f8ce2d;
  border-radius: 5px;
  padding:10px 10px; 
}
/*第二區塊-----------------------------------------------------*/

.area2 .areatop{
  padding: 50px 0;
  color: #101525;
  margin: 0 0 50px 0;
}

.area2 .areatop h5{
  margin: 5px 0;
  color: #fff;
  font-weight: bold;
}

.area2 .areatop .singleone{
  padding: 0 4.5%;
}


.area2right{
  padding: 60px 0 0 0;
  text-align: justify;
  line-height: 2em;
}
.area2pra{
  line-height: 32px;
  margin: 20px 0 25px 0;
}

.machine img{
  border: 1px solid #ccc;
  border-radius: 3px;
}

.machine{
  padding: 0 1.5%;
  text-align: center;
  line-height: 1.45em;
  margin: 1% 0;
}

/*第三區塊-----------------------------------------------------*/

#item2,#item4{
 background:#fff;
}
#item6{
 /* background:rgba(32,17,0,0.65);*/
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#201100+0,ffffff+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(32,17,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(32,17,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(32,17,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#201100', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#item1,.area3{
  /*line-height: 32px;*/
  background: #ededed;
  background: url("../image/banner/bg.jpg") no-repeat center center;
   background-size: cover;
}
.servp{
  margin: 0 0 15px 0;
  color:#454545;
  font-weight: bold; 
}

/*諮詢表單*/
.consultation{
  /*background: #eaeaea;*/
}

#item5{
   background: #fcfcfc;

}

/*風雲榜*/
.toplist ul{
  /*max-height: 590px;
  overflow: auto;*/
  /*border:10px solid ;*/
  padding: 0 10px;

  }

.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {
  content: "";
  position: absolute;
}
.knockout-top-to-bottom:before {
  top: -3px;
  left: -3px;
  bottom: 0;
  right: -3px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  z-index: -2;
}
.knockout-top-to-bottom:after {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
}
/*.toplist ul,.toplist ul li{
  float: left;
  width: 100%;
}*/
.toplist ul li{
  padding: 10px 10px;
  background: #efefef;
  color: #232323;
  border:1px solid #ccc;
  margin:5px 0;
}
.toplist ul li a{
  color: #fff;
}
.toplist ul li .fa{
  margin: 0 5px 0 0; 
}
.toplist ul li:nth-child(odd){
  background: #fff;
}
.toptel{
  /*background: #000888;*/
  border-radius: 5px;
  text-align:center; 
  padding:  15px 0;
  margin: 10px 5px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
.names{
  padding:  10px 0;
  margin: 0 5px;
}
.topline{
  background: #00b812;
  border-radius: 5px;
  text-align:center; 
  padding:  15px 0;
  margin: 0 5px;
}
.moreinfo{
  padding: 15px 0 0 0;
  margin: 10px 5px;
  border-top:1px solid #ccc;
      line-height: 24px;
}
.expert{
  min-width: 80px;
}


/*Footer-----------------------------------------------*/
#footer{
  padding: 1% 0;
  background: #101525;
  color: #fff;
}

#footer .footinfo{
  margin: 0px 0;
  line-height: 36px;
}

#footer .footinfo p{
  margin: 0 0;
}
#footer .footinfo i{
  margin: 0 1% 0 0;
  min-height: 30px;
}

.facepage iframe{
  min-height: 280px;
  margin: 20px 0 20px 0;
}


.facepage .faces{
  max-height: 280px;
  overflow: hidden;
}

.map{
  margin: 0 0 10px 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: 10px;
  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 #6e8886;
  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: #6e8886;/*#2995cc*/

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


/*右側按鈕---------------------------------------------*/

.quicklink{
  position: fixed;
  right:0;
  top:10%;
  max-width: 50px;
  /*background: #f00;*/
  z-index: 4;
}

.quicklink div{
  margin: 0 0 8px 0;
}

@media only screen and (min-width: 600px) {
  /*.singleone755{
 
  min-height: 430px;
}*/
 
}

@media (min-width: 768px) {
  
  

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



}
@media (min-width: 1000px) {
  .facepage iframe{
    min-height: 280px;
    margin: 0px 0 20px 0;
  }

  .quicklink{
    right:0;
    top:40%;
    max-width: 70px;
  }

  /*第一區塊*/
  .main1{
    padding: 30px 80px;
  }
  .main2{
    padding: 30px 30px;
  }
  .area1pra p{
    font-size: 1.0em;
  }
  #item1 .singleone{
    max-height: 445px;
  }




}
@media (min-width: 1200px) {
   /*第一區塊*/
  .main1{
    padding: 0 80px;
  }
  .main2{
    padding: 0 30px;
  }
  .area1pra p{
    font-size: 1.4em;
  }
  /*第二區塊*/
  .area2 .areatop .singleone{
    padding: 0 5.5%;
  }
  .topmenu{
    position: sticky;
    top: 0;
  }
  #item1 .singleone{
    max-height: 445px;
  }

  /*Footer-------------------------------*/
  #footer .footinfo{
    margin: 0% 0;
  }
}
@media (min-width: 1300px) {
  #item1 .singleone{
  max-height: 555px;
}
  
}

@media (min-width: 1600px) {
  
 #item1 .singleone{
  max-height: 595px;
}
   
}