/* 
------------------
stylesheet 
Tatung WebDesign
------------------
*/
html, body {
	height:100%;/* needed for container min-height */
}
body {
	font: 85% Verdana, Arial, Helvetica, Tahoma, sans-serif;
	background: #343434 url(../images/bg.jpg) repeat-x top;
	padding: 0;
	margin: 0;
}
/* --------All--------- */
a {color: #0066cc;}
a:hover {color: #078ce8}
a img {border: 0;}
.clear {clear: both}
.nolist {list-style: none}
.nolist, .nolist li, form, p, dd, dl, dt, ul, li {
	margin: 0;
	padding: 0;
}
.hide, hr {display: none;visibility: hidden;}
.show {display: block; visibility:visible;}
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
/*-------End--------*/
h1, h2, h3, h4, h5, h6 {	
	margin: 0;
	padding: 0;
}
h1 span {display: none}
/*--------*/
#frame-out {
	width: 960px;
	margin: 0 auto;
	background: url(../images/shadow_left.jpg) repeat-y top left;
	position: relative;
	/* body width 922px */
}
#frame-in {
	margin: 0 auto;
	padding: 0 19px 0 19px;
	background: url(../images/shadow_right.jpg) repeat-y top right;	
}
.shadow-left,.shadow-right {
	width: 19px;
	height: 539px;
	position: absolute;
	top: 0;
}
.shadow-left {
	background: url(../images/top_shadow_left.jpg) no-repeat top;
	left: 0px;	
}
.shadow-right {
	background: url(../images/top_shadow_right.jpg) no-repeat top;
	right: 0;	
}
#top {
	height: 77px;
	background: #474746 url(../images/bg_top.jpg) repeat-x top;		
}
#top a {
	float: left;
	margin: 13px 0 0 27px;
}
#top p {
	float: right;
	padding-right:29px;
}
#top p .t,#top p .m {
	position: relative;
	top: 25px
}
#top p .t {
	width: 212px;
	border: 1px solid #b9baba;
	padding: 5px 0 5px;
}
#top p .m {
	border: 1px solid #7a0c1e;
	color: white;
	background: #e00f11 url(../images/bg_search.gif) repeat-x top;	
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	cursor: pointer;
/* fix IE */
}
/* ----nav start---- */
#nav {background: #888888 url(../images/bg_menu.gif) repeat-x top}
#nav ul {
	list-style: none;
	float: left;
	padding-left: 22px;
}
#nav li {
	float: left;
	width: 117px;
	background: url(../images/line_menu.gif) no-repeat right top;
}
#nav li a {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	text-decoration: none;
	color: #4a4a4a;
}
#nav li a:hover {color: #078ce8}
#nav li.first a {
	background: url(../images/line_menu.gif) no-repeat left top;
}
#nav li strong {
	font-weight: normal;
	line-height: 40px;
}
#nav li.on1 a, #nav li.on2 a,
#nav li.on3 a, #nav li.on4 a,
#nav li.on5 a, #nav li.on6 a,
#nav li.on7 a {
	background: url(../images/button_menu.gif) no-repeat;
	position: relative;
	left: -1px;
	height: 40px;
}
#nav li.on1 a strong, #nav li.on2 a strong,
#nav li.on3 a strong, #nav li.on4 a strong,
#nav li.on5 a strong, #nav li.on6 a strong,
#nav li.on7 a strong {
	display: none;
}
#nav li.on1 a {background-position: 0 0}
#nav li.on2 a {background-position: -117px 0}
#nav li.on3 a {background-position: -234px 0}
#nav li.on4 a {background-position: -351px 0}
#nav li.on5 a {background-position: -468px 0}
#nav li.on6 a {background-position: -585px 0}
#nav li.on7 a {background-position: -702px 0}
/* ----end nav---- */
/*----add sub nav style----*/
#nav li .arrow {
	background: url(../images/arrow_menu.gif) no-repeat;	
	width: 5px;
	height: 7px;
	position: absolute;
	right: 6px;
	top: 8px;
	overflow: hidden;
}
#nav li:hover a strong {color: #078ce8}
#nav li:hover ul li a  {
	color: black;
	background: none;
	height: 25px !important;
	text-align: left;
	line-height: 25px;
}
#nav li:hover ul li a span {padding: 0 5px 0 5px}
#nav li {position: relative}
/*-------------------------------------------
cut li first line {- li} {+ li:hover li ul}
----- Excample ----
#nav li:hover ul li:hover li ul
cut {li} line 
= #nav li:hover ul li:hover {li} ul ///{}remove///
*New + li:hover li ul
=#nav li:hover ul li:hover ul {li:hover li ul} ///{}newtext///
---------------------------------------------*/
#nav li ul,
#nav li:hover li ul,
#nav li:hover ul li:hover li ul/*,
#nav li:hover ul li:hover ul li:hover li ul,
#nav li:hover ul li:hover ul li:hover ul li:hover li ul*/ {
	display: none;
}
/*-------------------------------------------
 for new sub {+ li:hover ul} 
---------------------------------------------*/
#nav li:hover ul, 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul/*,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul*/ {
	display: block;
	position: absolute;
	clear: left;
	width: 170px;
	z-index: 99;
	margin-top: -3px;
	background: none;
	padding: 0;
	top: 40px;
}
#nav li ul li {
	border-bottom: 1px solid #f3b55c !important;
	background: #fee9ca;
	float: left;
	width: 100%;
}
#nav li ul li:hover {background: #fdc473}
#nav li ul li a:hover {color: #1aabee}
#nav li:hover ul li:hover  ul {
	left: 100%;
	top: 3px;
}
/* nav right menu style */
#nav #right ul {right: 0}
#nav #right li ul li:hover ul {left: -100%}
#nav #right li ul a {text-align: right}
#nav #right .arrow {
	background: url(../images/arrow_menu2.gif) no-repeat;
	position: absolute;
	left: 6px;
	top: 8px;
} 
/* ------end menu style navigation------ */
#img-home {
	height: 334px;
	background: url(../images/img_home_tatung.jpg) no-repeat;
	width: 922px;
	overflow: hidden;
}
#img-home h2, #img-title h2 {display: none}
#img-title {
	height: 200px;
	background: none;/*url(../images/img_title.jpg) no-repeat;*/	
	overflow: hidden;
	width: 922px;	
}
#content-home {
	background: #e6e6e6 url(../images/bg_home_content.jpg) repeat-x top;
	padding-top: 30px;
	width: 922px;
	position: relative;
	font: 90% Verdana;
}
.set-bg {
	margin: 0 20px 0 20px;
	background: white url(../images/bg_center_home.jpg) repeat-x top;	
}
#content-home a:hover {color: #078ce8}
#content a:hover {color: #078ce8}
#content-home .box {
	background: url(../images/bg_home_list.gif) repeat-x top;
	width: 280px;
	float: left;
	position: relative;
	min-height: 316px;
}
#content-home .box h3 span {display: none}
#content-home .box h3 {
	height: 50px;
	border-bottom: 1px solid #393637;
	margin: 0 14px 20px 14px;
	background-position: 0 15px;
}
#content {
	background: white url(../images/bg_content.jpg) repeat-x top;		
	padding-bottom: 20px;
	position: relative;
	overflow: hidden;
	padding-top: 20px;
}
.center {
	padding: 20px 20px 0 20px;
	font-size: 90%;
}
.setleft {float: left}
.setright {float: right}
.setleft, .setright {margin: 2px}
.center ul, .center ol,
.right ul, .right ol {padding: 2px 0 12px 20px}
.center ul li, .center ol li, 
.right ul li, .right ol li {padding-bottom: 3px}
.center p, .right p {padding-bottom: 10px}
.curve-white1, .curve-white2 {
	position: absolute;
	width: 9px;
	height: 9px;
	top: 0;
}
.curve-white1 {
	background: url(../images/curve_white_left.gif) no-repeat;	
	left: 0;
}
.curve-white2 {
	background: url(../images/curve_white_right.gif) no-repeat;	
	right: 0;
}
.b-left {text-align: center}
.b-left span {
	background-color: white;
	border: 1px solid #b6b6b6;
	padding-top: 2px;
	padding-bottom: 2px;
	display: block;
	width: 240px;
	margin: 0 auto;
}
.b-left span span {
	border: 1px solid #e8e8e8;
	width: 234px;
	margin: 0 auto;
	padding-top: 3px;
	padding-bottom: 3px;
	overflow: hidden;
}
.b-left span input {
	width: 160px;
	height: 148px;
}
.b-left em {font-style: normal}
.b-left a {color: black}
.b-left strong {
	display: block;
	padding: 15px 0 15px;
	font-weight: normal;
	color: #0f5cac;
}
.b-left h3 {background: url(../images/h_newpro.gif) no-repeat}
.b-center {left: 18px}
.b-center p {padding: 0 14px 15px 14px}
.b-center p:first-letter {
	font-weight: bold;
	font-size: 120%;
}
.b-center ul, .b-right ul {
	/*padding: 0 14px 0 28px;*/
	padding: 0 14px 0 14px;
	list-style: none;
/* fix IE */
}
.b-center li span a {color: #9b0015}
.b-center li a {text-decoration: none}
.b-center ul li, .b-right ul li {
	padding: 0 0 4px 15px;
	background: url(../images/arrow_black.gif) no-repeat 0 4px;
/* fix IE */
}
.b-center h3 {background: url(../images/h_product_cat.gif) no-repeat}
.b-right {float: right !important;}
.b-right h3 {background: url(../images/h_services.gif) no-repeat}
.b-right a {text-decoration: none}
.curve-gray {
	background: url(../images/bg_curve_bottom.gif) repeat-x bottom;
	clear: both;
	height: 16px;
	position: relative;
}
.curve-gray div {
	width: 8px;
	height: 15px;
	position: absolute;
	top: 0;
}
.curve-gray .gray1 {
	background: url(../images/curve_white_bottom1.gif) no-repeat;
	left: 0;
}
.curve-gray .gray2 {
	background: url(../images/curve_white_bottom2.gif) no-repeat;
	right: 0;
}
#nav-bottom {
	line-height: 50px;
	text-align: center;
	font-size: 90%;
	color: #9c9c9c;
}
#nav-bottom a {
	color: #9c9c9c;
	text-decoration: none;
	margin: 0 10px 0 10px;
}
.bottom-home a {
	color: #414141 !important;	
	font-size: 110%;
}
.bottom-home a:hover {color: #078ce8 !important}
#nav-bottom a:hover {color: #078ce8}
#nav-bottom a.onhome {color: #9f0e22 !important}
#nav-bottom a.on {color: white !important}
#footer {
	background: #7d7b79 url(../images/bg_bottom.gif) repeat-x;
	line-height: 15px;
	font-size: 80%;
	font-weight: bold;
	color: white;
	padding: 0 5px 0 5px;
}
#footer .a {float: left}
#footer .b {float: right}
#footer a {color: white}
.left {
	border: 5px solid #4e565c;
	background: #2f3437;
	padding-bottom: 100px;
	position: relative;
	float: left;
	width: 30%;
}
.right {
	float: right;
	width: 62%;
	font-size: 90%;
	padding-right: 30px;
}
.right p {padding-bottom: 10px}

