@media screen and (max-width: 1024px)
{
.wrap { width:100%;}
}
@media screen and (max-width: 768px)
{
.bodyContent { padding:0 10px;} 
.hIntro { margin:30px 0 !important;}
.hVideo { padding:30px !important; text-align:justify;}

.ddsmoothmenu ul li a {  padding: 10px 10px 0 10px !important; }
#header { background:none;}
.topContent .cartTop, .FooterMenu { display:none;}
.mBanner {    position: relative;    left: 0;    width: 100%; height:auto !important;}
.divSupport, .divBannerSupport { width:100%; clear:both;  position:relative; float:none; left:0; height:auto; top:0;margin-bottom: 10px;}
.divSupport { padding-bottom:15px; margin:0; text-align:center;}
.divSupport table { text-align:center; width:100%;}
.col-md-3, .col2, .topContent .menuMember, .col4 { clear:both; width:99%; margin-bottom:20px;}
.chItem { width:48%;}
.aDetail, .slideshow { width:100%; float:none; clear:both;}
.aRight { width:100%; float:none; clear:both; padding:10px 0;}
#canvas	{		margin: 0 auto;		padding: 20px;	}
#productHome .project, #productList .project {  float: left;  margin-left: 2.912621359223301%;  margin-top: 10%;  width: 47.0873786407767%;  cursor: pointer;}
#productHome .project:nth-child(3n+1) {  clear: none;}
#productHome .project:nth-child(odd) {  clear: left !important;}
.project .project-code .code, .project .project-code .status { clear:both; width:100%; text-align:center; float:none;}
.Logo	{text-align:center; float:none; margin-bottom:20px; clear:both;	 width:100%;}
.Logo img { max-width:100%;}
.topContent	{		padding: 5px !important;	}
.mnTop	{		background-color: Transparent;		top: auto;		width:100%;	}
.mainContent { clear:both; width:98% !important;margin-right: 5px;margin-left: 5px;}
.Right { clear:both; width:100% !important;}
.mnBox, .adver { margin-left:0 !important; padding:0 10px;}
.ProBoxGalleryHome	{		width: 44%;	}
.Header	{		height: auto;	}
.hOne .inf, .hOne .hZoom, .hProcess .left, .hProcess .right {width: 96%; overflow:hidden; min-height:0; margin: 0 auto 20px auto;    float: none;    text-align: justify;}
.hGallery .left, .hGallery .right { width:96%; clear:both; overflow:hidden; float: none; min-height:0;}
.hVideo iframe { width:100%; height:auto;}
.FooterCopyright,.hNews h2, .adver, .pBox .title h1 { text-align:center;}
.content td { text-align:left !important;}
.mainContentF, .pBox .content { padding:0 10px;}
.divSupport font { clear:both; width:100%; display: block;}
.topmenu
	{
		display: block;
	}
	#topmenu ul li
	{
		padding: 0 !important;
	}
	#topmenu ul li ul
	{
		display: none !important;
	}
	
	.content table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.content thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.content tr { border: 0px solid #ccc; }
	
	.content td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 1%; 
		
	}
	.contact td {text-align:left !important;}
	.shopcart td {border-bottom: 1px solid #ccc !important; min-height:30px; }
	.shopcart tr { border: 1px solid #ccc !important; }
	.content td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	.mnTop
	{
		height: auto;
		border-bottom: none;
		position: relative;
	}
	nav ul li
	{
		font-size: 10pt;
		background-color: #036699;
		margin: 0.2%;
		border-radius: 3px;
		padding: 8px 0px;
	}
	nav ul li a
	{
		color: White;
		border: none;
		padding-left: 15px;
	}
	nav ul li a:hover
	{
		color: #EFEFEF;
	}
	nav ul li:hover, nav ul li:active
	{
		background-color: #8c99a4;
	}

	nav
	{
		height: auto;
	}
	nav a#pull
	{
		display: block;
		background-color: #036699;
		width: 100%;
		position: relative;
		padding: 7px 0;
		color: #fff;
		font-size: 10pt;
	}
	nav a#pull:after
	{
		content: "";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 0;
		top:10px;
	}
	nav ul
	{
		width: 100%;
		display: none;
		height: auto;
	}
	nav li
	{
		width: 49.6%;
		float: left;
		position: relative;
	}
	
	.nContent table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.nGallery table, thead, tbody, th, td, tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.nContent thead tr,.nGallery thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.nContent tr,.nGallery tr { border: 1px solid #ccc; }
	
	.nContent td, .nGallery td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 1%; 
	}
	
	.nContent td:before,.nGallery td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}