@charset "utf-8";
/* =====================================================================
   全站响应式适配层（三端自适配：PC >1024 / 平板 769-1024 / 手机 <=768）
   说明：本文件为覆盖层，须在页面级样式表之后加载。
   只做布局矫正，不改变桌面端原始视觉。
   ===================================================================== */

/* ---------- 0. 基础（所有端） ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0 !important; }
img, video, iframe, embed, object { max-width: 100%; }
.rsp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 顶部/底部/版心：去掉旧版强制的 1200px 固定宽与 min-width */
#top_one .cont, #top_two .cont, #top_three .cont,
#bottom .cont, #bottom, .index_index .cont_a, .index_index .cont_b,
.index_index .cont_c, .index_index .cont_e, .index_gjb .cont_a, .index_gjb .cont_c,
.index_wj .cont_a, .index_wj .cont_c, .index_bjb .cont_a, .index_bjb .cont_c,
.news_index .cont, .temp_index .cont, .temp_index .cont1 {
    min-width: 0 !important;
}

/* ---------- 1. 桌面端（>1024px）保持原样，仅做安全兜底 ---------- */
@media only screen and (min-width: 1025px) {
    .rsp-menu-btn { display: none !important; }
}

/* ---------- 2. 平板端（769px - 1024px） ---------- */
@media only screen and (max-width: 1024px) {

    html, body { overflow-x: hidden; }
    body { min-width: 0 !important; }

    /* 版心流式化 */
    #top_one .cont, #top_two .cont, #top_three .cont,
    #bottom .cont, .index_gjb .cont_b .clear, .index_gjb .cont_c .cont,
    .index_gjb .cont_d .cont, .index_wj .cont_a .cont, .index_wj .cont_b,
    .index_wj .cont_d .cont, .index_bjb .cont_b .cont, .index_bjb .cont_c .cont,
    .index_bjb .cont_d .cont, .index_sshow .cont, .news_index .cont,
    .temp_index .cont, .temp_index .cont1, .cont {
        width: auto !important;
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* 顶部导航压缩间距以完整显示 */
    #top_one .cont .nav, #top_two .cont .nav, #top_three .cont .nav { margin-left: 10px !important; }
    #top_one .cont .nav li, #top_two .cont .nav li, #top_three .cont .nav li { padding: 0 10px !important; }

    /* 大尺寸配图随容器缩放 */
    .index_index .cont_b li { width: 220px; }
    .index_index .cont_d .fr img,
    .index_gjb .cont_b .b1 .fr img,
    .index_gjb .cont_b .b2 .fl img,
    .index_wj .cont_b img,
    .index_bjb .cont_b img { width: 100% !important; height: auto !important; max-width: 600px; }

    /* 图文左右栏：宽度按比例收缩 */
    .index_gjb .cont_b .b1 .fl, .index_gjb .cont_b .b2 .fr,
    .index_index .cont_c .fr, .index_index .cont_e .fr,
    .index_wj .cont_b .fl, .index_wj .cont_b .fr,
    .index_bjb .cont_b .fl, .index_bjb .cont_b .fr { width: 46% !important; }
    .index_index .cont_c .fl, .index_index .cont_d .fr,
    .index_index .cont_e .fl,
    .index_gjb .cont_b .b1 .fr, .index_gjb .cont_b .b2 .fl { width: 50% !important; }
    .index_index .cont_e .fl img { width: 100% !important; }

    /* 页脚改用弹性布局自动换行 */
    #bottom .up { display: block; }
    #bottom .up .u1, #bottom .up .u2, #bottom .up .u3 {
        float: none !important; display: inline-block; vertical-align: top; margin: 0 2%;
    }

    /* 表格容器可横向滚动（配合 responsive.js 自动包裹） */
    .rsp-menu-btn { display: none !important; }
}

