#live {
	/* border-top: 1px solid #fff;
	background: url("../img/share_bg.jpg") no-repeat top center */
}


#live .top {
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 560px;
	display: flex;
	justify-content: space-between;

}

.classfy-nav{
    margin-bottom: 30px;
}
.classfy-nav ul li{
        cursor: pointer;
}
.classfy-nav ul li.on{
    color:#fee194;
    border:1px solid #fee194;
}

#live .top .lf {
	overflow: hidden;
	border-radius: 20px;
	background-color: #fff;
    flex:1;
	position: relative;
}

#live .top .lf .tips img {
	margin: 0 10px;
	margin-left: 20px;
}

.live-logo-info {
	text-align: left;
	display: flex;
	align-items: center;
}

.live-logo-info .msg {
	margin-left: 20px;
}

.live-logo-info .h-status {
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	padding: 0 10px;
	margin-top: 10px;
	line-height: 26px;
	border-radius: 4px;
	background-color: #bf002c;
}

#live .top .lf .tips {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20px;
	z-index: 999;
	color: #fff;
	top: 20px;
	font-size: 12px;
	padding-right: 20px;
	width: 100%;
	box-sizing: border-box;
	text-align: right;
	position: absolute;
}

#live .top .rt {
	overflow: hidden;
	width: 270px;
    padding-left: 20px;
}

.live-type {
	box-sizing: border-box;
	height: 100%;
    margin-bottom: 10px;
	overflow: auto;
}

.live-type::-webkit-scrollbar{
	width: 10px;
}


.live-type li {

    border: 4px solid #290000;
    border-radius: 4px;
	cursor: pointer;
	display: block;
	height: 23%;
    margin-bottom: 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
    position: relative;
}


.live-type li.on{
    border-color:#fee194
}

.live-type li.on:after{
       content: "";
       position: absolute;
       display: inline-block;
       left: -22px;
       transform: translateY(-10px);
       top: 50%;
       width: 0;
       height: 0;
       border-right: 10px solid #fee194;
       border-top: 10px solid transparent;
       border-bottom: 10px solid transparent;
       border-left: 10px solid transparent;
}



.live-type li .name {
	font-size: 14px;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	padding:10px;
	background-image: linear-gradient(rgba(0,0,0,.01),rgba(0,0,0,.8));
    position:absolute;
    color:#fff ;
	bottom:0;
}

/* .live-type li:hover img{
  transform: scale(1.01);
} */

.live-type li img {
    transition:all .3s;
	width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .arrow-right {
	width: 8px;
	display: inline-block;
	height: 8px;
	border: 2px solid #888;
	border-left-width: 0;
	border-top-width: 0;
	transition: all .3s;
	transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
} */

#live .bottom {
	margin-top: 70px;
	padding-bottom: 130px;
}

#live .bottom .img>img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all .3s;
	object-fit: cover;
}

#live .bottom .img:hover img {
	transform: scale(1.1);
}

#live .bottom .img {
	border-radius: 7px;
	overflow: hidden;
	padding-bottom: 68%;
	position: relative;
	border: 3px solid #fff;
}

#live .bottom .t {
	padding-left: 4px;
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
}

#live .bottom .title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 30px;
}

#live .bottom .list {
	padding: 10px 0;
	display: flex;
	overflow: auto;

}

#live .bottom .list li.on .t {
	color: #bf002c;
}

#live .bottom .list li.on .img {
	border-color: #bf002c;
}

#live .bottom .list li {
	cursor: pointer;
	width: 15%;
	margin-right: 1.6%;
	flex-shrink: 0;
}

#live .bottom .list .on .t img {
	display: inline;
	vertical-align: bottom;
}

#live .bottom .list .t {
	min-height: 3em;
}

#live .bottom .list .t img {
	margin-right: 10px;
	display: none;
}

#live .bottom .list .play-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


.more-h {
	position: absolute;
	bottom: 30px;
	left: 30px;
	color: #fff;
	font-size: 20px;
	z-index: 10;
	width: 100%;
}
.more-h .btn-11 img{
	vertical-align: middle;
}
.more-h .btn-11{
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	line-height: 40px;
	height: 40px;
	border-radius: 40px;
	font-size: 0;
	width: 40px;
	background: rgba(250, 250, 250, .5);
}
.more-h .btn-1 {
	display: inline-block;
	font-size: 12px;
	border-radius: 40px;
	padding: 0 20px;
	line-height: 40px;
	cursor: pointer;
	background: rgba(250, 250, 250, .5);
}
.more-h .btn-1:hover #h-des{
	display: block;
}
.more-h #h-des {
	display: none;
	line-height: 2;
	position: absolute;
	top: 0;
	padding: 10px;
	font-size: 14px;
	left: 0;
	width: 60%;
	border-radius: 10px;
	background-color: rgba(250, 250, 250, .5);
	transform: translateY(-120%);
}
.mr-10{
	margin-right: 10px;
}
.more-h #h-des:after {
	content: "";
	width: 0;
	position: absolute;
	left: 20px;
	bottom: -20px;
	height: 0;
	display: inline-block;
	border-bottom: 10px transparent solid;
	border-right: 10px transparent solid;
	border-top: 10px rgba(250, 250, 250, .5) solid;
	border-left: 10px transparent solid;
}