@import url(fix.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,500,700,300,100);
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-基礎*/


.top .range{
	padding-top: 20px;
	padding-bottom: 20px;
	background: url(../images/img02.png) 50% 0 no-repeat, url(../images/img03.png) 100% 100% no-repeat;
}
.top .left{
	width: 20%;
}
.top .right{
	width: 80%;
}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-主選單*/
nav{
	background: linear-gradient(to bottom, rgba(58,91,158,1) 0%,rgba(42,79,153,1) 50%,rgba(33,71,146,1) 51%,rgba(30,63,132,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #fff;
	border-top: groove 2px #6A84B7;
}
#navMenu{
	width: 1000px;
	margin:0 auto;
	background: none;
}
#navMenu li a{
	padding-top: 15px;
	padding-bottom: 15px;
}
#navMenu > li + li{
	background: none;

}
#navMenu > li + li > a{
	margin-left: 0;
}
#navMenu > li > a{
	border-left: solid 1px rgba(255, 255, 255, 0.3);
	border-right: solid 1px rgba(0,0,0,0.3);
	text-shadow: 1px 1px 0 #000;
	text-transform: uppercase;
}
#navMenu > li:first-child > a{
	border-left: groove 2px #6A84B7;
}
#navMenu > li:last-child > a{
	border-right: groove 2px #6A84B7;
}
#navMenu > li:hover > a{
	border-radius: 0;
	color: inherit;
	background: #214787;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-主選單*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-banner*/
.banner .flex-control-paging li a{
	background: #DCDCDC;
}

.banner .flex-control-paging li a.flex-active{
	background: #22448C;
}

