﻿/* 直播 */
#liveDiv {width:1080px;margin:0 auto;}
#liveDiv .live.whitebg {background:#f1f1f1;color:#333;}
#liveDiv .live {background:#212121;color:#fff;text-align: center;position: relative;}
.live #tvMain {width: 775px;margin: 0;transition: width 0.3s ease;}
.live .ifamchatbox {border: 1px solid #e5e5e5;/*border-top: none;*/width:calc(100% - 771px);height:calc(100% - 92px);top:0;right:0;position:absolute;}
#liveDiv .ifamchatbox iframe {width: 100%;height: 100%;margin: 0;padding: 0;}

/* 直播主播列表 */
.tvUrl {background: #fff;padding:0;border-radius: 0;display: block;overflow: hidden;}
.chatUrl {background: #fff;padding:0;border-top: 1px solid #efefef;margin-top: 10px;display: block;overflow: hidden;}
.chatUrl .urlUl {width:85%;}
.tvUrl::after {content:"";clear: both;display: block;}
.urlTitle {
    --main-bg-color: rgba(46,138,213,0.36);
    --pattern-color: rgba(46,138,213,0.07);
    color: #0a497b;font-size: 1.8em;line-height: 30px;font-weight: bold;letter-spacing: 5px;
    padding: 25px 40px;margin: 0;float: left;
    background: radial-gradient( circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95% );
    background: radial-gradient( circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95% ),
      linear-gradient(var(--pattern-color) 1px, transparent 1px),
      linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);
    background-size:cover,15px 15px,15px 15px;
    background-position:center;
    /* border-width: 1px 0 1px 0;border-image: radial-gradient( circle,var(--main-color) 0%,rgba(0,0,0,0) 100% ) 1; */
}
/* .urlUl::before {content:"";background: rgba(255,255,255,0.1);width: 1px;height: 76%;left: -10px;top: 50%;transform: translateY(-50%);position: absolute;} */
.urlUl {width:80%;text-align: left;float:right;position: relative;}
.urlUl li {width: 88px;text-align:center;padding:4px 8px 8px 8px;margin:0;display:inline-block;transition:all 0.3s ease;cursor:pointer;}
.urlUl li:hover {background:#f5f5f5;}
.urlUl li:hover .zhuboImg {transform:translateY(-3px);}
.urlUl li .zhuboImg + span {color:#333;font-size:14px;line-height: 20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.urlUl li .zhuboImg {width: 36px;height:36px;border:2px solid transparent;border-radius: 50%;margin: 4px auto;display: block;transition:all 0.3s ease;}
.urlUl li .zhuboImg img {height:100%;width:auto;border-radius: 50%;object-fit: cover;}
.urlUl li.on {box-shadow: 0 0 20px rgb(0,0,0,0.2);}
.urlUl li.on .zhuboImg {border-color:#007FE4;position: relative;}
.urlUl li.on .zhuboImg .tag {width: max-content;background: #007FE4;color: #fff;font-size: 11px;padding: 0 6px;border-radius: 20px;left: 50%;bottom: -5px;transform: translateX(-50%);position: absolute;}
.urlUl .liver {display:inline-block;margin-right: 5px;}
.liver .bar {display:inline-block;width:2px;height:6px;background:rgba(255,255,255,.5);border-radius:0px;animation:scale-up4 1s linear infinite;}
.liver .bar:nth-child(2) {height:8px;margin:0 1px;animation-delay:.25s;}
.liver .bar:nth-child(3) {animation-delay:.5s;}
@keyframes scale-up4 {
    20% {background:#fff;transform:scaleY(1.5);vertical-align: 1px;}
    40% {transform:scaleY(1);vertical-align: 0px;}
}
#tvLive {height: 688px;}
.live .msgBox {width: 100%;text-align: center;position: absolute;top: 50%;transform: translateY(-50%);}
.live .msgBox h4 {font-size: 20px;font-weight: normal;margin: 20px 0;}
.live .msgBox .timeBox li {font-size: 22px;margin: 0 5px;display: inline-block;}
.live .msgBox .timeBox span {font-size:36px;line-height: 30px;min-width: 40px;padding: 12px 6px;margin: 0 11px;border: 1px solid #666;border-radius: 5px;display: inline-block;}

.customizeDiv {cursor: pointer;z-index:999;}
.customizeDiv .topbtn {top: 10px;right: 10px;position: absolute;}
.topbtn .skip {background: rgba(255,255,255,0.2);color: #fff;font-size: 12px;padding: 7px 10px;margin-left: 5px;border-radius: 20px;display: inline-block;cursor: pointer;transition: all 0.2s linear;}
.topbtn .skip text {color: #ffcc71;}
.topbtn .skip text::after {content: "";background: rgba(255,255,255,0.2);width: 1px;height: 12px;margin: 0 6px;vertical-align: -2px;display: inline-block;}
.topbtn .skip:hover {background: rgba(255,255,255,0.3);}
