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

.index-banner {
    width: 100%;
    height: 424px;
    margin-top: 88px;
    position: relative;
}

.swiper-container {
    width: 100%;
    height: 424px;
}

.swiper-wrapper {
    width: 100%;
    height: 424px;
}

.swiper-slide {
    width: 100%;
    height: 424px;
    background: url(/web/images/syyl/top-banner.png) no-repeat center center;
    background-size: cover;
}

.swiper-slide .title {
    position: absolute;
    top: 0;
    width: 1400px;
    padding: 0 calc((100% - 1400px) / 2);
    z-index: 1;
    height: 424px;
}

.company {
    margin-top: 148px;
}

.company-name {
    height: 70px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 48px;
    color: #ffffff;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.company-main-idea {
    height: 28px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 8px;
}



.main-title {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 80px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    color: #1F2C3D;
    font-style: normal;
    text-transform: none;
}

.main-des {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    font-style: normal;
    text-transform: none;
}


/*核心能力*/
.hx-class{
    width: 100%;
    height: 765px;
    background: #FFFFFF;
}

.hx-content{
    width: 1400px;
    margin: 0 auto;
}

.hx-box{
    width: 1400px;
    border-radius: 8px;
    margin: 8px auto 80px auto;
    padding: 40px 0;
    box-sizing: border-box;
    /* 使用grid布局，4列布局 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 设置统一的间距 */
    gap: 20px;
}
/* 核心能力 - 小模块基础样式 */
.hx-item {
    /* 原有样式保留 */
    height: calc(237px - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    background: #F5F7FB;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    /* 新增：过渡动画（所有样式变化平滑生效） */
    transition: all 0.3s ease;
    /* 底部默认透明边框（为悬停时的蓝色线条预留位置） */
    border-bottom: 4px solid transparent;
}

/* 鼠标悬停时的“选中感”样式 */
.hx-item:hover {
    /* 底部蓝色线条 */
    border-bottom-color: #2468F2;

    /* 背景色变浅，增强选中感 */
    background: #EEF2F8;

    /* 阴影加深，提升层次感 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    /* 轻微放大，模拟“抬起”效果 */
    transform: scale(1.02);
}

/* 单独写悬停时标题的颜色变化（后代选择器） */
.hx-item:hover .hx-item-title {
    color: #2468F2; /* 标题文字变蓝色，突出选中状态 */
}



.hx-image{
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.hx-item-title{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
}

.hx-item-descreption{
    width: 100%;
    /* 移除固定高度限制，让内容自然撑开 */
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    font-style: normal;
    text-transform: none;

    /* 三行省略号关键样式 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制显示3行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    line-height: 20px; /* 每行高度，可根据需要调整 */
    height: 60px; /* 3行 × 20px = 60px，与原高度保持一致 */
}
/*核心能力*/


/*系统能为你实现*/
.achieve-class{
    width: 100%;
    height: 925px;
}
.achieve-content{
    width: 1400px;
    margin: 0 auto;
}

.achieve-box{
    width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 8px auto 80px auto;
    padding: 40px 0;
}

.left-box{
    width: 360px;
    height: 672px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.left-item{
    width: calc(360px - 64px);
    height: calc(156px - 70px);
    background: #FFFFFF;
    border-radius: 8px;
    padding: 35px 32px;
}

.selected-item{
    background: url(/web/images/shfw/selected@2x.png) no-repeat center center;
    background-size: cover;
}

.left-item-shuzi{
    font-family: fantasy;
    font-weight: 400;
    font-size: 30px;
    color: rgba(0,0,0,0);
    text-stroke: 1px #c2bdbd;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #c2bdbd;
}

.left-item-text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #212121;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
}
.selected-text{
    color: #FFFFFF;
}

.seleted-shuzi{
    color: #FFFFFF;
    -webkit-text-stroke: 1px #FFFFFF;
}

.right-box{
    width: calc(100% - 400px);
    height: 672px;
    display: flex;
    flex-direction: column;
}

.disNo {
    display: none !important;
    opacity: 0;
    transition: 0.5s;
}

.right-top{
    width: 100%;
    height: 463px;
    border-radius: 8px;
}

.right-img-class{
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 0 0;
}

.right-bottom{
   width: calc(100% - 64px);
   height: calc(209px - 64px);
   border-radius:  0 0 8px 8px;
   padding: 32px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    justify-content: space-between;
}

.right-title{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #212121;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.right-desc{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.right-bottom-class{
    width: 120px;
    height: 36px;
    line-height: 36px;
    color: #FFFFFF;
    background: #2468F2;
    text-align: center;
    border-radius: 4px;
}
/*系统能为你实现*/


/*系统架构*/
.diagram-class{
    width: 100%;
    height: 1165px;
    background: #FFFFFF;
}
.diagram-content{
    width: 1400px;
    margin: 0 auto;
}

.diagram-box{
    border-radius: 8px;
    padding: 40px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.diagram-img{
  width: 1168px;
  height: 888px;
}
/*系统架构*/

/*系统功能图*/
.function-class{
    width: 100%;
    height: 930px;
    background: #FFFFFF;
}
.function-content{
    width: 1400px;
    margin: 0 auto;
}

.function-box{
    border-radius: 8px;
    padding: 40px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.function-img{
    width: 1168px;
    height: 625px;
    border-radius: 8px
}
/*系统功能图*/



/*技术特点*/
.technology-class{
    width: 100%;
    height: 475px;
}
.technology-content{
    width: 1400px;
    margin: 0 auto;
}

.technology-box{
    width: 1400px;
    border-radius: 8px;
    margin: 8px auto 80px auto;
    padding: 40px 0;
    box-sizing: border-box;
    /* 使用grid布局，6列布局 */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 设置统一的间距 */
    gap: 16px;
}
.technology-box-item{
    /* 不再需要复杂的宽度计算 */
    /*height:  230px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
}

.technology-image{
    width: 96px;
    height: 96px;
}
.technology-item-descreption{
    /*width: 100%;*/
    /* 移除固定高度限制，让内容自然撑开 */
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    font-style: normal;
    text-transform: none;

    /* 三行省略号关键样式 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制显示3行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/*技术特点*/


/*系统适用行业*/
.fit-class{
    width: 100%;
    height: 525px;
    background:#FFFFFF;
}
.fit-content{
    width: 1400px;
    margin: 0 auto;
}

.fit-box{
    width: 1400px;
    border-radius: 8px;
    margin: 8px auto 80px auto;
    padding: 40px 0;
    box-sizing: border-box;
    /* 使用grid布局，4列布局 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 设置统一的间距 */
    gap: 20px;
}

.fit-box-item{
    height:  calc(130px - 96px);
    /*width: calc(285px - 80px);*/
    padding: 48px 40px;
    border-radius: 8px;
}
.fit-box-item-title{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
}
/*系统适用行业*/



/*完善的客户体系*/
.system-class{
    width: 100%;
    height: 380px;
}
.system-content{
    width: 1400px;
    margin: 0 auto;
}
.system-box{
    width: 1400px;
    border-radius: 8px;
    margin: 8px auto 80px auto;
    padding: 40px 0;
    box-sizing: border-box;
    /* 使用grid布局，4列布局 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 设置统一的间距 */
    gap: 20px;
}

.system-zh{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-around;
}

.system-box-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

.system-img{
    width: 32px;
    /*height: 78px;*/
    /* 添加倾斜效果，-10deg 表示向左倾斜10度，可根据需要调整角度 */
    transform: skewX(-15deg);
    /* 可选：若倾斜后边缘有模糊，可添加抗锯齿优化 */
    backface-visibility: hidden;
}
.item-title-box{
    height: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-left: 10px;
}

.title-text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 17px;
    color: #333333;
    font-style: normal;
    text-transform: none;
}

.title-desc{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    font-style: normal;
    text-transform: none;
}
.system-img-right{
    width: 40px;
    margin-left: 12px;
}

/*完善的客户体系*/


/*优质客户案列*/
.good-case{
    width: 100%;
    height: 645px;
    background: #FFFFFF;
}

.good-case-content{
    width: 1400px;
    margin: 0 auto;
}

.case-list{
    width: 1400px;
    border-radius: 8px;
    margin: 8px auto 80px auto;
    padding: 40px 0;
    box-sizing: border-box;
    /* 使用grid布局，4列布局 */
    display: flex;
    grid-template-columns: repeat(4, 1fr);
    /* 设置统一的间距 */
    gap: 20px;
    justify-content: space-evenly;
}

/**单个标签样式 */
.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; /* 固定卡片高度，确保悬浮后内容有足够空间 */
}

/* 卡片图片：悬浮时透明+高度收缩 */
.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: center;
    transition: all 0.3s ease;
}

/* Logo：悬浮时透明消失 */
.case-card__logo {
    height: 24px;
    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;
    }
}
/*优质客户案列*/