:root {
  /* 字体大小 */
  --font-size-h1: 2.375rem;  /* 38px */
  --font-size-h2: 2rem;      /* 32px */
  --font-size-h3: 1.5rem;    /* 24px */
  --font-size-h4: 1.25rem;   /* 20px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-xs: 0.8125rem; /* 13px */
  
  /* 字体家族 */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* 主色调 - 绿色系 */
  --green-50: #e8f8f4;
  --green-100: #c7f0e5;
  --green-200: #a3e7d4;
  --green-300: #7edec3;
  --green-400: #62d8b6;
  --green-500: #46d2a9;
  --green-600: #3fbd97; /* 您提供的主色 rgb(43, 189, 147) */
  --green-700: #37a885;
  --green-800: #2f9373;
  --green-900: #256d56;

  /* 白色与中性色系 */
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* 功能语义色 */
  --primary: var(--green-600);
  --primary-light: var(--green-400);
  --primary-dark: var(--green-800);
  
  --secondary: var(--gray-600);
  --background: var(--white);
  --surface: var(--gray-50);
  --border: var(--gray-200);
  
  /* 文本颜色 */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-on-primary: var(--white);

  /* 状态色 */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;

  /* 阴影 */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
  
  /* 圆角半径 - 转换为rem */
    --radius-xs: 0.125rem;   /* 4px */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */

  /* 间距系统 - 新增 */
  --space-mixs: 0.125rem;    /* 4px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-10: 0.75rem;
  --space-md: 1rem;       /* 16px */
  --space-20: 1.25rem;
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    list-style: none;
    text-decoration: none;
     line-height: 1.5;
}


html {
    font-size: 16px;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%; /* 防止iOS横屏时字体放大 */

}




/* 应用样式 */
h1 { font-size: var(--font-size-h1); font-family: var(--font-heading);}
h2 { font-size: var(--font-size-h2); font-family: var(--font-heading);}
h3 { font-size: var(--font-size-h3); font-family: var(--font-heading);}
h4 { font-size: var(--font-size-h4); font-family: var(--font-heading);}

.hidden{
    display: none!important;
}

body {
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black
}

