@charset "utf-8";

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

.sfq ul{
	margin:0;
	padding:0;
    list-style:none;
}
.sfq li {
    float: left;
    width: 19.33%;
    height: 70.8rem;
	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 img {
   width:3.2rem;
   margin-left:-1.2rem;
   }
   
.sfq li .mokk {
   width:7.5rem;
   height:62.5rem;
   font-size:1.8rem;
   } 
   
.sfq li .mokk a {
   color:#1e2b5d;
   }    
   
.sfq li .mokk .mokk-tt {
   width:7.5rem;
   float:left;
   font-size:2.4rem;
   letter-spacing: 10px;
   line-height:3.6rem;
   padding-left:1.5rem;
   writing-mode: vertical-rl;
   padding-top:2.7rem;
   height:100%;
   border-right:1px solid rgba(255,255,255,0);
   }  
   
.sfq li .mokk .mokk-tt-en {
    letter-spacing: 0px;
}   
   
   
.sfq li .mokk .mokk-zi { 
   display:none;
   }
   

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

.sfq li.on img {
    filter: grayscale(100%) invert(100%) brightness(1000%);
   } 


.sfq li.on .mokk {
   width:36.5rem;
   height:62.5rem;
   font-size:1.6rem;
   text-align:left;
   background-color:rgba(30,43,93,0.8);
   border-radius: 0 0 50px 0;
   }
   
.sfq li.on .mokk a {
   color:#FFFFFF;
   }
   
.sfq li.on .mokk .mokk-tt {
   width:9rem;
   padding-right:1.8rem;
   border-right:1px solid rgba(255,255,255,1);
   }
   
.sfq li.on .mokk .mokk-zi {
   display:block;
   width:27.3rem;
   padding:1.4rem;
   padding-top:6rem;
   line-height:3rem;
   float:right;
   }


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


.sfq li:nth-child(1){
   background: url("../images/cpf1.jpg"); background-repeat:no-repeat;
   background-size: auto 100%;
}

.sfq li:nth-child(2){
   background: url("../images/cpf2.jpg"); background-repeat:no-repeat;
   background-size: auto 100%;
}

.sfq li:nth-child(3){
   background: url("../images/cpf3.jpg"); background-repeat:no-repeat;
   background-size: auto 100%;
}

.sfq li:nth-child(4){
   background: url("../images/cpf4.jpg"); background-repeat:no-repeat;
   background-size: auto 100%;
}