@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
body{background-color:#fff;font-family:"微軟正黑體", Arial; font-size:14px;}
a{text-decoration:none;color:inherit;}
a:hover{text-decoration:none;color:inherit;}
ul, li, ol {list-style-type:none;}
p{font-size: 14px;}
.img-responsive {width: 100%; height: auto; display:block;}
.paddingT50{padding-top:50px;}
.marginB50{margin-bottom:50px;}
.marginB30{margin-bottom:30px;}
.marginT50{margin-top:50px;}
.marginT20{margin-top:20px;}
.blockTitle{color:#088855;}
.marginB20{margin-bottom:20px;}
.lineH2{line-height:2;}

/**********nav*****************/
.navbar{padding-top:0; padding-bottom:0;}
.logo-1, .logo-2{ width:90%; margin:0 auto;text-align:center;}
.navbar-brand{width:80%;margin-right: 0;}
.nav-item{font-size:14px;font-weight:600;}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #333; 
}

.position-relative{ position: relative;}

/***********slider*************/
#slideNo3{background-image:url(../images/main-1.jpg); background-size:100%; background-repeat:no-repeat; width:100%; height:41vw;}
#slideNo2{background-image:url(../images/main-2.jpg); background-size:100%; background-repeat:no-repeat; width:100%; height:41vw;}
#slideNo1{background-image:url(../images/main-5.jpg); background-size:100%; background-repeat:no-repeat; width:100%; height:41vw;}
.carousel-indicators li{border-radius:50%;width:10px; height:10px; background-color:#8dbe55;}




#about{padding-top:10px; width:90%;  margin:0 auto 30px auto;}
.aboutT1 {font-size:30px; font-weight:400; color:#8dbe55; text-align:center;}
.aboutT2 {font-size:18px; font-weight:700; line-height:2; color:#8dbe55; text-align:center; }



	
		
		
		

.hr01 {width:50px;height:2px; margin:0 auto; margin-top:10px; background-color:#8dbe55;}

.icon{padding:0 30%;}
/*.icon-1{background-image:url(../images/icon-1.jpg);}
.icon-2{background-image:url(../images/icon-2.jpg);}
.icon-3{background-image:url(../images/icon-3.jpg);}*/
#advantage{width:90%; margin:0 auto;margin-bottom:50px;}
.iconTitle{font-size:20px; margin-bottom:10px;font-weight:700; text-align:center;}
.iconDesc{font-size:16px;  text-align:center;}


#products{width:90%; margin:0 auto; }
.blockTitleC {color:#333;text-align:center;font-size:32px; padding-bottom:10px;font-weight:700;}
.greenItem{  border-top:#85bd50 1px solid;border-right:#8dbe55 1px solid;border-left:#8dbe55 1px solid; border-bottom:#8dbe55 3px double;  margin-bottom:15px;}
#filters{width:90%; margin:20px auto; }

.folio-filters { width: 100%; }
.folio-filters li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}

.folio-filters li a {
  display: block;
  padding: 5px 10px;
  font-weigth: bold;
  text-transform: uppercase;
  color: #8dbe55;
  background-color: #eeeeee;
  -webkit-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}

.folio-filters li a:focus { text-decoration: none; /* Remove underline after click in IE */ }
.folio-filters li a:hover, .folio-filters li.current a {
  background-color:#8dbe55;color:#fff;
}



footer  {padding:20px 0; background-color:#5d5d5d; color:#ffffff;}

#contactInfo {line-height:2;text-align:center;}
.companyName{font-size:18px;font-weight:700;margin-bottom:10px;}
.companyName span{padding-bottom: 5px;border-bottom: 1px solid #fff;}

.copyright{text-align:center;font-size:12px;}


#contact{width:90%; margin:0 auto; }
.submit{padding:5px 10px; margin:0 auto; display:inline-block; text-align:center; background-color:#5675a5; color:#fff; border:none;}

@media (min-width: 480px) {

	
}


@media (min-width: 576px) {


#about{padding-top:20px; width:80%;  }
#advantage{width:80%;}



}

@media (min-width: 768px) {
	


}

@media (min-width: 992px) {
#slideNo1{height:41vw;}
#slideNo2{height:41vw;}

}

@media (min-width: 1024px) {

.carousel-indicators li{border-radius:50%;width:10px; height:10px; background-color:#009858;}
#products{width:80%; }	

#filters{width:100%; margin:50px auto 20px auto; }
.folio-filters li {margin-left: 10px;margin-bottom: 20px;}
.folio-filters li a {padding: 8px 20px;}

.navbar { 
    display: initial;
    padding: 0;
}


nav{width:100%;}
.navbar-brand{width:100%;}	
.brandLogo{width:100%;overflow:hidden;}
.logo-1{width:50%;float:left;}
.logo-2{width:50%;float:left;}
.logo-1 img{width:35%; margin:0 auto; }
.logo-2 img{width:40%; margin:40px auto 0 auto;}

.nav-item{width:33.3%;text-align:center;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #fff; 
}

.collapse, .navbar-collapse{background-color:#5675a5; width:100%; }
.navbar-light .navbar-nav .nav-link {color:#fff;}
.navbar-nav {width:60%; margin:0 auto;}

.nav-item:hover, .nav-item:active  {background-color:#436394; }


.advantage-1{

    animation-delay: 0s;opacity: 0;
    -webkit-animation-name:appear;
	-webkit-animation-duration:2s;
	animation-name:appear;
	animation-duration:2s;
	animation-fill-mode:forwards ;
  }
@-webkit-keyframes appear{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes appear{
	0%   {opacity: 0;}
	100% {opacity: 1;}
	
}

.advantage-2{
	animation-delay: 0.5s;
	opacity: 0;
 -webkit-animation-name:appear;
	-webkit-animation-duration:2s;
	animation-name:appear;
	animation-duration:2s;
	animation-fill-mode:forwards ;}
.advantage-3{
	animation-delay: 1s;
	opacity: 0;
 -webkit-animation-name:appear;
	-webkit-animation-duration:2s;
	animation-name:appear;
	animation-duration:2s;
	animation-fill-mode:forwards ;}
	
#contact{width:70%; padding:50px 0;}

.step{}
.stepCircle{border:1px solid #333; border-radius:50% 50%; width:100%; height:15vw;}
.stepName{margin-top:50px; border-top:3px solid #333; text-align:center;}
.stepDesc{}

@media (min-width: 1400px) {
 	
}
@media (min-width: 1600px) {
}