#icon { width:100%; overflow:hidden; padding:100px 0 80px 0; font-size:17px; border-bottom:1px solid #dfdfdf; 
background:url(../img/bg.jpg)no-repeat center; background-size:cover}
#icon ul {padding:0; width:1200px; margin:0px auto;}
#icon ul li {float:left;  width:14.28571%; list-style-type:none; padding:25px 0;}
#icon ul li a{display:block; height:152px; background-color:#fff; border-radius:7px;
 text-align: center; padding-top:110px; box-sizing:border-box; margin:0 6px; font-size:20px; color:888;
 background-repeat:no-repeat; background-position: center 25%; transition: all 0.3s;}
#icon ul li a:hover{background-color:#c6dff2;  transition: all 0.3s;}

#icon ul li.ico1 a{ background-image:url("../img/ico1.png"); }
#icon ul li.ico2 a{ background-image:url("../img/ico2.png"); }
#icon ul li.ico3 a{ background-image:url("../img/ico3.png");}
#icon ul li.ico4 a{ background-image:url("../img/ico4.png");}
#icon ul li.ico5 a{ background-image:url("../img/ico5.png");}
#icon ul li.ico6 a{ background-image:url("../img/ico6.png");}
#icon ul li.ico7 a{ background-image:url("../img/ico7.png"); }



/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#icon { width:100%; overflow:hidden; padding:50px 0 50px 0;	}
#icon ul {width:95%; }
#icon ul li a{ padding-top:105px; }
#icon ul li {float:left;  width:25%; list-style-type:none; padding:5px 0 15px;}

#icon ul li a{display:block; height:100px; background-color:#fff; border-radius:7px; background-size:70%;
 text-align: center; padding-top:70px; box-sizing:border-box; margin:0 6px; font-size:15px; color:888;
 background-repeat:no-repeat; background-position: center 25%; transition: all 0.3s;}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}