body {
font-family: Arial, Helvetica, sans-serif, 新細明體;
font-size: 12px;
color: #3f3f3f;
background-color: #333333;
margin: 0 auto 20px auto;
background-image: url(images/index_bg.gif);
background-repeat: repeat-x;
}

#container {
width: 930px;
height:100%;
margin: 0 auto 0 auto;
background-color: transparent;
}

.logo{
background-image: url(images/logo.gif);
background-repeat: no-repeat;	
width:216px;
height:74px;
margin-left:0px;
}

/* nav code starts */
.nav {
background-image: url(images/nav_bg.gif);
background-repeat: repeat-x;
height:40px;
width:765px;
margin-top:0px;
}

.nav a#n_01 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(images/n_01.gif);
background-repeat: no-repeat;
background-position:0px -40px;
}

.nav a#n_01:hover {
background-position: 0px 0px;
}

.nav a#n_02 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(images/n_02.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_02:hover {
background-position: 0px 0px;
}

.nav a#n_03 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(images/n_03.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_03:hover {
background-position: 0px 0px;
}

.nav a#n_04 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(images/n_04.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_04:hover {
background-position: 0px 0px;
}

.nav a#n_05 {
display: block;
width: 149px;
height: 40px;
float: left;
background-image: url(images/n_05.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_05:hover {
background-position: 0px 0px;
}
/* nav ends*/

.txtbar{
background-color:#353434;
border: 1px solid #5D5D5D;
font:Arial, Helvetica, sans-serif, 新細明體;
font-size: 12px;
font-weight: normal;
color: #cccccc;
height:23px;
padding-top:4px;
text-align:center;
}

.txtbar_btn{
height:25px;
width:25px;
background-color:#353434;
border: 1px solid #5D5D5D;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #cccccc;
}

.txtbar_alt{
background-color:#ffffff;
border: 1px solid #333333;
font:Arial, Helvetica, sans-serif, 新細明體;
font-size: 12px;
font-weight: normal;
color: #333333;
height:17px;
padding-top:2px;
}

.txtbar_btn_alt{
height:24px;
width:25px;
background-color:#000000;
border: 1px solid #333333;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #cccccc;
}

/* sub nav code */

#sub_nav {
width: 235px;
margin-top: 0px;
float: left;
}

.2nd a{
font-weight:normal;
font-size:13px;
color: #3f3f3f;
text-decoration: none;
margin-left:10px;
}

.2nd a:hover{
font-weight:normal;
color: #e00000;
text-decoration: none;
}

#sub_nav ul {
width: 235px;
margin: 0px;
padding: 0px;
}

#sub_nav li {
list-style-type: none;
width: 170px;
font-size: 13px;
color: #000000;
margin-left: 25px;
border-bottom: 1px #cccccc dotted;
padding-left: 12px;
}

#sub_nav li .stay{
list-style-type: none;
width: 170px;
font-size: 13px;
font-weight:bold;
color: #e00000;
background-image: url(images/red-arrow.gif);
background-repeat: no-repeat;
background-position:left;
margin-left: 0px;
padding-left: 8px;
}

/* 2nd menu active state */
#sub_nav li .alt {
width: 170px;
height: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
color: #e00000;
font-weight:bold;
margin-left: 0px;
background-image: url(images/red-arrow.gif);
background-repeat: no-repeat;
background-position:left;
}

#sub_nav li ol{
list-style-type: none;
width: 140px;
font-size: 13px;
color: #3f3f3f;
margin-left: 0px;
border:none;
padding-left: 10px;
}

#sub_nav li ol li{
list-style-type: none;
width: 150px;
font-size: 13px;
color: #000000;
margin-left: 0px;
border: none;
padding-left: 0px;
}

#sub_nav li ol li a{
font-weight:normal;
width: 142px;
padding-left:8px;
margin-left: 0px;
color: #3f3f3f;
text-decoration: none;
}

#sub_nav li ol li a:hover{
list-style-type: none;
color: #e00000;
font-weight:normal;
text-decoration: none;
background-repeat: no-repeat;
background-position:left;
}

#sub_nav li a {
font-weight:bold;
display: block;
width: 169px;
padding-top: 5px;
padding-bottom: 5px;
padding-left:8px;
margin-left: 0px;
color: #3f3f3f;
text-decoration: none;
} 

#sub_nav li a:hover, #sub_nav li a:active{
color: #e00000;
font-weight:bold;
text-decoration: none;
background-image: url(images/red-arrow.gif);
background-repeat: no-repeat;
background-position:left;
}

