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

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

.sfq li.on h3 {
   opacity:0;
   }   

.sfq li.on .mknn {
   display:block;
   }
   
.sktt1 {
   position:relative;
   width: 100%;
   height:600px;
   padding:36px;
   font-size:16px;
   line-height:26px;
   color:#FFFFFF;
   background-color:rgba(5,135,224,0.8);
   }
   
.sktt1 a {
    color:#FFFFFF;
}

.sktt1 a:hover {
    color:#FFFFFF;
}
   
.sktt1 h2 {
   font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
   font-size:24px;
   color:#FFFFFF;
   margin-top:10px;
   margin-bottom:40px;
   } 
   
.sktt2 {
   position:relative;
   width: 100%;
   height:600px;
   padding:36px;
   font-size:16px;
   line-height:26px;
   color:#FFFFFF;
   background-color:rgba(0,55,139,0.8);
   }
   
.sktt2 a {
    color:#FFFFFF;
}

.sktt2 a:hover {
    color:#FFFFFF;
}
   
.sktt2 h2 {
   font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
   font-size:24px;
   color:#FFFFFF;
   margin-top:10px;
   margin-bottom:40px;
   } 
   
.sktt3 {
   position:relative;
   width: 100%;
   height:600px;
   padding:36px;
   font-size:16px;
   line-height:26px;
   color:#FFFFFF;
   background-color:rgba(0,35,89,0.8);
   }
   
.sktt3 a {
    color:#FFFFFF;
}

.sktt3 a:hover {
    color:#FFFFFF;
}
   
.sktt3 h2 {
   font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
   font-size:24px;
   color:#FFFFFF;
   margin-top:10px;
   margin-bottom:40px;
   } 

.sfq li:nth-child(1){
   background: url("../images/lmt1.jpg") -430px; background-repeat:no-repeat;
}

.sfq li.on:nth-child(1) {
   background: url("../images/lmt1.jpg") 0px; background-repeat:no-repeat;
   background-size: 100% 600px;
}

.sfq li.on:nth-child(1) .sktt1 {
   width: 29.4%;
   float:right;
   }

.sfq li:nth-child(2){
   background: url("../images/lmt2.jpg") -430px; background-repeat:no-repeat;
}
.sfq li.on:nth-child(2) {
   background: url("../images/lmt2.jpg") 0px; background-repeat:no-repeat;
   background-size: 100% 600px;
}

.sfq li.on:nth-child(2) .sktt2 {
   width: 29.4%;
   float:right;
   }

.sfq li:nth-child(3){
   background: url("../images/lmt3.jpg") -430px; background-repeat:no-repeat;
}

.sfq li.on:nth-child(3) {
   background: url("../images/lmt3.jpg") 0px; background-repeat:no-repeat;
   background-size: 100% 600px;
}

.sfq li.on:nth-child(3) .sktt3 {
   width: 29.4%;
   float:right;
   }



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