.video{ padding: 15px 0 32px; background: #f7f9fc;}
.filters{ margin-top: 15px; padding-bottom: 22px; overflow: hidden;}
.filters a{ float: left; height: 45px; padding: 0 24px; margin-right: 20px; line-height: 45px; text-align: center; background: #ffffff; font-size: 16px; color: #333333; border-radius: 24px; box-shadow: 0 2px 5px 0 rgba(27, 35, 45, 0.16); transition: all 0.3s linear;}
.filters a:hover{ background: #f4f8fd}
.video-list{ margin: 0 -10px 10px; overflow: hidden;}
.video-list .video-item{ float: left; width: 224px; margin: 0 10px 20px; border-radius: 3px; background: #ffffff; overflow: hidden;}
.video-list .video-cover{ position: relative; height: 145px;}
.video-list .video-cover a{ display: block; width: 100%; height: 100%;}
.video-list .video-cover .mask{ display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5);}
.video-list .video-cover .mask span{ position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: url("../images/icon-play.png") center no-repeat;}
.video-list .video-item:hover .mask{ display: block;}
.video-list .video-item .video-name a{ display: block; padding: 10px 14px; font-size: 14px; line-height: 30px; color: #777777; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.video-main{ margin-top: 15px; background: #ffffff; overflow: hidden;}
.video-main .video-code{ float: left; width: 590px; height: 340px;}
.video-main .video-info{ float: right; width: 538px; padding: 0 36px;}
.video-main .video-title{ margin-top: 16px; font-size: 22px; line-height: 30px; color: #333333;}
.video-main .video-speaker{ margin-top: 16px; overflow: hidden;}
.video-main .video-speaker .avatar{ float: left; width: 40px; height: 40px;}
.video-main .video-speaker .avatar img{ width: 100%; height: 100%;}
.video-main .video-speaker .name{ float: left; margin-left: 14px; font-size: 16px; line-height: 40px; color: #555555;}
.video-main .video-describe{ margin-top: 13px; font-size: 14px; line-height: 30px; color: #b9b9b9;}
.video-main .video-suitable,.video-main .video-duration{ font-size: 14px; line-height: 30px; color: #555555;}
.video-main .video-control{ margin-top: 12px; overflow: hidden;}
.video-main .video-control .watch-online{ float: left; width: 110px; height: 36px; background: #f98823; text-align: center; line-height: 36px; color: #ffffff; font-size: 14px;}
.video-main .video-control .more-video{ float: left; width: 126px; height: 36px; margin-left: 20px; background: #4591e7; text-align: center; line-height: 36px; color: #ffffff; font-size: 14px;}
.video-main .video-control .share{ float: right; font-size: 14px; line-height: 40px; color: #999999;}
.video-main .video-control .share i{ float: left; font-style: normal;}
.video-main .video-control .share a{ display: block; width: 40px; height: 40px; float: left; margin: 0 5px; transition: all 0.2s linear; padding-left:0}
.video-main .video-control .share a.share-icon-sina{ background: url("../images/icon-share-sina-1.png") center no-repeat;}
.video-main .video-control .share a.share-icon-wx{ background: url("../images/icon-share-wx-1.png") center no-repeat;}
.video-main .video-control .share a.share-icon-qq{ background: url("../images/icon-share-qq-1.png") center no-repeat;}
.video-main .video-control .share a:hover.share-icon-sina{ background: url("../images/icon-share-sina-2.png") center no-repeat;}
.video-main .video-control .share a:hover.share-icon-wx{ background: url("../images/icon-share-wx-2.png") center no-repeat;}
.video-main .video-control .share a:hover.share-icon-qq{ background: url("../images/icon-share-qq-2.png") center no-repeat;}

.video-about{ margin-top: 30px; overflow: hidden;}
.video-about .content-left{ float: left; width: 868px;}
.video-about .content-right{ float: right; width: 312px;}
.simple-introduce > div{ font-size:16px; color:#333; line-height:30px}
.simple-introduce .title{ padding-left: 42px; background: url("../images/icon-simple.png") left center no-repeat; font-size: 22px; line-height: 30px;}
.simple-introduce .introduce{ margin-top: 16px; padding: 8px 0; border-top: 1px dashed #e3e3e3; font-size: 14px; line-height: 30px; color: #777777;}
.comment{ margin-top: 20px;}
.comment .title{ padding-left: 42px; background: url("../images/icon-comment.png") left center no-repeat; font-size: 22px; line-height: 30px;}
.comment form{ display: block; margin-top: 15px;}
.comment form textarea{ display: block; width: 844px; height: 136px; padding: 12px; background: #ffffff; border: 1px solid #e3e3e3; resize: none; font-size: 14px; line-height: 24px;}
.comment form .submit{ margin-top: 10px; width: 96px; height: 36px; border-radius: 3px; background: #f98823; font-size: 14px; color: #ffffff; cursor: pointer;}

.relative-video{ margin-top: 30px;}
.relative-video .title{ padding-left: 13px; border-left: 6px solid #4591e7; font-size: 20px; color: #333333; line-height: 22px;}
.relative-video .relative-list{ margin-top: 20px;}
.relative-video .relative-item{ margin-bottom: 18px; overflow: hidden;}
.relative-video .relative-image{ float: left; margin-right: 15px;}
.relative-video .relative-info{ float: left; width: 166px;}
.relative-video .relative-info a{ display: block; font-size: 16px; line-height: 24px; color: #555555;}
.relative-video .relative-info .date{ display: block; margin-top: 5px; padding-left: 20px; background: url("../images/icon-clock.png") left center no-repeat; font-size: 14px; line-height: 30px; color: #999999;}