html {
		/*font-size: 62.5%;*/
		/*background: #333;*/
}

body {
		margin: 0;
		color: #000;
		margin: 0 auto;
		min-width: 320px;
		min-height: 480px;
		position: relative;
		font: normal 16px/1.5 "Arial","新細明體",sans-serif;
}
img, img:hover {
border: none;
text-decoration: none;
}
html,body {
		height: 100%;
}

html.touch body {
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
}

/**************************
 * REFER TO LAYOUT BOX PIC
 **************************/

html, body, div, article {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* for IE8 */
	box-sizing: border-box;         /* Opera/IE 8+ */	
}

#hkecl-container {
		min-height: 100%;
		/*height: 100%;*/
		z-index: 2;
		position: relative;
		-webkit-transition: -webkit-transform 450ms ease;
		-moz-transition: -moz-transform 450ms ease;
		-ms-transition: -ms-transform 450ms ease;
		-o-transition: -o-transform 450ms ease;
		transition: transform 450ms ease;
		background:#f6f5f2 url(bg_footer.png);
}

#hkecl-container {
		-webkit-perspective: 0;
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0,0,0);
		text-rendering: optimizeLegibility;
		visibility:visible;
		/*
		iphone webkit css animations cause flicker
		http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
		http://stackoverflow.com/questions/5814101/css3-transition-transform-translate3d-causes-severe-flicker-on-first-or-last-fr
		http://stackoverflow.com/questions/15271930/jquery-when-fadein-the-object-it-blinks-ipad-safari
		http://stackoverflow.com/questions/13952480/why-does-applying-webkit-backface-visibility-hidden-fix-issues-with-negativ
		*/
}

html.touch #hkecl-container.on-touch {
		-webkit-transition: -webkit-transform 0ms ease;
		-moz-transition: -moz-transform 0ms ease;
		-ms-transition: -ms-transform 0ms ease;
		-o-transition: -o-transform 0ms ease;
		transition: transform 0ms ease;
}

				/**************************
				 * Close Side Menu Trigger
				 **************************/
				
				/*#hkecl-container .side-menu-close-trigger {*/
				#hkecl-container .needsclick {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						z-index: 15;
						
						-webkit-touch-callout: none;
						-webkit-user-select: none;
						-khtml-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
						/*
						 -webkit-perspective: 0;
						 -webkit-backface-visibility: hidden;
						 -webkit-transform: translate3d(0,0,0);
						 visibility:visible;
						 */
						background: rgba(150, 150, 150, 0.3);
				}
				
				/*#hkecl-container .side-menu-close-trigger {*/
				#hkecl-container .needsclick {
					display: none;
				}
				
				/**************************
				 * Box model essentials
				 **************************/

				.visible-desktop {
						height: 100%;
				}
				
				.page-container {
						max-width: 1000px;
						background-color: #ffffff;
						width: 100%;
						height: 100%;
						/*padding: 15px;*/ /* remove for production */
						padding: 0;
						text-align: left;
						display: block;
						margin-right: auto; /* replace for align="center" on div */
						margin-left: auto; /* replace for align="center" on div */
				}
				
				/**************************
				 * Main
				 **************************/
				
				#hkecl-main {
						/*padding-top: 74px;
						padding-bottom: 120px;*/
						z-index: 5;
						height: 100%;
						padding-top: 0;  /* should be add up coresponding to hkecl-topbar min-height, if topbar is using fix position */
						padding-bottom: 0;
						background: #f3f3f3;
				}
				
								/**************************
								 * Columns Container
								 **************************/
								
								#hkecl-columns-container {
										width: 100%;
										padding: 5px;
										margin: 0;
										position: relative;
										min-height: 550px;
								}
								
												/**************************
												 * Content
												 **************************/
												
												.hkecl-content {
														display: inline-block;
														float: left;
														width: 100%;
														padding: 20px 20px;
														margin: 0;
														min-width: 280px;
												}
												@media all and (min-width: 480px) {
													.hkecl-content {
														padding: 20px 50px;
												}
												}
												@media all and (min-width: 700px) {
													.hkecl-content {
														padding: 20px 100px;
												}
												}
				
								/**************************
								 * Footer
								 **************************/
								 
#hkecl-footer {
	border-top:4px solid #2481b3;
	padding-bottom: 20px;
	min-height:50px;
}

.breakline{
width:100%;
height:4px;
background-color:#00a240;
margin-top:4px;} 

.hkecl-page-container {
max-width: 1000px;
min-width: 300px;
width: 100%;
height: 100%;
padding: 0px;
text-align: left;
display: block;
margin-right: auto;
margin-left: auto;
}
/**************************
 * Essentials
 **************************/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 

.hkecl-hidden {
	display: none;
}




.notice-heading {
margin: 20px 0px 20px 0px;
font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
font-weight: 600;
}


.hkecl-logo {margin:10px;}

#top-box{		
	
	width:100%;
	text-align:left;
	
    
	}


div.button {		
	float:left;
	margin:0 50px 0 100px;

	}

div.text {		
	margin:20px;
	display:inline-block;
	}
@media all and (min-width: 900px) {

div.text {		
	margin:0 90px;
	display:inherit;
	
	}
}