@charset "utf-8";
body {margin:0; padding:0; font-size:15px; line-height:160%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體'; background:#efefef; }
a{text-decoration:none;}
#defaultheader,#header, #footer, #defaultimg, .content, .langpage{width:100%; height:auto; float:left;}
.page{height:auto; position:relative; margin:auto auto; padding:auto auto;}
.block{height:auto; float:left;}
.rwdimg{width:100%; height:auto;}/*讓圖自適應用*/
*{box-sizing:border-box;}

/*header*/
#defaultheader{border-top:6px solid #d13a00;}
#header{position:fixed; z-index:200; background:#fff; border-bottom:1px solid #ccc;}
#footer{line-height:200%; background:#d6e0e2; text-align:center; font-size:13px; color:#333;}
.logo{height:auto; float:left;}
.logo img{max-width:100%; height:auto;}
.lang{border-radius:1em; border:1px solid #d13a00; font-weight:normal; width:6em; padding:0 1em; display:inline-block; font-size:12px; color:#666; line-height:140%; cursor:pointer; position:absolute; right:0; top:2.5em;}
.en, .ch{width:4em; height:auto; float:left;}
.ch{display:none;}
.show{position:absolute; right:0.3em;}
.langpage{background:#d13a00; color:#fff; font-size:13px; padding:0.2em 0; text-align:right;}
.langpage span{color:#b33506; padding:0 1em;}
.langpage a{color:#fff;}
.topmenu{float:right; margin-top:0.5em; color:#999;}
/*nav*/
.nav{float:right; width:72%; height:auto; text-align:right; padding-right:5em;}
.nav a{color:#585151; text-align:right; display:inline-block; font-family: 'Quicksand', sans-serif; font-weight:500; font-size:16px;}
.nav a:hover{color:#151012;}
.nav-m{width:100%; height:auto; float:left; display:none;}
.nav-m a{width:100%; height:auto; float:left; display:block; text-align:center; border-top:1px dotted #efefef; background:#fff; line-height:250%;}
.nav-m span{color:#999;}
.nav-m a:hover{background:#efefef;}
/*subnav*/
.subnav a{width:100%; color:#333; display:block;}
.subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
.subnav ul li{border-bottom:1px solid #ccc; padding-left:1em; }
.subnav ul li a{line-height:240%; background:url(images/icon2.jpg) no-repeat left center; padding-left:0.8em;}
.subnav ul li a:hover{color:#d16a39;}
.subnav ul li ul li{border-bottom:0; padding:0;}
.subnav ul li ul li a{font-size:14px; color:#666; line-height:180%; background:none;}
.level1 ul{display:none;}
/*defaultimg*/
#defaultimg{line-height:0;}
#defaultimg img{width:100%; height:auto;}


/*content*/
.content{background:#efefef;}
.side{height:auto; float:left; box-sizing:border-box;}
.side h3{background:#969696;}
.main{height:auto; float:left; box-sizing:border-box; line-height:180%; text-align:left; background:url(images/main-bg.png) repeat-x top;}
.htmlcode{width:100%; height:auto; float:left;}
.htmlcode img{max-width:100%; height:auto;}
.date, .date a{color:#666; font-size:15px;}
.btn{ background:#999; color:#fff; float:right; font-size:16px; font-weight:normal; border-radius:0.2em; line-height:100%; padding:0.3em 1.5em;}
.btn:hover{background:#333;}
.gn{ width:100%;}
.gn h3{ color:#d13a00; font-weight:bold;font-size: 17px;}
.gnr {width:60%; float:left;}
.gnl {width:40%;float: left;}
.gn a { color:#666;}
.gn a:hover{ color:#000;}


/*default page use*/
.default1{padding:0 1em; background:#fff;}
.dleft, .dright{height:auto; float:left; color:#6c6767;}
.dleft a, .dright a{color:#6c6767;}
.dleft a:hover, .dright a:hover{color:#333;}
.dleft div{height:auto; float:left;}
.dleft h2, .dright h2{background:url(images/default-tit-bg.jpg) repeat-x top; padding:0em; margin:0;}
.dleft h2 span, .dright h2 span, .btnmore{cursor:pointer; background:#CCC; color:#fff; float:right; font-size:12px; font-weight:normal; border-radius:0.2em; line-height:100%; padding:0.2em 0.5em; margin-top:2em;}
.dleft h2 span:hover, .dright h2 span:hover, .btnmore:hover{background:#333;}
.dleft div a{width:50%; height:auto; float:left; background:url(images/icon1.jpg) no-repeat left center; line-height:160%; padding:0.3em 0 0.3em 15px; }
.dright a{width:100%; height:auto; float:left; line-height:160%; padding:0.3em 0; border-bottom:1px dotted #ccc;}
.dright span{color:#2374e5;}
.dleft img, .dright img{max-width:100%; height:auto;}
.gallery .block{padding:1em;}
/*news*/
.newslist .block{width:100%; clear:both; margin:0.5em 0; border-bottom:1px solid #ccc;}
.newslist .block h3.tit:hover{color:#036;}
.newslist .block h3.tit{width:90%; float:left; color:#000000; margin-bottom:0; margin-top:0; font-weight:normal; text-align:left; cursor:pointer;}
.newslist .date{width:5em; height:auto; float:left;}
/*hr*/
.hr .block{width:100%; clear:both; margin:1em 0; border-bottom:1px solid #ccc;}
.hr .block h3.tit{width:100%; float:left; color:#044fd7; margin-bottom:0; margin-top:0; text-align:left;}
.hr .block p{width:100%; height:auto; float:right; display:block; margin:0; padding-bottom:0.2em;}


/*product*/
.product, .productdetail{}
.product, .productdetail div ul{ margin-left:-18px}
.product p a{ text-decoration:none; color:#666;}
.product .block{padding:1em;}
.product .block:hover{background:rgba(255,255,255,0.8);}
.product .block div{width:100%; height:auto; float:left;line-height:0; border:1px solid #ccc; position:relative; line-height:0; background:#fff; cursor:pointer;}
.product .block div p{position:absolute; right:5%; bottom:2%; line-height:160%; }
.product .block div p.classname{width:100%; height:auto; display:block; right:0; bottom:0; background:rgba(0,0,0,0.6); color:#fff; line-height:160%; padding:0.2em; margin:0;}
.productdetail h3.tit{color:#000000; border-bottom:0px solid #000000; width:100%; height:auto; padding:1em 0;}
/*product*/
.productdetail .block{padding:1em;}
.ProSmallPicBottom{width:100%; height:auto; float:left; padding:1em;}
.ProSmallPicTop{width:100%; height:auto; float:left;}
.link{border-radius: 3em;background-color:#666;color: #fff;padding: 1px 3px;font-size: 10px;}
.link:hover{background-color: #d13a00;}

/*tech*/
.tech .block{width:100%; clear:both; margin:0.5em 0; padding:1em; cursor:pointer;}
.tech .block div{ float:left; padding:0.2em; border:1px solid #ccc; line-height:0;}
.tech .block:hover{background:rgba(255,255,255,0.8);}
.tech .block h3.tit{float:right; color:#000000; margin-bottom:0; margin-top:0; padding-left:2%;}
.tech .block p{ height:auto; float:right; display:block; margin-top:0; padding-top:0; padding-left:2%;}
.techdetail h3.tit{color:#000000; border-bottom:1px solid #000000; width:100%; height:auto; padding:0; margin:0;}
/*input frame*/
.contact .block{height:auto; padding:0.5em 5%; text-align:left; float:left; width:100%;}
.contact .block input{height:30px; width:100%;}
.contact .block textarea{width:100%;}
select{height:auto; width:100%;}
/*investor*/
.form1{text-align:center;}
.form3{text-align:center;}
.yearselect{width:6em; height:30px;}

/*certificate*/
.certificate,.certificate ul{margin:0; padding:0; list-style: none;}
.certificate li ul li{border-bottom:1px solid #ccc; background:#fff;}
.certificate li ul li:nth-of-type(even){background:#f5f5f5;}
.certificate a{color:#666; padding:0.3em; display:block;}
.certificate a div{display:inline-block; width:calc(100% - 10em);}
.certificate a span{display:inline-block; width:7em; color:#666; text-align:right;}
.certificate a:hover, .certificate a:hover span{color:#006699;}
.certificate li ul li:hover{background:#fcfbe9;}
@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.page{width:100%; padding:0 2%;}
/*header*/
.logo{width:40%; padding-left:1%; padding-top:1%;}
#defaultheader .page{padding:0;}
#header .page{padding:0;}
.nav{width:100%; background:#f6f6f6; display:none;}
.nav a{width:100%; padding:1em; float:left; border-bottom:1px dotted #fff;}
.nav a:hover{background:#666; color:#fff;}

/*defaultimg*/
/*subnav*/
#submenu{border:1px solid #ccc; background:#fff; float:left; width:100%; border-radius:5px; margin-top:3em;margin-bottom: 16px;}
.subtoggle{padding:15px;}
.subnav{display:none;}
.subnav ul li a{background:none;}

/*content*/

.content{margin-top:0em; padding-top:4em;}
.content img{ max-width:100%;}
.side{width:100%; padding:0 1em; }
.main{width:100%; padding:1em;}
/*default use*/
.gallery .block{width:100%;}
.default1 .page{padding:0 1em;}
.dleft{width:100%; padding:1em 0em;}
.dright{width:100%; padding:1em 0em;}
.dleft div{width:100%; padding:1em 0em;}
/*product*/
.product .block{width:100%;}
.productdetail .block{width:100%;}
/*tech*/
.tech .block div{width:100%;}
.tech .block h3.tit{width:100%;}
.tech .block p{width:100%;}
.two { width:100%;}

.gn{ width:100%;}
.gn h3{ color:#d13a00; font-weight:bold;font-size: 17px;}
.gnr {width:100%;}
.gnl {width:100%;}

}

@media screen and (min-width:768px) and (max-width:1199px){/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
.page{width:100%;}
/*header*/
.logo{width:28%; padding:0.5em;}
.topmenu{display:none;}
/*defaultimg*/
/*nav desktop*/
.nav a{padding:1em 0.7em 0 0.7em; font-size:13px; line-height:45px;}
/*subnav*/
.subtoggle{display:none;}
/*content*/
.content{ padding-top:8em;}
.side{width:23%; padding:0em 1em 1em 1em; }
.main{width:77%; padding:0em 1em 2em 4em; min-height:500px;}
/*default use*/
.gallery .block{width:33.3%;}

.dleft{width:67%; padding-right:1em;}
.dleft a{width:100%;}
.dright{width:33%; padding-left:1em;}
.dleft div{width:50%; padding-right:1em; background:url(images/dleft-bg.jpg) right center no-repeat;}
/*product*/
.product .block{width:50%;}
.product p.sum{padding-left:40%;}
.productdetail .block{width:50%;}
/*tech*/
.tech .block div{width:40%;}
.tech .block h3.tit{width:60%;}
.tech .block p{width:60%;}
.two { width:50%;float:left;}
}

@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
.page{width:1200px;}
/*header*/
.logo{width:28%; padding:0.5em 0;}
.topmenu{display:none;}
/*defaultimg*/

/*nav desktop*/
.nav a{padding:1em 1em 0 1em; line-height:45px;}
/*subnav*/
.subtoggle{display:none;}
/*content*/
.content{ padding-top:10em;}
.side{width:20%; padding:0 2em 1em 0em;}
.main{width:80%; padding:0 3em 2em 5em; min-height:600px;}
/*default use*/
.gallery .block{width:33.3%;}/*定義gallery區塊的.block寬度*/
.dleft{width:66%; padding-right:2em;}
.dright{width:33%; padding-left:1em;}
.dleft div{width:50%; padding-right:2em; background:url(images/dleft-bg.jpg) right center no-repeat;}
/*product*/
.product .block{width:50%;}
.product p.sum{padding-left:40%;}
.productdetail .block{width:50%;}
/*tech*/
.tech .block div{width:30%;}
.tech .block h3.tit{width:70%;}
.tech .block p{width:70%;}
.two { width:50%;float:left;}
}