@import url(fix.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,500,700,300,100);
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>全站基礎*/
body {
	opacity: 1;
}
.range,
.breadcrumb,
.banner .flex-direction-nav {
	width: 1100px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<全站基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-基礎*/
.top{
	background: #000;
	color: #fff;
	padding-top: 10px;
}

.top .left{
	width: 20%;
}

.top .right{
	width: 80%;
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-網站功能列*/
/*基礎*/
.webFunction li{
	font-size: 14px;
}
/*
.webFunction > li + li{
	border-left: solid 1px #fff;
	padding-left: 8px;
}*/
/*基礎*/
/*搜尋列*/
#search_form{
	background: #404040;
	color: #fff;
	border-color: transparent;
}
/*搜尋列*/
/*語言列*/
.dd{
	border: none !important;
	width: 110px !important;
}
.dd .divider{
	display: none;
}
.dd .ddTitle{
	background: none !important;
}
/*語言列*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-網站功能列*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-主選單*/
nav{
	margin-top: 2.5em;
}

#navMenu{
	background: none;
}

.sf-arrows .sf-with-ul:after{
	display: none;
}

#navMenu > li + li{
	background: none;
}

#navMenu > li + li > a{
	margin-left: 0;
}

#navMenu > li:hover > a {
	color: #fff;
	background: #333;
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.3) inset;
	border-radius: 0;
}
#navMenu li li a{
	color: #000;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-主選單*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁尾-基礎*/
.bottom{
	padding-bottom: 0;
	font-size: 14px;
	background: url(../images/img02.png) 0 0 repeat;
}
.bottom .area02{
	padding-top: 15px;
	border-top: solid 2px rgba(255,255,255,0.5);
	display: flex;
	justify-content: space-between;
}
.bottom .area02 .left .title{
	font-size: 120%;
	color: #3EC5E2;
	margin-bottom: 6px;
	font-weight: 900;
}
.bottom .area02 .left{
	width: 60%;
	display: flex;
}
.bottom .area02 .right{
	width: 40%;
	text-align: right;
}


