/* --- 基础重置 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* --- 通用工具类 --- */
        .container {
            width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .section-title {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #000;
            margin-bottom: 10px;
            position: relative;
        }

        /* 标题下方的蓝色短横线 */
        .section-title::after {
            content: '';
            display: block;
            width: 40px;
            height: 4px;
            background-color: #4facfe;
            margin: 10px auto 40px;
        }

        .btn-more {
            display: block;
            width: 120px;
            margin: 30px auto 0;
            padding: 10px 0;
            text-align: center;
            background: #3784ff;
            color: white !important;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

        /* 图片占位符样式 */
        .img-placeholder {
            background-color: #e0e6ed;
        }

        /* --- 1. 顶部导航 (Nav) --- */
        header {
            background-color: transparent;
            height: 70px;
            display: flex;
            align-items: center;
        }

        .nav-inner {
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .logo {
            width: 310px;
            height: 52px;
            background-image: url(/portal/whdxh/img/logo-c7cb4ef6f6329c3a19da7f2ff1971998.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 100px;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            font-size: 16px;
        }

        .nav-links li:hover { color: #0044cc; cursor: pointer; }

        /* --- 2. Banner 区域 --- */
        .hero {
            height: 400px;
            background-image: url(/portal/whdxh/img/banner-498891893bbb01b637aa5fd502af97fc.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* --- 3. 数据统计 (Stats) --- */
        .stats-bar {
            background-image: url(/portal/whdxh/img/static-bg-5dad768b65b15224567eaee70a46b882.png);
            background-position: center;
            background-repeat: no-repeat;
            height: 273px;
            display: flex;
            align-items: center;
        }

        .stats-grid {
            display: flex;
            justify-content: center;
            gap: 100px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .stat-item:nth-child(1) .stat-icon {
            background-image: url(/portal/whdxh/img/static-icon-1-d5abf8249cf43b0ba514763a6823d669.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .stat-item:nth-child(2) .stat-icon {
            background-image: url(/portal/whdxh/img/static-icon-2-7680851797bf0bbca931334f362872e1.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .stat-item:nth-child(3) .stat-icon {
            background-image: url(/portal/whdxh/img/static-icon-3-93da2409922241dde48a9ebb571f691e.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .stat-icon { width: 87px; height: 90px;  }

        .stat-text strong {
            font-size: 24px;
            color: #3784ff;
            display: block;
        }

        .stat-text span { font-size: 14px; color: #3784ff; }

        /* --- 4. 核心功能区 (Deep Blue Section) --- */
        .features-hub {
            background: url(/portal/whdxh/img/areabg-8cb49aa56952b2be78eb6f42be31cb41.png) no-repeat center;
            color: #fff;
            text-align: center;
            height: 760px;
        }

        /* 模拟那个圆环结构 */
        .hub-container {
            position: relative;
            height: 760px;
            background: url(/portal/whdxh/img/area-center-6472ed18acca490e6e8db5e29da7e9e5.png) no-repeat center;
        }

        .hub-center {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            z-index: 2;
        }

        .hub-item {
            position: absolute;
            text-align: center;
            font-size: 14px;
        }
        .hub-item p{
            height: 76px;
            line-height: 76px;
             background: url(/portal/whdxh/img/icon-bg-0be7893f8469dbf0d1ab0aad22c5b72d.png) no-repeat center;
             position: relative;
                top: -66px;
            color:#fff;
        }

        .hub-item-img { width: 261px; height: 315px; margin: 0 auto 10px;}

        /* 简单的绝对定位模拟原图布局 */
        .pos-1 {
            top: 50px;
            left: -51px;
        }
        .pos-1 .hub-item-img{background: url(/portal/whdxh/img/icon-1-e6d6cd5a3f64a9b3c567ae8253dfb5e7.png) no-repeat center;}
        .pos-2 { top: 393px; left: 102px; }
        .pos-2 .hub-item-img{background: url(/portal/whdxh/img/icon-2-4bddd26955d7c50cb6dc8859b8d4cee6.png) no-repeat center;}
        .pos-3 { top: 45px; right: 94px; }
        .pos-3 .hub-item-img{background: url(/portal/whdxh/img/icon-3-9d5d081af7ead86c794c017be4d1931a.png) no-repeat center;}
        .pos-4 { top: 373px; right: -58px; }
        .pos-4 .hub-item-img{background: url(/portal/whdxh/img/icon-4-ebdf84c98ac6f1f032527de9142b9645.png) no-repeat center;}

        /* --- 5. 最新课程 (Grid 3列) --- */
        .courses {
            height: 695px;
            padding: 60px 0;
            background: url(/portal/whdxh/img/course-bg-a1c77c09baf176c180329fbe03b2b287.png) #fff no-repeat bottom right;
        }

         .courses .section-title{
            color:#fff;
         }

        .courses .container{
             background: url(/portal/whdxh/img/course-center-bg-bddc5a6254291ccd4f5d9a84eda1ff4c.png) no-repeat top center;
             padding: 37px 33px 0;

        }

        .course-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .course-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }

        .course-card:hover { transform: translateY(-5px); }

        .course-thumb { width: 100%; height: 230px; }
         .course-thumb img{ width: 100%; height: 100%;}

        .course-info { padding: 20px; }
        .course-title { font-weight: bold; margin-bottom: 8px; }
        .course-meta { font-size: 12px; color: #888; }

        /* --- 6. 资源中心 (Grid 2列) --- */

        .resources {
            padding: 60px 0;
            background:url(/portal/whdxh/img/res-bg-8fb4786c33d748f1cfbe6386518f9459.png) no-repeat center;
        }
        .resource-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .res-card {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            gap: 20px;
            /* align-items: center; */
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            position: relative ;
            height: 180px;
            margin-bottom: 40px;
        }

        .res-thumb {
            position: absolute;
            width: 280px;
            height: 204px;
            flex-shrink: 0;
            top: -40px;
            background: url(/portal/whdxh/img/resimgbg-223022b42f36a4f8d99da632bec588c7.png) no-repeat center;
         }
        .res-thumb img{
            width: 263px;
            height: 173px;
            border-radius: 8px;
            position: absolute;
            left: 0;
            top: 15px
        }

        .res-info { flex-grow: 1; margin-left: 300px; }
        .res-title { font-weight: bold; margin-bottom: 10px; }
        .res-stars { color: #f5a623; font-size: 14px; margin-bottom: 5px; }
        .res-type { font-size: 12px; color: #999; }

        .arrow-icon {
            color: #4facfe;
            font-weight: bold;
            float: right;
            width: 32px;
            height: 32px;
            background: url(/portal/whdxh/img/res-link-4e1e9b4e4c14dadb723e70a44d3c0ad0.png) no-repeat;
            cursor: pointer;

         }

        /* --- 7. 新闻资讯 (Grid 2列) --- */
        .news { padding: 60px 0; background-color: #fff; }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .news-item {
            display: flex;
            gap: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
            margin-bottom: 10px;
        }

        .date-box {
            width: 70px;
            height: 70px;
            background-color: #f7f9fc;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .date-box.active { background-color: #4facfe; color: white; } /* 只有第一个是蓝色 */

        .date-day { font-size: 20px; font-weight: bold; line-height: 1.2; }
        .date-year { font-size: 12px; }

        .news-content h4 {
            font-size: 16px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .news-content p {
            font-size: 12px;
            color: #666;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- Footer --- */
        footer {
            height: 120px;
            background:url(/portal/whdxh/img/footer-bgpng-0bf91158178ad229fbf07b1252a8586f.png) no-repeat center;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
        }

        .footer-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 120px;
        }

        .footer-left {
            text-align: left;
            flex: 1;
        }

        .footer-left p {
            margin-bottom: 5px;
        }

        .footer-center {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
        }

        .footer-logo {
            width: 358px;
            height: 60px;
            background: url(/portal/whdxh/img/footer-logo-377726c9c23d636188a428c576e303be.png) no-repeat center;
        }

        .footer-right {
            text-align: right;
            flex: 1;
        }

        .footer-right p {
            margin-bottom: 5px;
        }