@import "base.css";
/*直播专题*/
.tvzone{ overflow: hidden; padding-bottom: 15px; }
.tvzone li{ float: left; width: 33.333%; height: 84px; text-align: center; margin-top: 15px; overflow: hidden;}
.tvzone a{ display: block; width:62px; margin: 0 auto; line-height: 1;  -webkit-tap-highlight-color: rgba(0,0,0,0); }
.tvzone a img{ display: block; width: 60px; height: 60px; border-radius: 50%; border:#d0d0d0 1px solid; margin-bottom: 8px;}
.tvzone a:active{ color: #f60;}

/*直播图片列表*/
.tvlist{ overflow: hidden; margin-left: -10px; padding-bottom: 15px;}
.tvlist li{ float: left; position: relative; width: 50%;display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin-top: 15px; }
.tvlist li a{ display: block; position: relative;/* border-radius: 5px 5px 0 0;*/ overflow: hidden; margin-left: 10px;}
.tvlist li a img{ /*height: 100px;*/ border-radius: 5px;}
.tvlist-black{ position: absolute; left: 0; bottom: 19px; height:30px; width: 100%;border-radius: 0 0 5px 5px; z-index: 2;
    background-image: -webkit-linear-gradient(top, rgba(0,0, 0, 0) 0%, rgba(0,0, 0,1) 80%);
    background-image: -moz-linear-gradient(top, rgba(0,0, 0, 0) 0%, rgba(0,0, 0, 1) 80%);
    background-image: -o-linear-gradient(top, rgba(0,0, 0, 0) 0%, rgba(0,0, 0, 1) 80%);
    background-image: linear-gradient(top, rgba(0,0, 0, 0) 0%, rgba(0,0, 0, 1) 80%);}
.tvlist-user,.tvlist-look{ position: absolute; bottom: 22px; color: #fff; font-size: 12px; line-height: 1; z-index: 3;-webkit-transform:scale(0.9);-webkit-transform-origin:left;}
.tvlist-user{ left: 5px; padding-left: 14px; background: url("../images/tv_icon_user.png") left center no-repeat; background-size: 11px auto; }
.tvlist-look{ right: 5px; padding-left: 16px; background: url("../images/tv_icon_look.png") left center no-repeat; background-size: 12px auto;}
.tvlist-title{ line-height:1; margin-top:5px;white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

/*直播平台标签*/
.tag_douyu,.tag_huya,.tag_chushou,.tag_zhanqi{ position: absolute; top:0; right: 0; z-index: 2; color: #fff; font-size: 12px; line-height: 17px; padding: 0 5px; border-radius: 0 5px;}
.tag_douyu{ background: #f60;}
.tag_chushou{ background: #f35050;}
.tag_huya{ background: #f5a012;}
.tag_zhanqi{ background: #0a81c4;}

/*直播分类*/
.tv-class{ position: relative; height: 40px; padding: 0 10px; background: #fff; z-index:100;}
.tv-class .class-all,.tv-class .class-btn{color: #666; line-height: 40px; }
.tv-class .class-all{ float: left; padding-left: 25px; background: url("../images/tv_icon_all.png") left center no-repeat; background-size: 20px auto;}
.tv-class .class-btn{ float: right; padding-right: 21px; background: url("../images/tv_icon_class.png") right center no-repeat; background-size: 16px auto;}
.tv-class .class-btn.class-btn-cur{ color: #f90;background: url("../images/tv_icon_class_inverse.png") right center no-repeat;background-size: 16px auto;}
/*直播分类弹出层*/
.class-pop{ display: none; position: absolute; width: 100%; top:84px; left: 0;background: #fff; z-index:999;}
.tab-class-pop { width: 100%;display: -moz-box; display: -webkit-box; margin-left: -1px;background: #f5f5f5; padding:5px 0;border-top: #e0e0e0 1px solid;border-bottom: #e0e0e0 1px solid;}
.tab-class-pop li { position: relative; box-flex: 1.0; -moz-box-flex: 1.0; -webkit-box-flex: 1.0; text-align: center; border-left: #e0e0e0 1px solid; line-height: 18px; color: #999; }
.tab-class-pop li.current{ color: #ff9600;}
.tab-class-pop li.current:after{content: ""; width: 100%; height: 2px; display: block; background: #ff9600; position: absolute; bottom: -6px; left: 0;}

.tvgrid { padding: 0 10px 0 10px; border-top: 2px solid #ff9600; position: relative; background: #f2f2f2; }
.tvgrid:after { content: ""; width: 100%; padding: 0 10px; height: 15px; display: block; background: #f2f2f2;  position: absolute; bottom: 0; left: 0; }

.tv-gamename{ float:left; color: #666; line-height: 40px; font-weight: 300; font-size: 14px; }
.tv-gamename img{ display: inline; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; margin-right: 5px;}

.tvplay-grid{ padding-bottom: 15px; border-top: 2px solid #ff9600;position: relative;}
.tvplay-grid:after{content: ""; width: 100%; padding: 0 10px; height: 15px; display: block; background: #f2f2f2; border-top: 1px solid #ccc; position: absolute; bottom: 0; left: 0;  }
.tvplay{ position: relative; width: 100%; height:21.5rem;overflow: hidden; background: #000;}
.tvplay .video-js{ width: 100%; height: 100%;}
.tv-info{ position: relative; padding:0 10px 10px 10px; margin-top: 10px;}
.tv-info p{ line-height: 24px;}
.tv-info p span{ display: inline-block; width: 56px; text-align:justify;text-align-last:justify;}
.tv-info p span:after{content:'';  overflow:hidden;  width:100%;    height:0;}
.tv-info p em{ color: #f90;}
.tv-info .tv-look{ position: absolute; right: 30px; bottom: 15px; padding-left: 16px; background: url("../images/tv_icon_look_inverse.png") left center no-repeat; background-size: 12px auto; color:#666;font-size: 10px; line-height: 1;-webkit-transform:scale(0.9);-webkit-transform-origin:left;}
.tv-share{position: absolute; right: 0; bottom: 2px; width:38px; height: 38px;  background: url("../images/share.png") center no-repeat; background-size: 12px auto; text-indent: -9999px; overflow: hidden;}

.tv-info .tag_douyu,.tv-info .tag_huya,.tv-info .tag_chushou,.tv-info .tag_zhanqi{ border-radius: 0 0 0 5px; line-height: 20px; padding: 0 10px; font-size: 14px;}

.load-more{ position: relative; display: block; line-height: 36px; text-align: center; background: #fff; border: #f2f2f2 solid; border-width: 0 10px 15px 10px;  -moz-box-shadow:0 0 0 1px #e0e0e0 inset ;    -webkit-box-shadow:0 0 0 1px  #e0e0e0 inset ;    box-shadow:0 0 0 1px  #e0e0e0 inset ;  }


@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
    html{ font-size:16.875px; }
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
    html{ font-size:15px; }
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
    html{ font-size:12.5px; }
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
    html{ font-size:11.25px; }
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
    html{ font-size:10px; }
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
    html{ font-size:9.375px; }
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
    html{ font-size:8.4375px; }
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
    html{ font-size:7.5px; }
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
    html{ font-size:6.46875px; }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
    html{ font-size:6.25px; }
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
    html{ font-size:5.859375px; }
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
    html { font-size:5.625px; }
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
    html { font-size:5px; }
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
    html{ font-size:3.75px; }