@import "default.css";
.spirteIMG {
	background-image: url(../images/common_images/sprite.png);
	background-repeat: no-repeat;
}
.fullTexty {
	　text-align: justify;
　							/*　Firefox到此即可對齊　*/
 　text-justify: distribute;						/*　IE需再加上此行　*/
}
.noDisplay {
	display: none;
}
#warrper {
	margin: auto;
	width: 990px;
}
#topFlashBox {
	float: left;
	width: 100%;
	position: relative;
}
#mainContainBox {
	float: left;
	width: 100%;
	position: relative;
	height: 481px;
	padding-top: 74px;
}
#footerBox {
	float: left;
	width: 100%;
	height: 26px;
	background-color: #FFF;
	font-size: 12px;
	line-height: 26px;
	color: #333;
	text-align: center;
}
#footerBox span {
	margin-right: 5px;
	margin-left: 5px;
}
#mainContainBox .topBox {
	height: 190px;
	width: 990px;
	background-image: url(../images/common_images/top_bg_01.png);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 100;
	left: 0px;
	top: 0px;
}
#mainContainBox .topBox .logoBox {
	background-position: 0px 0px;
	position: absolute;
	z-index: 500;
	height: 75px;
	width: 365px;
	left: 10px;
	top: 15px;
	display: block;
}
#mainContainBox .topBox .menuBox {
	height: 32px;
	position: absolute;
	z-index: 500;
	top: 33px;
	right: 10px;
}
#mainContainBox .topBox .menuBox ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#mainContainBox .topBox .menuBox ul li {
	float: left;
}
#mainContainBox .topBox .menuBox ul li a {
	line-height: 5000px;
	height: 32px;
	overflow: hidden;
}
#mainContainBox .topBox .menuBox ul li a.btn1 {
	background-position: -425px 0px;
	height: 32px;
	width: 115px;
	display: block;
}
#mainContainBox .topBox .menuBox ul li a:hover.btn1 {
	background-position: -425px -32px;
}
#mainContainBox .topBox .menuBox ul li a.btn2 {
	background-position: -540px 0px;
	height: 32px;
	width: 105px;
	display: block;
}
#mainContainBox .topBox .menuBox ul li a:hover.btn2 {
	background-position: -540px -32px;
}
#mainContainBox .topBox .menuBox ul li a.btn3 {
	background-position: -645px 0px;
	height: 32px;
	width: 130px;
	display: block;
}
#mainContainBox .topBox .menuBox ul li a:hover.btn3 {
	background-position: -645px -32px;
}
#mainContainBox .topBox .menuBox ul li a.btn4 {
	background-position: -775px 0px;
	height: 32px;
	width: 120px;
	display: block;
}
#mainContainBox .topBox .menuBox ul li a:hover.btn4 {
	background-position: -775px -32px;
}
#mainContainBox .topBox .menuBox ul li a.btn5 {
	background-position: -895px 0px;
	height: 32px;
	width: 80px;
	display: block;
}
#mainContainBox .topBox .menuBox ul li a:hover.btn5 {
	background-position: -895px -32px;
}
#mainContainBox .pageIndex {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	background-color: #FFF;
}
#mainContainBox .pageAbout {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	/*background-image: url(../images/about_images/about.jpg);*/
	background-image:url(../images/about_images/deco.png);
	background-color: #fff;
	background-repeat: no-repeat;
}
#mainContainBox .pagePortfolio {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	background-image: url(../images/products_images/products_bg.jpg);
	background-repeat: no-repeat;
}
#mainContainBox .pageProductsCase {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	background-image: url(../images/products_images/products_class_bg.jpg);
	background-repeat: no-repeat;
}
#mainContainBox .pageProductsList {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	background-image: url(../images/products_images/products_class_bg.jpg);
	background-repeat: no-repeat;
}
#mainContainBox .pageProductsDetail {
	float: left;
	min-height: 481px;
	width: 100%;
	position: relative;
	background-color: #FFF;
	background-image: url(../images/products_images/products_class_bg.gif);
	background-repeat: no-repeat;
}

