/* ==========================================================================
   铭飞CMS 模板 16 —— 内容页响应式适配（手机 / 平板）
   --------------------------------------------------------------------------
   引入方式：head.html / head_yth.html 内统一引入（位于内联样式之后，可覆盖
   页面内联与既有样式，且不改变 PC 端 >1200px 的原有表现）。

   断点设计（自宽到窄，后段覆盖前段）：
     ≤1199px  小型笔记本 / 平板横屏：宽容器收为 100%，防横向滚动
     ≤1024px  平板与手机：头部菜单折叠（与 index.css 移动端块对齐）、
              正文留白、平板恢复 PC 页脚
     ≤768px   平板竖屏与手机：正文图文不溢出、栅格堆叠
     ≤640px   手机：单列布局、字号与间距收紧
     ≤480px   小屏手机：表单标签置顶、进一步收紧
   ========================================================================== */


/* ============================ 1. ≤1199px 平板横屏/小型笔记本 ============================ */
@media only screen and (max-width: 1199px) {
    /* 固定 1600/1400/1200px 容器收为 100%，避免 1025~1199px 视口出现横向滚动条 */
    .w1200,
    .w1400,
    .w1600 {
        width: 100% !important;
        max-width: 100%;
    }

    /* 联系页双栏容器（contact-us.html）固定 1400px，同样收为 100% */
    .row-two-col {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        box-sizing: border-box;
    }

    /* 页脚左右栏在窄视口下避免贴边 */
    .footer-floor1 {
        padding: 30px 4% 40px;
        box-sizing: border-box;
    }
}

/* ---- 平板横屏 / 小型笔记本（1025~1199px）：导航折叠为汉堡菜单 ----
   index.css 的移动端规则只覆盖 ≤1024px，而 iPad Pro 13 等平板视口宽
   度为 1032px，会落在桌面横排导航区间，菜单项多时文字被截断。
   此块把头部折叠行为扩展到 1199px。 */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
    /* 固定头部，主体顶部避让 */
    body {
        padding: 80px 0 0; /* banner 完整显示，高度不变 */
    }
    header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 80px;
        z-index: 999;
        background: #026bbc;
    }
    /* 显示汉堡按钮并靠右（head.html 内联 .w1600 为 flex，用 margin-left:auto） */
    .m_mune {
        display: block !important;
        margin-left: auto;
        text-align: right;
        padding-right: 15px;
    }
    .m_mune i {
        font-size: 26px;
        line-height: 80px;
        color: #fff;
        transition: .8s;
    }
    .m_mune.active i {
        transform: rotateZ(720deg);
    }
    /* 导航纵向折叠，默认收起，点击 .m_mune 后展开（index.js 切换 .active） */
    .nav {
        position: fixed;
        top: 80px;
        right: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
        z-index: 999;
        background: rgba(0,0,0,0.6);
        padding: 0 1%;
    }
    .nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .nav ul li {
        width: 100%;
    }
    .nav ul li > a {
        height: 0;
        overflow: hidden;
        line-height: 48px;
        text-align: center;
        color: #fff !important;
        transition: .3s;
    }
    .nav.active ul li {
        border-bottom: 1px solid #fff;
    }
    .nav ul li:last-of-type {
        border-bottom: 0;
    }
    .nav.active ul li > a {
        height: 48px;
    }
    .nav ul li > a::before,
    .nav ul li .nav_box {
        display: none;
    }
    /* 桌面下拉子菜单在折叠态不适用 */
    /* 手机端二级导航：折叠菜单内显示子项 */
    .ddsubmenustyle {
        display: block !important;
        list-style: none;
        margin: 0;
        padding: 0 0 0 20px;
    }
    .ddsubmenustyle li a {
        height: 40px !important;
        line-height: 40px;
        font-size: 13px;
        color: #ccc !important;
    }
    .nav:before {
        content: none;
        display: none;
    }
    a,
    button,
    .m_mune {
        touch-action: manipulation;
    }
}


/* ============================ 2. ≤1024px 平板 / 手机 ============================ */
@media only screen and (max-width: 1024px) {
    /* 取消底部预留空白：index.css 为不存在的 .m_footer 固定底栏预留了
       body 50px 底部内边距，模板中并无该元素，会多出空白条 */
    body {
        padding-bottom: 0;
    }
    /* 兜底：任何情况下页面不允许左右平移 */
    html {
        overflow-x: hidden;
    }

    /* ---- 头部 ---- */
    /* head.html 内联样式把 .m_mune 写成 display:none，会覆盖 index.css 的移动端
       显示规则，导致手机/平板看不到菜单按钮。此处强制恢复显示。 */
    .m_mune {
        display: block !important;
        /* head.html 内联 .w1600 为 flex 布局，index.css 的 float:right 不生效，
           汉堡按钮不会靠右；改用 margin-left:auto 推到最右 */
        margin-left: auto;
    }

    /* 折叠导航：index.css 移动端块只改了 li 宽度，ul 仍是横向 flex，
       多个 100% 宽的 li 会横向溢出并被 .nav 的 overflow:hidden 裁掉。
       改为纵向堆叠，菜单才能正常展开。 */
    .nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    /* 触控目标优化：去掉点击延迟/双击缩放干扰 */
    a,
    button,
    .m_mune {
        touch-action: manipulation;
    }

    /* 头部间距收紧，长标题字号略降（头尾两行仍不换行，平板宽度足够） */
    header .w1600 {
        gap: 12px;
    }
    .logo-text-line1 {
        font-size: 14px;
    }
}

