* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

/* 背景样式 */
.case-content-bg {
    padding-bottom: 0;
    min-height: 665px;
    background-size: cover;
    background-position: center 50%;
    transition: all 1s;
}

.case-content-info {
    background-position: center 10%;
    padding: 80px 0;
}

.case-box {
    max-width: 1200px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.case-box-title {
    text-align: center;
    color: #fff;
    font-weight: normal;
    padding-bottom: 40px;
}

.case-box-title em {
    display: block;
    margin-bottom: 14px;
    font-style: normal;
    font-size: 30px;
}

.case-box-title span {
    font-size: 16px;
    opacity: 0.6;
    color: #fff;
}

/* 案例容器 - 外层用于裁剪内容 */
.case-wrapper-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* 横向滚动区域 - 所有项目排成一行 */
.case-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding-bottom: 10px;

    /* 隐藏滚动条 */
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;     /* Firefox */
    cursor: grab;
}

.case-wrapper:active {
    cursor: grabbing;
}

/* Webkit 浏览器（Chrome、Edge、Safari）的滚动条样式 */
.case-wrapper::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

/* 原来的 .case-item 保留并增加支持换行 */
.case-item {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    height: 390px;
    margin-right: 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    background-image: linear-gradient(to top, rgb(51, 51, 58) 0%, #1414684C 100%);
    white-space: normal; /* 允许文字换行 */
    word-wrap: break-word;
    flex-shrink: 0; /* 防止被压缩 */
}


.case-item:hover {
    height: 430px;
}

.case-item-bg {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: 50px auto 0 auto;
    overflow: hidden;
}

.case-item-bg img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.case-item-title {
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin: 20px 0;
    line-height: 40px;
}

.case-item-text{
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    height: calc(100% - 338px);
    margin: 0 30px;
    overflow: hidden;
}

.case-item-doc {
    padding: 20px 30px;
    width: 100%;
    bottom: 0;
    position: absolute;
    background: #27272e;
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中（如果需要的话）*/
}

.case-item-doc p {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 让两个链接之间有足够的空间 */
    align-items: center; /* 垂直居中 */
}

.centered-link {
    font-size: 14px;
    color: #fff;
    text-align: center; /* 文本居中 */
    flex: 1; /* 允许链接增长和收缩以填充可用空间 */
    margin: 0 10px; /* 给链接间增加一些间距 */
}

.divider {
    color: rgba(102, 102, 102, 0.6);
    font-size: 14px;
}
/* 弹幕容器 */
.danmu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 确保不影响交互 */
    overflow: hidden;
    z-index: 999;
}

/* 单条弹幕样式 */
.danmu-item {
    position: absolute;
    top: 50px; /* 起始高度 */
    right: 0;   /* 关键：从右边开始滚动 */
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6); /* 半透明背景 */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0.9;
    transform: translateY(-50%);
    animation: danmuMove 15s linear infinite;
    pointer-events: auto;
}

@keyframes danmuMove {
    from {
        right: -300px; /* 从右侧外出发 */
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    to {
        right: 100%; /* 移动到左侧外 */
        opacity: 0;
    }
}


/* 按钮容器样式 */
.button-container {
    display: flex;
    justify-content: center; /* 让按钮居中排列 */
    gap: 20px; /* 设置按钮之间的间隔 */
    margin: 120px auto 0; /* 上下外边距 */
    max-width: 1200px;
}

/* 公共按钮样式 */
.button2 {
    text-decoration: none;
    color: #fff;
    font-size: 18px; /* 增大文字大小 */
    line-height: 1; /* 确保文字高度与字体一致 */
    text-align: center;
    width: 220px; /* 增大按钮宽度 */
    height: 60px; /* 增加按钮高度 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    border-radius: 4px; /* 可选：添加圆角效果 */
}

/* 左边按钮样式 */
.left-button {
    background: linear-gradient(to bottom, #938eff, #2c205a);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

/* 右边按钮样式 */
.right-button {
    background: linear-gradient(to bottom, #84fab0, #8fd3f4);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* 鼠标悬停效果 */
.button2:hover {
    transform: scale(1.1);
}