html, body { background: #F1F1F1; } /* 集团新闻 */ .tab-1-content { max-width: 1540px; margin: 0 auto; padding: 40px 50px 0;display: none; } .tab-1-content .item { width: 33.33333333%; border-left: 10px solid #F1F1F1; border-right: 10px solid #F1F1F1; float: left; height: 500px; margin-bottom: 45px; position: relative; background: #FFFFFF; cursor: pointer; display: block; } .tab-1-content .inner { height: 100%; width: 100%; -webkit-transition: all .8s; transition: all .8s; overflow: hidden; } .tab-1-content .item:hover .inner { -webkit-box-shadow: 0px 0px 20px rgba(100, 100, 100, .5); box-shadow: 0px 0px 20px rgba(100, 100, 100, .5); } .tab-1-content .image { height: 290px; width: 100%; display: block; -webkit-transition: all .8s; transition: all .8s; } .tab-1-content .item:hover .image { -webkit-transform: scale(1.1); transform: scale(1.1); } .tab-1-content .subscript { width: 238px; height: 146px; position: absolute; top: 0px; right: 0px; z-index: 10; background-image: url(../images/news_subscript.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: left top; text-align: right; color: #FFFFFF; padding: 20px 15px; } .tab-1-content .date { display: block; } .tab-1-content .year { font-size: 20px; } .tab-1-content .month { font-size: 28px; font-weight: bold; } .tab-1-content .title { font-size: 16px; font-weight: normal; color: #333333; padding: 0px 40px; margin: 50px auto 20px; line-height: 1.6; -webkit-transition: color .8s; transition: color .8s; overflow: hidden; height: 50px; } .tab-1-content .item:hover .title { color: #0050A0; } .tab-1-content .introduction { font-size: 14px; color: #999999; height: 38px; overflow: hidden; font-weight: normal; padding: 0 40px; } /* 集团视频列表 */ .tab-2-content {max-width: 1540px; margin: 0 auto; padding: 40px 50px 0;display: none; } .tab-2-content .item { width: 25%; float: left; height: 292px; position: relative; cursor: pointer; border-left: 10px solid #F1F1F1; border-right: 10px solid #F1F1F1; margin-bottom: 36px; overflow: hidden; } .tab-2-content .item .poster { width: 100%; height: 216px; position: relative; background: #FFFFFF; overflow: hidden; } .tab-2-content .item .poster .image { display: block; width: 100%; height: 100%; transition: all .8s; } .tab-2-content .item .poster .border { width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -35px; margin-left: -35px; } .tab-2-content .item .poster .player { width: 52px; height: 52px; position: absolute; top: 50%; left: 50%; z-index: 20; margin-top: -26px; margin-left: -26px; } .tab-2-content .item .title { height: 76px; line-height: 76px; overflow: hidden; text-align: center; font-size: 16px; color: #666666; padding: 0 20px; -webkit-transition: all .8s; transition: all .8s; background: #FFFFFF; display: block; } .tab-2-content .item:hover .title { background: #2374CC; color: #FFFFFF; } .tab-2-content .item:hover .image { transform: scale(1.15); } .tab-2-content .item.rotate360 .poster .border { animation: rotate360 3s linear 0s infinite normal none; } /* 播放按钮旋转动画 */ @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 视频播放组件 */ .video-player-container { width: 100%; height: 100%; position: fixed; background: #000000; background: #FFFFFF; background: rgba(0, 0, 0, .5); top: 0px; left: 0px; z-index: 1000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000); display: none; } .ie{ _position: absolute; _clear: both; _top:expression(eval(document.compatMode & & document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1); } #video { position: fixed; top: 50%; left: 50%; z-index: 2000; width: 800px; height: 450px; margin-top: -225px; margin-left: -400px;background: #000;outline: none; } /* 集团期刊 */ .tab-3-content {max-width: 1540px; margin: 0 auto; padding: 40px 50px 40px;display: none;} .tab-3-content .cover { width: 38%; padding: 36px 70px; background: #FFFFFF; float: left; } .tab-3-content .cover .image { width: 100%; display: block; margin: 0 auto; } .tab-3-content .cover .bookmark { width: 46px; height: 46px; float: right; position: relative; z-index: 10; margin-top: -23px; margin-right: 13px; } .tab-3-content .cover .name { height: 20px; line-height: 20px; display: block; overflow: hidden; color: #666666; margin-top: 25px; } .tab-3-content .list { width: 58%; float: right; border-top: 1px solid #E6E6E6; } .tab-3-content .list .item { padding: 24px 36px; border-bottom: 1px solid #E6E6E6; cursor: pointer; transition: all .8s; } .tab-3-content .list .item .dot { font-size: 12px; } .tab-3-content .list .item .name { color: #666666; display: inline-block; transition: all .8s; } .tab-3-content .list .item .date { float: right; font-size: 16px; color: #999999; transition: all .8s; } .tab-3-content .list .item:hover { padding-left: 54px; padding-right: 54px; } .tab-3-content .list .item:hover .name { color: #2374cc; } .tab-3-content .list .item:hover .date { color: #2374cc; } /*分页器*/ .laravel_pagination{text-align: center;padding: 40px 0 60px;} .laravel_pagination ul li{display: inline-block;width: 40px;height: 40px;border: 1px solid #c4c4c4;line-height: 38px;font-size: 14px;color: #666;} .laravel_pagination ul li.active{background: #2374CC;color: #fff;border-color: #2374cc;}