@import url("style.css");
/***** global setting *****/
#index_container {
	margin:0px auto; 
	width:1000px; 
	/*background:url(../images/whole_table_bg.jpg) repeat-y;*/
}
/**** 頁首 ****/
#index_header {
}
/**** 中間區塊設定  ****/
#index_content {
	text-align: left; float:right; width:770px; margin-bottom:20px;
	}
.index_main{
	overflow:hidden; margin-top:12px;

	}
.banner { display:block; width:773px; margin-right:5px; margin-top:18px; float:right; position:relative;
	}
	

#sidebar{ padding-right:9px;}
/***中間標題***/
#idxMsgTitle, #idxProTitle {
	margin: 12px 0px 0px 0px;
	text-align: left;
	background:url(../images/h1_bg.jpg) no-repeat;
	padding:4px 0px 12px 34px;
	color:#FFBA03;
	font-size:140%;
	}
#idxMsgTitle {
	}
.index_more{
	display:block;
	/*background:url(../images/but_bg.jpg) no-repeat;*/
	float:right;
	width:59px;
	height:21px;
	text-align:center;
	}
.index_more a{ font-size:10px;background:url(../images/index_more.jpg) center center no-repeat; color:#FFF; font-weight:bold; display:block;}	
/***首頁訊息輪播***/
.index_msg{
	border-left: 0;
	padding-left: 0px;
	width: 200px;
	float:right;
	}
#index_msg_ul{
	margin: 0 10px 0 0 ;

	}
#index_msg_ul li{
	background:url(../images/arrow.gif) no-repeat 3px 8px;
	font-size: 100%;
	list-style-type:none;
	border-bottom:1px dotted #ffb900;
	}
.index_msg a{
	color: #FFF;
	}


/***首頁產品輪播***/
.index_pro{
	float:right;
	text-align:left;
	width:430px;

	}
.index_com{ width:385px; float:left;}	
#index_prod_ul{
}
#index_prod_ul li{
	margin:0 12px 0 0;
	border:1px solid #555;
	background-color: #333;
}
#index_prod_ul a{
	color: #FFF;

}
#index_prod_ul li img{
	width:95px;
	}
#index_prod_ul .index_more{
	margin-top: 10px;
	}
.slideshow { height: 296px; width: 773px; margin:0 auto; position:relative; }


/*.slideshow a{ position:absolute; color:#000; font-size:16px; bottom:10px;right:15px; background:url(../images/banner_icon.png) left top no-repeat; width:117px; height:26px;}
.slideshow a:hover{ background:url(../images/banner_icon_over.png) left top no-repeat;}*/
#nav{ position:absolute; top:27px; left:12px; z-index:2000; width:100%; margin:0 auto;}
#nav a{ width: 20px; height: 20px; background:url(../images/index_pro_a.png) left top no-repeat; margin: 3px; cursor: pointer; display:block; overflow:hidden; text-indent:-5000px; float:left; text-decoration: underline;}
#nav a.activeSlide{ background:url(../images/index_pro_a_hover.png) left top no-repeat;text-decoration: none;}
.dot{position:absolute; top:190px; left:0px; z-index:2000; width:100%; margin:0 auto; text-align:left;}



/*首頁公司簡介*/
.title_com{ background:url(../images/index_title_com.jpg) left top no-repeat; height:18px; padding:0; margin:0 0 12px 0; display:block; overflow:hidden; text-indent:-5000px;}
.title_pro{ background:url(../images/index_title_pro.jpg) left top no-repeat; height:18px; padding:0; margin:0 0 12px 0; display:block; overflow:hidden; text-indent:-5000px;}
.index_str_content{width:385px;float:left; overflow:hidden;}
.index_str_content p{ margin:0; padding:0; font-size:12px; line-height:22px;}
.index_pro{ width:370px;}
.ui-carousel{ width:360px;}

.index_prod_li{}
.index_prod_li a{ font-size:12px;}

/***** 頁尾設定 *****/
#index_footer {clear: both; font-size: 95%; text-align:left; background:url(../images/foot_bg.jpg) center top no-repeat; overflow:hidden; padding-bottom:30px; font-size:12px;
}
.foot_logo{ float:left; width:300px; margin-left:60px; margin-top:25px;}
.foot_right{ float:right; margin-right:28px; width:590px; margin-top:10px;}





@media screen and (max-width:980px) {

}

@media screen and (max-width:800px) {
     #index_container, #index_content, .banner{width:100%;}
	 .banner, .slideshow img{width:100%; margin-right:0; }
	 .index_str_content, .index_pro{width:49%; padding:0 0.3em;}
	 #index_footer{background-image: none;	border-top: 6px solid #e4e4e4; border-bottom: 6px solid #e4e4e4; padding: 0 4px 8px 4px;}
	 .subnav, .address, .copyright, .foot_right{width:98%; margin:0; word-wrap:break-word;}
	 .foot_logo{float:left; width:360px; margin:10px;}
	 .subnav{padding-top:8px;}
	}

@media screen and (max-width:768px) {
     .banner, .slideshow img{width:99%;}
	 .index_com{width:100%;}
}

@media screen and (max-width:600px) {
	.index_str_content, .index_pro {width: 98%; padding: 0.5em;}
	
	#nav{top:0;}
	

@media screen and (max-width:480px) {
	.index_str_content, .index_pro {width: 98%; padding: 0.5em;}
	
@media screen and (max-width:320px) {
	#nav {left: 92px;}
	
}
@media screen and (min-width: 240px) and (max-width: 319px)  {
.banner, .slideshow img{width:99%;}
}