.header_wrapper .logo {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 16px;
}
.header_wrapper {
    width: 1260px;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 14px;
    color: #333;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-content: center;
    align-items: center;
    -webkit-align-content: center;
    -webkit-align-items: center;
    background: rgba(255, 255, 255, 0);
}
.live-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    /*background-image: url(../image/1.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 663px
}

.live-screen .live-wrapp {
display: flex;
justify-content: center;
height: 100%
}

.live-screen .live-wrapp .left-screen {
position: relative;
width: 1260px;
height: 100%;
border-radius: 10px;
z-index: 1;
overflow: hidden;
display: flex;
/*justify-content: center;*/
align-items: center
}

.live-screen .live-wrapp .left-screen .avatar {
width: 100%;
height: 100%;
border: none;
filter: blur(16px);
transform: scale(1.2);
position: absolute
}

.live-screen .live-wrapp .left-screen::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
background-color: rgba(0, 0, 0, .44);
z-index: 2
}

.inke-down-wrapp, .inke-num {
position: absolute;
z-index: 10
}

.left-screen .anchor-info-wrapp {
box-sizing: border-box;
padding: 12px 12px 30px;
display: flex;
justify-content: space-between;
position: absolute;
top: 14px;
left: 24px;
height: 90px;
color: #fff;
background-color: rgba(0, 0, 0, .24);
border-radius: 8px;
z-index: 10
}

.left-screen .anchor-info-wrapp .anchor-info {
display: flex
}

.left-screen .anchor-info-wrapp .attention {
width: 60px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 12px;
background: #6B238E;
border-radius: 15px;
border: 1px solid #6B238E;
cursor: pointer
}

.left-screen .anchor-info-wrapp .attention:hover {
background: #6B238E;
border: 1px solid #6B238E
}

.left-screen .anchor-info-wrapp .attention .plu-img {
display: inline-block;
background-image: url(../image/MTYwNDM3MTEyMjI1MiM2OTQjcG5n.png);
background-size: 9px 9px;
background-repeat: no-repeat;
width: 9px;
height: 9px
}

.left-screen .anchor-info-wrapp .anchor-info .anchor-avatar {
width: 48px;
height: 48px;
margin-right: 12px;
background-size: 100% 100%;
background-repeat: no-repeat;
border: 1px solid #fff;
border-radius: 50%;
overflow: hidden
}

.left-screen .anchor-info-wrapp .anchor-info .anchor-nike-info .nike {
width: 130px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
line-height: 22px;
margin-bottom: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}

.inke-down-wrapp .down-text, .inke-num {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFF;
opacity: .44
}

.left-screen .anchor-info-wrapp .anchor-info .anchor-nike-info .grade-wrapp {
display: flex
}

.left-screen .anchor-info-wrapp .anchor-info .anchor-nike-info .grade-wrapp .gender-img {
margin-right: 3px;
background-image: url(../image/MTYwNDYzMjY5MTU5NyM0OTAjcG5n.png);
background-size: 16px 16px;
background-repeat: no-repeat;
width: 16px;
height: 16px
}

.grade-wrapp .grade {
font-size: 12px;
display: flex;
width: 45px;
height: 16px;
line-height: 16px;
background: #FFA154;
border-radius: 2px
}

.grade-wrapp .grade-img {
background-image: url(../image/MTYwNDYzMzA3MTA2OCMxMTUjcG5n.png);
background-size: 16px 18px;
background-repeat: no-repeat;
width: 16px;
height: 18px
}

.inke-down-wrapp {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
bottom: 24px;
left: 24px;
width: 104px;
height: 120px;
background-color: rgba(0, 0, 0, .24);
border-radius: 8px
}

.inke-down-wrapp .down-text {
width: 84px;
height: 17px;
font-size: 12px;
line-height: 17px;
margin-bottom: 6px
}

.inke-down-wrapp .inke-qr-code {
background-image: url(../image/MTYwNDYzMjIwMzM5NiM5MzMjcG5n.png);
background-size: 72px 72px;
background-repeat: no-repeat;
width: 72px;
height: 72px
}

.inke-num {
top: 28px;
right: 24px;
height: 20px;
font-size: 14px;
line-height: 20px
}

#inke-live-play {
position: relative;
width: 370px;
height: 662px;
z-index: 5
}

#inke-live-play video {
object-fit: fill;
position: relative;
z-index: 8;
width: 1304px;
height: 662px;
}

#inke-live-play .video-bg {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
z-index: 1;
overflow: hidden
}

