#SearchIndex{margin:20px 0 0px;}
#SearchIndex .titles{font:normal 24px/30px OpenSansBold;color:#212e7d}
#SearchIndex .titleHead{text-align: center;color: #084a7a;font: normal 36px UtmBebas;}
#SearchIndex .titleHead span.textcenter{ display: inline-block;vertical-align: middle;margin: 0 20px;}

#SearchIndex .MesResult{ font: normal 14px/24px Arial;color: #333;margin: 20px 0;}

#SearchIndex .contentSearch{ width: 1200px;margin: 0 auto}
#SearchIndex .contentSearch ul{ margin: 0;padding: 0;list-style: none;}
#SearchIndex .contentSearch 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;}
#SearchIndex .contentSearch ul li *{ transition: 0.3s;}
#SearchIndex .contentSearch ul li.item3{ margin-right: 0;}
#SearchIndex .contentSearch ul li .frameOut{ width: 281px;height: 232px;display: table;background: #fff;border-bottom: 1px solid #e7e7e7}
#SearchIndex .contentSearch ul li .frameOut .frameIn{width: 281px;height: 232px;display: table-cell;text-align: center;vertical-align: middle;}
#SearchIndex .contentSearch ul li .frameOut .frameIn img{ max-width: 281px;max-height: 232px;}
#SearchIndex .contentSearch ul li .nameProduct{ display: table;height: 78px;width: 281px;background: #f9f9f9;position: relative;}
#SearchIndex .contentSearch 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;}
#SearchIndex .contentSearch ul li .nameProduct .icoArrow{ background: url(icoarrow.png.ashx) no-repeat center;width: 18px;height: 9px;position: absolute;top: -9px;left: 24px;display: block;}
#SearchIndex .contentSearch ul li:hover .titNews{color: #084a7a}

#SearchIndex .contentSearch 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}
/*#SearchIndex .contentSearch ul li:hover .moreInfo{ display: block;}*/

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

#SearchIndex .contentSearch ul li .moreInfo .infoMore{ background: #f9f9f9;box-sizing: border-box;padding: 20px 20px 30px;border-top: 1px solid #e7e7e7;position: relative;text-align: center;}
#SearchIndex .contentSearch 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;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .titMore{font: bold 16px/22px Arial;color: #084a7a;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .titMore:hover{color: #00a1f1}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .descMore{ font: normal 14px/24px Arial;color: #333;margin: 10px 0;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .detailButton{ text-align: center;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .detailMore{ background: #00a1f1;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;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .detailMore:hover{ background: #084a7a;}
#SearchIndex .contentSearch ul li .moreInfo .infoMore .detailMore span{ background: url(details.png.ashx) no-repeat left center;padding-left: 20px;display: inline-block;}


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