@charset "utf-8";
body{
	background:#efefef;
	height:100%;
	font-family:微軟正黑體;
	color:#000;
	padding-top: 70px; 
	}
a {
    text-decoration:none;
	color:#000;
	}
a:hover{
    text-decoration:none;
	}
hr{
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	}
.panel{
	}	
.panel-heading{
	font-size:16px;
	}	
.panel-body img{
	width:100%;
	}	
.bg-white{
	background:#FFF;!important
	}	
.bg-light{
	background-color: #f8f9fa!important
	}
.bg-sliver{
	background-color:#F5F5F5!important
}
.backlink{
	margin-top:10px;
	text-align:center;
	}
	
	
	
.lidate{
	font-size:12px;
	color:#06C;
	}
.newsBlock{
	font-size:14px;
	}
.newsTitle{
	font-size:18px;
	font-weight:bold;
	padding-bottom:5px;
	}				
	
		
/* header-nav */
.nav{

	}
.navbar-header{
	height:70px;
	font-size:18px;	
	}		
.navbar-header img{
	margin-top:-5px;
	height:45px;
	}	
.navbar-default{
	background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
	}	
.nav li a:link {	
	color:#000;
	font-size:16px;
	font-weight:bold;
	}	
.nav li a:visited {	
	color:#000;
    }		
.navbar-default ul li a{
	text-align:center;
	width:100%;
	border-bottom:3px solid #333;
	border-width: 1px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
	}	

	
/*  carousel  */	
header.carousel {
    height: 100%;
	}
.carousel-caption{}
.carousel-caption a{
	position: absolute;
	right: 15%;
	height:75vh;
	bottom: 20px;
	left: 15%;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	}		

/* footer */
.footer{
	margin-top: 0;
	margin-bottom:10px;
	padding-top:10px;
	color:#000;
	}
.companylink{
	margin-top:10px;
	text-align:center;
	font-size:12px;
	color:#FFF;
	line-height:24px;
	}
.companylink img{
	width:30px; 
	height:30px;
	margin-left:15px;
	}	
.footer-copyirght{
	margin-top:20px;
	color:#999;
	font-size:12px;
	text-align:center;
	}	


/* spacing*/
.conarea{
	min-height:calc(100vh - 209px);
	}
.carea{
	padding-top:10px;
	padding-bottom:10px;
	}	
.content{
	padding-top:20px;
	padding-bottom:20px;
	}

/* aboutus */		
.aboutus{	
	min-height:30vh;
	margin-bottom:2vh;	
	}
.abouttable{
	font-size:16px;!important;
	}		

/*tablelist*/
#datatable {
	margin: 0 auto;
	font-size: 14px;
	border-collapse:collapse;
}
#datatable td, #datatable th 
  {
  font-size:1em;
  border:1px solid #000000;
  }	
#datatable th {
	background:#666;
	text-align:center;
	font-weight: bold;
	font-size: 14px;
	color:#FFF;
}
#datatable tr:nth-child(even) {
	background: #ffffff;
}
#datatable tr:nth-child(odd) {
	background: #E3E3E3;
}
	
/*  pagenum*/		
.page{
	text-align:center;
	text-decoration:none;
	}
.page a:hover{
    text-decoration:none;
	color:#337ab7;
}		
.wnum a{
	padding-left:4px;
	padding-right:4px;	
	color:#000;
	}		
.num a{
	padding-left:8px;
	padding-right:8px;
	color:#000;
	}	
.cnum{
	padding-left:8px;
	padding-right:8px;
	color:#FFF;
	background:#337ab7;
	border-radius:50%;
	}	

/*news */
.ndeteil{
	background:#FFF;
	padding-top:5px;
	padding-bottom:5px;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
	}
.ndeteil img{
	max-width:100% !important;
	height:auto !important;
	}			
.date{
	color:#FFF;
	}
