.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;}