.detalsBox {
    width: 100%;
    font-size: .2667rem;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

@media (min-width: 992px) {
    .right-sidebar {
        max-width: 330px;
    }
}

/* 内容 */
.detalsBox .content {
    padding-top: 1.0667rem;
    box-sizing: border-box;
    display: flex;
    --bs-gutter-x: .4rem;

}

.detalsBox .content .left {
    margin: .2667rem 0;
    box-sizing: border-box;
}

.detalsBox .content .left video {
    width: 100%;
    height: auto;
}

.detalsBox .content .left .info-header {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: .5rem;
}

.detalsBox .content .left .info-header .header-left {
    -webkit-box-flex: 1;
    flex: 1;
    font-size: .24rem;
}

.detalsBox .content .left .info-header .header-left .timerDate {
    color: #8e9194;
    display: flex;
    align-items: center;
}

.detalsBox .content .left .info-header .header-left .timerDate>div {
    display: flex;
    align-items: center;
}

.detalsBox .content .left .info-header .header-left .timerDate>div .mr-3 {
    margin-left: .1333rem;
}

.detalsBox .content .left .info-header .header-left .svg1 {
    width: .3rem;
    height: .3rem;
    fill: #8e9194;
}

.detalsBox .content .left .info-header .header-left .svg2 {
    margin-left: .3333rem;
    width: .35rem;
    height: .35rem;
    fill: #8e9194;
}

.detalsBox .content .left .info-header .header-right {
    margin-left: .4rem;
    text-align: right;
    font-size: .24rem;
}

.detalsBox .content .left .info-header .header-right .text-danger {
    margin-right: .1333rem;
}

.detalsBox .content .left .info-header .header-right .inactive-color {
    color: #8e9194;
    margin-top: .2667rem;
}

.detalsBox .content .left .centerBox .text-sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.detalsBox .content .left .centerBox .text-sponsor .mr-2 {
    margin-right: .1333rem;
}

.detalsBox .content .left .centerBox .text-sponsor .svg {
    width: .2667rem;
    height: .2667rem;
    color: #6eada3;
    fill: currentColor;
}

.detalsBox .content .left .centerBox .btn,
.detalsBox .content .left .centerBox button {
    font-size: .2rem;
    position: relative;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #fff;
    padding: .1333rem .2667rem;
}

.detalsBox .content .left .centerBox .btn svg,
.detalsBox .content .left .centerBox button svg {
    width: .2667rem;
    height: .2667rem;
    color: #ff8382;
    fill: currentColor;
}

.detalsBox .content .left .centerBox .btn .count,
.detalsBox .content .left .centerBox button .count {
    margin-left: .0667rem;
}

.detalsBox .content .left .centerBox .btn2 svg {
    color: #fff;
    fill: currentColor;
}

.detalsBox .content .left .fav {
    background: rgba(138, 128, 255, 0.09);
    color: #fff;
}

.detalsBox .content .left .dropdown-menu {
    padding: 0;
    font-size: .2667rem;
    min-width: .6rem;
    border-radius: .1333rem;
    margin-top: .1333rem !important;
    box-sizing: border-box;
}

.detalsBox .content .left .dropdown-menu .dropdown-item {
    padding: .1333rem .2667rem;
    box-sizing: border-box;
}

.detalsBox .content .left .tags .cat {
    margin-right: .2rem;
}

.detalsBox .content .left .tags .cat::before {
    content: '//';
    color: #ff8382;
    margin-right: .0267rem;
}

.detalsBox .content .left .tags .separator {
    color: #fff;
}

.detalsBox .content .left .tags a:before {
    content: '#';
    color: #6190c9;
    font-size: .25rem;
    margin-right: .0267rem;
    font-weight: 400;
}

.detalsBox .content .left .tags a {
    margin-left: .2rem;
}

.detalsBox .content .left .tuijianVideo {
    margin-top: .4rem;
    padding: .1333rem 0 .1333rem .1333rem;
    box-sizing: border-box;
}

.detalsBox .content .left .tuijianVideo .row {
    --bs-gutter-x: .4rem;
}

.detalsBox .content .left .tuijianVideo .row>* {
    padding-right: 0;
    padding-left: 0;
    margin-right: .2667rem;
    margin-bottom: .2667rem;
}

.detalsBox .content .left .tuijianVideo .video-card {
    justify-content: center;
}

.detalsBox .content .left .tuijianVideo .video-card .video-a {
    position: relative;
}

.detalsBox .content .left .tuijianVideo .video-card .card-header {
    position: absolute;
    top: .1333rem;
    left: .1333rem;
    font-size: .2133rem;
}

.detalsBox .content .left .tuijianVideo .video-card .card-header svg {
    width: .25rem;
    height: .25rem;
    fill: #ff8382;
    margin-left: .0667rem;
}

.detalsBox .content .left .tuijianVideo .video-card .card-badge {
    position: absolute;
    top: .1333rem;
    right: .0667rem;
    font-size: .2133rem;
    background: #6eada3;
    padding: 0 .0533rem;
    box-sizing: border-box;
}

.detalsBox .content .left .tuijianVideo .video-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.detalsBox .content .left .mesBox .new-comment {
    display: flex;
    margin: 0 auto 1rem;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: .4rem;
}

.detalsBox .content .left .mesBox .new-comment .info {
    padding: .2rem .3rem;
    box-sizing: border-box;
    color: #8e9194;
}

.detalsBox .content .left .mesBox .new-comment .form-group {
    background: #191d28;
    margin: 0;
    padding: 0;
    border-radius: 5px;
}

.detalsBox .content .left .mesBox .comments .avatar {
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
}

.detalsBox .content .left .mesBox .comments .right {
    width: 100%;
    margin-left: .24rem;
    color: #8e9194;
}

.detalsBox .content .left .mesBox .comments .right .title {
    font-size: .22rem;
    margin-bottom: .15rem;
}

.detalsBox .content .left .mesBox .comments .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: .24rem;
}