.flex-direction-nav a:before{
	color: #22448C;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-banner*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁首-搜尋列*/
#search_form{
	border-radius: 3px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁首-搜尋列*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁尾-基礎*/
.bottom{
	background: #20448E;
	padding-top: 5px;
	padding-bottom: 0;
}
.bottom .area01{
	border-top: solid 1px #406DB8;
	background: url(../images/img04.png) 0 0 repeat ,linear-gradient(to bottom, rgba(45,94,176,1) 0%,rgba(36,76,152,1) 100%);
	padding-top: 20px;
	padding-bottom: 20px;

}
.bottom .area01 .left{
	width: 80%;
}
.bottom .area01 .right{
	width: 20%;
	text-align: right;
}
.bottom .area02{
	border-top: solid 1px #2C539E;
	padding-top: 10px;
	padding-bottom: 10px;
	background: url(../images/img04.png) 0 0 repeat ,linear-gradient(to bottom, rgba(21,48,102,1) 0%,rgba(28,64,137,1) 6%,rgba(21,53,104,1) 100%);
}
.bottom .area02 .left{
	width: 80%;
}
.bottom .area02 .right{
	width: 20%;
	text-align: right;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁尾-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁尾-聯絡我們*/
.info li{
	margin-bottom: 0.2em;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁尾-聯絡我們*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-基礎*/
.middle{
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 10px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding-top: 1.2em;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-左選單*/
.colSide{
	width: 260px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	border-radius: 5px 5px 10px 10px;
	overflow: hidden;
}
.colSide h4{
	background: url(../images/img05.png)  0 0 no-repeat;
	padding: 15px;
	padding-bottom: 15px;
	text-align: center;
}
.colSide h4:before{
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(../images/img06.png) 50% 50% no-repeat;
	padding-right: 19px;
	margin-left: -35px;
}

.sideCate{
	background: #F0F0F0;
}
.sideCate > li > span > a[title]{
	padding-left: 50px;
}
.sideCate > li > span > a.tree{
	width: 50px;
	text-align: center;
}
.sideCate li ul{
	padding-left: 50px;
}

.sideCate > li > span > a.tree:before{
	content: '\f067';
}

.sideCate > li.active > span > a.tree:before{
	content: '\f068';
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-左選單*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>頁中-產品列表*/
.productGrid .proList .img{
	box-shadow: 0 0 3px rgba(0,0,0,0.2)
}
.productGrid .proList .txt{
	margin-top: 0.3em;
}
.productGrid .proList h3{
	text-align: left;
}
.productGrid .proList h3 a:before{
	content: '';
	display: inline-block;
	background: url(../images/img08.png) 0% 0% no-repeat;
	width: 10px;
	height: 10px;
	padding-right: 5px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<頁中-產品列表*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-情境圖*/
.index .banner{
	padding-bottom: 10px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-情境圖*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-基礎*/
.index .middle{
	padding-top: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.index .middle .range{
	background: #fff;
}
.index .bottom{
	margin-top: 0;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-基礎*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-區塊1*/

.index .s1{
	padding-bottom: 3em;
}
.index .s1:after{
	content: '';
	display: block;
	clear: both;
}
.index .s1 .block{
	display: block;
	width: 320px;
	height: 200px;
	float: left;
	margin-bottom: 10px;
	position: relative;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}


.index .s1 .block:before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	z-index: 2;
}
.index .s1 .block:first-child:before{
	background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.index .s1 .block .image img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
.index .s1 .block .text{
	text-align: center;
	color: #fff;
	background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.2) 5%,rgba(0,0,0,0.2) 80%,rgba(0,0,0,0.4) 100%) ,#DEE127;
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 3;
}
.index .s1 .block:nth-child(odd) .text{
	background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.2) 5%,rgba(0,0,0,0.2) 80%,rgba(0,0,0,0.4) 100%) ,#A9DD0A;
}

.index .s1 .block .text h3{
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 20px 15px;
	font-weight: normal;
}

.index .s1 .block:hover{
	opacity: 1;
}
.index .s1 .block:hover:before{
	background: none;
}
.index .s1 .block:hover .text{
	background: rgba(0,0,0,0.3);
	transition: 0.3s;
}

.exception h3{
	width: 200px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	/*background: url(../images/img09.png) 0 0 no-repeat;*/
	background: #22448C;
	color: #fff;
	font-weight: normal;
	margin-top: 20px;
	margin-left: -3px;
}
.exception h3:before{
/*	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url(../images/img10.png) 0 0 no-repeat;
	padding-right: 15px;
	margin-left: -27px;*/
}
.exception p{
	margin-top: 16px;
	padding: 0 20px;
	height: 96px;
	overflow: hidden;
	
	/*add by hank for~ 首頁關於我們樣式修改*/
	color: #b1b1b1;
    font-size: 14px;
	line-height: 20px;
	
	/*text-align: justify;
	text-justify:inter-ideograph;*/
}
.exception span{
	color:#59c4a8;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-區塊1*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>首頁-熱門產品*/
.index .s2{
	position: relative;
	width: 1920px;
	left: 50%;
	margin-left: -960px;
	padding: 50px 0;
	border-top: #E7E7E7 solid 1px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%,rgba(0,0,0,0) 10px,rgba(0,0,0,0.15) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.proSlider{
	width: 1000px;
	margin: 0 auto;
}

.proSlider .flexslider{
	background: none;
	padding-bottom: 0 !important;
}

.proSlider a.imgBorder{
	display: block;
	width: 160px;
	height: 160px;
	margin: auto;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	margin-top: 5px;
	padding: 3%;
	background: #fff;
}
.proSlider .flexslider .slides img{
	max-width: 94%;
	max-height: 94%;
	/*padding: 5px;*/
}
.proSlider .anli_box_title{
	width: 160px;
	margin: 1em auto 0;
	margin-top: 1em;
	text-align: left;
	display: block;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}

.proSlider .anli_box_title:before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(../images/img08.png) 0% 0% no-repeat;
	padding-right: 8px;
}

.proSlider .flex-control-nav{
	display: none;
}
.proSlider .flexslider a.flex-prev{
	left: -40px;
}
.proSlider .flexslider a.flex-next{
	right: -40px;
}
.proSlider .flexslider:hover a.flex-prev{
	left: -20px;
}
.proSlider .flexslider:hover a.flex-next{
	right: -20px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<首頁-熱門產品*/