/* ==========================================================================
   研发技术 - 页面样式
   遵循项目 rem 单位约定（font-size: calc(100vw / 1920)）
   ========================================================================== */

/* 公共容器 */
.main-tech {
  overflow: hidden;
}

/* ==========================================================================
   1. 研发技术 - 顶部统计
   ========================================================================== */
.tech_hero {
  position: relative;
  padding: 150rem 0 170rem;
  background: #f5f8fb;
  /*background:
        radial-gradient(ellipse at 80% 20%, rgba(0, 92, 167, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 90%, rgba(0, 92, 167, 0.05) 0%, transparent 60%),
        #f5f8fb;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tech_hero_box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 240rem;
}

.tech_hero_text {
  flex: 0 0 44%;
}

.tech_hero_title {
  color: #333333;
  line-height: 1.1;
  margin-bottom: 40rem;
}

.tech_hero_desc {
  color: #838383;
  line-height: 1.8;
}

.tech_hero_num {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80rem 60rem;
  padding-top: 12rem;
}

.tech_hero_num li {
  position: relative;
  line-height: 1;
}

.tech_hero_num li span {
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
}

.tech_hero_num li sup {
  font-style: normal;
  margin-left: 4rem;
  line-height: 1;
}

.tech_hero_num li p {
  color: #666;
  margin-top: 16rem;
  line-height: 1.4;
}

/* ==========================================================================
   2. 核心技术平台
   ========================================================================== */
.tech_core {
  position: relative;
  padding: 110rem 0 30rem;
  background: #fff;
  overflow: hidden;
}

.tech_core_bg {
  position: absolute;
  inset: 0 0 35% 0;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.tech_core .wrap {
  position: relative;
  z-index: 2;
}

.tech_core_title {
  color: #fff;
  line-height: 1;
  margin-bottom: 60rem;
}

/* 平台面板 */
.tech_core_panel {
  border-radius: 20rem;
  overflow: hidden;
  box-shadow: 0 5rem 5rem 5rem rgba(0, 0, 0, 0.05);
  padding: 40rem 40rem 80rem;
}

/* 单个折叠单元 */
.tech_core_item {
  margin-bottom: 10rem;
  overflow: hidden;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}

.tech_core_item:last-of-type {
  margin-bottom: 0;
}

.tech_core_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rem 36rem 26rem 60rem;
  cursor: pointer;
  border-radius: 14rem;
  color: #005ca9;
  background: #dfe7ee;
}

.tech_core_item--active .tech_core_head {
  background: #005ca9;
  color: #fff;
}

.tech_core_name {
  line-height: 1;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
}

.tech_core_toggle {
  flex: 0 0 auto;
  width: 50rem;
  height: 30rem;
  border-radius: 25rem;
  background: #005ca7;
  border: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition:
    background 0.3s ease,
    transform 0.4s ease;
  -webkit-transition:
    background 0.3s ease,
    transform 0.4s ease;
}

.tech_core_toggle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14rem;
  height: 2rem;
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
}

.tech_core_toggle i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 14rem;
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
}

.tech_core_item--active .tech_core_toggle {
  background: #fff;
}

.tech_core_item--active .tech_core_toggle i,
.tech_core_item--active .tech_core_toggle i::before {
  background: #005ca7;
}

.tech_core_item--active .tech_core_toggle i::before {
  display: none;
}

/* 折叠/展开状态 */
.tech_core_body {
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.5s ease;
  -webkit-transition: max-height 0.5s ease;
  display: none;
}

.tech_core_item--active .tech_core_body {
  /* max-height: 2000rem; */
}

.tech_core_body > * {
  padding-left: 60rem;
  padding-right: 60rem;
}

.tech_core_body > *:first-child {
  padding-top: 30rem;
}

.tech_core_body > *:last-child {
  padding-bottom: 30rem;
}

/* 平台内部通用样式 */
.tech_core_intro {
  color: #777777;
  line-height: 1.8;
  margin-bottom: 30rem;
}

.tech_core_group {
  margin-bottom: 40rem;
}

.tech_core_subtitle {
  color: #000;
  line-height: 1.4em;
  margin-bottom: 14rem;
}

.tech_core_bullets {
  color: #777777;
}

.tech_core_rich {
  color: #777777;
  line-height: 1.7;
}

.tech_core_rich p {
  margin: 0 0 10rem;
}

.tech_core_rich ul,
.tech_core_rich ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech_core_rich li {
  display: flex;
  position: relative;
  padding-left: 12rem;
  margin-bottom: 10rem;
}

