*{
    padding: 0;
    margin: 0;
}

.a{
    text-decoration: none;
    color: transparent;
    /* background-color: #524300;  */
    /* 鼠标悬停时的背景颜色 */
    transition: 0s;
}

.a:active {
    /* background-color: #524300;  */
    /* 点击后的背景颜色 */
    color: #000;
}

.a:hover {
    text-decoration: underline;
    color: #e9381c;
    transition: 0.1s;
    /* background-color: #524300;  */
    /* 鼠标悬停时的背景颜色 */
}

h4,p{
    text-align: justify;
    /* font-family: "宋体"; */
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body{
    box-sizing: border-box;
    width: 100vw;
    min-width: 1000px;                                                                                                                                                                           
    height: auto;
    overflow-x: hidden;
}

.main-all{
    position: relative;
    width: 100vw;
    min-width: 1000px;
    height: auto;
    margin: 0 auto;
    /* background: url(../img/bgm.jpg) no-repeat center top/100% auto; */
}

/* banner */
.main-banner{
    position: relative;
    width: 100vw;
    height: 789px;
    margin: 0 auto;
    min-width: 1000px;
    background: url(//x0.ifengimg.com/ucms/special/images/7A2992F1CA24ED8FFECE921127659EC9.jpg) no-repeat center top;
}

/* dy */
.main-dy{
    position: relative;
    width: 1000px;
    height: 295px;
    margin: 0 auto;
    min-width: 1000px;
    overflow: hidden;
    background: url(//x0.ifengimg.com/ucms/special/images/7D4E4E3EF5264D43AE55F94EE4673A7C.jpg) no-repeat center top/auto 100%;
}

.daohang{
    position: relative;
    width: 1000px;
    height: 170px;
    margin: 0 auto;
    min-width: 1010px;
    overflow: hidden;
 }  

.daohang1{
    position: relative;
    width: 227px;
    height: 145px;
    margin: 0 auto;
    min-width: 227px;
    overflow: hidden;
    float: left;
    background-color: #e3e6e7;
    margin-left: 37px;
    background: url(//x0.ifengimg.com/ucms/special/images/A98E6812A732998C01421F7D89E29D70.jpg) no-repeat center top/auto 100%
}

.daohang2{
     position: relative;
    width: 227px;
    height: 145px;
    margin: 0 auto;
    min-width: 227px;
    overflow: hidden;
    float: left;
    background-color: #e3e6e7;
    margin-left: 20px;
    background: url(//x0.ifengimg.com/ucms/special/images/C29FD18A3BA596751865650018E366BF.jpg) no-repeat center top/auto 100%
}
.daohang3{
     position: relative;
    width: 227px;
    height: 145px;
    margin: 0 auto;
    min-width: 227px;
    overflow: hidden;
    float: left;
    background-color: #e3e6e7;
    margin-left: 20px;
    background: url(//x0.ifengimg.com/ucms/special/images/84D5B1F134F63D4B67C433F14EE5C80E.jpg) no-repeat center top/auto 100%

}
.daohang4{
     position: relative;
    width: 227px;
    height: 145px;
    margin: 0 auto;
    min-width: 227px;
    overflow: hidden;
    float: left;
    background-color: #e3e6e7;
    margin-left: 20px;
    background: url(//x0.ifengimg.com/ucms/special/images/8A723A07BB1C18072D780036A2DE24D0.jpg) no-repeat center top/auto 100%

}
 .hover-wrapper {
            position: relative; /* 作为图片定位的参考点 */
            display: inline-block; /* 保持元素原有尺寸 */
            margin: 0px;
            cursor: pointer;
        }

        /* 触发元素的默认样式 */
        .trigger-element {
            padding: 145px 227px;
            border-radius: 0px;
            transition: all 0.3s ease;
        }

        /* 图片容器 - 默认隐藏 */
        .overlay-image {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 227px; /* 与触发元素同宽 */
            height: 145px; /* 与触发元素同高 */
            border-radius: 0px;
            overflow: hidden;
            z-index: 2; /* 确保图片在最上层 */
        }

        /* 图片自适应样式 */
        .overlay-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持比例填充整个区域 */
            transition: transform 0.3s ease;
        }

        /* 鼠标悬停时的效果 */
        .hover-wrapper:hover .trigger-element {
            opacity: 0; /* 隐藏原元素内容 */
        }
        
        .hover-wrapper:hover .overlay-image {
            display: block; /* 显示图片 */
        }

        /* 悬停时图片轻微放大效果（可选） */
        

        /* 文字触发元素的特殊样式 */
       

        .text-trigger-wrapper {
            margin: 50px 20px;
        }

        /* 图片触发元素的特殊样式 */
  

.bankuaitwo{
    position: relative;
    width: 1000px;
    height: 558px;
    margin: 0 auto;
    min-width: 1000px;
    overflow: hidden;
    background: url(//x0.ifengimg.com/ucms/special/images/06114A73CAA24628F48A84BA22C64EB7.jpg) no-repeat center top/auto 100%

}

 /* 容器设置 - 确保文字和图片在同一行 */
        .hover-container {
            position: relative;
            display: inline-block;
        }

        /* 触发文字样式 */
        .hover-text {
            color: #333;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.3s ease;
            padding: 2px 5px;
        }

        /* 鼠标经过文字变色 */
        .hover-container:hover .hover-text {
            color: #01838a; /* 变色效果 */
        }

        /* 图片容器 - 默认隐藏，位于文字右侧 */
        .image-container {
            display: none;
            position: absolute;
            left: 100%; /* 靠右显示 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中对齐文字 */
            top: 317px; /* 与文字保持距离 */
            left: 510px; /* 与文字保持距离 */
            width: 468px; /* 图片宽度 */
            border-radius: 0px;
            display: block; /* 图片容器 - 默认隐藏，位于文字右侧 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10;
        }



        /* 图片样式 */
        .hover-image {
            width: 100%;
            height: 300px; /* 图片高度 */
            object-fit: cover;
            display: block;
        }

        /* 透明图层 - 位于图片下方 */
        .image-caption {
            background: #01838a;
            color: white;
            padding: 15px;
            position: relative;
        }


        /* 图片容器 - 默认隐藏，位于文字右侧 */
        .image-container1 {
            display: none;
            position: absolute;
            left: 100%; /* 靠右显示 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中对齐文字 */
            top: -110px; /* 与文字保持距离 */
            left: 360px; /* 与文字保持距离 */
            width: 468px; /* 图片宽度 */
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10;
        }

        

        /* 图片样式 */
        .hover-image1 {
            width: 100%;
            height: 300px; /* 图片高度 */
            object-fit: cover;
            display: block;
        }

        /* 透明图层 - 位于图片下方 */
        .image-caption1 {
            background: #01838a;
            color: white;
            padding: 15px;
            position: relative;
        }


 /* 标题样式 */
        .caption-title1 {
            font-size: 18px;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        /* 详细内容样式 */
        .caption-content1 {
            font-size: 14px;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
        }

        /* 鼠标经过时显示图片容器 */
        .hover-container:hover .image-container1 {
            display: block;
            animation: fadeIn 0.3s ease forwards;
        }




        /* 图片容器 - 默认隐藏，位于文字右侧 */
        .image-container2 {
            display: none;
            position: absolute;
            left: 100%; /* 靠右显示 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中对齐文字 */
            top: -210px; /* 与文字保持距离 */
            left: 360px; /* 与文字保持距离 */
            width: 468px; /* 图片宽度 */
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10;
        }

        

        /* 图片样式 */
        .hover-image2 {
            width: 100%;
            height: 300px; /* 图片高度 */
            object-fit: cover;
            display: block;
        }

        /* 透明图层 - 位于图片下方 */
        .image-caption2 {
            background: #01838a;
            color: white;
            padding: 15px;
            position: relative;
        }


 /* 标题样式 */
        .caption-title2 {
            font-size: 18px;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        /* 详细内容样式 */
        .caption-content2 {
            font-size: 14px;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
        }

        /* 鼠标经过时显示图片容器 */
        .hover-container:hover .image-container2 {
            display: block;
            animation: fadeIn 0.3s ease forwards;
        }


/* 图片容器 - 默认隐藏，位于文字右侧 */
        .image-container3 {
            display: none;
            position: absolute;
            left: 100%; /* 靠右显示 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中对齐文字 */
            top: -309px; /* 与文字保持距离 */
            left: 360px; /* 与文字保持距离 */
            width: 468px; /* 图片宽度 */
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10;
        }

        

        /* 图片样式 */
        .hover-image3 {
            width: 100%;
            height: 300px; /* 图片高度 */
            object-fit: cover;
            display: block;
        }

        /* 透明图层 - 位于图片下方 */
        .image-caption3 {
            background: #01838a;
            color: white;
            padding: 15px;
            position: relative;
        }


 /* 标题样式 */
        .caption-title3 {
            font-size: 18px;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        /* 详细内容样式 */
        .caption-content3 {
            font-size: 14px;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
        }

        /* 鼠标经过时显示图片容器 */
        .hover-container:hover .image-container3 {
            display: block;
            animation: fadeIn 0.3s ease forwards;
        }



        /* 标题样式 */
        .caption-title {
            font-size: 18px;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        /* 详细内容样式 */
        .caption-content {
            font-size: 14px;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
        }

        /* 鼠标经过时显示图片容器 */
        .hover-container:hover .image-container {
            display: block;
            animation: fadeIn 0.3s ease forwards;
        }

        /* 淡入动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-50%) translateX(-10px); }
            to { opacity: 1; transform: translateY(-50%) translateX(0); }
        }

        /* 多个实例的间距 */
        .example-gap {
            margin-bottom: 50px;
        }

  .erziti{
    font-size: 14px;
    line-height: 21px;
    padding: 10px 0px 0 0px;
    color: #000;
    cursor: default;
    width: 300px;
}      

.text-left {
            text-align: left; /* 左对齐（默认） */
            text-align: weiru;
            padding-top: 125px;
            padding-left: 150px;
        }
.text-left1 {
            text-align: left; /* 左对齐（默认） */
            text-align: weiru;
            padding-top: 20px;
            padding-left: 150px;
        }

.text-left2 {
            text-align: left; /* 左对齐（默认） */
            text-align: weiru;
            padding-top: 20px;
            padding-left: 150px;
        }

.text-left3 {
            text-align: left; /* 左对齐（默认） */
            text-align: weiru;
            padding-top: 20px;
            padding-left: 150px;
        }

.main-con{
    width: 100vw;
    min-width: 1000px;
    margin: 0 auto;
    /* background: url(../img/bgm1.jpg) no-repeat center top,
        url(../img/bgm2.jpg) no-repeat center 580px,
        url(../img/bgm3.jpg) no-repeat center 1228px; */
}

/* .title{
    width: 967px;
    height: 116px;
    padding-top: 58px;
    margin: 0 auto;
} */

/*fenge*/
.fenge{
height: 25px;
}


.main-banner .swiper-container img{
    width: 100%; /* 使图片宽度铺满div *//* 使图片高度铺满div */
    height: 100%; 
    object-fit: cover; /* 裁剪并缩放图片以填充容器 */
}

.main-banner .swiper-container {
    width: 100%;
    height: 100%;
}
.main-banner .swiper-slide {
    background-position: center;
    background-size: cover;
}


/* three */
.main-three{
    position: relative;
    width: 100%;
    height: 501px;
    margin: 0 auto;
    background: url(//x0.ifengimg.com/ucms/special/images/72A41962A8AE194D47569304F5855BCA.jpg) no-repeat center top;
}



        .scroll-container {
            position: relative;
            width: 1000px;
            max-width: 1000px;
            margin: 0 auto;
            padding-top: 100px;
            padding-left: 58px;
        }

        .scroll-container1 {
            position: relative;
            width: 680px;
            max-width: 680px;
            margin: 0 auto;
            padding-top: 100px;
            padding-left:50px;
            float: left;
        }
        .scroll-container3 {
            position: relative;
            width: 300px;
            max-width: 300px;
            margin: 0 auto;
            padding-top: 100px;
            padding-left:0px;
            float: left;
        }
            .scroll-item3 {
            display: inline-block;
            width: 300px;
            height: 430px;
            margin-right: 0rem;
            background: #cbd7de; /* 半透明背景 */
            border-radius: 0px;
            padding: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            backdrop-filter: blur(4px); /* 毛玻璃效果 */
            border: 2px solid; /* 先设置边框宽和样式 */
            border-color: #e0e9f1; /* 红色边框 */

        }

        .horizontal-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            padding: 1rem 0;
            scroll-behavior: smooth;
            /* 隐藏滚动条但保留滚动功能 */
            -ms-overflow-style: none;  /* IE 和 Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Chrome, Safari 和 Opera */
        .horizontal-scroll::-webkit-scrollbar {
            display: none;
        }

        .scroll-item {
            display: inline-block;
            width: 211px;
            height: 333px;
            margin-right: 1.3rem;
            background: #cbd7de; /* 半透明背景 */
            border-radius: 0px;
            padding: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            backdrop-filter: blur(4px); /* 毛玻璃效果 */
            border: 2px solid; /* 先设置边框宽和样式 */
            border-color: #e0e9f1; /* 红色边框 */

        }


      .horizontal-scroll1::-webkit-scrollbar {
            display: none;
        }

        .scroll-item1 {
            display: inline-block;
            width: 300px;
            height: 430px;
            margin-right: 0.65rem;
            background: #cbd7de; /* 半透明背景 */
            border-radius: 0px;
            padding: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            backdrop-filter: blur(4px); /* 毛玻璃效果 */
            border: 2px solid; /* 先设置边框宽和样式 */
            border-color: #e0e9f1; /* 红色边框 */

        }

/* 鼠标经过时的样式 */
        .scroll-item1:hover {
            background-color: #0d838f;/* 背景色变深且更不透明 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 阴影加深 */
            transform: translateY(-2px); /* 轻微上浮效果 */
        }


     /* 鼠标经过时的样式 */
        .scroll-item:hover {
            background-color: #0d838f;/* 背景色变深且更不透明 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 阴影加深 */
            transform: translateY(-2px); /* 轻微上浮效果 */
        }


         /* 项目内容样式 */
        .item-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 0px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

           .item-image1 {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 0px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .scroll-item:hover .item-image {
            opacity: 0.9; /* 鼠标经过时图片略微变暗 */
        }
        .scroll-item1:hover .item-image1 {
            opacity: 0.9; /* 鼠标经过时图片略微变暗 */
        }
        .item-link {
            text-decoration: none; /* 移除默认下划线 */
            color: inherit; /* 继承父元素颜色 */
            display: block; /* 使整个项目可点击 */
            height: 100%;
        }
        .item-link1 {
            text-decoration: none; /* 移除默认下划线 */
            color: inherit; /* 继承父元素颜色 */
            display: block; /* 使整个项目可点击 */
            height: 100%;
        }

        .item-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
            white-space: normal;
            transition: color 0.3s ease; /* 文字颜色过渡 */
        }
       .item-title1 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
            white-space: normal;
            transition: color 0.3s ease; /* 文字颜色过渡 */
        }
        .item-desc {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
            white-space: normal;
            height: 70px;
            overflow: hidden;
            transition: color 0.3s ease; /* 文字颜色过渡 */
        }
        .item-desc1 {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
            white-space: normal;
            height: 120px;
            overflow: hidden;
            transition: color 0.3s ease; /* 文字颜色过渡 */
        }
        .item-desc2 {
            font-size: 0.7rem;
            color: #666;
            line-height: 1.1;
            white-space: normal;
            height: 70px;
            overflow: hidden;
            transition: color 0.3s ease; /* 文字颜色过渡 */
            text-align: right; 
        }
       .item-desc3 {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
            white-space: normal;
            height: 70px;
            overflow: hidden;
            transition: color 0.3s ease; /* 文字颜色过渡 */
            text-align: right; 
        }

        /* 鼠标经过时文字变为白色 */
        .scroll-item:hover .item-title,
        .scroll-item:hover .item-desc{
            color: white;
        }
        .scroll-item:hover .item-desc2 {
            color: white;
        }
        /* 鼠标经过时文字变为白色 */
        .scroll-item1:hover .item-title1,
        .scroll-item1:hover .item-desc1{
            color: white;
        }
        .scroll-item1:hover .item-desc3{
            color: white;
        }
        .scroll-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5); /* 透明白色背景 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            backdrop-filter: blur(4px); /* 毛玻璃效果 */

        }



        .scroll-arrow:hover {
            background-color: rgba(255, 255, 255, 0.8); /* 悬停时增加不透明度 */
            transform: translateY(-50%) scale(1.1);
        }

        .scroll-arrow.left {
            left: 10px;
        }

        .scroll-arrow.right {
            right: -20px;
        }

        /* 在小屏幕上调整箭头位置 */
        @media (max-width: 500px) {
            .scroll-arrow.left {
                left: 5px;
            }
            
            .scroll-arrow.right {
                right: 5px;
            }
        }



/* four */
.main-four{
    position: relative;
    width: 1000px;
    height: 645px;
    margin: 0 auto;
    /*background: url(../img/bgm4.jpg) no-repeat center top;*/
}

.main-four.main-dy{
    width: 100%;
    height: 92px;
    margin: 0 auto;
    background: url(//x0.ifengimg.com/ucms/special/images/B0B9F8E75E2F2558398A57511788D674.jpg) no-repeat center top;
}

.main-four .three-swiper{
    position: relative;
    width: 965px;
    height: 600px;
    margin: 0px auto 0;
    overflow: hidden;
    background: url() no-repeat center top;
    float: right;
    margin-top:-27px;

}

.main-four .three-swiper .swiper-slide{
    width: 965px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    float: right;
}

.main-four .three-swiper .swiper-slide img{
    width: auto;
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* 图片容器样式 */
        .image-container8 {
            position: relative;
            width: 100%;
            max-width: 965px;
            margin: 2rem auto;
            overflow: hidden;
            border-radius: 0px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease;
        }

        /* 图片样式 */
        .image-container8 img {
            width: 954px;
            height: 541px;
            display: block;
            transition: all 0s ease;
        }

        /* 透明文字叠加层 */
        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.5rem;
            /* 透明背景 - 使用rgba控制透明度 */
            background: rgba(22, 135, 145, 0.5); /* 黑色背景，50%透明度 */
            color: #ffffff;
            /* 可选：渐变透明效果 */
            /* background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); */
            transition: background 0.3s ease;
        }

        /* 标题样式 */
        .image-title {
            margin: 0 0 1rem 0;
            font-size: 1.2rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        /* 摘要样式 */
        .image-caption8 {
            margin: 0;
            font-size: 0.8rem;
            line-height: 1.6;
        }

        /* 超链接样式 */
        .image-caption8 a {
            color: #4dabf7;
            text-decoration: none;
            border-bottom: 1px solid rgba(77, 171, 247, 0.5);
            padding-bottom: 2px;
            transition: all 0.3s ease;
        }

        .image-caption8 a:hover {
            color: #91c4ff;
            border-bottom-color: #91c4ff;
            text-shadow: 0 0 8px rgba(77, 171, 247, 0.3);
        }


        /* 响应式调整 */
        @media (max-width: 768px) {
            .image-overlay {
                padding: 1.5rem;
            }
            
            .image-title {
                font-size: 1.5rem;
            }
            
            .image-caption8 {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .image-overlay {
                padding: 1rem;
            }
            
            .image-title {
                font-size: 1.3rem;
                margin-bottom: 0.7rem;
            }
            
            .image-caption8 {
                font-size: 0.95rem;
            }
        }



/* five */
.main-five{
    position: relative;
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background: url(//x0.ifengimg.com/ucms/special/images/712F292B8A7418435DE2178679775B04.jpg) no-repeat center top;
}

 /* 核心框架样式：固定宽高+滚动控制 */
        .content-frame {
            width: 275px;        /* 固定宽度 */
            height: 410px;       /* 固定高度 */
            border: 0px solid #eee; /* 框架边框 */
            border-radius: 0px;  /* 圆角优化 */
            padding: 16px;       /* 内部间距 */
            box-sizing: border-box; /* 确保padding不影响宽高 */
            overflow-y: auto;    /* 垂直方向：内容超出时显示滚动条 */
            overflow-x: hidden;  /* 水平方向：禁止滚动 */
            /* background-color: #fff;*/ /* 背景色 */
            /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/ /* 轻微阴影 */
        }

        /* 单条内容容器：控制间距 */
        .content-item {
            margin-bottom: 20px; /* 条与条之间的间距 */
            padding-bottom: 20px; /* 底部内边距 */
            border-bottom: 1px dashed #f0f0f0; /* 分隔虚线 */
        }

        /* 最后一条内容：取消底部边框和间距 */
        .content-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        /* 标题样式 */
        .content-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px; /* 标题与摘要的间距 */
            white-space: nowrap; /* 标题不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        /* 摘要样式 - 添加点击效果 */
        .content-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5; /* 行高优化 */
            /* 控制摘要最多显示2行，超出部分省略 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            cursor: pointer; /* 鼠标悬停显示手型 */
            transition: color 0.2s; /* 颜色过渡效果 */
        }

        .content-desc:hover {
            color: #2c3e50; /* 鼠标悬停时颜色加深 */
            text-decoration: underline; /* 下划线提示可点击 */
        }

        /* 滚动条美化 */
        .content-frame::-webkit-scrollbar {
            width: 6px; /* 滚动条宽度 */
        }
        .content-frame::-webkit-scrollbar-track {
            background: #f5f5f5; /* 滚动条轨道背景 */
            border-radius: 3px;
        }
        .content-frame::-webkit-scrollbar-thumb {
            background: #ddd; /* 滚动条滑块颜色 */
            border-radius: 3px;
        }
        .content-frame::-webkit-scrollbar-thumb:hover {
            background: #ccc; /* 鼠标悬浮时滑块颜色 */
        }

        /* 模态框样式 - 用于显示详细内容 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            z-index: 1000; /* 确保在最上层 */
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: white;
            padding: 24px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh; /* 最大高度为视口的80% */
            overflow-y: auto; /* 内容过多时可滚动 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            position: relative;
        }

        .modal-title {
            font-size: 20px;
            color: #333;
            margin-top: 0;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #eee;
        }

        .modal-body {
            font-size: 16px;
            line-height: 1.8;
            color: #555;
        }

        /* 关闭按钮 */
        .close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 20px;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
            background: none;
            border: none;
            padding: 0 8px;
        }

        .close-btn:hover {
            color: #333;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .modal.show {
            display: flex;
        }

        .modal.show .modal-content {
            animation: fadeIn 0.3s ease-out;
        }

/* 动画效果 */
.dibuty{
    width: 100%
    height:200px;
    margin-left: 40px;
}