/* ====== 全局微调 ====== */
body {
  font-family: "Microsoft YaHei", sans-serif;
  background: #fff;
}

/* =========================================================
   1. 顶部视频 Banner：PC + 移动端都显示视频
   ========================================================= */
.m_banner,
.mtbanner {
  display: none !important;
}

.mh-bannerx {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  background: #000;
}

.mh-bannerx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.mh-bannerx-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 30, 0.42);
  z-index: 2;
}

.mh-bannerx-content {
  position: relative;
  z-index: 3;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  padding: 0 20px;
}

.mh-bannerx-title {
  font-size: clamp(30px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 18px;
}

.mh-bannerx-subtitle {
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 26px;
}

.mh-bannerx .mhx6-btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 170px;
  padding: 10px 28px !important;
  border-radius: 30px !important;
  background: linear-gradient(90deg, #0056b3, #0077ff);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(0, 86, 179, .4);
  transition: .25s;
}
.mh-bannerx .mhx6-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(0, 86, 179, .55);
}

/* 移动端 */
@media (max-width: 992px) {
  .mh-bannerx {height: 58vh; min-height: 380px;}
  .mh-bannerx-content {top: 48%;}
  .mh-bannerx-title {font-size: 26px;}
  .mh-bannerx-subtitle {font-size: 14px;}
}
@media (max-width: 480px) {
  .mh-bannerx {height: 62vh;}
  .mh-bannerx-title {font-size: 22px;}
  .mh-bannerx-subtitle {font-size: 13px;}
}

/* =========================================================
   2. Module 1：TikTok 全球实时数据
   ========================================================= */