.right h2, .center h2 {
	font: 180% Arial,Verdana, Helvetica, Tahoma, sans-serif;
	color: #a50000;
	font-weight: bold;
	padding-bottom: 1px;
	border-bottom: 1px solid #a50000;
	margin-bottom: 10px;
}
.right h4, .center h4 {
	font-size: 110%;
	margin-bottom: 3px;
}
.right a, .center a {text-decoration: none}
.head-content {height: 50px}
.h-product {background: url(../images/h_products.gif) no-repeat 145px 13px}
.left .curve-left {
	position: absolute;
	width: 3px;
	height: 3px;
	overflow: hidden;
}
.left .a {
	background: url(../images/curve_left1.gif) no-repeat;
	top: -5px;
	left:-5px;
}
.left .b {
	background: url(../images/curve_left2.gif) no-repeat;
	top: -5px;
	right: -5px;
}
.left .c {
	background: url(../images/curve_left3.gif) no-repeat;
	bottom: -5px;
	right: -5px;
	/* fix IE */	
}
.left .d {
	background: url(../images/curve_left4.gif) no-repeat;
	bottom: -5px;
	left: -5px;
	/* fix IE */
}
.nav-left, .nav-left ul {list-style: none}
.nav-left {display:inline-block}
/* Hide from IE Mac \*/
.nav-left {display:block}
/* End hide from IE Mac */
.nav-left li {
	/* fix IE */
}
.nav-left ul {
	display:inline-block;
	width: 100%;
	font-size: 90%;
}
.nav-left li a {
	display: block;
	line-height: 28px;
	color: white;
	text-decoration: none;
	border-bottom: 1px solid #4e565c;
	/* fix ie */
}
.nav-left li a span {
	display: block;
	padding: 0 10px 0 12px;
}
.nav-left li ul li a span  {
	display: block;
	padding: 0 10px 0 32px;
}
.nav-left li li a span {background: url(../images/point_menuleft.jpg) no-repeat 20px 12px}
.nav-left a.on {background: url(../images/bg_menu_left.jpg) repeat-x center !important}
.nav-left li a:hover {
	background: url(../images/bg_menu_left.jpg) repeat-x center;
	color: white !important;
}
.nav-left li ul li {background: url(../images/bg_submenuleft.jpg) repeat-x center}
.nav-left li ul li a {color: #b4b5b5}
.nav-left li ul li a:hover {background: none}
.main-pro {padding: 30px 0 20px 0}
.main-pro div {
	width: 152px;
	float: left;
	margin-left: 46px;
	height: 200px;
}
.main-pro .first {
	clear: both;
	margin-left: 0 !important;
}
.main-pro div div.s {
	margin-left: 0 !important;
	height: 18px;
	background: url(../images/shadow_mainpro.jpg) no-repeat center top;
	clear: both;
	/* fix IE */
}
.main-pro div a {float: left}/* fix ie 7 */
.main-pro div span {
	display: block;
	text-align: right;
	clear: left;
	font-size: 90%;
	position: relative;
	top: -10px;
}
.main-pro a img {border: 1px solid #e0e0e0}
.main-pro a:hover img {border: 1px solid black}
.sub-pro .pic, 
.sub-pro .text {
	float: left;
	width: 48%;
}
.sub-pro .text strong {
	color: #d47a3f;
	font-size: 110%;
	display: block;
	margin-bottom: 5px;
}
.sub-pro .text a {color: #d47a3f}
.sub-pro .pic a {
	display: block;
	float: left;
	padding-bottom: 7px;
	background: url(../images/shadow_mainpro.jpg) no-repeat center bottom;
}
.sub-pro .pic a img {
	border: 1px solid #e0e0e0;
	float: left;
	padding: 3px;
}
.sub-pro .pic a:hover img {border: 1px solid black}
.sub-pro {padding-bottom: 20px}
.pro-detail {padding: 28px 0 28px}
.pro-detail h4 {
	margin-bottom: 10px;
	font-size: 110%;
}
.pro-detail .img-big {
	width: 280px;
	float: left;
	display: block;
	padding-bottom: 6px;
	background: url(../images/shadow_prodetail.jpg) no-repeat center bottom;
}
.pro-detail .img-big img {border: 1px solid #e5e5e5}
.pro-detail div {
	width: 45%;
	float: left;
	padding-left: 20px;
}
.pro-detail div .zoom-detail {padding-top: 10px}
.pro-detail div .zoom-detail img {
	border: 1px solid #e5e5e5;
	padding: 2px;
	margin: 8px 10px 0 0;
}
.pro-detail div .zoom-detail .on {border: 1px solid #91918f !important}
.text-prodetail {
	position: relative;
	padding: 10px 0 15px;
}
.text-prodetail div.detail1,.text-prodetail div.detail2 {
	background: url(../images/point_silver.gif) repeat-x bottom;
}
.text-prodetail .detail2 .h {color: #a23b41}
.text-prodetail .detail3 p {
	padding-left: 15px;
	background: url(../images/line_list.gif) no-repeat 8px 15px;
}
.text-prodetail .detail3 .first {width: 184px} 
.text-prodetail p {
	display:inline-block;/* IE */
	overflow: hidden; /* Mz */
	padding: 8px 0 8px;
}
/* Hide from IE Mac \*/
.text-prodetail p {display:block}
/* End hide from IE Mac */
.text-prodetail p .first {
	width: 199px;
	float: left;
	margin-right: 5px;
}
.text-prodetail p .text {
	width: 62%;
	float: left;
}
#nav-textpro {
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 1px solid #e0e0e0;
	width: 200%;
	margin-left: -38px;
}
#nav-textpro span {
	position: relative;
	top: 1px;
	left: 38px;
	float: left;
	display: block;
	line-height: 30px;
	padding: 0 10px 0 10px;
}
#nav-textpro span.on {
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid white;	
	border-left: 1px solid #e0e0e0;	
	border-right: 1px solid #e0e0e0;		
}
.text-right {text-align: right}
.text-center {text-align: center}
.small-img {padding-top: 40px}
.small-img h3 {
	border-bottom: 1px solid black;
	text-align: left;
	padding: 3px 0 3px;
	font-size: 110%;
}
.small-img p {
	padding: 20px 0 20px;
	font-size: 80%;
}
.small-img a {
	margin-right: 18px;
	display: block;
	width: 45%;
	height: 90px;
	float: left;
}
.small-img a span {
	display: block;
	padding-left: 10px;
	float: left;
	width: 60%;
}
.small-img a img {
	border: 1px solid #e0e0e0;
	width: 88px;
	height: 82px;
	float: left;
}
/*  contact  */
.small-img a:hover img {border: 1px solid black;}
.row-descript {padding: 10px 0 10px}
.row-text {
	font-weight: bold; 
    padding: 10px 0 10px;
}
.row-form {padding-top: 5px}
.row-1cols {float: left}
.row-3cols {
	float: left; 
    margin-bottom: 3px;
    width: 250px;
}
.row-2cols-left {
	float: left; 
	width: 150px; 
	text-align: right; 
	padding-right: 10px; 
	font-weight: bold; 
}
.row-2cols-right {
	float: left; 
	width: 400px; 
	text-align: left;
}
.row-error {
	background-color: #ffdfdf; 
	color: #ff2f2f; 
	padding: 5px 0 5px 0; 
	text-align: center; 
}
.txtinput, .txtinput-err {width: 250px}
.txtinput-err { border: 1px solid #ff2f2f; }
/*  end contact  */
.note {
	font-size: 90%;
	padding: 8px 0 8px;
	color: #5F5F5F;
}
.note strong {color: black}