@charset "utf-8";



/* CSS Document */

html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, figure, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }

body { background: #dcdddd; font-size: 16px; color:#515151; line-height: 170%; font-family: "Open Sans", 微軟正黑體, Arial, Helvetica; }

input, select, button, textarea { font-size: 15px; font-family: "Open Sans", 微軟正黑體, Helvetica, Arial; }

button { 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:#515151; -webkit-transition: all 0.4s ease;	-moz-transition: all 0.4s ease;	-o-transition: all 0.4s ease; transition: all 0.4s ease; }

a img { border:0; outline:none; }

a:hover { color:#00ada5; }



.clearfix:before,

.clearfix:after {

  display: table;

  content: " ";

}

.clearfix:after {

  clear: both;

}



* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}







/*---------------layout---------------------*/

.wrap {	width: 1200px; margin: 0 auto; padding: 0 15px; }



header { width: 100%; height: 90px; position: fixed; top: 0; left: 0; z-index: 9999; background-color: #00ada5; }

header h1 { width: 219px; height: 90px; float: left; display: block; }





.nav { width: 850px; display:block; float:right;  }

.nav ul { list-style-type:none; margin-top: 32px; }

.nav ul li { float:left; width:165px; font-size: 15px; color:#fff; border-right: 1px solid #fff; text-align:center; }

.nav ul li:first-child { border-left: 1px solid #fff; }

.nav ul li a { color:#fff; display:block; }

.nav ul li a:hover { color: #231815; }



.nav ul li > a.btn-1 { padding-left: 45px; background: url(images/navicon-01.png) no-repeat 23px 0; }

.nav ul li > a.btn-2 { padding-left: 38px; background: url(images/navicon-02.png) no-repeat 34px 0; }

.nav ul li > a.btn-3 { padding-left: 35px; background: url(images/navicon-03.png) no-repeat 15px 0; }

.nav ul li > a.btn-4 { padding-left: 40px; background: url(images/navicon-04.png) no-repeat 13px 0; }

.nav ul li > a.btn-5 { padding-left: 38px; background: url(images/navicon-05.png) no-repeat 11px 0; }



.nav ul li:hover > a.btn-1 { background: url(images/navicon-01-hover.png) no-repeat 10px 0; }

.nav ul li:hover > a.btn-2 { background: url(images/navicon-02-hover.png) no-repeat 10px 0; }

.nav ul li:hover > a.btn-3 { background: url(images/navicon-03-hover.png) no-repeat 0; }

.nav ul li:hover > a.btn-4 { background: url(images/navicon-04-hover.png) no-repeat 2px 0; }

.nav ul li:hover > a.btn-5 { background: url(images/navicon-05-hover.png) no-repeat 2px 0; }





.bannerBox { width:100%; height:386px; position:relative; margin-top: 90px; clear: both; } 

.banner-01 { background:url(images/banner-01.jpg) no-repeat center; } 

.banner-02 { background:url(images/banner-02.jpg) no-repeat center; } 

.banner-03 { background:url(images/banner-03.jpg) no-repeat center; } 

.banner-04 { background:url(images/banner-07.jpg) no-repeat center; } 

.banner-05 { background:url(images/banner-08.jpg) no-repeat center; } 





.content { width:1200px; height:100%; margin: 0 auto; padding: 30px 0 30px 0; position:relative; background-color: #fff; }





.bread { font-size:15px; color:#00ada5; margin: 0 60px 30px 0; text-align: right; }

.bread a { color: #00ada5; }

.bread a:hover { color: #007873; }

.bread .current { font-weight: bold; }

.bread-arr{ margin: 0 12px; vertical-align: top; }

.bread-home { vertical-align: text-top; }



.bread02 { font-size:16px; color:#00ada5; margin-top: 30px; }

.bread-arr02{ margin: 0 18px 0 22px; }

.bread-home02 { vertical-align: middle; }



.left-wrap { width: 290px; min-height: 300px; float: left; margin-bottom: 80px; background: url(images/page-icon-01.jpg) no-repeat top left; }

.left-icon { background: url(images/page-icon-02.jpg) no-repeat top left; }

.left-icon02 { background: url(images/page-icon-03.jpg) no-repeat top left; }



.leftnavi-title, .mainTitle { font-size: 36px; color: #595758; font-weight: bold; margin: 105px 0 21px 50px; }

.mainTitle { margin: 30px 0 10px 0; }

.title-reduce { letter-spacing: -1px; }





.leftnavi{ margin-left: 50px; }

.leftnavi dl{ display: block; }

.leftnavi dt h3{ font-size: 17px; color: #474747; font-weight: normal; list-style: none; line-height: 25px; }

.leftnavi dt h3 a{ color: #474747; display: block; padding: 12px 0 12px 20px; background: url(images/arr.png) no-repeat 2px 21px; }

.leftnavi dt h3 a:hover, .leftnavi dt.current h3 a { color: #00ada5; background: url(images/arr-hover.png) no-repeat 2px 21px; }



.leftnavi dd { font-size: 15px; font-style: italic; font-weight: bold; padding: 0 0 4px 20px; display:block; line-height: 25px; }

.leftnavi dd a{ color:#585858; }

.leftnavi dd a:hover, .leftnavi dd.current a { color:#00ada5; }





.right-wrap { width: 900px; min-height: 600px; float: right; padding: 3px 60px 50px; border-left: 1px solid #afafaf; }

.prodlistRight { padding: 3px 0 0 55px; }









/*---------------index---------------------*/

.index-bannerImg { width:100%; height:auto; max-height:386px; overflow:hidden; position:relative; left:0; top:0; margin-top: 90px; clear: both; } 

.index-bannerImg > section { display:block;	width:100%;	height:auto; transition: left 1s ease; -moz-transition: left 1s ease; -webkit-transition: left 1s ease; -o-transition: left 1s ease;	 } 

.index-bannerImg > section > a > img { width:100%; height:auto; display: block; }

.index-bannerImg > p.switch { position:absolute; bottom:15px; left:50%; z-index:3;	-ms-transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); width:auto; padding:0; margin:0; }

.index-bannerImg > p.switch > a { display:inline-block; width:12px; height:12px; border-radius:50%; background-color:#fff; filter:alpha(opacity=55); background:rgba(255, 255, 255, 0.55); text-indent: 20em; overflow:hidden; margin:5px; }

.index-bannerImg > p.switch > a:hover, .index-bannerImg > p.switch > a.active { background-color:#fff; }





.index-left { width: 305px; min-height: 410px; float: left; padding: 65px 35px 55px; background-color: #fff; }



.index-title { font-size: 26px; font-weight: bold; color:#585858; margin-bottom: 25px; }



.index-news { font-size: 15px; color:#585858; margin: 0 0 35px 2px; line-height: 27px; }

.index-more { text-align:right; }

.index-more02 { float: right; margin-top: 65px; }





.index-right { overflow: hidden; height: 410px; width: 865px; min-height: 410px; float: right; background:url(images/index-icon.png) no-repeat left 44px; }

.index-title-space { margin: 65px 0 0 125px;}





.index-product { margin: 60px 0 0 0; }
/*ul.index-product { margin: 60px 0 0 50px; }*/

.index-product li { text-align: center; width:239px; height:207px; margin: auto; /*float: left; margin-right: 48px;*/  -webkit-transition: all 0.4s ease;	-moz-transition: all 0.4s ease;	-o-transition: all 0.4s ease; transition: all 0.4s ease; }

.index-product li:hover {-webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); }

/*.index-product li:last-child { margin-right: 0; }*/

.index-product li img { border:1px solid #dcdddd; display: block; text-align: center; margin: auto;}
.index-product li:hover img { border:1px solid #00ada5; }




/*---------------product---------------------*/

.prod-cate { height:100%; }

.prod-cate ul { list-style-type:none; width:372px; margin:0 35px 45px 0; display: inline-block; vertical-align: top; }

.prod-cate li.pics { width:372px; height:321px; display:block; border:1px solid #bdbdbd; border-bottom: none; text-align:center; cursor:pointer; }

.prod-cate li.prodname {font-size:23px; color:#fff; font-style: italic; font-weight: bold; padding: 9px 0 11px; background-color:#040000; text-align:center; line-height: 28px; }

.prod-cate li.pics, .prod-cate li.prodname { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;	-o-transition: all 0.4s ease; transition: all 0.4s ease; }

.prod-cate ul:hover li.pics { border:1px solid #040000; border-bottom: none; }

.prod-cate ul:hover li.prodname { color:#00ada5; }





.prod-list { height:100%; }

.prod-list ul { list-style-type:none; width:247px; margin:0 19px 40px 0; display: inline-block; vertical-align: top; }

.prod-list li.pics { width:247px; height:214px; display:block; border:1px solid #cfcfcf; text-align:center; cursor:pointer; }

.prod-list li.prodname {font-size:18px; color:#585858; font-style: italic; font-weight: bold; margin-top: 13px; text-align:center; line-height: 25px; }

.prod-list ul, .prod-list li.pics, .prod-list li.prodname { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;	-o-transition: all 0.4s ease; transition: all 0.4s ease; }

.prod-list ul:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); }

.prod-list ul:hover li.pics { border:1px solid #00ada5; }

.prod-list ul:hover li.prodname { color:#00ada5; }

/*.prod-list ul:nth-child(3n) { margin-right:0; } */

.photo-mask { width: 100%; height: auto; overflow: hidden; position: relative; }







.prodName { font-size: 40px; line-height: 36px; font-family: Arial, 微軟正黑體, Helvetica; }

.prodCategory { font-size: 18px; margin: 5px 0 25px 2px; }

.prodName, .prodCategory { color:#585858; font-weight: bold; }



.mainPhoto { /*width:480px;*/ margin:0 auto; text-align: center; }



ul.smallImg { margin: 25px 0 40px 2px; }

ul.smallImg li { float: left; width: 175px; margin: 0 25px 20px 0; border: 1px solid #c8c8c8; cursor: pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

ul.smallImg li:nth-child(4n) {	margin-right: 0; }

ul.smallImg li:hover { border: 1px solid #00ada5; }

ul.smallImg li img { display: block; }





.prodTitle { font-size: 25px; color:#4c4c4c; font-weight: normal; padding: 11px 0 11px 17px; margin-bottom: 25px; background-color:#ddd; clear: both; font-family: Arial, 微軟正黑體, Helvetica; }



ul.videoList { margin: 0 0 10px 2px; }

ul.videoList li { float: left; width: 173px; margin: 0 27px 20px 0; cursor: pointer; position: relative; }

ul.videoList li:nth-child(4n) {	margin-right: 0; }

ul.videoList li .videoImg { display: block; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

ul.videoList li:hover .videoImg { opacity: 1.0; filter: alpha(opacity=100); }

ul.videoList li .view { width: 62px; height: 62px; position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -30px; z-index: 20; opacity: 1.0; filter: alpha(opacity=100); }



.prodDetail { margin: -3px 0 30px 15px; line-height: 30px; }
.prodDetail ul, .prodDetail ol { margin-left: 16px; }
.prodDetail li { list-style: disc; }
.prodDetail ol li { list-style: decimal; }



.specModel{ font-size: 18px; color:#fff; font-weight: normal; padding: 5px 0 5px 38px; margin: 0 2px 4px; background-color:#585858; }



.specTable { border-collapse: separate; border-spacing: 2px; margin-bottom: 25px; }

.specTable:last-child { margin-bottom: 0; }

.specTable th { font-size: 16px; color: #585858; padding: 5px 0 5px 38px; background-color: #e9e9e9; text-align: left; }

.specTable th.another { background-color: #f9f9f9; }

.specTable td { font-size: 16px; color: #4c4c4c; padding: 5px 0 5px 42px; background-color: #f4f4f4; }





.page {	padding-top: 10px; clear: both; }



.page ul { text-align: center; list-style: none; }

.page li { display: inline;	font-size: 13px; }

.page li > a, .page li > span {	color: #656565;	display: inline-block; padding: 3px 13px; background-color: #fff; border: 1px solid #b0b0b0; }

.page li > a:hover, .page li > a:focus, .page li > a.current { color: #fff;	text-decoration: none; background-color: #555; border: 1px solid #555; }

.page li > a i { font-size: 15px; }









/*---------------about & news & download---------------------*/

.about-wrap { width:880px; margin:0 auto; padding: 0 0 65px; }



.aboutTxt { padding-top: 24px; background:url(images/about-logo.png) no-repeat right 5px; line-height:30px; }

.aboutTitle{ font-size: 21px; color: #414141; font-weight: normal; margin-bottom: 22px; }





.newsBottom { padding-bottom: 40px; }



.newsList { margin-top: 34px; }

.newsList ul { width: 100%; list-style-type: none; float:left; margin-bottom: 45px; }

.newsList li.summary { font-size: 15px; color: #585858; margin-top: 22px; line-height: 26px; }



.newsTitle { width: 750px; float: left; font-size: 20px; color: #414141; line-height: 30px; }

.newsTitle a { color: #414141;}

.newsTitle a:hover { color: #00ada5; }

.newsDate { width: 110px; float: right; font-size: 14px; color: #979797; text-align: right; }

.newsTxt { color: #585858; padding: 23px 0 35px; clear:both; line-height: 28px; }



.back { float: right; min-width: 90px; height: 33px; font-size: 15px; color: #fff; text-align: center; padding:0 0 2px 0; background-color: #585858; display: block; border-radius: 4px; line-height: 33px; }

.back:hover, .back:focus{ background-color: #00ada5; color: #fff; }







.download { height:100%; }

.download ul { list-style-type:none; width:227px; margin:0 47px 45px 0; display: inline-block; vertical-align: top; }

.download li.pics { width:227px; height:287px; display:block; border:1px solid #bdbdbd; text-align:center; cursor:pointer; }

.download li.filename {font-size: 18px; color:#00ada5; font-style: italic; font-weight: bold; margin-top: 18px; text-align:center; line-height: 26px; }

.download li.pics, .download li.filename { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;	-o-transition: all 0.4s ease; transition: all 0.4s ease; }

.download ul:hover li.pics { border:1px solid #00ada5; }

.download ul:hover li.filename { color:#585858; }











/*---------------contact---------------------*/

.contact-txt{ font-size: 15px; margin: 0 0 22px 0; line-height: 26px; }



.contactTable { width:100%; border-collapse: collapse; border-spacing: 0; border: 1px solid #c3c3c3; }

.contactTable th, .contactTable td { color: #565656; padding: 12px 0; border: 1px solid #c3c3c3; vertical-align: middle; }

.contactTable th { font-size: 16px; font-weight: normal; padding-right: 12px; border-bottom: none; text-align: right; }

.contactTable td { text-align: left; padding-left: 20px; }



.star{ color: #e60012; margin:0 5px 0 0; }

.redTxt { color: #e60012; }





.submitBtn {  margin:0 auto; padding: 45px 0 0 0; display:table; }



.submit{ min-width: 125px; height:37px; display: inline-block; font-size: 16px; color: #fff; padding: 0 25px 1px; background-color: #00ada5; text-align: center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; line-height: 36px; }

.submit:hover, .submit:focus{ background-color: #222; }

.reset{ min-width: 125px; height:37px; display: inline-block; font-size: 16px; color: #fff; padding: 0 25px 1px; margin: 0 0 0 15px; background-color: #595959; text-align: center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; line-height: 36px; }

.reset:hover, .reset:focus{ background-color: #b8b8b8; }











/*---------------form---------------------*/

form { margin: 0; padding: 0; }



.input { border: #c3c3c3 1px solid; width: 450px; height: 34px; color: #555; background-color: #fff; padding: 3px 10px; }

.textarea {border: #c3c3c3 1px solid; width: 570px; height: 155px; color: #555; background-color: #fff; padding: 10px; }

.select { border: 1px solid #c3c3c3; color: #555; height:34px; padding:3px; }

.option { font-size:12px; color:#333; font-weight:bold;}



.code-input { width: 250px; margin:0 10px 0 0; vertical-align: bottom; }









/*---------------------------- footer css----------------------------------------------------- */

footer { background-color: #040000; padding: 35px 0; }



footer a { color: #fff; }

footer a:hover { color: #00ada5; }





.companyName { font-size: 17px; color: #fff; font-weight: normal; margin-right: 45px; display: inline-block; }

.address { font-size: 14px; color: #fff; display: inline-block; }

.footer-icon { margin-right: 9px; vertical-align: text-top; }

a.map { text-decoration: underline; }

a:hover.map { text-decoration: none; }





ul.footer-info { margin-top: 6px; }

ul.footer-info li { font-size: 14px; color: #fff; margin-right: 40px; display: inline-block; }