@import "reset.css";
@import "layout.css";
@import "BreadCrumb.css";
@import "mosaic.css";
@import "tab.css";
@import "grid.css";
@import "scrollable.css";
@import "fileInput.css";

* {
	font-family:微軟正黑體,新細明體,"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	/*font-size:0.85em; /* 0.85*14px=約12px */
	line-height:1.4em;
	text-decoration:none;
	}
	
body{
	font-size:0.9em; /* 0.85*14px=約12px */
	color:#333333;
}
	
input[type=text],
input[type=password],
select,
textarea{
	border:1px solid #cecece;
	line-height:1.5em;
	height:1.5em;
}

textarea{
	height:80px;
}

textarea{
	width:99%;
	font-size:1em;
}

select{
	width:auto;
	font-size:1em;
	height:22px;
}

input[type=button]{
	background-color:#536d0d;
	border:0;
	padding:6px 15px;
	color:#FFFFFF;
	cursor:pointer;
}

input[type=button]:hover{
	background-color:#7f9a17;
}


input[type=button].greenL{
	background-color:#7f9a17;
	border:0;
	padding:6px 15px;
	color:#FFFFFF;
	cursor:pointer;
}

input[type=button].greenL:hover{
	background-color:#7f9a17;
}


input[type=button].bw{
	background-color:#888260;
	border:0;
	padding:6px 15px;
	color:#ffffff;
	cursor:pointer;
}

input[type=button].bw:hover{
	background-color:#7f9a17;
}

input[type=button] .small{
	width:12px;
	height:12px;
	padding:0;
}


img.iconImg{
	vertical-align:middle;
	margin-left:3px;
	cursor:pointer;
}



p{
	width:auto;
	}

.bg_grayL{
	background-color:#f6f6f6;
}
	
.bg_gray{
	background-color:#d5d5d5;
}

.bg_white{
	background:#ffffff;
}

.bg_green{
	background:#7f9a17;
}

.bg_grayD{
	background-color:#807878;
}

.bg_greenD{
	background:#163700;
}

.bg_brownD{
	background:#4e4731;
}

.textAlignRight{
	text-align:right;
}

.textAlignCenter{
	text-align:center;
}
	
/*------------------ top Header ------------------*/

.logoImg{
	 margin-top:18px;
	 float:left;
	 width:240px;
	 height:70px;
}

.topLink a:link,
.topLink a:visited{
	color:#4c8216;
}

.topLink a:hover,
.topLink a:active{
	text-decoration:underline;
	color:#4c8216;
}

.topLink span.spacer{
	margin:auto 5px;
}


.topNav li{
	margin:auto 6px;
	display:inline;
	width:auto;
	
}

.topNav li a:link,
.topNav li a:visited{
	font-size:1.05em;
	font-weight:bold;
	color:#666666;
	padding-bottom:3px;
}

.topNav li a:hover,
.topNav li a:active{
	color:#7f9a17;
	border-bottom:3px solid #7f9a17;
}

.topNav li#current{
	color:#7f9a17;
}

.topNav li#current a:link,
.topNav li#current a:visited{
	color:#7f9a17;
	padding-bottom:3px;
	border-bottom:3px solid #dddddd;
}
	


/*------------------ main Content ------------------*/
h4,h4.ule{
	color:#454141;
	font-weight:bold;
	font-size:1.1em; /* 1*14px=約14px */
	}
h4.ule{
	border-bottom:2px solid #696565;
	}


.tabsContent_block h4.ule{
	border-bottom:2px solid #b2b2b2;
	width:100%; 
	margin:auto;
	color:#868686;
	margin-top:30px;
	}


.login_link{
	width:96%;
	float:left;
	margin:20px 2%;
	display:inline;
}

.login_link span.spacer{
	margin:auto 4px;
}

.login_link a:link,
.login_link a:visited{
	color:#b3af97;
	line-height:24px;
}

.login_link a:hover,
.login_link a:active{
	color:#93b022;
	text-decoration:underline;
}

.login_link input[type=button]{
	float:right;
	vertical-align:middle;
	font-size:1em;	
}
	


