.search-box{ margin:0 10px;}
.search-box .title-search{ padding: 4px; text-align: left; margin: 10px 0; font-weight: bold; color: #000;}
.search-box .title-search i{ font-size: 18px; color: #343998;}
.search-box .button-brand { width: 100%; padding: 8px 0; border-radius: 12px; background: #e4f4fe;}
.search-box .button-brand ul{ text-align: center;}
.search-box .button-brand ul li{ width: 18%; display: inline-block; margin: 3px auto; }
.search-box .button-brand ul li a{ display: block; width: 100%; padding: 8px 0; color: #666666;}
.search-box .button-brand ul li a:hover{ background: #abdfff; border-radius: 18px;}
.search-box .button-brand ul li a span{ font-size: 22px;}

.search-box .button-brand.type-car ul li{ text-align: center; width: 23%;}
.search-box .button-brand.type-car ul li a{ padding-left: 12px; font-weight: normal; font-size: 12px;}
.search-box .button-brand.type-car ul li a img{ display: block; margin: auto;}
.search-box .button-brand.type-car ul li a:hover{ background: none; color: #5ebafd;}

.search-box .button-brand.type-price ul li{ text-align: left; width: 23%;}
.search-box .button-brand.type-price ul li a{ padding-left: 12px; font-weight: normal; font-size: 16px;}
.search-box .button-brand.type-price ul li a:hover{ background: none; color: #5ebafd;}

.search-box .button-brand.type-mile ul li{ text-align: center; width: 16%;}
.search-box .button-brand.type-mile ul li a img{ display: block; margin: 8px auto;}
.search-box .button-brand.type-mile ul li a{ padding-left: 12px; font-weight: normal; font-size: 16px;}
.search-box .button-brand.type-mile ul li a:hover{ background: none; color: #5ebafd;}

@media ( max-width:768px){
  .search-box .button-brand ul li{ width: 30%;}
  .search-box .button-brand.type-car ul li{ width: 48%;}
  .search-box .button-brand.type-mile ul li{ width: 30%;}
}

@media ( max-width:420px){
  .search-box .button-brand ul li{ width: 48%;}
  .search-box .button-brand.type-car ul li{ width: 60%;}
}