.banner{margin-top: 70px;}
.banner img{width: 100%;}
.conter{width: 1200px;margin:40px auto 0;}
.con-left{width: 650px;float: left;margin-bottom: 100px;}
.con-left p{font: 16px "微软雅黑";color: #333333;line-height: 30px;text-indent: 2em;}
.con-right{float: right;width: 500px;}
.con-right img{width: 100%;}

/* 主容器：最大宽度1200px，居中，模块上下间距通过margin-block控制 */
.module-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 3.5rem auto;      /* 上下外边距，增加模块上下间距 */
    background: transparent;
}

/* 两个业务区块，无box-shadow，无圆角，干净利落，同时增加下边距让区块之间距离更大 */
.service-block {
    margin-bottom: 3rem;    /* 两个卡片之间的间距加大，上下间距明显 */
    background: #ffffff;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}

.service-block:last-child {
    margin-bottom: 0;
}

/* 双栏flex布局，使用flex行排列，通过order或flex-direction控制方向，保证第二个分类左边文字右边图片 */
.service-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

/* 图片区：无圆角 */
.image-col {
    flex: 1.1;
    min-width: 260px;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 0;
}
/* 图片区：无圆角 */
.image-col a{border-radius: 20px;overflow: hidden}
.image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 0;
}

.image-col:hover img {
    transform: scale(1.05);
}

/* 文字内容区 */
.content-col {
    flex: 1.2;
    padding: 2rem 2.2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 标题样式 */
.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #1e2f3e;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* 描述：无 border-left 和背景色 */
.description {
    color: #2c3e50;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.8rem;
    border-left: none;
    background: transparent;
    padding-left: 0;
}

/* 三篇带链接的文章列表 (仅用一种图标: fa-angle-double-right) */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.1s ease;
}

/* 统一图标样式：字体图标 fas fa-angle-double-right */
.link-icon {
    font-size: 1.25rem;
    width: 1.8rem;
    text-align: center;
    color: #e67e22;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.link-text {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2a44;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
    cursor: pointer;
    line-height: 1.4;
}

.link-text:hover {
    color: #e67e22;
    border-bottom-color: #e67e22;
}

/* ========= 关键：第二个分类 左边文字，右边图片 ========= */
/* 方法：对第二个分类使用 .reverse，然后让 .service-row 保持默认 flex-direction: row;
   但是需要让视觉上文字在左、图片在右，因此 HTML 结构里第二个分类保持 “文字col在前，图片col在后”
   并且不使用 flex-direction: row-reverse，而是维持原始顺序即可实现左边文字右边图片。
   重要说明：第一个分类结构是 图片col 在前，文字col 在后，实现左图右文。
   第二个分类结构是 文字col 在前，图片col 在后，实现左文右图。
   所以根本不需要 reverse 的 row-reverse 干扰。为了保证清晰，移除之前的 reverse 类，直接通过不同的 HTML 顺序完成。
*/

/* 确保没有任何意外反向 */
.service-row {
    flex-direction: row;   /* 明确从左到右排列 */
}

/* 响应式：小屏幕时自动转为上下布局，保留阅读逻辑：在小屏时都按列排列，图片在上或文字在上依照源码顺序。
   但为了保持小屏体验，让内容可读性更好，不用flex-direction列时保证顺序合理。 */
@media (max-width: 800px) {
    body {
        padding: 1.5rem 1rem;
    }
    .module-wrapper {
        margin: 1.5rem auto;
    }
    .service-row {
        flex-direction: column !important;  /* 小屏幕变成上下排列，仍然遵循源码顺序 */
    }
    .image-col {
        min-height: 240px;
    }
    .content-col {
        padding: 1.8rem;
    }
    .section-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .content-col {
        padding: 1.5rem;
    }
    .link-text {
        font-size: 0.9rem;
    }
}


.image-col,
.image-col img {
    border-radius: 20px;
}

.link-item:active {
    opacity: 0.8;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}