.functionNav li{
	width:100%;
	height:49px;	
	margin-bottom:1px;
	background-color:#536d0d;
	text-align:center;
	color:#ffffff;
}

.functionNav div.item5 li{
	height:39px;
}

.functionNav li:hover{
	background-color:#7f9a17;
}

.functionNav li a:link,
.functionNav li a:visited{
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	line-height:49px;
	display:block; 
}

.functionNav li a:link,
.functionNav li a:visited,
.functionNav li a:hover,
.functionNav li a:active{
	line-height:39px;
}

.functionImgNav{
	width:200px;
	height:200px;
	float:left;
}

.newslist li{
	width:100%;
	margin:7px auto;
}


.newslist li a{
	color:#696565;
	
}

.newslist li a:hover{
	color:#4c8216;
}

.newslist li span.date{
	color:#4c8216;
	margin-right:10px;
	width:auto;
}


.imgNav_container h4{
	font-weight:bold;
	margin:5px 10px;
	color:#ffffff;
}


.imgNav_block{
	float:left;
	position:relative;
	width:100px;
	height:100px;
	margin-right:8px;
	border:2px solid #98ac33;
}



.imgNav_block img{
	width:100px;
	height:75px;	
}
	
.imgNav_block p.title{
	position: absolute; 
  	top: 75px;
	font-size:0.85em;
	height:25px;
	line-height:25px;
	width: 100%; 
   	left: 0; 
	background:#645d5d;
	color:#ffffff;
	text-align:center;
	cursor:pointer;
		}



.imgNav_block:hover{
	border:2px solid #645d5d;
	}
	
	
.prodImgNav_block{
	float:left;
	position:relative;
	width:120px;
	height:120px;
	margin-right:12px;	
}



.prodImgNav_block img{
	width:120px;
	height:120px;	
}
	
.prodImgNav_block p.title{
	position: absolute; 
  	top: 96px;
	font-size:0.85em;
	height:25px;
	line-height:25px;
	width: 100%; 
   	left: 1px; 
	background:#645d5d;
	color:#ffffff;
	text-align:center;
	cursor:pointer;
		}
	
.submenu{
 display:none;
 top:286px; 
 position:fixed; 
 background-color:#645d5d;
 z-index:9999999;
 width:104px;
 }
	
.submenu li{
	width:100%;
	color:#ffffff;
	border-top:1px solid #7b726a;
	font-size:0.85em;
	background:#645d5d;		 
}

.submenu li a:link,
.submenu li a:visited{
	display:block;
	color:#ffffff;
	height:2em;
	line-height:2em;
}

.submenu li a:hover,
.submenu li a:active{
	display:block;
	color:#ffffff;
	background:#312c2c;
}
	
.imgNav_block:hover .submenu{
	display:block;
	margin-left:-2px;
}

.helpLink{
	background-color:#7f9a17;
	width:100px;
	height:25px;
	line-height:30px;
	text-align:center;
	position:relative;
	float:left;
	z-index:99999;
	padding-top:6px;
}



.helpLink a:link,
.helpLink a:visited{
	color:#ffffff;
	
	
}

.helpLink a:hover,
.helpLink a:active{
	color:#ffffff;
}

ul.helpItem{
	background-color:#7f9a17;
	width:100px;
	border-top:0;
	}
	
ul.helpItem li{
	width:100%;
	font-size:0.85em;
	background:#7f9a17;
	border:0;
	line-height:30px;
	height:30px;	
}

.helpItem li a:link,
.helpItem li a:visited{
	display:block;
	color:#ffffff;
	background:#7f9a17;
	line-height:30px;
	height:30px;
}

.helpItem li a:hover,
.helpItem li a:active{
	color:#ffffff;
	text-decoration:underline;
	
}

.tabs div.helpLink:hover .helpItem{
	display:block;
}


.categoryLink_block{
	width:auto;
	float:left;
	margin-left:10px;
	margin-right:5px;
}

.categoryLink_block p{
	width:14px;
	height:auto;
	padding:10px;
	background-color:#645d5d;
	color:#ffffff;
}

.categoryLink_block p a:link,
.categoryLink_block p a:visited{
	color:#ffffff;
}
	
