html,
body {
  padding: 0;
  margin: 0;
  line-height: 1.2;
}
.bg-danger{
    background-color: #ff3c00 !important;
}

.site-tit-panel-bg h1{
    font-size: 2.5rem;
    margin: 0;
    padding-bottom: 45px;
}
.live-shows-page{
    padding: 0 0 60px;
    background-color: #ffffff !important;
}
.live-shows-page .back{
    align-items: center;
    position: absolute;
    top: 15px;
    color: #9d9d9d;
    display: none;
}
.live-shows-page .back i{
    color: #bcbcbc;
}
.live-shows-page .list-view{
    padding-top: 0;
}
#live-animation .auItem{
    background: #ff3c00 !important;
}
.live-shows-page .right-content{
    padding-right: 15px;
}
.cc-live-list-content{
    margin-bottom: 34px;
}
.cc-live-list-content .empty{
    padding-left: 10px;
}
.cc-live-list-content .items{
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5* 1.25rem);
    margin-left: calc(-0.5* 1.25rem);
}
.live-shows-page .list{
    width: 20%;
    flex: 0 0 auto;
    margin-bottom: 30px;
    padding-left: calc(1.25rem* 0.5);
    padding-right: calc(1.25rem* 0.5);
    margin-right: 0;
    box-sizing: border-box;
    list-style: none;
}

.live-shows-page .list .top-logo{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border:1px solid #e4e4e4;
}
.live-shows-page .list .top10{
    position: absolute;
    top: 0;
    color: #fff;
    padding: 3px 8px;
    margin-bottom: 0;
}
.live-shows-page .list .bg-green{
    background-color: #428200;
}
.live-shows-page .list .name{
    text-align: left;
    padding-left: 10px;
    margin-bottom: 0;
    position: relative;
    top: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-shows-page .list a{
   color: #333333;
}
.live-shows-page .list a:hover{
    opacity: 0.9;
}
.live-shows-page .list a img{
    transition: all .2s;
}
.live-shows-page .list a:hover img{
    transform: scale(1.01);
}
.live-shows-page .list .category{
    font-size: 12px;
    color: #838383;
}
.live-shows-page .list .detail .time span{
    font-size: 13px;
    margin-left: 5px;
}
.live-shows-page .list .detail .time{
    display: flex;
    align-items: center;
    color: #838383;
    padding-top: 13px;
    font-size: 13px;
}
.live-shows-page .list .detail .time i{
    margin-top: 0;
    margin-right: 3px;
}
.live-shows-page .list .detail .btn{
     padding: 2px 4px;
    background-color: #ffffff;
}
.live-shows-page .list .detail .btn:hover,.live-shows-page .list .detail .btn:focus{
     background-color: #f8f8f8;
}
.live-shows-page .list .pb-title{
    margin-top: 4px;
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1a1a;
    margin-bottom: 5px;
}
.live-shows-page .l-title{
    display: flex;
    padding-bottom: 22px;
    align-items: center;
}
.live-shows-page .l-title .more{
    font-size: 14px;
    color: #428200;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}
.live-shows-page .l-title .more:hover{
    color: #7db20b;
}
.live-shows-page .l-title .r-live-title{
    flex-grow: 1;
}
.live-shows-page .l-title .title{
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 0;
}
.live-shows-page .l-title .text{
    font-size: 14px;
    color: #838383;
    margin-bottom: 0;
}
.live-shows-page .right-content .title:before{
    width: 4px;
    background: #428200;
    content: "";
    display: inline-block;
    margin-right: 12px;
    flex-grow: 0;
    height: 14px;
    border-radius: 4px;
}
.live-shows-page .right-content .title .month-time{
    font-size: 12px;
    color: #838383;
    font-weight: normal;
}
.live-shows-page .right-content .top-hosts .l-title{
    margin-top: 0;
}
.live-shows-page .right-content .l-title:before{
    height: 17px;
}
.live-shows-page .right-content .hosts-content ul{
    list-style: none;
    margin-left: 0;
}
.live-shows-page .right-content .hosts-content .list-item{
    display: flex;
    margin-bottom: 20px;
}
.live-shows-page .right-content .hosts-content .list-item .top-img{
    width: 34px;
    height: auto;
    border: none;
    min-width: 34px;
    min-height: 34px;
}

.live-shows-page .right-content .hosts-content .list-item img{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50px;
    border: 1px solid #e4e4e4;
    flex-grow: 0;
}
.live-shows-page .right-content .hosts-content .list-item .user-info{
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 15px;
}
.live-shows-page .right-content .hosts-content .list-item .name{
    margin-top: 5px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-shows-page .right-content .hosts-content .list-item .name a{
   color: #1a1a1a;
}
.live-shows-page .right-content .hosts-content .list-item .like{
    color: #838383;
    font-size: 12px;
}
.live-shows-page .right-content .hosts-content .list-item .like .pbFont-like{
    color: #ff3d00;
    font-size: 14px;
    position: relative;
    top: 1px;
}
.live-shows-page .span8 .l-title{
    padding-bottom: 25px;
    align-items: flex-end;
}
.live-shows-page  .mobile-download-app{
    padding-top: 45px;
}
#app-download img{
    width: 150px;
}
#app-download .ios{
    padding-right: 11px;
}
.share-pbapp{
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    padding: 30px 15px;
}
.share-pbapp .title{
    font-size: 30px;
    font-weight: bold;
}
.share-pbapp ul{
    list-style: none;
    text-align: left;
    margin-top: 45px;
}
.share-pbapp ul li{
    font-size: 16px;
    font-weight: lighter;
    font-family: open sans;
    padding-bottom: 10px;
    display: flex;
}
.share-pbapp ul li i{
    color: #428200;
    padding-right: 8px;
}
.share-pbapp .group img{
    width: 148px;
}
.share-pbapp .group{
    margin-top: 45px;
    padding-bottom: 45px;
}
.share-pbapp .group .ios{
    padding-right: 10px;
}
#live-animation{
    display: inline-flex;
    align-items: flex-end;  /*重要属性，让hight翻转过来，往上延伸*/
    margin: 0 0 2px 0;
    padding-right: 3px;
}
#live-animation .auItem{
      width: 3px;
      margin-right: 3px;
      list-style: none;
      background: #ffffff;
      height:12px;
}
#live-animation .au1{
      animation: audio .5s linear .1s infinite alternate;
}
 #live-animation .au4{
}
#live-animation .au5{
      animation: audio .5s linear .2s infinite alternate;
}
.finished-live-show #live-animation .au1,.finished-live-show #live-animation .au5{
    animation: unset;
    height: 7px;
}

