* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.header { border-bottom: 1px solid #ccc }
.header-search .inp { width: 188px }
.header-nav li { line-height: 64px }
.cate { margin-bottom: 10px }
.cate-title { position: relative; z-index: 1; margin-bottom: 17px; font-size: 17px; color: #fff; padding-left: 42px; line-height: 38px; border-bottom: 1px solid #2489e6 }
.cate-title:before { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 180px; height: 38px; background-color: #2489e6 }
.cate-item { overflow: hidden }
.cate-item strong { float: left; font-size: 16px; font-weight: 700; line-height: 24px }
.cate-item ul { margin-left: 50px; overflow: hidden }
.cate-item li { float: left; margin-left: 10px; margin-bottom: 10px; padding: 0 12px; min-width: 60px; line-height: 24px; font-size: 14px; text-align: center; cursor: pointer }
.cate-item li:hover { color: #2489e6 }
.cate-item .active { color: #fff; background-color: #2489e6 }
.cate-item .active:hover { color: #fff }

.video-list { margin-right: -25px; overflow: hidden }
.video-list li { position: relative; float: left; width: 220px; color: #333; margin-right: 25px; margin-bottom: 15px; overflow: hidden }
.video-list .img { position: relative; display: block; width: 220px; height: 140px }
.video-list .img:before { content: ''; position: absolute; left: 85px; top: 45px; width: 50px; height: 50px; background: url(../img/icon_play2.png) no-repeat; background-size: 100% auto }
.video-list .img:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 140px; background: url(../img/img_shadow.png) no-repeat }
.video-list .img img { width: 100%; height: 100% }
.video-list .title { font-size: 18px; margin: 15px 0 10px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.video-list .time { position: absolute; right: 5px; bottom: 0; z-index: 2; line-height: 30px; font-size: 15px; color: #fff }
.video-list .date { font-size: 12px; color: #989898; overflow: hidden }
.video-list .date span { float: left }
.video-list .date span+span { float: right }
.video-list li:hover .title a { color: #2489e6 }
.video-list li:hover .img:before { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 }
.video-list li:hover .img:after { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8 }

.page { margin: 30px 0; font-size: 0; text-align: center; line-height: 30px }
.page ul, .page li { display: inline-block }
.page li { width: 30px; height: 30px; text-align: center; border-radius: 50%; margin: 0 5px }
.page li a { color: inherit }
.page li.active { color: #fff; background-color: #2489e6 }
.page a, .page span { font-size: 14px; color: #333 }
.page>a, .page span { margin: 0 10px }
.page a:hover { color: #2489e6 }