@charset "utf-8";
body{
	color: #222222;
	line-height: 160%;
	margin: 0;
	font-size: 11px;
	font-family: "新細明體", "細明體", Arial;
}

a{
	color: #425a76;
	text-decoration: none;
	outline: none;
}

a:hover{
	text-decoration: underline;
}

img{
	border: none;
}

p{
	margin: 0 0 15px 0;
}

hr{
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #ffffff;
	border-left: none;
	border-right: none;
	margin: 0 0 10px 0;
	#margin: 0;
	padding: 10px;
	clear: both;
	position: relative;
}

h1{
	color: #32597a;
	font-size: 13px;
	font-weight: bold;
	margin: 15px 0 15px 0;
	padding: 0 0 0 9px;
	background: url(../img/bullet.jpg) no-repeat left 7px;
}

h1.years {
	font-family: Arial, Helvetica, sans-serif;
	color: #32597a;
	font-size: 13px;
	font-weight: bold;
	margin: 15px 0 15px 0;
	padding: 0 0 0 9px;
	background: url(../img/bullet.jpg) no-repeat left 7px;
} 

h1.eng_text {
	font-family: Arial, Helvetica, sans-serif;
	color: #32597a;
	font-size: 13px;
	font-weight: bold;
	margin: 15px 0 15px 0;
	padding: 0 0 0 9px;
	text-align: left;
	background: url(../img/bullet.jpg) no-repeat left 7px;
}
	

/*------------layout css---------------*/
#container {
	width: 900px;
	margin: 0 auto;
	position: relative;
}

#header {
	width: 900px;
	text-align: right;
}

#header img{
	float: left;
}


#language{
	font-family: Arial, Helvetica, sans-serif;
	float: right;
	font-size: 11px;
	height: 15px;
}

#left_nav{
	width: 190px;
	float: left;
	min-height: 300px;
	position: relative;
}

#left_nav form{
	width: 170px;
	margin: 5px 0 0 0;
}

#left_nav select{
	width: 170px;
	height: 21px;
	margin: 2px 0;
	font-size: 13px;
}

#left_nav input{
	width: 55px;
	height: 22px;
	font-size: 13px;
	float: right;
	margin: 5px 0 0 0;
	padding: 0 0 5px 0;
	#padding: 0 0 0 0;
}

#bg{
	width: 900px;
	_width: 910px;
	background: url(../img/left_bg.jpg) top left repeat-y;
	position: relative;
	float: left;
}

#footer{
	width: 895px;
	color: #ffffff;
	font-size: 11px;
	background: #333333;
	clear: both;
	line-height: 20px;
	margin: 0 auto;
	padding: 1px 0 3px 5px;
}

#slogan{
	width: 542px;
	height: 138px;
	margin: 10px 0 10px 10px;
	float: right;
}

#flash{
	margin:0;
}


#main_nav{
	width: 710px;
	float: left;
	position: relative;
}

#site_path{
	width: 670px;
	height: 25px;
	font-size: 12px;
	color: #555555;
	background: url(../img/path_bg.jpg) bottom left repeat-x;
	margin: 0 20px 10px 20px ;
}

#site_path a{
	color: #555555;
}

#banner{
	width: 670px;
	height: 110px;
	margin: 0 auto 20px auto;
}

#subpage_content{
	width: 660px;
	margin: 20px auto 30px auto;
	text-align: justify;
}

#main_login{
	margin: 10px 0;
	background:url(../img/main_login_bg.jpg);
	width: 329px;
	height: 139px;
	float: left;
	position: relative;
}
#main_login input{
	height: 15px;
}

#main_login #sign_title{
	position: absolute;
	margin: 10px;
	width: 100px;
	clear: both;
}

#main_login #sign_name{
	position: absolute;
	right: 95px;
	top: 45px;
	color: #ffffff;
}

#main_login #sign_password{
	position: absolute;
	right: 95px;
	top: 80px;
	color: #ffffff;
}
#main_login #sign_btn{
	position: absolute;
	right: 10px;
	color: #ffffff;
	bottom: 36px;
}

#career_details{
	width: 640px;
}

#career_details_head{


}

#career_details_title{
	background: url(../img/career_title_bg.jpg) no-repeat top left;
	color: #ffffff;
	font-size: 18px;
	line-height: 40px;
	text-align: center;
}

