﻿


.bannerSection{ position:relative; overflow: hidden; }
	.bannerPlaceholder{ width:100%; display:block; }
	.bannerWrap{ width:100%;  position:absolute; top:0; left:0; text-align:center;}
		.bannerWrap a{ display:inline-block; margin:0 auto; width:100%; max-width:1200px; position:relative;}
		.bannerImg{ position:absolute; top:0; left:0px; width:100%;  }
		.bannerText{ position:absolute; top:0; right:0px; width:100%;  }
    .loading { background: url(../images/spinner.gif) no-repeat center center; }
	.navBannerWrap{ width:100%; background-color:#333; background-color:#333333; position: relative; }
		.navBannerList{ width:100%; margin:0 auto; max-width:1200px;  }
			.navBannerList li{ width:6.25%; text-align:center; float:left; cursor: pointer;  }
			.navBannerList li a{ display:block;}
			.navBannerList li a img{ width:86.66%;}
			.navBannerList li:hover a{ background-color:#009ad5;}
			.navBannerList li .selected{ background-color:#009ad5;}
			
.bannerTagWrap{ display:block; height:110px; position:absolute; top:0; right:0;}		
.bannerTagWrap img{ width:100%;}	
				
		
/*background for each product*/		
	.bannerNRV2{ background-color:#066389;}	
	.bannerPVV2{ background-color:#0a558f;}	
	.bannerLBV2{ background-color:#0b638e;}	
	.bannerUE{ background-color:#1883a3;}	
	.bannerNS{ background-color:#1a599e;}	
	.bannerRR{ background-color:#1692a7;}	
	.bannerLS{ background-color:#1589a1;}	
	.bannerLI{ background-color:#298381;}	
	.bannerARV{ background-color:#006e98;}	
	.bannerASQ{ background-color:#2b6aa9;}	
	.bannerAWC{ background-color:#3192c6;}	
	.bannerKO{ background-color:#228193;}	
	.bannerCF{ background-color:#032138;}	
	.bannerRV{ background-color:#1a8297;}	
	.bannerWC{ background-color:#1a5a97;}		
	.bannerSQ{ background-color:#2b6aa9;}	
			
			

@media screen and (min-width: 1201px) { 
.bannerWrap{ height:454px;} 
.bannerPlaceholder{ height:454px;}
.bannerTagWrap{ width:130px;}
.navBannerList{ height:60px;}
}	


@media screen and (min-width: 801px) and (max-width: 1200px) { 
.bannerWrap{ padding-bottom:38%; } 	
.bannerPlaceholder{  padding-bottom:38%;} 
.bannerTagWrap{ width:10.83%;}
.navBannerList{ padding-bottom:5%;}
}		

	
@media screen and (max-width: 800px) {
.bannerWrap{ padding-bottom:38%;} 	
.bannerPlaceholder{  padding-bottom:38%;}  
.bannerTagWrap{ width:10.83%;}
.navBannerList{ height:40px;}

	
	.navBannerList li a img{ display:none; }
	.navBannerList li a{ display:block; height:40px;  background:url(../images/dot_navbg.png) center center no-repeat;}
	.navBannerList li:hover a{ background-color:#009ad5;}
	.navBannerList li .selected{background:url(../images/dot_navbg_highlight.png) center center no-repeat #009ad5;}
}


.homeSctn01{ background-color:#f4f4f4;}
.homeSctn02{ background-color:#ffffff;}

.homeProWrap{ margin-bottom:20px; text-align:left;}
.homePro1{ float:left;}
.homePro2{ float:left;}
.homePro3{ float:right;}


@media screen and (max-width: 750px) {
	.homePro1, .homePro2, .homePro3{ width:100%; margin-bottom:10px;}	
	.proImg, .proImg img{ width:100%;}
	
	.homeProWrap div .tagOffice365,
.homeProWrap div .tag2013ready,
.homeProWrap div .tag2016ready,
.homeProWrap div .tag2019ready,
.homeProWrap div .tagNew,
.homeProWrap div .tagHot,
.homeProWrap div .tagFree,
.homeProWrap div .tagHotFree{ margin:0 0 0 4px; position:relative; top:-6px;}
}


@media screen and  (min-width: 751px) and (max-width: 900px) {
	.homePro1, .homePro2, .homePro3{ width:32%;}
	.homePro1{ margin:0 2% 0 0;}
	.homeProTitle{  width:100%;  float:left; height:35px;}
	.proImg, .proImg img{ width:100%;}
	
	.homeProWrap div .tagOffice365,
.homeProWrap div .tag2013ready,
.homeProWrap div .tag2016ready,
.homeProWrap div .tag2019ready,
.homeProWrap div .tagNew,
.homeProWrap div .tagHot,
.homeProWrap div .tagFree,
.homeProWrap div .tagHotFree{ margin:0 4px 0 0; }
		
}

@media screen and (min-width: 901px) {
	.homePro1, .homePro2, .homePro3{ width:32%;}
	.homePro1{ margin:0 2% 0 0;}
	.proImg, .proImg img{ width:100%;}
	
	.homeProWrap div .tagOffice365,
.homeProWrap div .tag2013ready,
.homeProWrap div .tag2016ready,
.homeProWrap div .tag2019ready,
.homeProWrap div .tagNew,
.homeProWrap div .tagHot,
.homeProWrap div .tagFree,
.homeProWrap div .tagHotFree{ margin:0 0 0 4px; position:relative; top:-6px;}
		
}


.proImg{ margin:0 0 12px 0; float:left;}
	.proImg img{ width:100%;}
.homeProTitle{  text-align:left;  color:#009ad5;}
.homeProContent{ display:block; text-align:left; margin:5px 10px 30px 0px;}





.newsSctn{background-color:#f4f4f4; }


.newsList{ text-align:left; padding:0 0 40px 0;}
	.newsList li{ padding:0; }
		.newsTitle{ display:inline-block;  float:left;}
		.newsDesc{ display:block; }
		.newsList li .link{ color:#009ad5; }
	
	.linkMore{ color:#009ad5; }	
		

@media screen and (max-width:760px){	
.newsList2, .newsList3{ display:none;}
.newsList li{  margin:0 0 30px 100px;}
	.newsTitle{  width:100px; margin:0 0 0 -100px;}
}

@media screen and (min-width:761px) and (max-width:1140px){	
.newsList1{ width:50%; float:left;}
.newsList2{width:50%; float:left;}
.newsList3{ display:none;}
.newsList li{  margin:0 0 30px 100px;}
	.newsTitle{  width:100px; margin:0 0 0 -100px;}
}

@media screen and (min-width:1141px){	
.newsList1{ width:32%; margin-right:2%; float:left;}
.newsList2{ width:32%; margin-right:2%; float:left;}
.newsList3{ width:32%;float:right;}
.newsList li{  margin:0 0 30px 100px;}
	.newsTitle{  width:100px; margin:0 0 0 -100px;}
}


.error { color: #cc0000; }
.btnSendMesg:hover { cursor: pointer; }

#contactMessage	{height:278px;	margin:20px 0 0 60px; }
#contactMessage h4{ color:#bdbdbd; }
#contactMessage p{ margin:6px 0px; }
#checkmark{ position:relative;top:-50px;left:-60px; }		
		