@keyframes audio{
      from{height: 1px;}
      to{height: 12px;}
}

@media (min-width: 1201px) and (max-width: 1399px) {
    .live-shows-page .span3.right-content{ width: 27%; }
    .live-shows-page .cc-live-content .span9{ width: 70%;}
    .live-shows-page .right-content{ padding-right: 0; }

}



@media (max-width: 1200px) {
  .share-pbapp .title{ font-size: 26px;}
  .share-pbapp .group .ios{ padding-right: 0; margin-bottom: 5px; display: inherit;}
  .live-shows-page .row-fluid .span8{ width: 100%;}
  .live-shows-page .row-fluid .span4{ width: 100%; margin-left: 0;}
  .live-shows-page .right-content{ padding-left: 0;}
    .site-tit-panel-bg{ margin-top: 48px;}
    .live-shows-page .cc-live-content{ display: flex; flex-direction: column-reverse;}
    .live-shows-page .cc-live-content .span3,.live-shows-page .cc-live-content .span9{ width: 100%; margin-left: 0;}

}

@media (min-width: 768px) and (max-width: 979px) {
    .live-shows-page .list .name{ top: 8px;}
    .live-shows-page .list .detail{ top: 10px;}
    .live-share-page .span8,.live-share-page .span4{ width: 100% !important; margin-left: 0 !important;}


 }
@media (max-width: 979px) {
    .live-shows-page .list{width: 25%;}
}
@media (min-width: 576px) and (max-width: 767px) {
    .live-shows-page .list{width: 33.33%;}
}
@media (max-width: 767px) {
   #live-show-list .mask{height: auto !important;}

}
@media (max-width: 577px) {
    .live-shows-page .list{width: 50%;}
}