* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f8f8f8;
}

a {
    text-decoration: none;
}

#wrap {
    width: 100%;
    margin: 20px auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    #wrap ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 1.2%; /* 百分比间距，自适应 */
        padding: 0;
    }

        /* 核心：自适应一行4个，百分比布局 */
        #wrap ul li {
            width: 24.1%; /* 4个刚好一行，无错位 */
            height: 270px;
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            transition: all 0.2s;
        }

            #wrap ul li:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }

            #wrap ul li .a1 img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
            }

            #wrap ul li .a1 .divA {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 70px;
                padding: 12px 15px;
                background: rgba(255,255,255,0.95);
                backdrop-filter: blur(2px);
            }

                #wrap ul li .a1 .divA .p1 {
                    width: 65%;
                    height: 26px;
                    font-size: 17px;
                    line-height: 26px;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: 500;
                }

                #wrap ul li .a1 .divA .p2 {
                    width: 65%;
                    height: 20px;
                    font-size: 13px;
                    color: #666;
                    line-height: 20px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                #wrap ul li .a1 .divA .p3 {
                    position: absolute;
                    right: 15px;
                    bottom: 15px;
                    color: #ff6700;
                    font-size: 18px;
                    line-height: 28px;
                    text-align: right;
                }

                    #wrap ul li .a1 .divA .p3 span {
                        font-size: 22px;
                        font-weight: 700;
                    }

            /* hover 遮罩 */
            #wrap ul li .a2 {
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                text-align: center;
                color: white;
                background: rgba(0,0,0,0.65);
                transition: all 0.25s ease-out;
                border-radius: 6px;
            }

            #wrap ul li:hover .a2 {
                left: 0;
            }

            #wrap ul li .a2 .p4 {
                width: 100%;
                text-align: center;
                position: absolute;
                top: 40px;
                left: 50%;
                transform: translateX(-50%);
                color: #ffe605;
                font-size: 22px;
                font-weight: bold;
                opacity: 0;
                transition: all 0.2s 0.1s ease-out;
            }

            #wrap ul li:hover .a2 .p4 {
                opacity: 1;
            }

            #wrap ul li .a2 .p5 {
                width: 90%;
                text-align: center;
                line-height: 22px;
                position: absolute;
                top: 90px;
                left: 50%;
                transform: translateX(-50%);
                color: #f5f5f5;
                font-size: 14px;
                opacity: 0;
                transition: all 0.2s 0.2s ease-out;
            }

            #wrap ul li:hover .a2 .p5 {
                opacity: 1;
            }

            #wrap ul li .a2 .p6 {
                position: absolute;
                top: 150px;
                left: 50%;
                transform: translateX(-50%) scale(0.8);
                transition: all 0.3s 0.25s ease-out;
                color: #fff;
                font-size: 17px;
                opacity: 0;
            }

            #wrap ul li:hover .a2 .p6 {
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }

            #wrap ul li .a2 .p6 span {
                font-family: Arial;
                font-size: 34px;
                font-weight: 700;
                color: #ffe605;
            }

            #wrap ul li .a2 .p7 {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translate(-50%, 30px);
                width: 150px;
                height: 36px;
                line-height: 36px;
                border-radius: 18px;
                border: 1px solid #ffe605;
                color: #ffe605;
                opacity: 0;
                transition: all 0.2s 0.4s ease-out;
                font-size: 14px;
            }

            #wrap ul li:hover .a2 .p7 {
                transform: translate(-50%, 0);
                opacity: 1;
            }

            #wrap ul li .a2 .p7:hover {
                background-color: #ffe605;
                color: #333;
                font-weight: 500;
            }