.banner-wr {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 1.5%;
    margin-bottom: 15px;
}
.banner-wr .product-banner {
    position: relative;
    width: 23%;
    margin: 1%;
    float: left;
    overflow: hidden;
}
.banner-wr .product-banner2 {
    position: relative;
    width: 48%;
    margin: 1%;
    float: left;
    overflow: hidden;
}
.banner-wr .product-banner img {
    height: auto;
    max-width: 100%;
    width: 100%;
    position: relative;
    transform: scale(1.01);
    transition: .1s; 
}
.banner-wr .product-banner2 img {
    height: auto;
    max-width: 100%;
    width: 100%;
    position: relative;
    transform: scale(1.01);
    transition: .1s; 
}
.banner-wr .product-banner .banner-img{
    overflow: hidden;
}
.banner-wr .product-banner2 .banner-img{
    overflow: hidden;
}
.banner-wr .product-banner:hover img{
    transform: scale(1.1);
    transition: .1;
}
.banner-wr .product-banner2:hover img{
    transform: scale(1.1);
    transition: .1;
}
.banner-wr .product-banner .banner-text-bl {
    position: absolute;
    color: #000;
    bottom: -19%;
    width: 98%;
    left: 1%;
    right: 1%;
    padding-bottom: 3%;
    padding-top: 3%;
    text-align: center;
    z-index: 2;
    overflow: hidden;
    padding-left: 9%;
    padding-right: 9%;
    transition: 0.2s;
}
.banner-wr .product-banner2 .banner-text-bl {
    position: absolute;
    color: #000;
    bottom: -15%;
    width: 100%;
    padding: 3% 33% 3% 11%;
    text-align: center;
    z-index: 2;
    overflow: hidden;
    transition: 0.2s;
}
.banner-wr .product-banner:hover .banner-text-bl{
    bottom: -2%;
    transition: 0.2s;
}
.banner-wr .product-banner2:hover .banner-text-bl {
    bottom: 2%;
    transition: 0.2s;
}
.banner-wr .product-banner .banner-text-bl h2{
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
    padding-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.2s; 
}
.banner-wr .product-banner2 .banner-text-bl h2{
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
    padding-bottom: 10px;
    text-align: left;
    text-transform: uppercase;
    transition: 0.2s; 
}
.banner-wr .product-banner2 .banner-title h2{
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding: 8px 0px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0;
    transition: 0.2s; 
}
.banner-wr .product-banner .banner-text-bl p{
    font-size: 12px;
    font-weight: 500;
    color: #000;
    text-align: center;
    opacity: 0;
    transition: 0.2s;
}
.banner-wr .product-banner2 .banner-text-bl p{
    font-size: 12px;
    font-weight: 500;
    color: #000;
    text-align: left;
    opacity: 0;
    transition: 0.2s;
}
.banner-wr .product-banner:hover .banner-text-bl p,
.banner-wr .product-banner2:hover .banner-text-bl p{
    opacity: 1;
    transition: 0.2s;
}
.product-banner .static-line{
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 1px;
    margin-bottom: 10px;
    opacity: 0;
}
.product-banner2 .static-line{
    position: relative;
    width: 100px;
    height: 1px;
    margin-bottom: 10px;
    opacity: 0;
}
.banner-wr .product-banner:hover .static-line,
.banner-wr .product-banner2:hover .static-line{
    opacity: 1;
}
.banner-background{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,.3);
    opacity: 0;
    transition: 0.2s;
}
.banner-wr .product-banner:hover .banner-background,
.banner-wr .product-banner2:hover .banner-background{
    opacity: 1;
    transition: 0.2s;
}

@media (max-width: 1200px) {
  .banner-wr .product-banner .banner-text-bl{
    padding: 3%!important; 
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 30% 3% 11%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    bottom: -24%!important;
  }
  .banner-wr .product-banner:hover .banner-text-bl{
    bottom: 0%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -18%!important;
  }
  .banner-wr .product-banner2:hover .banner-text-bl{
    bottom: 3%!important;
  }
}

@media (max-width: 1000px) {
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 2%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 27% 3% 11%!important;
  }
}

@media (max-width: 900px) {
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 18% 3% 11%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 18% 3% 8%!important;
  }
  .banner-wr .product-banner{
    width: 48%!important;
  }
  .banner-wr .product-banner2{
    width: 98%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl h2{
    font-size: 16px!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -5%!important;
  }
  .banner-wr .product-banner2:hover .banner-text-bl{
    bottom: 4%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    bottom: -8%!important;
  }
  .banner-wr .product-banner:hover .banner-text-bl{
    bottom: 1%!important;
  }
}

@media (max-width: 767px) {
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 8%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 18% 3% 8%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    bottom: -11%!important;
  }
  .banner-wr .product-banner:hover .banner-text-bl{
    bottom: 0%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -8%!important;
  }
  .banner-wr .product-banner2:hover .banner-text-bl{
    bottom: 2%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl h2{
    font-size: 15px!important;
  }
}

@media (max-width: 700px) {
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 5%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 18% 3% 8%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    bottom: -13%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -13%!important;
  }
}

@media (max-width: 600px) {
  .banner-wr .product-banner .banner-text-bl{
    bottom: -22%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -16%!important;
  }
}

@media (max-width: 500px) {
 .banner-wr .product-banner{
    width: 98%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 3%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 15% 3% 8%!important;
  }
  .banner-wr .product-banner .banner-text-bl h2, 
  .banner-wr .product-banner2 .banner-text-bl h2{
    font-size: 14px!important;   
  }
  .banner-wr .product-banner .banner-text-bl{
    bottom: -10%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -20%!important;
  }
}

@media (max-width: 400px) {
  .banner-wr .product-banner .banner-text-bl{
    bottom: -15%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    bottom: -28%!important;
  }
  .banner-wr .product-banner .banner-text-bl{
    padding: 3% 5%!important;
  }
  .banner-wr .product-banner2 .banner-text-bl{
    padding: 3% 11% 3% 8%!important;
  }
}