/* ==================== 基础 ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; line-height: 1.5; color: #333; background: #f5f8fa;
    overflow-x: hidden;
}
img { max-width: 100%; border: 0; }
a { text-decoration: none; color: #333; transition: color .2s; }
a:hover { color: #0288d9; }
ul, li { list-style: none; }
button { font-family: inherit; }

.w_1080 { width: 1080px; max-width: calc(100% - 24px); margin: 0 auto; }

/* ==================== 顶部横幅（图片完整显示，不裁剪） ==================== */
.header-wrap { background: #fff; }
.header {
    height: auto;               /* 关键：不再固定高度 */
    background: #e9edf2;
    overflow: hidden;
}
.header img {
    display: block;
    width: 100%;
    height: auto;               /* 关键：按比例自适应，完整显示 */
}

/* ==================== 导航 ==================== */
.nav {
    position: relative; z-index: 1000; height: 48px;
    background: #0288d9 url('__CDN__/assets/home/images/navbg.jpg') center / cover no-repeat;
}
.nav-wrap {
    position: relative;
    width: 1080px; max-width: calc(100% - 24px);
    height: 48px; margin: 0 auto;
}
.nav .all { display: flex; align-items: center; width: 100%; height: 48px; }
.nav .all > li {
    position: relative; flex-shrink: 0;
    height: 48px; line-height: 48px;
    padding: 0 11px; font-size: 15px; color: #fff; white-space: nowrap;
}
.nav .all > li > a { display: block; height: 48px; line-height: 48px; color: #fff; }
.nav .all > li > a:hover { color: #ffd54f; }

/* 下拉子菜单 */
.nav .all > li > ul {
    display: none; position: absolute; top: 48px; left: 0; min-width: 132px;
    padding: 6px 0; background: #0288d9;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
.nav .all > li > ul > li { height: 38px; line-height: 38px; padding: 0 16px; }
.nav .all > li > ul > li a { display: block; color: #fff; font-size: 14px; }
.nav .all > li > ul > li a:hover { color: #ffd54f; }

/* 搜索条 */
.nav .all > li.searchbar { margin-left: auto; padding: 0; flex-shrink: 0; display: flex; align-items: center; gap: 0; }
.searchradius {
    position: relative; display: flex; align-items: center;
    width: 150px; height: 30px; background: #fff; border-radius: 20px;
}
.searchradius form { display: flex; align-items: center; width: 100%; height: 100%; }
.searchradius .seartx {
    flex: 1; min-width: 0; height: 30px; border: 0; outline: 0;
    background: transparent; font-size: 13px; color: #333;
    padding: 0 8px 0 12px;
}
.searchradius .seartx::placeholder { color: #9aa7b2; }
.search-img-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    height: 18px; width: auto; cursor: pointer; transition: opacity .2s;
}
.search-img-btn:hover { opacity: .8; }
.searbt { display: none; }

.nav-toggle { display: none; }

/* 桌面端才启用 hover 下拉 */
@media (min-width: 901px) {
    .nav .all > li.has-sub:hover { background: rgba(255, 255, 255, .15); }
    .nav .all > li.has-sub:hover > ul { display: block; }
}









/* ==================== 页脚 ==================== */
.footer {
    margin-top: 28px; padding: 20px 0 16px;
    background: #eef3f7; border-top: 2px solid #dce4ec;
}
.link { padding-bottom: 14px; border-bottom: 1px solid #d0dae4; margin-bottom: 14px; }
.link .linklist { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.link .linklist > span { font-weight: 700; color: #0190e6; font-size: 14px; }
.link .linklist ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.link .linklist ul li a { color: #555; font-size: 13px; }
.link .linklist ul li a:hover { color: #0288d9; }
.footercon { text-align: center; color: #666; font-size: 13px; line-height: 1.9; }
.footercon a { color: #555; }
.footercon a:hover { color: #0288d9; }

/* ==================================================================
   响应式 —— 平板
   ================================================================== */
@media (max-width: 1100px) {
    .nav .all > li { padding: 0 9px; font-size: 14px; }
    .searchradius { width: 130px; }
}

/* ==================================================================
   响应式 —— 导航折叠为汉堡菜单（按钮在右侧）
   ================================================================== */
@media (max-width: 900px) {
    .nav-wrap { width: calc(100% - 20px); max-width: none; }

    /* 汉堡按钮 —— 移到右侧 */
    .nav-toggle {
        position: absolute;
        right: 0;              /* 关键：靠右 */
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 5px; width: 44px; height: 38px; padding: 0;
        background: rgba(255, 255, 255, .18);
        border: 0; border-radius: 8px; cursor: pointer; z-index: 20;
    }
    .nav-toggle span {
        display: block; width: 20px; height: 2px;
        background: #fff; border-radius: 2px; transition: .28s;
    }
    .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* 菜单面板 */
    .nav .all {
        display: none;
        position: absolute; top: 54px; left: 0; right: 0; width: 100%;
        height: auto; max-height: calc(100vh - 80px);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        flex-direction: column; align-items: stretch;
        background: #0288d9; border-radius: 10px;
        padding: 6px 0 14px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
        z-index: 1200;
    }
    .nav.open .all { display: block; }

    .nav .all > li {
        display: block; height: auto; line-height: 1.5;
        padding: 0; font-size: 15px; white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }
    .nav .all > li:last-child { border-bottom: 0; }
    .nav .all > li > a {
        display: block; height: auto; line-height: 1.5;
        padding: 14px 16px; color: #fff;
    }
    .nav .all > li > a:hover { color: #ffd54f; }

    /* 子菜单折叠 */
    .nav .all > li > ul {
        display: none; position: static; min-width: 0;
        padding: 0; background: rgba(0, 0, 0, .14);
        border-radius: 0; box-shadow: none;
    }
    .nav .all > li.sub-open > ul { display: block; }
    .nav .all > li > ul > li { height: auto; line-height: 1.5; padding: 0; }
    .nav .all > li > ul > li a {
        display: block; padding: 12px 16px 12px 38px; font-size: 14px;
    }

    /* 移动端搜索框占满整行 */
    .nav .all > li.searchbar { margin: 12px 16px 4px; padding: 0; }
    .searchradius { width: 100%; height: 42px; border-radius: 21px; }
    .searchradius .seartx { height: 42px; font-size: 14px; padding: 0 12px; padding-right: 48px; }
    .search-img-btn { right: 15px; height: 20px; }

    /* 轮播图比例调整 */
    .ck-slide { aspect-ratio: 16 / 9; }
    .ck-slidebox { padding: 26px 16px 12px; gap: 10px; }
    .ck-slidebox .boxtitle { font-size: 14px; }
    .slideWrap .dot-wrap li { width: 24px; height: 24px; line-height: 20px; font-size: 11px; }

    /* 两栏变一栏 */
    .newsbar2 { flex-direction: column; gap: 14px; }
    .smnewimgbar { align-items: center; }
    .smnewimgbar .smnewimg_img img { width: 120px; height: 120px; }
    .smnewlist { min-height: 260px; }

    /* 卡片尺寸适配 */
    .middlelist .scroll-wrap li { width: 130px; }
    .middlelist .scroll-wrap li a img { width: 130px; height: 130px; }
    .vmc-viewport .vmc-track li { width: 220px; }
    .vmc-viewport .vmc-track li a img { width: 220px; height: 155px; }
}


/* ==================================================================
   响应式 —— 手机
   ================================================================== */
@media (max-width: 640px) {
    body { font-size: 13px; }
    .w_1080 { max-width: calc(100% - 16px); }

    /* ---- 页脚 ---- */
    .link .linklist { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footercon { font-size: 12px; }
}

@media (max-width: 380px) {
    .nav .all > li > a { padding: 13px 14px; font-size: 14px; }
    .ck-slidebox .boxtitle { font-size: 12px; }
    .middlelist .scroll-wrap li { width: 88px; }
    .middlelist .scroll-wrap li a img { width: 88px; height: 88px; }
}