/* ====================================================================
   concept-scoped.css —— 产品/设计理念页
   ▶ 对应 Vue 源码：src/views/product/concept.vue（scoped → #concept-page 前缀）
   ▶ pxTorem(N) = N/16 rem
   ==================================================================== */

/* ---------- 动画 ---------- */
@keyframes concept-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes concept-shine {
  from { opacity: 1; }
  50%  { opacity: 0.5; }
  to   { opacity: 1; }
}

#concept-page .blue { color: #0082e6; }

/* ---------- 通用 section ---------- */
#concept-page .section { overflow-x: hidden; }

/* ---------- 第一屏：公式动画 ---------- */
#concept-page .section-hero { overflow: visible; }  /* 对齐 Vue：transform:scale 后内容超出，但 Vue 里是 visible */
#concept-page .section-hero > .title-ani {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 1;
  letter-spacing: calc(var(--letterSpacing) * 0.3);
}
#concept-page .section-hero .formula-txt,
#concept-page .section-hero .symbol {
  position: absolute;
  left: 54%;
  top: 53%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  width: fit-content;
  line-height: 174%;
  letter-spacing: calc(var(--letterSpacing) * 0.19);
}
#concept-page .section-hero .symbol { margin-left: -5rem; }  /* pxTorem(-80) */
#concept-page .section-hero .formula-txt .formula-item,
#concept-page .section-hero .symbol .symbol-item {
  width: 12.5rem;  /* pxTorem(200) */
}
#concept-page .section-hero .formula-txt .formula-item:nth-child(4),
#concept-page .section-hero .formula-txt .formula-item:last-child,
#concept-page .section-hero .symbol .symbol-item:nth-child(5) {
  width: 15.625rem;  /* pxTorem(250) */
}
#concept-page .formula-item .s-12 {
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
#concept-page .symbol-item .multiple {
  display: inline-block;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  margin-left: 10%;
}
#concept-page .shinebg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 内联 style 抽离 */
#concept-page .fw-700 { font-weight: 700; }
#concept-page .fw-600 { font-weight: 600; }
#energy-platform b { font-weight: 700; letter-spacing: 0; }

/* 动画 */
#concept-page .title-ani {
  opacity: 0;
  animation: concept-fade-in 1s 0.5s forwards;
}
#concept-page .formula-item,
#concept-page .chassis-ani {
  opacity: 0;
  animation: concept-fade-in 1s 0.5s forwards;
}
#concept-page .symbol {
  opacity: 0;
  animation: concept-fade-in 1s 1.5s forwards;
}
#concept-page .shinebg {
  opacity: 0;
  animation: concept-fade-in 1s 2.5s forwards, concept-shine 1s 3.5s infinite;
}



/* ---------- 左右布局通用 ---------- */
#concept-page .center { text-align: left; }
#concept-page .left-text {
  width: 40%;
  display: inline-block;
  color: #fff;
}
#concept-page .left-text h2 { position: relative; }
#concept-page .left-text h2 .ex {
  position: absolute;
  right: 0;
}
#concept-page .section .left-text h2 {
  padding-left: 33.8%;
  padding-bottom: 1.25rem;  /* pxTorem(20) */
  margin-bottom: 8%;
  letter-spacing: calc(var(--letterSpacing) * 0.3);
  opacity: 0.8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#concept-page .section .left-text p {
  margin-left: 33.8%;
  letter-spacing: calc(var(--letterSpacing) * 0.19);
  line-height: 174%;
  opacity: 0.8;
}
#concept-page .right-pic {
  width: 60%;
  display: inline-block;
  position: relative;
}
#concept-page .decouple { width: 80%; }

/* 内联 style 抽离 */
#concept-page .half-width { width: 50%; }
#concept-page .text-left { text-align: left; }
#concept-page .tt-none { text-transform: none; }
#concept-page .integrated-img { width: 80%; margin: auto; display: block; }

/* ---------- frame62 绝对定位 ---------- */
#concept-page .section .frame62,
#concept-page .section .txt1,
#concept-page .section .txt2,
#concept-page .section .group {
  position: absolute;
  left: 40%;
  transform: translate(-50%, -50%);
}
#concept-page .section .frame62 { top: 32%; width: 65%; }
#concept-page .section .txt1,
#concept-page .section .group { top: 55%; }
#concept-page .section .txt2 { top: 70%; }
#concept-page .section .group { width: 70%; }
#concept-page .s-24 { opacity: 0.8; }

/* ---------- 高度集成区块（背景白） ---------- */
#concept-page .section-integrated {
  background: url('/assets/integration-bg.png'), #fff;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#concept-page .section-integrated .left-text { color: #000; }