#inke-live-play .video-bg img {
width: 100%;
height: 100%;
border: none;
filter: blur(16px);
transform: scale(1.2);
position: absolute
}

#inke-live-play .video-bg::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .44);
z-index: 2
}

#inke-live-play:hover .yk-controls-wrapp {
opacity: 1
}

.play-control {
box-sizing: border-box;
padding-right: 34px;
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
right: 0;
bottom: 0;
height: 47px;
z-index: 11
}

.play-control-bg {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .85), transparent);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent)
}

.left-control-bg, .yk-controls-wrapp {
-webkit-user-select: none;
-moz-user-select: none;
bottom: 0
}

.left-control-bg {
-ms-user-select: none;
user-select: none;
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .85), transparent);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
height: 47px;
position: absolute;
left: 0;
width: calc((100% - (100% / 2.6)) / 2)
}

.play-control .sound-img {
background-image: url(../image/MTYwNDM5OTI5ODY0NCM3NTkjcG5n.png);
background-size: 20px 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 12px
}

.play-control .bar {
position: relative;
width: 98px;
height: 2px;
border-radius: 12px;
background: #5B5B5B;
margin-right: 36px;
cursor: pointer
}

.play-control .bar .progress {
width: 58.8px;
height: 2px;
border-radius: 10px;
background: #6B238E
}

.play-control .bar .dot {
width: 12px;
height: 12px;
background: #fff;
position: absolute;
bottom: 0;
top: 0;
left: 58.8px;
margin: auto 0;
border-radius: 50%;
cursor: pointer
}

.play-control .full-screen {
background-image: url(../image/MTYwNDY0NTAwMjgzNiM5NjAjcG5n.png);
background-size: 26px 26px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
cursor: pointer
}

.to-live-room {
text-decoration: none;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -26px;
margin-left: -93.5px;
left: 50%;
width: 187px;
height: 52px;
text-align: center;
line-height: 52px;
background: #000;
border-radius: 26px;
opacity: 0;
transition: opacity .3s;
z-index: 12
}

.live-screen .live-wrapp .right-list .list-item .live-name span, .to-live-room span {
font-size: 16px;
color: #FFF;
line-height: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500
}

.to-live-room:hover {
opacity: 1 !important;
background: #6B238E
}

.to-live-room span {
width: 80px;
height: 22px
}

.live-screen .live-wrapp .right-list {
/*margin-left: 16px;*/
margin-right:16px;
display: flex;
flex-direction: column
}

.live-screen .live-wrapp .right-list .list-item {
position: relative;
cursor: pointer;
width: 210px;
height: calc((100% - 30px) / 4);
background: #939393;
border-radius: 10px;
margin-bottom: 10px
}

.live-screen .live-wrapp .right-list .list-item img {
width: 100%;
height: 100%;
object-fit: cover;
border: none;
border-radius: 10px
}

.live-screen .live-wrapp .right-list .list-item .live-name {
position: absolute;
box-sizing: border-box;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
border-radius: 10px;
padding: 9px 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .27) 27%, rgba(0, 0, 0, .84) 100%)
}

.live-screen .live-wrapp .right-list .list-item .live-name span {
height: 22px
}

.live-screen .live-wrapp .right-list .list-item .item-border {
position: absolute;
top: 0;
left: 0;
transition: opacity .3s;
cursor: pointer;
z-index: 2;
opacity: 0;
width: 206px;
border-radius: 10px;
height: calc(100% - 3px);
border: 2px solid #6B238E
}

.live-screen .live-wrapp .right-list .list-item .item-border::before {

display: block;
position: absolute;
right: -25px;
top: calc(100% / 2);
margin-top: -4px;
/*border-style: solid;*/
border-width: 6px 8px 6px 6px;
width: 8px;
height: 1px;
border-color:transparent transparent transparent #6B238E 
}

.live-screen .live-wrapp .right-list .currentItem .item-border, .live-screen .live-wrapp .right-list .list-item:hover > .item-border {
opacity: 1
}

.live-story {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 56px
}

.live-story .live-story-container {
width: 1260px
}

.live-story .live-title {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 16px
}

.live-story .live-title .title-icon {
background-image: url(../image/MTYwNDYzMTM3NzAxMCMxMzYjcG5n.png);
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
margin-right: 6px
}

.live-story .live-title .story {
height: 33px;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 33px
}

.story-wrapp {
display: flex;
margin-bottom: 45px
}

.story-wrapp :last-child {
margin-right: 0
}

.story-wrapp-item {
width: calc((100% - 14px) / 2);
margin-right: 14px
}

.story-wrapp-item a {
color: #fff;
cursor: pointer;
display: inline-block;
text-decoration: none
}

