/* =============================================================
   复刻站补充样式
   1) 补齐原站由 JS 驱动的动画可见状态（保证静态渲染也完整呈现）
   2) 在线留言入口与弹层
   ============================================================= */

/* ---------- s4（智能家用面板）滚动后可见 ---------- */
.SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series .title {
  opacity: 1;
  transition: opacity .5s ease-out;
}
.SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series .move-box .top-box .left-phone,
.SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series .move-box .top-box .right-phone,
.SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series .move-box .bottom-box .bottom-phone {
  opacity: 1;
  transition: opacity .6s ease-out;
}
.SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series .ani-box .sm-img {
  will-change: transform;
}

/* ---------- 首屏黑色遮罩：原站由 JS 控制 opacity（初始 0） ---------- */
/* 原站 .down_mask 是纯黑不透明层，靠脚本在加载后置 opacity:0，
   静态版本没有那段脚本，会把背景视频整块盖住，看起来像"视频不播放"。
   这里恢复为初始透明，并由 site.js 在滚动时逐渐加深。 */
.down_mask {
  opacity: 0;
  transition: opacity .25s linear;
  pointer-events: none;
}

/* ---------- s3（移动储能 App）首屏状态兜底 ---------- */
/* JS 未生效时至少保证第一组可见 */
.FirstSeriesInApp_firstSeriesInApp__lr1rY .app_series_sticky.isEnterA1 .sticky01 .phone {
  opacity: 1;
}

/* ---------- 二级导航「下载」按钮垂直居中 ----------
   原站 antd 基类里有一条 a.ant-btn{padding-top:.01px!important;line-height:30px}，
   链接形态的下载按钮在快速指南页会因此比按钮形态偏上 1px 左右。 */
.DownloadNav_naver__fP2_Q .btn-link a.ant-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 15px !important;
  line-height: 1 !important;
}

/* ---------- 简化版页脚（去掉五列导航 / 语言切换 / 社媒图标后的纵向节奏） ---------- */
.ef-footer-simple {
  padding-top: 56px !important;
  padding-bottom: 40px !important;
}
.ef-footer-simple .footer-FooterB1 {
  padding: 0 0 24px !important;
  border-bottom: 1px solid #3a3c3f;
}
.ef-footer-simple .footer-FooterB1-l { display: flex; align-items: center; }
.ef-footer-simple .footer-FooterC1 { padding-top: 20px; }

/* ---------- 在线留言浮标 ---------- */
.WidgetsBottomRight-app-msg {
  position: fixed;
  right: 24px;
  bottom: 196px;
  z-index: 2112;
}
.widgets-app-msg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111417;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.widgets-app-msg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.widgets-app-msg:focus-visible {
  outline: 2px solid #28c683;
  outline-offset: 3px;
}
.widgets-app-msg .widgets-app-msg-tips {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #111417;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 9px 12px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.widgets-app-msg:hover .widgets-app-msg-tips {
  opacity: 1;
  visibility: visible;
}

