@charset "utf-8";
/* CSS Document */


/*banner*/
.banner{padding-top:4em; padding-bottom:3.5em; text-align:center; text-shadow:#fff 0 0 8px;}
.banner h2{font-size:3em; font-family:微軟正黑體; padding-bottom:0.5em; font-weight:normal; letter-spacing:0.1em; color:#06c;}
.banner h2 span{font-size:0.6em; color:#06c;}
.banner h3{font-weight:bold; padding-bottom:1em;}
.banner p{line-height:1.8em; font-size:1.1em; color:#666; padding-bottom:1em; letter-spacing:0.1em;} 
.banner a{display:inline-block; margin:0 1.5em;}
.banner a i{display:inline-block; background:#222; color:#fff; font-size:3em; padding:1em; text-shadow:none;}
.banner a:hover i{text-shadow:#fff 0 0 8px; transition:all 0.5s ease-in; border:inset #000 0 0 10px;}
.banner a h2{font-size:1em; padding-top:0.8em;}




/*prod*/
.prod{width:100%; padding:2em 0 3em; 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-image:url(../images/bg-prod.gif);
 text-align:center; overflow:hidden; box-shadow:#ccc 0 10px 10px; }
.prod p{color:#fff; padding:0.5em 0; font-size:1.1em; text-align:center; text-shadow:#333 0 0 8px;}
.prod h2.title{font-family:微軟正黑體; padding-bottom:0.5em; font-weight:normal; letter-spacing:0.1em; font-size:3em;  color:#06c; height:65px; line-height:65px; text-align:center; padding-bottom:0.5em; text-shadow:#fff 0 0 8px;}
.prod h2.title a{ color:#06c;}
.prod h2.title a:hover{ color:#00a0e9;}
.prod h2.title strong{color:#06c; font-size:0.6em;}
.prod .pd{width:91%; margin:0 auto;}
.prod a{width:350px; float:left; height:350px; position:relative; text-align:center; margin:0.5%; }
.prod a img{width:100%; height:auto;}
.prod .pdimg{position:absolute;}
.prod .pdtxt{position:absolute; height:80px; background:rgba(0,0,0,0.8); bottom:0; color:#fff; width:100%;}
.prod .pdtxt h2{font-size:1em; padding-top:15px;}
.prod .pdtxt h3{font-size:1em; color:#ccc; padding-top:5px;}

.prod .pd a:hover .pdtxt{position:absolute; height:350px; background:rgba(0,102,255,0.8); bottom:0; color:#fff; width:100%; }
.prod .pd a:hover .pdtxt h2{ padding-top:50%;}


@media screen and (max-width: 1024px) {
	/*.banner*/
	
	
}

@media screen and (max-width: 960px) {
	/*.banner*/
	

	
}

@media screen and (max-width: 768px) {	
	.banner p{font-size:1.3em; padding:1em;}

	

}

@media screen and (max-width: 650px) {
	.prod a{width:45%; float:left; height:auto; position:relative; text-align:center; margin:1% 0.5%; }
	.prod .pdimg{position:inherit;}
	.prod .pdtxt{ position:absolute; height:60px;  background:rgba(0,0,0,0.8);  bottom:0; color:#fff; width:100%;  }
	.prod .pd a:hover .pdtxt{position:absolute; height:60px; background:rgba(0,102,255,0.8); color:#fff; line-height:55px; }
	.prod .pd a:hover .pdtxt h2{ padding-top:0;}


	
	
}

@media screen and (max-width: 480px) {
	.prod a{width:98%; float:left; height:auto; position:relative; text-align:center; margin:1% 0.5%; }
	

	
}