@charset "utf-8";

/* ============================================================
   ★ 结构补充（不属于响应式，但与下面规则同文件加载）
   role 大图已用 <picture> 包裹以提供 WebP + PNG 兜底：
   <picture> 默认是 inline，包住 block 的 img 会多出底部行缝隙，
   这里统一改成 block。桌面端 img 是绝对定位、脱离文档流，不受影响。
   ============================================================ */
.role picture {
    display: block;
    line-height: 0;
    font-size: 0;
}

/* ============================================================
   天龙小蜜 · 移动端 / 窄屏响应式样式
   设计前提：本站桌面版是固定 1200px 布局（global.css min-width:1200px、
            .wrap 1200px、.box 1200px），头部为 1200x665 背景图 + 绝对定位，
            内容区为 1920x2120 / 1200x1455 背景图。
            本文件不改动任何桌面规则，只在窄屏下覆盖，故桌面端零影响。
   引入方式：每个页面的 CSS 最后一行引入（保证覆盖顺序）
   断点：<=1199 流式容器 / <=992 结构重排 / <=480 微调
   ============================================================ */

/* ============================================================
   一、<=1199px：解除固定宽度，容器改为流式
   —— 这一档只解决"放不下"的问题，不重排结构
   ============================================================ */
@media (max-width: 1199px) {

    /* 关键：解除 global.css 第 179 行的 min-width:1200px */
    html,
    body {
        min-width: 0;
    }

    .wrap {
        width: 100%;
        max-width: 1200px;
    }

    /* subpage.css 里 .box 是写死的 1200px，1024 这类 iPad 横屏下会溢出，
       必须在这一档就放开（<=992 那档还会把 padding 一并收紧） */
    .box {
        width: 100%;
        box-sizing: border-box;
        background-size: 100% auto;
        background-position: center top;
    }

    /* 头部背景图改为等比铺满，避免 1200px 大图被右侧裁切 */
    .header {
        background-size: cover;
        background-position: center top;
    }

    .content {
        background-size: 100% auto;
        background-position: center top;
    }
}

/* ============================================================
   二、<=992px：头部结构重排（18 个页面共享同一套 header）
   桌面结构：1200x665 背景图 + logo/nav/down 全部绝对定位浮在图上
   移动结构：图片区(按比例) → 按钮组 → 导航 → 全部进入正常文档流
   ============================================================ */