/* ---------- 留言弹层 ---------- */
.msg-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.msg-mask.show {
  opacity: 1;
  visibility: visible;
}
.msg-dialog {
  width: 460px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 30px 32px 26px;
  position: relative;
  transform: translateY(12px);
  transition: transform .25s ease;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.msg-mask.show .msg-dialog { transform: translateY(0); }

.msg-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #9aa0a6;
  cursor: pointer;
}
.msg-close:hover { color: #111; }

.msg-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: #111417; }
.msg-sub { margin: 0 0 18px; font-size: 13px; color: #6b7280; line-height: 1.6; }

.msg-form .msg-row { margin-bottom: 14px; }
.msg-form label { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; }
.msg-form label span { color: #d0393b; margin-left: 2px; }
.msg-form input,
.msg-form textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font: 14px/1.5 inherit;
  color: #111417;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.msg-form input:focus,
.msg-form textarea:focus {
  outline: none;
  border-color: #28c683;
  box-shadow: 0 0 0 3px rgba(40, 198, 131, .15);
}
.msg-form textarea { resize: vertical; }

.msg-error {
  color: #d0393b;
  font-size: 13px;
  min-height: 18px;
  margin: -4px 0 10px;
}
.msg-submit {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #111417;
  color: #fff;
  font-size: 15px;
  padding: 13px 0;
  cursor: pointer;
  transition: background .2s;
}
.msg-submit:hover { background: #000; }
.msg-submit[disabled] { opacity: .6; cursor: not-allowed; }
.msg-agree { margin: 12px 0 0; font-size: 12px; color: #9aa0a6; text-align: center; }

.msg-success { text-align: center; padding: 18px 0 8px; }
.msg-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e8f7ef;
  color: #14995f;
  font-size: 26px;
  line-height: 56px;
}
.msg-success p { margin: 0 0 18px; font-size: 15px; color: #111417; }
.msg-success .msg-submit { width: 180px; margin: 0 auto; }

/* 移动端适配 */
@media (max-width: 640px) {
  .msg-dialog { padding: 26px 20px 22px; }
  .WidgetsBottomRight-app-msg { bottom: 150px; right: 16px; }
  .widgets-app-msg { width: 38px; height: 38px; }
}

/* =============================================================
   移动端 / iPad 适配（≤1023px）
   原站 H5 用的是另一套 DOM + 另一套 CSS 模块，静态复刻版只有 PC 版结构，
   因此这里按现有 DOM 做一套响应式规则：去掉固定 px 宽度，改成单列/可横向滑动。
   ============================================================= */
@media (max-width: 1023px) {

  /* 1rem 跟随屏宽，保证 rem 内容不会在平板下被放大 */
  html { font-size: 13.3333vw !important; }
  body { min-width: 0 !important; overflow-x: hidden; }

  /* ---------------- 顶部导航：只留 Logo ---------------- */
  .ef-header-v2 { height: 56px !important; letter-spacing: 0; }
  .ef-header-v2-content {
    max-width: 100% !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
  }
  .ef-header-v2-nav-list,
  .ef-header-v2-bar-list,
  .ef-header-v2-nav-toggle-icon,
  .ef-header-v2-nav-list__dropdown,
  .ef-header-v2__h5-bottom-tabs,
  .ef-header-v2-right,
  .ef-header-v2-search,
  .ef-header-v2-locale { display: none !important; }
  .ef-header-v2-logo { position: static !important; }
  .site-logo-text { font-size: 19px !important; line-height: 24px !important; }
  .site-logo-img { height: 15px !important; }

  /* ---------------- 二级导航 ---------------- */
  .DownloadNav_naver__fP2_Q .container,
  .DownloadNav_naver__fP2_Q .detail-nav {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 50px !important;
  }
  .DownloadNav_naver__fP2_Q .left { font-size: 15px !important; white-space: nowrap; }
  .DownloadNav_naver__fP2_Q .rightLists { gap: 14px !important; }
  .DownloadNav_naver__fP2_Q .rightLists li { font-size: 13px !important; }
  .DownloadNav_naver__fP2_Q .btn-link .ant-btn { font-size: 12px !important; padding: 0 12px !important; height: 30px !important; }

  /* ---------------- s1 首屏 ---------------- */
  .video_box { height: 72vh !important; margin-top: 0 !important; }
  .down_box {
    left: 0 !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    transform: none !important;
  }
  .down_box .down_box_title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 27px !important;
    line-height: 34px !important;
    white-space: normal !important;
  }
  .down_box .down_box_content {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    white-space: normal !important;
  }
  .down_box_link,
  .down_box_btn {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
  }
  .down_box_link a { font-size: 13px !important; }
  .down_box_btn .play-item img { width: 108px !important; height: auto !important; }
  .down_box_btn .down_box_btn,
  .down_box_btn { margin-top: 14px !important; }

  /* ---------------- s2 卡片横滑 ---------------- */
  .section2 { padding-top: 56px !important; }
  .secondScreen { width: 100% !important; padding: 0 !important; box-sizing: border-box; }
  .textBox { width: 100% !important; max-width: 100% !important; margin: 0 0 24px !important; padding: 0 20px !important; box-sizing: border-box; text-align: left !important; }
  .textBox .title { font-size: 22px !important; line-height: 30px !important; }
  .textBox .desc { font-size: 14px !important; line-height: 22px !important; }
  .sliderBox { margin-bottom: 40px !important; }
  .cardSliderWrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 0 20px; }
  .sliderContent { width: auto !important; }
  .listBox { display: flex !important; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
  .listBox::-webkit-scrollbar { display: none; }
  .list {
    flex: 0 0 auto !important;
    width: 78vw !important;
    height: auto !important;
    padding: 18px !important;
    box-sizing: border-box;
  }
  .list img { max-width: 100%; }
  .imgBox { width: 100% !important; height: auto !important; }
  .arrowIcon { display: none !important; }

  /* ---------------- s3 三张 App 截图 ---------------- */
  .section3 { height: auto !important; padding: 48px 0 !important; }
  .series_scoll_top { display: none !important; }
  .container.clearfix { display: block !important; width: 100% !important; }
  .app_series_scoll { float: none !important; width: 100% !important; }
  .app_series_scoll_item {
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 20px !important;
    box-sizing: border-box;
  }
  .app_series_scoll_item .title { font-size: 22px !important; line-height: 30px !important; }
  .app_series_scoll_item .desc { font-size: 14px !important; line-height: 22px !important; }
  .app_series_scoll_item img { max-width: 100%; height: auto; }

  /* ---------------- s4 智能家用面板 ---------------- */
  .SecondSeriesInApp_secondSeriesInApp__8nRnh .second-series {
    width: 100% !important;
    padding: 48px 20px 56px !important;
    box-sizing: border-box;
    position: static !important;
  }
  .second-series .title { font-size: 22px !important; line-height: 30px !important; }
  .ani-box { margin-top: 24px !important; }
  .move-box { height: auto !important; }
  .phone-box {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  .phone-box img { max-width: 100%; height: auto; }
  .phone-text, .phone-desc { font-size: 14px !important; line-height: 22px !important; }

  /* ---------------- s5 下载卡片 ---------------- */
  .download-section { padding: 48px 20px 56px !important; }
  .download-section .title { font-size: 22px !important; line-height: 30px !important; }
  .download-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 24px 0 0 !important;
    padding: 24px 20px !important;
    box-sizing: border-box;
    border-radius: 16px !important;
  }
  .download-list { margin: 20px 0 0 !important; flex-wrap: wrap; gap: 12px 16px; }
  .download-list .app-store__logo img,
  .download-box .logo img { max-width: 100%; height: auto; }
  .logo-box { margin: 18px 0 0 !important; }
  .logo-text { font-size: 18px !important; }
  .logo-desc { font-size: 13px !important; line-height: 20px !important; }

  /* ---------------- 页脚 ---------------- */
  .global-footer { padding: 36px 20px 28px !important; }
  .global-footer-content-v2 .ef-footer-nav-v2 { display: block !important; }
  .global-footer-content-v2 nav,
  .ef-footer-nav-v2 { width: 100% !important; max-width: 100% !important; }
  .ef-footer-nav-v2 ul { flex-wrap: wrap; gap: 10px 18px !important; }
  .ef-footer-nav-v2 li { font-size: 13px !important; }
  .footer-FooterB1 { flex-direction: column !important; align-items: flex-start !important; gap: 18px; }
  .footer-FooterB1-l { width: 100%; }
  .footer-FooterC1 { font-size: 12px !important; line-height: 20px !important; }
  .footer-FooterC1-copywrite { font-size: 12px !important; line-height: 20px !important; word-break: break-all; }

  /* ---------------- 回到顶部 / 留言 ---------------- */
  .gtpow-frame-totop, .back-top { right: 16px !important; bottom: 88px !important; }
  #openMessage { right: 16px !important; bottom: 20px !important; }
  #msgMask .msg-box { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; }
}

/* ---------- 移动端溢出收口（补充） ---------- */
@media (max-width: 1023px) {
  .down_box_content p,
  .down_box_content,
  .down_box_link p { max-width: 100% !important; width: 100% !important; }
  .textBox .desc, .textBox .desc2 { width: 100% !important; max-width: 100% !important; }

  /* s3：左侧文字 + 右侧三屏截图，改成上下排列 */
  .FirstSeriesInApp_firstSeriesInApp__lr1rY { height: auto !important; }
  .app_series_sticky { width: 100% !important; position: static !important; top: auto !important; }
  .app_series_sticky_item { height: auto !important; min-height: 0 !important; }
  .sticky_item_position {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 20px 26px !important;
    box-sizing: border-box;
    opacity: 1 !important;
    transform: none !important;
  }
  .sticky_in { position: static !important; width: 100% !important; height: auto !important; transform: none !important; }
  .phone, .dynamo, .dynamo_in {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    transform: none !important;
  }
  .phone img, .dynamo img, .sticky_in img { max-width: 100% !important; height: auto !important; }

  /* s4 内图片 */
  .second-series img, .move-box img, .ani-box img { max-width: 100% !important; height: auto !important; }
  .click-here { width: auto !important; max-width: 100% !important; }
}

/* ---------- 移动端：强制回到屏宽（第三轮收口） ---------- */
@media (max-width: 1023px) {
  .section1, .section2, .section3, .section4, .section5, .global-footer, .dnav,
  .OverView_overview__SafII, .gtpow-frame-main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
  .section3 .container,
  .section3 .app_series_scoll,
  .section3 .app_series_sticky,
  .section3 .app_series_sticky_item,
  .section3 .sticky_item_position,
  .section3 .sticky_in,
  .section3 .phone,
  .section3 .dynamo,
  .section3 .dynamo_in,
  .section3 .series_scoll_top,
  .section3 .icon_list,
  .section4 .second-series,
  .section4 .ani-box,
  .section4 .move-box,
  .section4 .top-box,
  .section4 .bottom-box,
  .section4 .sm-img,
  .section4 .phone-box,
  .section4 .title,
  .section2 .textBox,
  .section2 .textBox .title,
  .section2 .sliderBox,
  .section2 .cardSliderWrapper,
  .section2 .sliderContent,
  .section5 .download-section,
  .section5 .download-box,
  .section5 .logo-desc,
  .section5 .logo-box,
  .section5 .download-list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .section1 img, .section2 img, .section3 img, .section4 img, .section5 img,
  .global-footer img { max-width: 100% !important; height: auto !important; }
  .section2 .list { width: 78vw !important; max-width: 78vw !important; }
}

/* ---------- 页头 Logo 与内容区左对齐 ----------
   原站页头左右内边距固定 80px，而正文容器是 1040px 居中，
   大屏上 Logo 会比正文更靠左。这里让页头内边距跟随容器居中，
   使 Logo 与首屏标题左边缘对齐。 */
@media (min-width: 1024px) {
  .ef-header-v2 { --ef-header-v2-padding: max(24px, calc((100% - 1040px) / 2)); }
}

/* 顶部导航菜单设为可点击链接时的样式 */
.ef-header-v2-nav-list__navItem-title.is-link { color: #fff; text-decoration: none; display: block; }

/* 下载区：App Store / Google Play 两个徽标竖排、有间距、成组居中 */
.download-list .google-play { display: block !important; margin-left: 0 !important; }
.download-list { margin-top: 58px !important; }
.ef-download-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ef-download-badges .app-store__logo,
.ef-download-badges .google-play__logo { height: 36px !important; }
.ef-download-badges .app-store,
.ef-download-badges .google-play { margin: 0; text-align: center; }
.ef-download-badges { position: relative; }
.ef-download-badges .app-store .text,
.ef-download-badges .google-play .text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #757575;
  width: auto;
  text-align: center;
}

/* APK 链接在「徽标组底边」与「卡片底边」之间居中（原站 margin-top 55px 会把它贴到卡片最下面） */
.download-list + a .download-link,
.ef-download-badges ~ a .download-link { margin-top: 31px !important; }

/* 下载区 App 图标：原站 .logo 是 position:relative，换成独立图标后要补回定位，
   否则会被绝对定位的拼图（radius-img）压在下面看不见 */
.section5 .logo-box .dl-logo-img {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

/* 素材保护：图片视频不可拖拽、不可长按弹出「存储图像」 */
img, video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ================= 中英切换（PC 页头） ================= */
.ef-header-v2-bar-list .lang-switch,
.gtpow-frame-header .lang-switch { color: #fff; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 10px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  font-family: inherit;
  white-space: nowrap;
}
.lang-switch__item {
  color: inherit;
  text-decoration: none;
  opacity: .5;
  transition: opacity .18s ease;
}
.lang-switch__item:hover { opacity: .85; }
.lang-switch__item.is-active { opacity: 1; font-weight: 600; }
.lang-switch__sep { opacity: .3; font-size: 12px; }

/* ================= PC 首屏：一屏画面 + 一段粘滞距离 =================
   作用：往下滑时视频画面先钉在屏幕上不动，标题/文案/按钮在原位淡入，
        滑完这段粘滞距离后整屏才继续滚走（与手机端 H5 行为一致）。
   实现：section1 拉高到 160vh 提供粘滞距离，里面的 FirstScreen 用
        sticky + 100vh 把「视频 + 文字」整块钉住，视频改绝对定位铺满这块。 */
@media (min-width: 1025px) {
  .section1 { height: 160vh !important; }
  .FirstScreen_firstScreen__NHwBt {
    height: 100vh !important;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: hidden;
  }
  .FirstScreen_firstScreen__NHwBt .video_box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
  }
  .FirstScreen_firstScreen__NHwBt .down_box { height: 100% !important; }
  .FirstScreen_firstScreen__NHwBt .down_mask { height: 100% !important; }
  .down_box_title,
  .down_box_content,
  .down_box_link,
  .down_box_btn { will-change: opacity, transform; }
}