#mb_i01 {width:100%; background-color:#fff; overflow:hidden; padding:70px 0 75px 0; }
#mb_i01 div.wd_11 {width:1100px; box-sizing:border-box; margin:0 auto; }
#mb_i01 section {float:left; width:538px;  margin:13px 0;  box-sizing:border-box; }
#mb_i01 section:nth-child(even) {float:right;}
#mb_i01 section a{box-shadow:1px 1px 6px rgba(0,0,0,0.2); min-height:148px;  border:1px solid #ccc; overflow:hidden;  
 display:block; box-sizing:border-box; padding:18px 30px }
#mb_i01 section a:hover {box-shadow:3px 3px 15px rgba(0,0,0,0.5); border:1px solid #333;  -moz-transition: ease-out 0.4s 0.1s;  -o-transition: ease-out 0.4s 0.1s;  -webkit-transition: ease-out 0.4s;
  -webkit-transition-delay: 0.1s;  transition: ease-out 0.4s 0.1s; }
#mb_i01 section a h3{font-weight:500; font-size: 24px; padding-bottom:10px;}
#mb_i01 section a p{font-size:13px; color:#888;}

#mb_i01 section a {background-repeat:no-repeat; background-position: 20px center;  transition: all 0.3s;}
#mb_i01 section a:hover { background-position: 0 center;  transition: all 0.3s; }
#mb_i01 section.Box_01 a {background-image:url("../img/img1.jpg"); background-color:#faf7f4; }
#mb_i01 section.Box_02 a {background-image:url("../img/img2.jpg"); background-color:#fdfdf3; }
#mb_i01 section.Box_03 a {background-image:url("../img/img3.jpg"); background-color:#f2f9fc; }
#mb_i01 section.Box_04 a {background-image:url("../img/img4.jpg"); background-color:#f2fbf0; }
#mb_i01 section.Box_05 a {background-image:url("../img/img5.jpg"); background-color:#f6eef1; }
#mb_i01 section.Box_06 a {background-image:url("../img/img6.jpg"); background-color:#f7f6f6; }
#mb_i01 section.Box_07 a {background-image:url("../img/img7.jpg"); background-color:#f6f4ee; }
#mb_i01 section.Box_08 a {background-image:url("../img/img8.jpg"); background-color:#f2fcf8; }

/*button effect*/
.link-effect-12 a { position: relative;  overflow: hidden; 
}
.link-effect-12 a p::before {
  height:2px; width: 100%;  background-color: #333;   content: "";  position: absolute;  left: 0;  top: 0;
  -moz-transform: translateX(-100%);  -ms-transform: translateX(-100%);  -webkit-transform: translateX(-100%);  transform: translateX(-100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 a p::after {
  height:2px; width: 100%;  background: #333;  content: "";  position: absolute;  right: 0;  bottom: 0;  
   -moz-transform: translateX(100%);  -ms-transform: translateX(100%);  -webkit-transform: translateX(100%);  transform: translateX(100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 a::before {  
  width:2px;  height: 100%;  background: #333;  content: "";  position: absolute;  left: 0;  top: 0;
  -moz-transform: translateY(100%);  -ms-transform: translateY(100%);  -webkit-transform: translateY(100%);  transform: translateY(100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 a::after {
  width:2px;  height: 100%;  background: #333;  content: "";  position: absolute;  right: 0px;  bottom: 0;  
    -moz-transform: translateY(-100%);  -ms-transform: translateY(-100%);  -webkit-transform: translateY(-100%);  transform: translateY(-100%);  -moz-transition: 0.4s;  -o-transition: 0.4s;  -webkit-transition: 0.4s;  transition: 0.4s;
}
.link-effect-12 a:hover::before, .link-effect-12 a:hover::after {
  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -webkit-transform: translateX(0);  transform: translateX(0);
}
.link-effect-12 a:hover p::before, .link-effect-12 a:hover p::after {
  -moz-transform: translateX(0);  -ms-transform: translateX(0);  -webkit-transform: translateX(0);  transform: translateX(0);
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#mb_i01 {padding:20px 0 40px 0; }	
#mb_i01 div.wd_11 {width:100%; }
#mb_i01 section:nth-child(even)  { margin:15px 0 0 0; }
#mb_i01 section,#mb_i01 section:nth-child(even)  {float:none; width:100%;  clear:both; display:block; overflow:hidden; }
#mb_i01 section a{background-position: right center;   display:block; min-height:128px; padding:15px 20px 0 20px;
 margin:0% 3%; background-repeat:no-repeat;  box-sizing:border-box; background-size:cover; }
#mb_i01 section a:hover { background-position: right center;  transition: all 0.3s; }
#mb_i01 section a h3{font-weight:500; font-size: 20px; padding-bottom:10px;}
#mb_i01 section a p{font-size:12px; color:#bbb;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
#mb_i01 section {float:left; width:100%;}
}
@media (max-width: 320px) {
}