html, body {
  width: 100%;
  overflow-x: hidden;
}


/* ==============================
   全站全局样式（100%原版·含滚动动画）
============================== */

/* 全局背景：只保留顶部导航+轮播渐变，下方全部白色 */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #e6ffff 0%, #ffffff 380px) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 380px !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}

ul,ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: none;
}

img {
    border: none;
    max-width: 100%;
    vertical-align: middle;
    decoding: async;
}

input,textarea,button,select {
    font-family: inherit;
    outline: none;
    border: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

button,
input[type="submit"],
.btn,
.service-btn,
.cta-btn,
.case-btn,
.submit-btn,
.apply-btn {
    background-color: #00CCCC !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

button:hover,
input[type="submit"],
.btn:hover,
.service-btn:hover,
.cta-btn:hover,
.case-btn:hover,
.submit-btn:hover,
.apply-btn:hover {
    background-color: #00B2B2 !important;
    color: #FFFFFF !important;
}

#advantages .container,
#services .container,
#cases .container,
#about .container,
#shop .container,
#open-shop .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

#advantages .section-title,
#services .section-title,
#cases .section-title,
#about .section-title,
#shop .section-title,
#open-shop .section-title,
#open-shop h2 {
    font-size: 36px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

#advantages .section-subtitle,
#services .section-subtitle,
#cases .section-subtitle,
#about .section-subtitle,
#shop .section-subtitle,
#open-shop .section-subtitle,
#open-shop p {
    font-size: 16px !important;
    color: #666 !important;
    text-align: center !important;
    margin-bottom: 50px !important;
}

/* ==============================
   ✅ 统一所有模块间距（全局一致）
============================== */
#advantages,
#services,
#cases,
#about,
#shop,
#open-shop {
    padding: 80px 0 !important;
    margin: 0 !important;
}

#advantages .advantages-grid,
#cases .cases-slider-wrap {
    margin-top: 0 !important;
}

#cases .container > *,
#about .container > *,
#open-shop .container > * {
    margin-top: 0 !important;
}

/* ==============================
   返回顶部按钮（新增·不影响原有代码）
============================== */
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00CCCC, #00B2B2);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 204, 204, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 204, 204, 0.4);
}
.back-to-top::after {
    content: "";
    width: 12px;
    height: 12px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
}    
    


/* 手机端专属样式（屏幕宽度 ≤768px 生效） */
@media screen and (max-device-width:768px) {
  /* 轮播文字整体样式（不影响中文图片，保持原有功能） */
  .banner-content {
    transform: scale(0.75) !important;          /* 文字大小：数值越大文字越大，越小越小 */
    transform-origin: center top !important;     /* 缩放锚点：顶部中心，保持排版稳定 */
    top: 65px !important;                        /* 上下位置：数值越大越往下，越小越往上 */
    left: 20% !important;                       /* 左右基础位置：百分比定位，居中参考 */
    margin-left: -600px !important;             /* 宽度偏移修正，适配1200px布局 */
    width: 1200px !important;                   /* 文字容器固定宽度 */
    text-align: center !important;              /* 文字水平居中对齐 */
  }

  /* ======================
     【手机中文页面图片左右移动】
     只作用于：手机端 + 中文页面图片
     不影响：英文、PC端、文字、任何其他样式
  ====================== */
  html[lang="zh-CN"] .banner-image img {
    position: relative !important;              /* 图片相对定位，实现左右移动 */
    
    /* 图片左右移动调整：
     正数 = 图片向右移动  例：10px、20px
     负数 = 图片向左移动  例：-10px、-20px
     0px = 默认位置，不移动
    */
    left: -10px !important;                       
  }
}


/* ======================================
   【手机端英文轮播图 终极碾压版】
   优先级拉满，彻底覆盖所有冲突样式，只改目标元素
   ====================================== */
/* 用最高优先级选择器，碾压所有原有样式 */
@media screen and (max-device-width:768px) {
  html[lang="en"] div.banner-content {
    /* 1. 强制覆盖宽度/边距，解除锁死，让样式可以自由调整 */
    width: 90% !important; /* 改为百分比宽度 → 文字才能自动换行 */
    max-width: 90% !important;
    margin-left: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;

    /* 2. 核心定位：控制文字左右位置 + 缩放大小，100%生效
       左右位置：translate(-数值%, 0)
       数字越大越靠左（-20%、-25%），数字越小越靠右（-10%、-5%）
       缩放大小：scale(数值)
       数字越大越大，数字越小越小
    */
    transform: translate(0%, 0) scale(1.2) !important; /* 取消偏移，避免挤压不换行 */
    transform-origin: left top !important;

    /* 3. 上下位置：控制文字整体上下移动
       数字越大越往下，数字越小越往上
    */
    position: absolute !important;
    top: 100px !important;
    left: 5% !important; /* 居中定位，给文字足够宽度换行 */

    /* 4. 层级置顶，保证文字在最上层，不被图片遮挡 */
    z-index: 99999 !important;

    /* 5. 重置所有冲突属性，避免被其他样式干扰 */
    float: none !important;
    right: auto !important;
    text-align: left !important;

    /* ======================
       【强制英文手机文字自动换行】
       100%生效，不影响任何其他地方
    ====================== */
    white-space: normal !important; /* 允许自动换行 */
    word-break: break-all !important; /* 英文强制换行 */
    word-wrap: break-word !important; /* 长单词自动换行 */
    overflow: visible !important;
    display: block !important;
  }

  /* 单独给每一行强制覆盖换行，仅手机生效，不影响PC */
  html[lang="en"] .banner-content .line1,
  html[lang="en"] .banner-content .line2,
  html[lang="en"] .banner-content .line3,
  html[lang="en"] .banner-content .line4 {
    white-space: normal !important; /* 手机端自动换行 */
    word-break: break-all !important; /* 强制英文换行 */
    display: block !important;
    width: 100% !important;
  }

  /* ======================
     【手机英文页面 → 图片左右移动】
     只作用于：手机端 + 英文页面图片
     不影响任何文字 / PC / 中文
  ====================== */
  html[lang="en"] .banner-image img {
    display: block !important;
    margin-left: 250px !important; /* 正数右移，负数左移，0不移动 */
  }
}

/* ======================================
   🔥 🔥 🔥 【真正终极修复】解决FLEX布局导致不换行
   只作用手机英文 | PC/中文完全不动
====================================== */
@media screen and (max-device-width:768px) {
  html[lang="en"] .banner-inner {
    display: block !important;
  }
  html[lang="en"] .banner-content {
    width: 85% !important;
    max-width: 85% !important;
    margin: 0 auto !important;
    left: 0 !important;
    top: 100px !important;
  }
  html[lang="en"] .banner-content * {
    white-space: normal !important;
    word-break: break-all !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ==============================
✅ 最终英文换行修复（只加这一段，不动你原有任何代码）
============================== */
@media screen and (max-device-width:768px) {
  html[lang="en"] .banner-content .line1,
  html[lang="en"] .banner-content .line2,
  html[lang="en"] .banner-content .line3,
  html[lang="en"] .banner-content .line4 {
    width: 650px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}