#footer{
background-image: url(images/footer-bg.gif);
background-repeat: repeat-x;
margin-left:0px;
margin-top:0px;
padding-top:7px;
}

.dt_pix{
background-color:#ffffff;
border: 1px solid #cccccc;
text-align: left;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}

/* sub nav ends */

/* only for Product page */

.box {
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}

.box .cata{
width: 195px;
height: 100%;
margin-top: 17px;
float:left;
background-color: #ffffff;
margin-right:15px;
margin-left:5px;
}

.pix {
margin: 0px;
padding: 0px;
border: 1px solid #999999;
}

/* product page ends */

/* font setting */

.white, .white a, .white a:visited {
font-size: 12px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight: normal;
color: #ffffff;
text-decoration: none;
}

.white a:hover, .white a:active{
font-size: 12px;
color: #cccccc;
text-decoration: underline;
}

.gray, .gray a, .gray a:visited {
font-size: 12px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight: normal;
color: #666666;
text-decoration: none;
}

.gray a:hover, .gray a:active{
font-size: 12px;
text-decoration: underline;
}

.orange, .orange a, .orange a:visited {
font-size: 12px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight: normal;
color: #FB7D02;
text-decoration: none;
}

.orange a:hover, .orange a:active{
font-size: 12px;
font-weight: bold;
text-decoration: underline;
}

.h1{
font-size: 13px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}

.h2{
font-size: 15px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #e00000;
font-weight: bold;
text-decoration: none;
}

.h3{
font-size: 15px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #666666;
font-weight: bold;
text-decoration: none;
border-left: 6px solid #e00000;
}

.h4{
font-size: 15px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #666666;
font-weight: bold;
text-decoration: none;
}

.bk, .bk a, .bk a:visited {
font-size: 12px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight: normal;
color: #000000;
text-decoration: none;
}

.bk a:hover, .bk a:active{
font-size: 12px;
color: #e00000;
text-decoration: underline;
}

.des {
font-size: 13px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #000000;
font-weight: normal;
line-height:18px;
text-decoration: none;
text-align: left;
}

.p{
font-size: 11px;
font:Arial, Helvetica, sans-serif, 新細明體;
color: #888888;
font-weight: normal;
text-decoration: none;
text-align: center;
}

.red {
font-size: 12px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight: bold;
color: #e00000;
text-decoration: underline;
}

.white_b, .white_b a, .white_b a:visited {
font-size: 13px;
font:Arial, Helvetica, sans-serif, 新細明體;
font-weight:bold;
color: #ffffff;
text-decoration: none;
}

.white_b a:hover, .white_b a:active{
font-size: 13px;
text-decoration: underline;
}

/* sitemap */

#map {
width: 150px;
margin-top: 0px;
float: left;
}

#map ul {
width: 150px;
margin: 0px;
padding: 0px;
}

#map li {
list-style-type: none;
width: 130px;
font-size: 12px;
color: #000000;
margin-left: 10px;
border-bottom: 1px #999999 dotted;
padding-left: 10px;
}

#map li .alt {
display: block;
width: 130px;
height: 15px;
padding-top: 5px;
padding-bottom: 5px;
color: #e00000;
font-weight:bold;
margin-left: 0px;
background-image: url(images/red-arrow.gif);
background-repeat: no-repeat;
background-position:left;
}

#map li a {
display: block;
width: 130px;
height: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left:8px;
margin-left: 0px;
color: #3f3f3f;
text-decoration: none;
} 

#map a:hover, #map a:active{
color: #e00000;
text-decoration: none;
background-image: url(images/red-arrow.gif);
background-repeat: no-repeat;
background-position:left;
}

/* EN nav code starts */

.nav a#n_01_1 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(en_images/n_01.gif);
background-repeat: no-repeat;
background-position:0px -40px;
}

.nav a#n_01_1:hover {
background-position: 0px 0px;
}

.nav a#n_02_1 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(en_images/n_02.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_02_1:hover {
background-position: 0px 0px;
}

.nav a#n_03_1 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(en_images/n_03.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_03_1:hover {
background-position: 0px 0px;
}

.nav a#n_04_1 {
display: block;
width: 154px;
height: 40px;
float: left;
background-image: url(en_images/n_04.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_04_1:hover {
background-position: 0px 0px;
}

.nav a#n_05_1 {
display: block;
width: 149px;
height: 40px;
float: left;
background-image: url(en_images/n_05.gif);
background-repeat: no-repeat;
background-position: 0px -40px;
}

.nav a#n_05_1:hover {
background-position: 0px 0px;
}
/* EN nav ends*/