* {
    box-sizing: border-box;
}

body {
    background-color: #f8f8f8;
    overflow-x: hidden;
}

/* 滚动条整体宽度和高度 */
::-webkit-scrollbar {
    width: 4px; /* 横向滚动条的宽度 */
    height: 4px; /* 横向滚动条的高度 */
    background-color: #f1f1f1; /* 滚动条背景 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: #f1f1f1; /* 轨道颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #888; /* 滑块颜色 */
}

/* 滚动条滑块：悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 悬停时滑块颜色 */
}

/* Firefox 滚动条样式 */
.scroll-container {
    scrollbar-width: thin; /* 滚动条宽度：thin, none, auto */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

/* 降级方案：默认显示滚动条 */
.scroll-container {
    overflow-x: auto; /* 允许水平滚动 */
}

/* 针对 Webkit 内核浏览器，隐藏默认滚动条 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .scroll-container::-webkit-scrollbar {
        display: none; /* 隐藏默认滚动条 */
    }
}

.container-box {
    width: 100%;
    margin: 0 auto;
    max-width: 1390px;
}

.bg-white {
    background-color: #ffffff !important;
}

.ellipsis {
    white-space: nowrap; /* 确保文字不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    width: 100%; /* 设置一个固定的宽度或最大宽度 */
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示两行 */
    -webkit-box-orient: vertical; /* 垂直排列内容 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.mt30 {
    margin-top: 30px;
}

.no-border {
    border: none !important;
}

.copyright {
    width: 100%;
    background-color: #201f1f;
    color: #8c8c8c;
    padding: 30px 0;
    text-align: center;
}

.copyright a {
    color: #8c8c8c !important;
}

.copyright a:hover {
    color: #8c8c8c !important;
}

@media (max-width: 1390px) {
    .container-box {
        padding: 0 30px;
    }
}


#lay-page-container {
    display: flex;
    justify-content: center;
}

#lay-page-container .layui-laypage-prev, #lay-page-container .layui-laypage-next, #lay-page-container .layui-laypage-curr, #lay-page-container a, #lay-page-container .layui-laypage .layui-laypage-curr .layui-laypage-em, #lay-page-container .layui-laypage-spr {
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 0 5px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    background-color: #efefef;
}

#lay-page-container .layui-laypage .layui-laypage-curr {
    background-color: var(--global-primary-light-color);
}

#lay-page-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
    display: none;
}

.page-video-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    min-height: 300px;
    max-height: 400px;
}

.page-video-box .plyr {
    width: 90%;
}

.page-video-box .plyr__video-wrapper {
    width: 100%;
}

.page-video-box #player {
    width: 100%;
    max-height: 400px !important;
    object-fit: contain;
    overflow: hidden;
}

@media (max-width: 450px) {
    .page-video-box {
        min-height: 200px;
        max-height: 400px;
    }
}