#concept-page .section-integrated .left-text h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

/* ---------- 对外开放区块 ---------- */
#concept-page .section-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 可持续发展理念区块 ---------- */
#concept-page .section-sustainability {
  background: url('/assets/continuebg.jpg'), rgba(0, 0, 0, 0.3);
  background-blend-mode: darken;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#concept-page .section-sustainability > div:first-child { text-align: center; }

#concept-page .section-4 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60%;
}
#concept-page .section-4 .txt {
  display: flex;
  align-items: center;
}
#concept-page .section-4 .sustainable-item {
  width: 33%;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#concept-page .section-4 .sustainable-item span {
  display: block;
  margin: auto;
  text-align: justify;
}
#concept-page .section-4 .sustainable-item span.subtitle1 {
  font-size: 1.9rem;
  padding: 0.5rem 0;
}
#concept-page .section-4 .sustainable-item span.subtitle2 {
  font-size: 2.7rem;
  margin-bottom: 2rem;
}

/* ---------- ESG 三要素区块 ---------- */
#concept-page .section-esg {
  padding: 0 10%;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/assets/icon-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#concept-page .section-esg .main {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#concept-page .section-esg .main > div {
  max-width: 33%;
  display: flex;
  flex-direction: column;
}
#concept-page .section-esg .main > div > div:first-child {
  height: 5.9375rem;  /* pxTorem(95) */
}
#concept-page .section-esg .main > div > div:last-child { flex: 1; }
#concept-page .section-esg .main > div > div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#concept-page .icon { text-align: center; }
#concept-page .name {
  letter-spacing: 3.6px;
  margin: 0.9375rem 0;  /* pxTorem(15) */
  position: relative;
}
#concept-page .name::after {
  content: '';
  display: block;
  position: relative;
  top: 0.625rem;  /* pxTorem(10) */
  height: 1px;
  width: 6rem;  /* pxTorem(96) */
  background: #d9d9d9;
}
#concept-page .intro {
  font-size: 1.125rem;  /* pxTorem(18) */
  letter-spacing: calc(var(--letterSpacing) * 0.1125);
  margin: 1.75rem 0;  /* pxTorem(28) */
  opacity: 0.8;
}
#concept-page .more-btn {
  display: inline-block;
  width: 100%;
  height: 2.625rem;  /* pxTorem(42) */
  background: #0082e6;
  font-size: 1rem;  /* pxTorem(16) */
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  line-height: 2.625rem;  /* pxTorem(42) */
  margin-top: 8rem;  /* pxTorem(128) */
  color: #fff;
  z-index: 2;
}

/* ---------- 底部入口 ---------- */
#concept-page .bottom-shadow:first-child {
  background-image: url('/assets/solution-link-bg.png');
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 768px) {
  #concept-page .section-hero { transform: scale(0.5); height: 50vh; }
  #concept-page .section-hero img { transform: translate(-50%, -50%) scale(2); }
  #concept-page .section-hero .title-ani { width: 100%; text-align: center; }

  #concept-page .section-decouple { flex-direction: column; height: auto; }
  #concept-page .section-integrated { flex-direction: column; height: auto; padding: 1rem 0; }
  #concept-page .section-open { flex-direction: column; height: auto; padding: 1rem 0; }

  #concept-page .section-decouple > div,
  #concept-page .section-integrated > div,
  #concept-page .section-open > div { width: 100%; }

  #concept-page .section .left-text h2 {
    padding-left: 5%;
    width: 80%;
  }
  #concept-page .section .left-text p { margin: 0 5%; }

  #concept-page .section .right-pic .frame62 {
    width: 100%;
    left: 0;
    transform: translate(0, -50%);
    top: 25%;
  }
  #concept-page .decouple { width: 100%; }
  #concept-page .section .txt1,
  #concept-page .section .txt2 {
    left: 0;
    transform: translate(0, -50%);
    width: 100%;
    text-align: center;
  }
  #concept-page .section .txt2 { top: 72%; }
  #concept-page .section .group {
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
  }

  #concept-page .section-sustainability { height: 50vh; }
  #concept-page .section-sustainability > div { width: 100% !important; }
  #concept-page .section-4 { transform: scale(0.8); }

  #concept-page .section-esg { height: 50vh; }
  #concept-page .section-esg > .main > div {
    width: 30%;
    transform: scale(0.7);
  }
  #concept-page .section-esg > .main > div > .name {
    transform: scale(0.7);
    transform-origin: left;
  }
}