@charset "utf-8";

/* CSS Document */
html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
body { background:url(langs/tw/images/baihsiang-bg.jpg) repeat; font-size: 16px; color:#414141; line-height: 160%; font-family:微軟正黑體, Arial, Helvetica; }
input, select, button, textarea { font-size: 16px; font-family: 微軟正黑體, Arial, Helvetica; }
button { font-family:微軟正黑體, Arial, sans-serif; border:0; cursor:pointer; }
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button; }
ul, li { list-style-type:none; }
a { text-decoration:none; color:#414141; border:none; outline:none; }
a img { border:0; outline:none; }
a:hover { color:#f67a00; }

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}


/*---------------layout---------------------*/
#wrapper{ width:100%; height:100%; margin:0; padding:0; position: relative; }
#main-wrap{ width:1100px; height:100%; margin:0 auto; padding:0 0 50px 0; }
#main-wrap02{ width:1100px; height:100%; margin:0 auto; padding:0 0 100px 0; min-height:350px; }
#main-wrap03{ width:900px; height:100%; margin:0 auto; padding:0 0 100px 0; }
#main-wrap04{ width:1100px; height:100%; margin:0 auto; }
#main-wrap05{ width:1100px; height:100%; margin:0 auto; padding:0 0 130px 180px; position: relative; }


#header{width:100%; height:355px; position:relative; }
#header h1{width:154px; height:109px; top:50px; left:50px; position:absolute; z-index:20; }


#navi{ width:820px; height:292px; top:25px; left:280px; position:absolute; z-index:100; }
#navi ul{ float:left; list-style-type: none; }
#navi ul li{ float:left; list-style-type: none; }
#navi ul li ol{ float:right; display:none; list-style:none; } 
#navi ul li:hover ol{display:block; }
#navi ul li ol li{ float:left; display:block; } 
#navi ul li ol li:last-child{ margin:0 13px 0 0; }

#contact-icon{width:auto; height:147px; top:25px; right:48px; position:absolute; z-index:21; }
#contact-icon ul{list-style-type: none; }
#contact-icon li{float:left; }

#submenu-wrap { width:1100px; margin:0 auto; padding:20px 0 20px 0; border-top:1px solid #717171; border-bottom:1px solid #717171; }
#submenu-wrap02 { width:921px; padding:20px 0 20px 0; border-top:1px solid #717171; border-bottom:1px solid #717171; }
#submenu-block { margin:0 auto; display:table; }

#submenu { text-align:center; }
#submenu ul{ list-style-type: none; }
#submenu li{ float:left; font-size:24px; font-weight:bold; color:#595757; margin:0 56px 0 56px; text-align:center; }
#submenu li a{ color:#595757; padding:0 0 0 18px; background:url(langs/tw/images/icon-01.png) no-repeat left 12px; }
#submenu li a:hover{ color:#9abb31; background:url(langs/tw/images/icon-01-over.png) no-repeat left 12px; }

#submenu02 { text-align:center; }
#submenu02 ul{ list-style-type: none; }
#submenu02 li{ float:left; font-size:20px; font-weight:bold; color:#595757; margin:0 0 0 35px; text-align:center; }
#submenu02 li a{ color:#595757; padding:0 0 0 18px; background:url(langs/tw/images/icon-01.png) no-repeat left 9px; }
#submenu02 li a:hover{ color:#9abb31; background:url(langs/tw/images/icon-01-over.png) no-repeat left 9px; }
#submenu02 li:first-child{ margin-left:0; }


#gotop { display:none; position: fixed; right: 50px; bottom: 210px; z-index: 999; width: 45px; height: 45px; cursor: pointer; }




/*---------------index---------------------*/
#gallerya { position:relative; width:1100px; height:807px; }
#gallerya div {position:absolute; width:1100px; height:807px; }
#gallerya div img{ width:1100px; height:807px;}





/*---------------product---------------------*/
.prod-banner{ margin:0 0 50px 0; clear:both; }

.prod-point{ width:230px; margin:0 auto; font-weight:bold; margin-bottom:30px; padding:0 0 0 20px; background:url(langs/tw/images/icon-01-over.png) left 9px no-repeat; }

.prod-list{ float:left; margin:0 0 55px 0; }
.prod-list ul {list-style-type:none; width:200px; margin:0 0 0 22px; float:left; }
.prod-list ul:first-child {margin-left:0; }
.prod-list li.pics{width:200px; height:215px; display:block; }
.prod-list li.prodname {font-size:18px; font-weight:bold; color:#595757; text-align:center; font-family: "Open Sans",微軟正黑體,Helvetica,Arial,sans-serif; line-height:25px; }
.prod-list li.prodname a{color:#595757; }
.prod-list li.prodname a:hover{text-decoration:none; color:#9abb31; }
.prod-list li.capacity {font-size:16px; font-weight:bold; color:#595757; text-align:center; }
.unit-green { width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#6d8f33; margin-top:10px; line-height:32px; }
.unit-red {width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#b52125; margin-top:10px; line-height:32px; }
.unit-brown {width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#9f694e; margin-top:10px; line-height:32px; }
.unit-black {width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#231815; margin-top:10px; line-height:32px; }
.unit-purple {width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#9a5474; margin-top:10px; line-height:32px; }
.unit-white {width:33px; height:33px; margin:0 auto; border-radius:17px; font-size:17px; font-weight:bold; color:#595757; text-align:center; background-color:#fff; margin-top:10px; line-height:32px; }


.prod-line{ width:1100px; margin:0 0 35px 0; border-bottom:1px solid #939393; clear:both; }

.prod-cate-bg01{ width:458px; height:354px; top:680px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-03-2.png) no-repeat; }
.prod-cate-bg02{ width:411px; height:415px; bottom:190px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-03-3.png) no-repeat; }
.prod-cate-bg03{ width:289px; height:157px; top:455px; right:160px; position:absolute; z-index:-1; background:url(langs/tw/images/cloud-03-2.png) no-repeat; }
.prod-cate-bg04{ width:315px; height:485px; top:585px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-01-2.png) no-repeat; }
.prod-cate-bg05{ width:333px; height:410px; bottom:180px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-01-3.png) no-repeat; }
.prod-cate-bg06{ width:427px; height:449px; top:570px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-02-2.png) no-repeat; }
.prod-cate-bg07{ width:371px; height:508px; bottom:320px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-02-3.png) no-repeat; }
.prod-cate-bg08{ width:410px; height:545px; top:680px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-04-3.png) no-repeat; }
.prod-cate-bg09{ width:457px; height:395px; bottom:190px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-04-2.png) no-repeat; }
.prod-cate-bg10{ width:410px; height:373px; top:680px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-04-4.png) no-repeat; }
.prod-cate-bg11{ width:457px; height:395px; bottom:190px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/prod-04-5.png) no-repeat; }




#prod-wrap { width:960px; float:left; padding:0 41px 0 99px; position:relative; }
#prod-content { width:360px; float:left; margin:50px 0 0 0; }
.p-text-con{ font-size: 16px; color: #414141; padding:16px 0 16px 0; margin:0 0 20px 0; border-top:1px solid #888888; border-bottom:1px solid #888888; line-height:30px; }
.prod-name { font-size: 21px; font-weight:bold; color:#595757; padding:0 0 5px 20px; background:url(langs/tw/images/icon-02.png) no-repeat left 10px; }
.prod-capacity { float:left; font-size: 19px; font-weight:bold; color:#595757; margin:4px 10px 0 20px; }
.unit-green02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#6d8f33; line-height:32px; }
.unit-red02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#b52125; line-height:32px; }
.unit-brown02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#9f694e; line-height:32px; }
.unit-black02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#231815; line-height:32px; }
.unit-purple02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#fff; text-align:center; background-color:#9a5474; line-height:32px; }
.unit-white02 { float:left; width:33px; height:33px; border-radius:17px; font-size:17px; font-weight:bold; color:#595757; text-align:center; background-color:#fff; line-height:32px; }


#pic-con { float:left; width:600px; height:645px; text-align:center; }
.btn-next{ position:absolute; top:323px; right:0; z-index:11; }
.btn-prev{ position:absolute; top:323px; left:0; z-index:11; }
.btn-back{ position:absolute; top:160px; left:0; z-index:11; }

.prod-con-bg01{ width:241px; height:131px; top:118px; right:480px; position:absolute; z-index:-1; background:url(langs/tw/images/cloud-03-1.png) no-repeat; }
.prod-con-bg02{ width:528px; height:452px; top:-129px; right:-10px; position:absolute; z-index:-1; background:url(langs/tw/images/product-01-bg.png) no-repeat; }
.prod-con-bg03{ width:453px; height:399px; top:-52px; right:-50px; position:absolute; z-index:-1; background:url(langs/tw/images/product-02-bg.png) no-repeat; }
.prod-con-bg04{ width:453px; height:399px; top:28px; right:-35px; position:absolute; z-index:-1; background:url(langs/tw/images/product-02-bg.png) no-repeat; }


.construction{ margin:140px 0 190px 0; text-align:center; }




/*---------------news---------------------*/
.news-titleimg{ margin:20px 0 50px 0; }

.news-list{ width:1100px; float:left; }
.news-list ul{ list-style-type: none; float:left; width:1100px; margin:0 0 25px 0; padding:0 0 30px 0; border-bottom:1px solid #c4c5bf; }
.news-list li.newspic{ width:240px; height:100px; float:left; margin:5px 35px 0 0; display:block; }
.news-list li.newsblock{ width:825px; float:left; }
.newsdate{ font-size: 14px; color: #848484; font-family: "Open Sans", 微軟正黑體, Helvetica, Arial; line-height:20px; }
.newstitle{ font-size: 20px; font-weight: bold; color: #82a70c; margin:4px 0 6px 0; }
.newstitle a{ color:#82a70c;}
.newstitle a:hover{ color:#b48a37; text-decoration:none;}
.newstext{ color:#4c4c4c; }

.news-title-block{ width:1099px; border-bottom:1px solid #c4c5bf; padding:0 0 15px 1px; }
.newstitle02{ width:900px; float:left; font-size: 21px; font-weight: bold; color: #82a70c; line-height: 25px; }
.newsdate02{ width:100px; float:right; font-size: 14px; color: #848484; margin:3px 0 0 0; font-family: "Open Sans", 微軟正黑體, Helvetica, Arial; text-align:right; }
.news-con {padding:28px 0px 28px 2px; clear:both; border-bottom:1px solid #c4c5bf; line-height:30px; }
.news-back {margin:23px 0 0 0; text-align:right; }


.page_block{ margin:0 auto; display:table; clear:both; }

.page{ font-size: 13px; color:#828282; text-align:center; margin:20px 0 0 0; height:100%; }
.page ul{ list-style-type: none; margin:0px ; }
.page li { float:left; margin:0px 7px 0px 0px; text-align:center; }
.page li a{color:#727272; width:25px; height:25px; padding:3px; border:2px solid #b4b4b4; display:block; text-decoration:none; line-height: 25px; }
.page li a:hover{color:#7fa700; border:2px solid #9abb31; display:block; text-decoration:none; }
.page li.on{color:#7fa700; font-weight: bold; width:25px; height:25px; padding:3px; border:2px solid #9abb31; display:block; line-height: 25px;}
.page li:last-child { margin-right:0;}




/*---------------about & history & certificate---------------------*/
#banner-bg{ width: auto; height: 719px; min-width: 100%; min-height: 100%; background:url(langs/tw/images/about_01.png) top center no-repeat; clear:both; }
#banner-bg02{ width: auto; height: 705px; min-width: 100%; min-height: 100%; background:url(langs/tw/images/about_17.png) top center no-repeat; clear:both; }

.about-text{ font-size:16px; color: #424242; margin:0 0 60px 0; padding:45px 0 45px 0; border-bottom:1px solid #bbbbbb; line-height:32px; }
.about-text02{ font-size:16px; color: #424242; margin:0 0 60px 0; padding:0 0 45px 0; border-bottom:1px solid #bbbbbb; line-height:32px; }
.about-prefix{ font-size:23px; color: #424242; }
.about-con{ float:left; width:1100px; margin:0 0 70px 0; padding:0 0 55px 0; border-bottom:1px solid #bbbbbb; }
.about-pic{ float:left; width:696px; margin:0 30px 0 0; }
.about-text03{ float:left; width:374px; font-size:16px; color: #424242; margin:130px 0 0 0; line-height:34px; }
.about-text04{ width:1100px; margin:0 auto; font-size:16px; color: #424242; padding:10px 0 180px 0; line-height:32px; }

.about-bg01{ width:293px; height:476px; top:1430px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/about_06.png) no-repeat; }
.about-bg02{ width:507px; height:423px; bottom:925px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/about_15.png) no-repeat; }

.noBorder{ padding-bottom:0; border-bottom:none; }


.history-img-block{ height:165px; position: relative; }
.history-img{
	width: 618px;
	height: 235px;
	top: -78px;
	left: 1px;
	position: absolute;
	z-index: -1;
	background: url(langs/tw/images/history_06.png) no-repeat;
}

.history{ width:900px; float:left; }
.history ul{ width:900px; list-style-type: none; float:left; padding:20px 0 20px 0; border-top:1px solid #c4c5bf; }
.history li.titleblock{ width:160px; height:44px; float:left; font-size:24px; font-weight:bold; color: #fff; padding:13px 0 10px 0; margin:0 25px 0 15px; background-color:#595757; text-align:center; line-height:20px; }
.history li.titleblock span{ font-size:14px; }
.history li.titleblock02{ width:160px; height:44px; float:left; font-size:24px; font-weight:bold; color: #fff; padding:13px 0 10px 0; margin:0 25px 0 15px; background-color:#9abb30; text-align:center; line-height:20px; }
.history li.titleblock02 span{ font-size:14px; }
.history li.detail{ width:690px; float:left; margin:5px 10px 0 0; line-height:26px; }
.history li.detail02{ width:690px; float:left; margin:0 10px 0 0; line-height:67px; }

.history-bg01{ width:282px; height:867px; top:730px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/history_12.png) no-repeat; }
.history-bg02{ width:511px; height:1121px; bottom:470px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/history_03.png) no-repeat; }


.certificate-bg01{ width:259px; height:142px; top:545px; left:185px; position:absolute; z-index:-1; background:url(langs/tw/images/cloud-certificate-01.png) no-repeat; }
.certificate-bg02{ width:183px; height:142px; top:420px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/cloud-certificate-02.png) no-repeat; }




/*---------------teagarden---------------------*/
.tea-pic{ padding:55px 0 0 0; }
.tea-con{ background:url(langs/tw/images/teagarden_02.png) right bottom no-repeat; min-height:700px; }

.tea-feature{ margin:50px 0 0 0; }
.tea-feature ul{ width:100%; list-style-type: none; padding:25px 0 25px 0; border-bottom:1px solid #c4c5bf; }
.tea-feature ul:last-child{ border-bottom:none; }
.tea-feature li.titleimg{ width:228px; display: inline-block; margin:0 30px 0 0; vertical-align: middle; }
.tea-feature li.text{ width:838px; display: inline-block; font-size:17px; padding:3px 0 27px; line-height:32px; vertical-align: middle; }
.tea-feature li img{ display:block; }

.tea-feature02{ width:515px; float:left; margin:55px 0 0 0; }
.tea-feature02 ul{ width:515px; list-style-type: none; float:left; padding:23px 0 25px 0; border-bottom:1px solid #c4c5bf; }
.tea-feature02 ul:first-child{ border-top:1px solid #c4c5bf; }
.tea-feature02 li.titleimg{ width:147px; float:left; margin:5px 25px 0 0; }
.tea-feature02 li.text{ width:343px; float:left; line-height:27px; }
.tea-feature02 li img{ display:block; }

.text-space{ padding:15px 0 0 0; }
.text-space02{ padding:12px 0 15px 0; }

.tea-photo{ width:375px; float:left; margin:55px 0 0 40px; }

.teagarden-bg01{ width:236px; height:259px; top:440px; left:-57px; position:absolute; z-index:-1; background:url(langs/tw/images/teagarden_01.png) no-repeat; }
.teagarden-bg02{ width:171px; height:135px; top:500px; left:0; position:absolute; z-index:-1; transform: rotateY(180deg); background:url(langs/tw/images/teagarden_05.png) no-repeat; }
.teagarden-bg03{ width:171px; height:135px; bottom:200px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/teagarden_05.png) no-repeat; }




/*---------------SGS---------------------*/
.sgsList{ margin:55px 0 0 0; }
.sgsList ul{ width:340px; list-style-type: none; display: inline-block; margin:0 35px 60px 0; vertical-align: top; }
.sgsList ul:nth-child(3n){ margin-right: 0; }
.sgsList li.photo{ width:340px; border:1px solid #c4c4c4; }
.sgsList li.sgsName{ margin-top: 15px; text-align: center; line-height:28px; }
.sgsList ul:hover li.photo { border:1px solid #9abb31; }
.sgsList ul:hover li.sgsName{ color: #9abb31; }
.sgsList li img{ display: block; }




/*---------------photo & video---------------------*/
ul.photoList { margin-top: 50px; }
ul.photoList li { width:246px; list-style-type: none; display: inline-block; margin: 0 34px 60px 0; vertical-align: top; }
ul.photoList li:nth-child(4n) { margin-right: 0; }
ul.photoList li figure { width:246px; margin: 0; }
ul.photoList li h3 { font-size:18px; margin-top: 15px; text-align: center; line-height:28px; }
ul.photoList li:hover h3 { color: #9abb31; }
ul.photoList li img { display: block; width: 100%; height: auto; }


ul.video { width:850px; margin: 0 auto; margin-top: 50px; }
ul.video li { width:100%; list-style-type: none; margin-bottom: 50px; }



/*---------------contact---------------------*/
.contact-text{ padding:23px 5px 23px 5px; margin:0 0 23px 0; border-top:1px solid #bbbcb6; border-bottom:1px solid #bbbcb6; line-height:35px; }
.required{ float:right; margin:35px 0 0 0; }
.star{ font-size:17px; font-weight: bold; color: #e60012; margin:0 3px 0 0; }

.contact-form td{ padding-top:10px; padding-bottom:10px; border-bottom:1px solid #bbbcb6;  }
.field-name{padding-left:5px; }
.star02{ font-size:15px; color: #e60012; margin:0 0 0 3px; }
.contact-btn{ margin:35px 5px 20px 0; text-align:right; }
.contact-success{ color: #e60012; padding:65px 0 80px 0; border-top:1px solid #bbbcb6; text-align:center; line-height:35px; }


.contact-bg01{ width:225px; height:220px; bottom:165px; left:0; position:absolute; z-index:-1; background:url(langs/tw/images/contact_09.png) no-repeat; }
.contact-bg02{ width:257px; height:236px; top:375px; right:0; position:absolute; z-index:-1; background:url(langs/tw/images/contact_06.png) no-repeat; }




/*---------------form---------------------*/
form { margin:0; padding: 0; }
.input { border: none; width: 1005px; height: 26px; COLOR: #333333; background-color: transparent; padding:3px 10px 3px 10px; }
.textarea {border: none; width: 1005px; height: 135px; COLOR: #333333; background-color: transparent; padding:5px 10px 5px 10px; }
.select { border: 1px solid #c2c2c2; color: #505050; height:27px; padding:3px 3px 3px 3px; font-family: Arial, Helvetica, sans-serif; }
.option { font-size:12px; color:#333; font-weight:bold;}




/*---------------------------- footer css----------------------------------------------------- */
#footer{ padding:33px 50px 33px 50px; background-color:#fff; }
.footer-info{ font-size:16px; font-weight:bold; color:#595757; float:left; font-family: "Open Sans",微軟正黑體,Helvetica,Arial,sans-serif; line-height:28px; }
.copyright, .copyright a{ font-size:12px; font-weight:normal; color:#717171; }
.copyright a:hover{ color: #9abb30; }


.footer-slogan{ font-size:13px; font-weight:bold; color:#9abb30; float:right; margin:19px 0 0 0; line-height:21px; }