.post-category,
.post-meta {
  display: inline-block;
  font-size: .8em;
}	
.post-category {
  display: inline-block;
  margin-left: -38px;
  margin-top:5px;
  padding: 6px 8px 8px;
  border-radius: 0 5px 5px 0;
  position: relative;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3);
  background: #337ab7;
  color:#FFF;
}
.post-category:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: #286090 #286090 transparent transparent;
  width: 0;
  height: 0;
}	
	
.ribbon{
	margin-bottom:5px;
	}

#EWORK{
	padding-top:60px;
	margin-top:-60px;
}
	


/* sidecss*/
.sidecss{
	font-size:14px;	
	margin-bottom:20px;
	}
.sidecss li {
	line-height:25px;
	}		
.sidecss a:hover{    
	color:#FC0;
	}	

/* productdetail */
.spic{
	margin-top:10px;
	margin-left:6px;
	margin-right:-15px;
	padding-right:1px;
	margin-bottom:10px;
	}	
.spic img{
	width:100% !important;
	height:10vh !important;
	}	
.Descr{
	color:#FFF;
	letter-spacing: 5px;
	}	
.Pinfo{
	font-size:16px;
	font-weight:bold;
	padding-bottom:5px;
	}
	
.Cattitle{
	padding:5px;
	margin-bottom:20px;
	position: relative;
	min-height: 1px;
	padding-right:12px;
	padding-left: 12px;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
	}
.ptitle{
	font-size:14px;
	height:60px;

	}
.picitem{
	position: relative;
	min-height: 1px;
	padding-right:8px;
	padding-left: 8px
	}
.picitem img{
	width:100%; !important
	height: 9vw !important;
	}
/* product */	
.mainitem img{
  width: 100% !important;
  height: 9vw !important;
	}		
			
.titleribbon {
  position: absolute;
  top: -6.1px;
  left:8px;
}
.titleribbon:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 73px solid transparent;
  border-right: 73px solid transparent;
  border-top: 10px solid #666;
}
.titleribbon span {
  position: relative;
  display: block;
  text-align: center;
  background: #666;
  font-size: 16px;
  line-height: 1;
  padding: 12px 8px 10px;
  border-top-right-radius: 8px;
  width: 146px;
  color:#fff;

}
.titleribbon span:before, .titleribbon span:after {
  position: absolute;
  content: "";
}
.titleribbon span:before {
 height: 6px;
 width: 6px;
 left: -6px;
 top: 0;
 background: #666;
}
.titleribbon span:after {
 height: 6px;
 width: 8px;
 left: -8px;
 top: 0;
 border-radius: 8px 8px 0 0;
 background: #333;
}
	

.bg-1{
	background:#39F;/*粉藍*/
	}
.bg-2{
	background:#CCF;/*粉紫*/
	}	
.bg-3{
	background:#FCF;/*粉紅*/
	}	
.bg-4{
	background:#0C3;/*粉綠*/
	}	
.bg-5{
	background:#FFC;/*粉黃*/
	}
.bg-6{
	background:#FC9;/*粉橙*/
	}
.bg-8{
	background:#337ab7;
	color:#FFF;
	}	
		
	
		
				
/* 小裝置 */
@media (max-width:768px) {
	/* CSS Document */
body {
    padding-top: 50px; 
}	
.navbar-header{
	height:50px;	
	}
.navbar-header img{
	margin:0 auto;
	height:18px;
	}	
.nav{	
	margin-top:0;
	}
.nav li a:link {	
	font-size:12px;
	font-weight:bold;
	}	
.navbar-default ul li a{
	text-align:center;
	width:100%;
	}	
/*  carousel  */	
header.carousel {
    height: 35%;
	}
/* footer */
.footer{
	margin-top: 0;
	margin-bottom:0;
	position: static;
	}
.companyname{
	font-size:12px;
	color:#000;
	text-align:center;
	padding-bottom:10px;
	}	
.companylink{
	margin-top:5px;
	width:100%;
	font-size:12px;
	color:#FFF;
	text-align:center;
	padding-bottom:10px;
	}
.companylink img{
	width:30px;!important
	height:30px;!important
	}	
.footer-copyirght{
	margin-top:10px;
	color:#999;
	font-size:10px;
	text-align:center;
	}
	
/* */
.conarea{
	margin-top:0px;
	min-height:0;
	}
	
/* aboutus */		
.aboutus{
	margin-top:1vh;
	margin-bottom:1vh;
	}
.abouttable{
	font-size:12px;!important;
	}		

/* product */	
.mainitem img{
  width: 100% !important;
  height: 25vw !important;
	}	
.content img{
	max-width:100% !important;
	height:auto !important;
	}	
				
.Descr{
	color:#FFF;
	}	
.Descr td {
	font-size:10px;
	line-height: 20px;
}
.tspacing{
	padding-bottom:15px;
	}	
.descrcss img{
	width:90%;
	}
.descrcss{
	padding-left:2rem;
	}
#Des img{
	max-width:100% !important;
	height:auto !important;
	}