/* ---- 平板（768~1024px）：恢复 PC 页脚，隐藏移动端示例页脚 ---- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* 平板 footer 按手机样式：隐藏 .footer，只显示 .m_footer_info */
    .footer {
        display: none;
    }
    .m_footer_info {
        display: block;
        text-align: center;
    }
}
/* ============================ 3. ≤768px 平板竖屏 / 手机 ============================ */
@media only screen and (max-width: 768px) {
    /* ---- 通用：图片/媒体不溢出容器 ---- */
    /* 手机端：只显示 .m_footer_info，隐藏整个 .footer（含版权行） */
    .footer {
        display: none;
    }
    .m_footer_info {
        display: block;
        text-align: center;
    }
    /* index_1 核心服务：手机端两列卡片，文字正常显示 */
    /* index_1 核心服务：手机端换行显示全部 5 块卡片 */
    .cloud-product-box .slider {
        flex-wrap: wrap;
    }
    .cloud-product-box .card {
        flex: 0 0 calc(50% - 16px);
        padding: 16px;
    }
    .cloud-product-box .card h3 {
        font-size: 16px;
    }
    .cloud-product-box .card p {
        font-size: 13px;
        height: auto;
    }
    /* card_list_page：手机端单列，卡片竖排（图片在上文字在下） */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .card-item {
        flex-direction: column;
    }
    .card-item .img-box {
        width: 100%;
        height: auto;
    }
    .card-item .img-box img {
        object-fit: contain;
        max-height: 160px;
    }
    .card-item .text-box {
        padding: 12px 16px;
    }
    .card-item .text-box h4 {
        font-size: 15px;
    }
    .card-item .text-box p {
        font-size: 13px;
    }
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }

    /* contact-us：手机端不被撑开 */
    /* contact-us：手机端不被撑开，内容区等高，按钮居中 */
    /* contact-us：手机端不被撑开，内容区等高，按钮居中，footer 贴底 */
    html, body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .row-two-col {
        width: 100%;
        padding: 20px 16px;
        box-sizing: border-box;
    }
    .main, .container {
        flex: 1;
    }
    .info-item {
        align-items: center;
    }
    .info-item__content {
        min-height: 160px;
        height: auto;
        padding: 24px 18px;
    }
    .info-item__title {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 18px;
        padding: 16px 10px;
    }
    .info-item__text {
        font-size: 14px;
        line-height: 1.7;
    }
    /* 移动端输入框字号不低于 16px，避免 iOS 聚焦自动放大 */
    /* 返回顶部按钮：提高层级，确保可点击 */
    .return_top {
        z-index: 999999 !important;
        bottom: 80px;
        right: 15px;
    }
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ---- 详情正文（detail / news_view / detail-img / case_view） ---- */
    .content_c {
        padding: 12px 10px;
    }
    .content_info {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* 富文本里的图片/表格/视频：强制不溢出（可覆盖编辑器写入的内联宽度） */
    .content_info img,
    .content_info video,
    .content_info iframe,
    .content_info embed,
    .content_info object,
    .content_c img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* 宽表格改为容器内横向滚动，保持列结构可读 */
    .content_info table,
    .content_c table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .content_title {
        font-size: 18px;
        line-height: 1.5;
    }
    .content_bianji {
        font-size: 12px;
    }

    /* ---- 通用栏目/列表页 ---- */
    .pos {
        font-size: 13px;
        line-height: 1.8;
        word-break: break-all;
    }
    .content_page {
        line-height: 2.4;
    }
    .content_page a {
        margin: 0 4px;
    }
    .case ul li img {
        width: 100%;
        height: auto;
    }
    .card-wrap {
        gap: 20px;
    }
    .card-img {
        height: 220px !important;
    }

    /* ---- 联系页（contact-us.html）：内容盒高度自适应文字 ---- */
    .info-item__content {
        height: auto;
    }

    /* ---- 通用注册/留言表单宽度 ---- */
    .message {
        width: 92% !important;
        margin: 20px auto;
    }

    /* ---- 首页：生态服务/便捷入口/跨境电商产业带 三个 Tab 居中、占满可视宽度 ---- */
    .tab-header {
        width: 92%;
        padding-top: 24px;
        gap: 6px;
    }
    .tab-icon {
        width: 56px;
        height: 56px;
    }
    .tab-title {
        font-size: 15px;
    }
    .tab-en {
        font-size: 12px;
    }

    /* ---- 首页：服务卡片改为上图标、中标题、下描述 ---- */
    .service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px 12px;
        gap: 10px;
    }
    .card-icon {
        width: 52px;
        height: 52px;
    }
    .card-text h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }
    .card-text p {
        font-size: 13px;
    }
}

