/* ============================================================
  

        /* 强制页脚不遮挡侧边栏 */
        .footer {
        position: relative !important;
        z-index: 1 !important;
        }
        /* ========== 导航菜单 ========== */
        .main-nav {
        background-color: #2f5db8;
        border-bottom: 3px solid #0066CC;
        width: 100%;
        position: relative;
        z-index: 998;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center !important;
        }
        .nav-container {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center !important;
        }
        .nav-menu {
        display: flex;
        align-items: center;
        justify-content: center !important;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0;
        }
        .nav-menu .nav-item {
        margin: 0 20px;
        position: relative;
        }
        .nav-menu .nav-item a {
        color: #ffffff;
        font-size: 20px;
        padding: 0 10px;
        line-height: 60px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s;
        display: block;
        position: relative;
        }
        .nav-menu .nav-item a::after {
            content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #fff, #ffd700, #fff);
    background-size: 200% 100%;
    transition: width 0.3s;
        }
        .nav-menu .nav-item a:hover::after,
        .nav-menu .nav-item.active a::after {
        width: 100%;
        animation:流光 1.5s linear infinite;
        }
        @keyframes 流光 {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
        .nav-menu .nav-item a:hover,
        .nav-menu .nav-item.active a {
        background-color: #0066CC;
        }
        .mobile-menu-btn {
        display: none;
        color: white;
        font-size: 28px;
        cursor: pointer;
        padding: 8px 12px;
        background: rgba(255,255,255,0.1);
        border-radius: 6px;
        border: none;
        transition: all 0.3s;
        }
        .mobile-menu-btn:hover {
        background: rgba(255,255,255,0.2);
        }
        .mobile-nav-dropdown {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #2f5db8;
        padding: 10px 0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        z-index: 999;
        border-top: 2px solid #0066CC;
        }
        .mobile-nav-dropdown.open {
        display: block;
        }
        .mobile-nav-dropdown a {
        display: block;
        color: #fff;
        padding: 12px 24px;
        font-size: 18px;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        transition: background 0.3s;
        }
        .mobile-nav-dropdown a:hover {
        background: #0066CC;
        }
        .mobile-nav-dropdown a:last-child {
        border-bottom: none;
        }
        @media (max-width: 992px) {
        .nav-menu { display: none; }
        .mobile-menu-btn { display: block; }
        .nav-container { padding: 0 15px; justify-content: flex-start !important; }
        }
        @media (max-width: 768px) {
        .main-nav { height: 54px; }
        .mobile-nav-dropdown a { padding: 10px 20px; font-size: 16px; }
        .mobile-menu-btn { font-size: 24px; padding: 6px 10px; }
        }
        @media (max-width: 480px) {
        .main-nav { height: 48px; }
        .mobile-nav-dropdown a { padding: 8px 16px; font-size: 15px; }
        .mobile-menu-btn { font-size: 20px; padding: 4px 8px; }
        }
        /* ========== 核心修复：让左右两列等高 ========== */
        .layui-row.layui-col-space20 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        }
        .layui-row.layui-col-space20 > [class*="layui-col-"] {
        display: flex !important;
        flex-direction: column !important;
        }
        .layui-col-md5 .card-box {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        }
        .layui-col-md5 .card-top {
        flex-shrink: 0 !important;
        min-height: 300px !important;
        border-radius: 10px !important;
        background-size: 100% !important;
        background-position: center !important;
        }
        .layui-col-md5 .card-bottom {
        flex: 1 !important;
        display: flex !important;
        align-items: stretch !important;
        padding-top: 12px !important;
        padding-bottom: 0 !important;
        }
        .layui-col-md7 .card-box {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        }
        .layui-col-md7 .card-bottom {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        padding: 10px 0 !important;
        }
        .layui-col-md7 .card-bottom .layui-row {
        width: 100% !important;
        }
        /* ========== service-station ========== */
        .service-station {
        background: #fff;
        border-radius: 12px;
        padding: 18px 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid #eef2f8;
        width: 100%;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        }
        .service-station-title {
        font-size: 17px;
        font-weight: 600;
        color: #1a2a4a;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        }
        .service-station-title i {
        color: #1886F7;
        font-size: 18px;
        }
        .service-station-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
        }
        .service-station-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 14px;
        background: #f0f7ff;
        color: #1886F7;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #e0edff;
        transition: all 0.3s;
        }
        .service-station-tag:hover {
        background: #1886F7;
        color: #fff;
        border-color: #1886F7;
        transform: translateY(-2px);
        }
        .service-station-tag i {
        font-size: 12px;
        }
        .service-station-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 0;
        background: #1886F7;
        color: #fff;
        border: none;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
        }
        .service-station-btn:hover {
        background: #0F70E0;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(24,134,247,0.3);
        }
        .service-station-divider {
        height: 1px;
        background: #eef2f8;
        margin: 12px 0;
        }
        .service-station-phone {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        }
        .service-station-phone-info {
        display: flex;
        align-items: center;
        gap: 12px;
        }
        .service-station-phone-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e8f4fd;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }
        .service-station-phone-icon i {
        font-size: 18px;
        color: #1886F7;
        }
        .service-station-phone-number {
        font-size: 18px;
        font-weight: 600;
        color: #1a2a4a;
        }
        .service-station-phone-label {
        font-size: 13px;
        color: #8895aa;
        }
        .service-station-phone-btn {
        padding: 7px 24px;
        background: #1886F7;
        color: #fff;
        border: none;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
        white-space: nowrap;
        }
        .service-station-phone-btn:hover {
        background: #0F70E0;
        transform: translateY(-2px);
        }
        /* ========== 头条资讯 - 完全居中 ========== */
        .main-headlines {
        background-color: #f5f7fa;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        overflow: hidden;
        padding: 10px 0;
        }
        .main-headlines-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center !important;
        border-bottom: 2px solid #2f5db7;
        }
        .headline-carousel {
        position: relative;
        overflow: hidden;
        min-height: 100px;
        /*padding: 6px 0;*/
        text-align: center !important;
        }
        .carousel-track {
        text-align: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        }
        .carousel-slide {
        display: none !important;
        width: 100%;
        /*padding: 6px 0;*/
        text-align: center !important;
        }
        .carousel-slide.active {
        display: block !important;
        text-align: center !important;
        animation: fadeSlide 0.5s ease;
        }
        @keyframes fadeSlide {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
        }
        /* ★★★ 关键：列表 inline-block 居中，内容左对齐 ★★★ */
        .main-headline-list {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
        max-width: 88% !important;
        width: auto !important;
        }
        /* ===== 第一条资讯：居中 + 大字体 ===== */
        .main-headline-featured {
        text-align: center !important;          /* 整体居中 */
    /*    margin-bottom: 10px;
        padding-bottom: 10px;*/
        border-bottom: 2px solid #dce3ed;       /* 加粗分割线，更明显 */
        }
        .main-headline-featured a {
        /*font-size: 24px !important;             /* 字体放大 */*/
        font-weight: 700;
        color: #003366;
        text-decoration: none;
        display: inline-flex !important;        /* inline-flex 让内容居中且换行友好 */
        align-items: center;
        justify-content: center;                /* 水平居中 */
        gap: 12px;
        flex-wrap: wrap;
        /*padding: 6px 0;*/
        text-align: center !important;
        line-height: 1.4;
        }
        .main-headline-featured a:hover {
        color: #0066CC;
        }
        /* 第一条里的标签也放大 */
        .main-headline-featured .news-tag {
        font-size: 16px !important;
        padding: 4px 16px !important;
        }
        /* 下面两条：正常样式，左对齐 */
        .main-headline-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 30px;
        padding: 4px 0;
        text-align: left !important;
        }
        .main-headline-item {
        display: flex;
        align-items: center;
        padding: 3px 0;
        min-height: 30px;
        overflow: hidden;
        padding-left: 16px;
        position: relative;
        text-align: left !important;
        }
        .main-headline-item::before {
 /*       content: "•";
        position: absolute;
        left: 0;
        color: #0066CC;
        font-weight: bold;
        font-size: 16px;*/
        }
        .main-headline-item a {
        color: #333;
        text-decoration: none;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        }
        .main-headline-item a:hover {
        color: #0066CC;
        text-decoration: underline;
        }
        .news-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 10px;
        margin-right: 8px;
        font-size: 13px;
        border-radius: 4px;
        color: white;
        line-height: 1.6;
        flex-shrink: 0;
        white-space: nowrap;
        vertical-align: middle;
        font-weight: 500;
        }
        .news-tag.warning {
        background-color: #ff4d4f;
        }
        .news-tag.case {
        background-color: #1890ff;
        }
        .headline-carousel .carousel-controls {
        display: none;
        }
        .headline-carousel .carousel-indicators {
        display: none;
        justify-content: center;
        gap: 12px;
        padding: 10px 0 4px;
        }
        .headline-carousel .carousel-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ddd;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
        padding: 0;
        }
        .headline-carousel .carousel-indicator.active {
        background-color: #0066CC;
        transform: scale(1.3);
        }
        /* 响应式 - 平板 */
        @media (max-width: 768px) {
        .main-headlines-container {
        padding: 0 12px;
        }
        .main-headline-list {
        max-width: 100% !important;
        display: block !important;
        }
        .carousel-slide.active {
        text-align: left !important;
        }
        .main-headline-featured a {
        font-size: 20px !important;          /* 平板稍小 */
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        }
        .main-headline-featured a .news-tag {
        flex-shrink: 0;
        font-size: 12px !important;
        padding: 2px 8px !important;
        }
        .news-tag.warning{
            flex-shrink: 0;
        font-size: 12px !important;
        padding: 2px 8px !important;
        }
        .main-headline-items {
        grid-template-columns: 1fr;
        gap: 2px;
        }
        .main-headline-item {
        min-height: 26px;
        padding: 2px 0 2px 14px;
        }
        .main-headline-item a {
        font-size: 13px;
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        }
        .news-tag {
        font-size: 11px;
        padding: 1px 8px;
        margin-right: 6px;
        }
        .headline-carousel {
        min-height: 90px;
        }
        .headline-carousel .carousel-indicator {
        width: 10px;
        height: 10px;
        }
        }
        /* 响应式 - 手机 */
        @media (max-width: 480px) {
        .main-headlines-container {
        padding: 0 8px;
        min-height: 120px;
        }
        .main-headline-list {
        max-width: 100% !important;
        display: block !important;
        }
        .carousel-slide.active {
        text-align: left !important;
        }
        .main-headline-featured a {
        font-size: 17px !important;          /* 手机再小一点 */
        -webkit-line-clamp: 2;
        gap: 6px;
        justify-content: center;
        }
        .main-headline-featured a .news-tag {
        font-size: 12px !important;
        padding: 2px 10px !important;
        margin-right: 4px;
        }
        .main-headline-item a {
        font-size: 12px;
        -webkit-line-clamp: 1;
        }
        .main-headline-items {
        gap: 1px;
        }
        .headline-carousel {
        min-height: 80px;
        padding: 4px 0;
        }
        .news-tag {
        font-size: 10px;
        padding: 1px 6px;
        margin-right: 4px;
        }
        .headline-carousel .carousel-indicator {
        width: 8px;
        height: 8px;
        }
        .headline-carousel .carousel-indicators {
        gap: 8px;
        padding: 6px 0 2px;
        }
        }
        /* ========== 友情链接 ========== */
        .friend-links-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 0;
        justify-content: center;
        }
        .friend-link-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background: #fff;
        border: 1px solid #e8edf4;
        border-radius: 8px;
        text-decoration: none;
        color: #333;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        min-width: 130px;
        }
        .friend-link-card:hover {
        border-color: #1886F7;
        box-shadow: 0 4px 16px rgba(24,134,247,0.12);
        transform: translateY(-3px);
        color: #1886F7;
        }
        .friend-link-card .link-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f0f7ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #1886F7;
        flex-shrink: 0;
        }
        .friend-link-card .link-name { font-size: 14px; font-weight: 500; flex: 1; }
        .friend-link-card .link-arrow { color: #ccc; font-size: 13px; transition: all 0.3s; }
        .friend-link-card:hover .link-arrow { color: #1886F7; transform: translateX(4px); }
        .divider-line {
        width: 60px;
        height: 3px;
        background: #1886F7;
        margin: 8px auto 20px;
        border-radius: 3px;
        }
        @media (max-width: 768px) {
        .friend-link-card { min-width: 110px; padding: 8px 12px; }
        .friend-link-card .link-name { font-size: 13px; }
        }
        @media (max-width: 480px) {
        .friend-links-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        }
        .friend-link-card { min-width: unset; padding: 6px 10px; }
        .friend-link-card .link-icon { width: 26px; height: 26px; font-size: 12px; }
        .friend-link-card .link-name { font-size: 11px; }
        .friend-link-card .link-arrow { display: none; }
        }
        /* ========== 侧边栏快捷方式 ========== */
        .fixed-shortcuts {
        position: fixed !important;
        right: 24px !important;
        bottom: 60px !important;
        z-index: 999 !important;
        display: block !important;
        }
        .fixed-shortcuts ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        }
        .fixed-shortcuts li {
        display: block !important;
        margin: 0 !important;
        }
        .fixed-shortcuts a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 72px !important;
        height: 72px !important;
        padding: 5px !important;
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
        color: #333 !important;
        text-decoration: none !important;
        border: 1px solid #e8ecf1 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        position: relative !important;
        }
        .fixed-shortcuts a i {
        font-size: 24px !important;
        margin-bottom: 22px !important;
        transition: all 0.3s !important;
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        color: #333 !important;
        }
        .fixed-shortcuts a span {
        position: absolute !important;
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        color: #333 !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        text-align: center !important;
        white-space: nowrap !important;
        display: block !important;
        line-height: 1.2 !important;
        background: transparent !important;
        }
        .fixed-shortcuts a:hover {
        background-color: #1a73e8 !important;
        color: #fff !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(26, 115, 232, 0.25) !important;
        border-color: #1a73e8 !important;
        }
        .fixed-shortcuts a:hover i {
        color: #fff !important;
        }
        .fixed-shortcuts a:hover span {
        color: #fff !important;
        }
        .fixed-shortcuts .back-to-top a {
        background: #fff !important;
        color: #333 !important;
        border-color: #e8ecf1 !important;
        }
        .fixed-shortcuts .back-to-top a i {
        color: #333 !important;
        }
        .fixed-shortcuts .back-to-top a span {
        color: #333 !important;
        }
        .fixed-shortcuts .back-to-top a:hover {
        background-color: #1a73e8 !important;
        color: #fff !important;
        border-color: #1a73e8 !important;
        }
        .fixed-shortcuts .back-to-top a:hover i {
        color: #fff !important;
        }
        .fixed-shortcuts .back-to-top a:hover span {
        color: #fff !important;
        }
        .back-to-top {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        }
        .back-to-top.show {
        opacity: 1 !important;
        visibility: visible !important;
        }
        .footer {
        position: relative !important;
        z-index: 1 !important;
        }
        @media (max-width: 768px) {
        .fixed-shortcuts {
        right: 12px !important;
        bottom: 50px !important;
        }
        .fixed-shortcuts ul {
        gap: 10px !important;
        }
        .fixed-shortcuts a {
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        padding: 4px !important;
        }
        .fixed-shortcuts a i {
        font-size: 20px !important;
        margin-bottom: 18px !important;
        }
        .fixed-shortcuts a span {
        font-size: 11px !important;
        bottom: 6px !important;
        padding: 3px 6px !important;
        }
        }
        @media (max-width: 480px) {
        .fixed-shortcuts {
        right: 8px !important;
        bottom: 40px !important;
        }
        .fixed-shortcuts ul {
        gap: 6px !important;
        }
        .fixed-shortcuts a {
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        padding: 4px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10) !important;
        }
        .fixed-shortcuts a i {
        font-size: 18px !important;
        margin-bottom: 0 !important;
        }
        .fixed-shortcuts a span {
        display: none !important;
        }
        }
        /* ========== 响应式修复 ========== */
        @media (max-width: 992px) {
        .layui-col-md5 .card-top {
        background-size: 100% !important;
        flex-shrink: 0 !important;
        min-height: 425px !important;
        border-radius: 10px !important;
        background-size: 100% !important;
        background-position: center !important;
        }
        .layui-col-md5 {
        flex: 1 1 100% !important;
        width: 100% !important;
        }
        .service-station {
        padding: 14px 16px;
        }
        .service-station-tag {
        font-size: 12px;
        padding: 4px 12px;
        }
        }
        @media (max-width: 768px) {
        .layui-col-md5 .card-top {
        background-size: 100% !important;
        flex-shrink: 0 !important;
        min-height: 360px !important;
        border-radius: 10px !important;
        background-size: 100% !important;
        background-position: center !important;
        }
        .service-station-phone {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        }
        .service-station-phone-btn {
        width: 100%;
        text-align: center;
        padding: 8px 0;
        }
        .service-station-btn {
        font-size: 14px;
        padding: 8px 0;
        }
        .service-station-phone-number {
        font-size: 16px;
        }
        .service-station {
        padding: 12px 14px;
        }
        }
        /* ========== 政策解读 - 修复首次加载空白 ========== */
