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

        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #fff;
            color: #333;
            /* 禁止横向滚动，因为不需要自适应 */
            overflow-x: hidden; 
        }
         /* 顶部装饰条 */
        .top-bar {
            height: 60px;
            background-color: #dbe4ff;
            width: 100%;
        }

        .banner1{
            background: url(../images/banner1.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }
        .banner2{
            background: url(../images/banner2.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }
        .banner3{
            background: url(../images/banner3.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }
        .banner4{
            background: url(../images/banner4.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }
        .banner5{
            background: url(../images/banner5.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }
        .banner6{
            background: url(../images/banner6.png) no-repeat center center;
            width:100%;
            height:300px;
            background-size: cover;
        }


        /* 主容器 */
        .container {
            width: 1200px;
            margin: 0 auto;
            padding-bottom: 50px;
            background: #fff;
            min-height: 600px;
            /*box-shadow: 0 0 20px rgba(0,0,0,0.05);*/
        }

        /* 导航按钮区域 */
        .nav-tabs {
            display: flex;
            justify-content: center;
            margin-top: 50px;
            margin-bottom: 40px;
            position: relative;
            z-index: 10;
        }

        .nav-btn {
            padding: 10px 30px;
            margin: 0 10px;
            border-radius: 20px;
            border: 1px solid #dcebf5;
            background: #fff;
            color: #666;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .nav-btn:hover {
            background: #f0f8ff;
            color: #2196F3;
        }

        .nav-btn.active {
            background: #2196F3;
            color: #fff;
            border-color: #2196F3;
            box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
        }

        /* 内容区域 */
        .content-panel {
            display: none; /* 默认隐藏 */
            /*padding: 0 40px;*/
            animation: fadeIn 0.5s ease;
        }

        .content-panel.active {
            display: block; /* 激活时显示 */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 卡片网格区域 */
        .card-grid {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .card {
            width: 32%;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s;
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        .card-img-placeholder {
            width: 100%;
            height: 215px;
            overflow: hidden;
        }
        .card-img-placeholder img{
            width: 384px;
            height: 215px;
            /*background-image: url(images/01.jpg);*/
            background-size: cover; 
            background-position: center;
        }

        .card-info {
            padding: 20px;
        }

        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.5;
            height: 48px; /* 限制高度 */
            overflow: hidden;
        }

        .card-author {
            font-size: 12px;
            color: #999;
        }

        /* 列表区域 */
        .list-section {
            border-top: 1px solid #eee;
            padding-top: 30px;
        }

        .list-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 4px;
            transition: background 0.2s;
        }
        .list-item a{
            text-decoration: none;
        }

        .list-item:hover {
            background: #f9f9f9;
        }


        .list-icon {
            width: 24px;
            height: 24px;
            background: #4fc3f7;
            border-radius: 4px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            flex-shrink: 0;
        }
        .list-icon img{
            width: 35px;
        }

        .list-text {
            flex: 1;
            font-size: 16px;
            color: #333;
        }
        
        .list-text span {
            color: #666;
            margin-left: 20px;
            font-size: 12px;
        }
        .footer{
            width: 100%;
            height: 200px;
            background: #dbe4ff;
       }
       .footer ul{
        width: 1200px;
        margin:0 auto;
       }
       .footer ul li{
        list-style: none;
        float: left;
        width: 600px;
        height: 200px;
        color: #333;
        font: 30px;
        text-align: center;
       }
       .footer ul li p{
        height: 35px;
        line-height: 35px;
       }
       .footer ul li img{
        width: 130px;
        height: 130px;
       }