.boxwrapper{
  width: 100%;
     height: 370px;
}
.boxwrapper .disabled{    background-color: transparent!important;}
.boxwrapper .imgbox{
  width: 1180px;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.boxwrapper .siteblocks-header-banner{
position: relative;
}
.boxwrapper .fuhaoa{
width:40px;
      height:40px;
z-index: 10;
  }
  .boxwrapper .fuhao{
width:40px;
      height:40px;
      background:#000;
         opacity:0.5;
      color:#fff;
      text-align: center;
      line-height:40px;
      border-radius: 50%;
  
  }
  .boxwrapper .fuhao1{
display: inline-block;
position: absolute;
left: 5px;
top:125px;
z-index: 10;
}
.boxwrapper .fuhao2{
display: inline-block;
position: absolute;
z-index: 10;
right: 0;
top:125px;

}
.boxwrapper .imgul{
position: relative;
}
.boxwrapper .imgli{
  display: inline-block;
   width: 226px;
margin: 0 auto;
  /*float: left;*/
padding:0 5px;

}
.boxwrapper .wrap{   
margin: 0 auto;
}
.boxwrapper .banner-name{
margin: 0 auto;
}

/*图片翻转*/
.boxwrapper .wrap,.boxwrapper .box1,.boxwrapper .box2{
  width: 226px;                
height:226px;
overflow:hidden;
}
.boxwrapper img{
  width: 100%;
}
.boxwrapper .wrap{
  position: relative;
}
    /*使正反面在同一位置*/
    .boxwrapper .box2{
        transition: all 0.5s;
    }
    .boxwrapper .box1{
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility:hidden;    /*这个属性至关重要，当元素不面向屏幕时不可见，不然的话上面的div翻转180度后还是覆盖在下面的div上*/
}
.boxwrapper .box1{
 
              /*使正面在上面*/
  z-index: 2;
}
.boxwrapper .box2{

              /*先使背面翻转180度，当和正面一起翻转时正好背面作为正面*/
  transform: rotateX(180deg);
}
.boxwrapper .wrap:hover .box2{
            /*背面作为正面*/
  transform: rotateX(0deg);
}
.boxwrapper .wrap:hover .box1{
            /*正面作为背面*/
  transform: rotateX(-180deg);
}

/*图片下方文字*/
.boxwrapper .banner-name{
width: 226px;
height:80px;
background-color:#166836;
color:#FFFFFF;
  font-size: 18px;
  font-family: Helvetica;
text-align: center;
line-height:80px;
 overflow: hidden;
}
.boxwrapper .banner-name:hover{
background-color: #D27314;
  }

/*平板横屏*/   
@media screen and ( max-width: 1024px ){ 
.boxwrapper{
  width: 100%;
              height: 260px;
  
}
.boxwrapper .imgli{

  width: 200px; 
margin: 0 auto;

}
.boxwrapper .imgbox{
width:900px;        
}
.boxwrapper .wrap,.boxwrapper .box1,.boxwrapper .box2{
  width: 177px;                
height:177px;
overflow: hidden;
}
.boxwrapper img{
  width: 100%;                
}
.boxwrapper .banner-name{
width:177px;
height:60px;
line-height:60px;

}
.boxwrapper .fuhao1{
top:80px;

}
.boxwrapper .fuhao2{
top:80px;
}
}

/*平板竖屏*/   
@media screen and ( max-width:768px )   {
.boxwrapper{
  width: 100%;
height: 310px;
}
.boxwrapper .imgbox{
width:600px;        
}
.boxwrapper .imgli{

  width: 200px; 
margin: 0 auto;

}
.boxwrapper .wrap,.boxwrapper .box1,.boxwrapper .box2{
  width:190px;                
height:190px;
overflow: hidden;
}
.boxwrapper img{
  width: 100%;                
}
.boxwrapper .banner-name{
width:190px;
height:60px;
line-height:60px;

}
.boxwrapper .fuhao1{
top:105px;

}
.boxwrapper .fuhao2{
top:105px;
}
}

/*手机横屏*/
@media screen and ( max-width: 700px )   {

.boxwrapper{
      width: 100%;
height: 260px;
}
.boxwrapper .imgbox{
width:600px;        
}
.boxwrapper .imgli{

  width: 200px; 
margin: 0 auto;

}
.boxwrapper .wrap,.boxwrapper .box1,.boxwrapper .box2{
  width: 190px;                
height:190px;
overflow: hidden;
}
.boxwrapper img{
  width: 100%;
}
.boxwrapper .banner-name{
width: 190px;
height:60px;
line-height:60px;

}
.boxwrapper .fuhao1{
top:80px;

}
.boxwrapper .fuhao2{
top:80px;
}
}

/*手机竖屏*/   
@media screen and ( max-width: 640px )   {
.boxwrapper{
      width: 100%;
            height: 360px;
}
.boxwrapper .siteblocks-header-banner{
  top:20px;
}
.boxwrapper .imgbox{
width:200px;
 
}
.boxwrapper .imgli{
   width: 200px;
padding:0 
         
}
.boxwrapper .wrap,.boxwrapper .box1,.boxwrapper .box2{
  width: 200px;    
height: 200px;
overflow: hidden;
}
.boxwrapper img{
  width: 100%;                
}
.boxwrapper .banner-name{
width: 200px;
height:60px;
line-height:60px;

}
.boxwrapper .fuhao1{
left: 0px;
top:130px
}
.boxwrapper .fuhao2{
top:130px;
}
  
}