/* ==========================================================================
   index.css —— 全局层（1/3 分层方案）
   ▶ 只放「全局」样式，对应 Vue 打包前源码：
       src/style/variables.scss / variables.module.scss
       src/style/global.css / global.module.scss
       src/components/SubMenu.vue 的非 scoped 全局块（li 字号）
   ▶ 组件/页面样式分层（都加了前缀防冲突）：
       web-scoped.css  → #nav 导航 + footer 页脚（layout 组件）
       home-scoped.css → #video-swiper/#symbiosis/#co-creation/#win-win/#map（首页区块）
       web-extra.css   → H5 兜底修补（不改变源码视觉）
   ▶ 换算基准（variables.scss）：$browser-default-font-size = 16px
       pxTorem(N) = N / 16 rem
       html font-size 由 global.css 媒体查询控制：≥1440:14px / ≤1440:12px
       / ≤1024:10px / ≤768:8px（英文页见 web.js 的 Vue 同款覆盖）
   ========================================================================== */

/* ---------- global.css：reset + 变量 ---------- */
* {
  padding: 0;
  margin: 0;
}

:root {
  --default-font: 'Noto Sans SC', 'Source Han Sans CN', 'Source Han Sans CN';
  /* Vue 源码未定义 --letterSpacing，靠 var() 的 1rem 兜底；
     这里显式定义，等价且避免 calc(var()) 失效；英文页由 web.js 置 0 */
  --letterSpacing: 1rem;
  --mdb-accordion-padding-y: 11.5rem !important;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--default-font);
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: hidden;
}

/* global.module.scss：html,body,#app 背景/文字色 */
html,
body {
  background-color: #000;
  color: #fff;
}

.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style-type: none;
}

/* SubMenu.vue 非 scoped 块：全站 li 字号（Vue 里就是全局生效） */
li {
  font-size: 0.875rem; /* pxTorem(14) = 14/16 */
}