a:hover {
    text-decoration: none;
    color: black;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flex-container {
    display: flex;
    gap: 20px;
    padding: 10px;
}

.flex-container.grid {
    display: grid;
    gap: 20px;
}

.flex-container .list-item {
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #eee;
    transition: all 0.3s;
    font-weight: bold;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flex-container .list-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-color: #2cbc7f;
    color: #2cbc7f;
}

.flex-container.grid2 {
    grid-template-columns: repeat(2, 1fr);
}

.flex-container.grid3 {
    grid-template-columns: repeat(3, 1fr);
}

.flex-container.grid4 {
    grid-template-columns: repeat(4, 1fr);
}

.flex-container.grid1 {
    grid-template-columns: repeat(1, 1fr);
}

.flex-container.grid5 {
    grid-template-columns: repeat(5, 1fr);
}

.flex-container.grid6 {
    grid-template-columns: repeat(6, 1fr);
}

.flex-container.grid-row {
    flex-direction: row;
}

.flex-container.grid-column {
    flex-direction: column;
}

.flex-container .flex1 {
    overflow: hidden;
    flex: 1;
}

.flex-container .flex2 {
    overflow: hidden;
    flex: 2;
}

.flex-container .flex3 {
    overflow: hidden;
    flex: 3;
}

.flex-container .flex4 {
    overflow: hidden;
    flex: 4;
}

.flex-container .flex5 {
    overflow: hidden;
    flex: 5;
}

.flex-container .flex6 {
    overflow: hidden;
    flex: 6;
}

.widget-title-img-h100 {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.widget-title-img-h120 {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.badge-group a,
.badge-group span {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    margin: 0 5px 5px 0;
}

.badge-group-large a,
.badge-group-large span {
    font-size: 85%;
    padding: 0.5rem;
}

.badge-group a:empty,
.badge-group span:empty {
    display: none;
}

.badge-group.chinese-cyan a,
.badge-group.chinese-cyan span {
    color: #fff;
    background-color: #008b8b;
}

.badge-group.chinese-green-light a,
.badge-group.chinese-green-light span {
    color: #2e8b57;
    background-color: #e0f0e0;
}

.badge-group.chinese-bamboo a,
.badge-group.chinese-bamboo span {
    color: #fff;
    background-color: #548b54;
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 125%;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.badge:empty {
    display: none;
}

.badge-primary {
    color: #fff;
    background-color: #007bff;
}

.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.badge-danger {
    color: #fff;
    background-color: #dc3545;
}

.badge-warning {
    color: #212529;
    background-color: #ffc107;
}

.badge-info {
    color: #fff;
    background-color: #17a2b8;
}

.badge-light {
    color: #212529;
    background-color: #f8f9fa;
}

.badge-dark {
    color: #fff;
    background-color: #343a40;
}

.badge-primary-light {
    color: #004085;
    background-color: #cce5ff;
}

.badge-success-light {
    color: #155724;
    background-color: #d4edda;
}

.badge-danger-light {
    color: #721c24;
    background-color: #f8d7da;
}

.badge-warning-light {
    color: #856404;
    background-color: #fff3cd;
}

.badge-rounded {
    border-radius: 10rem;
}

.badge-sm {
    font-size: 65%;
    padding: 0.2em 0.3em;
}

.badge-lg {
    font-size: 85%;
    padding: 0.35em 0.6em;
}

.badge-outline-primary {
    color: #007bff;
    background-color: transparent;
    border: 1px solid #007bff;
}

.badge-outline-success {
    color: #28a745;
    background-color: transparent;
    border: 1px solid #28a745;
}

.badge-outline-danger {
    color: #dc3545;
    background-color: transparent;
    border: 1px solid #dc3545;
}

.badge-chinese-green {
    color: #fff;
    background-color: #2e8b57;
}

.badge-chinese-emerald {
    color: #fff;
    background-color: #00a86b;
}

.badge-chinese-jade {
    color: #fff;
    background-color: #3eb489;
}

.badge-chinese-bamboo {
    color: #fff;
    background-color: #548b54;
}

.badge-chinese-tea {
    color: #fff;
    background-color: #996600;
}

.badge-chinese-blue {
    color: #fff;
    background-color: #003366;
}

.badge-chinese-royal-blue {
    color: #fff;
    background-color: #104e8b;
}

.badge-chinese-sky-blue {
    color: #fff;
    background-color: #87ceeb;
}

.badge-chinese-indigo {
    color: #fff;
    background-color: #4b0082;
}

.badge-chinese-cyan {
    color: #fff;
    background-color: #008b8b;
}

.badge-chinese-red {
    color: #fff;
    background-color: #dc143c;
}

.badge-chinese-crimson {
    color: #fff;
    background-color: #b22222;
}

.badge-chinese-vermilion {
    color: #fff;
    background-color: #ff4500;
}

.badge-chinese-rose {
    color: #fff;
    background-color: #ff69b4;
}

.badge-chinese-coral {
    color: #fff;
    background-color: #ff7f50;
}

.badge-chinese-green-light {
    color: #2e8b57;
    background-color: #e0f0e0;
}

.badge-chinese-blue-light {
    color: #003366;
    background-color: #d0e0f0;
}

.badge-chinese-red-light {
    color: #dc143c;
    background-color: #f0e0e0;
}

.badge-chinese-green-outline {
    color: #2e8b57;
    background-color: transparent;
    border: 1px solid #2e8b57;
}

.badge-chinese-blue-outline {
    color: #003366;
    background-color: transparent;
    border: 1px solid #003366;
}

.badge-chinese-red-outline {
    color: #dc143c;
    background-color: transparent;
    border: 1px solid #dc143c;
}

.badge-gradient-green {
    color: #fff;
    background: linear-gradient(135deg, #2e8b57, #3eb489);
}

.badge-gradient-blue {
    color: #fff;
    background: linear-gradient(135deg, #003366, #104e8b);
}

.badge-gradient-red {
    color: #fff;
    background: linear-gradient(135deg, #dc143c, #ff4500);
}








.margin_top_1 {
    margin-top: 1rem !important;
}

.margin-bottom—1 {
    margin-bottom: 1rem !important;
}

.gap15 {
    gap: 20px !important;
}

.gap10 {
    gap: 10px !important;
}

.gap5 {
    gap: 5px !important;
}

.gap6 {
    gap: 6px !important;
}

.gap8 {
    gap: 8px !important;
}

img {
    background-color: lightgray;
}


/* 网格布局 */
.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

}

.news-grid-1 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;

}

/* 网格布局 */
.news-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;

    padding: 0;
    list-style: none;
}

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

    padding: 0;
    list-style: none;
}

.news-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    padding: 0;
    list-style: none;
}

.news-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;

    padding: 0;
    list-style: none;
}

.news-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;

    padding: 0;
    list-style: none;
}


.news-grid .news-item {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-grid .news-item a:hover {
    color: #3291f9;
    transition: all 0.2s;
}

/* 水平新闻列表 */

.news-grid .news-item.horizontal {
    display: flex;
    align-items: center;
    height: 97px;
    border: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

.news-grid .news-item.horizontal::before {
    background-color: transparent;
}

.news-item.horizontal .news-content {
    flex: 1;
    padding-left: 15px;
    overflow: hidden;
}

.padding-w15 {
    padding-left: 15px;
    padding-right: 15px;
}

.news-item.horizontal .news-img.horizontal {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}


/* 2行8个的二级频道链接样式 */
.news-grid-8 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0;
    list-style: none;
}

.news-grid-8 .news-item {
    position: relative;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    font-weight: normal;
    text-align: center;
    border-radius: 6px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.news-grid-8 .news-item:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news-grid-8 .news-item a {
    color: #495057;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-grid-8 .news-item a:hover {
    color: #2cbc7f;
}