.policy-tab-content .tab-pane {
    display: none !important;
}
.policy-tab-content .tab-pane.active {
    display: block !important;
}

        /* ========== 轮播图控制按钮 - 两侧布局 ========== */
        .carousel-section {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }

        .carousel-section .carousel-controls {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            display: flex !important;
            justify-content: space-between;
            padding: 0 16px;
            pointer-events: none;
            z-index: 10;
            display: none !important;
        }

        .carousel-section .carousel-controls .carousel-control {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.50);
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            transition: all 0.3s ease;
            pointer-events: auto;
            backdrop-filter: blur(4px);
        }

        .carousel-section .carousel-controls .carousel-control:hover {
            background: rgba(24, 134, 247, 0.85);
            border-color: #1886F7;
            transform: scale(1.08);
            box-shadow: 0 4px 20px rgba(24, 134, 247, 0.35);
        }

        .carousel-section .carousel-indicators {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            display: flex !important;
            gap: 10px;
            z-index: 10;
        }

        .carousel-section .carousel-indicators .carousel-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            padding: 0;
        }

        .carousel-section .carousel-indicators .carousel-indicator.active {
            background: #1886F7;
            transform: scale(1.3);
            box-shadow: 0 0 12px rgba(24, 134, 247, 0.5);
        }

        /* 轮播图响应式调整 */
        @media (max-width: 768px) {
            .carousel-section .carousel-controls {
                padding: 0 10px;
            }
            .carousel-section .carousel-controls .carousel-control {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
            .carousel-section .carousel-indicators {
                bottom: 12px;
                gap: 8px;
            }
            .carousel-section .carousel-indicators .carousel-indicator {
                width: 8px;
                height: 8px;
            }
        }

        @media (max-width: 480px) {
            .carousel-section .carousel-controls {
                padding: 0 6px;
            }
            .carousel-section .carousel-controls .carousel-control {
                width: 30px;
                height: 30px;
                font-size: 14px;
            }
            .carousel-section .carousel-indicators {
                bottom: 8px;
                gap: 6px;
            }
            .carousel-section .carousel-indicators .carousel-indicator {
                width: 6px;
                height: 6px;
            }
        }/* 基础样式 - 政府网站风格 */
body {
font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
color: #333333;
background: linear-gradient(135deg, #f5f7fa 0%, #e8f0f8 100%);
margin: 0;
padding: 0;
line-height: 1.6;
scroll-behavior: smooth;
}
 顶部资讯 - 精致内敛流光效果（优化版）
   ============================================================ */
/* ============================================================
   顶部资讯 - 仅大标题蓝色流光效果
   ============================================================ */

/* ---------- 1. 头条区域底部边框 - 干净样式 ---------- */
.main-headlines-container {
    border-bottom: 2px solid #2f5db7;
    position: relative;
}

/* ---------- 2. 第一条资讯大标题 - 蓝色流光 ---------- */
.main-headline-featured a {
    font-size: 24px !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 0;
    text-align: center !important;
    line-height: 1.4;
    position: relative;
    background: linear-gradient(90deg, 
        #003366 0%, 
        #1a4d7a 25%, 
        #4a8fd8 50%, 
        #1a4d7a 75%, 
        #003366 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: textFlow 6s ease-in-out infinite;
    transition: none;
}

@keyframes textFlow {
    0% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.main-headline-featured a:hover {
    animation-duration: 2.5s;
}

/* ---------- 3. 第一条资讯底部分割线 - 干净样式 ---------- */
.main-headline-featured {
    position: relative;
    border-bottom: 2px solid #e8ecf1;
}

/* ---------- 4. 列表项标题 - 干净样式 ---------- */
.main-headline-item a {
    color: #333;
    text-decoration: none;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    transition: color 0.3s ease;
}

.main-headline-item a:hover {
    color: #0066CC;
    text-decoration: underline;
}

/* ---------- 5. 资讯标签 - 干净样式 ---------- */
.news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    margin-right: 8px;
    font-size: 13px;
    border-radius: 4px;
    color: white;
    line-height: 1.6;
    flex-shrink: 0;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 500;
}

.news-tag::before,
.news-tag::after {
    display: none !important;
}

.news-tag.case {
    background: #1890ff;
}

.news-tag.warning {
    background: #ff4d4f;
}

/* ---------- 6. 更多按钮 - 干净样式 ---------- */
.more-news {
    display: block;
    text-align: center;
    color: #0066CC;
    text-decoration: none;
    padding: 10px 0;
    border: 1px solid #dce3ed;
    border-radius: 6px;
    transition: all 0.3s;
    font-weight: 500;
}

.more-news:hover {
    background-color: #0066CC;
    color: white;
    border-color: #0066CC;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

/* ---------- 7. 轮播指示器 - 干净样式 ---------- */
.headline-carousel .carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d7e2;
    cursor: pointer;
    transition: all 0.4s ease;
    border: none;
    padding: 0;
}

.headline-carousel .carousel-indicator.active {
    background: #2f5db8;
    transform: scale(1.2);
}

/* ---------- 8. 响应式适配 ---------- */
@media (max-width: 768px) {
    .main-headline-featured a {
        font-size: 20px !important;
        background-size: 300% 100%;
    }
}

@media (max-width: 480px) {
    .main-headline-featured a {
        font-size: 17px !important;
        background-size: 400% 100%;
    }
}

/* 顶部导航区样式 */
.header {
position: relative;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.header.scrolled {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.header.scrolled .main-nav {
height: 60px;
}
.header.scrolled .layui-nav .layui-nav-item a {
line-height: 60px;
}
/* 头部背景区 */
.header-banner {
/*height: 300px;*/
height: 200px;
/*background-image: url('https://picsum.photos/id/180/1920/320');*/
background-image: url('../image/background.png');
/*background-size: cover;*/
background-size: 100% 100%;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
.header-banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background: linear-gradient(135deg, rgba(0, 51, 102, 0.88), rgba(0, 102, 204, 0.82));*/
/*background: linear-gradient(135deg, rgb(64 109 194 / 95%));*/
background: linear-gradient(135deg, rgb(64 109 194 / 55%));
}
/* 安全元素装饰 */
.security-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
z-index: 1;
}
.banner-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
padding: 0 20px;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.main-title {
font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
font-weight: 700;
font-size: 47px;
color: #ffffff;
/*margin: 0 0 15px 0;*/
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.main-title::after {
content: "";
position: absolute;
bottom: -8px;
left: 10%;
width: 80%;
height: 3px;
/*background-color: #4CAF50;*/
border-radius: 3px;
}
/* 新增副标题样式 - 专业护航·安全赋能·共建网络安全防线 */
.mission-statement {
font-size: 24px;
color: #ffffff;
margin: 0 0 30px 0;
padding: 12px 25px;
background-color: rgba(255, 255, 255, 0.12);
border-radius: 6px;
display: inline-block;
letter-spacing: 1.5px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
border-left: 4px solid #4CAF50;
animation: fadeIn 1.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.sub-title {
font-size: 20px;
color: #e6e6e6;
margin: 0 0 25px 0;
position: relative;
/*display: inline-block;*/
padding-left: 25px;
}
.sub-title::before {
content: "\f023";
font-family: "FontAwesome";
margin-right: 10px;
/* position: absolute;
left: 0;
top: 0;*/
color: #4CAF50;
}
/* 优化后的大搜索框样式 */
.big-search-container {
position: relative;
width: 100%;
max-width: 850px;
margin: 0 auto;
}
.big-search-box {
width: 100%;
height: 48px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
border-radius: 34px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background-color: white;
}
.big-search-box:focus-within {
box-shadow: 0 12px 40px rgba(0, 102, 204, 0.35);
transform: translateY(-3px) scale(1.01);
}
.big-search-box input {
width: 100%;
height: 100%;
padding: 0 25px 0 65px;
border-radius: 34px;
border: none;
font-size: 19px;
box-sizing: border-box;
transition: all 0.3s;
}
.big-search-box i {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 24px;
transition: color 0.3s, transform 0.3s;
}
.big-search-box:focus-within i {
color: #0066CC;
transform: translateY(-50%) scale(1.2);
}
.big-search-box button {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
background-color: #0066CC;
color: white;
border: none;
padding: 12px 32px;
border-radius: 30px;
cursor: pointer;
font-size: 19px;
font-weight: 500;
transition: all 0.3s;
overflow: hidden;
}
.big-search-box button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.big-search-box button:hover::after {
width: 200px;
height: 200px;
}
.big-search-box button:hover {
background-color: #0052aa;
padding: 12px 36px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
/* 搜索建议标签 */
.search-suggestions {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 18px;
gap: 12px;
}
.suggestion-tag {
color: white;
background-color: rgba(255, 255, 255, 0.15);
padding: 6px 15px;
border-radius: 18px;
font-size: 15px;
cursor: pointer;
transition: all 0.3s;
}
.suggestion-tag:hover {
background-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* 导航菜单 - 政府网站风格 */
.main-nav {
background-color: #2f5db8;
/*background-color: #003366;*/
border-bottom: 3px solid #0066CC;
width: 100%;
position: relative;
z-index: 998;
height: 60px;
display: flex;
align-items: center;
transition: height 0.3s ease;
}
.main-nav::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
/*background: linear-gradient(90deg, #0066CC, #4CAF50, #0066CC);*/
background-color: #fff;
opacity: 0.7;
}
.nav-container {
max-width: 1400px;
width: 100%;
margin: 0 auto;
text-align: center;
transition: all 0.3s ease;
}
.layui-nav {
background-color: transparent;
border: none;
padding: 0;
margin: 0 auto;
display: inline-block;
}
.layui-nav .layui-nav-item {
margin: 0 30px;
position: relative;
}
.layui-nav .layui-nav-item a {
color: #ffffff;
font-size: 22px;
padding: 0 15px;
line-height: 60px;
font-weight: 500;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.layui-nav .layui-nav-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
/*background-color: #4CAF50;*/
background-color: #fff;
transition: width 0.3s;
}
.layui-nav .layui-nav-item a:hover {
color: #ffffff;
background-color: #0066CC;
transform: translateY(-2px);
}
.layui-nav .layui-nav-item a:hover::after {
width: 100%;
}
.layui-nav .layui-nav-itemed a {
color: #ffffff;
background-color: #0066CC;
}
.layui-nav .layui-nav-itemed a::after {
width: 100%;
}
.layui-nav .layui-nav-itemed::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #f5f7fa;
}
/* 导航角标 */
.nav-badge {
position: absolute;
top: 15px;
right: -10px;
background-color: #ff4d4f;
color: white;
font-size: 12px;
padding: 1px 6px;
border-radius: 10px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 移动端汉堡菜单 */
.mobile-menu-btn {
/*display: none;*/
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 24px;
cursor: pointer;
z-index: 1000;
transition: all 0.3s ease;
}
/* 头条信息区 */
.main-headlines {
background-color: #f5f7fa;
/*padding: 15px 20px 0px 20px;*/
border-bottom: 1px solid #e5e5e5;
position: relative;
overflow: hidden;
}
.main-headlines-container {
max-width: 1400px;
margin: 0 auto;
text-align: center;
border-bottom: 2px solid #2f5db7;
}
.headline-label {
display: inline-block;
background-color: #0066CC;
color: white;
padding: 3px 10px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 15px;
position: relative;
transition: all 0.3s;
cursor: pointer;
}
.headline-label:hover {
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0, 102, 204, 0.2);
}
.headline-label::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #0066CC transparent transparent transparent;
}

/* 头条第一条：大字标题 */
.main-headline-featured {
/*margin-bottom: 25px;*/
/*padding-bottom: 15px;*/
/*border-bottom: 2px solid #e5e5e5;*/
/*position: relative;
padding-left: 20px;
transition: all 0.3s;*/
text-align: left;
/*margin-bottom: 4px;
    padding-bottom: 4px;*/
    border-bottom: 1px solid #eef2f7;
}
.main-headline-featured:hover {
border-color: #0066CC;
padding-left: 25px;
}
.main-headline-featured::before {
/*content: "\f0a1";
font-family: "FontAwesome";
position: absolute;
left: -20px;
top: 5px;
color: #ee2427;
font-size: 25px;
transition: all 0.3s;*/
}
.main-headline-featured:hover::before {
transform: scale(1.2) rotate(10deg);
}
.main-headline-featured a {
 font-size: 26px !important;
    font-weight: 700;
    color: #003366;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    /*flex-wrap: wrap;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes textShine {
to {
background-position: 200% center;
}
}
.main-headline-featured a:hover {
color: #0066CC;
/*text-decoration: underline;*/
/*transform: translateX(5px);*/
}
/* 头条其余条目：小字标题，两列布局 */
.main-headline-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 20px;
}
.main-headline-item {
display: flex; /* 使用flex布局确保同行 */
align-items: center; /* 垂直居中对齐 */
padding: 2px 0;
height: 28px; /* 固定行高，防止文本溢出 */
overflow: hidden;
padding-left: 14px;
/*transition: all 0.3s;*/
position: relative;
}
.main-headline-item::before {
/*content: "•";
position: absolute;
left: 0;
color: #0066CC;
font-weight: bold;*/
/*transition: all 0.3s;*/
}
.main-headline-item:hover {
background-color: rgba(0, 102, 204, 0.03);
border-radius: 4px;
padding-right: 10px;
}
.main-headline-item:hover::before {
/*transform: scale(1.5);
color: #4CAF50;*/
}
.main-headline-item a {
color: #333;
    text-decoration: none;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.main-headline-item a:hover {
color: #0066CC;
text-decoration: underline;
/*padding-left: 5px;*/
}
/* 将现有的轮播控制按钮样式重命名为更具体的类名 */
.headline-carousel-controls {
position: absolute;
right: 0;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
flex-direction: column;
align-items: flex-end;
}
.headline-control-btn {
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.headline-control-btn:hover {
background-color: rgba(0, 102, 204, 0.8);
}
/* 头条下方区域：左轮播右图资讯 */
.headline-content {
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
display: flex;
gap: 30px;
}
/* 优化后的左侧轮播图区域 */
.carousel-section {
flex: 1;
/*height: 400px;*/
height: auto;
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
transform: scale(1.05);
}
.carousel-item.active {
opacity: 1;
transform: scale(1);
z-index: 2;
animation: zoomIn 10s ease-in-out infinite alternate;
}
@keyframes zoomIn {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
.carousel-item.prev {
opacity: 1;
z-index: 1;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
padding: 100px 35px 35px;
color: white;
transform: translateY(20px);
opacity: 0;
transition: all 0.6s ease-out 0.3s;
}
.carousel-item.active .carousel-caption {
transform: translateY(0);
opacity: 1;
}
.carousel-main-title {
font-size: 26px;
font-weight: bold;
margin: 0 0 18px 0;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
line-height: 1.4;
position: relative;
padding-bottom: 12px;
}
.carousel-main-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 70px;
height: 3px;
background-color: #4CAF50;
}
.carousel-subtitle {
font-size: 19px;
line-height: 1.6;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
max-height: 65px;
overflow: hidden;
}
.carousel-controls {
position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
    z-index: 10;
}
.carousel-control {
width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.50);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}
.carousel-section:hover .carousel-control {
opacity: 1;
transform: translateY(0);
}
.carousel-control:hover {
background: rgba(24, 134, 247, 0.85);
    border-color: #1886F7;
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(24, 134, 247, 0.35);
}
.carousel-indicators {
position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 10px;
    z-index: 10;
}
.carousel-indicator {
width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}
.carousel-indicator.active {
background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(24, 134, 247, 0.5);
}

/* 轮播图响应式调整 */
@media (max-width: 768px) {
    .carousel-section .carousel-controls {
        padding: 0 10px;
    }
    .carousel-section .carousel-controls .carousel-control {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .carousel-section .carousel-indicators {
        bottom: 12px;
        gap: 8px;
    }
    .carousel-section .carousel-indicators .carousel-indicator {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 480px) {
    .carousel-section .carousel-controls {
        padding: 0 6px;
    }
    .carousel-section .carousel-controls .carousel-control {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .carousel-section .carousel-indicators {
        bottom: 8px;
        gap: 6px;
    }
    .carousel-section .carousel-indicators .carousel-indicator {
        width: 6px;
        height: 6px;
    }
}
/* 轮播图来源信息 */
.carousel-source {
position: absolute;
top: 18px;
right: 18px;
background-color: rgba(0, 0, 0, 0.65);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 15px;
z-index: 3;
}
/* 轮播图日期标签 */
.carousel-date {
position: absolute;
top: 18px;
left: 18px;
background-color: rgba(0, 66, 128, 0.8);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 15px;
z-index: 3;
}
/* 优化后的右侧资讯内容区域 */
.news-section {
flex: 1;
background-color: #fff;
border-radius: 10px;
padding: 0;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
height: 500px; /* 与左侧轮播图高度一致 */
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Tab导航样式 */
.news-tabs {
border-bottom: 1px solid #e5e5e5;
display: flex;
background-color: #f9f9f9;
justify-content: flex-start; /* 强制标签靠左对齐 */
gap: 15px; /* 标签之间的间距 */
}
.news-tab {
flex: 1;
text-align: center;
padding: 20px 0;
cursor: pointer;
font-size: 22px;
color: #666;
transition: all 0.3s;
position: relative;
}
.news-tab.active {
color: #0066CC;
font-weight: 600;
background-color: white;
}
.news-tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
background-color: #0066CC;
}
.news-tab:hover {
color: #0066CC;
background-color: #f5f9ff;
}
/* 资讯数字角标 */
.news-tab .badge {
display: inline-block;
background-color: #ff4d4f;
color: white;
font-size: 13px;
width: 22px;
height: 22px;
border-radius: 50%;
line-height: 22px;
text-align: center;
margin-left: 6px;
vertical-align: middle;
animation: pulse 2s infinite;
}
/* Tab内容样式 */
.tab-content {
padding: 15px;
overflow-y: auto;
flex: 1;
}
.tab-content::-webkit-scrollbar {
width: 7px;
}
.tab-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.tab-content::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.tab-content::-webkit-scrollbar-thumb:hover {
background: #0066CC;
}
.tab-pane {
display: none;
animation: fadeIn 0.5s ease-out;
}
.tab-pane1 {
display: none;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-pane.active {
display: block;
animation: fadeIn 0.5s ease;
}
.tab-pane1.active {
display: block;
animation: fadeIn 0.5s ease;
}
.news-list {
list-style: none;
padding: 0;
margin: 0;
}
.news-item {
padding: 12px 0;
border-bottom: 1px dashed #e5e5e5;
transition: all 0.3s;
position: relative;
padding-left: 12px;
}
.news-item:hover {
background-color: #f9f9f9;
padding-left: 18px;
transform: translateX(3px);
}
.news-item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ccc;
transition: all 0.3s;
}
.news-item:hover::before {
background-color: #0066CC;
transform: translateY(-50%) scale(1.8);
}
.news-item:last-child {
border-bottom: none;
}
.news-item a {
color: #333;
text-decoration: none;
line-height: 1.6;
font-size: 20px;
transition: all 0.3s;
display: -webkit-box;
-webkit-line-clamp: 1; /* 限制只显示一行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保文本不换行 */
}
.news-date{
    font-size: 16px;
}
.news-item a:hover {
color: #0066CC;
text-decoration: underline;
}
.news-meta {
color: #666;
display: flex;
justify-content: space-between;
margin: 8px 0px;
font-size: 16px;
align-items: center;
}
.news-category {
background-color: #e6f4ff;
color: #0066CC;
padding: 3px 10px;
border-radius: 4px;
transition: all 0.3s;
margin-right: 10px;
font-size: 16px;
}
.news-item:hover .news-category {
background-color: #0066CC;
color: white;
transform: scale(1.05);
}
/* 更多资讯按钮 */
.more-news {
display: block;
text-align: center;
color: #0066CC;
text-decoration: none;
padding: 10px 0;
border: 1px dashed #0066CC;
border-radius: 6px;
transition: all 0.3s;
font-weight: 500;
}
.more-news:hover {
background-color: #0066CC;
color: white;
border-style: solid;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
}
.policy-list .more-news,.interpretation-list .more-news{
display: block;
text-align: center;
color: #0066CC;
text-decoration: none;
padding: 0;
border: 0px;
border-radius: 6px;
transition: all 0.3s;
font-weight: 500;
}
.policy-list .more-news:hover ,.interpretation-list .more-news:hover{
background-color: #0066CC;
color: white;
border-style: solid;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
}
/* 核心功能区：哪里看、哪里办、哪里问 */
.core-functions-container {
max-width: 1400px;
margin: 25px auto;
padding: 0 20px;
clear: both;
position: relative;
z-index: 1;
}
.section-title {
text-align: center;
font-size: 32px;
color: #003366;
margin-bottom: 40px;
font-weight: 700;
position: relative;
padding-bottom: 15px;
display: inline-block;
left: 50%;
/* 移除以下两行重复的transform属性 */
/* transform: translateX(-50%); */
/* opacity: 0; */
transform: translate(-50%, 20px); /* 保留这个统一的transform */
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-title.visible {
opacity: 1;
transform: translate(-50%, 0);
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #0066CC;
border-radius: 2px;
}
.section-title::before {
/*content: "\f023";
font-family: "FontAwesome";
color: #4CAF50;
margin-right: 10px;*/
}
.core-functions {
display: grid;
/*grid-template-columns: repeat(3, 1fr);*/
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 60px;
}
.function-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
border-top: 4px solid #0066CC;
/*opacity: 0;*/
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.function-card.visible {
opacity: 1;
transform: translateY(0);
}
.function-card:nth-child(1) { transition-delay: 0.1s; }
.function-card:nth-child(2) { transition-delay: 0.2s; }
.function-card:nth-child(3) { transition-delay: 0.3s; }
.function-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #0066CC, #4CAF50);
opacity: 0;
transition: opacity 0.3s;
}
.function-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 102, 204, 0.18);
}
.function-card:hover::before {
opacity: 1;
}
.function-header {
background-color: #003366;
padding: 25px 20px;
color: #ffffff;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.function-header::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 50% 0 0 50%;
}
.function-icon {
font-size: 36px;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.function-card:hover .function-icon {
transform: rotate(15deg) scale(1.1);
background-color: rgba(255, 255, 255, 0.25);
}
.function-title {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.function-subtitle {
font-size: 16px;
color: #cce0ff;
margin: 5px 0 0 0;
}
.function-content {
padding:10px 25px;
}
/* ① 哪里看（资讯政策区）- 参考云南省人民政府官网风格调整 */
.policy-sidebar {
width: 100%;
margin-bottom: 20px;
}
.policy-sidebar-title {
background-color: #003366;
color: white;
padding: 12px 15px;
font-size: 18px;
font-weight: 600;
margin: 0 0 10px 0;
border-left: 4px solid #4CAF50;
display: flex;
align-items: center;
transition: all 0.3s;
}
.policy-sidebar-title:hover {
background-color: #004080;
transform: translateX(3px);
}
.policy-sidebar-title i {
margin-right: 8px;
}
.policy-sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #e5e5e5;
}
.policy-sidebar-menu li {
border-bottom: 1px solid #e5e5e5;
transition: all 0.3s;
}
.policy-sidebar-menu li:last-child {
border-bottom: none;
}
.policy-sidebar-menu a {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
transition: all 0.3s;
position: relative;
}
.policy-sidebar-menu a::after {
content: "\f054";
font-family: "FontAwesome";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #999;
transition: all 0.3s;
}
.policy-sidebar-menu a:hover {
background-color: #f0f7ff;
color: #0066CC;
padding-left: 20px;
}
.policy-sidebar-menu a:hover::after {
color: #0066CC;
right: 12px;
transform: translateY(-50%) rotate(90deg);
}
.policy-sidebar-menu a.active {
background-color: #e6f4ff;
color: #0066CC;
font-weight: 600;
}
.policy-sidebar-menu a.active::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: #0066CC;
}
.policy-main-content {
width: 100%;
}
.policy-database {
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
padding: 15px;
margin-bottom: 20px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
transition: all 0.3s;
}
.policy-database:hover {
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.08);
}
.database-title {
font-size: 26px;
color: #003366;
margin: 0 0 5px 0;
font-weight: 600;
border-bottom: 2px solid #e5e5e5;
padding-bottom: 10px;
display: flex;
align-items: center;
/*justify-content: space-between; */
}
.database-title i {
margin-right: 8px;
color: #0066CC;
}
.database-search {
display: flex;
margin-bottom: 15px;
border-radius: 4px;
overflow: hidden;
}
.database-search input {
flex: 1;
padding: 10px 15px;
border: 1px solid #e5e5e5;
border-right: none;
font-size: 14px;
transition: all 0.3s;
}
.database-search input:focus {
border-color: #0066CC;
outline: none;
box-shadow: inset 0 0 0 1px #0066CC;
}
.database-search button {
background-color: #0066CC;
color: white;
border: none;
padding: 0 15px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.database-search button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.database-search button:hover::after {
width: 100px;
height: 100px;
}
.database-search button:hover {
background-color: #0052aa;
}
.database-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.database-category {
background-color: white;
border: 1px solid #e5e5e5;
padding: 15px;
text-align: center;
transition: all 0.3s;
text-decoration: none;
color: #333;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.database-category::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #0066CC;
transform: scaleX(0);
transition: transform 0.3s;
}
.database-category:hover {
border-color: #0066CC;
background-color: #f0f7ff;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}
.database-category:hover::before {
transform: scaleX(1);
}
.category-icon {
font-size: 24px;
color: #0066CC;
margin-bottom: 10px;
transition: all 0.3s;
}
.database-category:hover .category-icon {
transform: scale(1.2) rotate(10deg);
}
.category-name {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.policy-tabs {
border: 1px solid #e5e5e5;
margin-bottom: 20px;
border-radius: 6px;
overflow: hidden;
}
.policy-tabs-header {
display: flex;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
}
.policy-tab {
padding: 12px 20px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.policy-tab.active {
color: #0066CC;
border-bottom-color: #0066CC;
background-color: white;
}
.policy-tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #0066CC;
}
.policy-tab:hover:not(.active) {
color: #3b82f6;
border-bottom: 3px solid #dbeafe;
}
.policy-tab:not(.active):hover {
background-color: #f0f0f0;
color: #004080;
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
background-color: #e0ecff;
border-left: 4px solid #165DFF;
}
.tab-header h4 {
color: #0f172a;
font-size: 23px;
margin: 0;
font-weight: 600;
}
.view-more {
color: #3b82f6;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
transition: all 0.2s;
margin-right: 10px;
}
.view-more:hover {
color: #2563eb;
}
.view-more i {
margin-left: 5px;
}
.cases-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
gap: 20px;
}
.case-card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border-top: 3px solid transparent;
}
.case-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
border-top-color: #3b82f6;
}
.case-icon {
width: 50px;
height: 50px;
background-color: #eff6ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
float: left;
}
.case-icon i {
color: #3b82f6;
font-size: 24px;
}
.case-card h5 {
margin: 0 0 20px 0;
font-size: 19px;
font-weight: bold;
}
.case-card h5 a {
color: #1e293b;
text-decoration: none;
transition: color 0.2s;
 display: -webkit-box;
    -webkit-line-clamp: 2;         /* ← 标题限制2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;   
    padding-left: 5px;
}
.case-card h5 a:hover {
color: #3b82f6;
}
.case-card p {
color: #64748b;
font-size: 16px;
line-height: 1.6;
margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /*text-indent: 2em;*/
    line-height: 1.5;
    width: 100%;

}
.case-meta {
display: flex;
font-size: 16px;
color: #94a3b8;
gap: 15px;
float: right;
}
.case-meta i {
margin-right: 4px;
}
.policy-tab-content {
/*padding: 15px;*/
}
.policy-tab-content1 {
padding: 15px;
}
.policy-search-box {
display: flex;
margin-bottom: 15px;
align-items: center;
border-radius: 4px;
overflow: hidden;
}
.policy-search-label {
background-color: #e6f4ff;
color: #0066CC;
padding: 8px 15px;
font-weight: 600;
border: 1px solid #cce0ff;
border-right: none;
}
.policy-search-select {
padding: 8px;
border: 1px solid #e5e5e5;
border-right: none;
min-width: 120px;
transition: all 0.3s;
}
.policy-search-select:focus {
border-color: #0066CC;
outline: none;
}
.policy-search-input {
flex: 1;
padding: 8px 15px;
border: 1px solid #e5e5e5;
border-right: none;
transition: all 0.3s;
}
.policy-search-input:focus {
border-color: #0066CC;
outline: none;
}
.policy-search-btn {
background-color: #d92121;
color: white;
border: none;
padding: 8px 15px;
/* cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;*/
}
.policy-search-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.policy-search-btn:hover::after {
width: 100px;
height: 100px;
}
.policy-search-btn:hover {
background-color: #b31212;
}
.policy-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 15px;
}
.policy-item {
/*padding: 12px 0;*/
border-bottom: 1px dashed #e5e5e5;
/*display: flex;
justify-content: space-between;*/
align-items: center;
border-radius: 8px;
/*overflow: hidden;*/
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
/*transition: all 0.3s;*/
}
.policy-item:last-child {
border-bottom: none;
}
.policy-item:hover {
background-color: #f9f9f9;
padding-left: 5px;
padding-right: 5px;
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.policy-item a {
color: #333;
text-decoration: none;
transition: color 0.3s;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
margin-right: 15px;
}
.policy-item a:hover {
color: #0066CC;
text-decoration: underline;
}
.policy-date {
background: #3b82f6;
color: #fff;
padding: 15px 12px;
/*padding: 2px;*/
min-width: 80px;
text-align: center;
font-weight: 600;
font-size: 18px;
white-space: nowrap;           /* ← 标题单行 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.policy-info {
/*padding: 10px;*/
padding: 15px;
flex: 1;
}
.policy-info h5 {
margin: 0 0 8px 0;
font-size: 19px;
}
.policy-info h5 a {
color: #1e293b;
text-decoration: none;
transition: color 0.2s;
}
.policy-info h5 a:hover {
color: #3b82f6;
}
.policy-info p {
margin: 0;
color: #64748b;
font-size: 16px;
line-height: 1.5;
white-space: nowrap;           /* ← 描述单行 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.featured-img {
width: 30%;
object-fit: cover;
}
.featured-info {
padding: 20px;
flex: 1;
}
.featured-info h5 {
margin: 0 0 10px 0;
font-size: 18px;
}
.featured-info h5 a {
color: #1e293b;
text-decoration: none;
transition: color 0.2s;
}
.featured-info h5 a:hover {
color: #3b82f6;
}
.featured-info p {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0 0 15px 0;
}
.interpretation-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.interpretation-featured {
display: flex;
gap: 20px;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
flex-direction: column;
}
.interpretation-meta {
font-size: 13px;
color: #94a3b8;
display: flex;
gap: 20px;
}
.interpretation-meta i {
margin-right: 5px;
}
.interpretation-list {
display: flex;
flex-direction: column;
gap: 17px;
}
.interpretation-item {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s;
display: flex;
justify-content: space-between;
align-items: center;
}
.interpretation-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.interpretation-item h5 {
margin: 0;
    padding: 0;
    width: 85%;
    overflow: hidden;
font-size: 19px;
font-weight: 500px;
}
.interpretation-item h5 a {
display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 20px;              /* 根据实际调整 */
    color: #1a2a4a;
    text-decoration: none;       /* 确保内边距不影响宽度计算 */ 
}
.interpretation-item h5 a:hover {
color: #3b82f6;
}
.interpretation-item .meta {
color: #94a3b8;
font-size: 13px;
display: block;                /* 确保日期换行显示在标题下方 */
    margin-top: 4px
}
.policy-tag {
display: inline-block;
background-color: #e6f4ff;
color: #0066CC;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
margin-right: 5px;
}
.related-links {
margin-top: 20px;
}
.related-links-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 10px 0;
color: #003366;
display: flex;
align-items: center;
}
.related-links-title i {
margin-right: 8px;
color: #0066CC;
}
.related-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.related-links-list a {
display: inline-block;
padding: 5px 15px;
background-color: #f5f5f5;
color: #333;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
transition: all 0.3s;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.related-links-list a::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-25deg) translateX(-100%);
transition: transform 0.6s;
}
.related-links-list a:hover::after {
transform: skewX(-25deg) translateX(100%);
}
.related-links-list a:hover {
background-color: #0066CC;
color: white;
border-color: #0052aa;
transform: translateY(-2px);
}
/* ② 哪里办（产品服务区）- 参考云南省人民政府官网调整 */
.service-section-title {
/*background-color: #f0f2f5;
color: #1E293B;
padding: 10px 15px;
font-size: 18px;
font-weight: 600;
margin: 0 0 15px 0;
border-radius: 4px;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 102, 204, 0.2);
transition: all 0.3s;
cursor: pointer;
border-left: 4px solid #165DFF;*/
color: #1E293B;
font-size: 24px;
padding: 10px 15px;
margin-bottom: 15px;
/*background-color: #e0ecff;
border-left: 4px solid #165DFF;*/
border-radius: 2px;
display: flex;
align-items: center;
}
.service-section-title:hover {
/*background-color: #0052aa;*/
transform: translateX(3px);
color: #0052aa;
background-color: #e0ecff;
padding-left: 20px;
border-color: #0066CC;
}
.service-section-title i {
margin-right: 10px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
/*margin-bottom: 10px;*/
}
.service-item {
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 15px;
text-align: center;
transition: all 0.3s;
text-decoration: none;
color: #333;
position: relative;
overflow: hidden;
}
.service-item::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #e6f4ff transparent transparent;
transition: all 0.3s;
}
.service-item:hover {
background-color: #f0f7ff;
border-color: #0066CC;
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
}
.service-item:hover::after {
border-color: transparent #0066CC transparent transparent;
}
.service-icon {
width: 111px;
height: 110px;
background-color: #e6f4ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
color: #0066CC;
font-size: 42px;
transition: all 0.3s;
}
.service-item:hover .service-icon {
background-color: #0066CC;
color: white;
transform: rotate(360deg) scale(1.1);
}
.service-name {
font-size: 20px;
font-weight: 600;
margin: 0 0 5px 0;
}
.service-desc {
font-size: 14px;
color: #666;
margin: 0;
}
.service-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #4CAF50;
color: white;
font-size: 12px;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 20px;
}
.quick-action-btn {
display: flex;
align-items: center;
padding: 12px 15px;
/*background-color: #0066CC;*/
color: #f0f7ff;
border: 1px solid #cce0ff;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
position: relative;
overflow: hidden;
font-size: 18px;
background: linear-gradient(90deg, #1E50B3, #3A77FF);
}
.quick-action-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 102, 204, 0.05);
transform: translateX(-100%);
transition: transform 0.3s;
}
.quick-action-btn:hover {
background-color: #e0ecff;
padding-left: 20px;
border-color: #0066CC;
}
.quick-action-btn:hover::before {
transform: translateX(0);
}
.quick-action-btn i {
margin-right: 10px;
font-size: 18px;
transition: all 0.3s;
}
.quick-action-btn:hover i {
transform: scale(1.2) rotate(10deg);
}
/* ③ 哪里问（咨询求助区）样式 */
.question-service {
margin-bottom: 20px;
}
.question-input-group {
display: flex;
margin-bottom: 15px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.question-input {
flex: 1;
padding: 12px 15px;
border: 1px solid #e5e5e5;
border-radius: 4px 0 0 4px;
font-size: 16px;
transition: all 0.3s;
}
.question-input:focus {
border-color: #0066CC;
outline: none;
box-shadow: inset 0 0 0 1px #0066CC;
}
.question-btn {
background-color: #0066CC;
color: white;
border: none;
padding: 0 20px;
border-radius: 0 4px 4px 0;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.question-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.question-btn:hover::after {
width: 100px;
height: 100px;
}
.question-btn i {
margin-right: 5px;
}
.question-btn:hover {
background-color: #0052aa;
}
.question-examples {
background-color: #f9f9f9;
padding: 15px;
border-radius: 6px;
margin-bottom: 25px;
border-left: 4px solid #4CAF50;
transition: all 0.3s;
}
.question-examples:hover {
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.1);
}
.examples-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 10px 0;
color: #003366;
display: flex;
align-items: center;
}
.examples-title i {
margin-right: 8px;
color: #4CAF50;
}
.example-questions {
margin: 0;
padding-left: 20px;
}
.example-questions li {
margin-bottom: 8px;
font-size: 14px;
color: #666;
transition: all 0.3s;
cursor: pointer;
}
.example-questions li:hover {
color: #0066CC;
transform: translateX(5px);
font-weight: 500;
}
.example-questions li::marker {
color: #4CAF50;
}
.service-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.service-option {
display: flex;
align-items: center;
padding: 15px;
border: 1px solid #f0f0f0;
border-radius: 6px;
transition: all 0.3s;
text-decoration: none;
color: #333;
background-color: white;
position: relative;
overflow: hidden;
}
.service-option::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: transparent;
transition: all 0.3s;
}
.service-option:hover {
background-color: #f5f9ff;
border-color: #cce0ff;
color: #0066CC;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.08);
}
.service-option:hover::before {
background-color: #0066CC;
}
.service-option-icon {
font-size: 20px;
margin-right: 15px;
color: #0066CC;
width: 40px;
height: 40px;
background-color: #f0f7ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.service-option:hover .service-option-icon {
background-color: #0066CC;
color: white;
transform: rotate(15deg) scale(1.1);
}
.service-option-text {
flex: 1;
}
.service-option-title {
font-size: 19px;
font-weight: 600;
margin: 0 0 5px 0;
}
.service-option-desc {
font-size: 16px;
color: #666;
margin: 0;
}
.service-option-badge {
background-color: #ff4d4f;
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
transition: all 0.3s;
}
.service-option:hover .service-option-badge {
background-color: #d92121;
transform: scale(1.1);
}
/* 智能服务增强入口 */
.smart-service-enhancement {
max-width: 1400px;
margin: 0 auto 40px;
/*padding: 0 20px;*/
/*opacity: 0;*/
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-service-enhancement.visible {
opacity: 1;
transform: translateY(0);
}
.recommendation-card {
background-color: #e6f4ff;
border-radius: 8px;
padding: 25px;
margin-bottom: 0px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
transition: all 0.3s;
}
.recommendation-card:hover {
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
transform: translateY(-3px);
}
.recommendation-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://picsum.photos/id/180/1200/300');
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
}
.recommendation-decoration {
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background-color: rgba(76, 175, 80, 0.1);
border-radius: 50%;
z-index: 0;
}
.recommendation-decoration::after {
content: "\f023";
font-family: "FontAwesome";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(76, 175, 80, 0.3);
font-size: 40px;
}
.recommendation-content {
position: relative;
z-index: 1;
flex: 1;
}
.recommendation-title {
font-size: 22px;
font-weight: 600;
color: #003366;
margin: 0 0 10px 0;
display: flex;
align-items: center;
}
.recommendation-title i {
margin-right: 10px;
color: #4CAF50;
}
.recommendation-desc {
font-size: 16px;
color: #333;
margin: 0 10px 0px 0px;
max-width: 800px;
}
.recommendation-actions {
position: relative;
z-index: 1;
white-space: nowrap;
}
.recommendation-btn {
background-color: #0066CC;
color: white;
border: none;
padding: 12px 25px;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.recommendation-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.recommendation-btn:hover::after {
width: 200px;
height: 200px;
}
.recommendation-btn i {
margin-right: 8px;
}
.recommendation-btn:hover {
background-color: #0052aa;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
}
.expert-connection {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.expert-connection:hover {
box-shadow: 0 8px 25px rgba(0, 51, 102, 0.1);
}
.expert-connection::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #0066CC, #4CAF50);
}
.expert-connection-title {
font-size: 24px;
font-weight: 600;
color: #003366;
margin: 0 0 20px 0;
display: flex;
align-items: center;
justify-content: center;
}
.expert-connection-title i {
margin-right: 10px;
color: #0066CC;
}
.expert-connection-btn {
background-color: #003366;
color: white;
border: none;
padding: 15px 40px;
border-radius: 6px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 51, 102, 0.15);
position: relative;
overflow: hidden;
}
.expert-connection-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
}
.expert-connection-btn:hover::after {
width: 200px;
height: 200px;
}
.expert-connection-btn i {
margin-right: 10px;
font-size: 20px;
}
.expert-connection-btn:hover {
background-color: #002244;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 51, 102, 0.2);
}
.response-time {
font-size: 14px;
color: #666;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.response-time i {
margin-right: 5px;
color: #4CAF50;
}
/* 优质供应商推荐区 - 新增内容 */
.suppliers-section {
max-width: 1400px;
margin: 0px auto;
padding: 0 20px;
position: relative;
overflow: hidden;
}
/* 在 .suppliers-section 相关样式中添加 */
.suppliers-section .carousel-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between; /* 确保左右各一个按钮 */
padding: 0 10px;
z-index: 10;
pointer-events: none;
/*flex-direction: row; /* 明确设置为水平方向 */*/
}
.suppliers-section .carousel-control {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
pointer-events: auto;
font-size: 18px;
}
.suppliers-section .carousel-control:hover {
  background: #0066CC;
    color: #fff;
    border-color: #0066CC;
    transform: scale(1.05);
}
.suppliers-section .carousel-control i {
font-size: 20px;
color: #333;
}
.supplier-cards {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 30px;
padding: 20px 0;
will-change: transform;
}
.supplier-card {
min-width: calc(25% - 20px); /* 每行显示3个 */
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: all 0.4s ease;
border: 1px solid #f0f0f0;
position: relative;
perspective: 1000px;
}
.supplier-card:hover {
transform: translateY(-8px) rotateX(5deg);
box-shadow: 0 15px 30px rgba(0, 84, 174, 0.2);
border-color: #B8D0EB;
}
.supplier-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #0066CC, #4CAF50);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left center;
}
.supplier-card:hover::before {
transform: scaleX(1);
}
/* 轮播控制按钮 */
.carousel-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 10px;
z-index: 10;
pointer-events: none;
}
.carousel-control {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
pointer-events: auto;
opacity: 0.7;
}
.carousel-control:hover {
background-color: white;
transform: scale(1.1);
opacity: 1;
color: #0066CC;
}
.carousel-control i {
font-size: 20px;
color: #333;
}
/* 轮播指示器 */
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 30px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dot.active {
background-color: #0066CC;
transform: scale(1.3);
}
/* 适配不同屏幕尺寸 */
@media (max-width: 1024px) {
.supplier-card {
min-width: calc(50% - 15px); /* 平板每行2个 */
}
}
.supplier-header {
padding: 20px;
/*background-color: #E8F4FC;*/
background: linear-gradient(135deg, #0066CC, #004C99);
color: #fff;
display: flex;
align-items: center;
border-bottom: 1px solid #f0f0f0;
}
.supplier-logo {
width: 60px;
height: 60px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
overflow: hidden;
border: 2px solid #B8D0EB;
}
.supplier-logo img {
max-width: 90%;
max-height: 90%;
}
.supplier-info h3 {
margin: 0 0 5px 0;
color: #fff; /* 统一使用深蓝色，避免与.header中的样式冲突 */
font-size: 20px
}
.supplier-rating {
color: #FFB800;
display: flex;
align-items: center;
}
.supplier-rating .stars {
margin-right: 5px;
}
.supplier-body {
padding: 20px;
}
.supplier-desc {
color: #666;
font-size: 14px;
margin-bottom: 15px;
line-height: 1.6;
}
.supplier-services {
margin-bottom: 15px;
}
.supplier-services-title {
font-size: 15px;
color: #0A3D62;
margin-bottom: 8px;
font-weight: 600;
}
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.service-tag {
background-color: #f0f7ff;
color: #005CAE;
font-size: 14px;
padding: 3px 10px;
border-radius: 4px;
}
.supplier-footer {
padding: 15px 20px;
background-color: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f0f0f0;
}
.supplier-certified {
display: flex;
align-items: center;
font-size: 14px;
color: #005CAE;
}
.supplier-certified i {
margin-right: 5px;
color: #005CAE;
}
.view-details {
color: #005CAE;
text-decoration: none;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
transition: color 0.3s;
}
.view-details i {
margin-left: 5px;
font-size: 12px;
}
.view-details:hover {
color: #0A3D62;
text-decoration: underline;
}
.supplier-highlights {
text-align: center;
/*margin: 40px 0 20px;*/
}
.highlight-badge {
display: inline-block;
/*background-color: #0A3D62;*/
background-color: #0066cc;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 18px;
margin: 0 10px 10px;
}
/* 页脚信息 */
.footer {
background-color: #2f5db8;
/*background-color: #003366;*/
color: #ffffff;
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
/*background: linear-gradient(90deg, #0066CC, #4CAF50, #0066CC);*/
background: #fff;
}
.footer-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
z-index: 0;
}
.footer-content {
position: relative;
z-index: 1;
}
.footer-logo {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #0066CC;
transition: all 0.3s;
}
.footer-logo:hover {
transform: rotate(360deg) scale(1.1);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.footer-links {
margin-bottom: 20px;
}
.footer-links a {
color: #cce0ff;
margin: 0 15px;
text-decoration: none;
transition: all 0.3s;
position: relative;
padding: 5px 0;
}
.footer-links a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: white;
transition: width 0.3s;
}
.footer-links a:hover {
color: #ffffff;
text-decoration: none;
}
.footer-links a:hover::after {
width: 100%;
}
.footer-info {
font-size: 14px;
color: #b3c6e6;
margin-top: 20px;
line-height: 1.6;
}
.security-certification {
margin: 20px 0;
display: flex;
justify-content: center;
gap: 20px;
}
.cert-icon {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
transition: all 0.3s;
}
.cert-icon:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1.1) rotate(10deg);
}

