@charset 'utf-8';


#banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  z-index: 10; width: 100%; }
#banner .tint { padding: 0 10px; color: #fff; text-align: center;}
#banner .tint h2 { display: inline-block; padding: 0 80px 20px; margin: 0 auto 20px; font-size: 50px; line-height: 1; font-weight: 500;  border-bottom: 1px solid #fff;}
#banner .tint > p { padding: 0 0 50px; font-size: 25px; font-weight: 400;}
#banner .tint > p span { padding: 0 0 10px; display: block; line-height: 1.2;} 
#banner .tint .prods { display: flex; justify-content:space-between;}
#banner .tint .prods .prod { position: relative; padding: 0 10px;  width: 25%; }
#banner .tint .prods .prod .img { position: relative; padding: 20px 0; }
#banner .tint .prods .prod .img:after { content:''; display: block; position: absolute; top: 0; left: 0;  width: 343px; height: 343px; background: url('/data/main/bg-prod.png') no-repeat center top /contain ; opacity:.2; transition: opacity .2s; transition: transform .4s;}
#banner .tint .prods .prod:hover .img:after { opacity:.4; transform: rotate(25deg);}
#banner .tint .prods .prod .img img { position: relative; z-index: 5; width: 100%; max-width: 371px;}
#banner .tint .prods .prod p { position: relative;z-index: 6;  margin: -40px 0 0; font-size: 25px; font-weight: 500;  }

@media (max-width:1500px){
    #banner .tint .prods .prod .img:after { width: 100%; height: 300px;}
}
@media (max-width:769px){
    #banner .tint .prods .prod { padding: 0 5px;}
    #banner .tint .prods .prod p { font-size: 21px; text-align: right;}
}
@media (max-width:576px){
    #banner .tint h2 { padding: 0 30px 15px; margin: 0 0 15px; font-size: 40px;}
    #banner .tint > p { padding: 0 0 35px; font-size: 17px;}
    #banner .tint > p span { padding: 0 0 5px;}
    #banner .tint .prods { flex-wrap:wrap; margin: 0 auto; }
    #banner .tint .prods .prod .img { width: 80%;}
    #banner .tint .prods .prod { margin: 0 1% 20px; width: 48%; }    
    #banner .tint .prods .prod p { font-size: 18px; }
}
@media (max-width:480px){
    #banner .tint .prods .prod .img { width: 100%;}
}