.brand {width:100%; background:url(../img/bg1.jpg)no-repeat center; height:650px;  padding:90px 0 100px 0; background-size:cover; }
.brand .mtit {padding-bottom:40px}
.brand h3 {color:#fff; }
.brand .flex {display:flex; justify-content: space-between; flex-wrap: wrap; top }
.brand .flex .item { width:270px;   transition:0.2s all; }
.brand .flex .item a {display:block; height:270px; width:270px; font-size:22px; text-align:center; padding-top:190px; font-weight:500;
background-repeat:no-repeat; background-position:center 60px ; background-color:rgb(0,0,0,0.5); color:#fff; border-radius:50%; transition:0.2s all; }
.brand .flex .item01 a {background-image:url(../img/ico1.png); }
.brand .flex .item02 a {background-image:url(../img/ico2.png); }
.brand .flex .item03 a {background-image:url(../img/ico3.png); }
.brand .flex .item04 a {background-image:url(../img/ico4.png); }
.brand .flex .item:hover {transition:0.2s all;  background:url(../img/b2.png)no-repeat center;}
.brand .flex .item a:hover { color:#fff;background-color:rgb(237,28,36,0.8); background-position:center 50px ; transition:0.2s all; }

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.brand {width:100%; height:580px;  padding:50px 0;  }	
.brand .mtit {padding-bottom:20px}
.brand .flex .item { width: 48%;  transition:0.3s all; background-size:contain;}
.brand .flex .item a { height:auto; width: 100%;  font-size:18px;  padding:110px 0 25px 0; background-position:center 30px;
 background-size:70px; border-radius:0; margin-bottom:15px;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}