.spic img{
	width:100% !important;
	height:6vh !important;
	}			


/* content  video*/			
.videoset{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.videoset iframe,

.videoset object,

.videoset embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}		

/* productdetail */
.pinfo{
	font-size:16px;
	}
.ptitle{
	padding-top:10px;
	font-size:12px;
	}				
.panel-heading{
	padding: 5px ;
	font-size:12px;
	}	
	
#datatable {
	font-size: 12px;
	border-collapse:collapse;
}
#datatable th {
	font-size: 12px;
}

.ribbon{
	margin-top:-5px;
	margin-bottom:5px;
	}
h3{
	font-size:16px;
	}				
			
}	


/* 中裝置 */
@media (min-width: 769px) and (max-width: 1199px) {
body{
	padding-top: 60px; 
	}	
.panel-heading{
	padding: 5px ;
	font-size:12px;
	}
	
/* header-nav */
.navbar-header{	
	font-size:16px;
	min-height:40px;	
	}
.navbar-header img{
	margin-top:5px;
	height:25px;
	
	}	
.nav li a:link {	
	font-size:14px;
	}		
		
/*  carousel  */	
header.carousel {
    height: 100%;
	}

/* footer */
.footer{
	margin-top: 0;
	margin-bottom:5px;
	padding-top:10px;
	}
.companylink{
	text-align:center;
	font-size:12px;
	color:#FFF;
	line-height:24px;
	}
.footer-copyirght{
	margin-top:10px;
	color:#999;
	font-size:12px;
	}


/* */
.conarea{
	min-height:calc(100vh - 186px);
	}	
/* aboutus */		
.aboutus{
	margin-bottom:2vh;
	}	
.abouttable{
	font-size:12px;!important;
	}	
			
/* content  video*/			
.videoset{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.videoset iframe,

.videoset object,

.videoset embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}	
	
/* sidecss*/
.sidecss{
	font-size:12px;	
	margin-bottom:20px;
	}
	
/* product */	
#Des img{
	max-width:80% !important;
	height:auto !important;
	}	
.mainitem{
	margin:0;
	padding:0;
	padding-left:5px;
	padding-right:5px;
	margin-bottom:15px;
	}
.mainitem img{
	width:100%	!important;
	height: 9vw !important;
}

.newsBlock{
	font-size:12px;

	}	
.newsTitle{
	font-size:14px;
	font-weight:bold;
	}	


.post-category {
  padding: 6px 4px 8px;

}		
.ptitle{
	font-size:8px;
	}

h3{
	font-size:18px;
	}		
}

@media only screen and (min-device-width: 370px) and (max-device-width: 667px) and (orientation : portrait) { 

/*  carousel  */	
header.carousel {
    height: 28%;
	}	
} 
@media only screen and (min-device-width: 760px) and (max-device-width: 1024px) and (orientation : portrait) { 
.panel-heading{
	padding: 5px ;
	font-size:12px;
	min-height:75px;
	}		
/*  carousel  */	
header.carousel {
    height: 45%;
	}	
/* product */	
.mainitem img{
  width: 100% !important;
  height: 8vw !important;
	}	
}