#canvas
{
	max-width: 1200px;
	margin: 10px auto;
	padding:0 15px;
}
.page
{
	padding: 0px 0;
	opacity: 1;
	position: relative;
}
img[data-src]
{
	opacity: 1;
	-webkit-transition: opacity .3s ease-out;
	-moz-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}
#productHome
{
	width: 100%;
	clear: both;
	overflow:hidden;
	margin-bottom: 50px;
}
#productHome > .wrapper
{
	width: 101%;
	margin-left: -1%;
	margin-top: 0%;
}

#productHome .project
{
	position: relative;
	float: left;
	margin-left: 1%;
	margin-top: 2.5%;
	width: 32.3%;
	cursor: pointer;
	-webkit-transform: translatez(0);
}
#productHome .project:nth-child(3n+1)
{
	clear: left;
}
#productHome .project .project-image
{
	background: #eee;
}
#productHome .project .project-image img { max-height:100%;}
#productHome .project .project-image .intrinsic
{
	padding-bottom: 100%;
	line-height: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#productHome .project .project-image .intrinsic
{
	opacity: 1;
	-webkit-transition: opacity .14s ease-out;
	transition: opacity .14s ease-out;
}
#productHome .project .project-image .content-fill
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}
#productHome .project .project-title
{
	font-size: 18px;
	line-height: 1.6em;
	text-decoration: none;
	letter-spacing: .06em;
	text-align: center;
	font-weight: 300;
	font-style: normal;
	color: #000;
	min-height:30px; padding-top:15px;
}

