/* ============================================================
   ChemiTech 高端化升级覆盖层（移动端 max-width:640px）
   与桌面端同一设计令牌体系：深海军蓝主导 + 品牌橙单点强调
   部署：/template/cssWap/custom.css（css_js.asp 末尾引入）
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --navy-950:#071A2E;
  --navy-900:#0A2540;
  --navy-800:#0F2F50;
  --navy-700:#14486B;
  --brand-500:#E8491D;
  --brand-600:#C93A14;
  --ink-900:#16283C;
  --ink-700:#33455A;
  --muted:#5A6B7C;
  --line:#E3E9F0;
  --bg-soft:#F5F8FB;
  --white:#FFFFFF;
  --radius-sm:6px;
  --radius-md:10px;
  --shadow-1:0 2px 8px rgba(10,37,64,.08);
  --shadow-2:0 10px 30px rgba(10,37,64,.14);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:180ms;
  --dur-base:340ms;
  --font-num:"Bahnschrift","DIN Alternate","Arial Narrow","Microsoft YaHei",sans-serif;
}

/* ---------- 2. 全局基调 ---------- */
body{ color:var(--ink-700); }
a{ color:var(--navy-800); }
a:hover{ color:var(--brand-500); }
h1,h2,h3,h4{ color:var(--ink-900); }

/* ---------- 3. 头部 Logo 区 ---------- */
.t_logo .left .txt{
  background:none !important;
  border-left:0.06rem solid var(--brand-500) !important;
}
.t_logo .left .txt .one{
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:0.06rem;
  font-family:var(--font-num);
}
.t_logo .left .txt .two{
  color:var(--brand-500);
  font-weight:600;
  letter-spacing:0.12rem;
  text-transform:uppercase;
  font-family:var(--font-num);
}

/* 菜单按钮色调 */
.menunavbtn{ color:var(--navy-900); }

/* ---------- 4. 抽屉导航：蓝渐变 → 深海军蓝 ---------- */
.t_nav{
  background:var(--navy-900) !important;
  border-top:0.06rem solid var(--brand-500);
  border-radius:0.16rem;
  box-shadow:0 10px 30px rgba(10,37,64,.25);
}
.t_nav ul li{
  border-bottom:0.02rem solid rgba(255,255,255,.10) !important;
}
.t_nav a{
  color:rgba(255,255,255,.88);
  letter-spacing:0.06rem;
}
.t_nav a:hover{ color:#fff; }
.t_nav ul li a{
  background-image:none !important;
}

/* 语言切换按钮（抽屉菜单底部项）：品牌橙胶囊 */
.t_nav ul li.langItem{
  border-bottom:none !important;
  padding:0.4rem 0 0.5rem;
  text-align:center;
}
.t_nav ul li.langItem .langSwitch{
  display:inline-block;
  width:70%;
  line-height:1.6rem;
  border:0.04rem solid rgba(255,255,255,.5);
  border-radius:999px;
  color:#fff;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.12rem;
  font-family:var(--font-num);
  text-align:center;
}
.t_nav ul li.langItem .langSwitch:hover{
  background:var(--brand-500);
  border-color:var(--brand-500);
}

/* ---------- 5. 首页/内页 Banner 遮罩 ---------- */
.bannerBox,
.in_banner{ position:relative; }
.bannerBox::after,
.in_banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(7,26,46,.08) 0%, rgba(7,26,46,0) 40%, rgba(7,26,46,.30) 100%);
}

/* ---------- 6. 区块标题：深蓝 + 品牌橙短线 ---------- */
.iBaoZhang .shareTitle .cn,
.title_center{
  color:var(--navy-900);
  background:none !important;
}
.iBaoZhang .content{ color:var(--ink-700); letter-spacing:0.06rem; }

/* ---------- 7. 卡片与按钮 ---------- */
.shareProItem,
.shareNewBox,
.shareFaItem{
  border:0.03rem solid var(--line);
  border-radius:var(--radius-md);
  background:var(--white);
  box-shadow:var(--shadow-1);
}
a.more,
.more a,
a.tzBox,
.lookMore a{
  background:var(--brand-500);
  color:#fff !important;
  border-radius:var(--radius-sm);
}
a.more:active,
.more a:active{
  background:var(--brand-600);
  transform:scale(.97);
}

/* ---------- 8. 页脚 ---------- */
.foot{ background:var(--navy-950) !important; color:rgba(255,255,255,.72); }
.foot a{ color:rgba(255,255,255,.72); }
.bq{ color:rgba(255,255,255,.5); }

