


.boxes li {position:relative;
			display: block;
			float: left;
			z-index:999;
			width:24%;
			margin:0 1.33% 0 0;
			font-size:15px; color:#FFF; height:283px; padding:20px;
			
			}
			
		.boxes li:nth-child(4){margin:0 0 0 0;}
		.boxes li a.entire{display:block; height:auto; }
		.boxes li a img {height:auto;	width:100%;}
		.boxes li span{padding:0 5px; color:#FFF; font-size:17px; text-align:center; height:50px; line-height:50px; display:block;
		background-color: rgba(0,113,188,1); width:100%; z-index:9999; border-top:#FFF solid thin}
		
/*		.boxes li:nth-child(3) span{ padding:13px 5px 6px 5px}
		.boxes li:nth-child(4) span{ padding:13px 5px 6px 5px}*/
		
		ol.buletBox li{	background:url(../images/bulet.png) no-repeat left 8px;  padding:0 15px 0 15px; float:left; width:auto;}

@media only screen and (max-width: 768px) {
		.boxes li {width:50%; float:none; margin:0 auto 25px auto;}	
		}

@media only screen and (max-width: 640px) {		
		
		}
		
		
@media only screen and (max-width: 480px) {	
		.boxes li {width:100%; float:none;}	
		}
		
		
		
/*.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}*/		
.view-third {

   float: left;

   overflow: hidden;
   position: relative;

   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}

.view-third img {
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
   display: block;
   position: relative;
}

.view-third .mask { width: 85.6%; color:#FFF;
	padding:15px;
    font-size:16px;
	line-height:20px;
	height: 67%;
	position: absolute;
	overflow: hidden;
	top: 7%;
	text-align:center;
	display:block;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(0,113,188,0.8);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.view-third h3 {margin:5% 0 5% 0; font-size:18px;
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p { line-height:18px;
    -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
   font-size:15px; text-align:justify;
   
}
.view-third a.info {

  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   margin:5% 0 0 0;
   color: #fff;
   font-size:14px;
   position:absolute;
   bottom:0;
   right:0;

}


.view-third:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;

}
.view-third:hover h3 { 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-third:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-third:hover a.info { 
	 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);

   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				