a {
    all: unset;
}
/* 顶部banner--开始 */
.banner {
    width: 100%;
    height: 634px;
    background-image: url('../img/about/about-img.jpeg');
    position: relative;
}

.banner-list {
    width: 525px;
    position: absolute;
    left: 380px;
    top: 280px;
}

.banner-button {
    font-size: 18px;
    margin-right: 50px;
    width: 150px;
    background-color: rgba(0, 105, 234, 1);
    color: #fff;
    border-radius: 5px;
    line-height: 50px;
    margin-top: 140px;
}

.banner-button:hover {
    cursor: pointer;
}
/* 顶部banner--结束 */

/* 产品方向--开始 */
/* 画框——显示图片的区域 */
.frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3.3 / 1;  /* 图片比例约 宽:高 = 800:572 ≈ 1.4 */
    background: #fff;
}

/* 所有图片层共用设置 */
.frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 保证图片铺满不变形（四张图片内容完全一致，但文件不同） */
    object-position: center;
    display: block;
    pointer-events: none;        /* 避免鼠标干扰，纯粹展示 */
    border-radius: 24px;
    transition: opacity 2.2s cubic-bezier(0.23, 1, 0.32, 1);  /* 平滑、略长的淡变，模拟底色渐变 */
    will-change: opacity;
    backface-visibility: hidden;
}

/* 底层默认显示图片1 (z-index基础) */
#img1 {
    width: 100%;
    height: auto;
    opacity: 1;
    z-index: 4;
}
#img2 {
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 3;
}
#img3 {
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 2;
}
#img4 {
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 1;
}
/* 产品方向--结束 */

/* 案例展示--开始 */
.car {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    width: 100%;
}

.car-item {
    width: 391px;
    height: 149px;
    padding: 30px 70px;
    border-radius: 10px;
    background-image: url("../img/about/content-img.jpeg");
    box-shadow: 0 10px 20px -5px rgba(70, 120, 200, 0.25),
    0 4px 8px 0 rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.view-plan {
    opacity: 0.75;
    margin-top: 10px;
}

.view-plan:hover {
    cursor: pointer;
}

.view-plan span:hover {
    color: #47cdff;
}
/* 案例展示--结束 */

/* 相关推荐--开始 */
.recommend {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
}

.recommend-item {
    width: 244px;
    height: 129px;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

.recommend-car {
    background-image: url(../img/education/car-shop.jpeg);
}

.recommend-ocr {
    background-image: url(../img/education/ocr.jpeg);
}

.recommend-ai {
    background-image: url(../img/education/ai.jpeg);
}

.recommend-electronic {
    background-image: url(../img/education/electronic.jpeg);
}

.recommend-item:hover {
    cursor: pointer;
    border-color: rgba(0, 105, 234, 1);
}
/* 相关推荐--结束 */