/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FFFFFF;
  overflow-x: hidden;
}

/* 主容器 */
.solution-page {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  background: #FFFFFF;
}

/* BACK 按钮 */
.back-btn {
  position: absolute;
  left: 43px;
  top: 19px;
  width: 78px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 22px;
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 44.5px;
  text-decoration: none;
  z-index: 100;
}

.back-btn span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.219;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: center;
}

/* 顶部背景图 img-16 */
.bg-img-16 {
  position: absolute;
  left: 0;
  top: 208px;
  width: 1921px;
  height: 1729px;
  object-fit: cover;
}

/* 项目标题区域 */
.title-frame {
  position: absolute;
  left: 174px;
  top: 269px;
  width: 568px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.main-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: left;
}

.sub-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.219;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: left;
}

/* 装饰线图片 */
.deco-line {
  position: absolute;
  left: 174px;
  top: 435px;
  width: 390px;
  height: 43px;
  object-fit: cover;
  z-index: 10;
}

/* 项目信息文本 */
.project-info {
  position: absolute;
  left: 174px;
  top: 515px;
  width: 450px;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: left;
  z-index: 10;
}

/* 背景图 5 */
.bg-img-5 {
  position: absolute;
  left: 0;
  top: 1763px;
  width: 1921px;
  height: 1616px;
  object-fit: cover;
}

/* 设计说明标题 */
.design-title {
  position: absolute;
  left: 174px;
  top: 2322px;
  width: 304px;
  height: 32px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.219em;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}

/* 设计说明正文 */
.design-desc {
  position: absolute;
  left: 174px;
  top: 2373px;
  width: 828px;
  height: 174px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2em;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: left;
  z-index: 10;
}

/* 背景图 6 */
.bg-img-6 {
  position: absolute;
  left: 0;
  top: 3379px;
  width: 1921px;
  height: 1978px;
  object-fit: cover;
}

/* 章节标题样式 */
.section-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.section-title-1 {
  position: absolute;
  left: 174px;
  top: 5333px;
  width: 178px;
}

.section-subtitle {
  font-family: 'Consolas', monospace;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.section-subtitle-1 {
  position: absolute;
  left: 174px;
  top: 5383px;
  width: 279px;
}

/* 概念点标题 */
.concept-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.concept-title-1 {
  position: absolute;
  left: 174px;
  top: 5498px;
  width: 103px;
}

/* 注释说明 */
.note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 10;
}

.note span {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #808080;
}

.note-1 {
  left: 174px;
  top: 5557px;
}

.note-2 {
  left: 1144px;
  top: 5557px;
}

.note-3 {
  left: 169px;
  top: 10014px;
}

/* glb 模型区域 */
.glb-area {
  position: absolute;
  background: #FFFFFF;
  overflow: hidden;
}

.glb-area model-viewer {
  width: 100%;
  height: 100%;
}

.glb-kit {
  left: 0;
  top: 5607px;
  width: 950px;
  height: 489px;
}

.glb-box {
  left: 970px;
  top: 5607px;
  width: 951px;
  height: 489px;
}

.glb-rope {
  left: 368px;
  top: 10113px;
  width: 1184px;
  height: 646px;
  background: #FFFFFF;
}

/* 旋转提示图标 */
.rotation-hint {
  position: absolute;
  z-index: 15;
}

.rotation-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.rotation-circle {
  position: absolute;
  top: 7.5px;
  left: 2px;
  width: 20px;
  height: 10px;
}

