pfhwyigou/mobile/web/video/css/homerelevant.css

.m_top {height:50px;background:#fff;position:fixed;top:0;left:0;width:100%;z-index:9999;box-shadow:0px 0px 2px 0px rgba(191, 190, 190, 0.2);display:flex;align-items:center;}
.header_back {position:absolute;top: 13px;width: 18px;right: 15px;}
.header_menu{position:relative;margin-left:4%;}
.header_menu a{ width:11px;display:block;float: left;position:relative;top:1px;}
.header_menu img {display:inline-block;width:100%;height:auto;}
.y_input {width:55%;border-radius:100px;background:#F7F5F6;float: left;margin-left:4%;}
.y_input input {display:inline-block;width:81%;height:30px;line-height:33px;background:#F7F5F6;border:none;border-radius:50px;font-size:0.7rem;color:#666;padding-left:5px;}
.y_input input::-ms-input-placeholder{color:#ccc}
.y_input input::-webkit-input-placeholder{ color:#ccc}
.y_input input::-moz-placeholder{color:#ccc}
.y_input i{display:inline-block;width:12px;margin-left:15px;}
.xm_toplogo{width:70px;float: left;margin-left:10px;}
.xm_toplogo img{width:100%;height:100%;}




/*头部*/
.m_videohead_box{padding:0 0px;}
.m_videohead{border-bottom:1px solid #EEE;}
.m_videohead_box a{display:block;width:25%;float:left;text-align:center;height:40px;line-height:40px;}
.m_videohead_box span{width:60%;display:inline-block;position:relative;font-size:0.875rem;color:#999;}
.m_videohead_box span:before {content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:rgba(0,0,0,0);}
.m_videohead_box a.on span:before{background:#E03700;}
.m_videohead_box a.on span{font-weight:600;color:#333;}


/*轮播*/
.m_swiper_box{margin-top:20px;padding:0 15px;}

.m_swiper{width:100%;overflow:hidden;position:relative;;border-radius:5px;}
.m_swiper ul{width:100%;}
.m_swiper ul li{width:100%;height:188px;border-radius:5px;overflow:hidden;position:relative;}
.m_swiper ul li img{width:100%;height:100%;}
.m_swiper ul li .text{width:100%;position:absolute;bottom:0;left:0;padding:69px 0 10px 0;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));  
        -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
        -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
}
.m_swiper ul li .text p{padding:0 10px;}
.m_swiper ul li .text p span{font-size:1rem;color:#FFF;display:block;width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}


.m_swiper_box #swiper-pagination2{left:auto;right:10px;width:auto;}
.m_swiper_box #swiper-pagination2 .swiper-pagination-bullet{margin:0 2px;background:#F6FBF6;opacity:1;width:4px;height:4px;border-radius:10px;}
.m_swiper_box #swiper-pagination2 .swiper-pagination-bullet-active{background:#FFF;width:8px;}


/*各国优质房产*/
.m_video_box{margin-top:25px;padding:0 15px;}
.m_video_box .title{font-size:1.0625rem;color:#333;font-weight:600;}


/*导航*/
.m_videonav{margin-top:20px;overflow:hidden;}
.wrapper02 {position:relative;height:30px;margin:0 auto;}
.wrapper02 .scroller {position:absolute;}
.wrapper02 .scroller ul{width:100%;}
.wrapper02 .scroller li {position:relative;float:left;width:77px;}
.wrapper02 .scroller li a{border:1px solid #CCC;width:68px;height:30px;line-height:29px;text-align:center;font-size:0.75rem;color:#666;display:block;border-radius:3px;}
.wrapper02 .scroller li.cur a{color:#FFF;border:1px solid #E03700;background:#E03700;}


/*列表*/

  

.m_videolist_box{margin-top:25px;background:#F8F8F8;padding:20px 15px;}
.m_videolist{}
.m_videolist li{width:48%;float:left;border-radius:5px;box-shadow :0px 0px 7px 0px #efefef;overflow:hidden;background:#FFF;margin-bottom:15px;}
.m_videolist li:nth-child(2n){float:right;}


.m_videolist_img{height:112px;position:relative;}
.m_videolist_img .img{width:100%;height:100%;}
.m_videolist_img i{font-size:0.6875rem;color:#FFF;background:rgba(0, 0, 0, 0.7);padding:7px 6px;position:absolute;top:6px;left:6px;border-radius:50px;}
.m_videolist_img i img{width:8px;margin-top:-3px;margin-right:2px;}

.m_videolist_text{position:absolute;bottom:0;left:0;width:100%;padding:22px 0 7px 0;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));  
        -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
        -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
}
.m_videolist_text p{padding:0 7px;}
.m_videolist_text p span{font-size:0.625rem;color:#eee;float:right;}
.m_videolist li .text{padding:12px 8px;}
.m_videolist li .text .title{font-size:0.875rem;color:#333;line-height:20px;font-weight:600;height:40px;overflow:hidden;}
.m_videolist li .text .dj{margin-top:11px;}
.m_videolist li .text .dj span{font-size:0.625rem;color:#999;float:right}
.m_videolist li .text .dj span img{width:13px;margin-right:2px;margin-top:-2px;}



.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 75px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}