@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@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: auto;
	margin-right: auto;
	padding: 0%;
	width: 100%;
	min-height:100%;
    height:auto !important;
    height:100%;
	background:	url(../image/bg/diamond_upholstery.png);
	position:relative;
	overflow:hidden;
	font-family:微軟正黑體; 
	
}

#footer{
    height:60px;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
	color:#FFF;
	z-index:100;
	padding:10px 0 0 0;
	border-top:2px solid #006834;
	background:url(../image/bg/white.png);
}
<!--下方按鈕-->
#wrapper {
	z-index: 2;
	height: 50px;
	width: 100%;
	background: #ccc;
	overflow: hidden;
	-ms-touch-action: none;
	float:left;
	margin: 0% auto;
	
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width:500px;
	height: 100px;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}


/*按鈕*/
.press{
	width: 60px;
	height: 52px;
	float: left;
	line-height:0px;
	margin:0 0 0 2%;
	border-radius:3px;
	overflow: hidden;
	text-align: center;
	color:#fff;
	-moz-box-shadow: 0px 1px 3px #000000;
	-webkit-box-shadow: 0px 1px 3px #000000;
	box-shadow: 0px 1px 3px #000000;
	
	}
.press p{font-size: 12px;text-align:center;color:#fff;}
	
.press .icon{font-size: 24px;text-align:center;color:#fff;}	

#unselect{background:#22998A;color:#00554C !important;}
#unselect a{color:#00554C !important;}
#select{background:#13C3AD;color:#fff;}



/*中間內容*/
.about p {font-size: 1.2em;
	line-height: 1.6;
	font-weight: 300;
	padding: 20px 8%;
	text-align: justify;}
	
.topic{width:100%;height:100%;color: #333;text-shadow: 0 0 1px #666;margin:0%;/*background-color:#999;*/}		
.topic h2 {
	font-weight: 200;
	font-size: 1.8em;
	padding:0 0 8px 0;
	text-align: center;
	box-shadow: 0 10px 0 rgba(0,0,0,0.02);


	
}			
.topic p {
	font-size: 1.2em;
	line-height:0px;
	margin: 0px;
	padding:0px;
	text-align:center;
	text-decoration: none!important;
	/*background-color:#ff0;*/
}	
	
.la{width:100%;height:70px;background:#006673;margin:0 0 10px 0 ;
font-size:2em;text-align:center;padding:0%;color:#FFF;border-bottom:4px solid #22998A;line-height:60px; }	

.logo{
	width:20%;
	float:left;
	position:relative;
	border-right:2px solid #dcdcdc;
	padding:0% 6% 0 4%;
	height:70px;
	font-size:0.5em;
}

.iconn{font-size:18px}


/*回饋查詢*/

.aaa{
	overflow-y:scroll;
	height:200px;
	width:100%;
}
.a1{
	width:15%;
	float:left;
	margin:2% 3% 2% 0;
	
}
.a2{
	float:left;
}
.a3{
	width:15%;
	float:left;
	margin:2% 3% 2% 0;
	background-color:#CCC;
}
.aa{
	float:right;
	
}
.ser{background-color: #e8e8e8;}
.fir{background-color: #FFF;}


.red{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:#C36;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	top:18px;
	right:10px;
	position:absolute;

}


@media only screen and (min-width: 360px) {
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	padding:0%;
	width: 100%;
	min-height:100%;
    height:auto !important;
    height:100%;
	position:relative;
	overflow:hidden;
	
	
}

#footer{
    height:60px;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
	color:#FFF;
	/*background-image:url(../image/bg/footer-bg-360.png);*/
	z-index:100;
	border-top:2px solid #22998A;
	padding:14px 0 0 0;
	/*background-color:#666;*/
	background:url(../image/bg/white.png);
}
<!--下方按鈕-->
#wrapper {
	z-index: 2;
	height: 50px;
	width: 100%;
	background: #ccc;
	overflow: hidden;
	-ms-touch-action: none;
	float:left;
	margin: 0% auto;
	
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width:500px;
	height: 100px;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

.press{
	width: 60px;
	height: 52px;
	float: left;
	line-height:0px;
	margin:0 0 0 2%;
	border-radius:3px;
	overflow: hidden;
	text-align: center;
	color:#fff;
	-moz-box-shadow: 0px 1px 3px #000000;
	-webkit-box-shadow: 0px 1px 3px #000000;
	box-shadow: 0px 1px 3px #000000;
	
	}
	.press p{font-size: 12px;text-align:center;}
	
.press .icon{font-size: 24px;text-align:center;}	



/*中間內容*/
.about p {font-size: 1.2em;
	line-height: 1.6;
	font-weight: 300;
	padding: 20px 8%;
	text-align: justify;}
	
.topic{width:100%;height:100%;color: #333;text-shadow: 0 0 1px #666;margin:0%;/*background-color:#999;*/}		
/*.topic h2 {
	font-weight: 200;
	padding:0 0 10px 0;
	text-align: center;
	box-shadow: 0 10px 0 rgba(0,0,0,0.02);


	
}	*/		
.topic p {
	font-size: 1.2em;
	line-height:0px;
	margin: 0px;
	padding:0px;
	text-align:center;
	text-decoration: none!important;
	/*background-color:#ff0;*/
}	
.la{width:100%;height:70px;background:#006673;margin:0 0 40px 0 ;
font-size:2em;text-align:center;padding:0%;color:#FFF;border-bottom:4px solid #22998A;line-height:60px; }	

.logo{
	width:20%;
	float:left;
	position:relative;
	border-right:2px solid #dcdcdc;
	padding:0% 6% 0 4%;
	height:70px;
}

.iconn{font-size:18px}

/*回饋查詢*/

.aaa{
	overflow-y:scroll;
	height:240px;
	width:100%;
}
.a1{
	width:15%;
	float:left;
	margin:2% 3% 2% 0;
	
}
.a2{
	float:left;
}
.a3{
	width:15%;
	float:left;
	margin:2% 3% 2% 0;
	background-color:#CCC;
}
.aa{
	float:right;
	
}
	
.red{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:#C36;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	top:18px;
	right:10px;
	position:absolute;

}

}
/* 表格版面: 480px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 480px) {
.gridContainer {
	width: 100%;
	padding-left:0%;
	padding-right:0%;
}
.la{width:100%;height:70px;background:#006673;margin:0 0 40px 0 ;
font-size:2em;text-align:center;padding:0%;color:#FFF;border-bottom:4px solid #22998A;line-height:60px; }	

.logo{
	width:20%;
	float:left;
	position:relative;
	border-right:2px solid #dcdcdc;
	padding:0% 6% 0 4%;
	height:70px;
}
.red{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:#C36;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	top:18px;
	right:60px;
	position:absolute;

}

}

@media only screen and (min-width: 768px) {
	
	.gridContainer {padding:0%;width:100%;}
	
	#footer{height:120px;/*background-color:#666;*/}
	
	<!--下方按鈕-->

	#wrapper {height: 100px; width: 100%;}
	#scroller {width:1440px;height: 100px;}
	.press{width: 120px;height: 100px;margin:0 0 0 2%;padding:10px 0 0 0; }
	.press .icon{font-size: 34px;text-align:center;}
	.press p{font-size: 24px;text-align:center;}
	
	.topic h2 {font-size: 3em; padding:0 0 20px 0;}			
	.topic p {font-size: 2em; line-height:48px;padding:10px;text-align:center;}	
	
	.sub-service{width:100%;}
	.sub-serivce h2{text-align:center; font-size: 3em!important;color:#FFF;}
	.sub-serivce p{font-size: 2em !important;line-height:44px;padding:30px 70px 70px 70px;}	
	
	.video{width:74%;background:#999;position:absolute;float:left;height:60%;overflow-y:scroll!important;padding:0 13% 0 13%;}

.la{width:100%;height:100px;background:#006673;margin:0 0 40px 0 ;
font-size:2em;text-align:center;padding:0%;color:#FFF;border-bottom:4px solid #22998A;line-height:100px; }	

.logo{
	width:14%;
	float:left;
	position:relative;
	border-right:2px solid #dcdcdc;
	padding:0% 8% 0 12%;
	height:100px;
}
	.red{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:#C36;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	top:36px;
	right:170px;
	position:absolute;

}
}

/* 桌面版面: 769px 到最大 1232px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 1024px) {
.gridContainer {
	width: 100%;
	max-width: 1024px;
	/*padding-left: 0.9%;
	padding-right: 0.9%;*/
	margin: auto;
}

	#wrapper {height: 60px; width: 100%;}
	
	.la{width:100%;height:140px;background:#006673;margin:0 0 40px 0 ;
font-size:4em;text-align:center;padding:0%;color:#FFF;border-bottom:4px solid #22998A;line-height:120px; }	

.logo{
	width:14%;
	float:left;
	position:relative;
	border-right:2px solid #dcdcdc;
	padding:0% 12% 0 14%;
	height:140px;
}

.red{
	width:30px;
	height:30px;
	border-radius:20px;
	background-color:#C36;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	top:50px;
	right:110px;
	position:absolute;

}
}