.rotation-arrow {
  position: absolute;
  top: 15.5px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.rotation-hint-kit {
  left: 463px;
  top: 6076px;
}

.rotation-hint-box {
  left: 1433px;
  top: 6076px;
}

.rotation-hint-rope {
  left: 948px;
  top: 10739px;
}

/* 效果图标题 */
.effect-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.effect-title-1 {
  position: absolute;
  left: 174px;
  top: 6196px;
  width: 192px;
}

.effect-title-2 {
  position: absolute;
  left: 174px;
  top: 7448px;
  width: 192px;
}

.effect-title-3 {
  position: absolute;
  left: 174px;
  top: 8528px;
  width: 192px;
}

.effect-title-4 {
  position: absolute;
  left: 174px;
  top: 11005px;
  width: 192px;
}

.effect-title-5 {
  position: absolute;
  left: 174px;
  top: 13154px;
  width: 192px;
}

.effect-title-6 {
  position: absolute;
  left: 174px;
  top: 14331px;
  width: 192px;
}

/* 背景图片 */
.bg-img-8 {
  position: absolute;
  left: 1px;
  top: 6246px;
  width: 1920px;
  height: 1164px;
  object-fit: cover;
}

.bg-img-9 {
  position: absolute;
  left: 0;
  top: 7511px;
  width: 1924px;
  height: 985px;
  object-fit: cover;
}

.bg-img-10 {
  position: absolute;
  left: 0;
  top: 8597px;
  width: 1924px;
  height: 1077px;
  object-fit: cover;
}

/* 墙体包装 */
.section-title-2 {
  position: absolute;
  left: 174px;
  top: 9674px;
  width: 178px;
}

.section-subtitle-2 {
  position: absolute;
  left: 174px;
  top: 9724px;
  width: 230px;
}

.concept-title-2 {
  position: absolute;
  left: 174px;
  top: 9943px;
  width: 103px;
}

.concept-desc {
  position: absolute;
  left: 174px;
  top: 9793px;
  width: 1240px;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #808080;
  text-align: left;
  z-index: 10;
}

/* 呼吸策略标题 */
.breath-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #8CC63F;
  text-align: left;
  z-index: 10;
}

.breath-title-1 {
  position: absolute;
  left: 174px;
  top: 10903px;
  width: 273px;
}

.breath-title-2 {
  position: absolute;
  left: 174px;
  top: 13052px;
  width: 273px;
}

.breath-title-3 {
  position: absolute;
  left: 174px;
  top: 14229px;
  width: 288px;
}

