﻿@charset "utf-8";
body { background: #fff; margin:0; padding:0; font-family:Arial, sans-serif;}
img { vertical-align:middle; border:0;}


#mainbody { background:url(../images/bg.jpg) top repeat-x #FFF; margin: 0 auto; padding:0; width: 100%;}
#head { height: 100px; width: 1000px; margin: 0 auto; padding: 25px 0 0 0;}
  #head img.logo { float:left; padding: 50px 0 0 0;}
  
  
  /**** 回首頁&我的最愛******/
  #head ul.home_fav { pading: 21px 20px 0 0; list-style:none;}
  #head ul.home_fav li { float: right;}
    #head .home_fav a.home { line-height: 40px; overflow:hidden;  width:82px; height:13px; display:block;}
    #head .home_fav a.home:link, #head .home_fav a.home:visited { background:url(../images/home_btn.jpg);}
    #head .home_fav a.home:hover { background: url(../images/home_btn_h.jpg);}
  
    #head .home_fav a.favo { line-height: 40px; overflow:hidden;  width:98px; height:13px; display:block;}
    #head .home_fav a.favo:link, #head .home_fav a.favo:visited { background: url(../images/favorite.jpg);}
    #head .home_fav a.favo:hover { background: url(../images/favorite_h.jpg);}
  
  
  /**** 上版主選單 ******/
  ul.topmenu { margin: 0; padding: 40px 0 0 600px; list-style:none;}
  ul.topmenu li { float: left;}
  
    .topmenu a.menu01 { line-height: 70px; overflow:hidden;  width:70px; height:25px; display:block;}
    .topmenu a.menu01:link, .topmenu a.menu01:visited { background: url(../images/menu_r1_c1.jpg);}
    .topmenu a.menu01:hover { background: url(../images/menu_h_r1_c1.jpg);}
  
    .topmenu a.menu02 { line-height: 70px; overflow:hidden;  width:59px; height:25px; display:block;}
    .topmenu a.menu02:link, .topmenu a.menu02:visited { background: url(../images/menu_r1_c2.jpg);}
    .topmenu a.menu02:hover { background: url(../images/menu_h_r1_c2.jpg);}
	
    .topmenu a.menu03 { line-height: 70px; overflow:hidden;  width:89px; height:25px; display:block;}
    .topmenu a.menu03:link, .topmenu a.menu03:visited { background: url(../images/menu_r1_c4.jpg);}
    .topmenu a.menu03:hover { background: url(../images/menu_h_r1_c4.jpg);}
  
    .topmenu a.menu04 { line-height: 70px; overflow:hidden;  width:77px; height:25px; display:block;}
    .topmenu a.menu04:link, .topmenu a.menu04:visited { background: url(../images/menu_r1_c5.jpg);}
    .topmenu a.menu04:hover { background:  url(../images/menu_h_r1_c5.jpg);}
	
	.topmenu a.menu05 { line-height: 70px; overflow:hidden;  width:97px; height:25px; display:block;}
    .topmenu a.menu05:link, .topmenu a.menu05:visited { background: url(../images/menu_r1_c7.jpg);}
    .topmenu a.menu05:hover { background:  url(../images/menu_h_r1_c7.jpg);}
  
  
  /****EDM****/
  #edm { width: 1010px; margin: 0 auto;}
  
  /****index icon****/
  #index_icon { width: 1000px; margin: 20px auto 35px auto; text-align:center; border-top: 5px #ccd2ce solid; padding: 10px 0 0 0; }
  #index_icon img { padding: 3px; }
  
  
  /****main****/
  #main { width: 1000px; margin: 0 auto; min-height:500px;}
  
     /****左欄 選單*****/
	 .leftmenu { width: 228px; float:left; background:url(../images/menu_right_shadow.jpg) right top no-repeat; padding: 0 42px 0 0px; /*height: 273px;*/}
	 h1.leftmenu_title { font-size: 30px; font-family: "Myriad Pro"; color: #bacdd9; border-bottom: 1px  #000 solid; padding: 0 10px 5px 10px; margin: 20px 0 0 0;}
	 
	 .leftmenu ul { margin: 0; padding: 10px 0 0 0; list-style:none;}
	 .leftmenu ul li { margin: 0; padding:0 0 0 0px;}
	 .leftmenu ul li .nav-lis { display:block; padding:0 0 0 15px; font-size:12px; line-height:20px; color:#fff; cursor:pointer;}
	 .leftmenu ul li .nav-lis:hover {}
	     .leftmenu ul li span.nav01 { display:block; line-height: 26px; height: 26px; padding: 0 0 0 30px; font-family:Arial; font-size: 12px; background:url(../images/nav01_bg.jpg) bottom left no-repeat;}
		 .leftmenu ul li span.nav01 a, .leftmenu ul li span.nav01 a:visited { color:#000; text-decoration:none;}
		 .leftmenu ul li span.nav01 a:hover { color:#930; text-decoration:none;}
		 
		 .leftmenu ul li ol { margin: 5px 0 10px 0; padding:0px; list-style:none;}
		 .leftmenu ul li ol li  
		 {
		     /*margin: 0; padding:0px 0 0 35px; line-height: 26px;*/ 
		     /* height: 26px; */ /*font:Arial; color: #179e51; font-size: 12px; background:url(../images/sub01_bg.jpg) bottom left no-repeat;*/
            PADDING-BOTTOM: 0px;
	        LINE-HEIGHT: 26px;
	        MARGIN: 0px;
	        PADDING-LEFT: 35px;
	        PADDING-RIGHT: 0px;
	        COLOR: #AAAAAA;
	        FONT-SIZE: 12px;
	        PADDING-TOP: 0px;
	        border-bottom-width: 1px;
	        border-bottom-style: dotted;
	        border-bottom-color: #D7D7D7;
	        background-image: url(../images/submenu_bg.jpg);
	        background-repeat: no-repeat;
	        background-position: left top;
		     }
         .leftmenu ul li ol li a, .leftmenu ul li ol li a:visited { color:#179e51; text-decoration:none;}
		 .leftmenu ul li ol li a:hover { color: #66C;}
		 
	 /****右欄*****/
	 .right_main { float:right; margin: 30px 0px 30px 0; padding: 0 30px 0 0px; width: 700px; background:url(../images/inside_right.jpg) right top no-repeat;}
	 h1.navtitle { font-size: 24px; margin: 0; background:url(../images/title_line.jpg) bottom left no-repeat; padding: 0 0 25px 35px; color:#363334; }
	 .content { font-size: 12px; color:#363334; line-height: 1.5em; padding: 0 45px 0 35px; }
       .content p { font-size: 12px; color:#363334; line-height: 1.5em;}
	   img.flo  { float: right; margin: 0 0 10px 10px;}

		
		/**** news list ****/
		
		.news, dl.news  { margin: 0px 0 0px 0px; padding:0; width: 650px;}
		dl.news dt.form01 { color:#565656; font-size: 12px; font-family: Verdana; background: #e6ecfa; padding:0px 0 0 20px; width: 100px; line-height: 30px; float:left; border: 1px #dbdbdb solid; border-left: 0;}
		dl.news dd.form01 img.newsicon { padding: 0 15px 0 0;}
		dl.news dt.form02 { color:#565656; font-size: 12px; font-family: Verdana; background: #e6ecfa; padding:0px 0 0 20px; width: 500px; line-height: 30px; float:left; border: 1px #dbdbdb solid; border-left: 0; border-right: 0;}
		
		dl.news dd.form01 {  width:100px; color: #666; font-size: 12px; padding: 0 0 0 20px; margin:1px 1px 0 0; line-height: 30px; float:left; border: 1px #dbdbdb solid; border-left: 0; border-top: 0; }
		   dl.news dd.form01 img.newsicon { padding: 0 10px 0 0; vertical-align:middle;}
		   
		dl.news dd.form02 {  width:500px; color: #333; font-size: 12px; padding: 0 0 0 20px; margin:1px 1px 0 0; line-height: 30px; float:left; border-bottom: 1px  #dbdbdb solid;}
		dl.news dd.form02 a, dl.news dd.form02 a:visited { color:#333; text-decoration:none;}
		dl.news dd.form02 a:hover { color: #F60; text-decoration:none;}
		
		
		/**** news detaile ****/
		h2.newstitle { font-size: 15px; color:#4986cd; border-bottom: 1px #999 dotted; font-weight:bold; padding: 0 0 10px 0px;}
		span.dete { display:block; color:#f89544; font: 12px; padding: 0 0 0 20px;}
		p.newscontnt { padding: 0 0 20px 20px; font-size: 12px; border-bottom: 1px #999 dotted; }
		p.newscontnt img { float: right; margin: 0 0 10px 10px;}
		
		
		/**** download form ****/
		
		.download, dl.download  { margin: 30px 0 30px 0px; padding:0; width: 650px;}
		dl.download dt.form01 { color:#003276; font-size: 12px; font-family:Arial; background: #f6f5f2; padding:0px 0 0 20px;; margin:1px 1px 0 0; width: 250px; line-height: 25px; height:25px; float:left;}
		dl.download dd.form01 {  width:250px; background: #f6f5f2; color:#363334 ;background: #f6f5f2; font-size: 12px; padding: 0 0 0 20px; margin:1px 1px 0 0; line-height: 25px; height:25px; float:left;}
		dl.download dd.form02 { color:#3661ff; font-size: 10px; font-family:Arial; background: #f6f5f2; text-align:center; padding:0px; margin:1px 1px 0 0; width: 100px; line-height: 25px; height:25px; float:left;}
		dl.download dd.form02 a, dl.download dd.form02 a:visited { color:#3661ff; text-decoration:none;}
		dl.download dd.form02 a:hover { color: #F60; text-decoration:none;}
		
		
		
		/**** product list ****/
		
		ul.product-list { margin:0; padding:0; }
		ul.product-list li { float:left; margin:0; padding:10px 0; list-style: none; border-bottom:1px #E4DEDE dotted;}
		ul.product-list li img.prosmall { border:1px #C3BDBD solid; padding: 8px; float:left; width:70px; height:auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
		
		   ul.product-list li p { color:#333; font-weight:bold; font-size: 15px; font-family:Arial; background: url(../images/pro_icon.jpg) 0 2px no-repeat; padding: 0px 0 0px 20px; margin:0 0 0 100px;}
		   ul.product-list li p a, ul.product-list li p a:visited { color:#333; text-decoration:none;}
		   ul.product-list li p a:hover { color: #C00; text-decoration:none;}
		   ul.product-list li .brief{margin:10px 20px 0 100px; height:40px; width:520px; overflow:hidden; text-overflow:ellipsis;
		    display: -webkit-box;              /* CSS3 Flexible Box Model */
            -webkit-line-clamp: 2;             /* 控制著在該容器中的文字內容要顯示幾行 */
            -webkit-box-orient: vertical;   /* 控制著該容器中內容顯示的方式 */}
		
		
		/**** product detaile ****/
		.content_pro { font-size: 12px; color:#363334; line-height: 1.5em; padding: 0 0px 0 35px; }
		img.product { background:url(../images/product_pic_bg.jpg) no-repeat; padding: 18px 22px; margin: 0 10px 10px 0;}
		.pro_right { float:right; width: 310px;}
		   span.products { background:url(../images/icon_01.jpg) left no-repeat; width: 250px; line-height: 15px; font-size:15px; font-weight:bold; margin: 0 0 20px 0; padding: 0 0 0 20px; color:#8ba8d0; overflow:hidden;}
		   .pro_right p { padding: 0 0 0 20px; font-weight:bold; line-height: 24px; }
		.toolmenu { padding: 3px 0px; background:#f6f5f2; text-align:center; clear:both;}
		   .toolmenu img { padding: 2px 0px;background:#f6f5f2;}
		.pro_content p.con01 { padding: 10px 0 20px 20px; border-bottom: 1px dotted #666; border-top: 1px dotted #666;}
		.pro_content p.con02 { padding: 10px 0 0 20px;}
					
	    /**** contact form ****/
		
		.contact, dl.contact  { margin: 0px 0 30px 30px; padding:0; width: 500px;}
		dl.contact dt { background: url(../images/form01_bg.jpg); width:116px; height:17px; color:#FFF; font-size: 12px; padding: 0 0 0 20px; margin:5px 3px; display:block; overflow:hidden; float:left;}
		dl.contact dd { padding:0px; margin:5px 3px; height:17px; float:left;}
		dl.contact dd input { padding: 0 0 0 10px; font-size: 12px; height:16px; color:#666; border: 1px #CCC solid; width: 300px;}
		
		dl.contact dd.textarea01 { height: 100px;}
		dl.contact dd.textarea01 textarea { padding: 0 0 0 10px; font-size: 12px; color:#666; border: 1px #CCC solid; width: 300px; height: 100px;}
		
		/**** Distributor ****/
		
		#area { clear:both;}
		#area h3.aisa { font-size:24px; color: #db81b4; background:url(../images/title_line.jpg) bottom no-repeat; height: 50px; margin:0;}
		#area h3.europe { font-size:24px; color: #e08f40; background:url(../images/title_line.jpg) bottom no-repeat; height: 50px; margin:0;}
		#area h3.africa { font-size:24px; color: #eb9e72; background:url(../images/title_line.jpg) bottom no-repeat; height: 50px; margin:0;}
		#area h3.america { font-size:24px; color: #cbbe00; background:url(../images/title_line.jpg) bottom no-repeat; height: 50px; margin:0;}
		#area h3.oceail { font-size:24px; color: #009a44; background:url(../images/title_line.jpg) bottom no-repeat; height: 50px; margin:0;}
		#area ul { margin:0; padding: 10px; }
		#area ul li { font-size: 12px; color:#363334; border-bottom: 1px #666 dotted; float:left; width: 300px; padding: 20px 0 20px 0; margin: 0 0 0 1px;}
		
		
		
  /**** pages ****/
		.pages { font-size: 12px; color:#1b64b6;  line-height: 25px; text-align:center; vertical-align:bottom; padding: 20px 0 20px 0; clear:both;}
		.pages img { vertical-align:middle; padding: 0 5px; line-height: 25px;}
		.pages a, .pages a:visited { color:#1b64b6; font-size: 12xp; text-decoration:none; padding: 5px; line-height: 25px;}
		.pages a:hover { color: #F30; text-decoration:none; padding: 5px; line-height: 25px;}
		

  /****bottom****/
   #bottom { width: 100%; background:url(../images/bottom_bg.jpg); height: 130px; float:left; clear:both;}
   #bottom_main { width: 1000px; margin: 0 auto; padding: 20px 0;}
   #bottom_main img.botlogo { float: left;}
   p.copyleft { float:left; margin: 0px 0 0 10px; font-family:Arial; font-size: 11px; line-height: 1.5em; color:#999;}
  
   p.copycenter { float: right; margin: 20px 140px 0 0px; font-family:Arial; font-size: 11px; line-height: 1.5em; color:#999; text-align:right;}
     p.copycenter a, p.copycenter a:visited { color:#999; text-decoration: none;}
	 p.copycenter a:hover { color:#6FF; text-decoration: none;}
	 
   p.copyright { float: right; margin: 10px 0px 0px 0px; font-family:Arial; font-size: 11px; line-height: 1.5em; color:#999; text-align:right;}
     p.copyright a, p.copyright a:visited { color:#999; text-decoration: none;}
	 p.copyright a:hover { color:#6FF; text-decoration: none;}


/* add by ethan */
.break_line
{
    display: block; /*內聯對象需加*/
    word-break: keep-all; /* 不換行 */
    white-space: nowrap; /* 不換行 */
    overflow: hidden; /* 內容超出寬度時隱藏超出部分的內容 */
    text-overflow: ellipsis; /* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
}


.error
{
    color:Red;
}



/**** terry 跑版調整 ****/
#head { *margin-bottom:30px;}
ul.topmenu {*width:1000px; *margin-top:-50px;}
.pro_right {*margin-top:-270px;}