@charset "utf-8";
body{background: #edf0f9;}
.matrix{width: 100%;}
/* 头图 */
.matrix .mod-banner{width: 100%; height: 356px; max-width: 1920px; margin: 0 auto; background: url("/xmtjz/images/matrix_banner.jpg") no-repeat; background-position: center top;}
/* 内容区域 */
.matrix .mod-cont{width: 1200px; margin: 0 auto; overflow: hidden;}
/* tab */
.matrix .mod-cont .mod-tab{overflow: hidden;}
.matrix .mod-cont .mod-tab .info-tab{height: 50px; line-height: 50px; text-align: center; border: 1px solid #e6e6e6; border-right: none; background: #fafafa;}
.matrix .mod-cont .mod-tab .info-tab li{position: relative; float: left; width: 16.66666%; padding: 0 25px; height: 50px; line-height: 50px; font-size: 16px; color: #666666; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #e6e6e6;}
.matrix .mod-cont .mod-tab .info-tab li:hover{background: #fff; font-weight: bold; color: #1c7ae7;}
.matrix .mod-cont .mod-tab .info-tab .activ{background: #fff; font-weight: bold; color: #1c7ae7;}
.matrix .mod-cont .mod-tab .info-tab .activ span{position: absolute; display: block; top: -1px; left: 0; width: 100%; height: 3px; background: #1c7ae7; -webkit-animation: fadeIn .25s both linear; animation: fadeIn .25s both linear;}
/* tab 内容 */
.matrix .mod-cont .mod-tab .info-main > div{display: none;}
.matrix .mod-cont .mod-tab .info-main{margin-top: 60px; overflow: hidden;}
.matrix .mod-cont .mod-tab .info-main .news-list{overflow: hidden;}
.matrix .mod-cont .mod-tab .info-main .news-list li{position: relative; float: left; width: 188px; height: 240px; margin: 0 6px 12px; text-align: center; background: #fff; border-radius: 8px;}
.matrix .mod-cont .mod-tab .info-main .news-list li:hover .img-box .m-hover-img{display: block; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation: flipInX .6s both; animation: flipInX .6s both;}
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box{position: absolute; top: 30px; left: 50%; width: 140px; height: 140px; margin-left: -70px; overflow:hidden; }
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box .m-img{position: absolute; left: 50%; width: 122px; height: 122px; margin-left: -61px;}
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box .m-img img{display: block; width: 122px; height: 122px; font-size: 0; margin: 0 auto;}
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box .m-hover-img{position: absolute; left: 50%; width: 130px; height: 130px; margin-left: -65px; display: none; margin-top:-130px; }
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box .m-hover-img img{display: block; width: 130px; height: 130px; font-size: 0; margin: 0 auto;}
.matrix .mod-cont .mod-tab .info-main .news-list li .img-box:hover .m-hover-img{display: block;}
.matrix .mod-cont .mod-tab .info-main .news-list li h3{position: absolute; width: 100%; bottom: 45px; font-size: 18px; font-weight: bold; line-height: 20px; color: #333333;}
.matrix .mod-cont .mod-tab .info-main .news-list li p{position: absolute; width: 100%; bottom: 23px; font-size: 12px; color: #666666; line-height: 16px;}
/* 翻转动画 */
@-webkit-keyframes flipInX{0%{-webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;} 50%{-webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);} 100%{-webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;} }
@keyframes flipInX{0%{-webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;} 50%{-webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);} 100%{-webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;} }
/* tab滑动动画 */
@-webkit-keyframes fadeIn{0%{opacity: 0; width: 0;} 100%{opacity: 1; width: 100%;} }
@keyframes fadeIn{0%{opacity: 0; width: 0;} 100%{opacity: 1; width: 100%;} }