.sequence 
{
    max-width: 1120px;
    /*      height: 480px;*/
    margin: 0 auto;
}

.box ul {
    display: flex;
    list-style: none;
    height: 480px;
    padding: 0;
    margin: 0;
    align-items: center;
}

    .box ul li {
        position: relative;
        height: 480px;
        transition: all 0.5s ease;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        margin-right: -90px;
        /* 关键：非激活状态固定宽度，显示右侧 */
        width: 290px;
        /* 平行四边形效果 */
        clip-path: polygon(35% 0%, 100% 0%, 75% 100%, 10% 100%);
    }

        .box ul li.on {
            /* 激活状态变宽 */
            width: 350px;
            height: 480px;
            /* 激活状态显示完整矩形 */
            /*clip-path: polygon(0% 0%, 100% -2%, 79% 100%, 0% 100%);*/
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            z-index: 10;
        }

        .box ul li:not(.on) {
          /*  opacity: 0.7;*/
            /* 非激活状态强制显示图片右侧 */
            background-position: right center !important;
        }

        .box ul li a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: inherit;
        }

.imgBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

    .imgBox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        /* 关键：非激活状态显示最右侧 */
        object-position: right center;
    }

.box ul li.on .imgBox img {
    transform: scale(1);
    /*    object-position: center center;*/
}


.box ul li:not(.on) h4 {
    right: 130px;
    font-size: 35px;
    top: 50px;
    color: white;
}

.box ul li:not(.on) h3 {
    right: 90px;
    font-size: 35px;
    top: 10px;
    color: white;
}


/* 响应式设计 */
@media (max-width: 1024px) {
    .box ul {
        height: 250px;
    }

        .box ul li {
            height: 250px;
            width: 250px;
        }

            .box ul li.on {
                width: 430px;
                height: 250px;
            }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .box ul {
        height: 240px;
    }

        .box ul li {
            height: 240px;
            width: 225px;
        }

            .box ul li.on {
                width: 360px;
                height: 240px;
            }
}

@media (max-width: 576px) {
    .box ul {
        height: 90px;
    }

        .box ul li {
            height: 90px;
            width: 240px;
            margin-right: -10px;
        }

            .box ul li.on {
                width: 180px;
                height: 90px;
            }
}

.box ul li.begin {
    width: 325px;
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
}

    .box ul li.begin.on {
        width: 325px;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }


.box ul li.end {
    /*clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 10% 100%);*/
}

    .box ul li.end.on {
        /*clip-path: polygon(29% 0%, 100% 0%, 100% 100%, 9% 100%);*/
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }



.box ul li h4 {
    position: absolute;
    top: 2px;
    font-size: 1.5rem;
    font-weight: bold;
     text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.box ul li.on h4 {
    font-size: 50px;
    color: white;
    top: 80px; 
}

.box ul li.on h3 {
    font-size: 50px;
    color: white;
    top: 125px; 
}

li .h4 {
    display: none;
}

li .h3 {
    display: block;
}

/* 当 li 有 class="on" 时显示 h4 */
li.on .h4 {
    display: block;
}

li.on .h3 {
    display: none;
}


.box ul li h3 {
    position: absolute;
    top: 85px;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); 
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}




.box ul li span {
    position: absolute;
    top: 360px;
    font-size: 12px; 
    text-align: left;
    color: white;
    margin: 40px;
    line-height: 20px;
}

.vertical-text {
    writing-mode: vertical-rl;
    /* 从右向左垂直书写（中文常用） */
    text-orientation: upright;
    letter-spacing: -15px;
    /* 保持字符方向正常（如数字、英文不旋转） */
    /* 或者用 text-orientation: upright; 让所有字符 upright（直立） */
}

.gradient-text {
}


.divmore {
    position: absolute;
    top: 210px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-more {
    /* 按钮容器样式 */
    width:80px;
    padding: 1px 12px;
    background-color: #ffaa00; /* 橙色 */
    border-radius: 30px; /* 圆角 */
    text-align: center; /* 文字水平居中 */
    line-height: 1.4; /* 垂直居中辅助（根据字体大小调整） */
    /* 文字样式 */
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none; /* 如果是 a 标签，去掉下划线 */
    /* 鼠标悬停效果（可选） */
    transition: background-color 0.3s ease;
}

    .btn-more:hover {
        background-color: #FF9500; /* 深一点的橙色 */
    }