@charset "utf-8";

.cpgun {
   height:auto; overflow:hidden;
   margin-left:-6px;
   margin-right:-6px;
   margin-top:83px;
   }

.cpgun ul{
	margin:0;
	padding:0;
    list-style:none;
}
.cpgun li{
    float: left;
    width: 12.5%;
	padding-left:6px;
	padding-right:6px;
    height: 552px;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    transition:width .3s ease-out;
}
.cpgun li.on{
    width: 62.5%;
	padding-left:6px;
	padding-right:6px;
	opacity: 1;
}
.cpgun li.on i{
    opacity:0;
    transform: translate3d(-100%,0,0);
}
.cpgun li:nth-child(1){

}
.cpgun li:nth-child(2){

}
.cpgun li:nth-child(3){

}


.cpgun li.on .cpgk1 {
    background:url(../images/cpl1.jpg) center;
	background-size: 100% 100%;
	opacity: 1;
}

.cpgun li.on .cpgk2 {
    background:url(../images/cpl2.jpg) center;
	background-size: 100% 100%;
	opacity: 1;
}

.cpgun li.on .cpgk3 {
    background:url(../images/cpl3.jpg) center;
	background-size: 100% 100%;
	opacity: 1;
}

.cpgun li.on .cpgk4 {
    background:url(../images/cpl4.jpg) center;
	background-size: 100% 100%;
	opacity: 1;
}


.cpgk1 {
   height: 552px;
   position:relative;
   padding:40px;
   padding-top:150px;
   background:url(../images/cpl1.png) center; background-repeat:no-repeat;
   background-color:#9898a0;
   opacity: 1;
   }
   
.cpgk2 {
   height: 552px;
   position:relative;
   padding:40px;
   padding-top:150px;
   background:url(../images/cpl2.png) center; background-repeat:no-repeat;
   background-color:#9898a0;
   opacity: 1;
   }
   
.cpgk3 {
   height: 552px;
   position:relative;
   padding:40px;
   padding-top:150px;
   background:url(../images/cpl3.png) center; background-repeat:no-repeat;
   background-color:#9898a0;
   opacity: 1;
   }
   
.cpgk4 {
   height: 552px;
   position:relative;
   padding:40px;
   padding-top:150px;
   background:url(../images/cpl4.png) center; background-repeat:no-repeat;
   background-color:#9898a0;
   opacity: 1;
   }   
   

.cpgun li i{
    display: block;
    width: 25%;
	padding-left:6px;
	padding-right:6px;
	height: 552px;
    transition: all .3s
}
.cpgun li:nth-child(1) i{
    background: red;
}
.cpgun li:nth-child(2) i{
    background:greenyellow;
}
.cpgun li:nth-child(3) i{
    background:blue;
}
.cpgun li:nth-child(4) i{
    background:aqua;
}
.cpgun li:nth-child(5) i{
    background:aqua;
}

.gunzi {
   position:absolute;
   left:18px;
   bottom:30px;
   width:100%;
   color:#FFFFFF;
   z-index:2;
   }
   
.gunzi h2 {
   font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
   font-size:17px;
   margin-top:0px;
   margin-bottom:9px;
   color:#FFFFFF;
   }
   
.gunzi-more {
   margin-top:30px;
   width:100px;
   height:22px;
   font-size:12px;
   }
   
.gunzi-more a {
   display:block;
   width:100px;
   height:22px;
   line-height:22px;
   color:#FFFFFF;
   background:url(../images/jtw2.png) right; background-repeat:no-repeat;
   }
   
.gunzi-more a:hover {
   color:#FFFFFF;
   }
   
.cpgun li.on .gunzi {
   left:48px;
   bottom:30px;
   font-size:22px;   
}  

.cpgun li.on .gunzi h2 {
   font-size:22px;  
}  

.cpgun li.on .gunzi-more {
   font-size:14px;  
}