@charset "utf-8";

.sfq {
   height:auto; overflow:hidden;
   }

.sfq ul{
	margin:0;
	padding:0;
    list-style:none;
}
.sfq li {
    float: left;
    width: 14.1%;
    height: 58rem;
	position:relative;
    background-size: cover;
	margin-right:0.5%;
	     background: -webkit-linear-gradient(#bfdcdf, #61b6bd); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#bfdcdf, #61b6bd); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#bfdcdf, #61b6bd); /* Firefox 3.6 - 15 */
  background: linear-gradient(#bfdcdf, #61b6bd); /* ��׼���﷨ */ 
    overflow: hidden;
    cursor: pointer;
    transition:width .3s ease-out;
}

.sfq li .dt {
   display:none;
   }
   
.sfq li .xt {
   display:block;
   }

.sfq li img {
   width:100%;
   opacity:0.5;
   }
   
.sfq li .wenzi {
   position:absolute;
   width:100%;
   line-height:3.6rem;
   text-align:center;
   color:#FFFFFF;
   font-size:1.8rem;
   left:0px;
   bottom:4.5rem;
   } 
   
.sfq li .sfmore {
   font-size:1.4rem;
   display:none;
   }  
   
.sfq li .sfmore a {
   color:#FFFFFF;
   }

.sfq li.on{
    width: 41.1%;
	background: #f0f1f1;
	opacity: 1;
}
.sfq li.on i{
    opacity:0;
    transform: translate3d(-100%,0,0);
}

.sfq li.on img {
   width:100%;
   opacity:1;
   } 

.sfq li.on .dt {
   display:block;
   }

.sfq li.on .xt {
   display:none;
   }

.sfq li.on .wenzi {
   position:absolute;
   width:21.8rem;
   height:11rem;
   color:#FFFFFF;
   padding-left:3rem;
   padding-top:2rem;
   text-align:left;
   background-color:#008f9b;
   }
   
.sfq li.on .sfmore {
   display:block;
    }

.sfq li i{
    display: block;
    width: 20%;
	height: 58rem;
    transition: all .3s;
}