/* =============================================
   responsive.css - diskghost.com 自适应样式
   断点: 1200px(平板) / 768px(手机)
   ============================================= */

/* --- 汉堡菜单按钮样式 --- */
.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 200;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mobile-menu-btn span {
    display: block;
    width: 26px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: all 0.3s;
    border-radius: 2px;
}
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* --- 移动端菜单覆盖层 --- */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 150;
}
.mobile-menu-overlay.active { display: block; }

/* --- 移动端侧边菜单 --- */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 160;
    overflow-y: auto;
    transition: right 0.3s ease;
    padding-top: 70px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}
.mobile-nav.active { right: 0; }
.mobile-nav a {
    display: block;
    padding: 15px 25px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-nav a:hover, .mobile-nav a.actived { color: #01a3ff; background: #f8f9fa; }
.mobile-nav .sub-menu { background: #f8f9fa; }
.mobile-nav .sub-menu a { padding-left: 45px; font-size: 14px; color: #666; }
.mobile-nav .sub-toggle { position: relative; cursor: pointer; }
.mobile-nav .sub-toggle::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 20px;
    color: #999;
    transition: transform 0.3s;
}
.mobile-nav .sub-toggle.open::after { content: '-'; }

/* --- 全局图片自适应 --- */
img { max-width: 100%; height: auto; }

/* =============================================
   平板端 (<= 1200px)
   ============================================= */
@media screen and (max-width: 1200px) {

    /* 通用容器 */
    .toper .tbg,
    .footer .top,
    .footer .copyright .cnt,
    .pages,
    .navi,
    .navtit,
    .cases .title,
    .cases .types,
    .cases .list,
    .cases .list .swiper-container,
    .cases .list .swiper-wrapper,
    .questions .title,
    .questions .types,
    .questions .list,
    .aboutus .inner,
    .aboutus ul,
    .flower .inner,
    .flower .flow,
    .newsdetail,
    .newsdetail .title,
    .newsdetail .content,
    .newsdetail .relation,
    .index .products .inner,
    .index .products ul,
    .index .newques .inner,
    .index .newques .news ul,
    .index .newques .question ul,
    .wrapperr .prolist,
    .wrapperr .news .inner,
    .wrapperr .news .newlist,
    .wrapperr .news .newlist .item,
    .comments .title,
    .comments .list,
    .comments .list .swiper-container,
    .comments .list .swiper-wrapper,
    .buys .title,
    .buys .list,
    .buys .list .swiper-container,
    .buys .list .swiper-wrapper,
    .toper .menu .child .inner {
        width: 100% !important;
        max-width: 1180px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer { min-width: auto !important; }
    .wrapperr { min-width: auto !important; }
    .index .banner { min-width: auto !important; }

    /* 导航 */
    .toper .menu ul li { padding: 0 18px; }

    /* 产品列表双列 */
    .wrapperr .prolist .item { width: 48%; }
    .wrapperr .prolist .item:nth-child(2n) { margin-left: 4%; }
    .wrapperr .prolist .item .thumb { width: 100%; }
    .wrapperr .prolist .item .thumb img { width: 80%; }
    .wrapperr .prolist .item .name { width: 100%; }
    .wrapperr .prolist .item .describe { width: 90%; }

    /* Banner */
    .index .banner { height: auto; }
    .index .banner img { width: 100%; height: auto; }
    .wrapperr .banner { height: 300px; }

    /* 案例轮播箭头 */
    .cases .caseleft { left: 0; }
    .cases .caseright { right: 0; }
    .comments .commentleft { left: 0; }
    .comments .commentright { right: 0; }

    /* 右侧浮动 */
    .floatmenu { display: none !important; }
}

/* =============================================
   手机端 (<= 768px)
   ============================================= */
@media screen and (max-width: 768px) {

    /* 显示汉堡菜单 */
    .mobile-menu-btn { display: flex; }
    .mobile-nav { display: block; }

    /* 隐藏桌面导航 */
    .toper .menu { display: none !important; }
    .toper { height: auto; min-height: 70px; }
    .toper .tbg { height: auto; min-height: 70px; padding: 0 15px; }
    .toper .logo { height: 70px; }
    .toper .logo a { margin-top: 15px; height: 40px; }
    .toper .logo a img { height: 40px; }

    /* 通用容器 - 手机端更紧凑 */
    .toper .tbg,
    .footer .top,
    .footer .copyright .cnt,
    .pages,
    .navi,
    .navtit,
    .cases .title,
    .cases .types,
    .cases .list,
    .cases .list .swiper-container,
    .cases .list .swiper-wrapper,
    .questions .title,
    .questions .types,
    .questions .list,
    .aboutus .inner,
    .aboutus ul,
    .flower .inner,
    .flower .flow,
    .newsdetail,
    .newsdetail .title,
    .newsdetail .content,
    .newsdetail .relation,
    .index .products .inner,
    .index .products ul,
    .index .newques .inner,
    .index .newques .news ul,
    .index .newques .question ul,
    .wrapperr .prolist,
    .wrapperr .news .inner,
    .wrapperr .news .newlist,
    .wrapperr .news .newlist .item,
    .comments .title,
    .comments .list,
    .comments .list .swiper-container,
    .comments .list .swiper-wrapper,
    .buys .title,
    .buys .list,
    .buys .list .swiper-container,
    .buys .list .swiper-wrapper {
        width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Banner */
    .index .banner { height: auto; }
    .index .banner img { width: 100%; height: auto; }
    .wrapperr .banner { height: 180px; }
    .wrapperr .banner .text { font-size: 22px; width: 80%; left: 10%; margin-left: 0; top: 50%; transform: translateY(-50%); }

    /* 首页产品区域 - 垂直排列 */
    .index .products ul { flex-direction: column; }
    .index .products ul li { width: 100%; margin-right: 0; margin-bottom: 25px; }
    .index .products ul li .thumb { width: 100%; height: auto; }
    .index .products ul li .thumb img { width: 100%; height: auto; }
    .index .products ul li .detail { width: 90%; }
    .index .products ul li .detail .list { width: 100%; }
    .index .products ul li .detail .list .item { width: 48%; text-indent: 5px; }
    .index .products ul li .detail .list .item:nth-child(2n) { width: 48%; text-indent: 15px; }

    /* 关于我们 - 垂直排列 */
    .aboutus ul { flex-direction: column; margin-top: 50px; }
    .aboutus ul li { width: 100%; height: auto; margin-right: 0; margin-bottom: 80px; padding-bottom: 20px; }
    .aboutus ul li .thumb { left: 50%; transform: translateX(-50%); margin-left: 0; }
    .aboutus ul li .detail { width: 90%; margin: 90px auto 0 auto; }
    .aboutus ul li .detail .describe { width: 90%; margin: 0 auto; }

    /* 案例列表 */
    .cases .list .case { width: 100%; height: auto; }
    .cases .list .case .thumb { width: 100%; height: auto; }
    .cases .list .case .thumb img { width: 100%; height: auto; }
    .cases .list .case .detail { width: 90%; }
    .cases .list .case .name { width: 100%; }
    .cases .caseleft, .cases .caseright { display: none; }
    .comments .commentleft, .comments .commentright { display: none; }

    /* 新闻 + 常见问题 - 垂直排列 */
    .index .newques .inner { flex-direction: column; }
    .index .newques .news { width: 100%; }
    .index .newques .news ul { width: 100%; }
    .index .newques .news ul li img { width: 120px; height: 75px; }
    .index .newques .news ul li .detail { width: calc(100% - 140px); }
    .index .newques .question { width: 100%; margin-left: 0; margin-top: 40px; }
    .index .newques .question ul { width: 100%; }
    .index .newques .question ul li a { flex-wrap: wrap; height: auto; }
    .index .newques .question ul li .serial { width: 60px; font-size: 20px; height: 36px; line-height: 36px; }
    .index .newques .question ul li .name { width: calc(100% - 100px); height: auto; line-height: 36px; font-size: 16px; }
    .index .newques .question ul li .more { display: none; }

    /* 广告条 */
    .index .advert { height: auto; padding: 30px 15px; }
    .index .advert .detail { width: 100%; height: auto; }
    .index .advert .detail .name { font-size: 16px; }

    /* 页脚 */
    .footer .top { flex-direction: column; padding: 0 15px; }
    .footer .top .linker { width: 100%; flex-wrap: wrap; }
    .footer .top .linker .link { width: 50%; margin-bottom: 20px; }
    .footer .top .contact { width: 100%; margin-top: 20px; }
    .footer .top .contact .ditu { width: 100%; }
    .footer .top .contact .ditu .iframe { width: 100%; }
    .footer .top .contact .other { width: 100%; flex-wrap: wrap; }
    .footer .top .contact .other .left { width: 100%; text-align: center; }
    .footer .top .contact .other .left img { width: 100px; height: 100px; }
    .footer .top .contact .other .right { width: 100%; margin-left: 0; margin-top: 15px; text-align: center; }
    .footer .top .contact .other .right .button { margin: 15px auto 0 auto; }
    .footer .copyright { height: auto; margin-top: 40px; padding: 20px 0; }
    .footer .copyright .cnt { flex-direction: column; height: auto; text-align: center; }
    .footer .copyright .copy { width: 100%; text-align: center; line-height: 1.8; font-size: 12px; }
    .footer .copyright .friend { width: 100%; text-align: center; }
    .footer .copyright .friend select { margin-top: 10px; }

    /* 产品列表 - 单列 */
    .wrapperr .prolist .item { width: 100%; float: none; margin-bottom: 25px; }
    .wrapperr .prolist .item:nth-child(2n) { margin-left: 0; }
    .wrapperr .prolist .item .thumb { width: 100%; height: auto; }
    .wrapperr .prolist .item .thumb img { width: 80%; }
    .wrapperr .prolist .item .name { width: 100%; font-size: 22px; }
    .wrapperr .prolist .item .describe { width: 90%; }

    /* 新闻列表项 */
    .wrapperr .news .newlist .item .serial { left: 10px; }
    .wrapperr .news .newlist .item .name { width: calc(100% - 100px); margin-left: 80px; font-size: 16px; }
    .wrapperr .news .newlist .item .describe { width: calc(100% - 100px); margin-left: 80px; }
    .wrapperr .news .newlist .item .more { margin-left: 80px; }

    /* 问答/案例详情列表 */
    .questions .list .item a { flex-direction: column; }
    .questions .list .item .thumb { width: 100%; height: auto; margin-left: 0; }
    .questions .list .item .thumb img { width: 100%; height: auto; }
    .questions .list .item .detail { width: 100%; margin-left: 0; padding-left: 15px; border-left: none; border-top: dashed 2px #ececec; padding-top: 20px; margin-top: 15px; }
    .questions .list .item .detail .describe { height: auto; max-height: 150px; }

    /* 新闻详情 */
    .newsdetail .title { width: 100%; font-size: 22px; }
    .newsdetail .content { width: 100%; }
    .newsdetail .relation { width: 100%; }

    /* 面包屑导航 */
    .navi { height: auto; line-height: 1.6; padding: 10px 15px; font-size: 13px; }
    .navtit { height: 80px; line-height: 70px; font-size: 26px; }
    .navtit em { top: 60px; }

    /* 搜索框 */
    .navsea { width: 90%; max-width: 400px; }

    /* 分页 */
    .pages { height: auto; line-height: 2; padding: 15px 0; }
    .pages a { padding: 4px 8px; margin-right: 3px; font-size: 12px; }

    /* 购买列表 */
    .buys .list .item { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; height: auto; padding-bottom: 20px; }
    .buys .list .item:nth-child(3n) { margin-right: 0; }
    .buys .list .item .thumb { width: 160px; }
    .buys .list .item .detail { width: 90%; }
    .buys .list .item .name { width: 100%; }

    /* 标题字号调整 */
    .cases .title h3,
    .questions .title h3,
    .aboutus .title h3,
    .flower .title h3,
    .comments .title h3,
    .buys .title h3,
    .wrapperr .news .title h3,
    .index .products .title h3 { font-size: 26px; }

    /* 右侧浮动 + 左侧浮动 */
    .floatmenu { display: none !important; }
    .izl-rmenu { display: none !important; }
    #izl_rmenu { display: none !important; }
}