pfhwyigou/frontend/web/video/css/relevantvideo.css

.m_video_bj{padding-bottom:40px;background:#24282E;}
.m_video_box{width:1190px;margin:auto;overflow:hidden;}
.site{margin-top:15px;font-size:14px;color:#999;}
.site a{font-size:14px;color:#999;}
.m_video_title{margin-top:28px;font-size:28px;color:#FFF;}


/*独家航拍*/
.m_video{width:1190px;margin:auto;margin-top:30px;}
.m_video_l{width:812px;height:510px;float:left;position:relative;}
 video{width:100%;height:100%;}
.m_video_img{width:100%;position:absolute;top:0;left:0;height:100%;}
.m_video_img img{width:100px;display:block;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}


.m_video_r{width:362px;height:510px;float:right;background:#333;}
.m_video_r .title{height:52px;line-height:52px;padding:0 20px;}
.m_video_r .title span{float:left;font-size:16px;color:#BBB;font-weight:600;}
.m_videolist{padding:0 20px;}  
.m_videolist ul{height:440px;overflow:auto;}  
.m_videolist ul.on::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
.m_videolist ul.on::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  /*border-radius: 10px;*/
  /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
  background   : #666;
  }
.m_videolist ul.on::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
  /*border-radius: 10px;*/
  background   : #222;
  }
.m_videolist ul li{margin:auto;margin-bottom:16px;cursor:pointer;}
.m_videolist ul li:last-child{margin-bottom:0;}
.m_videolist_img{width:120px;height:90px;float:left;position:relative;overflow:hidden;}
.m_videolist_img img{width:100%;height:100%;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}
.m_videolist_img i{position:absolute;bottom:4px;right:4px;background:rgba(0, 0, 0, 0.6);font-size:12px;color:#FFF;padding:3px 7px;border-radius:50px;}
.m_videolist_text{width:163px;height: 90px;float:left;position:relative;margin-left:16px;}
.m_videolist_text span{font-size:14px;color:#FFF;display:block;line-height:22px;}
.m_videolist_text i{font-size:12px;color:#666;display:block;position:absolute;bottom:0;left:0;}
.m_videolist li:hover .m_videolist_img img{
transform: scale(1.1); 
-webkit-transform: scale(1.1);  
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.m_videolist li:hover .m_videolist_text span{color:#DFAE5E;}

.m_videolist li.on .m_videolist_text span{color:#DFAE5E;}

/*热门区域视频推荐*/
.m_Relevant_lp{width:1200px;margin:auto;margin-top:32px;}
.m_Relevant_lp .title{border-bottom:1px solid #F0F0F0;font-size:20px;color:#333;font-weight:600;padding-bottom:16px;}
.m_Relevant_lp .title i{width:5px;height:23px;display:block;float:left;margin-top:2px;margin-right:14px;
     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));     
                -moz-linear-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));  
                -o-linear-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));  
}
.m_Relevant_lp .title a{float:right;font-size:14px;color:#fff;display:block;padding:8px 14px;border-radius:4px;
     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));     
                -moz-linear-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));  
                -o-linear-gradient(linear, 0 0, 0 bottom, from(#F3D5A5), to(#DFAE5E));  

}
.m_Relevant_lp .title a img{width:14px;margin-top:2px;margin-right:4px;}


.m_Recommend{margin-top:24px;position:relative;}

.m_Recommend ul{}
.m_Recommend ul li{width:180px;float:left;margin-right:24px;}
.m_Recommend ul li:last-child{margin-right:0;}

.m_Recommend ul li .img{height:112px;position:relative;overflow:hidden;}
.m_Recommend ul li .img .imgbj{width:100%;height:100%;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}
.m_Recommend ul li .img .Number{font-size:12px;color:#FFF;border-radius:50px;background:rgba(0, 0, 0, 0.5);padding:3px 8px;position:absolute;top:6px;right:6px;}
.m_Recommend ul li .img .Number img{width:10px;margin-top:1px;margin-right:3px;}
.m_Recommend ul li .img .time{position:absolute;bottom:0;left:0;width:100%;padding:24px 0 6px 0;
     background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
                -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
                -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
}
.m_Recommend ul li .img .time i{display:block;padding:0 10px;font-size:12px;color:#FFF;}
.m_Recommend ul li .text{font-size:14px;color:#333;line-height:22px;margin-top:7px;}

.m_Recommend ul li:hover .img .imgbj{
transform: scale(1.1);  
-webkit-transform: scale(1.1);  
-moz-transform: scale(1.1);
-o-transform: scale(1.1);  
}

.m_Recommend ul li:hover .text{color:#DFAE5E;}

.m_Recommend .prev{;width:30px;height:44px;border-radius:2px;position:absolute;top:50%;left:0%;margin-top:-47px;background: rgba(0, 0, 0, 0.5) url(../image/videolist_10.png) no-repeat 9px 13px/ 9px 15px;display:none;}
.m_Recommend .next{width:30px;height:44px;border-radius:2px;position:absolute;top:50%;right:0%;margin-top:-47px;background: rgba(0, 0, 0, 0.5) url(../image/videolist_11.png) no-repeat 12px 13px/ 9px 15px;display:none;}

.m_Recommend:hover .prev{display:block;}
.m_Recommend:hover .next{display:block;}