/* TheNavigation.vue 非 scoped 块：全站 ul 去 padding/margin（Vue 里就是全局生效） */
ul {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- variables.module.scss：s-N / w-N 原子类（@each，16px 基准） ---------- */
.s-56 { font-size: 3.5rem; }     /* 56/16 */
.s-48 { font-size: 3rem; }
.s-36 { font-size: 2.25rem; }
.s-34 { font-size: 2.125rem; }
.s-32 { font-size: 2rem; }
.s-30 { font-size: 1.875rem; }
.s-26 { font-size: 1.625rem; }
.s-24 { font-size: 1.5rem; }
.s-22 { font-size: 1.375rem; }
.s-18 { font-size: 1.125rem; }
.s-16 { font-size: 1rem; }
.s-14 { font-size: 0.875rem; }
.s-12 { font-size: 0.75rem; }
.s-18-en { font-size: 0.7rem; }  /* global.module.scss 末尾字面值 */

.w-4 { font-weight: 400; }
.w-5 { font-weight: 500; }

/* ---------- global.css：swiper 变量 / navbar 微调 ---------- */
.swiper {
  --swiper-theme-color: #fff;
  --swiper-navigation-color: #fff;
  --swiper-navigation-size: 30px;
}
.navbar > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- global.css：.section / .banner / .center / .en / .cn ---------- */
.section {
  width: 100%;
  height: 100vh;
  position: relative;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 0 10rem;
}
.banner > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.center {
  display: flex;
  margin: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.en {
  font-family: Poppins, 'Noto Sans SC', 'Source Han Sans CN', 'Source Han Sans CN';
  text-transform: uppercase;
}

.cn {
  font-family: 'Noto Sans SC', 'Source Han Sans CN', 'Source Han Sans CN';
  font-style: normal;
  line-height: normal;
}

.swiper { width: 100%; height: 100%; }
.swiper img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- global.module.scss：swiper 分页圆点 ---------- */
.swiper .swiper-pagination {
  display: flex;
  margin: 6rem 15.4375rem;              /* pxTorem(96/247) */
}
.swiper .bullet-class {
  display: inline-block;
  width: 0.75rem;                       /* pxTorem(12) */
  height: 0.75rem;
  border: 1px solid #fff;
  background: transparent;
  border-radius: 50%;
  margin-right: 2.75rem;                /* pxTorem(44) */
}
.swiper .bullet-active {
  filter: drop-shadow(0px 0px 3px #fff);
  background: #fff;
}

/* ---------- global.module.scss：.section .divide / 前后翻页 ---------- */
.section .divide {
  width: 4.75rem;                       /* pxTorem(76) */
  height: 1px;
  background: #fff;
  display: inline-block;
}
#prev-el,
#next-el {
  position: absolute;
  z-index: 9;
  height: 80px;
  display: flex;
  align-items: center;
  top: calc(50% - 40px);
}
#prev-el { left: 0; }
#prev-el > .divide { margin-right: 2.25rem; }   /* pxTorem(36) */
#next-el { flex-direction: row-reverse; right: 0; }
#next-el > .divide { margin-left: 2.25rem; }

/* ---------- global.module.scss：.linear-swiper ---------- */
.linear-swiper {
  padding: 0 15.4375rem;                /* pxTorem(247) */
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  height: 100%;
  opacity: 0.8;
}
.linear-swiper img {
  width: 2.8125rem !important;          /* pxTorem(45) */
  height: auto !important;
  object-fit: contain;
  margin-top: 1.625rem;                 /* pxTorem(26) */
}

/* ---------- global.module.scss：.bottom-shadow（全局版，用于栏目页半屏图块） ---------- */
.bottom-shadow {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 50vh;
  display: flex;
}
.bottom-shadow > div > div > img {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}
.bottom-shadow > div {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bottom-shadow > div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.4;
  background: #000;
}
.bottom-shadow > div:hover::after { z-index: -1; }
.bottom-shadow:first-child { background-position: center; }
.bottom-shadow > .divide {
  height: 100%;
  width: 0.5px;
  background: #fff;
  flex-grow: 0;
}
.bottom-shadow > .divide::after { z-index: -1; }
.bottom-shadow:nth-child(2) > div { width: 100%; }
.bottom-shadow > div > div:nth-child(2) { cursor: pointer; }
.bottom-shadow > div > div {
  padding: 0 20%;
  text-align: left;
}
/* H5 用 <a class="btn-block"> 替代 Vue 的 <div class="btn-block">，
   需要保持 padding 与上面标题对齐 */
.bottom-shadow > div > a.btn-block {
  padding: 0 20%;
  text-align: left;
}
.bottom-shadow > div > div:first-child {
  letter-spacing: calc(var(--letterSpacing) * 0.26);
  line-height: 174%;
  font-weight: 500;
}
.bottom-shadow > div > div:last-child,
.bottom-shadow > div > a.btn-block {
  display: flex;
  align-items: center;
  flex-grow: 0;
  margin-top: 2.5rem;                   /* pxTorem(40) */
}
.bottom-shadow > div > div:last-child > span,
.bottom-shadow > div > a.btn-block > span {
  text-decoration: underline;
  margin-left: 0.375rem;                /* pxTorem(6) */
}
.bottom-shadow:nth-child(2) > div > div,
.bottom-shadow:nth-child(2) > div > a.btn-block { padding: 0 10%; }

/* ---------- global.module.scss：.guide / .innovation-icon ---------- */
.guide {
  height: 31.25rem;                     /* pxTorem(500) */
  width: 7.75rem;                       /* pxTorem(124) */
  background: #000;
  position: fixed;
  right: 0;
  bottom: 1rem;
  border-top-left-radius: 4rem;         /* pxTorem(64) */
  border-bottom-left-radius: 4rem;
  padding: 0.375rem;                    /* pxTorem(6) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  z-index: 8;
  transition: transform 2s;
}
.guide:hover { transition: transform 2s; }
.guide a { color: #fff; display: inline-flex; }

.innovation-icon {
  border-radius: 50%;
  width: 6.5rem;                        /* pxTorem(104) */
  height: 6.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  white-space: pre-wrap;
  text-align: center;
  font-weight: 350;
  letter-spacing: calc(var(--letterSpacing) * 0.1125);
  text-transform: uppercase;
  border: 1px solid transparent;
  margin: 0 0.625rem;                   /* pxTorem(10) */
  cursor: pointer;
  position: relative;
  opacity: 0.64;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.innovation-icon-active {
  border: 1px solid #0082e6;
  opacity: 1;
}
.innovation-icon:hover {
  opacity: 1;
  animation: breathe 3s infinite;
}

/* ---------- global.module.scss：.section > .section-title（全站区块标题） ---------- */
.section > .section-title {
  position: absolute;
  color: #fff;
  top: 3.9375rem;                       /* pxTorem(63) */
  left: 13.6%;
  font-size: 1.5rem;                    /* pxTorem(24) */
  z-index: 1;
  letter-spacing: calc(var(--letterSpacing) * 0.3);
}
.section > .section-title b {
  font-weight: bold;
  letter-spacing: 0;
  font-family: 'Impact';
  margin-right: 0.625rem;               /* pxTorem(10) */
}
.section > .section-title span {
  font-size: 1.125rem;                  /* pxTorem(18) */
}

/* ---------- global.module.scss：.section-underline / .section-content ---------- */
.section-underline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.section-underline > div:nth-child(2) {
  margin-left: 5%;
  display: flex;
  justify-content: center;
  flex: 1;
}
.section-underline > div > div > img { width: auto; }
.section-underline > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.section-underline .section-title {
  height: max-content;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-wrap: wrap;
  margin-right: 3.4375rem;              /* pxTorem(55) */
  padding-left: 15%;
  width: auto;
  position: relative;
}
.section-underline > .section-title img { width: 4.1875rem; }  /* pxTorem(67) */
.section-underline > div:last-child > img { object-fit: contain; }

.section-content {
  position: absolute;
  padding-top: 3.75rem;                 /* pxTorem(60) */
  width: calc(85% - 4.1875rem);
  text-wrap: wrap;
  text-align: left;
}

/* ---------- global.module.scss：手风琴 / 全图 / 圆形 / 浅色块 ---------- */
.accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
  width: 100%;
}
.collapse-header {
  display: flex;
  justify-content: space-between;
  padding: 2.625rem 1.75rem;            /* pxTorem(42/28) */
}
.accordion-wrapper { padding: 0 20%; }

.full-pic { margin-top: 4.375rem; }     /* pxTorem(70) */
.full-pic > img { width: 100%; height: 100%; object-fit: contain; }

.is-hidden { display: none !important; }

.circle {
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-light {
  background: #ebebec;
  padding: 10% 0;                 /* pxTorem(186) */
}
.section-light .section-title {
  border-bottom: 1px solid #000;
  margin-bottom: 4rem;                  /* pxTorem(64) */
}

.btn-block {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.btn-block > img {
  width: 1.5rem;                        /* pxTorem(24) */
  height: 1.5rem;
}

/* ---------- global.module.scss：breathe 动画 ---------- */
@keyframes breathe {
  0%   { border: 1px solid rgba(0, 130, 230, 0.5); box-shadow: 0px 0 10px 1px rgba(0, 130, 230, 0.3); }
  50%  { border: 1px solid rgb(0, 130, 230, 1);   box-shadow: 0px 0 10px 1px rgb(0, 130, 230, 1); }
  100% { border: 0px solid rgba(0, 130, 230, 0.5); box-shadow: 0px 0 10px 1px rgba(0, 130, 230, 0.3); }
}

/* ---------- global.css：fade 过渡 / .main / modal ---------- */
.fade-enter-active,
.fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from,
.fade-leave-to { opacity: 0; }

/* .main 的 overflow:hidden 是 Vue 在导航抽屉打开时用 JS 动态设置的，不能永久 CSS 化 */

.modal-btn {
  background: #0082e6;
  color: #fff;
  padding: 0.2rem 1rem;
  z-index: 2;
}
.modal { height: 100vh; position: fixed; }

/* ---------- global.css：ani-circle / ani-txt-btn 悬停动效 ---------- */
.ani-circle,
.ani-circle2 {
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white !important;
}
.ani-circle:hover::before,
.ani-circle2:hover::before {
  content: '';
  position: absolute;
  background: #0164b0;
  z-index: -1;
  border-radius: 50%;
  animation-fill-mode: forwards;
}
.ani-circle:hover::before  { animation: circle 3s linear; }
.ani-circle2:hover::before { animation: circle 0.5s linear; }
@keyframes circle {
  0%   { width: 15rem; height: 15rem; transform: scale(0); }
  100% { width: 15rem; height: 15rem; transform: scale(20); }
}
.ani-txt-btn:hover img { filter: invert(1); }

/* ==========================================================================
   global.css 末尾：html font-size 响应式（放最后，被 web.js 的英文页内联样式覆盖）
   ========================================================================== */
@media screen and (min-width: 1440px) { html { font-size: 14px; } }
@media screen and (max-width: 1440px) { html { font-size: 12px; } }
@media screen and (max-width: 1024px) { html { font-size: 10px; } }
@media screen and (max-width: 768px) {
  html { font-size: 8px; }

  .section > .section-title { left: 10%; }

  .bottom-shadow { flex-direction: column; }
  .bottom-shadow > div { width: 100%; height: 25vh; }
  .bottom-shadow .divide { display: none; }

  .modal-content { width: 50vw !important; margin: auto; }
}