.mhmod1-section {text-align:center;padding:50px 0;background:#f5f6fa;animation:fadeInUp 1s ease;}
.mhmod1-header {margin-bottom:45px;text-align:center;}
.mhmod1-title {font-size:34px;color:#111;font-weight:800;letter-spacing:2px;margin-bottom:8px;}
.mhmod1-en {font-size:16px;color:#888;letter-spacing:1px;margin-bottom:10px;}
.mhmod1-sub {font-size:17px;color:#333;margin-bottom:40px;}
:root {--space-1:8px;--space-2:12px;--space-3:16px;--space-4:20px;--space-5:24px;--card-radius:12px;--shadow-1:0 6px 18px rgba(10,40,80,0.06);--shadow-2:0 12px 25px rgba(10,40,80,0.10);--blue:#007bff;--blue-2:#2b9af3;--text-1:#0b2540;--text-2:#084d8c;--muted:#4a6b8a;--grid:#eee;--grid-soft:#f5f5f5;}
.container {max-width:1200px;margin:0 auto;padding:0 var(--space-3);}
.mhmod1-section header {display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-4);animation:fadeIn .8s ease-out;}
.mhmod1-section header h1 {margin:0;font-size:clamp(18px,2.3vw,22px);font-weight:700;color:var(--text-2);}
.mhmod1-section header .subtitle {font-size:clamp(12px,1.7vw,13px);color:var(--muted);}
.kpis {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-4);animation:slideUp .9s ease-out;}
.kpi {background:#fff;border-radius:var(--card-radius);padding:var(--space-4);box-shadow:var(--shadow-1);transition:.25s;text-align:left;}
.kpi:hover {transform:translateY(-3px);box-shadow:var(--shadow-2);}
.kpi .label {font-size:clamp(12px,1.8vw,13px);color:#5b6b7b;margin-bottom:6px;}
.kpi .value {font-size:clamp(20px,3vw,24px);font-weight:700;color:var(--text-2);}
.charts {display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);animation:fadeIn 1.2s ease-out;}
.chart-card {background:#fff;border-radius:var(--card-radius);padding:clamp(12px,2vw,16px);box-shadow:var(--shadow-1);transition:.25s;}
.chart-card:hover {transform:translateY(-3px);box-shadow:var(--shadow-2);}
.chart-card h3 {margin:0 0 8px;font-size:clamp(14px,1.9vw,16px);color:var(--text-2);font-weight:600;}
.chart-card.wide {grid-column:1 / -1;}
.chart-canvas {display:block;width:100%!important;height:clamp(200px,28vw,320px)!important;}
#countryChart.chart-canvas {height:clamp(160px,22vw,260px)!important;}
.mhmod1-section footer {margin-top:var(--space-4);font-size:clamp(12px,1.7vw,13px);color:#5b6b8c;text-align:left;}
@keyframes fadeInUp {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn {from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideUp {from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:992px){.kpis{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.mhmod1-section header{flex-direction:column;align-items:flex-start;}.kpis{grid-template-columns:1fr;}.charts{grid-template-columns:1fr;}#countryChart.chart-canvas{height:clamp(200px,40vw,320px)!important;}}
@media (max-width: 768px) {
  .mhmod1-section {
    padding: 50px 20px; /* 给移动端加左右内边距 */
  }

  .mhmod1-sub {
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;     /* 控制文字宽度，让中间留白 */
    line-height: 1.6;
  }
}


/* =========================================================
   3. Module 2：品牌出海（INNOVATION + 卡片）
   ========================================================= */
.mhmod2-section{text-align:center;padding:50px 5%;position:relative;overflow:hidden;font-family:"Microsoft YaHei","Helvetica Neue",sans-serif;background:linear-gradient(to bottom,#f8fafc 0%,#fff 100%);}
.mhmod2-title{font-size:34px;color:#111;font-weight:800;letter-spacing:2px;}
.mhmod2-subtitle{font-size:16px;color:#888;margin:6px 0 10px;letter-spacing:1px;}
.mhmod2-desc{font-size:17px;color:#333;margin-bottom:20px;}
.mhmod2-innovation{font-size:clamp(70px,12vw,180px);font-weight:900;text-transform:uppercase;background-image:var(--bg-img);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;margin-bottom:40px;position:relative;display:inline-block;} */
.mhmod2-innovation::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);mix-blend-mode:lighten;pointer-events:none;}
.mhmod2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;max-width:1200px;margin:0 auto;}
.mhmod2-card{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:45px 25px 40px;transition:.4s;border-top:4px solid transparent;}
.mhmod2-card:hover{transform:translateY(-10px);box-shadow:0 12px 40px rgba(0,123,255,.25);border-top:4px solid #007bff;}
.mhmod2-num{font-size:48px;font-weight:800;color:#007bff;margin-bottom:12px;}
.mhmod2-card-title{font-size:18px;color:#111;font-weight:600;margin-bottom:10px;}
.mhmod2-card-desc{font-size:14px;color:#555;line-height:1.6;max-width:260px;margin:0 auto;}
@media(max-width:992px){.mhmod2-stats{grid-template-columns:repeat(2,1fr);gap:25px;}.mhmod2-card{padding:40px 20px;}}
@media(max-width:768px){.mhmod2-innovation{font-size:clamp(36px,18vw,72px);white-space:normal;line-height:1.1;}}
@media(max-width:600px){.mhmod2-section{padding:50px 6%;}.mhmod2-title{font-size:28px;}.mhmod2-num{font-size:38px;}.mhmod2-card-desc{font-size:13px;}}

/* =========================================================
   4. Module 3：选择我们的理由（mhx6-section）
   ========================================================= */
.mhx6-section{padding:50px 20px;background:#f5f6fa;}
.mhx6-inner{max-width:1200px;margin:0 auto;}
.mhx6-head{text-align:center;margin-bottom:50px;}
.mhx6-title{font-size:32px;font-weight:800;color:#0a2540;margin-bottom:12px;}
.mhx6-desc{font-size:16px;color:#555;line-height:1.6;max-width:680px;margin:0 auto;}
.mhx6-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.mhx6-card{display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,40,100,0.07);overflow:hidden;transition:.35s;}
.mhx6-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,40,100,0.12);}
.mhx6-imgwrap img{width:100%;height:180px;object-fit:cover;transition:transform .6s;}
.mhx6-card:hover .mhx6-imgwrap img{transform:scale(1.05);}
.mhx6-card-body{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;padding:24px;}
.mhx6-card-title{font-size:18px;font-weight:700;color:#0a2540;margin-bottom:10px;}
.mhx6-card-sub{font-size:14px;color:#5a6b85;background:rgba(0,119,255,0.06);border-left:3px solid rgba(0,119,255,0.4);border-radius:4px;padding:8px 10px;margin-bottom:14px;}
.mhx6-card-text{font-size:14px;color:#333;line-height:1.7;margin-bottom:20px;}
.mhx6-btn{display:flex;align-items:center;justify-content:center;height:42px;width:100%;background:linear-gradient(90deg,#0056b3,#0077ff);color:#fff;border-radius:6px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 3px 10px rgba(0,86,179,0.3);transition:.3s;cursor:pointer;}
.mhx6-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,86,179,0.4);}
@media(max-width:1200px){.mhx6-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.mhx6-grid{grid-template-columns:1fr;}}

/* 弹窗样式 */
.mhx6-modal{display:none!important;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);z-index:9999;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;}
.mhx6-modal.show{display:flex!important;opacity:1;}
.mhx6-modal-content{background:#fff;width:90%;max-width:360px;border-radius:14px;box-shadow:0 15px 40px rgba(0,0,0,.2);padding:40px 30px 30px;text-align:center;position:relative;animation:fadeInScale .3s;}
@keyframes fadeInScale{from{transform:scale(.95);opacity:0;}to{transform:scale(1);opacity:1;}}
.mhx6-modal-close{position:absolute;top:10px;right:16px;font-size:24px;color:#888;background:none;border:none;cursor:pointer;}

/* =========================================================
   5. Module 4：专业服务（mhx4-modern）
   ========================================================= */
.mhx4-modern-section{padding:50px 20px;background:#fff;}
.mhx4-modern-inner{max-width:1200px;margin:0 auto;}
.mhx4-modern-head{text-align:center;margin-bottom:60px;}
.mhx4-modern-main-title{font-size:32px;font-weight:800;color:#0a2540;margin-bottom:14px;}
.mhx4-modern-line{width:60px;height:3px;background:linear-gradient(90deg,#0077ff,#00b0ff);margin:0 auto 16px;border-radius:3px;}
.mhx4-modern-sub-title{font-size:15px;color:#5a6b85;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;}
.mhx4-modern-desc-title{font-size:16px;color:#444;line-height:1.7;max-width:620px;margin:0 auto;}
.mhx4-modern-card{background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(10,40,80,0.08);padding:32px 28px;margin-bottom:40px;transition:.3s;}
.mhx4-modern-card:hover{box-shadow:0 10px 28px rgba(10,40,80,0.12);transform:translateY(-3px);}
.mhx4-modern-card-title{font-size:24px;font-weight:800;color:#0a2540;margin-bottom:20px;}
.mhx4-modern-content-row{display:flex;align-items:stretch;gap:24px;}
.mhx4-modern-left{flex:1.3;display:flex;flex-direction:column;}
.mhx4-modern-desc{font-size:16px;color:#333;line-height:1.8;margin-bottom:18px;}
.mhx4-modern-tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:20px;}
.mhx4-modern-tags span{font-size:14px;color:#0a2540;border:1px solid #cfd8e8;border-radius:6px;padding:7px 13px;background:#f9fbff;white-space:nowrap;}
.mhx4-modern-list{list-style:none;margin:0;padding:0;}
.mhx4-modern-list li{background:#f8faff;border-radius:8px;padding:12px 15px;margin-bottom:10px;box-shadow:0 2px 5px rgba(0,40,100,0.04);font-size:15px;color:#1a1f2e;transition:.3s;}
.mhx4-modern-list li:hover{background:#0077ff;color:#fff;transform:translateX(4px);}
.mhx4-modern-right{flex:1;border-radius:10px;overflow:hidden;background:#f5f7fb;display:flex;align-items:center;justify-content:center;}
.mhx4-modern-right img{width:100%;height:100%;object-fit:cover;border-radius:10px;transition:transform .4s;}
.mhx4-modern-right img:hover{transform:scale(1.05);}
@media(max-width:900px){.mhx4-modern-content-row{flex-direction:column;}.mhx4-modern-right{width:100%;height:220px;}.mhx4-modern-right img{height:100%;}.mhx4-modern-card-title{font-size:20px;}.mhx4-modern-desc{font-size:15px;}}

/* =========================================================
   6. Module 5：外贸全流程
   ========================================================= */
.mhx5-section{padding:50px 20px;background:#fff;color:#0a2540;}
.mhx5-inner{max-width:1200px;margin:0 auto;}
.mhx5-head{text-align:center;margin-bottom:60px;}
.mhx5-title{font-size:34px;font-weight:800;margin-bottom:12px;color:#0a2540;}
.mhx5-subtitle{font-size:15px;color:#5a6b85;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.mhx5-desc{font-size:16px;color:#444;line-height:1.7;}
.mhx5-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.mhx5-card{background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(0,40,100,0.06);padding:28px 24px 34px;transition:.35s;text-align:left;border:1px solid rgba(0,0,0,0.03);}
.mhx5-card:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(0,40,100,0.1);}
.mhx5-icon{width:60px;height:60px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.mhx5-icon img{width:100%;height:100%;object-fit:contain;transition:.4s;filter:brightness(0)saturate(100%)invert(39%)sepia(89%)saturate(744%)hue-rotate(182deg)brightness(103%)contrast(102%);}
.mhx5-card:hover .mhx5-icon img{transform:scale(1.1);filter:brightness(0)saturate(100%)invert(39%)sepia(90%)saturate(1200%)hue-rotate(200deg)brightness(105%)contrast(110%);}
.mhx5-card h3{font-size:18px;font-weight:800;margin-bottom:12px;color:#0a2540;}
.mhx5-card ul{list-style:none;padding:0;margin:0;}
.mhx5-card li{font-size:15px;color:#333;line-height:1.8;position:relative;padding-left:20px;margin-bottom:6px;}
.mhx5-card li::before{content:"🔗";position:absolute;left:0;top:0;font-size:13px;color:#0077ff;}
@media(max-width:1100px){.mhx5-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.mhx5-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.mhx5-grid{grid-template-columns:1fr;}}
/* =========================================================
   🌍 Module 5：外贸全流程一站式服务
   所有端（PC + 移动端）卡片内容居中显示
========================================================= */
.mhx5-section .mhx5-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;       /* 水平居中 */
  justify-content: center !important;   /* 垂直居中 */
  text-align: center !important;        /* 文本居中 */
  min-height: 240px;                    /* 卡片高度一致，可按视觉调整 */
  padding: 20px 18px;                   /* 内边距保持协调 */
  box-sizing: border-box;
}

/* 标题样式 */
.mhx5-section .mhx5-card h3 {
  margin-top: 12px !important;
  margin-bottom: 10px !important;
  font-weight: 600;
}

/* 列表样式 */
.mhx5-section .mhx5-card ul {
  list-style: none;
  padding-left: 0 !important;
  margin: 0;
}

.mhx5-section .mhx5-card li {
  margin: 5px 0;
  line-height: 1.6;
}

/* =========================================================
   📱 移动端优化：每行两个卡片 + 紧凑排版
========================================================= */
@media (max-width: 768px) {
  .mhx5-section .mhx5-grid,
  .mhx5-section .mhx5-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 每行2个卡片 */
    gap: 14px !important;
  }

  .mhx5-section .mhx5-card {
    min-height: 180px !important; /* 移动端略低一点 */
    padding: 14px 10px !important; /* 内容更紧凑 */
  }

  .mhx5-section .mhx5-card h3 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .mhx5-section .mhx5-card li {
    font-size: 13px !important;
    line-height: 1.4;
  }
}
/* 让最后一个卡片独占一行并变宽 */
@media (max-width: 700px) {
  .mhx5-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .mhx5-card {
    min-height: 200px;
    padding: 18px 14px;
    box-sizing: border-box;
  }

  /* 让最后一个卡片独占一行 */
  .mhx5-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 100%;            /* 控制它宽一点，更协调 */
    margin: 0 auto;        /* 居中显示 */
  }
}


/* =========================================================
   7. Module 6：新闻动态
   ========================================================= */
.mhx7-section{padding:50px 20px;background:#f5f6fa;color:#0a2540;}
.mhx7-inner{max-width:1200px;margin:0 auto;}
.mhx7-head{text-align:center;margin-bottom:50px;}
.mhx7-title{font-size:34px;font-weight:800;color:#0a2540;}
.mhx7-line{width:60px;height:3px;background:linear-gradient(90deg,#0077ff,#00b0ff);margin:14px auto;border-radius:3px;}
.mhx7-subtitle{font-size:16px;color:#555;}
.mhx7-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:40px;}
.mhx7-card{flex:1;min-width:300px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,40,100,0.08);transition:.35s;}
.mhx7-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(0,40,100,0.15);}
.mhx7-card img{width:100%;height:200px;object-fit:cover;}
.mhx7-card p{font-size:15px;color:#222;padding:14px 18px;line-height:1.6;transition:color .3s;}
.mhx7-card:hover p{color:#0077ff;}
.mhx7-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
.mhx7-list{flex:1;min-width:280px;}
.mhx7-list ul{list-style:none;padding:0;margin:0;}
.mhx7-list li{font-size:15px;color:#333;line-height:1.8;border-bottom:1px dashed #e3e6ee;padding:8px 0;transition:.3s;}
.mhx7-list li:hover{color:#0077ff;padding-left:6px;}
.mhx7-list li span{color:#0077ff;font-weight:600;display:inline-block;width:60px;}
@media(max-width:900px){.mhx7-top,.mhx7-bottom{flex-direction:column;}}
/* 控制字母大小 */
/* ========== 修复移动端品牌出海 INNOVATION 显示不全 ========== */
@media (max-width: 768px) {
  .mhmod2-innovation {
    font-size: clamp(28px, 10vw, 48px) !important; /* ✅ 字号缩小，避免超出 */
    letter-spacing: 1px !important;                /* ✅ 减少字间距 */
    word-break: break-word !important;             /* ✅ 自动换行 */
    white-space: normal !important;                /* ✅ 允许换行 */
    line-height: 1.1 !important;
    max-width: 100% !important;                    /* ✅ 限制宽度不超出屏幕 */
    overflow-wrap: break-word !important;          /* ✅ 长词自动断开 */
  }
}
/* =========================================================
   💡 移动端优化：卡片更突出 + 微边框
   ========================================================= */
@media (max-width: 768px) {
  /* 模块4：选择我们的专业服务 */
  .mhx4-modern-card {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
    border: 1px solid rgba(0, 40, 100, 0.10) !important; /* ✅ 增加浅灰蓝边框 */
    box-shadow: 0 6px 20px rgba(0, 40, 100, 0.10) !important;
    border-radius: 14px !important;
  }

  /* 模块5：外贸全流程一站式服务 */
  .mhx5-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
    border: 1px solid rgba(0, 40, 100, 0.12) !important; /* ✅ 增加浅灰蓝边框 */
    box-shadow: 0 6px 22px rgba(0, 60, 120, 0.10) !important;
    border-radius: 14px !important;
  }
}
/* =========================================================
   📱 移动端优化：让 mhx4-modern-list 的 li 更明显可区分
   ========================================================= */
@media (max-width: 768px) {

  .mhx4-modern-list li {
    background: #eef5ff !important;          /* 更明显的淡蓝底 */
    color: #0a2440 !important;               /* 深色文本，更清晰 */
    border-left: 4px solid #0077ff !important; /* 左侧高亮视觉条 */
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 60, 120, 0.12) !important; /* 阴影更明显 */
  }

  /* hover 效果变轻，避免手机端误触变色太强烈 */
  .mhx4-modern-list li:hover {
    background: #dceaff !important;
    color: #003366 !important;
    transform: none !important;
  }
}