.project .project-code { clear:both; overflow:hidden; padding:0 10px;}
.project .project-code .code { width:60%; float:left; min-height:30px; color:#999;}
.project .project-code .status { width:40%; float:right; min-height:30px; text-align:right;}
.pYes {    background: none repeat scroll 0 0 #45aa44;    border-radius: 15px;    color: #fcfffe;    display: inline-block;    font-size: 12px;    height: 22px;    line-height: 19px;    padding: 2px 10px;}
.pNo {    background: none repeat scroll 0 0 #ffc200;    border-radius: 15px;    color: #fcfffe;    display: inline-block;    font-size: 12px;    height: 22px;    line-height: 19px;    padding: 2px 10px;}
#productHome .title, #productList .title { clear:both; overflow:hidden; border-bottom:0px dotted #CCC; padding: 0;}
#productHome5 .title a {padding: 15px 20px;    min-height: 40px;    background-color: #fff;    font-size: 26pt;}
#productHome5 h2 { text-align:center; font-size:26pt;margin-top: -20px;}
#productHome5
{
	width: 100%;
	clear: both;
	overflow:hidden;
	margin-bottom: 50px; padding-top:50px;
}
#productHome5 > .wrapper
{
	width: 101%;
	margin-left: -1%;
	margin-top: 0%;
}

#productHome5 .project
{
	position: relative;
	float: left;
	margin-left: 1%;
	margin-top: 2.5%;
	width: 18.9%;
	cursor: pointer;
	-webkit-transform: translatez(0);
}
#productHome5 .project .row, #productHome .project .row { margin:0; background-color:#CCE4B7;}
#productHome5 .project .row .col-4, #productHome .project .row .col-4 { background-color:#589633; color:#fff;}
#productHome5 .project .row .col-8, #productHome5 .project .row .col-4, #productHome .project .row .col-8, #productHome .project .row .col-4 {    display: flex; align-items: center;}
#productHome5 .project:nth-child(5n+1)
{
	clear: left;
}
#productHome5 .project .project-image
{
	background: #eee;
}
#productHome5 .project .project-image img { max-height:100%;}
#productHome5 .project .project-image .intrinsic
{
	padding-bottom: 100%;
	line-height: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#productHome5 .project .project-image .intrinsic
{
	opacity: 1;
	-webkit-transition: opacity .14s ease-out;
	transition: opacity .14s ease-out;
}
#productHome5 .project .project-image .content-fill
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}
#productHome5 .project .project-title
{
	font-size: 18px;
	line-height: 1.6em;
	text-decoration: none;
	letter-spacing: .06em;
	text-align: center;
	font-weight: 300;
	font-style: normal;
	color: #000;
	min-height:30px; padding-top:15px;
}
.Price { clear:both; text-align:center; padding:15px 0; color:#fff;}
.pBox .title
{
	letter-spacing: 0px;
	line-height: 1.6em;
	clear: both;
	width: 100%;
}
.mnTop
{
	min-height: 35px; padding-top:50px;
	z-index: 9999;
	float: left;
	background-color:#fff;
	width:100%;
	clear:both;
}
.Footer
{
	clear: both;
	padding: 0;
	overflow: hidden;
}
.Footer p { padding:0;}
.FooterCopyright
{
	width: 100%;
	text-align: left;
	padding: 50px 0;
	min-height: 34px;
	clear:both; background-color:#69AA36; color:#fff;
}
.FooterCopyright a { color:#fff;}
.FooterCopyright a:hover { color:#000;}
.FooterSocial
{
	clear:both;text-align:center; background-color:#fff;padding: 30px 0; color:#69AA36;
}
.FooterSocial a { color:#69AA36}
.FooterSocial a:hover { color:#000;}

.FooterSocial ul li
{
	display: inline;
	font-size: 24px;
}
.mainContent
{
	width: 68%;
	float: right;
}
.Right
{
	width: 25.66%;
	float: left;
	margin-right: 0;
}
.breadcrumbs { clear:both; padding:10px 0px;color:#CCC;min-height:34px; margin:auto; position:relative; }
.breadcrumbs a { color:#999;}
.breadcrumbs a:hover { color:#000;}
.pBox { clear:both; }
.pBox .title { border-bottom:0px solid #999;}
.pBox .title h1 { color: #69AA36;padding: 5px 0;text-align: left; margin:0; font-size:36pt;}
.pBox .content { padding:5px 0;line-height: 1.7em; font-size:16pt;}
.pBox .content .desc { text-align:justify; padding:10px 0px; overflow:hidden;}
.pBox .content .desc img { max-height:100px; border:0px; margin-right:10px; float:left;}

.newsItem { clear:both; overflow:hidden; padding:5px;}
.newsItem img { width:30%; float:left; margin-right:4%; clear:none; margin-bottom:10px; overflow:hidden; border:0px;}
.newsItem .title { width:65%; overflow:hidden; font-family:"UTMAvo"; border-bottom:0 !important; float:left; padding:0;text-transform: uppercase; color: #666; margin-top:-5px; clear:none;}
.newsItem .title a {  text-transform: uppercase; color: #666;}
.newsItem .title a:hover {  text-transform: uppercase; color: #333;}
.newsItem .desc { width:65%; padding:0 !important; overflow:hidden; float:left;}

.nDetail { clear:both;}
h1.nTitle {text-align: left;padding: 5px 0;color: #0E75B8; font-size:14pt ;text-transform:uppercase; margin:0;font-family: "UTMAvo";}

.nIntro {text-align:justify; color:#747474; padding-bottom:10px; font-weight:bold;}
.nDate { text-align:right; clear:both; color:#333333;}
.nImage { width:100%; clear:both; margin-bottom:10px; text-align:center;}
.nImage img { max-width:100%; border:0px;}
.nContent { text-align:justify;line-height: 1.7em;}
.nContent img { max-width:100% !important; border:0px; height:auto;}
.nContent h2 { background:transparent !important; clear:both; font-size: 13pt;font-weight: bold;color: #775c15; width:100%; padding:5px 0}
.nContent h3 { background:transparent !important; clear:both; font-size: 12pt;font-weight: bold;color: #4965b5;width:100%; padding:5px 0}
.nAuthor { clear:both; text-align:right; padding:5px;}
.nSource { clear:both; text-align:right; padding:5px;}
.nButton { clear:both; text-align:right; padding:5px;}
.nClips { clear:both; text-align:center; padding:5px;}

.socialBox { clear:both; padding:5px; position:relative; height:35px;}
.socialBox .tw {width: 85px;position: absolute;top: 10px;left: 230px;overflow: hidden;}
.socialBox .fb {width: 150px;position: absolute;top: 10px;left: 0px;}
.socialBox .gl {width: 85px;position: absolute;top: 10px;left: 150px;overflow: hidden;}
.socialBox .pin {width: 85px;position: absolute;top: 10px;left: 340px;overflow: hidden;}
/*pro detail*/
.ProDetail { width:100%; clear:both;}
.ProImg { position: relative; width:35%; float:left; text-align:center; padding-right:3%; padding-bottom:10px; padding-top:10px;}
.ProImg img { max-width:100%;}
.ProName { width:60%;font:bold 15pt arial; color:Blue; float:right;}
.ProInfo { width:60%; float:right;}
.ProInfo .short { clear:both; margin:5px 0;}
.ProInfo .rows { padding:3px 0;}
.ProInfo .size, .ProInfo .color { clear:both; overflow:hidden;}
.ProInfo .color ul li { float:left; padding:0 10px 0 0; }
.ProInfo .color ul li b { background-color:#CCC; border-radius:3px; padding:3px 10px; color:#333;}
.ProInfo .size ul li { float:left; padding:0 10px 0 0; }
.ProInfo .size ul li b { background-color:#CCC; border-radius:3px; padding:3px 10px; color:#333; font-weight:normal !important;}
.ProInfo .color ul li img, .ProInfo .size ul li img { border:1px solid #EEE; max-width:24px;}
.ProOther { clear:both; padding-bottom:3px; padding-top:5px;  width:100%;}
.pSame { clear:both; padding:10px 0; overflow:hidden;}
.pSame ul li { float:left;  -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
    background: #fff !important;
    display: inline-block;
    border: 1px solid #eaeaea;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 3px;}
.pSame ul li.active a{ font-weight:bold;}
.pSame ul li.active i { color:green;}
.pFeature { clear:both;}
.pFeature .rows.hide { display:none;}
.pFeature a { color:#0033ff;}
.pFeature a:hover { color:#000;}
.aGallery, .GalleryProBox { clear:both; margin-top:15px;}
.aGallery ul li, .GalleryProBox ul li { padding:5px; float:left; text-align:center; margin-right:-1px; margin-bottom:-1px; }
.aGallery ul li img, .GalleryProBox ul li img { width:115px; height:75px; border:1px solid #eee; padding:5px;}

.aImage img { max-width:100%;}
.aDetail { width:65%; float:left;}
.aRight { width:30%; float:right; margin-top:-7px;}
.aRight h1 { margin-top:0;}