.detalsBox .content .left .mesBox .comment-list {
    color: #8e9194;
}

.detalsBox .content .left .mesBox .comment-list a {
    color: #8e9194;
}

.detalsBox .content .left .right {
    color: #fff;
    margin: .2667rem 0;
    box-sizing: border-box;
}

.detalsBox .content .left .title-with-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.detalsBox .content .left .title-with-more .sub-title {
    color: #8e9194;
}

.detalsBox .content .left .title-with-more .h3-md {
    font-size: .4rem;
    margin-top: .1333rem;
}

.detalsBox .content .left .title-with-more .more a {
    text-decoration: none;
    color: #b8babc;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: .2667rem;
}

.detalsBox .content .left .title-with-more .more a .icon-xiangyou {
    margin-left: .0667rem;
    font-size: .2667rem;
}

.detalsBox .content .left .title-with-more .more a:hover {
    color: lightpink;
}

.detalsBox .content .left .row>* {
    padding: 0 .2rem;
}

.detalsBox .content .left .gutter-20 {
    margin-left: 0rem;
    margin-right: 0rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box {
    cursor: pointer;
    margin-bottom: .2rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box .imgBox {
    position: relative;
    height: 2.5rem;
    margin-bottom: .1333rem;
    border-radius: .0667rem;
    box-sizing: border-box;
    overflow: hidden;
}

.detalsBox .content .left .video_itemBox .video-hover-box .imgBox:hover .absolute-bottom-left {
    opacity: 1;
}

.detalsBox .content .left .video_itemBox .video-hover-box .imgBox:hover .hoverimg {
    opacity: 0;
}

.detalsBox .content .left .video_itemBox .video-hover-box .imgBox:hover .video-js {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.detalsBox .content .left .video_itemBox .video-hover-box .absolute-bottom-left {
    width: .4667rem;
    height: .4667rem;
    text-align: center;
    line-height: .4667rem;
    border-radius: 50%;
    position: absolute;
    bottom: 30%;
    left: .1333rem;
    transition: all .5s;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0;
    z-index: 9;
}

.detalsBox .content .left .video_itemBox .video-hover-box .absolute-bottom-left .iconfont {
    color: #fff;
}

.detalsBox .content .left .video_itemBox .video-hover-box .absolute-bottom-left:hover {
    background: rgba(243, 96, 96, 0.4);
}

.detalsBox .content .left .video_itemBox .video-hover-box .absolute-bottom-right {
    position: absolute;
    bottom: 30%;
    right: .1333rem;
    z-index: 9;
}

.detalsBox .content .left .video_itemBox .video-hover-box .absolute-bottom-right span {
    color: #fff;
    padding: .0267rem .12rem;
    box-sizing: border-box;
    border-radius: .11rem;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 .1067rem .2933rem 0 rgba(0, 0, 0, 0.38);
}

.detalsBox .content .left .video_itemBox .video-hover-box a {
    width: 100%;
}

.detalsBox .content .left .video_itemBox .video-hover-box a img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: .1333rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box .video-js {
    width: 100%;
    height: 100%;
    border-radius: .0667rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box .detail .title {
    color: #b8babc;
    max-width: 320px;
    margin-bottom: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.detalsBox .content .left .video_itemBox .video-hover-box .detail .title a {
    color: #b8babc;
}

.detalsBox .content .left .video_itemBox .video-hover-box .detail .title a:hover {
    color: lightpink;
}

.detalsBox .content .left .video_itemBox .video-hover-box .detail .sub-title {
    color: #5e5d5a;
    font-size: 0.2667rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box .detail .sub-title>span {
    margin-right: .0667rem;
}

.detalsBox .content .left .video_itemBox .video-hover-box:nth-child(4n) {
    margin-right: 0;
}

.detalsBox .content .left .hot_content .pagination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: .5rem;
    margin-bottom: 0;
    display: flex;
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    list-style: none;
    border-radius: .25rem;
    font-size: .2667rem;
}

.detalsBox .content .left .hot_content .page-item {
    border-radius: .1333rem;
}

.detalsBox .content .left .hot_content .page-link {
    color: #b8babc;
    background-color: transparent;
    border: none;
    padding: .05rem .3rem;
    box-sizing: border-box;
    margin: 0 .1rem;
    font-size: .4rem;
    border-radius: .1333rem;
}

.detalsBox .content .left .hot_content .active {
    background-color: #fe628e;
    color: #fff;
}

.detalsBox .content .right {
    padding-top: .2667rem;
    box-sizing: border-box;
}

.content .right video {
    width: 100%;
    height: auto;
}

.content .right .left_b {
    padding-top: .2667rem;
    box-sizing: border-box;
}

.content .right .left_b .detail {
    flex: 1;
    padding: 8px 0 0 .1333rem;
}

.content .right .left_b .detail .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #b8babc;
}

.content .right .left_b .detail .title a:hover {
    color: #fe628e;
}

.content .right .left_b .detail .sub-title {
    color: #b8babc;
    margin-top: .1333rem;
}

.content .right .left_b .video-js {
    min-width: 100%;
    max-width: 100%;
    height: 2rem;
    border-radius: .1333rem;
    overflow: hidden;
    display: none;
}

.content .right .left_b .videoImg:hover .img-box {
    display: none;
}

.content .right .left_b .videoImg:hover .video-js {
    display: block;
}


.right .left_b .videoImg {
    flex: 1;
}

.right .left_b .img-box {
    min-width: 100%;
    max-width: 100%;
}

.left_b .img-box img {
    width: 100%;
    height: 2rem;
    border-radius: .1333rem;
}

.right .left_b .detail {
    flex: 1;

    padding: 8px 0 0 .1333rem;


}


/* 允许换行 */

.detail .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #b8babc;
}

.detail .title a:hover {
    color: #fe628e;
}

.right .left_b .detail .sub-title {
    color: #b8babc;
    margin-top: .1333rem;
}

.content .right #videoContainer .video-img-box {
    display: flex;
    flex-direction: column;
}


#videoContainer .title a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #b8babc;
}

#videoContainer .title a:hover {
    color: #fe628e;
}

.right #videoContainer1 .video-img-box {
    display: flex;
    align-items: center;
}

.content .right .video_left_Box1 {
    display: flex;
    justify-content: center;


}

.right .video_left_Box1 video {
    width: 50%;
    height: auto;
}

/* IE 10+ */
.detalsBox .collapseBox {
    display: flex;
}

/* 尾部 */
/* 尾部 */
.f_title {
    padding: .5333rem 0;
    font-size: .4267rem;
    box-sizing: border-box;
}

.f_title a {
    color: #ddd;
}

.site-footer {
    color: #ddd;
    font-size: .3333rem;
}

.site-footer img {
    width: auto;
    height: .5rem;
}

.site-footer a {
    color: #8e9194;
}

.site-footer svg {
    width: .5rem;
    height: .5rem;
    color: #8e9194;
    fill: #8e9194;
}

.site-footer .widget-title {
    padding-bottom: .2667rem;
}

.site-footer .vertical-list li {
    padding: 0 0 .1333rem 0;
}
