#ProductIndex{ width: 1200px;margin: 0px auto;margin-top: 25px}
#ProductIndex .title{ height: 53px;background: url(line1.png) repeat-x center;text-align: center;margin-bottom: 30px}
#ProductIndex .title a{ background: #2a904f no-repeat;display: inline-block;background-size: 100% 100%;height: 53px;width: 300px;color: #fff;text-transform: uppercase;font: normal 32px/53px UTMBeBas }

#ProductIndex ul{ margin: 0;padding: 0;list-style: none;}

#ProductIndex ul li{ box-sizing: border-box;width: 283px;height: 313px;border: 1px solid #e7e7e7;display: inline-block;margin-right: 22px;margin-bottom: 22px;position: relative;}
#ProductIndex ul li *{ transition: 0.3s;}
#ProductIndex ul li.item3{ margin-right: 0;}
#ProductIndex ul li .frameOut{ width: 281px;height: 232px;display: table;background: #fff;border-bottom: 1px solid #e7e7e7}
#ProductIndex ul li .frameOut .frameIn{width: 281px;height: 232px;display: table-cell;text-align: center;vertical-align: middle;}
#ProductIndex ul li .frameOut .frameIn img{ max-width: 281px;max-height: 232px;}
#ProductIndex ul li .nameProduct{ display: table;height: 78px;width: 281px;background: #f9f9f9;position: relative;}
#ProductIndex ul li .nameProduct .titNews{ display: table-cell;height: 78px;width: 281px;vertical-align: middle;text-align: center;font: bold 16px/22px Arial;color: #333;padding: 10px;box-sizing: border-box;}
#ProductIndex ul li .nameProduct .icoArrow{ background: url(icoarrow.png.ashx) no-repeat center;width: 18px;height: 9px;position: absolute;top: -9px;left: 24px;display: block;}
#ProductIndex ul li:hover .titNews{color: #084a7a}

#ProductIndex ul li .moreInfo{ display: none;position: absolute;top: 0;left: 0;background: #fff;border: 1px solid #e7e7e7;box-shadow: 0 0 10px #ccc;width: 390px;box-sizing: border-box;z-index: 4;left: -20%;transform: scale(0);transition: 0.6s}
/*#ProductIndex ul li:hover .moreInfo{ display: block;}*/

#ProductIndex ul li .moreInfo .frameOutMore{ width: 388px;height: 321px;display: table;background: #fff;}
#ProductIndex ul li .moreInfo .frameOutMore .frameInMore{ width: 388px;height: 321px;display: table-cell;text-align: center;vertical-align: middle;}
#ProductIndex ul li .moreInfo .frameOutMore .frameInMore img{ max-width: 388px;max-height: 321px;}

#ProductIndex ul li .moreInfo .infoMore{ background: #f9f9f9;box-sizing: border-box;padding: 20px 20px 30px;border-top: 1px solid #e7e7e7;position: relative;text-align: center;}
#ProductIndex ul li .moreInfo .infoMore .icoArrow{ background: url(icoarrow.png.ashx) no-repeat center;width: 18px;height: 9px;position: absolute;top: -9px;left: 24px;display: block;}
#ProductIndex ul li .moreInfo .infoMore .titMore{font: bold 16px/22px Arial;color: #084a7a;}
#ProductIndex ul li .moreInfo .infoMore .titMore:hover{color: #25964e}
#ProductIndex ul li .moreInfo .infoMore .descMore{ font: normal 14px/24px Arial;color: #333;margin: 10px 0;}
#ProductIndex ul li .moreInfo .infoMore .detailButton{ text-align:center;}
#ProductIndex ul li .moreInfo .infoMore .detailMore{ background: #25964e;min-width: 133px;height: 36px;padding: 0 10px;box-sizing: border-box;font: normal 14px/36px Arial;text-transform: uppercase;color: #fff;display: inline-block;text-align: center;margin: 0 auto;}
#ProductIndex ul li .moreInfo .infoMore .detailMore:hover{ background: #078033;}
#ProductIndex ul li .moreInfo .infoMore .detailMore span{ background: url(details.png.ashx) no-repeat left center;padding-left: 20px;display: inline-block;}


@media (max-width: 768px) {
    #ProductIndex{ width: 97%;margin: 20px auto}
    #ProductIndex ul li{ opacity: 1;position: inherit;width: 31%;margin-right: inherit;margin: 10px 1%;overflow: hidden}
    #ProductIndex ul li .moreInfo{display: none !important}
    #ProductIndex ul li .frameOut{width: 100%}
    #ProductIndex ul li .frameOut .frameIn img{ max-height: 232px;max-width: 100%}
    #ProductIndex ul li .nameProduct{width: 100%}
    #ProductIndex ul li .nameProduct .titNews{width: 100%}
    #ProductIndex ul li.item3{ opacity: 1;position: inherit;margin-right: inherit;margin: 10px 1%}
}



@media (max-width: 736px) {
    #ProductIndex{ width: 97%;margin: 20px auto}
    #ProductIndex ul li{ opacity: 1;position: inherit;width: 100%;margin-right: inherit;margin: 10px 0;}
    #ProductIndex ul li .moreInfo{display: none !important}
    #ProductIndex ul li .frameOut{width: 100%}
    #ProductIndex ul li .frameOut .frameIn img{ max-height: 232px;max-width: 100%}
    #ProductIndex ul li .nameProduct{width: 100%}
    #ProductIndex ul li .nameProduct .titNews{width: 100%}
    #ProductIndex ul li.item3{ opacity: 1;position: inherit;margin-right: inherit;margin: 10px 1%}
}