.zdtj{
            max-width: 1400px;
            margin: 0 auto;
            margin-top:29px;}

        .section-title {
            text-align: center;
            font-size: 28px;
            color: #333;
            margin-bottom: 40px;
            letter-spacing: 2px;}

        .card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;}

        .card {
            position: relative;
            height: 180px;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;}

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

        .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            filter: brightness(0.7);}

        /* 红色渐变遮罩 */
        .overlay-red {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 30, 30, 0.85) 0%, rgba(139, 0, 0, 0.9) 100%);}

        /* 紫色渐变遮罩 */
        .overlay-purple {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(100, 50, 150, 0.85) 0%, rgba(60, 30, 100, 0.9) 100%);}

        /* 金黄色渐变遮罩 */
        .overlay-gold {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 150, 50, 0.85) 0%, rgba(140, 120, 40, 0.9) 100%);}

        /* 深红色渐变遮罩 */
        .overlay-dark-red {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(160, 20, 20, 0.9) 0%, rgba(120, 10, 10, 0.95) 100%);}

        .card-title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            z-index: 10;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}

        /* 响应式布局 */
        @media (max-width: 1024px) {
            .card-grid {
                grid-template-columns: repeat(2, 1fr);}
        }

        @media (max-width: 640px) {
            .card-grid {
                grid-template-columns: 1fr;}
            
            .card {
                height: 150px;}
        }
        
        /* 第 1 个卡片 */
.card:nth-child(1) .card-bg {
  background-image: url(./images/bg1.jpg);}
.card:nth-child(1) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 30, 30, 0.5) 0%, rgba(139, 0, 0, 0.9) 100%);}
/* 第 2 个卡片 */
.card:nth-child(2) .card-bg {
  background-image: url(./images/bg2.png);}
.card:nth-child(2) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(100, 50, 150, 0.5) 0%, rgba(60, 30, 100, 0.9) 100%);}
/* 第 3 个卡片 */
.card:nth-child(3) .card-bg {
  background-image: url(./images/bg3.jpg);}
.card:nth-child(3) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 150, 50, 0.5) 0%, rgba(140, 120, 40, 0.9) 100%);}
/* 第 4 个卡片 */
.card:nth-child(4) .card-bg {
  background-image: url(./images/bg4.jpg);}
.card:nth-child(4) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 30, 30, 0.5) 0%, rgba(139, 0, 0, 0.9) 100%);}
/* 第 5 个卡片 */
.card:nth-child(5) .card-bg {
  background-image: url(./images/bg5.png);}
.card:nth-child(5) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
             background: linear-gradient(135deg, rgba(100, 50, 150, 0.5) 0%, rgba(60, 30, 100, 0.9) 100%);}
/* 第 6 个卡片 */
.card:nth-child(6) .card-bg {
  background-image: url(./images/bg6.jpg);}
.card:nth-child(6) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 150, 50, 0.5) 0%, rgba(140, 120, 40, 0.9) 100%);}
/* 第 7 个卡片 */
.card:nth-child(7) .card-bg {
  background-image: url(./images/bg7.jpg);}
.card:nth-child(7) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(180, 30, 30, 0.5) 0%, rgba(139, 0, 0, 0.9) 100%);}
/* 第 8 个卡片 */
.card:nth-child(8) .card-bg {
  background-image: url(./images/bg8.jpg);}
.card:nth-child(8) .overlay{
position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(100, 50, 150, 0.5) 0%, rgba(60, 30, 100, 0.9) 100%);}

.sci li{
float:left;
width:32%;
margin:0px 0.6%;}
/* 123 */