@charset "utf-8";/* 簡單流變媒體   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性   http://www.alistapart.com/articles/fluid-images/ */
img, object, embed, video {	max-width: 100%;}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {	width:100%;}
/*	Dreamweaver 流變格線屬性	----------------------------------	dw-num-cols-mobile:		5;	dw-num-cols-tablet:		8;	dw-num-cols-desktop:	10;	dw-gutter-percentage:	25;	靈感來自於 Ethan Marcotte 的「具回應功能的網頁設計」 	http://www.alistapart.com/articles/responsive-web-design	以及 Joni Korpi 的「黃金格線系統」	http://goldengridsystem.com/*/
/* 行動版面: 480px 以下。 */
.gridContainer {	margin-left: 0%;	margin-right: 0%;	width: 100%;	padding-left: 0%;	padding-right: 0%;}
#LayoutDiv1 {	clear: both;	float: left;	margin-left: 0;	margin-right:0;	width: 100%;	display: block;}
.back-top{background-image:url(images/index_01-3.jpg); background-repeat:no-repeat; background-position:center; text-align:center; width:100%; background-size:326%;}
.back-top-width{ width:100%;}
.logo-top{ margin:8% 0% 8% 20px;width:70%; float: left; }
.back-top-yellow{margin-right:20px; margin-top:0px; text-align:right; background-image:url(images/yello-1-01.png); background-repeat:no-repeat; background-position:right top; height:30px; padding-top:10px; display:none;}
.link-01{color:#555; text-decoration:none; padding:5px; margin-right:10px; font-size:12px;}
.link-01:visited{color:#555; text-decoration:none; padding:5px; margin-right:10px; font-size:12px;}
.link-01:hover{color:#000; text-decoration:none; padding:5px; margin-right:10px; font-size:12px; }
.little-img-margin{margin-right:5px; }
.top-menu{text-align:right; margin:25px 20px 0 0 ; display:none;}
.top-menu-over{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:visited{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:active{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:hover{text-decoration:none; color:#fff; padding:5px; font-size:15px; }
.top-menu-pad{color:#aaa; margin:0px 25px; }
/*下段*/
.under-ambit{ width:100%; margin:0px; max-width:960px;}
.under-ambit-backcolor{background-color:#fff; float:left; width:100%}
/*about us*/
.under-2-ambit{float:left; margin:0px 0px 0px 0px; padding:30px 40px 35px 40px; box-sizing: border-box; width: 100%; border:0px #c00 solid;display:block; }
.under-2-ambit .marg-01{width:100%; float:left; border-right:0px #ccc solid;}
.under-2-ambit .marg-01 .caption-01{font-size:21px; color:000; margin:0px 0px 0px 0px;text-align:left; font-weight:bold; line-height:36px; border-bottom:1px #ccc solid;}
.separ{color:#ccc; margin:0px 8px; font-size:18px;}
.separ-english{color:#069; font-size:18px; font-weight:100;}
.under-2-ambit .marg-01 .contect-01{margin:15px 0px 0px 0px;text-align:left; line-height:24px;}
.under-2-ambit .marg-01 .button-01{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:15px; float:right; text-align:center; font-size:12px; width:40px; margin-right:0px;color:#fff; text-decoration:none;}
.under-2-ambit .marg-01 .button-01:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*news*/
.under-2-ambit .marg-02{width:100%; float:left;}
.under-2-ambit .marg-02 .caption-02{font-size:21px; color:000; margin:30px 0px 0px 0px;text-align:left; font-weight:bold; line-height:36px; border-bottom:1px #ccc solid;}
.under-2-ambit .marg-02 .contect-02{margin:15px 0px 0px 0px; text-align:left;border:0px #00f solid;}
.under-2-ambit .marg-02 .contect-02 .date{float:left; margin-right:15px;}
.under-2-ambit .marg-02 .contect-02 .divided{border-style:dashed; height:5px; margin:8px 0px;}
.under-2-ambit .marg-02 .button-02{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:15px; float:right; text-align:center; font-size:12px; width:40px; margin-right:0px;color:#fff; text-decoration:none;}
.under-2-ambit .marg-02 .button-02:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*product*/
.under-3-ambit{float:left; clear:both;width:100%;background-image:url(images/index-06-ss.jpg); background-color: #fffeef; background-repeat: no-repeat; height:100%; text-align:left; display:block; margin-bottom:20%;}
.under-3-ambit .marg-03{margin:0% ;padding:30px 40px 35px 40px; box-sizing: border-box; float:left; border:0px #c00 solid;}
.under-3-ambit .marg-03 .caption-03{font-size:18px; color:000; margin:3% 3% 5% 0%; text-align:left; padding-bottom:0px; font-weight:bold;}
.under-3-ambit .marg-03 .contect-03{text-align:center; margin:0px 0px 0px 0px; width:100%; border:0px #0f0 solid; display: flex; flex-wrap: wrap;}
.under-3-ambit .marg-03 .photo-03{float:left;margin-right:0%; margin-bottom:1%; width:100%; height:auto; border:0;}
.under-3-ambit .marg-03 .contect-03 .pro{color:#777;float:left; width:28.5%; margin:0% 2% 5%;border:0px #00f solid; line-height:15px; text-decoration:none; font-size:13px;}
.under-3-ambit .marg-03 .contect-03 .pro:hover{color:#069;}
.late-page{float:left; width:100%; text-align:left; clear:both; background-image:url(images/index_08.jpg); background-repeat:no-repeat; height:auto; display:block; position:fixed; bottom: 0px; background-color:#111; padding-bottom:2%;}
.late-logo{margin:20px 50px 30px 20px; float:left ; display:none;}
.late-logo .when{width:187px; .height:48px;}
.late-copyright{font-size:13px; text-align:center; margin-top:0px;}
.late-scope{margin: 2% 0%; width:100%;display:none;}
.late-menu-all{ width:100%}
.late-menu{color:#ccc; text-decoration:none; padding:2px 0px; width:25%; box-sizing:border-box; text-align:center; float:left; font-size:14px; line-height:24px;}
.late-menu:visited{color:#ccc;}
.late-menu:hover{color:#fff;}
.late-menu-divided{margin:0 20px; display:none;}
.late-addsite{color:#999; margin-top:5px; display:none;}
.late-mail{color:#999; margin-top:5px; display:none; text-align:left; float:none; padding:2px;}
.late-addsite .address{}
.late-addsite .tel{}
.late-mailbox{ color:#666; display:none; text-decoration:underline; font-size:14px; float:left;}
.late-mailbox:visited{ color:#666;text-decoration:underline; font-size:13px;}
.late-mailbox:hover{ color:#ff0; text-decoration:none;}
.late-updata{ color:#666; text-decoration:none;margin-left:438px; display:none;}
.late-updata:visited{ color:#666;}
.late-updata:hover{ color:#ff0; text-decoration:underline;}
.news-type{font-size:13px; color:#555;text-decoration:none;display:block;}
.news-type:visited{font-size:13px; color:#555;text-decoration:none;}
.news-type:hover{font-size:13px; color:#069;text-decoration:none;}
/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
.gridContainer {	width: 100%;	padding: 0%;}
#LayoutDiv1 {	clear: both;	float: left;	margin: 0;	width: 100%;	display: block;}
.back-top{background-image:url(images/index_01-2.jpg); background-repeat:no-repeat; background-position:center top; text-align: center; width:100%;  background-size:268%; clear:both;}
.back-top-width{ width:100%;}
.logo-top{ margin:6% 0% 6% 20px;width:70%; float:left; }
.back-top-yellow{margin-right:20px; margin-top:0px; text-align:right; background-image:url(images/yello-1-01.png); background-repeat:no-repeat; background-position:right -12px; height:24px; padding-top:3px; display:none; background-size:35%;}
.link-01{color:#555; text-decoration:none; padding:3px; margin-right:15px; font-size:10px; }
.link-01:visited{color:#555;padding:3px;margin-right:15px;  text-decoration:none; font-size:10px;}
.link-01:hover{color:#000;padding:3px;margin-right:15px;  text-decoration:none; font-size:10px; }
.little-img-margin{margin-right:5px; }
.top-menu{text-align:right; margin:15px 20px 0 0 ; display:none;}
.top-menu-over{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:visited{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:active{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:hover{text-decoration:none; color:#fff; padding:5px; font-size:15px; }
.top-menu-pad{color:#aaa; margin:0px 13px; }
/*下段*/
.under-ambit{ width:100%;}
.under-ambit-backcolor{float:left; background-color:#fff;}
/*about us*/
.under-2-ambit{float:left; margin:0%; padding:30px 6% 35px 6%; box-sizing: border-box; display: block; }
.under-2-ambit .marg-01{width:100%; float:left; border-right:0px #ccc solid;}
.under-2-ambit .marg-01 .caption-01{font-size:24px; color:000; margin:0% 0% 0% 0%;text-align:left; font-weight:bold; line-height:21px; border-bottom:1px #ccc solid; padding-bottom:1%;}
.separ{color:#ccc; margin:0% 1% 0% 1%; font-size:21px;}
.separ-english{color:#069; font-size:21px; font-weight:100;}
.under-2-ambit .marg-01 .contect-01{margin:1% 0% 0% 0%;text-align:left; line-height:31px; font-size:18px;}
.under-2-ambit .marg-01 .button-01{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:18px; float:right; text-align:center; font-size:10px; width:35px; margin-right:0%;color:#fff; text-decoration:none; background-size:35px 15px}
.under-2-ambit .marg-01 .button-01:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*news*/
.under-2-ambit .marg-02{width:100%; float:left; margin-top:4%;}
.under-2-ambit .marg-02 .caption-02{font-size:24px; color:000; margin:0% 0%;text-align:left; font-weight:bold; line-height:21px; border-bottom:1px #ccc solid; padding-bottom:1%}
.under-2-ambit .marg-02 .contect-02{margin:1% 0%; text-align:left; font-size:18px;}
.under-2-ambit .marg-02 .contect-02 .date{float:left; margin-right:3%;}
.under-2-ambit .marg-02 .contect-02 .divided{ border:0px; border-bottom:1px #aaa dashed; margin:1% 0%;}
.under-2-ambit .marg-02 .button-02{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:18px; float:right; text-align:center; font-size:10px; width:35px; margin-right:0%;color:#fff; text-decoration:none; background-size:35px 15px}
.under-2-ambit .marg-02 .button-02:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*product*/
.under-3-ambit{float:left; clear:both;width:100%;background-image:url(images/index-06.jpg); background-position:left top; background-repeat:no-repeat; text-align:left; margin-bottom:14%; padding-bottom:0%; background-size:160%;}
.under-3-ambit .marg-03{width:100%;margin:0% ;padding:30px 40px 35px 40px; box-sizing: border-box; float:left; border:0px #c00 solid;}
.under-3-ambit .marg-03 .caption-03{font-size:21px; color:000; margin:0% 0% 2.2% 0%; text-align:left; font-weight:bold;}
.under-3-ambit .marg-03 .contect-03{text-align:left; margin:0%; width:100%; float:left; display:inline-block;}
.under-3-ambit .marg-03 .photo-03{float:left;margin-right:2.5%; margin-bottom:10%; width:17%; height:auto; border:0; }
.under-3-ambit .marg-03 .contect-03 .pro{color:#777;float:left; width:31%; margin:0% 2% 1% 0%; line-height:18px; text-decoration:none; font-size:15px;}
.under-3-ambit .marg-03 .contect-03 .pro:hover{color:#069;}
.late-page{float:left; width:100%; text-align:left; clear:both; background-image:url(images/index_08.jpg); background-repeat:no-repeat; display:block; position:fixed; margin-top:0%; background-color:#111; padding-bottom:0px; background-size:100%;}
.late-logo{margin:2%; float:left ; display:block;width:23.5%; display:none;}
.late-logo .when{ display:block;}
.late-copyright{font-size:11px; text-align:left; margin-top:1%; margin-left:2%}
.late-scope{margin:2% 2%; float:left; display:none; width:100%}
.late-menu-all{ float:left; width:100%}
.late-menu{color:#ccc; text-decoration:none; text-align:center; float:left; width:0px 2%; font-size:21px; display:block; line-height:27px;}
.late-menu:visited{color:#ccc;}
.late-menu:hover{color:#fff;}
.late-menu-divided{margin:0% 2.5%; display:none; float:left; font-size:11px; margin-top:0.3%; }
.late-addsite{color:#999; display: none; padding:0.3%; width:100%; margin:0%; font-size:12px;}
.late-addsite .address{ margin-right:0%; float:left;}
.late-addsite .late-phone{float:left; margin-left:12.7%;}
.late-mailbox{ color:#666; display:none; text-decoration:underline; font-size:13px; float:left;}
.late-mailbox:visited{ color:#666;text-decoration:underline; font-size:13px;}
.late-mailbox:hover{ color:#ff0; text-decoration:none;}
.late-updata{ color:#666; text-decoration:none;margin-left:438px; display:none;}
.late-updata:visited{ color:#666;}
.late-updata:hover{ color:#ff0; text-decoration:underline;}
.news-type{font-size:13px; color:#555;text-decoration:none;display:block;}
.news-type:visited{font-size:13px; color:#555;text-decoration:none;}
.news-type:hover{font-size:13px; color:#069;text-decoration:none;}
}
/* 桌面版面: 769px 到最大 1600px。樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 769px) {
.gridContainer { 	width: 100%;	max-width: 1600px;	padding: 0px;	margin: 0px;}
#LayoutDiv1 {	clear: both;	float: left;	margin: 0;	width: 100%;	display: block;}
.back-top{background-image:url(images/index_01-1.jpg); background-repeat:no-repeat; height:108px; text-align:center; width:100%; background-size:1600px;}
.back-top-width{ width:960px;}
.logo-top{float:left; margin:25px 5px 0px 25px;width:360px; height:27px; }
.back-top-yellow{margin-right:20px; margin-top:27px; text-align:center; background-image:url(images/yello-1-02.png); background-repeat:no-repeat; background-position:right top; height:28px; width:360px; padding-top:3px;display: block; background-size:360px 28px; float:right;}
.link-01{color:#555; text-decoration:none; padding:5px; margin-right:6px; font-size:12px;}
.link-01:visited{color:#555; text-decoration:none; padding:5px; margin-right:6px; font-size:12px;}
.link-01:hover{color:#000; text-decoration:none; padding:5px; margin-right:6px; font-size:12px; }
.little-img-margin{margin-right:5px;}
.top-menu{text-align:right; margin:18px 0px 0 0px ; display:block; float:right; width:100%;}
.top-menu-over:link{text-decoration:none; color:#aaa; padding:5px; font-size:15px; display:inline;}
.top-menu-over:visited{text-decoration:none; color:#aaa; padding:5px; font-size:15px;}
.top-menu-over:hover{text-decoration:none; color:#fff; padding:5px; font-size:15px;}
.top-menu-pad{color:#aaa; margin:0px 22px;}
/*下段*/
.under-ambit{ width:960px;}
.under-ambit-backcolor{float:left; background-color:#fff;}
/*about us*/
.under-2-ambit{float:left; margin:30px 0px 35px 0px;padding: 0px 40px; box-sizing: border-box; display:block; }
.under-2-ambit .marg-01{width:440px; float:left; border-right:1px #ccc solid; display:block; margin-top:0px;}
.under-2-ambit .marg-01 .caption-01{font-size:21px; color:000; margin:0px 40px 0px 0px;text-align:left; font-weight:bold; line-height:36px; border-bottom:1px #ccc solid;}
.separ{color:#ccc; margin:0px 8px; font-size:18px;}
.separ-english{color:#069; font-size:18px; font-weight:100;}
.under-2-ambit .marg-01 .contect-01{margin:15px 40px 0px 0px;text-align:left; line-height:21px; font-size:13px;}
.under-2-ambit .marg-01 .button-01{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:15px; float:right; text-align:center; font-size:12px; width:40px; margin-right:40px;color:#fff; text-decoration:none;}
.under-2-ambit .marg-01 .button-01:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*news*/
.under-2-ambit .marg-02{width:435px; float:left; display:block; margin-top:0px;}
.under-2-ambit .marg-02 .caption-02{font-size:21px; color:000; margin:0px 0px 0px 40px;text-align:left; font-weight:bold; line-height:36px; border-bottom:1px #ccc solid;}
.under-2-ambit .marg-02 .contect-02{margin:15px 0px 0px 40px; text-align:left; font-size:13px;}
.under-2-ambit .marg-02 .contect-02 .date{float:left; margin-right:10px;}
.under-2-ambit .marg-02 .contect-02 .divided{border-style:dashed; height:5px; margin:8px 0px;}
.under-2-ambit .marg-02 .button-02{background-image:url(images/pro_03.png); background-position:center; background-repeat:no-repeat; line-height:15px; float:right; text-align:center; font-size:12px; width:40px; margin-right:0px;color:#fff; text-decoration:none;}
.under-2-ambit .marg-02 .button-02:hover{ background-image:url(images/pro_03-chang.png);color:#ff0;}
/*product*/
.under-3-ambit{float:left; clear:both;width:960px;background-image:url(images/index-06.jpg); height:310px; text-align:left; display:block; margin-bottom:0px; background-size:100%;}
.under-3-ambit .marg-03{ margin:0%;padding:35px 0px 0px 40px;box-sizing: border-box; float:left;}
.under-3-ambit .marg-03 .caption-03{font-size:21px; color:000; margin:0px 0px 25px 0px; text-align:left; padding-bottom:0px; font-weight:bold;}
.under-3-ambit .marg-03 .contect-03{text-align:left; margin:0px 0px 0px 0px; width:650px; float:left;display: inline-block;}
.under-3-ambit .marg-03 .photo-03{float:left;margin-right:8px; width:35px; height:35px;}
.under-3-ambit .marg-03 .contect-03 .pro{color:#777;float:left; width:200px; margin:0px 10px 20px 0px; line-height:18px; text-decoration:none; font-size:13px;}
.under-3-ambit .marg-03 .contect-03 .pro:hover{color:#069;}
	
	
/*.late-page{float:left; width:960px; text-align:left; background-image:url(images/index_08.jpg); background-repeat:no-repeat; height:120px; display:block;position:static; bottom:0px; }
.late-logo{margin:26px 35px 40px 20px; float:left; display:block; width:230px; }
.late-logo .when{width:230px; height:15px; display:block; margin:0px;}
.late-copyright{font-size:12px; text-align:left; margin-top:5px; display:block; float:left; margin-left:0px;}
.late-scope{margin:20px 0px 0px 0px; float:left; width:670px; display:block; }
.late-menu-all{ float:left; display:block;}
.late-menu{color:#aaa; text-decoration:none; padding:1px; float:left; width:auto; clear:right; display:block; font-size:13px; line-height:24px;}
.late-menu:visited{color:#aaa;}
.late-menu:hover{color:#fff;}
.late-menu-divided{margin:0px 10px; display:block; float:left;}
.late-addsite{color:#666; margin-top:0px; display:block; text-align:left; float:left; clear:right;}
.late-addsite .address{ float:left; display:block;}
.late-addsite .late-phone{ float:left; margin-left:58px; display:block;}
.late-mail{color:#666; margin-top:0px; display:block; text-align:left; float:left; padding:2px;font-size:13px; }
.late-mailbox{ color:#666; display:block; text-decoration:underline; font-size:13px; float:left;}
.late-mailbox:visited{ color:#666;text-decoration:underline; font-size:13px;}
.late-mailbox:hover{ color:#ff0; text-decoration:none;}
.late-updata{ color:#666; text-decoration:none;margin-left:598px; display:block; font-size:13px;}
.late-updata:visited{ color:#666;}
.late-updata:hover{ color:#ff0; text-decoration:underline;}*/
	
/**/	
.late-page{float:left; width:960px; text-align:left; background-image:url(images/index_08.jpg); background-repeat:no-repeat; height:120px; display:inline-flex;position:static; bottom:0px; justify-content: flex-start; flex-direction: row; }
.late-logo{margin:20px 0px 0px 0px; float:none; display:inline-block; width:260px; }
.late-logo .when{width:230px; height:15px; display:inline-block; margin:0px;}
.late-copyright{font-size:12px; text-align:left; margin-top:5px; display:inline-block; float:none; margin-left:0px;}
.late-scope{margin:20px 0px 0px 0px; float:none; width:670px; display:inline-flex; flex-direction: column; }
.late-menu-all{ float:none; display:inline-flex; width: 100%; flex-direction: row; justify-content: space-between;}
.late-menu{color:#aaa; text-decoration:none; padding:1px; float:left; width:auto; clear:right; display:inline-block; font-size:13px; line-height:24px;}
.late-menu:visited{color:#aaa;}
.late-menu:hover{color:#fff;}
.late-menu-divided{margin:0 10px; display:inline-block; float:left;}
.late-addsite{color:#666; margin-top:0px; display:inline-flex; flex-direction: row; justify-content: space-between; text-align:left; float:none; clear:none;width: 100%;}
	
.late-addsite .address{ float:left; display:block; clear: both;}
.late-addsite .late-phone{ float:left; margin-left:58px; display:block;}
	
.late{display:inline-flex; flex-direction: row; width: 100%; justify-content: space-between;}	
.late-mail{color:#666; margin-top:0px; display:inline-block; text-align:left; float:none; padding:2px;font-size:13px; white-space: nowrap; }
.late-mailbox{ color:#666; display:inline-block; text-decoration:underline; font-size:13px; float:none;}
.late-mailbox:visited{ color:#666;text-decoration:underline; font-size:13px;}
.late-mailbox:hover{ color:#ff0; text-decoration:none;}
.late-updata{ color:#666; text-decoration:none;margin-left:0px; display:inline-block; font-size:13px;}
.late-updata:visited{ color:#666;}
.late-updata:hover{ color:#ff0; text-decoration:underline;}	
/**/
.news-type{font-size:13px; color:#555;text-decoration:none;display:block;}
.news-type:visited{font-size:13px; color:#555;text-decoration:none;}
.news-type:hover{font-size:13px; color:#069;text-decoration:none;}
}
body{ color:#555; background-color:#111; line-height:21px; font-family:Arial, Helvetica, sans-serif; margin:0px}