.common-body {
    position: absolute;
    top: 0;
    width: 1400px;
    padding: 0 calc((100% - 1400px) / 2);
    z-index: 1;
}

.container-top {
    width: 100%;
    height: 504px;
    padding-top: 88px;
    position: relative;
    background: url(/web/images/case/case-top.png) no-repeat center center;
    background-size: cover;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /*background: #000;*/
}

.swiper-slide .swiper-banner {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.container-top .title {
    height: 504px;
}

.container-recruitment {
    width: 100%;
    height: 633px;
    position: relative;
    background-color: #fff;
}

.recruitment-content {
    height: 520px;
}

.recruitment-content .title {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32px;
    color: #1F2C3D;
    font-style: normal;
    text-transform: none;
}

.case-banner {
    height: 504px;
}

.box-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.banner-box {
    width: calc(55% - 24px);
    height: 312px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;

    display: flex;
    flex-direction: row;
}

.image-banner {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.content-banner {
    width: 50%;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    flex: 1; /* 占满剩余高度 */
    align-items: flex-start; /* 默认左对齐 */
    justify-content: space-between; /* 内容上下分布 */
    transition: all 0.3s ease;
}

.banner__title {
    margin-top: -10px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 22px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.banner__desc {
    margin-top: -10px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    line-height: 1.5;
}

.banner-tiyan {
    margin-right: 10px;
    background-color: #007bff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.banner-chakan {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;

    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.banner__logo {
    height: 60px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* 案例列表容器：Flex 横向布局 + 响应式换行 */
.case-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    height: 400px;
}

/* 单个标签样式 */
.case-card__tag {
    font-size: 12px;
    color: #6699cc;
    background-color: #e6f0fa;
    padding: 2px 8px;
    border-radius: 4px;
}

/* 特殊卡片（苏美达，无顶部图片 + 按钮） */
.case-card--special {
    width: calc(25% - 18px);
    height: 280px; /* 与带图卡片高度对齐 */
    justify-content: center; /* 内容垂直居中 */
}

/* 特殊卡片的内容居中 */
.case-card__body--center {
    align-items: center;
    text-align: center;
}


/* 响应式适配：屏幕宽度变化时调整列数 */
@media (max-width: 1200px) {
    .case-card,
    .case-card--special {
        width: calc(50% - 12px); /* 两列布局 */
    }
}

@media (max-width: 768px) {
    .case-card,
    .case-card--special {
        width: 100%; /* 单列布局 */
    }
}


/* 通用卡片：确保整体过渡平滑 */
.case-card {
    width: calc(25% - 20px);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; /* 阴影、位移等过渡 */
    height: 400px; /* 固定卡片高度，确保悬浮后内容有足够空间 */
    cursor: pointer;
}

/* 卡片图片：悬浮时透明+高度收缩 */
.case-card__img {
    width: 100%;
    height: 180px; /* 固定图片高度 */
    object-fit: cover;
    transition: opacity 0.3s ease, height 0.3s ease;
}

/* 卡片内容区：默认左对齐，悬浮时居中 */
.case-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1; /* 占满剩余高度 */
    background-color: #fff;
    align-items: flex-start; /* 默认左对齐 */
    justify-content: space-between; /* 内容上下分布 */
    transition: all 0.3s ease;
}

/* Logo：悬浮时透明消失 */
.case-card__logo {
    height: 36px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* 标题：悬浮时样式稳定 */
.case-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 12px 0;
    transition: color 0.3s ease;
}

/* 描述：悬浮时居中显示，可显示更多行（可选） */
.case-card__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 默认2行，悬浮时可改3行 */
    -webkit-box-orient: vertical;
    margin: 8px 0;
    transition: all 0.3s ease;
}

/* 标签组：悬浮时隐藏 */
.case-card__tags {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    transition: all 0.3s ease;
}

/* 按钮组：默认隐藏，悬浮时显示+底部对齐 */
.case-card__buttons {
    display: none;
    gap: 12px;
    margin-top: auto; /* 关键：让按钮组靠底部 */
}

/* 主按钮样式 */
.case-card__btn--primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.case-card__btn--primary:hover {
    background-color: #0056b3;
}

/* 次要按钮样式 */
.case-card__btn--default {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.case-card__btn--default:hover {
    border-color: #007bff;
}

/* ========== 鼠标悬浮时的样式 ========== */
.case-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 增强阴影 */
    transform: translateY(-5px); /* 向上微移 */
}

.case-card:hover .case-card__img {
    opacity: 0; /* 图片透明 */
    height: 0; /* 图片高度收缩为0 */
}

.case-card:hover .case-card__logo {
    opacity: 0; /* Logo 透明消失 */
}

.case-card:hover .case-card__title {
    color: #333; /* 标题颜色保持清晰 */
}

.case-card:hover .case-card__desc {
    -webkit-line-clamp: 3; /* 悬浮时显示3行（可选，根据需求调整） */
    opacity: 1;
    text-align: center; /* 描述文字居中 */
}

.case-card:hover .case-card__tags {
    display: none; /* 隐藏标签 */
}

.case-card:hover .case-card__buttons {
    display: flex; /* 显示按钮 */
    animation: fadeIn 0.3s ease forwards; /* 淡入动画 */
}

.case-card:hover .case-card__body {
    align-items: center; /* 内容水平居中 */
    justify-content: center; /* 内容垂直居中 */
    text-align: center; /* 文字居中 */
    padding: 30px 20px; /* 调整内边距，让内容更舒展 */
}

/* 按钮淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}