/* ============================ 4. ≤640px 手机 ============================ */
@media only screen and (max-width: 640px) {
    /* ---- 头部：Logo 与长标题适配小屏 ---- */
    .logo-img {
        width: 38px;
        height: 38px;
    }
    .logo-text-line1 {
        font-size: 12px;
        line-height: 1.3;
        white-space: normal !important; /* 覆盖 head.html 的 nowrap，防止溢出 */
    }
    header .w1600 {
        gap: 6px;
    }

    /* 导航菜单项过多时允许菜单内部滚动，避免超出视口 */
    .nav {
        max-height: calc(100vh - 60px);
        overflow-y: auto !important;
    }

    /* ---- commPage 通用内容区 ---- */
    .main-wrap {
        padding: 25px 14px;
    }
    .bg-section-inner {
        padding: 0 14px;
    }
    .bg-section {
        padding: 35px 0;
    }
    .section-title {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .biz-desc {
        font-size: 15px;
    }
    .col-block ul {
        padding-left: 8px;
    }

    /* ---- 核心服务：3 卡 1 列 ---- */
    .core-service-row {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 30px 0;
    }
    .core-card__img {
        height: 170px;
    }

    /* ---- 申报模式：5 卡 1 列（2 列会出现末行孤卡） ---- */
    .mode-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 30px 0;
    }
    .mode-card__body {
        font-size: 13px;
    }

    /* ---- 服务流程：4 卡 1 列 ---- */
    .service-flow-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- 合作伙伴：3 列收 1 列（2 列会出现末行孤卡） ---- */
    .partner-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* ---- 卡片列表（list.html） ---- */
    .card-img {
        height: 190px !important;
    }
    .card-content {
        padding: 16px;
    }
    .card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .card-desc {
        font-size: 14px;
        margin-bottom: 16px;
    }

    /* ---- 首页：内容面板单列，服务卡片占满整行 ---- */
    .tab-panel,
    .tab-panel.show {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .tab-header {
        width: 100%;
    }
    .tab-icon {
        width: 48px;
        height: 48px;
    }
    .tab-title {
        font-size: 14px;
    }
    .card-icon {
        width: 44px;
        height: 44px;
    }
    .card-text h3 {
        font-size: 15px;
    }

    /* ---- 案例列表（case_list.html）：1 列 ---- */
    .case ul li {
        width: 100%;
        margin: 0 0 12px !important;
    }

    /* ---- 新闻列表：日期行 + 文字/缩略图两栏，压缩间距 ---- */
    .news_list ul li {
        padding: 10px 6px;
    }
    .news_list ul li .news_time time {
        font-size: 18px;
        margin-bottom: 8px;
        padding-top: 8px;
    }
    .news_list ul li .news_con {
        width: 68%;
        margin-top: 10px;
        padding-left: 6px;
    }
    .news_list ul li .news_con h5 a {
        font-size: 15px;
        padding-bottom: 6px;
    }
    .news_list ul li .news_con p {
        width: 100%;
        font-size: 12px;
    }
    .news_list ul li .news_img {
        width: 30%;
        margin-top: 10px;
    }

    /* ---- 分页 ---- */
    .function a {
        margin: 0 4px;
        padding: 0 8px;
        height: 32px;
        line-height: 32px;
    }
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
}

/* ============================ 5. ≤480px 小屏手机 ============================ */
@media only screen and (max-width: 480px) {
    /* ---- 通用栅格/标题继续收紧 ---- */
    .mode-row {
        grid-template-columns: 1fr;
    }
    .two-col-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .section-title {
        font-size: 20px;
    }

    /* ---- Element-UI 表单（Register.html）：标签置顶，内容占满 ---- */
    .el-form-item {
        display: block !important;
    }
    .el-form-item__label {
        float: none !important;
        display: block;
        text-align: left !important;
        padding: 0 0 6px !important;
        width: auto !important;
        line-height: 1.5 !important;
    }
    .el-form-item__content {
        margin-left: 0 !important;
    }

    /* ---- 联系页标题/内容进一步压缩 ---- */
    .info-item__content {
        padding: 18px 14px;
    }
    .info-item__text {
        font-size: 15px;
    }
}

/* ============================ PC 端二级菜单优化：横向不换行 ============================ */
.ddsubmenustyle li {
    display: inline-block;
    clear: none;
}

.ddsubmenustyle li a {
    width: auto !important;
    padding: 0 24px;
    white-space: nowrap;
    line-height: 50px;
    margin-top: 20px;
}