.bottom .area03{
	text-align: center;
	background: #1f1f1f;
	padding: 0.8em 0;
	margin-top: 1em;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁尾-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁尾-選單*/
._nav_bottom > li > label{
	font-weight: 900;
	font-size: 120%;
	color: #3EC5E2;
	border-color: rgba(255,255,255,0.5);
	padding-bottom: 5px;
	margin-bottom: 5px;
}

._nav_bottom > li{
	margin-bottom: 15px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁尾-選單*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁尾-Qrcode*/
#qrcode {
	margin-left: 15px;
}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁尾-Qrcode*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-基礎*/
.colSide{
	width: 320px;
}
.colMain{
	width: 750px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-左選單*/
.colSide h4{
	color: #000;
	padding: 50px 20px 20px;
	font-size: 150%;
	background: url(../images/img01.png) 0% 75% no-repeat;
}
.sideCate{
	border-width: 0 1px 1px 1px;
	border-color: #D8D8D8;
	border-style: solid;
}
.sideCate li:last-child{
	border-bottom: none;
}
.sideCate > li > span > a.tree{
	text-align: center;
	width: 40px;

}
.sideCate > li > span > a[title]{
	padding-left: 40px;
}
.sideCate li ul{
	padding-left: 40px;
}


.sideCate > li > span:hover{
	background: #595959	;
	color: #fff;
}
.sideCate > li > span a:hover{
	opacity: 1;
}
.sideCate > li > span > a.tree:before{
	content: '\f054';
}
.sideCate > li.active > span > a.tree:before{
	content: '\f078';
}
.sideCate > li:hover > span > a.tree:before{
	color: #00B7E7;
}
.sideCate > li.active > span{
	background: #595959	;
	color: #fff;
}
.sideCate > li.active > span a{
	opacity: 1;
}
.sideCate > li.active > span > a.tree:before{
	color: #00B7E7;
}
.sideCate li ul{
	background: #eee;
	margin-bottom: 0;
}
.sideCate li ul li span a{
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-左選單*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-右半邊標題*/
h2.menuTitle{
	border-bottom: solid 1px #BFBFBF;
	font-size: 150%;
}
h2.menuTitle:before{
	content: '\f054';
	color: #00B7E7;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-右半邊標題*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-產品列表*/
.productGrid .proList .img{
	/*border-radius: 0;*/
	/*border-color: #CBCBCB;*/
	/*border-bottom: none;*/
	border:none;
}
.productGrid .proList .txt{
	/*background: #898989;*/
	background: none;
	/*color: #fff;*/
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}
.productGrid .proList:hover a{
	opacity: 0.8;
}
.productGrid .proList:hover .img{
	border-color: #00B3DC;
}

.productGrid .proList:hover .txt{
	/*background: #00B3DC;*/
	color: #00B3DC;

}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-產品列表*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-段落1*/
.index .s1 {
	margin-top: 2em;

}
.index .s1:after{
	content: '';
	display: block;
	clear: both;
}
.index .s1 .block{
	display: block;
	position: relative;
	float: left;
	text-align: center;
	margin-bottom: 2em;
	width: 225px;
	height: 150px;
}

.index .s1 .block:before{
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: rgba(0,0,0,0.5);
	z-index: 10;
	transition: opacity 0.3s 0s;
}


.index .s1 .block .image{
	position: relative;
	height: 100%;
}
.index .s1 .block .image img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
.index .s1 .block .text{
	color:#fff;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	font-size: 1.4em;
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.index .s1 .block:hover:before{
	opacity: 0;
}
.index .s1 .block:hover .text{
	color: #000;
	text-shadow: 1px 1px #fff,-1px 1px #fff,1px -1px #fff,-1px -1px #fff;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-段落1*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-段落2*/
.index .s2 {
	margin-top: 4em;
}

.index .s2 .title{
	text-align: center;
	margin-bottom: 2em;
	font-size: 1.8em;
}

.index .s2 h4{
	/*
	word-wrap: break-word;
	word-break: break-all;
	*/
}

.index .s2 .contain{
	/*border-width: 1px;*/
	/*border-style: solid;*/
	/*border-color: transparent #c6c6c6 #c6c6c6 transparent;*/
}

.index .s2 .contain:after{
	content: '';
	display: block;
	clear: both;
}
.index .s2 .block{
	display: block;
	position: relative;
	float: left;
	text-align: center;
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	margin-bottom: 2em;
	/*border-color: #c6c6c6 transparent #c6c6c6 #c6c6c6;*/
	border-color: #c6c6c6;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
/*.index .s2 .block:nth-child(4n){
	border-right-color: #c6c6c6;
}
.index .s2 .block:nth-child(n+5){
	border-top-color: transparent;
}*/

.index .s2 .block > div{
	width: 230px;
	margin: 0 auto;
}

.index .s2 .block .text{
	padding: 0.2em 0;
}

.index .s2 .block .image{
	position: relative;
}
.index .s2 .block .image img{
	/*
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	*/
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-段落2*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-段落3*/
.index .s3 {
	margin-top: 20px;
}

.index .s3 .area{
	width: 50%;
	float: left;
	padding: 0 15px;
	box-sizing: border-box;
}
.index .s3 .title{
	display: block;
	border-bottom: solid 2px #000;
	position: relative;
}
.index .s3 .title h3{
	font-size: 1.6em;
}
.index .s3 .title span{
	display: inline-block;
	padding: 2px 8px;
	background: #000;
	color: #fff;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.index .s3 .contain{
	margin-top: 15px;
}
/*區塊1*/
.index .s3 .hotnews li{
	letter-spacing: -0.31em;
}
.index .s3 .hotnews li + li{
	margin-top: 15px;
}
.index .s3 .hotnews li a > *{
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
}
.index .s3 .hotnews .img{
	width: 20%;
	height: 80px;
	position: relative;
	/*background: #999;*/
}
.index .s3 .hotnews .txt{
	margin-left: 3%;
	width: 77%;
}
.index .s3 .hotnews .img img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.index .s3 .hotnews .txt p{
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/*區塊1*/
/*區塊2*/
.index .s3 .customer{
	position: relative;
}

.index .s3 .customer .v-middle{
	/*height: 300px;*/
}
.index .s3 .customer .v-middle > *{
	width: 100%;
}

.index .s3 .customer .block{
	/*width: 33.33%; by hank*/
	width:100%;
	float: left;
	height: 150px;
	position: relative;
}

.index .s3 .customer .block img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 5px;
	box-sizing: border-box;
}
/*區塊2*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-段落3*/