#career_details .content{
	padding: 10px;
}

#career_details .content2{
	background: #cccccc;
	padding: 10px;
	height: 150px;
}

#career_details .content2 ul, #career_details .content2 li{
	margin: 0 0 0 -20px;
	_margin: 0;
	#margin: 0;
	list-style: none;
}

.right{
	float: right;
}

.top_btn{
	width: 54px;
	height: 22px;
	float: right;
	margin: 10px 25px 10px 0;
	position: relative;

}


/*---left content container---*/
#left_nav .left_content{
	width: 170px;
	padding: 10px;
	margin: 0;
	border-bottom: 1px solid #cccccc;
	float: left;
	position: relative;
}

#left_nav .left_content p{
	margin: 4px 0 5px 0;
	*margin: 0px 0 5px 0;
	line-height: 130%;
}

#left_nav .left_content_outter{
	border-bottom: 1px solid #ffffff;
	margin: 0 0 8px 0;
	_margin: 0 0 0 0;
	_padding: -20px 0 0 0;
	float: left;
	position: relative;
}

#left_nav #space{
	height: 150px;
	border-top: 1px solid #ffffff;
	width: 190px;
	position: relative;
	margin: -9px 0 0 0;
	_margin: -1px;
	float: left;
}
/*---left_menu---*/
#submenu{
	position: relative;
	margin: 0;
	float:left;
}

#submenu a{
	color: #333333;
}

.sub_active{
	#background: url(../img/arrow_blue.gif) no-repeat 2px left;
	background: url(../img/arrow_blue.gif) no-repeat 1px 2px;
	position: relative;
}

#submenu ul{
	margin: 0;
	float: left;
}

#submenu li{
	font-size: 13px;
	font-weight: bold;
	color: #333333;	
	margin: 10px 5px 10px -40px;
	#margin: 10px 5px 10px 0;
	padding: 0 0 0 10px;
	line-height: 13px;
	list-style: none;
}
/*---end---*/

#content_title{
	width: 656px;
	color: #ffffff;
	font-size: 15px;
	font-weight:bold;
	padding: 0 0 0 4px;
	background: url(../img/title_bar.jpg) no-repeat top right #425b76;
	height: 24px;
	line-height: 24px;
	margin: 0 auto;
}

#content_title img{
	padding: 3px;
}

#content_area{
	width: 640px;
	padding: 10px;
	background: #f0f0f0;
	margin: 0 auto 20px auto;
}

#content_area2{
	width: 640px;
	padding: 10px;
	margin: 0 auto 20px auto;
}


#content_area_contact{
	width: 500px;
	padding: 10px;
	background: #f0f0f0;
	margin: 0 0 20px 0;
}

#history{
	width: 640px;
	padding: 10px;
	margin: 0 auto 20px auto;
}

#history p{
	float: right;
	width: 550px;
	padding: 0 10px;
}

#history h1{
	float: left;
	width: 60px;
	margin: 0 0 0 0;
}

#bobcontent1-title,#bobcontent2-title{
	width: 400px;
	color: #32597a;
	font-size: 11px;
	font-weight: bold;
	margin: 10px 0 10px 0;
	text-decoration: underline;
	cursor:pointer;
}

.about_sub_btn{
	width: 217px;
	height: 79px;
	float: left;
	margin: 0 3px 10px 0;
}

/*---------product menu (from lv2) css--------*/
#product_menu{
	width: 666px;
	color: #666666;
	margin: 0 20px;
	border: 1px solid #ccd1d6;
	float: left;
	_float: none;
}

#product_menu .list{
	background:url(../img/product_menu_bullet.jpg) no-repeat 10px center;
	float: left;
	width: 205px;
	padding: 5px 0 5px 17px;
}

#product_menu #title_bar{
	width: 666px;
	color: #333333;
	background: #ccd1d6;
	height: 22px;
	line-height: 22px;
	font-size: 15px;
	font-weight: bold;
}

#product_menu #title_bar p{
	margin: 0 0 0 5px;
}
/*-----------end------------*/

/*--------product list photo css------------*/
.product_container{
	width: 140px;
	border: 1px solid #cccccc;
	float: left;
	margin: 0 0 10px 18px;
	_margin: 0 0 10px 12px;
}