.tech_core_rich ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10rem;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.tech_core_rich img,
.tech_core_rich video,
.tech_core_rich iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12rem 0;
}

.tech_core_bullets li {
  display: flex;
  position: relative;
  padding-left: 12rem;
  margin-bottom: 10rem;
}

.tech_core_bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10rem;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* 分析检测设备 - 白色块 */
.tech_core_equip {
  background: #fff;
  border-radius: 10rem;
  margin: 0 60rem 40rem;
  border: 1px solid #e5e7e8;
  border-radius: 10rem;
  padding: 26rem 30rem !important;
}

.tech_core_equip .tech_core_subtitle {
  margin-bottom: 14rem;
}

.tech_core_equip .tech_core_intro {
  margin-bottom: 0;
}

/* 非激活态下的内容样式（PROTAC / 抗体 / 细胞治疗） */
.tech_core_item:not(.tech_core_item--active) .tech_core_intro {
  color: #555;
}

.tech_core_item:not(.tech_core_item--active) .tech_core_bullets li {
  color: #666;
}

.tech_core_item:not(.tech_core_item--active) .tech_core_rich {
  color: #666;
}

.tech_core_item:not(.tech_core_item--active) .tech_core_subtitle {
  color: #1a1a1a;
}

.tech_core_meta {
  color: #777;
  text-align: left;
  margin: 30rem 60rem 0;
}

/* ==========================================================================
   响应式 - 1440px
   ========================================================================== */
@media only screen and (max-width: 1440px) {
  .tech_hero_num {
    gap: 40rem 50rem;
  }
}

/* ==========================================================================
   响应式 - 1024px
   ========================================================================== */
@media only screen and (max-width: 1024px) {
  .tech_hero {
    padding: 70rem 0 90rem;
  }

  .tech_hero_box {
    flex-direction: column;
    gap: 50rem;
  }

  .tech_hero_text {
    flex: 1 1 100%;
    width: 100%;
  }

  .tech_hero_num {
    width: 100%;
    gap: 30rem 40rem;
  }

  .tech_core {
    padding: 70rem 0 30rem;
  }

  .tech_core_bg {
    inset: 0 0 30% 0;
  }

  .tech_core_title {
    margin-bottom: 40rem;
  }

  .tech_core_panel {
    padding: 24rem 24rem 30rem;
  }

  .tech_core_head {
    padding: 22rem 24rem;
  }

  .tech_core_body > * {
    padding-left: 24rem;
    padding-right: 24rem;
  }

  .tech_core_body > *:last-child {
    padding-bottom: 24rem;
  }
  .tech_core_equip {
    margin: 0 24rem 30rem;
  }
  .tech_core_meta {
    margin: 20rem 24rem 0;
  }
}

/* ==========================================================================
   响应式 - 767px
   ========================================================================== */
@media only screen and (max-width: 767px) {
  .tech_hero {
    padding: 40px 0 50px;
  }

  .tech_hero_desc br {
    display: none;
  }

  .tech_hero_num {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }

  .tech_hero_num li span {
    font-size: 30px;
  }

  .tech_hero_num li p {
    margin-top: 10px;
  }

  .tech_core {
    padding: 40px 0 50px;
  }

  .tech_core_title {
    margin-bottom: 24px;
  }

  .tech_core_panel {
    padding: 12px 12px 20px;
    border-radius: 12px;
  }

  .tech_core_item {
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .tech_core_head {
    padding: 14px 16px;
  }

  .tech_core_toggle {
    width: 28px;
    height: 28px;
  }
  .tech_core_toggle i {
    width: 10px;
  }
  .tech_core_toggle i::before {
    height: 10px;
  }

  .tech_core_body > * {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tech_core_body > *:last-child {
    padding-bottom: 18px;
  }

  .tech_core_subtitle {
    margin-bottom: 10px;
  }

  .tech_core_bullets {
    line-height: 1.7em;
  }

  .tech_core_bullets li {
    padding-left: 10px;
  }
  .tech_core_bullets li::before {
    width: 4px;
    height: 4px;
    top: 9px;
  }

  .tech_core_rich {
    line-height: 1.7em;
  }

  .tech_core_rich li {
    padding-left: 10px;
  }

  .tech_core_rich ul > li::before {
    width: 4px;
    height: 4px;
    top: 9px;
  }
  .tech_core_equip {
    padding: 16px 16px !important;
    border-radius: 8px;
  }
}