#mainContainBox .pageContact {
	float: left;
	height: 481px;
	width: 100%;
	position: relative;
	background-image: url(../images/contact_images/contact_02.jpg);
	background-repeat: no-repeat;
}
.pageAbout h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 27px;
	right: 54px;
	font-weight: normal;
}
.pageAbout #scrollpane {
	float: left;
	height: 348px;
	width: 504px;
	overflow: auto;
}
.pageAbout .messageBox {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 80px;
	width: 100%;
}
.pageAbout .messageBox h2 {
	font-size: 22px;
	letter-spacing: 4px;
	font-weight: bolder;
	line-height: 30px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 40px;
}
.pageAbout .messageBox .ca1 {
	color: #43b133;
}
.pageAbout .messageBox .ca2 {
	color: #ea5413;
}
.pageAbout .messageBox .tb1 {
	line-height: 20px;
	margin-top: 10px;
	font-size: 13px;
}
.pageAbout .messageBox .tb1 strong {
	font-size: 15px;
}
.pageAbout .messageBox .tb1 img {
	margin-top: 7px;
	margin-bottom: 7px;
}
.pageAbout .messageBox th {
	text-align: right;
	vertical-align: top;
	width: 70px;
}
.pageAbout .messageBox td {
	vertical-align: top;
	width: 405px;
}
.pageAbout .scroller{
	height: 348px;
	overflow-y: auto;
}
.pageAbout .scroller::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.pageAbout .scroller::-webkit-scrollbar-track {
  background: #CDCDCD;
}

/* Handle */
.pageAbout .scroller::-webkit-scrollbar-thumb {
  background: #228114;
}

/* Handle on hover */
.pageAbout .scroller::-webkit-scrollbar-thumb:hover {
  background: #228114;
}
.pageAbout .scroller img{
	width: 100%;
}
.pagePortfolio h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 35px;
	right: 67px;
	font-weight: normal;
}
.pagePortfolio .listBox {
	position: absolute;
	z-index: 500;
	top: 91px;
	right: 22px;
}
.pagePortfolio .listBox #scrollpane {
	height: 340px;
	width: 463px;
	overflow: auto;
}
.pagePortfolio .listBox a {
	float: left;
	width: 122px;
	margin-right: 13px;
	margin-left: 13px;
	margin-top: 4px;
	margin-bottom: 4px;
}
.pagePortfolio .listBox a .imageBox img {
	height: 81px;
	width: 122px;
	float: left;
}
.pagePortfolio .listBox a .textBox {
	line-height: 18px;
	text-align: center;
	height: 18px;
	float: left;
	width: 122px;
	margin-top: 5px;
	text-decoration: none;
	font-size: 12px;
	color: #333;
	display: block;
	overflow: hidden;
}
.pagePortfolio .listBox a:hover .textBox {
	text-decoration: underline;
}
.pagePortfolio #pageTags {
	line-height: normal;
	text-align: center;
	width: 463px;
	height: 30px;
	position: absolute;
	z-index: 500;
	right: 22px;
	bottom: 6px;
}

.pageProductsCase h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 27px;
	right: 67px;
	font-weight: normal;
}

.pageProductsCase .scroller{
	margin-top: 10px;
	height: 398px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 36px;
}
.pageProductsCase .scroller::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.pageProductsCase .scroller::-webkit-scrollbar-track {
  background: #CDCDCD;
}

/* Handle */
.pageProductsCase .scroller::-webkit-scrollbar-thumb {
  background: #228114;
}

/* Handle on hover */
.pageProductsCase .scroller::-webkit-scrollbar-thumb:hover {
  background: #228114;
}


.pageProductsCase .listBox {
	position: absolute;
	z-index: 500;
	top: 72px;
	/*right: 36px;*/
	right: 0px;
	width: 635px;
}
.pageProductsCase .listBox .box1 {
	float: left;
	height: 102px;
	width: 635px;
}
.pageProductsCase .listBox .box1 .text {
	float: left;
	width: 190px;
	font-size: 17px;
	line-height: 102px;
	text-align: right;
}
.pageProductsCase .listBox .box1 .text a {
	text-decoration: none;
	color: #000;
	padding-right: 5px;
	padding-left: 5px;
}
.pageProductsCase .listBox .box1 .text a:hover {
	color: #FFF;
	background-color: #666;
	text-decoration: none;
}

