.view {  height:auto; background-color:#FFFFFF; margin: 10px 0px 0px 20px; border: 5px solid rgb(255, 255, 255); overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 3px rgb(170, 170, 170); cursor: default; }
.view .mask, .view .content { width: 268px; height:100%; position: absolute; overflow: hidden; top: 0px; left: 0px; }
.view img { display: block; position: relative; }

.view:hover a{ color:#fff;}
.view:hover a{ background-color:#00965c;}

.view:hover{ color:#fff;z-index:9999;}



.effect img {
   opacity:1;
   -moz-transform:scale(1,1);
   -webkit-transform:scale(1,1);
   -o-transform:scale(1,1);
   -ms-transform:scale(1,1);
   transform:scale(1,1);
   -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;
}
.effect .mask {
   opacity:0;

   width:0;
   height:0;
   -moz-transform:translateY(-125px);
   -webkit-transform:translateY(-125px);
   -o-transform:translateY(-125px);
   -ms-transform:translateY(-125px);
   transform:translateY(-125px);
   -moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
   -webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
   -o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
   -ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
   
}
.effect a.info {
	opacity:0;
   -moz-transform:translateY(-125px);
   -webkit-transform:translateY(-125px);
   -o-transform:translateY(-125px);
   -ms-transform:translateY(-125px);
   transform:translateY(-125px);
   -moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
   -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
   -o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
   -ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;

}
.effect:hover img {
	opacity:0.7;
   -moz-transform:scale(1.1,1.1);
   -webkit-transform:scale(1.1,1.1);
   -o-transform:scale(1.1,1.1);
   -ms-transform:scale(1.1,1.1);
   transform:scale(1.1,1.1);
}
.effect:hover .mask {
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
    background:url(../images/333.jpg) no-repeat center 13px; 
}
.effect:hover a.info {
	opacity:1;
   -moz-transform:translateY(0px);
   -webkit-transform:translateY(0px);
   -o-transform:translateY(0px);
   -ms-transform:translateY(0px);
   transform:translateY(0px);
}



.view a.info { background: url('../images/link.png') no-repeat scroll center 40% transparent; display: inline-block; text-decoration: none; padding: 0px; text-indent: -9999px; width:100%; height:100%; margin-left:-10px;}



.in_caseimg {margin-top: 40px;
    width: 28%;
    margin-left: 2%;
    margin-right: 2%;}
	
.mf_case {
    width: 1200px;
    margin: 0px auto;}
	
	
.in_caseimg img{ width:96%; margin:2% auto;}	

.pic_name a{ width:100%; height:100%; display:block;}
.pic_name a:hover{ color:#fff;}	
@media (max-width:1200px) {.mf_case {
    width: 1000px;
    margin: 0px auto;}}
	
	
.pic_name {
    display: block;
    margin-top: 0px;
    z-index: 9999;
    position: relative;
    height:auto;
    line-height: 24px;
    font-size: 16px;
    text-align: left;
	width:100%;
	text-align:center;
}


.pic_name span {
    height: 40px;
    padding-top: 8px;
	display:inline-block;
}

.pic_name span a:hover{ color:#fff;}


@media (min-width:769px) and (max-width: 1222px){
.view {
    height: auto;
	width:30%;
    background-color: #FFFFFF;
    margin: 40px 1% 0 1%;
    border: 4px solid rgb(255, 255, 255);
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0px 0px 3px rgb(170, 170, 170);
    cursor: default;
}


.view .mask, .view .content {
    width:-webkit-fill-available;
    height: 170px;}	
	
.pic_name span {
    height: 30px;
    padding-top: 10px;
    display: inline-block;}
.pic_name{height: auto; width:100%;}
}
@media (max-width:768px){
.mf_prconr{ width:100%; float:none; margin:0px;}
.mf_prconr22{ width:100%; float:none; margin:0px;}
.view{ width:45%; margin:30px 0px 0px 3%; height:auto;}
.in_caseimg img{ width:100%; height:auto;}
.effect .mask{ display:none;}
.view .mask, .view .content{ display:none;}
.pic_name{ height:auto}
.pic_name span { height:34px; font-size:13px;  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;}

}