@charset "utf-8";
/* ============================================================================
   Magical 官网 —— PC / 移动端自适应样式层
   加载位置：css/firefox_en.css 之后（见 Controls/Header.ascx）
   说明：
     1. 仅作用于官网前台页面，不影响 Manage 后台；
     2. 桌面端（>1020px）布局与原版保持一致；
     3. 针对老代码里的内联定宽样式 / JS 写入的内联样式，移动端使用 !important 覆盖；
     4. 断点：1020px（平板） / 768px（手机） / 480px（小屏手机）
   ============================================================================ */


/* ============================================================================
   0. 全局安全微调（所有尺寸，不影响原桌面视觉）
   ============================================================================ */
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;}
img{-ms-interpolation-mode:bicubic;}

/* 页脚两张图片在窄屏下不溢出 */
.footer_btm img{max-width:100%;height:auto;}

/* 富文本内容（产品详情 / 单页内容）里的图片自适应 */
#description img,#ContentDiv img,.procontent img,.aboutus img,.contactcon img{max-width:100%;height:auto;}
/* 富文本里后台编辑器插入的宽表格：内容列只有 730px，桌面端也会撑破布局，故全尺寸生效。
   用 fit-content 保证窄表格不被拉伸，宽表格则限宽 + 内部横向滚动。 */
#description table,#ContentDiv table,.procontent table{
    display:block;width:-webkit-fit-content;width:fit-content;max-width:100%;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}

/* FCKeditor（Feedback 留言）自适应 */
#FCKMessage___Frame{width:100%!important;max-width:100%!important;}

/* 顶部 LOGO 区（Top.ascx 由 table 改为三栏结构：现代浏览器 flex，老浏览器退化为 float） */
.top-inner:after{content:"";display:block;clear:both;}
.top-inner{display:flex;align-items:center;width:100%;}
.top-logo{float:left;width:150px;}
.top-logo img{display:block;height:110px;width:auto;max-width:100%;}
.top-banner{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-align:center;}
.top-banner img{height:auto;max-width:100%;}
.top-qr{float:right;width:150px;text-align:right;}
.top-qr img{display:block;height:110px;width:auto;max-width:100%;margin-left:auto;}

/* 汉堡按钮：桌面隐藏（图标样式在此定义，<=1020px 复用）
   用 currentColor 着色，便于在浅色背景上改为深灰线条 */
.nav-toggle{display:none;}
.nav-toggle-icon{display:inline-block;width:20px;height:2px;background:currentColor;position:relative;
                 vertical-align:middle;margin:-3px 8px 0 0;border-radius:1px;}
.nav-toggle-icon:before,.nav-toggle-icon:after{content:"";position:absolute;left:0;width:20px;height:2px;
                 background:currentColor;border-radius:1px;}
.nav-toggle-icon:before{top:-6px;}
.nav-toggle-icon:after{top:6px;}