.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
/*background-color: #0052aa;
transform: translateY(-5px);*/
}
/* 公益服务行和案例库补充样式 */
.policy-content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.database-category:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
border-color: #0066CC;
}
.database-category:hover::before {
transform: scaleX(1);
}
.database-category i {
transition: transform 0.3s;
}
.database-category:hover i {
transform: scale(1.2);
}
/* 案例卡片悬停效果 */
.policy-database div[style*="border:1px solid #e5e5e5"]:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #0066CC;
}
.policy-database div[style*="border:1px solid #e5e5e5"] h5 a:hover {
color: #0066CC;
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.core-functions {
gap: 20px;
}
.function-title {
font-size: 24px;
}
}
@media (max-width: 992px) {
.core-functions {
grid-template-columns: 1fr;
}
.main-headline-featured a {
font-size: 26px;
display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    flex-wrap: wrap;
}
.main-nav .layui-nav-item {
margin: 0 15px;
}
.main-nav .layui-nav-item a {
font-size: 18px;
}
.recommendation-card {
flex-direction: column;
text-align: center;
}
.recommendation-actions {
margin-top: 15px;
}
}
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .layui-container,
    .core-functions-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
.header-banner {
height: 230px;
}
.main-title {
font-size: 11vh;
}
.main-headline-featured a {
   font-size: 17px;
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*background: none;*/
        color: #003366;
        /*animation: none;*/
}
.main-headline-items {
grid-template-columns: 1fr;
gap: 4px;
}
    .headline-carousel {
        min-height: 80px;
        max-height: 100px;
    }
     .main-headline-featured a {
        font-size: 13px !important;
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*background: none;*/
        color: #333;
        /*animation: none;*/
    }
    
    .main-headline-items {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    .main-headline-item {
        height: 24px;
        padding: 1px 0;
    }
    
.main-headline-item a {
        font-size: 13px;
         white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .headline-carousel .carousel-control {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
.section-title {
font-size: 26px;
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.database-categories {
grid-template-columns: repeat(2, 1fr);
}
.main-nav {
/*overflow-x: auto;*/
/*-webkit-overflow-scrolling: touch;*/
}
.layui-nav {
width: max-content;
padding: 0 10px;
}
.mobile-menu-btn {
display: block;
}
.supplier-card {
min-width: 100%; /* 手机每行1个 */
}
}
@media (max-width: 480px) {
.header-banner {
height: 200px;
}
.main-title {
font-size: 26px;
}
.sub-title {
font-size: 16px;
}
.function-header {
flex-direction: column;
text-align: center;
padding: 20px 15px;
}
.function-icon {
margin-right: 0;
margin-bottom: 10px;
}
.section-title {
font-size: 22px;
}
.function-content {
padding: 15px;
}
.service-grid {
grid-template-columns: 1fr;
}
.database-categories {
grid-template-columns: 1fr;
}
.policy-search-box {
flex-wrap: wrap;
}
.policy-search-label, .policy-search-select, .policy-search-input {
border-right: 1px solid #e5e5e5;
border-bottom: none;
}
.policy-search-label {
width: 100%;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.policy-search-select {
width: 50%;
border-bottom: 1px solid #e5e5e5;
}
.policy-search-input {
width: 50%;
border-bottom: 1px solid #e5e5e5;
}
.policy-search-btn {
width: 100%;
}
.quick-actions {
grid-template-columns: 1fr;
}
.recommendation-title {
font-size: 18px;
}
.recommendation-desc {
font-size: 14px;
}
.expert-connection-btn {
padding: 12px 25px;
font-size: 16px;
}
.security-certification {
flex-wrap: wrap;
justify-content: center;
}
.back-to-top {
width: 40px;
height: 40px;
bottom: 20px;
right: 20px;
}
.headline-carousel {
        min-height: 70px;
        max-height: 90px;
    }
.main-headline-featured a {
        font-size: 15px;
        white-space: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        background: none;
        color: #003366;
        animation: none;
    }
    
    .main-headline-item a {
        font-size: 12px;
        white-space: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }


}
/* 首条新闻图文样式 */
.featured-news {
display: flex;
gap: 15px;
padding: 20px 15px;
/*margin-bottom: 15px;*/
border-bottom: 1px solid #e5e5e5;
transition: all 0.3s;
background-color: #fff;
border-radius: 6px;
}
.news-image {
flex: 0 0 200px;
height: 120px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-image img:hover {
transform: scale(1.05);
}
.news-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.news-info a {
text-decoration: none;
color: #333;
font-weight: 600;
font-size: 1.4em;
display: block;
margin-bottom: 10px;
transition: color 0.3s;
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 显示省略号 */
max-width: 100%; /* 限制最大宽度为父容器宽度 */
}
.news-info a:hover {
color: #007bff;
}
.news-summary {
color: #666;
line-height: 1.6;
font-size: 1.2em;
margin: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.policy-section {
padding: 20px;
background-color: #f9fafb;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
}
body {
background-color: #f5f7fa;
}
.page-title {
text-align: center;
color: #0A3D62;
margin-bottom: 30px;
font-size: 28px;
font-weight: 600;
}
/* 供应商卡片容器样式 */
.supplier-container {
display: flex;
gap: 25px;
flex-wrap: wrap;
justify-content: center;
max-width: 1300px;
margin: 0 auto;
}
/* 卡片基础样式 */
.supplier-card {
width: 300px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: all 0.4s ease;
border: 1px solid #f0f0f0;
position: relative;
height: 240px; /* 增加高度容纳更多资质信息 */
}
/* 卡片悬浮整体效果 */
.supplier-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* 默认显示内容样式 */
.supplier-default {
position: relative;
height: 100%;
padding: 20px;
z-index: 1;
transition: all 0.4s ease;
}
.supplier-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.supplier-logo {
width: 60px;
height: 60px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
overflow: hidden;
border: 2px solid #B8D0EB;
}
.supplier-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*      .supplier-info h3 {
margin: 0 0 5px 0;
color: #0A3D62;
font-size: 20px;
}*/
.supplier-rating {
color: #FFB800;
display: flex;
align-items: center;
gap: 8px;
}
.stars i {
margin-right: 2px;
}
.supplier-cert {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.supplier-certified {
display: flex;
align-items: center;
font-size: 14px;
color: #005CAE;
font-weight: 500;
margin-bottom: 8px;
}
.supplier-certified:last-child {
margin-bottom: 0;
}
.supplier-certified i {
margin-right: 5px;
color: #005CAE;
}
/* 详情内容样式 - 默认隐藏 */
.supplier-details {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 2;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
overflow-y: auto;
}
/* 详情区域内容样式 */
.supplier-desc {
color: #333;
line-height: 1.6;
margin-bottom: 15px;
font-size: 14px;
}
.supplier-services {
margin-bottom: 15px;
}
.supplier-services-title {
font-weight: 600;
color: #0A3D62;
margin-bottom: 10px;
font-size: 16px;
}
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.service-tag {
background-color: #f0f7ff;
color: #005CAE;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
}
.view-details {
display: inline-block;
color: #005CAE;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
font-size: 14px;
transition: color 0.3s ease;
}
.view-details:hover {
color: #0A3D62;
}
.view-details i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.view-details:hover i {
transform: translateX(3px);
}
/* 悬浮时的显示切换效果 */
.supplier-card:hover .supplier-default {
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
}
.supplier-card:hover .supplier-details {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 滚动条美化 */
.supplier-details::-webkit-scrollbar {
width: 6px;
}
.supplier-details::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.supplier-details::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 10px;
}
.supplier-details::-webkit-scrollbar-thumb:hover {
background: #bbb;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.supplier-container {
max-width: 960px;
}
}
@media (max-width: 768px) {
.supplier-card {
width: 100%;
max-width: 350px;
}
}
/* 右侧固定栏目样式（参考回到顶部按钮） */
.fixed-shortcuts {
position: fixed;
right: 20px;
bottom: 30%; /* 与回到顶部按钮位置协调 */
z-index: 999;
}
.fixed-shortcuts ul {
list-style: none;
margin: 0;
padding: 0;
}
.fixed-shortcuts li {
margin-bottom: 10px;
}
.fixed-shortcuts a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
padding: 5px;
background-color: #fff;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
color: #333;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid #e8ecf1;
overflow: visible;
}
/* 图标样式 */
/*.fixed-shortcuts a i {
font-size: 20px;
margin-bottom: 5px; /* 调整图标与文字的间距 */
transition: all 0.3s;
}*/
/* 文字提示（悬停显示） */
.fixed-shortcuts a span {
font-size: 12px;
text-align: center;
line-height: 1.2;
max-width: 100%; /* 确保文字在容器内 */
}
/* 提示文字小三角 */
.fixed-shortcuts a span::after {
/*content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-width: 5px 0 5px 5px;
border-style: solid;
border-color: transparent transparent transparent #333;*/
}
/* 悬停效果 */
.fixed-shortcuts a:hover {
background-color: #0066CC;
color: #fff;
transform: scale(1.05);
}
.fixed-shortcuts a:hover span {
opacity: 1;
visibility: visible;
color: #fff;
font-weight: bold;
font-size: 14px;
/*right: 55px;*/
}
/* Tab切换样式优化 */
.policy-tabs .policy-tab {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
margin-right: 5px;
border: 1px solid transparent;
border-bottom: none;
border-radius: 6px 6px 0 0;
transition: all 0.3s;
}
.policy-tabs .policy-tab.active {
background-color: #fff;
border-color: #e0e0e0;
border-bottom-color: #fff; /* 覆盖底部边框 */
color: #0066CC;
font-weight: 500;
}
.tab-pane {
padding: 20px 0px 0px 0px;
/*border: 1px solid #e0e0e0;*/
border-radius: 0 6px 6px 6px;
margin-top: -1px; /* 与标签无缝衔接 */
}
.tab-pane1 {
padding: 20px 0px 0px 0px;
/*border: 1px solid #e0e0e0;*/
border-radius: 0 6px 6px 6px;
margin-top: -1px; /* 与标签无缝衔接 */
}
/*.fixed-shortcuts a:hover i {
transform: scale(1.2);
}*/
/* 头条轮播样式 */
.headline-carousel {
position: relative;
    overflow: hidden;
    height: auto;
    min-height: 100px;
}
.carousel-track {
 list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
/* 所有slide默认隐藏 */
.carousel-slide {
 display: none !important;
    width: 100%;
    /*padding: 10px 0;*/
}
.carousel-slide.active {
display: block !important;  /* 只显示激活的 */
animation: fadeSlide 0.5s ease;
}
/* 信息分类样式 */
.hot-news {
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
padding-left: 15px;
position: relative;
}
.hot-news::before {
content: "热点";
position: absolute;
left: -45px;
top: 0;
background-color: #e53e3e;
color: white;
font-size: 12px;
padding: 2px 5px;
border-radius: 3px;
}
.warning-news {
font-size: 18px;
margin-bottom: 10px;
padding-left: 15px;
position: relative;
}
.warning-news::before {
content: "预警";
position: absolute;
left: -45px;
top: 0;
background-color: #ed8936;
color: white;
font-size: 12px;
padding: 2px 5px;
border-radius: 3px;
}
.event-news {
font-size: 18px;
padding-left: 15px;
position: relative;
}
.event-news::before {
content: "事件";
position: absolute;
left: -45px;
top: 0;
background-color: #3182ce;
color: white;
font-size: 12px;
padding: 2px 5px;
border-radius: 3px;
}
/* 轮播控制按钮 */
.carousel-controls {
/*position: absolute;
right: 0;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
flex-direction: column;
align-items: flex-end;
*/
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between; /* 左右各一个按钮 */
padding: 0 15px;
z-index: 10;
pointer-events: none;
}
.control-btn {
/* background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s;*/
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
pointer-events: auto;
opacity: 0.7;
}
.control-btn:hover {
/*background-color: rgba(0, 102, 204, 0.8);*/
background-color: white;
transform: scale(1.1);
opacity: 1;
color: #0066CC;
}
/* 轮播指示器 */
.headline-carousel .carousel-indicators {
  display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 4px;
}
.headline-carousel .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    padding: 0;
}
.headline-carousel .indicator.active {
background-color: #0066CC;
transform: scale(1.3);
}
/* 链接样式 */
.hot-news a, .warning-news a, .event-news a {
color: #333;
text-decoration: none;
transition: color 0.3s;
}
.hot-news a:hover, .warning-news a:hover, .event-news a:hover {
color: #0066CC;
text-decoration: underline;
}
.carousel-track {
list-style: none;
margin: 0;
padding: 0;
position: relative;
transition: transform 0.5s ease-in-out;
}
/* 资讯标签样式 */
.news-tag {
/*display: inline-flex;*/
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    margin-right: 8px;
    font-size: 14px;
    border-radius: 3px;
    color: white;
    line-height: 1.5;
    flex-shrink: 0;
    white-space: nowrap;
    vertical-align: middle;
}
/* 预警标签 - 红色系 */
.news-tag.warning {
background-color: #ff4d4f;
}
/* 案例标签 - 蓝色系 */
.news-tag.case {
background-color: #1890ff;
}
/* 文本超出省略样式 */
.main-headline-featured a,
.main-headline-item a {
/*display: inline; /* 保持链接为行内元素 */*/
vertical-align: middle; /* 与标签垂直居中对齐 */
display: -webkit-box;
-webkit-line-clamp: 1; /* 限制只显示一行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/*white-space: normal;*/
/* 增加内边距让文本显示更合理 */
/*padding: 4px 0;*/
display: block;
white-space: nowrap; /* 强制文本单行显示 */
line-height: 1.5; /* 与行高匹配 */
flex-grow: 1; /* 占据剩余空间 */
}
/* 轮播控制按钮调整 */
.carousel-controls {
flex-direction: column;
align-items: flex-end;
gap: 10px;
padding: 0 10px;
}
.control-btn {
width: 30px;
height: 30px;
font-size: 16px;
}
/* 模态框（原有弹窗） */
        .custom-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        }
        .custom-modal-content {
        background: white;
        max-width: 500px;
        width: 90%;
        border-radius: 10px;
        padding: 28px;
        position: relative;
        animation: fadeSlide 0.25s ease;
        }
        @keyframes fadeSlide {
        from { opacity: 0; transform: translateY(10px);}
        to { opacity: 1; transform: translateY(0);}
        }
        .custom-modal-close {
        position: absolute;
        right: 20px;
        top: 16px;
        font-size: 28px;
        cursor: pointer;
        color: #8f9bb2;
        }
        .modal-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        }
        .form-group {
        margin-bottom: 18px;
        }
        .form-group label {
        display: block;
        font-weight: 500;
        margin-bottom: 6px;
        }
        .form-group input, .form-group select {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #ced4da;
        }
        .checkbox-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        }
        .btn-submit-modal {
        background: #ff7a2f;
        border: none;
        padding: 10px;
        width: 100%;
        border-radius: 40px;
        color: white;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        margin-top: 12px;
        }
        .remain-count {
        text-align: right;
        font-size: 13px;
        color: #ff7a2f;
        margin-top: 10px;
        }
        .toast-tip {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background: #1f2d3d;
        color: white;
        padding: 10px 24px;
        border-radius: 40px;
        z-index: 10001;
        font-size: 14px;
        }
        @media (max-width: 768px) {
        .cases-grid { grid-template-columns: 1fr; }
        .service-grid { grid-template-columns: repeat(2,1fr);}
        }
        .service-free-badge{font-size: 12px;color: #2563eb;line-height: 2.5;}
        /* ========= 双模式选择弹窗样式（公益+付费）========= */
        .service-modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.65);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 20000;
        }
        .service-modal {
        width: 780px;
        max-width: 92%;
        background: #fff;
        /*border-radius: 20px;*/
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 20px 35px rgba(0,0,0,0.2);
        animation: fadeSlideUp 0.25s ease;
        }
        @keyframes fadeSlideUp {
        from { opacity: 0; transform: translateY(30px);}
        to { opacity: 1; transform: translateY(0);}
        }
        .modal-head {
        /*background: linear-gradient(135deg, #0a3e6d 0%, #1f6392 100%);*/
        background: #4874c4;
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
        .modal-head h3 {
        font-size: 20px;
        margin: 0;
        font-weight: 600;
        }
        .modal-close {
        font-size: 28px;
        cursor: pointer;
        opacity: 0.8;
        transition: 0.2s;
        line-height: 1;
        }
        .modal-close:hover {
        opacity: 1;
        transform: scale(1.05);
        }
        .modal-body {
        padding: 28px 28px 32px;
        }
        .modal-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        }
        .mod-card {
        border-radius: 10px;
        padding: 20px;
        transition: all 0.2s;
        background: #fafcff;
        border: 1px solid #e9edf4;
        }
        .mod-card.public {
        border-top: 5px solid #2b7e3a;
        background: linear-gradient(to bottom, #ffffff, #f9fff9);
        }
        .mod-card.paid {
        border-top: 5px solid #0066cc;
        background: linear-gradient(to bottom, #ffffff, #f2f8ff);
        }
        .mod-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        }
        .mod-title.public { color: #2b7e3a; }
        .mod-title.paid { color: #0066cc; }
        .mod-title i { font-size: 24px; }
        .mod-limit {
        background: #fff3e0;
        color: #b45f06;
        padding: 10px 14px;
        border-radius: 40px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 16px;
        display: inline-block;
        width: auto;
        }
        .mod-tip {
        background: #e8f0fe;
        color: #0066cc;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 13px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        }
        .mod-desc {
        font-size: 14px;
        color: #3c4b5f;
        line-height: 1.6;
        margin-bottom: 22px;
        min-height: 70px;
        }
        .modal-btn {
        width: 100%;
        padding: 10px 0;
        border-radius: 40px;
        border: none;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
        }
        .btn-public {
        background: #2b7e3a;
        color: white;
        box-shadow: 0 2px 6px rgba(43,126,58,0.3);
        }
        .btn-public:disabled {
        background: #b0c4b3;
        cursor: not-allowed;
        box-shadow: none;
        }
        .btn-paid {
        background: #0066cc;
        color: white;
        box-shadow: 0 2px 6px rgba(0,102,204,0.3);
        }
        .modal-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        filter: brightness(1.02);
        }
        @media (max-width: 680px) {
        .modal-two-col {
        grid-template-columns: 1fr;
        gap: 18px;
        }
        .modal-body {
        padding: 20px;
        }
        }
        body{
        /*padding:40px 20px;*/
        background:#f5f7fa;
        margin:0;
        }
        /* 等高布局核心 */
        .layui-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        }
        /* 外层大卡片 */
        .card-box{
        border-radius:10px;
        overflow:hidden;
        box-shadow:0 8px 24px rgba(0,0,0,0.06);
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        }
        /* 顶部Banner（匹配参考图浅蓝风格） */
        .card-top{
        /*height:300px;*/
        background:url('../image/zhineng2.png') no-repeat center;
        background-size: 100%;
        color:#ffffff;
        padding:30px;
        position:relative;
        flex-shrink: 0;
        border-radius: 10px;
        }
        .card-top .sub-text{
        font-size:24px;
        margin-top:60px;
        text-align:center;
        }
        .card-top .main-title{
        font-size:36px;
        font-weight:bold;
        /*text-align:center;*/
        position:absolute;
        top:50px;
        left:50px;
        width:100%;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* 内容区垂直居中 */
        .card-bottom{
      /*  background:#ffffff;
        padding-bottom: 25px;*/
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        .card-bottom .layui-row {
        width: 100%;
        align-items: center;
        }
        /* 功能卡片：参考图同款浅蓝底+圆角+轻阴影 */
        .func-item{
        background: linear-gradient(20deg, #fff 70%, #e6f2fe);
        border-radius:16px;
        padding:35px 10px;
        text-align:center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(64, 150, 255, 0.08);
        transition: all 0.3s ease;
        border: 1px solid rgba(220, 235, 255, 0.6);
        }
        .func-item:hover{
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(64, 150, 255, 0.15);
        }
        .func-item1{
        /*background:#f0f7ff;*/
        border-radius:16px;
        /*padding:35px 10px;*/
        text-align:center;
        cursor: pointer;
        /*box-shadow: 0 2px 8px rgba(64, 150, 255, 0.08);*/
        transition: all 0.3s ease;
        /*border: 1px solid rgba(220, 235, 255, 0.6);*/
        }
        .func-item1:hover{
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(64, 150, 255, 0.15);
        }
        /* ====================== 核心：1:1复刻参考图六边形效果 ====================== */
        .hex-icon{
        width:115px;
        height:102px;
        margin:0 auto 20px;
        /* 正六边形裁切 */
        clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
        /* 参考图同款渐变：浅蓝到更浅蓝，模拟3D凸起 */
        background: linear-gradient(145deg, #d6ecfd 0%, #f0f7ff 100%);
        /* 轻阴影强化凸起感，匹配参考图的柔和立体 */
        box-shadow: 0 4px 8px rgba(64, 150, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display:flex;
        align-items:center;
        justify-content:center;
        position: relative;
        }
        /* 图标容器：模拟参考图3D渐变图标 */
        .hex-icon .icon-wrap {
        width: 80px;
        height: 70px;
        border-radius: 8px;
        clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
        /*background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);*/
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 6px rgba(22, 119, 255, 0.25);
        position: relative;
        overflow: hidden;
        }
        /* 图标高光：还原参考图的立体光泽 */
        .hex-icon .icon-wrap::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 40%;
        height: 40%;
        background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
        border-radius: 50%;
        }
        /* 图标样式：白色粗体，匹配参考图 */
        .hex-icon i{
        font-size: 32px;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        z-index: 1;
        }
        .hex-icon1{
        width:100px;
        height:87px;
        margin:0 auto 10px auto;
        display:flex;
        align-items:center;
        justify-content:center;
        position: relative;
        }
        /* 图标容器：模拟参考图3D渐变图标 */
        .hex-icon1 .icon-wrap {
        width: 70px;
        height: 70px;
        border-radius: 8px;
        /*background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);*/
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 6px rgba(22, 119, 255, 0.25);
        position: relative;
        overflow: hidden;
        }
        /* 图标高光：还原参考图的立体光泽 */
        .hex-icon1 .icon-wrap::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 40%;
        height: 40%;
        background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
        border-radius: 50%;
        }
        /* 图标样式：白色粗体，匹配参考图 */
        .hex-icon1 i{
        font-size: 32px;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        z-index: 1;
        }
        /* 公益服务 - 参考图 蓝绿色系（匹配左侧图标） */
        .icon-teal1 { background: linear-gradient(135deg, #2D9CDB, #56CCF2); } /* 浅蓝 */
        .icon-teal2 { background: linear-gradient(135deg, #0F9D58, #34A853); } /* 绿色 */
        .icon-teal3 { background: linear-gradient(135deg, #4285F4, #5F63F2); } /* 深蓝 */
        /* 产品超市 - 参考图 蓝/橙色系（匹配中间图标） */
        .icon-blue1 { background: linear-gradient(135deg, #2F80ED, #597EF7); } /* 主蓝 */
        .icon-blue2 { background: linear-gradient(135deg, #1877F2, #4267B2); } /* 深蓝 */
        .icon-orange1 { background: linear-gradient(135deg, #F59E0B, #F97316); } /* 主橙 */
        .icon-orange2 { background: linear-gradient(135deg, #EA580C, #F97316); } /* 深橙 */
        .icon-green1 { background: linear-gradient(135deg, #27AE60, #6FCF97); } /* 主绿 */
        .icon-green2 { background: linear-gradient(135deg, #10B981, #34D399); } /* 浅绿 */
        /* 付费服务 - 参考图 蓝/橙/绿 复用（匹配右侧图标） */
        .icon-pay1 { background: linear-gradient(135deg, #2F80ED, #597EF7); } /* 蓝 */
        .icon-pay2 { background: linear-gradient(135deg, #F59E0B, #F97316); } /* 橙 */
        .icon-pay3 { background: linear-gradient(135deg, #27AE60, #6FCF97); } /* 绿 */
        /* ========================================================================== */
        /* 文字样式：参考图同款黑色粗体大字号 */
        .func-name{
        font-size: 22px;
        color: #333;
        font-weight: 700;
        line-height: 1.2;
        }
        /* 顶部飘带标题（带左右折角） */
        .card-title {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #1677FF;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        padding: 9px 36px;
        border-radius: 12px;
        z-index: 2;
        }
        /* 飘带左折角 */
        .card-title::before {
        content: "";
        position: absolute;
        left: -20px;
        bottom: 0;
        border-bottom: 24px solid #0F66E6;
        border-left: 20px solid transparent;
        }
        /* 飘带右折角 */
        .card-title::after {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        border-bottom: 24px solid #0F66E6;
        border-right: 20px solid transparent;
        }
        
        
        .member-wrap {
        background: #fafafa;
        padding: 80px 0;
        overflow: hidden;
        }
        .member-title {
        text-align: center;
        margin-bottom: 60px;
        }
        .member-title h2 {
        font-size: 38px;
        color: #111;
        font-weight: 700;
        margin: 0;
        font-family: "Microsoft Yahei", sans-serif;
        }
        /* 轮播外层 */
        .logo-swiper {
        position: relative;
        width: 100%;
        overflow: hidden;
        }
        /* 横向滚动轨道 */
        .logo-track {
        display: flex;
        transition: transform 0.5s ease;
        }
        /* 每一组 = 3行5列 */
        .logo-group {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /*padding: 0 10px;*/
        box-sizing: border-box;
        }
        /* 每一项：5列 */
        .logo-item {
        width: 12.5%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 25px;
        }
        /* 卡片样式 */
        .logo-card {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        }
        .logo-card img {
        max-width: 85%;
        max-height: 70%;
        object-fit: contain;
        }
        /* 左右按钮 */
        .swiper-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #eee;
        text-align: center;
        line-height: 38px;
        font-size: 18px;
        color: #666;
        cursor: pointer;
        z-index: 10;
        user-select: none;
        }
        .swiper-btn:hover {
        background: #165DFF;
        color: #fff;
        border-color: #165DFF;
        }
        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }
        /* 响应式 */
        @media (max-width: 991px) {
        .logo-item { width: 25%; }
        }
        @media (max-width: 767px) {
        .logo-item { width: 50%; }
        }
        @media (max-width: 480px) {
        .logo-item { width: 100%; }
        }
           /* 对话气泡左侧圆点 */
.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1886F7;
  margin-top: 6px;
  flex-shrink: 0;
}
/* 功能图标统一尺寸配色，匹配原图浅蓝色图标 */
.func-icon-box {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F0F7FF;
  margin-bottom: 8px;
}
.func-icon-box i {
  font-size: 26px;
  color: #1886F7;
}
/* 机器人定位：悬浮在AI卡片右上角，超出卡片边缘，和原图完全一致 */
.robot-wrap {
  position: absolute;
  right: 32px;
  top: -20px;
  width: 160px;
  height: 180px;
  pointer-events: none;
}
.robot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ========== 优化后预约弹窗样式 ========== */
#modalContent {
    display: none;
}
.modal-wrap {
    /*width: 1200px;*/
    width: 1000px;
    /*padding: 40px 45px 35px;*/
    padding: 15px;
    background: #ffffff;
    border-radius: 20px;
    position: relative;
}
.modal-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #1886F7, #6cb2ff, #1886F7);
    background-size: 200% 100%;
    border-radius: 20px 20px 0 0;
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.modal-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
    display: flex;
    align-items: center;
    gap: 14px;
}
.modal-title::before {
    content: '📋';
    font-size: 32px;
}
.modal-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #e5e7eb, transparent);
    margin-left: 10px;
}
.modal-row {
    display: grid;
    grid-template-columns: 40% 55%;
    gap: 3%;
}
/* 左侧服务卡片 - 优化 */
.service-card {
    border: none;
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(145deg, #f8fbff, #f0f7ff);
    box-shadow: 0 4px 20px rgba(24, 134, 247, 0.08);
    transition: transform 0.3s ease;
}
.service-card:hover {
    transform: translateY(-2px);
}
.service-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.shield-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1886F7, #0F70E0);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(24, 134, 247, 0.3);
    flex-shrink: 0;
}
.service-title {
    font-size: 24px;
    font-weight: 700;
    color: #0a1e3c;
    letter-spacing: 1px;
}
.service-text p {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 12px;
    color: #444;
    padding-left: 4px;
    border-left: 3px solid transparent;
    padding-left: 12px;
}
.service-text p:first-of-type {
    border-left-color: #1886F7;
}
.service-text p:nth-of-type(2) {
    border-left-color: #36c88c;
}
.service-text p:nth-of-type(3) {
    border-left-color: #f5a623;
}
.service-text p:nth-of-type(4) {
    border-left-color: #e74c8b;
}
.service-text strong {
    color: #0a1e3c;
    font-weight: 600;
}
/* 右侧表单 - 优化 */
.form-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 8px 0;
}
.form-item {
    /*display: flex;*/
    align-items: center;
    margin-bottom: 10px;
    /*margin-bottom: 16px;*/
    background: #f8fafc;
    border-radius: 10px;
    padding: 2px 4px 2px 18px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.form-item:focus-within {
    background: #ffffff;
    border-color: #1886F7;
    box-shadow: 0 0 0 6px rgba(24, 134, 247, 0.08);
}
.form-label {
    width: 110px;
    font-size: 15px;
    color: #1a2a4a;
    font-weight: 500;
    flex-shrink: 0;
}
.form-label i {
    color: #1886F7;
    margin-right: 6px;
    width: 18px;
}
.form-input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0 14px 0 4px;
    font-size: 15px;
    color: #1a2a4a;
    outline: none;
}
.form-input::placeholder {
    color: #aab3c5;
    font-size: 14px;
}
textarea.form-input {
    height: 76px;
    padding-top: 12px;
    resize: none;
    line-height: 1.6;
    width: 100%;
}
/* 底部按钮 - 优化 */
.modal-bottom {
    /*margin-top: 34px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
}
.btn-reset {
    width: 100px;
    height: 36px;
    border: 2px solid #e5e7eb;
    background: #fafbfc;
    font-size: 16px;
    border-radius: 25px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}
.btn-reset:hover {
    background: #f0f2f5;
    border-color: #d0d5dd;
    transform: translateY(-1px);
}
.btn-submit {
    width: 140px;
    height: 36px;
    background: linear-gradient(135deg, #1886F7, #0F70E0);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 28px rgba(24, 134, 247, 0.35);
    letter-spacing: 2px;
}
.btn-submit:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 36px rgba(24, 134, 247, 0.45);
}
.btn-submit:active {
    transform: scale(0.97);
}
/* 预约成功弹窗 - 优化 */
#successModalContent {
    display: none;
    padding: 50px 45px 40px;
    width: 1000px;
    background: #ffffff;
    border-radius: 20px;
    position: relative;
}
#successModalContent::before {
        content: '✅';
    position: absolute;
    top: 25px;           /* 保持略微超出顶部 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;      /* 从 60px 改小到 32px */
    background: #fff;
    padding: 0 12px;      /* 适当增加内边距 */
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(24, 134, 247, 0.12);  /* 阴影调淡一点 */
    line-height: 1;       /* 确保图标垂直居中 */
}
.success-main-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #0a1e3c;
    margin-bottom: 8px;
    margin-top: 30px;
}
.success-sub-text {
    text-align: center;
    font-size: 18px;
    color: #1886F7;
    margin-bottom: 34px;
    font-weight: 500;
}
.success-sub-text::before {
    content: '⏰ ';
}
.success-row-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
.success-info-card {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 24px 28px;
    background: #fafcff;
    transition: all 0.3s ease;
}
.success-info-card:hover {
    border-color: #1886F7;
    box-shadow: 0 4px 20px rgba(24, 134, 247, 0.06);
}
.success-info-card p {
    font-size: 17px;
    line-height: 2.4;
    color: #1a2a4a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.success-info-card p span:first-child {
    color: #8895aa;
    font-weight: 400;
    min-width: 90px;
}
.success-info-card p span:last-child {
    font-weight: 500;
    color: #0a1e3c;
}
.tip-box {
    background: linear-gradient(135deg, #f0f7ff, #e8f1fe);
    border-radius: 14px;
    padding: 20px 28px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-left: 5px solid #1886F7;
}
.tip-title {
    font-size: 18px;
    font-weight: 700;
    color: #0a1e3c;
    flex-shrink: 0;
}
.tip-text {
    font-size: 17px;
    color: #1a3a6a;
}
.tip-text::before {
    content: '💡 ';
}
.success-btn-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #f0f2f5;
}
.btn-back-home {
    width: 120px;
    height: 48px;
    border: 2px solid #e5e7eb;
    background: #fafbfc;
    font-size: 17px;
    border-radius: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}
.btn-back-home:hover {
    background: #f0f2f5;
    border-color: #d0d5dd;
}
.btn-look-order {
    width: 260px;
    height: 58px;
    background: linear-gradient(135deg, #1886F7, #0F70E0);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 28px rgba(24, 134, 247, 0.3);
    letter-spacing: 1px;
}
.btn-look-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(24, 134, 247, 0.4);
}
.func-item1 {
    cursor: pointer;
}
.func-item1:hover {
    background: #f0f7ff;
    border-radius: 8px;
}
/* 弹窗关闭按钮优化 - 针对Layui */
.layui-layer-close {
    transition: transform 0.3s ease;
}
.layui-layer-close:hover {
    transform: rotate(90deg);
}
/* 响应式 */
@media (max-width: 1250px) {
    .modal-wrap, #successModalContent {
        width: 95%;
        padding: 30px 24px;
    }
    .modal-row {
        /*grid-template-columns: 1fr;*/
        grid-template-columns: 40% 55%;
        gap: 24px;
    }
    .success-row-wrap {
        grid-template-columns: 1fr;
    }
    .modal-title {
        font-size: 26px;
    }
    .service-title {
        font-size: 24px;
    }
    .form-item {
        padding-left: 12px;
        flex-wrap: wrap;
    }
    .form-label {
        width: 100%;
        padding: 8px 0 2px;
        font-size: 14px;
    }
    .form-input {
        height: 42px;
        font-size: 14px;
    }
    .btn-submit {
        width: 180px;
        height: 48px;
        font-size: 17px;
    }
    .btn-look-order {
        width: 200px;
        height: 50px;
        font-size: 17px;
    }
    .success-main-title {
        font-size: 28px;
    }
}
  /* 对话气泡左侧圆点 */
.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1886F7;
  margin-top: 6px;
  flex-shrink: 0;
}
/* 功能图标统一尺寸配色，匹配原图浅蓝色图标 */
.func-icon-box {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F0F7FF;
  margin-bottom: 8px;
}
.func-icon-box i {
  font-size: 26px;
  color: #1886F7;
}
/* 机器人定位：悬浮在AI卡片右上角，超出卡片边缘，和原图完全一致 */
.robot-wrap {
  position: absolute;
  right: 32px;
  top: -20px;
  width: 160px;
  height: 180px;
  pointer-events: none;
}
.robot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tip-box {
    background: linear-gradient(135deg, #f0f7ff, #e8f1fe);
    border-radius: 14px;
    padding: 20px 28px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-left: 5px solid #1886F7;
}
.tip-title {
    font-size: 18px;
    font-weight: 700;
    color: #0a1e3c;
    flex-shrink: 0;
}
.tip-text {
    font-size: 17px;
    color: #1a3a6a;
}
.tip-text::before {
    content: '💡 ';
}
.success-btn-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #f0f2f5;
}
.btn-back-home {
    width: 120px;
    height: 48px;
    border: 2px solid #e5e7eb;
    background: #fafbfc;
    font-size: 17px;
    border-radius: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}
.btn-back-home:hover {
    background: #f0f2f5;
    border-color: #d0d5dd;
}
.btn-look-order {
    width: 260px;
    height: 58px;
    background: linear-gradient(135deg, #1886F7, #0F70E0);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 28px rgba(24, 134, 247, 0.3);
    letter-spacing: 1px;
}
.btn-look-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(24, 134, 247, 0.4);
}
@media (max-width: 1250px) {
    #successModalContent {
        width: 95%;
        padding: 40px 24px 30px;
    }
    .success-row-wrap {
        grid-template-columns: 1fr;
    }
    .success-main-title {
        font-size: 28px;
    }
    .btn-look-order {
        width: 200px;
        height: 50px;
        font-size: 17px;
    }
}
/* 在 index.css 末尾添加以下样式 */

/* ========== 小屏设备全面适配 (针对400x557尺寸) ========== */
@media (max-width: 480px) {
    /* 整体容器强制约束 */
    .core-functions-container,
    .headline-content,
    .suppliers-section,
    .main-headlines-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 头部区域 */
    .header-banner {
        height: 80px !important;
        background-size: cover !important;
        background-position: center !important;
        background-image: url(../image/background4.png);
    }

    .main-title {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    .sub-title {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        margin: 5px auto;
    }

    /* 导航菜单 - 改为可滑动 */
    /* 导航菜单 - 480px 下显示汉堡按钮，隐藏横向菜单 */
.main-nav {
    height: 48px !important;
    overflow: visible !important;      /* ← 关键：不能用 auto */
    white-space: normal !important;    /* ← 关键：不能用 nowrap */
    position: relative !important;     /* ← 关键：给按钮定位做参照 */
}

.nav-container {
    position: relative !important;     /* ← 关键 */
    padding: 0 50px 0 12px !important; /* ← 右侧留出按钮空间 */
    text-align: left !important;
}

.nav-menu {
    display: none !important;          /* ← 小屏隐藏横向菜单 */
}

.mobile-menu-btn {
    display: block !important;          /* ← 强制显示 */
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    padding: 6px 10px !important;
    z-index: 1001 !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 6px !important;
}

.mobile-nav-dropdown {
    top: 48px !important;              /* ← 跟随新高度 */
    z-index: 1000 !important;
}
    /* 头条轮播 - 高度自适应 */
    .headline-carousel {
         position: relative;
    overflow: hidden;
    height: auto;
    /*min-height: 105px;*/
    max-height: 100px;  /* 限制最大高度，防止空白 */
    }
.carousel-track {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
    .carousel-slide {
        display: none;  /* 默认全部隐藏 */
    width: 100%;
    /*padding: 10px 0;*/
    /*animation: fadeSlide 0.5s ease;*/
    }

    .main-headline-featured a {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        white-space: normal !important;
        font-size: 13px !important;
        background: none !important;
        color: #003366 !important;
        animation: none !important;
        text-align: left !important;
        padding-bottom: 2px;
    }
.main-headline-featured {
        text-align: left !important;
    }
    .main-headline-items {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .main-headline-item {
        height: auto !important;
        min-height: 28px;
        /*padding-left: 12px !important;*/
        font-size: 13px !important;
    }

    .main-headline-item a {
        font-size: 12px !important;
        white-space: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .news-tag {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }
  .carousel-indicator {
        width: 8px;
        height: 8px;
    }
    /* 头条下方：改为上下排列 */
    .headline-content {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 15px auto !important;
    }

    /* 轮播图区域 - 固定高度 */
    .carousel-section {
        /*height: 200px !important;
        flex: none !important;
        width: 100% !important;
        border-radius: 8px !important;*/
        position: relative;
    overflow: hidden;
    border-radius: 12px;
    }

    .carousel-item {
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .carousel-caption {
        padding: 30px 15px 15px !important;
    }

    .carousel-main-title {
        font-size: 15px !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
    }

    .carousel-main-title::after {
        width: 40px !important;
        height: 2px !important;
    }

    .carousel-subtitle {
        font-size: 12px !important;
        max-height: 36px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .carousel-source,
    .carousel-date {
        font-size: 10px !important;
        padding: 2px 8px !important;
        top: 8px !important;
    }

    .carousel-date {
        left: 8px !important;
    }
    .carousel-source {
        right: 8px !important;
    }

    .carousel-control {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
        opacity: 0.6 !important;
    }

    .carousel-indicators {
        bottom: 12px !important;
        gap: 8px !important;
    }

    .carousel-indicator {
        width: 8px !important;
        height: 8px !important;
    }

    .carousel-indicator.active {
        transform: scale(1.3) !important;
    }

    /* 资讯区域 */
    .news-section {
        height: auto !important;
        min-height: 320px !important;
        flex: none !important;
        width: 100% !important;
        border-radius: 8px !important;
        padding: 0 !important;
    }

    .news-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 4px !important;
        padding: 0 4px;
    }

    .news-tab {
        font-size: 14px !important;
        padding: 10px 8px !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .news-tab .badge {
        font-size: 10px !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        margin-left: 2px !important;
    }

    .tab-content {
        padding: 8px 10px !important;
    }

    .news-item {
        padding: 6px 0 !important;
    }

    .news-item a {
        font-size: 14px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
    }

    .news-meta {
        font-size: 12px !important;
        margin: 2px 0 !important;
    }

    .news-category {
        font-size: 11px !important;
        padding: 1px 6px !important;
    }

    .more-news {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }

    /* 核心功能区 */
    .core-functions-container {
        margin: 10px auto !important;
        padding: 0 8px !important;
    }

    .section-title {
        font-size: 20px !important;
        margin-bottom: 16px !important;
        padding-bottom: 8px !important;
    }

    .section-title::after {
        width: 50px !important;
        height: 3px !important;
    }

    /* 服务大厅 - 改为上下排列 */
    .layui-row.layui-col-space20 {
        flex-direction: column !important;
    }

    .layui-col-md5,
    .layui-col-md7 {
        width: 100% !important;
        padding: 0 !important;
    }

    .layui-col-md5 {
        margin-bottom: 12px !important;
    }

    .card-box {
        height: auto !important;
        min-height: auto !important;
    }

    .card-top {
        height: 120px !important;
        background-size: cover !important;
        background-position: center !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .card-bottom {
        padding: 10px 0 !important;
        flex-wrap: wrap !important;
    }

    /* 便民咨询电话 */
    .bg-cardBg.rounded-xl {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .bg-cardBg .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .bg-cardBg .w-11.h-11 {
        width: 36px !important;
        height: 36px !important;
    }

    .bg-cardBg .w-11.h-11 i {
        font-size: 16px !important;
    }

    .bg-cardBg .text-textGray {
        font-size: 16px !important;
    }

    .bg-cardBg .text-\\[\\#555\\] {
        font-size: 13px !important;
    }

    .bg-cardBg button {
        font-size: 14px !important;
        padding: 6px 18px !important;
        width: 100% !important;
    }

    /* 预约定制服务入口 */
    .tab-header {
        padding: 6px 10px !important;
        margin-bottom: 8px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .tab-header h4 {
        font-size: 16px !important;
    }

    .view-more {
        font-size: 12px !important;
    }

    /* 功能图标网格 - 改为3列 */
    .layui-col-md3 {
        width: 25% !important;
        padding: 4px 2px !important;
         /*float: left !important;  /* 确保左浮动 */*/
          padding: 4px 6px !important;
    box-sizing: border-box !important;
    }

    .func-item1 {
        padding: 6px 2px !important;
    }

    .hex-icon1 {
        width: 52px !important;
        height: 46px !important;
        margin: 0 auto 4px !important;
    }

    .hex-icon1 .icon-wrap {
        width: 40px !important;
        height: 40px !important;
    }

    .hex-icon1 i {
        font-size: 18px !important;
    }

    .func-name {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* 专家咨询区域 */
    .smart-service-enhancement {
        margin: 10px 0 !important;
        padding: 0 !important;
    }

    .expert-connection {
        padding: 16px 12px !important;
    }

    .expert-connection-title {
        font-size: 16px !important;
        flex-wrap: wrap !important;
        text-align: center !important;
    }

    .expert-connection-btn {
        font-size: 14px !important;
        padding: 10px 20px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .response-time {
        font-size: 12px !important;
        margin-top: 6px !important;
    }

    /* 案例库 + 政策 */
    .function-content {
        width: 100% !important;
        padding: 8px 0 !important;
    }

    .cases-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .case-card {
        padding: 12px !important;
    }

    .case-card h5 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .case-card p {
        font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
        margin-bottom: 6px !important;
    }

    .case-meta {
        font-size: 11px !important;
        gap: 8px !important;
        float: none !important;
    }

    .case-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }

    .case-icon i {
        font-size: 16px !important;
    }

    /* 政策解读 */
    .database-title {
        font-size: 18px !important;
        padding-bottom: 6px !important;
        margin-bottom: 8px !important;
    }

    .policy-tabs-header {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    .policy-tab {
        font-size: 14px !important;
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }

    .policy-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px !important;
    }

    .policy-date {
        font-size: 13px !important;
        padding: 6px 10px !important;
        min-width: auto !important;
        text-align: center !important;
    }

    .policy-info {
        padding: 8px 4px !important;
    }

    .policy-info p {
        font-size: 13px !important;
    }

    .policy-info .news-date {
        font-size: 12px !important;
    }

    .interpretation-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px !important;
        gap: 4px !important;
        width: 100%;
    overflow: hidden;
    }

    .interpretation-item h5 {
        font-size: 14px !important;
    }

    .interpretation-item .meta {
        font-size: 12px !important;
        display: block;
    margin-top: 4px;
    white-space: nowrap;
    }

    /* 友情链接 */
    .friend-links-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 4px !important;
    }

    .friend-link-card {
        padding: 6px 8px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        min-height: 32px !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .friend-link-card .link-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }

    .friend-link-card .link-name {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .friend-link-card .link-arrow {
        font-size: 10px !important;
    }

    .divider-line {
        margin: 8px auto !important;
    }

    /* 页脚 */
    .footer {
        padding: 12px 8px !important;
    }

    .footer-info {
        font-size: 12px !important;
    }
    .footer-info p {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* 侧边栏快捷方式 - 缩小并调整为下方横排 */
   /* .fixed-shortcuts {
        right: 4px !important;
        bottom: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        padding: 4px 8px !important;
        border-radius: 20px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
        backdrop-filter: blur(4px) !important;
    }

    .fixed-shortcuts ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
    }

    .fixed-shortcuts li {
        margin-bottom: 0 !important;
        margin-right: 2px !important;
    }

    .fixed-shortcuts a {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        padding: 4px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .fixed-shortcuts a i {
        font-size: 18px !important;
        margin-bottom: 0 !important;
    }

    .fixed-shortcuts a span {
        display: none !important;
    }

    .fixed-shortcuts a:hover {
        background: #0066CC !important;
        transform: scale(1.05) !important;
    }*/

    /* 弹窗适配 */
    .modal-wrap,
    #successModalContent {
        width: 95% !important;
        padding: 16px !important;
        margin: 10px auto !important;
    }

    .modal-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .modal-title {
        font-size: 20px !important;
        flex-wrap: wrap !important;
    }

    .service-card {
        padding: 12px !important;
    }

    .service-title {
        font-size: 18px !important;
    }

    .service-text p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding-left: 8px !important;
    }

    .form-item {
        padding: 2px 4px 2px 10px !important;
        flex-wrap: wrap !important;
        margin-bottom: 6px !important;
    }

    .form-label {
        width: 100% !important;
        font-size: 13px !important;
        padding: 4px 0 2px !important;
    }

    .form-input {
        height: 34px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
    }

    textarea.form-input {
        height: 56px !important;
    }

    .modal-bottom {
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }

    .btn-reset,
    .btn-submit {
        width: 100% !important;
        height: 40px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
    }

    /* 成功弹窗 */
    #successModalContent {
        padding: 30px 16px 20px !important;
    }

    .success-main-title {
        font-size: 22px !important;
        margin-top: 20px !important;
    }

    .success-sub-text {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .success-row-wrap {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .success-info-card {
        padding: 12px 16px !important;
    }

    .success-info-card p {
        font-size: 14px !important;
        line-height: 2 !important;
        flex-wrap: wrap !important;
    }

    .success-info-card p span:first-child {
        min-width: 70px !important;
        font-size: 13px !important;
    }

    .tip-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 16px !important;
        gap: 6px !important;
    }

    .tip-title {
        font-size: 14px !important;
    }
    .tip-text {
        font-size: 13px !important;
    }

    .success-btn-area {
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }

    .btn-back-home,
    .btn-look-order {
        width: 100% !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 22px !important;
    }

    /* AI弹窗适配 */
    .ai-chat-modal-wrap {
        width: 100% !important;
        padding: 10px !important;
    }

    .ai-chat-header {
        font-size: 14px !important;
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
    }

    .chat-messages {
        max-height: 280px !important;
        padding: 8px !important;
    }

    .chat-msg .msg-bubble {
        font-size: 13px !important;
        padding: 8px 12px !important;
        max-width: 85% !important;
    }

    .chat-input-area {
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .chat-input-area input {
        font-size: 13px !important;
        height: 32px !important;
        flex: 1 !important;
        min-width: 120px !important;
    }

    .chat-input-area button {
        font-size: 13px !important;
        padding: 4px 14px !important;
        height: 32px !important;
    }

    .chat-quick-tags {
        gap: 4px !important;
        padding: 4px 6px !important;
        flex-wrap: wrap !important;
    }

    .chat-quick-tags span {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    /* 隐藏不必要的装饰 */
    .security-pattern,
    .header-banner .main-title::after {
        display: none !important;
    }

    /* 强制所有浮动清除 */
    .layui-col-md12 {
        width: 100% !important;
        padding: 0 !important;
    }

    .layui-row {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 确保所有容器不溢出 */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 表格、flex等强制换行 */
    .layui-row.layui-col-space15,
    .layui-row.layui-col-space20 {
        margin: 0 !important;
    }

    .layui-col-space15 > *,
    .layui-col-space20 > * {
        padding: 4px !important;
    }
}

/* ========== 极窄屏额外修复 (宽度<400px) ========== */
@media (max-width: 400px) {
    .main-title {
        font-size: 5vh !important;
    }

    .sub-title {
        font-size: 3vh !important;
    }

    .layui-nav .layui-nav-item a {
        font-size: 13px !important;
        padding: 0 6px !important;
    }

    .layui-col-md3 {
        width: 50% !important;
    }

    .carousel-section {
        height: 170px !important;
    }

    .carousel-main-title {
        font-size: 13px !important;
    }
    .carousel-subtitle {
        font-size: 11px !important;
        -webkit-line-clamp: 2 !important;
    }

    .cases-grid {
        grid-template-columns: 1fr !important;
    }

    .friend-links-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    .friend-link-card {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    .friend-link-card .link-name {
        font-size: 10px !important;
    }

    .fixed-shortcuts a {
        width: 36px !important;
        height: 36px !important;
    }

    .fixed-shortcuts a i {
        font-size: 15px !important;
    }

    .hex-icon1 {
        width: 44px !important;
        height: 38px !important;
    }

    .hex-icon1 .icon-wrap {
        width: 34px !important;
        height: 34px !important;
    }

    .hex-icon1 i {
        font-size: 15px !important;
    }

    .func-name {
        font-size: 11px !important;
    }

    .news-item a {
        font-size: 13px !important;
    }

    .tab-header h4 {
        font-size: 14px !important;
    }
}
/* ===== AI对话弹窗样式 (优化版 - 无多余背景) ===== */
        .ai-chat-modal-wrap {
        width: 720px;
        max-width: 95vw;
        background: #ffffff;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 25px 80px rgba(0,0,0,0.18);
        position: relative;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .ai-chat-modal-wrap .ai-chat-header {
        background: linear-gradient(135deg, #1886F7, #0F70E0);
        padding: 20px 28px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .ai-chat-modal-wrap .ai-chat-header i {
        font-size: 26px;
        }
        .ai-chat-modal-wrap .ai-chat-header span {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.3px;
        }
        .ai-chat-modal-wrap .ai-chat-header .header-tip {
        font-size: 13px;
        font-weight: 400;
        opacity: 0.8;
        margin-left: auto;
        padding: 4px 14px;
        border-radius: 30px;
        }
        .ai-chat-modal-wrap .ai-chat-body {
        padding: 20px 24px 24px;
        background: #f8faff;
        }
        .ai-chat-modal-wrap .chat-messages {
        height: 360px;
        overflow-y: auto;
        background: #ffffff;
        border-radius: 16px;
        padding: 18px 20px;
        border: 1px solid #eef2f8;
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
        }
        .ai-chat-modal-wrap .chat-msg {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        animation: fadeIn 0.35s ease;
        }
        .ai-chat-modal-wrap .chat-msg.bot .msg-bubble {
        background: #f0f7ff;
        color: #1a2a4a;
        border-radius: 6px 18px 18px 18px;
        border-left: 3px solid #1886F7;
        }
        .ai-chat-modal-wrap .chat-msg.user .msg-bubble {
        background: linear-gradient(135deg, #1886F7, #0F70E0);
        color: #fff;
        border-radius: 18px 6px 18px 18px;
        margin-left: auto;
        box-shadow: 0 4px 12px rgba(24,134,247,0.25);
        }
        .ai-chat-modal-wrap .chat-msg .msg-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .ai-chat-modal-wrap .chat-msg.bot .msg-avatar {
        background: #e8f1fe;
        color: #1886F7;
        }
        .ai-chat-modal-wrap .chat-msg.user .msg-avatar {
        background: #1886F7;
        color: #fff;
        }
        .ai-chat-modal-wrap .msg-bubble {
        padding: 12px 20px;
        font-size: 15px;
        line-height: 1.75;
        max-width: 82%;
        word-break: break-word;
        }
        .ai-chat-modal-wrap .chat-input-area {
        display: flex;
        gap: 12px;
        }
        .ai-chat-modal-wrap .chat-input-area input {
        flex: 1;
        height: 48px;
        border: 2px solid #e5e9f0;
        border-radius: 12px;
        padding: 0 18px;
        font-size: 15px;
        outline: none;
        transition: all 0.3s ease;
        background: #fff;
        }
        .ai-chat-modal-wrap .chat-input-area input:focus {
        border-color: #1886F7;
        box-shadow: 0 0 0 4px rgba(24,134,247,0.08);
        }
        .ai-chat-modal-wrap .chat-input-area button {
        height: 48px;
        padding: 0 32px;
        background: linear-gradient(135deg, #1886F7, #0F70E0);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 14px rgba(24,134,247,0.3);
        }
        .ai-chat-modal-wrap .chat-input-area button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(24,134,247,0.35);
        }
        .ai-chat-modal-wrap .chat-quick-tags {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        flex-wrap: wrap;
        }
        .ai-chat-modal-wrap .chat-quick-tags span {
        padding: 15px 18px;
        background: #f0f7ff;
        color: #1886F7;
        border-radius: 30px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.25s ease;
        border: 1px solid transparent;
        font-weight: 500;
        }
        .ai-chat-modal-wrap .chat-quick-tags span:hover {
        background: #1886F7;
        color: #fff;
        border-color: #1886F7;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(24,134,247,0.25);
        }
        @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
        }
        .ai-chat-modal-wrap .chat-messages::-webkit-scrollbar {
        width: 5px;
        }
        .ai-chat-modal-wrap .chat-messages::-webkit-scrollbar-thumb {
        background: #d0d8e6;
        border-radius: 6px;
        }
        .ai-chat-modal-wrap .chat-messages::-webkit-scrollbar-track {
        background: transparent;
        }
        /* card-box 内部分隔 */
        .card-box .card-top {
        padding-bottom: 18px;
        border-bottom: 2px solid #eef2f8;
        margin-bottom: 18px;
        }
        .card-box .card-top .section-subtitle {
        font-size: 18px;
        font-weight: 600;
        color: #1a3c6e;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        }
        .card-box .card-top .section-subtitle i {
        color: #1886F7;
        font-size: 22px;
        }
        .card-box .card-top .ai-hint {
        font-size: 13px;
        color: #8899aa;
        text-align: center;
        margin-top: 12px;
        padding: 6px 16px;
        background: #f5f8fe;
        border-radius: 20px;
        display: inline-block;
        border: 1px dashed #c8d8ec;
        }
        .card-box .card-top .ai-hint i {
        color: #1886F7;
        margin-right: 6px;
        }
        /* 点击card-top图片的游标 */
        .card-top {
        cursor: pointer;
        }
        .card-top img {
        pointer-events: none;
        }
        /* 修复layui弹窗内多余背景 */
        .layui-layer-content {
        background: transparent !important;
        }
        .layui-layer {
        background: transparent !important;
        box-shadow: none !important;
        }
        .layui-layer-page .layui-layer-content {
        overflow: visible !important;
        }