@media (max-width: 992px) {

    /* ---------- 2.1 头部容器 ---------- */
    .header {
        position: relative;
        height: auto;
        /* 665 / 1200 = 55.42%，正好等于背景图按宽度等比后的高度 */
        padding: 55.42vw 12px 14px;
        box-sizing: border-box;
        background: #f6ead6 url(../images/main_header.jpg) no-repeat center top;
        background-size: 100% auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* ---------- 2.2 logo：缩到图片左上角 ---------- */
    .djdsz_logo_bg,
    .djdsz_logo_lk a {
        position: absolute;
        left: 12px;
        top: 10px;
        width: 110px;
        height: 52px;
        /* logo_black.png 原图 212x101 */
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    /* ---------- 2.3 购买/下载按钮组：改为网格 ---------- */
    /* 桌面：432x132 绝对定位面板，二维码 float + 3 个按钮绝对定位 */
    .down {
        position: static;
        width: 100%;
        /* 平板上按钮别拉成 800px 长条，限宽居中 */
        max-width: 520px;
        margin: 0 auto;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 84px 1fr;
        grid-auto-rows: 42px;
        gap: 8px;
        order: 1;
    }

    .down img {
        float: none;
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 84px;
        height: 84px;
        margin: 0;
        padding: 4px;
        align-self: center;
        box-sizing: border-box;
    }

    .down a,
    .down a.btn_ios,
    .down a.btn_android,
    .down a.btn_pc {
        position: static;
        float: none;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        width: auto;
        height: 42px;
        line-height: 42px;
        margin: 0;
        padding: 0 8px;
        font-size: 15px;
        border-radius: 8px;
        box-sizing: border-box;
        text-align: center;
    }

    .down a::before {
        width: 5px;
        height: 5px;
        margin-right: 8px;
    }

    /* 移动端不需要 hover 位移 */
    .down a:hover {
        -webkit-transform: none;
        transform: none;
    }

    /* ---------- 2.4 导航：改为可换行的胶囊条 ---------- */
    /* 桌面：absolute left:310px top:24px，5 个 float 项，整体宽 680px */
    .nav {
        position: static;
        left: auto;
        top: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 0;
        order: 2;
    }

    .nav a {
        float: none;
        display: block;
        height: 32px;
        line-height: 32px;
        margin: 0;
        padding: 0 6px;
        font-size: 13px;
        letter-spacing: 0;
        border-radius: 16px;
    }

    /* 窄屏隐藏胶囊前的菱形装饰，让 5 个导航项能挤进一行 */
    .nav a::before {
        display: none;
    }

    /* ============================================================
       三、<=992px：首页内容区
       ============================================================ */

    /* ---------- 3.1 内容容器：去掉 2120px 固定高 ---------- */
    .content {
        height: auto;
        background: none;
    }

    body {
        background-size: cover;
        background-position: center top;
    }

    /* ---------- 3.2 首屏两块（banner + 新闻列表）改上下堆叠 ---------- */
    /* 平板上限宽居中，避免正文一行拉到 800px 以上没法读 */
    .box01,
    .box02 {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .box01 {
        height: auto;
        overflow: visible;
    }

    /* 桌面 .banner 720x330 float:left；内部是 superslide 的绝对定位叠层，
       只改容器尺寸即可，不动内部结构（否则会破坏淡入淡出插件） */
    .banner {
        float: none;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 330;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    /* 桌面 .news 430x330 float:left */
    .news {
        float: none;
        width: 100%;
        height: auto;
        padding: 0 14px 12px;
        box-sizing: border-box;
        border-radius: 12px;
    }

    /* 桌面三个 ul 是 position:absolute 叠在一起靠 JS fadeIn/fadeOut 切换，
       移动端改回正常流式，JS 逻辑不变（fadeOut 后仍是 display:none） */
    .news dd ul {
        position: static;
        width: 100%;
    }

    .news dd ul li {
        display: flex;
        align-items: center;
        height: auto;
        line-height: 34px;
        gap: 2px;
    }

    .news dd ul li a {
        float: none;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .news dd ul li strong,
    .news dd ul li.announce_list strong,
    .news dd ul li span {
        float: none;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .news dd h3 {
        font-size: 15px;
        line-height: 1.6;
        white-space: normal;
        padding: 10px 0 8px;
    }

    .news dt span {
        padding: 0 10px;
        font-size: 14px;
    }

    /* ---------- 3.3 「辅助特色」手风琴 ---------- */
    .box02 {
        padding-top: 26px;
    }

    .box02 h2 {
        height: 26px;
        margin-bottom: 16px;
        background-size: contain;
        background-position: center center;
    }

    /* 桌面：li float 横排，.show 宽 872px，其余 83px；JS 用
       animate({width:"872px"}) 硬编码像素值 —— 窄屏必须用 !important
       盖掉 JS 写在元素上的内联 width，否则会撑出 872px 造成横向溢出 */
    .accordion {
        height: auto;
        overflow: visible;
        display: block;
    }

    .accordion li,
    .accordion li.show,
    .accordion li.current {
        width: 100% !important;
        height: auto;
        float: none;
        margin: 0 0 12px 0;
        overflow: hidden;
        border-radius: 12px;
    }

    /* 竖排标题条（83x393）在窄屏没有展示意义，隐藏 */
    .accordion li img.feature_t {
        display: none;
    }

    /* 特写大图（原 absolute left:83px, 789x445）改为正常流 + 等比满宽 */
    .accordion li img.feature_c {
        position: static;
        left: auto;
        width: 100%;
        height: auto;
        display: block;
    }

    /* ---------- 3.4 职业介绍（6 个 tab + 6 组图文） ---------- */
    .role {
        height: auto;
    }

    /* 桌面：.tab 绝对定位 left:2px top:76px，每项 padding-left:98px 带图标 */
    .tab {
        position: static;
        left: auto;
        top: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 0 6px;
    }

    .tab a,
    .tab a:hover {
        flex: 1 1 calc(50% - 4px);
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
        font-size: 13px;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid rgba(181, 159, 116, 0.4);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.55);
    }

    /* 精灵图图标（nav_role_main.png）在窄屏缩不到位，直接隐藏只留文字 */
    .tab a ins,
    .tab span {
        display: none;
    }

    /* 桌面：.role ul li 绝对定位铺满 573px 高容器 */
    .role ul li {
        position: relative;
        width: 100%;
        height: auto;
    }

    /* 角色大图 role_kd.png(1920x1080) 原 absolute left:506px width:694px */
    .role ul li .pic,
    .role ul li .pic.lx {
        position: static;
        left: auto;
        bottom: auto;
        margin: 0;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

    /* 「天龙小蜜」装饰字与竖条装饰在窄屏隐藏 */
    .role ul li .name,
    .role ul li span {
        display: none;
    }

    /* 桌面：文案块 absolute left:396px top:290px */
    .role ul li div {
        position: static;
        left: auto;
        top: auto;
        padding: 12px 0 4px;
    }

    .role ul li div p {
        font-size: 14px;
        line-height: 1.65;
        padding: 0 0 8px 24px;
    }

    /* 每段之间的 <br> 在窄屏会把行距撑成双倍，去掉 */
    .role ul li div br {
        display: none;
    }

    /* 文案前的菱形小图标：来自 main_sprite.png（sprite 定位 -90px -252px，19x19）。
       🔴 不要改 background-size，否则取样区域错位会显示成色块 —— 保持 19x19 原尺寸 */
    .role ul li div p ins {
        top: 4px;
        width: 19px;
        height: 19px;
    }

    /* ---------- 3.5 轮播（本身就已是流式，只调边距） ---------- */
    .premium-carousel {
        /* 手机两侧留 12px，平板上限 820 居中 */
        max-width: min(760px, calc(100% - 24px));
        margin: 20px auto 32px;
        border-radius: 16px;
    }

    /* ============================================================
       四、<=992px：内页（下载/购买/售后/公告/文章，共 17 页）
       ============================================================ */
    .bg {
        padding-bottom: 0;
    }

    /* 桌面 .box 1200px + padding:0 100px 40px + 背景图 */
    .box {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        min-height: 0;
        /* 手机 ~19px，平板 ~41px，桌面窄屏最大 48px */
        padding: 0 clamp(14px, 5vw, 48px) 24px;
        background: none;
        box-sizing: border-box;
        border-radius: 0;
    }

    /* .box::before 是半透明白色遮罩，保留作为卡片底色 */

    .tip {
        padding: 22px 0 12px;
    }

    .tip .title {
        font-size: 19px;
        line-height: 1.45;
        padding-right: 0;
    }

    /* 返回按钮：桌面 absolute right:0 top:60px，窄屏会和标题叠，改回流内 */
    .tip a {
        position: static;
        right: auto;
        top: auto;
        display: inline-block;
        width: auto;
        height: 28px;
        line-height: 28px;
        margin-top: 10px;
        padding: 0 12px 0 34px;
        font-size: 13px;
        border-radius: 6px;
    }

    .tip a ins {
        left: 9px;
        top: 5px;
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
    }

    /* ---------- 4.1 新闻列表页 ---------- */
    .news_title {
        height: auto;
        padding-bottom: 12px;
    }

    .news_title span {
        position: static;
        display: block;
        padding-top: 8px;
    }

    .news_tab {
        position: static;
        right: auto;
        top: auto;
        height: auto;
        display: flex;
        margin-top: 10px;
    }

    .news_tab a {
        float: none;
        width: 33.33%;
        height: 76px;
        box-sizing: border-box;
    }

    .news_tab a ins {
        margin-top: 10px;
        width: 34px;
        height: 34px;
        background-size: 34px auto;
    }

    .news_tab a em {
        padding-top: 6px;
        font-size: 13px;
    }

    .news_list {
        padding: 16px 0;
    }

    .news_list li {
        display: flex;
        align-items: center;
        height: auto;
        line-height: 40px;
        gap: 2px;
    }

    /* 桌面写死 width:520px */
    .news_list li a {
        float: none;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 6px;
        font-size: 14px;
    }

    .news_list li strong,
    .news_list li span {
        float: none;
        flex: 0 0 auto;
        margin-left: 0;
        font-size: 13px;
    }

    /* ---------- 4.2 文章 / 详情页 ---------- */
    .detail {
        line-height: 1.8;
        font-size: 15px;
        word-break: break-word;
    }

    .detail p {
        padding-top: 8px;
        text-indent: 0;
        font-size: 15px;
    }

    .detail h2 {
        font-size: 17px;
    }

    .detail h3 {
        font-size: 16px;
    }

    /* 正文图片可能比屏幕宽 */
    .detail img,
    .faq_detail img,
    .box img {
        max-width: 100%;
        height: auto;
    }

    /* 表格：允许自身横向滚动，不撑破页面 */
    .detail table,
    .faq_detail table {
        width: 100%;
        font-size: 12px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .faq_detail table {
        width: 100%;
    }

    .detail table td,
    .detail table th,
    .faq_detail table td,
    .faq_detail table th {
        padding: 5px 4px;
        white-space: nowrap;
    }

    .box .infor {
        padding: 16px 0;
    }

    /* ---------- 4.3 内页写死在内联 style 上的字号与行高 ----------
       这些页面的正文是「富文本编辑器」产物，字号、行高全写死在
       style="font-size:18px;line-height:3" 上，内联样式优先级高于类选择器，
       只有 !important 能压下来。行高大量使用 3 / 4 / 5 倍，窄屏会松到没法读。 */
    .box [style*="font-size:28px"],
    .box [style*="font-size: 28px"] {
        font-size: 19px !important;
        line-height: 1.65 !important;
    }

    .box [style*="font-size:26px"],
    .box [style*="font-size: 26px"] {
        font-size: 17px !important;
        line-height: 1.8 !important;
    }

    .box [style*="font-size:22px"],
    .box [style*="font-size: 22px"] {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .box [style*="font-size:20px"],
    .box [style*="font-size: 20px"] {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .box [style*="font-size:18px"],
    .box [style*="font-size: 18px"] {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    .box [style*="font-size:16px"],
    .box [style*="font-size: 16px"] {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* 兜底：只有 line-height 没有 font-size 的节点（原文里有纯 line-height:3 的 span） */
    .box [style*="line-height:3"],
    .box [style*="line-height: 3"],
    .box [style*="line-height:4"],
    .box [style*="line-height: 4"],
    .box [style*="line-height:5"],
    .box [style*="line-height: 5"] {
        line-height: 1.8 !important;
    }
}

/* ============================================================
   五、<=480px：小屏微调
   ============================================================ */
@media (max-width: 480px) {

    .header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .down {
        grid-template-columns: 76px 1fr;
        grid-auto-rows: 40px;
        gap: 7px;
        padding: 9px;
    }

    .down img {
        width: 76px;
        height: 76px;
    }

    .down a,
    .down a.btn_ios,
    .down a.btn_android,
    .down a.btn_pc {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .nav a {
        height: 30px;
        line-height: 30px;
        padding: 0 9px;
        font-size: 12px;
    }

    .tip .title {
        font-size: 17px;
    }

    .tab a,
    .tab a:hover {
        font-size: 12px;
        height: 38px;
        line-height: 38px;
    }

    .role ul li div p {
        font-size: 13px;
    }

    .news dd h3 {
        font-size: 14px;
    }
}

/* ============================================================
   六、触屏设备：取消 hover 产生的位移/阴影跳动
   ============================================================ */
@media (hover: none) {

    .nav a:hover,
    .down a:hover,
    .tab a:hover,
    .card-item:hover {
        -webkit-transform: none;
        transform: none;
    }

    .tab a:hover {
        padding-left: 8px;
    }
}