/* by Adon , CSS Document */

.products{ float:left; width:100%}
.products .p1{ font-size:40px;}
.products .p2{ font-size:35px; margin:5px 0;}
.products .p3{ font-size:16px;}
.products .products-l { float:left; width:100%; margin:100px 0;}
.products .products-l li{ float:left; width:101px; height:101px; margin-right:15px;background-repeat:no-repeat; color:#fff; text-align:center; font-size:14px; padding-top:40px;}
.products .products-l li a{ color:#fff;}
.products .products-l li .item{ display:none;}
.products .products-l li span{ display:block;}
.products .products-l li font{ display:block; font-size:18px; margin-top:2px;}
.products .products-l li.l1 { background-image:url(../img/products-l1.jpg)}
.products .products-l li.l2 { background-image:url(../img/products-l2.jpg)}
.products .products-l li.l3 { background-image:url(../img/products-l3.jpg)}
.products .products-l li.l4 { background-image:url(../img/products-l4.jpg)}
.products .products-l li:hover,.products .products-l li.on,.products .products-l li#on{background-image:url(../img/products-l.png)}
.products .products-l li:hover .item,.products .products-l li.on .item,.products .products-l li#on .item{ display:block;}
.products .products-a a{ float:left; width:24%; margin-right:1%;margin-bottom:1%;position:relative;}
.products .products-a a.clear{ margin-right:0;}
.products .products-a a .item{ display:none;position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:url(../img/products-a.png) repeat;}
.products .products-a a .item span{ color:#fff; font-size:13px; background:url(../img/products-aa.png) no-repeat; width:133px; height:40px; line-height:40px; display:block; margin:-22px auto 0 auto; position:relative; top:50%;}
.products .products-a a:hover .item{ display:block;}
.products-a { display:none;}

@media (max-width:1024px){
.products .products-a a{width:31.33%;margin-left:1% !important;margin-right:1% !important;}
}
@media (max-width:768px){
.products .p1{font-size:33px}
.products .p2{font-size:30px}
.products .p3{font-size:16px}
.products .products-l{ margin:10% 0;}
.products .products-a a{width:48%;margin-left:1% !important;margin-right:1% !important;}
.products .products-l li{ width:80px; height:80px; background-size:contain; padding-top:29px;}
.products .products-l li font{ font-size:15px;}
}
@media (max-width:640px){
.products .p1{font-size:26px}
.products .p2{font-size:20px;line-height:28px}
.products .p3{font-size:13px}
}
@media (max-width:480px){
.products .products-l{ margin:15% 0;}
.products .products-l li{ width:70px; height:70px;padding-top:25px;font-size:13px;}
.products .products-l li font{ font-size:13px;}
.products .products-a a{width:100%;margin-left:0px !important;margin-right:0px !important;}
}
@media (max-width:375px){
.products .products-l li{width:23%;margin:0 1%;height:80px; background-position:center; padding-top:30px; font-size:12px;}


}