/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';  /* Project id 3881979 */
    src: url('//at.alicdn.com/t/c/font_3881979_kczf1thu35.woff2?t=1679553514053') format('woff2'),
    url('//at.alicdn.com/t/c/font_3881979_kczf1thu35.woff?t=1679553514053') format('woff'),
    url('//at.alicdn.com/t/c/font_3881979_kczf1thu35.ttf?t=1679553514053') format('truetype');
}
* {
    padding: 0;
    margin: 0;
}
html,
body,
#app {
    width: 100%;
    height: 100%;
}
body {
    overflow: hidden;
    background-color: #111;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    /*font-size: 27px;*/
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-star:before {
    content: "\e8c6";
}
.icon-comment:before {
    content: "\e673";
}
.icon-plus:before {
    content: "\e602";
}
.icon-share:before {
    content: "\e72f";
}
.icon-dianz:before {
    content: "\e65c";
}
.icon-search:before {
    content: "\e685";
}
#top-bar {
    width: 100%;
    font-weight: 200;
    color: #fff;
    font-size: 0.5rem;
    display: flex;
    position: fixed;
    left: 0;
    top: 0.4rem;
    justify-content: space-around;
    z-index: 99999;
}
#top-bar a {
    color: #fff; opacity: 0.8; padding: 0 0.05rem;
}
#top-bar i {
    font-size: 25px;
}
/* 交互功能区 点赞 评论 分享 */
.interactive {
    width: 1rem;
    position: absolute;
    right: 0.3rem;
    top: 30%;
    display: flex;
    flex-direction: column; z-index: 9999;
}
.interactive div {
    color: #fee; text-align: center; margin-top: 0.3rem;
}
.interactive .avatar {
    height: calc(1rem - 2px);
    width: calc(1rem - 2px);
    border-radius: 50%;
    border: 2px solid #fff;
    position: relative;
    margin-bottom: 0.2rem;
}
.interactive .avatar img {
    height: calc(1rem - 2px);
    width: calc(1rem - 2px);
    border-radius: 50%;
}
.interactive div i {
    font-size: 0.7rem;
}
.interactive div .add-friend {
    position: absolute;
    top: calc(1rem - 8px); background: #fff; border-radius: 50%;
    left: calc(50% - 6px);
    font-size: 10px;

}
.video-msg {
    min-height: 2.333333rem;
    width: 100%;
    /* border: 2px solid #fff; */
    position: absolute;
    left: 0;
    bottom: 0.3rem;
    overflow: hidden;
    display: flex;
}
.video-msg .word-msg {
    padding-left: 10px;
    color: #fee;
    /* border: 1px solid pink; */
    width: 80%;
    overflow: hidden;
}
.video-msg .word-msg p {
    padding: 3px 0;
}
.video-msg .word-msg .uid {
    font-size: 16px;
}
.video-msg .word-msg .desc {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.video-msg .word-msg .author {
    font-size: 12px;
}
.video-msg .disk-area {
    width: 20%;
    position: relative;
    /* border: 1px solid orange; */
}
@keyframes disk-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
.video-msg .disk-area .rotate-disk {
    height: 40px;
    width: 40px;
    border: 15px solid #444;
    border-radius: 50%;
    position: absolute;
    right: 4px;
    bottom: 8px;
    overflow: hidden;
    animation: disk-rotate 10s linear infinite;
}
.video-msg .disk-area .rotate-disk img {
    height: 40px;
    width: 40px;
}
#tab-bar {
    height: 1.2rem;
    width: 100%;
    background-color: #000;
    font-weight: 200;
    color: #fff;
    font-size: 0.533333rem;
    display: flex;
    position: fixed;
    left: 0;
    line-height: 1.2rem;
    bottom: 0;
    justify-content: space-around;
    z-index: 99999;
}
#tab-bar .item .plus {
    position: relative;
    top: 8px;
    line-height: 30px;
    height: 30px;
    width: 40px;
    border: 2px solid #fee;
}
#tab-bar .item .plus i {
    padding-left: 10px;
}
#tab-bar .item.active {
    border-bottom: 0.026667rem solid #fff;
}
.swiper-container {
    height: 100%;
}
/* 视频翻页 */
.swiper-slide {
    /* 一定要设置溢出隐藏，不然会显示下一页的动画 */
    overflow: hidden;
}
.swiper-slide video {
    width: 100%;
    height: 100%;
    outline: none;
}
.play-btn {
    display: block;
}
/* 播放按钮 */
.play-btn {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    opacity: 0.5;
    z-index: 50;
    /*display: none;*/
}

.plzdkk{
    height: 75vh !important;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    background: #fff;
}
.pldbkk{
    position: fixed;
    bottom: 0;
    padding: .2rem .3rem;
    background: #ffffff;
    border-top: 1px solid rgba(180, 179, 179, 0.2);
    width: 100%;
}
.plkk{
    background: rgba(179, 178, 178, 0.1);
    border: 0;
    border-radius: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    width: 70%;
    margin-right: .2rem;
}

.plbtn{
    background: #ff0000;color: #fff;padding: .1rem .3rem;border-radius: .5rem;
}
.space-between{
    justify-content: space-between;
}

.zfzzc{
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 100;
    text-align: right;
}