/* ---------- 9. 选中色 ---------- */
::selection{ background:var(--brand-500); color:#fff; }

/* ---------- 10. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- 11. 首页产品板块（iPro）移动端重构 ---------- */
/* 移动端：上下结构，先二级分类 chip，再产品 2 列；按钮做成真实 chip */

/* 11.0 板块容器 */
.iPro{ padding:36px 0 44px !important; overflow-x:clip; }
.iPro::before{
  content:"03  PRODUCT PORTFOLIO";
  display:block;
  font:600 10px/1 var(--font-display);
  letter-spacing:.22em;
  color:var(--text-muted);
  opacity:.5;
  margin-bottom:10px;
  padding:0 16px;
}

/* 11.1 上下结构 */
.iPro .pl_Box{
  display:flex !important;
  flex-direction:column !important;
  gap:18px;
  min-width:0;
}
.iPro .pl_Box > li.left,
.iPro .pl_Box > li.right{
  width:100% !important; flex:none !important; min-width:0;
}

/* 11.2 移动端分类：扁平化横滚 chip 风（隐藏一级，只露二级） */
.iPro .typeNav{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}
.iPro .left_Title{ display:none !important; }
.iPro .left_content{ padding:0 !important; }
.iPro .left_content .ul_8{
  display:flex !important; flex-wrap:wrap;
  gap:6px;
  padding:0 16px;
  min-width:0;
}
.iPro .left_content .bigNav > a{ border:none !important; padding:0 !important; }
.iPro .left_content .bigNav > a::before{ content:none !important; }
.iPro .left_content .bigNav{ display:none !important; }
.iPro .left_content .subBox{
  display:contents !important;
  border:none !important; padding:0 !important; margin:0 !important;
}
.iPro .left_content .smallType{
  float:none !important; display:inline-block !important; min-width:0;
}
.iPro .left_content .smallType > a{
  display:inline-block;
  font-size:12px;
  color:var(--text-muted);
  padding:6px 12px;
  border:1px solid #E5E9F0;
  border-radius:14px;
  background:#ffffff;
  text-decoration:none;
  white-space:nowrap;
  transition:all .18s ease;
}
.iPro .left_content .smallType > a:hover,
.iPro .left_content .smallType > a:active{
  color:#ffffff;
  background:var(--brand-500);
  border-color:var(--brand-500);
}

/* 11.3 移动端产品标题区：水平布局 + 真实 chip 按钮 */
.iPro .right .proTitle{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 16px 14px !important;
  padding-bottom:12px;
  border-bottom:1px solid #E5E9F0;
  min-width:0;
}
.iPro .right .proTitle .sub_left{
  font:700 18px/1.1 var(--font-display) !important;
  color:var(--navy-900);
  letter-spacing:-.01em;
  flex:1 1 auto; min-width:0;
}
.iPro .right .proTitle .sub_left::after{ content:none !important; }
.iPro .right .proTitle .sub_right{ margin-left:0; flex:0 0 auto; }
.iPro .right .proTitle .sub_right .more{
  display:inline-flex !important; align-items:center; gap:6px;
  font-size:12px !important; font-weight:600;
  color:var(--navy-900);
  background:#ffffff;
  border:1px solid #0A2540;
  border-radius:999px;
  padding:6px 14px;
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  transition:all .2s ease;
}
.iPro .right .proTitle .sub_right .more::before{
  content:""; width:14px; height:14px; border-radius:50%;
  background:var(--navy-900);
  flex:0 0 auto;
}
.iPro .right .proTitle .sub_right .more::after{
  content:"→"; color:#ffffff; font-size:11px; font-weight:700;
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
}
.iPro .right .proTitle .sub_right .more span{ display:none !important; }
.iPro .right .proTitle .sub_right .more:hover,
.iPro .right .proTitle .sub_right .more:active{
  background:var(--navy-900);
  color:#ffffff;
  border-color:var(--navy-900);
}
.iPro .right .proTitle .sub_right .more:hover::before{
  background:var(--brand-500);
}

/* 11.4 移动端产品卡片：2 列网格 + 1:1 比例 */
.iPro .sContent{ min-width:0; padding:0 16px; }
.iPro .sContent > .pl{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px;
  margin:0 !important;
  min-width:0;
}
.iPro .sContent > .pl::after{ content:none !important; }

.iPro .shareProItem{
  background:#ffffff;
  border:1px solid #EEF1F5;
  border-radius:10px;
  margin:0 !important;
  float:none !important;
  display:flex !important;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  contain:layout paint;
}
.iPro .shareProItem .one{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#F7F9FC;
  width:100%;
  flex:0 0 auto;
}
.iPro .shareProItem .one img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:center;
}
.iPro .shareProItem .one::after{ display:none !important; }

.iPro .shareProItem .txt{
  padding:10px !important;
  text-align:left !important;
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:6px;
  min-width:0;
}
.iPro .shareProItem .three{
  display:block !important;
  font-size:13px !important;
  font-weight:600;
  color:var(--navy-900);
  text-decoration:none;
  margin-bottom:0 !important;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.iPro .shareProItem .two{
  display:flex !important; gap:4px;
  margin:0 !important;
  flex:0 0 auto;
  min-width:0;
}
.iPro .shareProItem .two a{
  flex:1 1 0; min-width:0;
  font-size:11px;
  padding:5px 4px !important;
  border-radius:3px;
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  display:inline-flex !important; align-items:center; justify-content:center;
}
.iPro .shareProItem .two a:first-child{
  color:var(--navy-900);
  border:1px solid #D8DEE7;
  background:#ffffff;
}
.iPro .shareProItem .two a:last-child{
  color:var(--brand-500);
  border:1px solid var(--brand-500);
  background:rgba(232,73,29,.04);
}

/* 其它首页板块移动端 padding 收紧 */
.iBaoZhang, .iAbout, .iCase, .iNews{
  padding:32px 16px !important;
}
.iBaoZhang::before, .iAbout::before,
.iCase::before, .iNews::before{
  content:attr(data-chapter);
  display:block;
  font:600 10px/1 var(--font-display);
  letter-spacing:.22em;
  color:var(--text-muted);
  opacity:.55;
  text-align:center;
  margin-bottom:8px;
}
.iBaoZhang::before{ content:"02  CORE PILLARS"; }
.iAbout::before{ content:"04  ABOUT US"; }
.iCase::before{ content:"05  CLIENT STORIES"; }
.iNews::before{ content:"06  INDUSTRY INSIGHTS"; }