.frame1 { display:inline; float:left; width:33%; padding-top:20px; padding-left:10px}
.wrap {width:220px; height:290px; position:relative; overflow:hidden; font-family:arial, sans-serif;}
.wrap img {display:block;}
.wrap div {width:210px; height:320px; padding:320px 10px 10px 10px; position:absolute; left:0; top:0; background:url(trans.gif);}
.wrap div b {display:block; width:220px; height:320px; position:absolute; left:0; top:320px; z-index:0; background:#378fcb; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;}
.wrap div span {position:relative; z-index:500;}
.wrap div h1{font-size:22px; color:#fc0; text-align:center; margin:0; padding:0;}
.wrap div p {font-size:12px; color:#fff; line-height:16px;}


.clear {clear:both;}
@media screen and (max-width: 1200px) { 
.frame1 { display:inline; float:left; width:30%; padding-left:10px; padding-bottom:30px;}
}
@media screen and (max-width: 600px) { 
.frame1 { display:inline; float:left; width:50%; padding-left:10px;}
}