.pageProductsCase .listBox .box1 .classBox {
	float: left;
	width: 370px;
	height: 100px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #bebebe;
}
.pageProductsCase .listBox .box1 .classBox a {
	height: 86px;
	width: 86px;
	float: left;
	margin-top: 8px;
}
.pageProductsCase .listBox .box1 .classBox a img {
	height: 86px;
	width: 86px;
}
.pageProductsCase .listBox .box1 .moreBox {
	float: left;
	height: 102px;
	width: 75px;
	position: relative;
	font-family: Arial, "Helvetica Condensed", sans-serif, "新細明體";
}
.pageProductsCase .listBox .box1 .moreBox a {
	font-size: 14px;
	color: #333;
	text-decoration: none;
	position: absolute;
	z-index: 200;
	left: 4px;
	bottom: 4px;
	display: block;
}
.pageProductsCase .listBox .box1 .moreBox a:hover {
	text-decoration: underline;
	color: #666;
}
.pageProductsList h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 27px;
	right: 67px;
	font-weight: normal;
}
.pageProductsList .menuBox {
	position: absolute;
	z-index: 500;
	left: 209px;
	top: 89px;
	max-height: 310px;
	background-image: url(../images/common_images/bg_04.png);
	padding: 20px;
	overflow: hidden;
}
.pageProductsList .menuBox ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	line-height: 32px;
}
.pageProductsList .menuBox ul li {
}
.pageProductsList .menuBox ul li a {
	text-decoration: none;
	color: #000;
	display: block;
	padding-right: 20px;
	padding-left: 20px;
	margin-top: 2px;
	margin-bottom: 2px;
}
.pageProductsList .menuBox ul li a:hover {
	color: #FFF;
	background-color: #666;
	text-decoration: none;
}

.pageProductsList .menuBox ul li .onActivor {
	color: #FFF;
	display: block;
	padding-right: 20px;
	padding-left: 20px;
	text-decoration: none;
	background-color: #666;
}
.pageProductsList .listBox {
	position: absolute;
	z-index: 500;
	top: 75px;
	right: 45px;
	width: 460px;
	height: 366px;
}
.pageProductsList .listBox .box1 {
	float: left;
	width: 100%;
}
.pageProductsList .listBox .box1 .classBox {
	float: left;
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #bebebe;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	height: 100px;
}
.pageProductsList .listBox .box1 .classBox .bigImages {
	height: 100px;
	width: 100px;
	float: left;
}
.pageProductsList .listBox .box1 .classBox a.title {
	float: left;
	width: 360px;
	font-size: 18px;
	color: #ff7e00;
	line-height: 22px;
	height: 22px;
	text-decoration: none;
}
.pageProductsList .listBox .box1 .classBox a:hover.title {
	text-decoration: underline;
}
.pageProductsList .listBox .box1 .classBox .desc {
	float: left;
	height: 68px;
	width: 360px;
	font-size: 13px;
	margin-top: 10px;
	overflow: hidden;
}
.pageProductsList .listBox .box1 .classBox a.more {
	position: absolute;
	z-index: 500;
	right: 0px;
	font-size: 13px;
	bottom: 15px;
	color: #000;
	text-decoration: none;
	display: block;
}
.pageProductsList .listBox .box1 .classBox a:hover.more {
	color: #666;
	text-decoration: underline;
}
.pageProductsList .listBox #pageTags {
	line-height: 30px;
	position: absolute;
	z-index: 500;
	left: 0px;
	text-align: center;
	width: 460px;
	bottom: -30px;
}

.pageProductsList .detailBox {
	position: absolute;
	z-index: 500;
	top: 82px;
	right: 40px;
}
.pageProductsList .detailBox #scrollpane {
	float: left;
	height: 355px;
	width: 465px;
	overflow: auto;
}
.pageProductsList .detailBox .backBox {
	line-height: 30px;
	height: 30px;
	width: 465px;
	position: absolute;
	z-index: 500;
	left: 0px;
	bottom: -30px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
	text-align: center;
}
.pageProductsList .detailBox .backBox a {
	color: #666;
	text-decoration: none;
	font-size: 12px;
}
.pageProductsList .detailBox .backBox a:hover {
	color: #333;
}
.pageProductsDetail h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 27px;
	right: 67px;
	font-weight: normal;
}
.pageProductsDetail .menuBox {
	font-size: 16px;
	line-height: 26px;
	color: #333;
	height: 26px;
	position: absolute;
	z-index: 500;
	left: 382px;
	top: 79px;
	text-align: center;
}
.pageProductsDetail .menuBox a {
	color: #333;
	text-decoration: none;
	margin-right: 7px;
	margin-left: 7px;
}
.pageProductsDetail .menuBox a:hover {
	color: #FFF;
	background-color: #666;
	margin-right: 7px;
	margin-left: 7px;
}



