@import url(animate.css);

/*----------基本樣式----------*/ 
body{
	background: url(../images/bg.jpg) repeat-x bottom;
	font-size: 14px;
	font-family: 微軟正黑體,Arial,sans-serif;
	color:#333;
	-webkit-animation: fadeIn 1.5s;
  	animation: fadeIn 1.5s;
}
a{
	color:#333;
}
a:hover{
	color:#2e7eba;
}
.bold{
	font-weight: bold;
	font-size: 15px;
}
.highlight{
	color:#2e7eba;
}
.v-align{
	vertical-align:middle;
	border:none !important;
}
.t-align{
	text-align: center;
}
input:focus {
  outline : 0;
}
/*----------主要架構-----------*/
#wrapper{
	width: 992px;
	margin: 0 auto;
	box-shadow: 0px 8px 20px -10px #333333;
	background: #fff;
	padding-bottom: 30px;
}
header{
	background-color: #fff;
}
.logo a{
	float: left;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	width: 316px;
	height: 52px;
	margin-left: 10px;
	background: url(../images/logo.jpg) no-repeat;
}
.top{
	float: right;
	margin-bottom: 15px;
	padding-right: 3px;
}
.top li{
	float: left;
	margin-top: 22px;
	margin-left:15px;
}
.searchbar input.bg1{
	background-image: url(../images/search.jpg);
	border: 0;
	height: 22px;
	width: 190px;
	margin: 0;
	padding: 0;
	padding-left: 10px;
}
.searchbar input.bg2{
	background-image: url(../images/search2.jpg);
	border: 0;
	height: 22px;
	width: 190px;
	margin: 0;
	padding: 0;
	padding-left: 10px;
}
.searchbar input[type="submit"] {
	width: 40px;
	height: 22px;
	background: url(../images/search.jpg) no-repeat -200px 0;
	border: 0;
	margin: 0;
	padding: 0;
}
#container{
	display: inline-block;
}
footer{
	width: 992px;
	margin: 0 auto;
	padding-top: 25px;
	padding-bottom: 65px;
}
.f_logo{
	margin-left: 35px;
	float: left;
}
.f_info{
	margin: 0;
	padding: 0;
}
footer p{
	color: #999;
	font-size: 13px;
	margin: 0;
	padding-left: 70px;
	float: left;
	letter-spacing: 0.1em;
	line-height: 1.6em;
}
/*----------主要選單----------*/
nav{
	clear:both;
}
nav li{
	float:left;
	background-image: url(../images/menu.jpg);
	background-repeat: no-repeat;
	width: 142px;
	height: 38px;
}
nav li a{
	width: 142px;
	height: 38px;
	float: left;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}
nav li.home{
	background-position: 0px 0;	
}
nav li.company{
	background-position: -142px 0;
}
nav li.product{
	background-position: -284px 0;	.
}
nav li.quality{
	background-position: -426px 0;	
}
nav li.equipment{
	background-position: -568px 0;
}
nav li.ourcilent{
	background-position: -710px 0;
}
nav li.contact{
	background-position: -852px 0;
	width: 140px;
}
nav li.home:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: 0px 0;	
}
nav li.company:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -142px 0;
}
nav li.product:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -284px 0;
}
nav li.quality:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -426px 0;
}
nav li.equipment:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -568px 0;
}
nav li.ourcilent:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -710px 0;
}
nav li.contact:hover{
	background-image: url(../images/menuhover.jpg);
	background-position: -852px 0;
	width:140px;
}
.subNav{
	position:relative; 
	top:38px;
	display: none;
	z-index: 10
}
.subNav li{
	background: #2e7eba;
	width: 140px;
}
.subNav li a{
	color: #fff;
	text-indent: 0;
	white-space: normal;
	overflow: visible;
	text-align: center;
	padding-top: 10px;
	width: 140px;
}
.subNav li a:hover{
	background: #fff;
	color: #2e7eba;
	padding-top: 10px;
	height: 28px;
}
.thirdNav{
	position: absolute; left: 98.5%; top:0;
	display: none;
}
nav ul li:hover {
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover > .subNav {
  	display: block;
}
.subNav li:hover > .thirdNav{
	display: block;
}

/*----------選單第二層----------*/

/*----------廣告BANNER----------*/
#banner{
	margin-bottom:30px;
}
#banner div.all { 
    width:990px;
	height:360px;
	overflow:hidden; 
	position:relative;
	display:block;
}

/* 左右鍵 */
#banner div.prev {
	position:absolute;
	top:150px;
	left:0px;
	z-index:2;
}
#banner div.next {
	position:absolute;
	top:150px;
	right:0px;
	z-index:2;
}
/* 外框 */

#banner div.top {
	top:0;
	left:0;
	width:990px;
	height:4px;
}
#banner div.down {
	bottom:0;
	left:0;
	width:990px;
	height:4px;
}
#banner div.left {
	top:4px;
	left:0;
	width:4px;
	height:352px;
}
#banner div.right {
	top:4px;
	right:0;
	width:4px;
	height:352px;
}

/* 最大寬度：2張圖9999px; 3張圖4999px; 4張圖3333px; 5張圖2499px; 6張圖1999px; 7張圖1666px; 8張圖1428px; 9張圖1249px; 10張圖1111px */
#banner ul#pic img {
    width:990px;
	height:360px;
}

/* 按鈕 */
#banner ul.bu { 
    height:15px; 
	position:absolute; 
	right:75px; 
	bottom:14px; 
	z-index:2; 
}

#banner ul.bu li {
	width:11px;
	height:11px;
	border-radius:50px;
	background:#C2E3FF;
	zoom:1;
	margin-right:7px;
	line-height:12px;
	text-align:center;
	cursor:pointer;
	color:#C2E3FF;
	box-shadow:inset 1px 1px 1px rgba(20%,20%,40%,0.5);
	display:block;
	float: left;
}
#banner ul.bu li.on { 
    background:#ff0000; 
	color:#ffffff;
}
/*----------首頁內容----------*/
#about{
	width: 276px;
	height: 197px;
	background-image: url(../images/about.png);
	margin-left: 25px;
	margin-right: 20px;
	color: #fff;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.6em;
	float: left;
}
#about p{
	width: 220px;
	padding-top:45px;
	padding-left: 35px;
}
#about img{
	padding-left: 35px;
}
#newproduct{
	overflow: hidden;
}
#newproduct #title{
	margin-left: 20px;
}
/*----------幻燈箱 Marquee----------*/
#marquee div.all {display:block;}
#marquee div {float:left;}

#marquee div.prev {             /* 按鈕-左 */
    width:20px;
    margin-top:65px;
}
#marquee div.next {             /* 按鈕-右 */
    width:20px;
    text-align:right;
    margin-top:65px;
}
#marquee div.box {            /* 顯示範圍 */
    width:615px;
    height:175px;
    position:relative; 
    overflow:hidden;
}
#marquee div.showbox {			/* 總寬度=顯示範圍x10 */
    position:absolute;
    left:0;
    top:0;
    width:6240px;
}
#marquee div.showbox div{
    float:left;
    text-align:center;
    width:145px;
    height:135px;
    margin:5px;
}
#marquee div.showbox div:nth-child(4n+1){
    margin-left:0;
}
.rotate{
    transform:rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.more{
	float: right;
	margin-right: 40px;
}
.bd{
    border: 1px solid #c0c0c0;
    margin-bottom: 5px;
}