.imgNav_block#current{
	border:2px solid #fff;
}

.imgNav_block#current p.title{
	background:#fff;
	color:#645d5d;
}







.detailTitle{
	color:#ffffff;
	font-size:1em;
	font-weight:bold;
	line-height:3em;
	width:88%;
	margin:auto;
}

.detailFig{
	font-size:.80em;
	text-align:center;
	line-height:2em;
	color:#ffffff;
}

.imgFig{
	text-align:right;
}
	
	

.detailImgB{
	width:240px;
	margin:auto;
	height:180px;
	overflow:hidden;
}

.detailImgB img{
	width:240px;	
	height:auto;
}

.detailImgS{
	width:60px;
	height:60px;
	margin:auto;
	overflow:hidden;
	border:1px solid #645d5d;
}

.detailImgS img{
	width:60px;
	height:60px;
}


.prodFuncImg img{
	width:74px;
	height:56px;
	float:left;
	margin:2% 1%;
}


.prodImgSlider img{
	width:120px;
	height:120px;
	float:left;
	margin-right:20px;
}




.dsCategoryImg_block{
	float:left;
	position:relative;
	width:230px;
	height:180px;
	margin-right:10px;
	border:2px solid #98ac33;
	overflow:hidden;
}



.dsCategoryImg_block img{
	width:100%;
	height:auto;	
}
	
.dsCategoryImg_block p.title{
	position: absolute; 
  	top: 140px;
	height:40px;
	line-height:40px;
	width: 100%; 
   	left: 0; 
	background:#645d5d;
	color:#ffffff;
	text-align:center;
	cursor:pointer;
		}



.dsCategoryImg_block:hover{
	border:2px solid #645d5d;
	}

p.desc{
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	border-bottom:2px solid #696565;
	border-top:2px solid #696565;
}


.messageboard{
	font-size:0.85em;
}

.messageboard input[type=button]{
	font-size:1em;
}

.messageboard .mainQuestion{
	width:96%;
	margin:auto;
	background-color:#ffffff;
	padding:10px;
	box-sizing: border-box;
	margin-bottom:2%;
	border:1px solid #7f9a17;
}

.messageboard .questionType{
	color: #7f9a17;
}

.messageboard .time{
	text-align:right;
	font-size:90%;
	color:#7f9a17;
	width:96%;
	margin:auto;
}

.messageboard .feedback{
	width:90%;
	background-color:#ffffff;
	padding:10px;
	box-sizing: border-box;
	margin:1% auto;
	float:left;
	margin-left:2%;
	border-right:3px solid #7f9a17;
}

.messageboard .ask{
	width:90%;
	margin:auto;
	background-color:#ffffff;
	padding:10px;
	box-sizing: border-box;
	margin:1% auto;
	float:right;
	margin-right:2%;
	border-left:3px solid #7f9a17;
	}
	
.pager{
	width:96%;
	margin:auto;
	font-size:0.86em;
	margin-top:2%;
	text-align:center;
}

.pager input[type=button]{
	border:1px solid #dddddd;
	color:#666666;
	background:none;
	padding:3px 5px;
}

.pager input[type=button]:hover{
	border:1px solid #7f9a17;
	background:#7f9a17;
	color:#ffffff;
}

.flowChart{
	width:80%;
	margin:auto;
	margin-top:5%;
}

.flowChart .item{
	width:100%;
	border:1px solid #7f9a17;
	background-color:#ffffff;
	color:#4c8216;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
}

.flowChart .arrow{
	width:100%;
	text-align:center;
	padding:auto 10px;
}

.note{
	font-size:1em;
	color:#4c8216;
}

ul.functionLink{
	margin:2%;
}

.functionLink li a:link,
.functionLink li a:visited{
	color:#4c8216;
}

.functionLink li a:hover{
	text-decoration:underline;
}

.functionLink li ul{
	margin-left:10%;
}

.mustFill{
	color:#7f9a17;
	font-size:1.5em;
	font-weight:bold;
}
 
img.captcha{
	width:80px;
	height:24px;
	vertical-align:middle;
}