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

.sfq ul{
	margin:0;
	padding:0;
    list-style:none;
}
.sfq li{
    float: left;
    width: 18.5%;
    height: 194px;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    transition:width .3s ease-out;
}
.sfq li.on{
    width: 44.5%;
	opacity: 1;
}
.sfq li.on i{
    opacity:0;
    transform: translate3d(-100%,0,0);
}

.sfq li:nth-child(1){
   background: url("../images/m1.jpg") no-repeat;
}
.sfq li:nth-child(2){
   background: url("../images/m2.jpg") no-repeat;
}
.sfq li:nth-child(3){
   background-color:#de262e;
}
.sfq li:nth-child(4){
   background: url("../images/ss2.jpg") no-repeat; background-size: 100% 100%;
}



.sfq li i{
    display: block;
    width: 25%;
	height: 194px;
    transition: all .3s
}