.story-wrapp-item .story-top {
width: 100%;
height: 240px;
background: #D8D8D8;
border-radius: 10px;
margin-bottom: 24px;
cursor: pointer;
overflow: hidden;
position: relative
}

.story-wrapp-item .story-item {
display: flex;
margin-bottom: 11px
}

.story-item-line {
height: 1px;
background: #EEE;
margin-bottom: 11px;
margin-left: 92px
}

.story-wrapp-item .story-item .story-img {
position: relative;
width: 82px;
height: 50px;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
overflow: hidden
}

.story-wrapp-item .story-item .story-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
transition: .4s all linear
}

.story-wrapp-item .story-item .story-img:hover img {
transform-origin: 50% 50%;
transform: scale(1.1)
}

.story-wrapp-item .story-item .story-img:hover .img-mask {
display: block
}

.story-wrapp-item .story-item .story-info {
flex: 1;
cursor: pointer
}

.story-wrapp-item .story-item .story-info:hover .story-desc, .story-wrapp-item .story-item .story-info:hover .story-title {
color: #6B238E
}

.story-wrapp-item .story-item .story-info .story-title {
max-width: 531px;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 20px;
margin-top: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}

.story-desc-top, .top-text {
color: #FFF
}

.img-mask {
display: none;
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .15)
}

.story-wrapp-item .story-top img {
width: 100%;
height: 100%;
object-fit: fill;
border-radius: 10px;
transition: .4s all linear
}

.story-wrapp-item .story-top:hover img {
transform-origin: 50% 50%;
transform: scale(1.1)
}

.story-wrapp-item .story-top:hover .img-mask {
display: block
}

.story-wrapp-item .story-top .top-content {
position: absolute;
box-sizing: border-box;
bottom: 0;
left: 0;
width: 100%;
height: 66px;
padding: 12px 16px 10px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);
border-radius: 0 0 10px 10px
}

.top-text {
height: 22px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 22px;
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}

.story-desc, .story-desc-top {
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}

.story-desc {
max-width: 531px;
color: #666
}

.channel-wrapp {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}

.channel-wrapp .channel-item-wrapp {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 1260px;
margin-bottom: 32px;
margin-top: 30px;
}

.channel-wrapp .channel-item-wrapp .channel-title {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 16px
}

.channel-wrapp .channel-item-wrapp .channel-title img {
width: 28px;
height: 28px;
margin-right: 12px
}

.channel-wrapp .channel-item-wrapp .channel-title span {
height: 33px;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 33px
}

.channel-wrapp .channel-item-wrapp .channel-content {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap
}

.channel-wrapp .channel-item-wrapp .channel-content .live-pic-wrapp:nth-child(4n) {
margin-right: 0
}

.channel-wrapp .channel-item-wrapp .channel-content .live-pic-wrapp {
display: flex;
width: calc((100% - 48px) / 4);
flex-direction: column;
margin-right: 16px;
margin-bottom: 25px
}

.channel-content .live-pic-wrapp .live-pic {
height: 228px;
background: #D6D6D6;
border-radius: 10px 10px 0 0;
overflow: hidden;
margin-bottom: 8px;
position: relative
}

.channel-content .live-pic-wrapp a {
color: #fff;
cursor: pointer;
display: inline-block
}

.channel-content .live-pic-wrapp .live-pic:hover img {
transform-origin: 50% 50%;
transform: scale(1.1)
}

.channel-content .live-pic-wrapp .live-pic .img-mask i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;
background-image: url(../image/MTYwNDYzMTEzMDAyMSMxOTUjcG5n.png);
background-size: 64px 64px;
background-repeat: no-repeat;
width: 64px;
height: 64px
}

.channel-content .live-pic-wrapp .live-pic:hover .img-mask {
display: block
}

.channel-content .live-pic-wrapp .live-pic img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 10px 0 0;
transition: .4s all linear
}

.channel-content .live-pic-wrapp .live-info {
display: flex;
align-items: center
}

.channel-content .live-pic-wrapp .live-info .live-avat {
width: 32px;
height: 32px;
margin-right: 8px;
overflow: hidden
}

.channel-content .live-pic-wrapp .live-info .live-avat img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden
}

.channel-content .live-pic-wrapp .zhubo-name {
height: 22px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 250px
}

.yk-controls-wrapp {
height: 47px;
-ms-user-select: none;
user-select: none;
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
position: absolute;
left: 0;
right: 0;
z-index: 10;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .85), transparent);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent)
}

#yk-control-wrapp {
margin-right: 34px
}