/* 首页搜索条容器（Index.aspx 原为内联 982px 定宽） */
.searchbar{max-width:982px;background-color:#fff;margin:20px auto;padding:10px 0 0 20px;height:35px;box-sizing:border-box;}


/* ============================================================================
   1. <=1020px  平板 / 窄窗口：容器流式化，保持左右两栏
   ============================================================================ */
@media screen and (max-width:1020px){

  /* --- 容器由 980 定宽改为最大 980 流式 --- */
  .top1,.top,.maincontent,.footer_div1{width:auto!important;max-width:980px;box-sizing:border-box;}
  .top1,.top{padding-left:12px;padding-right:12px;}
  .maincontent{padding:10px 12px;margin-top:20px;}
  .header{height:auto!important;}
  .nav{background:none!important;height:auto!important;min-height:0;line-height:normal!important;position:relative;}
  /* 顶部信息条：取消定宽，防止 Catalogue Download 换行溢出 */
  .top1{height:auto!important;line-height:29px;}
  .top1 p{width:auto!important;}
  .top1 .tel{width:auto!important;}
  /* 老页面里写死的 683px 表格宽度，窄屏下不允许溢出 */
  .ordertable{max-width:100%!important;}

  /* ---------- LOGO 区：<=1020px 一行三格
     左：ewm.png（Maga LOGO） + 中：公司名图片 top_text.jpg + 右：菜单按钮
     主 LOGO logo.jpg 在窄屏不显示 ---------- */
  .top{height:auto!important;padding:8px 10px;}
  .top-inner{display:flex;align-items:center;width:100%;}
  .top-logo{display:none!important;}
  .top-banner{display:block!important;flex:1 1 auto;min-width:0;overflow:hidden;
      text-align:center;margin:0 6px;}
  .top-banner img{display:block;height:auto;max-width:100%!important;max-height:40px;margin:0 auto;}
  .top-qr{display:block!important;float:none!important;width:auto!important;flex:0 0 auto;
      order:-1;margin:0;text-align:left;}
  .top-qr img{display:block;height:56px;width:auto;max-width:100%!important;margin-left:0;}

  /* ---------- 菜单按钮：白底上的深灰线条图标（不用深色块） ---------- */
  .nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;
      flex:0 0 auto;margin-left:2px;width:40px;height:40px;padding:0;box-sizing:border-box;
      background:#fff;border:1px solid #e3e3e3;border-radius:6px;color:#444!important;
      font-size:13px;font-weight:bold;text-decoration:none;cursor:pointer;
      -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
  .nav-toggle-text{display:none!important;}
  .nav-toggle-icon{margin:0;}

  /* ---------- 折叠导航：默认收起，点菜单按钮展开 ---------- */
  .nav ul{display:none;width:100%!important;max-width:100%;padding:0!important;margin:0;background:#383838;}
  .nav.nav-open ul{display:block;}
  .nav ul li{float:none!important;display:block!important;width:100%;margin:0;padding:0;
      border-top:1px solid rgba(255,255,255,.12);}
  .nav li a{display:block;height:46px;line-height:46px;padding:0 16px!important;text-align:left!important;}
  .nav li a:hover{background:none;}
  .nav li ul{position:static!important;width:auto!important;left:0!important;height:auto!important;
      line-height:normal!important;display:none;}
  .nav li ul li{background:none;border:none;}

  /* --- 右侧主内容自适应，不再定宽 730 --- */
  .innerright{width:auto!important;float:none!important;overflow:hidden;}
  .innerleft{width:auto!important;float:none!important;overflow:hidden;}

  /* --- 首页：关于我们 / 联系我们 自适应 --- */
  .aboutus{width:auto!important;float:none!important;margin-left:0!important;overflow:hidden;}
  .contact{width:auto!important;float:none!important;overflow:hidden;}

  /* --- 横向滚动容器自适应 --- */
  #stroll,#stroll0{width:auto!important;max-width:100%;margin:10px auto;}
  .ovflow{width:auto!important;max-width:664px;}

  /* --- 产品详情大图自适应 --- */
  #ProImg{max-width:100%!important;height:auto!important;}
  .showimg img{max-width:100%!important;height:auto!important;}

  /* --- 轮播高度按屏宽缩放，背景图改为 cover --- */
  #full-screen-slider,#slides,#slides li{height:300px!important;}
  #slides li{background-size:cover!important;background-position:center center!important;}
  /* jsslides.js 内联写入的 margin-left 在窄屏下改为居中 */
  #pagination{top:auto!important;bottom:10px!important;left:0!important;right:0!important;
              width:100%!important;margin:0!important;padding:0!important;text-align:center;}
  #pagination li{float:none!important;display:inline-block;vertical-align:middle;margin:0 6px!important;}

  /* --- 分页条 --- */
  .pagebox{width:100%!important;height:auto!important;}
}


/* ============================================================================
   2. <=768px  手机：单栏布局 + 汉堡导航
   ============================================================================ */
@media screen and (max-width:768px){
  body{font-size:13px;}

  .maincontent{padding:8px 10px;margin-top:12px;}

  /* ---------- 顶部信息条 ---------- */
  .top1{height:auto!important;line-height:1.9!important;padding:6px 12px 4px!important;}
  .top1 p{float:none!important;width:auto!important;display:inline!important;}
  .top1 .tel{float:none!important;width:auto!important;display:inline!important;margin-left:8px;}
  .top1 .tel span{font-size:13px!important;height:auto!important;line-height:1.9!important;}

  /* ---------- LOGO 区：ewm.png + 公司名图片 + 菜单按钮 一行（尺寸收缩） ---------- */
  .top{padding:8px 10px;}
  .top-qr img{height:48px;}
  .top-banner img{max-height:34px;}
  .nav-toggle{width:38px;height:38px;}

  /* ---------- 轮播 ---------- */
  #full-screen-slider,#slides,#slides li{height:220px!important;}

  /* ---------- 单列布局：侧栏置顶（可折叠）+ 主内容 ---------- */
  .pro_cata,.innerright,.innerleft,.aboutus,.contact{
      width:100%!important;float:none!important;overflow:visible!important;
      margin-left:0!important;margin-right:0!important;}
  .pro_cata{margin-bottom:12px!important;}
  .pro_cata .titbg1{background:#3fa4da!important;
      background:linear-gradient(#5cb6e4,#2f92cd)!important;
      background-repeat:no-repeat!important;background-size:100% 32px!important;
      border-radius:4px;padding-left:12px!important;}
  .aboutus{margin-bottom:14px!important;}

  /* 侧栏折叠（.collapsible 由 responsive.js 添加） */
  .pro_cata.collapsible .titbg1{cursor:pointer;position:relative;}
  .pro_cata.collapsible .titbg1:after{content:"";position:absolute;right:16px;top:12px;width:8px;height:8px;
      border-right:2px solid #fff;border-bottom:2px solid #fff;
      -webkit-transform:rotate(45deg);transform:rotate(45deg);transition:-webkit-transform .2s;transition:transform .2s;}
  .pro_cata.collapsible.open .titbg1:after{top:17px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
  .pro_cata.collapsible .pro_cata_con{display:none;}
  .pro_cata.collapsible.open .pro_cata_con{display:block;max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* ---------- 首页搜索条 ---------- */
  .searchbar{height:auto!important;padding:0 10px!important;margin-top:14px!important;}
  .search_div{float:none!important;margin:0 auto;}
  .txt_search{font-size:16px;}

  /* ---------- 首页产品栅格：3 列自适应（覆盖 LoadImage 写入的内联尺寸） ---------- */
  #stroll0 .recopro-ul,#stroll .recopro-ul{display:flex;flex-wrap:wrap;margin:0 -6px;text-align:left;}
  #stroll0 .recopro-ul li,#stroll .recopro-ul li{float:none!important;display:block;width:33.3333%;margin:0!important;padding:6px;box-sizing:border-box;}
  #stroll0 .recopro-ul li a,#stroll .recopro-ul li a{display:block;width:100%!important;height:auto!important;}
  #stroll0 .recopro-ul li .boximg,#stroll .recopro-ul li .boximg{position:relative;height:auto!important;
      margin:3px;padding:0 0 100%;box-sizing:border-box;overflow:hidden;}
  #stroll0 .recopro-ul li .boximg img,#stroll .recopro-ul li .boximg img{
      position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;
      margin:0!important;object-fit:contain;}

  /* ---------- 产品列表页栅格（newpro-ul，原内联 155x166） ---------- */
  .newpro-ul{display:flex;flex-wrap:wrap;margin:0 -6px;text-align:left;}
  .newpro-ul li{float:none!important;display:block;width:33.3333%;margin:0!important;padding:6px;box-sizing:border-box;}
  .newpro-ul li a{display:block;width:100%!important;height:auto!important;}
  .newpro-ul li .boximg{position:relative;height:auto!important;margin:3px;padding:0 0 100%;box-sizing:border-box;overflow:hidden;}
  .newpro-ul li .boximg img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;margin:0!important;object-fit:contain;}

  /* ---------- 其它列表兜底 ---------- */
  .showimg img{max-width:100%!important;height:auto!important;}

  /* ---------- 产品详情 ---------- */
  #ProImg{max-width:100%!important;height:auto!important;}

  /* ---------- 表格 / 表单：卡片化 ---------- */
  .ordertable{display:block;width:100%!important;border:none!important;padding-left:0!important;margin:0!important;}
  .ordertable tbody,.ordertable tr,.ordertable td{display:block;width:auto!important;box-sizing:border-box;}
  .ordertable tr{border:1px solid #e2e2e2;border-radius:6px;padding:10px 12px;margin-bottom:10px;background:#fcfcfc;}
  .ordertable td{border:none!important;padding:2px 0!important;line-height:1.7!important;word-break:break-word;}
  .ordertable td.order_title{font-weight:bold;color:#555;font-size:12px;padding-top:6px!important;}
  .ordertable td.job-value{font-weight:normal;color:#333;font-size:13px;padding:0!important;}
  .ordertable td.job-meta{font-weight:normal;color:#999;font-size:12px;padding:0!important;}
  .ordertable input[type="text"],.ordertable select,.ordertable textarea{
      width:100%!important;box-sizing:border-box;min-height:36px;padding:4px 8px;font-size:16px;font-family:inherit;}
  .ordertable textarea{min-height:0;padding:8px;height:auto;}
  .ordertable .but{width:100%!important;height:40px;font-size:15px;}

  /* ---------- 分页 ---------- */
  .pager{float:none!important;margin:10px 0!important;height:auto!important;overflow:visible!important;text-align:center;}
  .pager a,.pager span.active{display:inline-block!important;float:none!important;height:auto!important;
      line-height:1.2!important;padding:8px 10px!important;margin:2px!important;font-size:13px!important;box-sizing:border-box;}
}


/* ============================================================================
   3. <=480px  小屏手机：进一步压缩
   ============================================================================ */
@media screen and (max-width:480px){
  .maincontent{padding:8px;margin-top:10px;}
  .top1{font-size:12px;}
  .top{padding:6px 8px;}
  .top-qr img{height:40px;}
  .top-banner{margin:0 4px;}
  .top-banner img{max-height:26px;}
  .nav-toggle{width:36px;height:36px;}

  #full-screen-slider,#slides,#slides li{height:150px!important;}

  .maincontent .pro_cata,.maincontent .aboutus,.maincontent .contact{padding:0;}
  .innerrightcontent p{margin:0 8px!important;line-height:26px;font-size:13px;}
  .position{padding-left:8px!important;height:auto;min-height:30px;}
  .titbg1 h3,.titbg2 h3{font-size:13px;}

  /* 小屏手机产品栅格降为 2 列 */
  #stroll0 .recopro-ul li,#stroll .recopro-ul li,.newpro-ul li{width:50%!important;}

  /* 表单标签与输入框均占满一行 */
  .ordertable td.order_title{padding-top:8px!important;}
}