@charset "utf-8";
@font-face {font-family: Futura; src: url(../fonts/FuturaPTMedium.otf);}

.logo-top {max-width: 110px; width: 100%; margin: 0 auto 6rem; padding-top: 3rem;}
.logo-top span {display: block; text-align: center; font-family: 'Futura', sans-serif; font-weight: 400; font-size: 2rem; margin-top: 1rem;}

.mainTxt {text-align: center; margin-bottom: 6rem;}

#brand-list {max-width: 1550px;}
#brand-list li {width: 24.78%;}
#brand-list li a {position: relative; display: block; overflow: hidden;}
#brand-list li:hover a:after {background: rgba(0, 0, 0, 0.2);}
#brand-list li a span {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; color: #fff; z-index: 9; text-align: center;}
#brand-list li a > img {transition: transform .5s ease;}
#brand-list li:hover a > img {transform: scale(1.1);}
#brand-list li:nth-of-type(1) a span img {width: 43% !important;}
#brand-list li:nth-of-type(2) a span img {width: 57.5% !important;}
#brand-list li:nth-of-type(3) a span img {width: 82% !important;}
#brand-list li:nth-of-type(4) a span img {width: 75% !important;}

/*Responsive*/

@media only screen and (max-width: 768px){  
  #brand-list li {width: 49%; margin-bottom: 2vw;}
}

@media only screen and (max-width: 767px){
  .logo-top {margin-bottom: 3rem;}
  .mainTxt {margin-bottom: 3rem; text-align: left;}
}