/* ---------- 3. 手机端（<=768px） ---------- */
@media only screen and (max-width: 880px) {

    html, body { overflow-x: hidden; }
    body { min-width: 0 !important; font-size: 14px !important; }

    /* 3.1 版心与固定宽度全部流式化 */
    #top_one .cont, #top_two .cont, #top_three .cont,
    #bottom .cont, .index_gjb .cont_b .clear, .index_gjb .cont_c .cont,
    .index_gjb .cont_d .cont, .index_wj .cont_a .cont, .index_wj .cont_b,
    .index_wj .cont_d .cont, .index_bjb .cont_b .cont, .index_bjb .cont_c .cont,
    .index_bjb .cont_d .cont, .index_sshow .cont, .news_index .cont,
    .temp_index .cont, .temp_index .cont1, .cont, .cont .cont,
    .index_gjb .cont_c .h1, .index_index .cont_b .h1, .index_sshow .cont .video {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* 3.2 顶部导航：汉堡菜单 + 下拉面板 */
    #top_one, #top_two, #top_three { height: 56px !important; }
    #top_one .cont, #top_two .cont, #top_three .cont {
        position: relative !important;
        height: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
    #top_one .cont .logo, #top_two .cont .logo, #top_three .cont .logo { float: left !important; }
    #top_one .cont .logo img, #top_two .cont .logo img, #top_three .cont .logo img {
        height: 32px !important; margin: 12px 0 !important;
    }
    /* 导航的父级容器取消浮动占位 */
    #top_one .cont > .fl:not(.logo), #top_two .cont > .fl:not(.logo),
    #top_three .cont > .fl:not(.logo) { float: none !important; }
    /* 导航列表改为下拉面板 */
    #top_one .cont .nav, #top_two .cont .nav, #top_three .cont .nav {
        position: absolute !important;
        top: 100%; left: 0; right: 0;
        margin: 0 !important;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0,0,0,0.18);
        display: none;
        z-index: 9999;
        padding: 4px 0 8px;
    }
    #top_one.rsp-nav-open .cont .nav,
    #top_two.rsp-nav-open .cont .nav,
    #top_three.rsp-nav-open .cont .nav { display: block !important; }
    #top_one .cont .nav li, #top_two .cont .nav li, #top_three .cont .nav li {
        float: none !important; padding: 0 !important;
        border-bottom: 1px solid #f2f2f2;
    }
    #top_one .cont .nav li a, #top_two .cont .nav li a, #top_three .cont .nav li a {
        display: block; line-height: 44px !important; padding: 0 18px; color: #333 !important;
    }
    #top_two .cont .nav li a, #top_three .cont .nav li a { color: #333 !important; }
    /* 登录/购买按钮保留在顶栏，为汉堡按钮留出空间 */
    #top_one .cont .fr, #top_two .cont .fr, #top_three .cont .fr {
        float: right !important; margin-right: 80px;
    }
    #top_one .cont .login li a, #top_two .cont .login li a, #top_three .cont .login li a {
        width: auto !important; padding: 0 12px; margin: 12px 0 0 !important; height: 30px; line-height: 30px !important;
    }
    #top_one .cont .login li a { margin: 13px 0 0 !important; }

    /* 3.3 汉堡按钮（由 responsive.js 注入） */
    .rsp-menu-btn {
        display: block !important;
        position: absolute; top: 12px; right: 14px;
        width: 34px; height: 32px;
        background: transparent; border: 0; outline: none; cursor: pointer;
        z-index: 10001;
    }
    .rsp-menu-btn .bar {
        display: block; width: 24px; height: 3px; margin: 5px auto;
        background: #666; border-radius: 2px; transition: all .25s;
    }
    #top_one .rsp-menu-btn .bar { background: #fff; }
    .rsp-nav-open .rsp-menu-btn .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .rsp-nav-open .rsp-menu-btn .bar:nth-child(2) { opacity: 0; }
    .rsp-nav-open .rsp-menu-btn .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 3.4 内容区：左右分栏改单列堆叠 */
    .clear > .fl, .clear > .fr,
    .cont > .fl, .cont > .fr,
    .index_gjb .cont_b .b1 .fl, .index_gjb .cont_b .b1 .fr,
    .index_gjb .cont_b .b2 .fl, .index_gjb .cont_b .b2 .fr,
    .index_gjb .cont_c .cont .fl,
    .index_index .cont_c .fl, .index_index .cont_c .fr,
    .index_index .cont_d .fl, .index_index .cont_d .fr,
    .index_index .cont_e .fl, .index_index .cont_e .fr,
    .index_index .cont_f .fl, .index_index .cont_f .fr,
    .index_wj .cont_a .cont .fl, .index_wj .cont_a .cont .fr,
    .index_wj .cont_b .fl, .index_wj .cont_b .fr,
    .index_bjb .cont_b .fl, .index_bjb .cont_b .fr {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
    }
    /* 堆叠后的间距与文字 */
    .index_index .p_fl, .index_index .p_fr,
    .index_gjb .cont_b .clear .p1 { margin-top: 24px !important; }
    .index_index .p_fr .p1, .index_index .p_fl .p1 { margin-top: 16px !important; }
    .index_index .p_fl .p3 { margin-top: 24px !important; }

    /* 首屏大图高度自适应 */
    .index_index .cont_b { height: auto !important; padding-bottom: 24px; }
    .index_index .cont_b .h1 { position: static !important; width: auto !important; font-size: 22px !important; padding-top: 24px; }
    .index_index .cont_b ul { margin-top: 24px !important; }
    .index_index .cont_b li {
        float: none !important; width: auto !important; height: auto !important;
        max-width: 320px; margin: 14px auto !important; padding-bottom: 10px;
    }
    .index_index .cont_c, .index_index .cont_e { height: auto !important; padding-bottom: 32px; }
    .index_index .cont_c .fl img, .index_index .cont_d .fr img,
    .index_index .cont_f .fr img { margin: 24px 0 !important; max-width: 100% !important; width: auto !important; height: auto !important; }
    .index_index .cont_e .fl { position: static !important; }
    .index_index .cont_e .fl img {
        position: static !important; width: 100% !important; max-width: 420px;
        height: auto !important; display: block; margin: 24px auto !important;
    }
    .index_gjb .cont_a, .index_wj .cont_a, .index_bjb .cont_a { height: 260px !important; background-size: cover !important; }
    .index_index .cont_a { height: 300px !important; }
    .index_index .cont_a .cont_a_txt { padding-top: 110px !important; }
    .index_index .cont_a .t1 { font-size: 28px !important; }
    .index_index .cont_a .t2 { font-size: 15px !important; }
    .index_gjb .cont_c .h1 { width: auto !important; line-height: 60px !important; font-size: 22px !important; }
    .index_gjb .cont_c .cont .fl {
        float: none !important; width: auto !important; max-width: 320px;
        margin: 12px auto !important;
    }
    .index_wj .cont_c .cont { width: auto !important; }

    /* 视频教程页 */
    .index_sshow .cont .video { width: auto !important; padding: 10px 0 30px 0 !important; }
    .index_sshow .cont .video video, .index_sshow .cont .video iframe { width: 100% !important; height: auto !important; }

    /* 3.5 页脚堆叠 */
    #bottom { min-width: 0 !important; }
    #bottom .up { display: block !important; }
    #bottom .up .u1, #bottom .up .u2, #bottom .up .u3 {
        float: none !important; width: auto !important; max-width: 100% !important;
        display: block; text-align: center; margin: 0 auto;
    }
    #bottom .up .u3 img { width: 110px !important; height: 110px !important; }
    #bottom .down { height: auto !important; line-height: 24px !important; padding: 10px 0; }
    #bottom .down .fl, #bottom .down .fr { float: none !important; display: block; text-align: center; }

    /* 3.6 右侧悬浮工具条缩小靠边 */
    #right_nav { transform: scale(0.82); transform-origin: bottom right; }

    /* 3.7 通用元素兜底 */
    img { max-width: 100% !important; }
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="tel"], select, textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* 旧式表单容器（注册/登录/忘记密码等页） */
    .zhuce .cont, .denglu .cont, .form .cont, form { width: auto !important; max-width: 100% !important; }

    /* 分页 */
    #p_page a, #p_page span { padding: 0 10px !important; height: 34px; line-height: 34px !important; margin-bottom: 6px; }

    /* Bootstrap 用户中心微调 */
    .container { width: auto !important; padding-left: 12px; padding-right: 12px; }
    .table { table-layout: auto; }
}

/* ---------- 4. 超小屏（<=400px）进一步压缩 ---------- */
@media only screen and (max-width: 400px) {
    #top_one .cont .login li a, #top_two .cont .login li a, #top_three .cont .login li a {
        padding: 0 8px !important; font-size: 12px !important;
    }
    .index_index .cont_b .h1 { font-size: 19px !important; }
    #bottom .up .u1 li p { font-size: 14px !important; }
}