.pageProductsDetail .detailBox {
	width: 840px;
	margin-top: 90px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	min-height: 320px;
	padding-top: 30px;
}
.pageProductsDetail .detailBox img {
	  max-width:830px;		//設定載入的圖片寬度最大為120
      height:inherit;		//自適應高度(可以超過120，因為等比縮放，所以有可能寬縮放到120後高度高於120)
      width:expression(document.body.clientWidth>830?”830px”:”auto”);	//圖片的判斷式，設定超過120就縮放
      overflow:hidden;		//超過隱藏
}

.pageProductsDetail .backBox  {
	line-height: 30px;
	height: 30px;
	width: 100%;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
	text-align: center;
	float: left;
}
.pageProductsDetail .backBox a  {
	color: #666;
	text-decoration: none;
	font-size: 12px;
}
.pageProductsDetail .backBox a:hover {
	color: #333;
}

.pageContact h3.title {
	font-size: 30px;
	color: #7e7c7c;
	margin: 0px;
	padding: 0px;
	position: absolute;
	z-index: 500;
	top: 36px;
	right: 40px;
	font-weight: normal;
}
.pageContact .mapBox {
	position: absolute;
	z-index: 500;
	height: 362px;
	width: 387px;
	left: 92px;
	top: 91px;
}

.pageContact .infoBox {
	position: absolute;
	z-index: 500;
	width: 425px;
	top: 89px;
	right: 17px;
	line-height: 20px;
}
.pageContact .infoBox .companyName {
	font-size: 20px;
	line-height: 30px;
}
.pageContact .infoBox a {
	color: #000;
	text-decoration: none;
}
.pageContact .infoBox a:hover {
	text-decoration: underline;
}
.pageContact .formBox {
	position: absolute;
	z-index: 500;
	width: 349px;
	top: 204px;
	left: 549px;
}
#formBox {
	margin: 0px;
	padding: 0px;
	float: left;
}
#formBox h3 {
	padding: 0px;
	font-size: 18px;
	color: #ff9600;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#formBox table {
	float: left;
	font-size: 13px;
	border: 2px solid #ffa422;
	width: 330px;
}
#formBox table th {
	font-weight: normal;
	color: #000;
	width: 40px;
	text-align: right;
}
#formBox table td {
}
#formBox table input[type=text] {
	background-color: #fde1ba;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 12px;
	width: 100%;
	color: #333;
	height: 22px;
	line-height: 22px;
}
#formBox table textarea {
	background-color: #fde1ba;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 12px;
	width: 100%;
	color: #333;
}
.float_right_div{
	position: fixed;
	top: 530px;
	left: calc(50% + 445px);
	z-index: 999;
}
.float_right_div a{
	display: inline-block;
}
.float_right_div a img{
	width: 48px;
}
.float_right_div a:hover{
	opacity: 0.5;
}
.owl-home-slider .owl-dots{
	position: relative;
	z-index: 111;
	text-align: center;
	margin-top: -25px;
	padding-bottom: 15px;
}
.owl-home-slider .item{
	position: relative;
}
.owl-home-slider .item span{
	display: inline-block;
	position: absolute;
	right: 30px;
	top: 50px;
	font-size: 30px;
	color: #333;
}
.owl-home-slider .owl-dots .owl-dot{
	padding: 0 7px !important;
}
.owl-home-slider .owl-dots .owl-dot span{
 display: inline-block;
 width: 10px;
 height: 10px;
 background-color: rgba(0,0,0,0.5);
 border-radius: 100px;
}
.owl-home-slider .owl-dots .owl-dot.active span{
	background-color: #fff;
}