.product_id{
	width: 140px;
	height: 22px;
	_height: 18px;
	vertical-align: bottom;
	background: url(../img/pro_id_bg.jpg) left top repeat-y;
}

.product_id a,.product_id a:active,.product_id a:hover{
	color: #ffffff;
	width: 140px;
	display: block;
	height: 22px;
	_height: 18px;
}

.product_id a p,.product_id_lv2 a p{
	margin: 1px 0 0 4px;
}

.product_id_lv2 a p img{
	padding: 0 5px 0 0;
}

.product_id a p img{
	padding: 0 5px 0 0;
}

.product_id a:hover{
	background: url(../img/pro_id_bg2.jpg) left top repeat-y;
}

.product_container_lv2{
	width: 140px;
	float: left;
	margin: 0 0 10px 18px;
	
	_margin: 0 0 10px 12px;
}

.product_container_lv2 .outline{
	width: 140px;
	border: 1px solid #cccccc;
}

.product_id_lv2 a,.product_id_lv2 a:active,.product_id_lv2 a:hover{
	color: #425b76;
	width: 140px;
	display: block;
	height: 18px;
}

.dot_line{
	background:url(../img/dot.jpg) repeat-x;
	width: 635px;
	_width: 615px;
	height: 5px;
	margin: 0 10px 15px 10px;
	float: left;
	position: relative;
}

.active{
	text-decoration: underline;
}

.pic_right{
	float: right;
	margin: 0 0 0 10px;
}

.pic_left{
	float: left;
	margin: 0 10px 0 0;
}

.clear{
	clear: both;
}
/*------------end-----------*/


/*------------paging css----------*/
.listing_paging{
	width: 624px;
	height: 20px;
	text-align: right;
	margin: 15px auto 0 auto;
	clear: both;
	color: #425b76;
}

.listing_paging_result{
	font-size: 13px;
	font-weight: bold;
	height: 20px;
	float:left;
}

.listing_paging_no{
	height: 20px;
	float: right;
}

.paging{
	width: 664px;
	height: 20px;
	margin: 20px;
	clear: both;
	float: left;
	#float: none;
	color: #425b76;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

.paging2{
	width: 664px;
	height: 30px;
	margin: 20px auto;
	clear: both;
	color: #425b76;
}

.paging_go{
	margin: 0;
	width: 150px;
	height: 20px;
	float: left;
	left: 30px;
	top:0;
}

.paging_go2{
	width: 45px;
	margin: 3px 0;
	float: left;
	position: relative;
}

.paging_go select,.paging_go form{
	height: 20px;
	margin: -15px 0 0 30px;
	clear: none;
}
.paging_result{
	height: 20px;
	float:left;
}

.paging_form{
	height: 20px;
	width: 50px;
	float: left;
}

.paging_end {
	margin: 3px 0;
	float: left;
	position: relative;
	}

.paging_no{
	height: 20px;
	float: right;

}

.paging_no2{
	height: 20px;
	float: right;
	margin: 0;
	position: relative;
	clear: right;
}

#form2{
	width: 50px;
}

#career_table td{
	padding: 5px 0 5px 8px;
}

.career_title{
	font-size: 13px;
	font-weight:bold;	
	color: #ffffff;
}
/*----------end----------*/

/*----------sign in----------*/
/*---subpage sign in---*/
#sign_in{
	background: url(../img/title_bar.jpg) no-repeat top right #33526f;
	color: #ffffff;
	font-size: 13px;
	width: 190px;
	position: relative;
	padding: 1px 0;
	float: left;
	border-bottom: 1px #ffffff solid;
}

#sign_in #welcome{
	width: 115px;
	padding: 2px 0 0 5px;
	float:left;
}

#sign_in img{
	margin: 4px 3px 2px 0;
	float: right;
	position: relative;
}

#sign_btn{
	position: absolute;
	right: 40px;
	bottom: 10px;
}
/*---sign in page---*/
#welcome2{
	width: 190px;
	padding: 0 0 0 5px;
	float:left;
}

#sign_in_menu{
	width: 320px;
	color: #666666;
	margin: 20px 0;
	border: 1px solid #ccd1d6;	
	height: 145px;
	position: relative;
	float: left;
}


#sign_error{
	position: absolute;
	right: 25px;
	top: 92px;
}

#sign_in_menu p{
	margin: 0 0 0 3px ;
}