.breath-subtitle {
  font-family: 'Consolas', monospace;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.breath-subtitle-1 {
  position: absolute;
  left: 174px;
  top: 10934px;
  width: 129px;
}

.breath-subtitle-2 {
  position: absolute;
  left: 174px;
  top: 13083px;
  width: 129px;
}

.breath-subtitle-3 {
  position: absolute;
  left: 174px;
  top: 14260px;
  width: 129px;
}

.bg-img-34 {
  position: absolute;
  left: 0;
  top: 10793px;
  width: 1921px;
  height: 1043px;
  object-fit: cover;
}

.floor-deco {
  position: absolute;
  left: 174px;
  top: 11950px;
  width: 145px;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.bg-img-35 {
  position: absolute;
  left: 0;
  top: 12015px;
  width: 1921px;
  height: 901px;
  object-fit: cover;
}

.bg-img-13 {
  position: absolute;
  left: 1px;
  top: 13152px;
  width: 1699px;
  height: 937px;
  object-fit: cover;
}

.bg-img-14 {
  position: absolute;
  left: 388px;
  top: 14281px;
  width: 1533px;
  height: 971px;
  object-fit: cover;
}

/* 平面 */
.section-title-3 {
  position: absolute;
  left: 174px;
  top: 15407px;
  width: 114px;
}

.section-subtitle-3 {
  position: absolute;
  left: 174px;
  top: 15457px;
  width: 100px;
}

.bg-img-15 {
  position: absolute;
  left: 1px;
  top: 15640px;
  width: 1827px;
  height: 1061px;
  object-fit: cover;
}

/* 人物标签 */
.person-label {
  position: absolute;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #000000;
  text-align: left;
  z-index: 10;
}

.label-1 {
  left: 205px;
  top: 15827px;
  width: 119px;
}

.label-2 {
  left: 487px;
  top: 16351px;
  width: 119px;
}

.label-3 {
  left: 843px;
  top: 15982px;
  width: 118px;
}

.label-4 {
  left: 1112px;
  top: 16396px;
  width: 118px;
}

.label-5 {
  left: 1454px;
  top: 16454px;
  width: 119px;
}

.label-6 {
  left: 1411px;
  top: 15911px;
  width: 120px;
}

/* 黑色背景区域 */
.black-bg {
  position: absolute;
  left: 0;
  top: 16816px;
  width: 1920px;
  height: 17366px;
  background: #000000;
}

/* 灯光亮化 */
.section-title-4 {
  position: absolute;
  left: 174px;
  top: 16907px;
  width: 178px;
  color: #EEF0E8;
}

.section-subtitle-4 {
  position: absolute;
  left: 174px;
  top: 16957px;
  width: 181px;
  color: #EEF0E8;
}

.bg-img-19 {
  position: absolute;
  left: -1px;
  top: 17007px;
  width: 1921px;
  height: 1119px;
  object-fit: cover;
}

/* 细节标题 */
.detail-title {
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #808080;
  text-align: left;
  z-index: 10;
  white-space: nowrap;
}

.detail-title-1 {
  position: absolute;
  left: 174px;
  top: 18218px;
  width: 192px;
}

.detail-title-2 {
  position: absolute;
  left: 174px;
  top: 22745px;
  width: 85px;
}

.detail-title-3 {
  position: absolute;
  left: 174px;
  top: 23575px;
  width: 200px;
}

.detail-title-4 {
  position: absolute;
  left: 174px;
  top: 24995px;
  width: 200px;
}

.detail-title-5 {
  position: absolute;
  left: 174px;
  top: 26474px;
  width: 200px;
}

.detail-title-6 {
  position: absolute;
  left: 174px;
  top: 28047px;
  width: 200px;
}

.detail-title-7 {
  position: absolute;
  left: 174px;
  top: 30087px;
  width: 200px;
}

.detail-title-8 {
  position: absolute;
  left: 174px;
  top: 31644px;
  width: 200px;
}

.bg-img-web2-1 {
  position: absolute;
  left: 0;
  top: 18249px;
  width: 1920px;
  height: 4342px;
  object-fit: cover;
}

.bg-img-21 {
  position: absolute;
  left: 147px;
  top: 22790px;
  width: 1670px;
  height: 693px;
  object-fit: cover;
}

.bg-img-web2-2 {
  position: absolute;
  left: -2px;
  top: 23637px;
  width: 1921px;
  height: 1266px;
  object-fit: cover;
}

.bg-img-web2-3 {
  position: absolute;
  left: 30px;
  top: 25067px;
  width: 1921px;
  height: 1331px;
  object-fit: cover;
}

.bg-img-web2-4 {
  position: absolute;
  left: -1px;
  top: 26505px;
  width: 1921px;
  height: 1520px;
  object-fit: cover;
}

.bg-img-web2-5 {
  position: absolute;
  left: -1px;
  top: 28100px;
  width: 1921px;
  height: 1867px;
  object-fit: cover;
}

.bg-img-web2-6 {
  position: absolute;
  left: -1px;
  top: 30150px;
  width: 1921px;
  height: 1338px;
  object-fit: cover;
}

.bg-img-web2-7 {
  position: absolute;
  left: 0;
  top: 31698px;
  width: 1921px;
  height: 1415px;
  object-fit: cover;
}

.bg-img-26 {
  position: absolute;
  left: 0;
  top: 33136px;
  width: 1921px;
  height: 1046px;
  object-fit: cover;
}

/* 手机端响应式样式 */
@media (max-width: 768px) {
  .solution-page {
    width: 100%;
    max-width: 402px;
  }

  .back-btn {
    left: 23px;
    top: 23px;
    border-color: #A5A5A5;
  }

  .back-btn span {
    font-weight: 400;
    color: #A5A5A5;
  }

  .bg-img-16 {
    left: 0;
    top: 87px;
    width: 402px;
    height: 633px;
    object-fit: cover;
  }

  .title-frame {
    left: 28px;
    top: 67px;
    width: 220px;
  }

  .main-title {
    font-size: 16px;
    width: 227px;
  }

  .sub-title {
    font-size: 10px;
  }

  .deco-line {
    left: 28px;
    top: 117px;
    width: 184px;
    height: 20px;
  }

  .project-info {
    left: 31px;
    top: 153px;
    width: 108px;
    font-size: 6px;
  }

  .bg-img-5 {
    left: 0;
    top: 724px;
    width: 404px;
    height: 340px;
  }

  .design-title {
    left: 26px;
    top: 750px;
    width: 141px;
    height: 15px;
    font-size: 12px;
  }

  .design-desc {
    left: 26px;
    top: 772px;
    width: 351px;
    height: 80px;
    font-size: 6px;
  }

  .bg-img-6 {
    left: 0;
    top: 1064px;
    width: 413px;
    height: 425px;
  }

  .section-title {
    font-size: 13px;
  }

  .section-title-1 {
    left: 31px;
    top: 1498px;
    width: 72px;
  }

  .section-subtitle {
    font-size: 13px;
    white-space: nowrap;
  }

  .section-subtitle-1 {
    left: 31px;
    top: 1515px;
    width: 114px;
  }

  .concept-title {
    font-size: 10px;
  }

  .concept-title-1 {
    left: 31px;
    top: 1552px;
    width: 40px;
  }

  .note {
    display: flex;
    font-size: 6px;
  }

  .note span {
    font-size: 6px;
  }

  .note-1 {
    left: 31px;
    top: 1570px;
  }

  .note-2 {
    left: 31px;
    top: 1820px;
  }

  .note-3 {
    left: 34px;
    top: 3000px;
  }

  .glb-kit {
    left: -1px;
    top: 1590px;
    width: 401px;
    height: 206px;
  }

  .glb-box {
    left: -1px;
    top: 1832px;
    width: 401px;
    height: 206px;
  }

  .glb-rope {
    left: 30px;
    top: 3022px;
    width: 340px;
    height: 314px;
  }

  .rotation-hint-kit {
    left: 189px;
    top: 1786px;
  }

  .rotation-hint-box {
    left: 189px;
    top: 2028px;
  }

  .rotation-hint-rope {
    left: 188px;
    top: 3326px;
  }

  .rotation-icon {
    width: 12px;
    height: 12px;
  }

  .rotation-circle {
    top: 3.75px;
    left: 1px;
    width: 10px;
    height: 5px;
  }

  .rotation-arrow {
    top: 7.75px;
    left: 5px;
    width: 2px;
    height: 2px;
  }

  .effect-title {
    font-size: 10px;
  }

  .effect-title-1 {
    left: 30px;
    top: 2086px;
    width: 74px;
  }

  .effect-title-2 {
    left: 30px;
    top: 2358px;
    width: 74px;
  }

  .effect-title-3 {
    left: 30px;
    top: 2597px;
    width: 74px;
  }

  .effect-title-4 {
    left: 21px;
    top: 3417px;
    width: 74px;
  }

  .effect-title-5 {
    left: 30px;
    top: 3905px;
    width: 74px;
  }

  .effect-title-6 {
    left: 30px;
    top: 4220px;
    width: 74px;
  }

  .bg-img-8 {
    left: -4px;
    top: 2108px;
    width: 404px;
    height: 245px;
  }

  .bg-img-9 {
    left: -1px;
    top: 2380px;
    width: 403px;
    height: 207px;
  }

  .bg-img-10 {
    left: 0;
    top: 2620px;
    width: 400px;
    height: 224px;
  }

  .section-title-2 {
    left: 34px;
    top: 2876px;
    width: 72px;
  }

  .section-subtitle-2 {
    left: 34px;
    top: 2891px;
    width: 94px;
    white-space: nowrap;
  }

  .concept-title-2 {
    left: 34px;
    top: 2978px;
    width: 40px;
  }

  .concept-desc {
    left: 34px;
    top: 2929px;
    width: 271px;
    font-size: 10px;
  }

  .breath-title {
    font-size: 10px;
  }

  .breath-title-1 {
    left: 21px;
    top: 3382px;
    width: 105px;
  }

  .breath-title-2 {
    left: 30px;
    top: 3869px;
    width: 105px;
  }

  .breath-title-3 {
    left: 30px;
    top: 4191px;
    width: 111px;
  }

  .breath-subtitle {
    font-size: 10px;
    white-space: nowrap;
  }

  .breath-subtitle-1 {
    left: 21px;
    top: 3397px;
    width: 50px;
  }

  .breath-subtitle-2 {
    left: 30px;
    top: 3881px;
    width: 50px;
  }

  .breath-subtitle-3 {
    left: 30px;
    top: 4203px;
    width: 50px;
  }

  .bg-img-34 {
    left: -3px;
    top: 3370px;
    width: 405px;
    height: 220px;
  }

  .floor-deco {
    left: 30px;
    top: 3628px;
    width: 56px;
    font-size: 10px;
  }

  .bg-img-35 {
    left: 0;
    top: 3651px;
    width: 402px;
    height: 189px;
  }

  .bg-img-13 {
    left: 1px;
    top: 3922px;
    width: 354px;
    height: 196px;
  }

  .bg-img-14 {
    left: 118px;
    top: 4190px;
    width: 284px;
    height: 180px;
  }

  .section-title-3 {
    left: 30px;
    top: 4440px;
    width: 46px;
  }

  .section-subtitle-3 {
    left: 30px;
    top: 4456px;
    width: 41px;
    white-space: nowrap;
  }

  .bg-img-15 {
    left: -4px;
    top: 4510px;
    width: 394px;
    height: 229px;
  }

  .person-label {
    font-size: 10px;
  }

  .label-1 {
    left: 55px;
    top: 4550px;
    width: 119px;
  }

  .label-2 {
    left: 101px;
    top: 4661px;
    width: 119px;
  }

  .label-3 {
    left: 182px;
    top: 4580px;
    width: 118px;
  }

  .label-4 {
    left: 232px;
    top: 4669px;
    width: 118px;
  }

  .label-5 {
    left: 291px;
    top: 4699px;
    width: 49px;
  }

  .label-6 {
    left: 300px;
    top: 4560px;
    width: 120px;
  }

  .black-bg {
    left: 0;
    top: 4790px;
    width: 402px;
    height: 1750px;
  }

  .section-title-4 {
    left: 29px;
    top: 4834px;
    width: 72px;
  }

  .section-subtitle-4 {
    left: 29px;
    top: 4854px;
    width: 74px;
    white-space: nowrap;
  }

  .bg-img-19 {
    left: -5px;
    top: 4874px;
    width: 415px;
    height: 242px;
  }

  .detail-title {
    font-size: 10px;
  }

  .detail-title-1 {
    left: 30px;
    top: 5150px;
    width: 33px;
  }

  .detail-title-2 {
    left: 30px;
    top: 5356px;
    width: 33px;
  }

  .detail-title-3 {
    left: 30px;
    top: 5578px;
    width: 33px;
  }

  .detail-title-4 {
    left: 30px;
    top: 5800px;
    width: 53px;
  }

  .bg-img-25 {
    left: 9px;
    top: 5170px;
    width: 392px;
    height: 152px;
  }

  .bg-img-21 {
    left: 0;
    top: 5377px;
    width: 402px;
    height: 167px;
  }

  .bg-img-22 {
    left: 0;
    top: 5599px;
    width: 401px;
    height: 167px;
  }

  .bg-img-23 {
    left: 21px;
    top: 5819px;
    width: 359px;
    height: 468px;
  }

  .bg-img-26 {
    left: -33px;
    top: 6272px;
    width: 455px;
    height: 248px;
  }
}