#sign_info{
	width: 300px;
	height: 150px;
	float: left;
	margin: 0 0 0 20px;
}

#sign_info p{
	margin: 20px 10px;
}

#sign_in_menu #sign_btn{
	position: absolute;
	right: 10px;
	bottom: 10px;
}

#sign_name{
	position: absolute;
	right: 10px;
	top: 35px;
}

#sign_password{
	position: absolute;
	right: 10px;
	top: 65px;
}

#sign_in_menu input{
	margin: 0 5px;
}

#sign_in_menu #title_bar{
	width: 320px;
	color: #333333;
	margin: 0;
	background: #ccd1d6;
	height: 22px;
	line-height: 22px;
	font-size: 15px;
	font-weight: bold;
}


/*---------product details table style-----------*/

#details_title{
	background: #ccd1d6;
	font-size: 15px;
	font-weight: bold;
	padding: 5px;
}

#pro_{
	background:#f5f5f5;
}

#pro_details{
	background:#f5f5f5;
	padding: 10px;
}

#pro_cbook{
	float: right;
	font-weight: bold;
	margin: 10px 0 0 0;
	padding: 0 0 0 17px;
	background: url(../img/color_book.jpg) left 3px no-repeat;
}

#pro_cbook a{
	color: #333333;
}
	
#pro_info{
	background: #ebece7;

}

#pro_info_title{
	font-weight: bold;
	text-align: center;
}

#pro_info_details{
	text-align: center;
}

.first_button {
	margin: 0;
	_margin: 0 0 3px 0;
	}

/*---------menu style-----------*/
#menu {
	background: url(../img/btn_bg.jpg) left top no-repeat;
	width: 900px;
	height: 30px;
	margin: 0 0 10px 0;
	clear: both;
	position: relative;
}

#menu ul{
	list-style: none;
	margin: 0 0 0 -19px;
	#margin: 0;
	_margin: 0;
}

#menu ul li{
	display: inline;

	}

#menu a {
	display: block;
	text-indent: -900%;
	outline: none;
	margin: 0;

}

#menu a:active, #menu a:hover {
	text-indent: -1500%;
	background-position: left bottom;

}

#menu .home {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_home.gif) no-repeat;
	left: 0px;
	top: -1px;
	position: absolute;
}

#menu .about {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_about.gif) no-repeat;
	left: 150px;
	top: -1px;
   	position: absolute;
}

#menu .products {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_products.gif) no-repeat;
	left: 300px;
	top: -1px;
   	position: absolute;
}

#menu .order {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_order.gif) no-repeat;
	left: 450px;
	top: -1px;
	position: absolute;
}

#menu .career {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_career.gif) no-repeat;
	left: 600px;
	top: -1px;
    position: absolute;
}

#menu .contact {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_contact.gif) no-repeat;
	left: 750px;
	top: -1px;
	position: absolute;
}

#menu .home_active {
  	width: 150px;
 	height: 30px;
    background: url(../img/en_btn_home.gif) no-repeat;
 	background-position: left bottom;
 	left: 0px;
	top: -1px;
	text-indent: -900%;
	position: absolute;
}

#menu .about_active {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_about.gif) no-repeat left bottom;
	left: 150px;
	top: -1px;
	text-indent: -900%;
	position: absolute;
}

#menu .products_active {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_products.gif) no-repeat left bottom;;
	left: 300px;
	top: -1px;
	text-indent: -900%;
	position: absolute;
}

#menu .order_active {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_order.gif) no-repeat left bottom;
	left: 450px;
	top: -1px;
	text-indent: -900%;
    position: absolute;
}

#menu .career_active {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_career.gif) no-repeat left bottom;
	left: 600px;
	text-indent: -900%;
	top: -1px;
    position: absolute;
}


#menu .contact_active {
	width: 150px;
	height: 30px;
	background: url(../img/en_btn_contact.gif) no-repeat left bottom;
	left: 750px;
	top: -1px;
  	text-indent: -900%;
	position: absolute;
}
/*---------end--------*/

/* form */
.form_width {
	width: 145px;
	}

.form_width2 {
	width: 200px;
	}

span.eng_text {	font-family: Arial, Helvetica, sans-serif; }
.eng_text {	font-family: Arial, Helvetica, sans-serif; }