/* ==========================================
   1. 基础容器与常规布局
   ========================================== */
.lens-table-wrap {
  background: url(https://static.cmereye.com/imgs/2024/03/cc6eb4fe0d7bb9b5.png) no-repeat top,
    url(https://static.cmereye.com/imgs/2024/03/b34e0a520ed9c467.png) no-repeat bottom;
  background-size: cover;
}

/* 移除滚动条 */
.lens-table {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lens-table::-webkit-scrollbar {
  display: none;
}

/* 表头与标题 */
.lens-table .lens-table-th {
  border-radius: 6px 6px 0 0;
  padding: 4px 6px;
}

.lens-table .lens-table-title {
  font-size: clamp(14px, 3.3333vw, 30px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}

/* 行边框 */
.lens-table .lens-table-bb {
  border-bottom: 0.6px solid #cbc6c6;
}

/* 子标题 */
.lens-table .lens-table-subtitle {
  color: #2958a3;
  font-weight: 700;
  font-size: 3.3333vw;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 2px #fff;
  line-height: 4.1026vw;
  width: 15.128vw;
  white-space: nowrap;
  text-align: center;
}

/* ==========================================
   2. 表格单元格 (td) 及左右环形发光边框控制
   ========================================== */
.lens-table .lens-table-td {
  padding: 12px;
  border: none;
  --ring-w: 3px;
}

/* 针对不同列分配发光颜色变量 */
.lens-table .lens-table-td:nth-child(2) {
  --ring-color: #f6e75b;
  z-index: 10;
}

.lens-table .lens-table-td:nth-child(3) {
  --ring-color: #55d1f0;
  z-index: 10;
}

.lens-table .lens-table-td:nth-child(4) {
  --ring-color: #f2f7fb;
}

.lens-table .lens-table-td:nth-child(5) {
  --ring-color: #f2fffe;
}

/* 统一应用左右内阴影 */
.lens-table .lens-table-td:nth-child(2),
.lens-table .lens-table-td:nth-child(3),
.lens-table .lens-table-td:nth-child(4),
.lens-table .lens-table-td:nth-child(5) {
  box-shadow: inset var(--ring-w) 0 0 0 var(--ring-color),
    inset calc(-1 * var(--ring-w)) 0 0 0 var(--ring-color);
}

/* 最后一行的底边圆角及环形封闭阴影 */
.lens-table tr:last-child .lens-table-td {
  border-radius: 0 0 6px 6px;
  box-shadow: inset var(--ring-w) 0 0 0 var(--ring-color),
    inset calc(-1 * var(--ring-w)) 0 0 0 var(--ring-color),
    inset 0 calc(-1 * var(--ring-w)) 0 0 var(--ring-color);
  padding-top: 24px;
  padding-bottom: 36px;
}

/* ==========================================
   3. "了解更多" 按钮发光特效
   ========================================== */

.absolute-horizon {
  left: 50%;
  position: absolute;
  transform: translate(-50%);
}

.lens-table .lens-table-more {
  display: flex;
  flex-direction: column;
}

.lens-table .lens-table-more.edof {
  box-shadow: 0 0 12.293px rgba(255, 167, 4, 0.86);
}

.lens-table .lens-table-more.multifocal {
  box-shadow: 0 0 12.293px rgba(72, 134, 206, 0.86);
}

/* ==========================================
   4. 独立组件（大按钮、装饰背景图）
   ========================================== */
.button-ws {
  display: block;
  width: fit-content;
  background: linear-gradient(180deg, #f0cf8f 4%, rgba(255, 168, 0, 0.84));
  border: 1.0256vw solid #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  font-size: 5.1282vw;
  letter-spacing: 0.9744vw;
  line-height: 6.1538vw;
  margin: 3.8462vw auto 10.2564vw;
  padding: 5.128vw 2.564vw;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}

.button-ws:hover {
  box-shadow: 0px 4px 9px rgba(0, 0, 0, .25);
  font-size: 5.1282vw;
  text-shadow: 0px 4px 7px rgba(0, 0, 0, .4);
  transform: translateY(-5px);
}

/* 标题背景装饰 */
.types-title {
  position: relative;
}

.types-title::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 52px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMTAiIGhlaWdodD0iMTEyIiB2aWV3Qm94PSIwIDAgMjEwIDExMiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTYuMjk2IDU0LjcyNkE4Mi4zIDgyLjMgMCAwIDAgMjQuMjMyIDgxLjU3YzE0Ljk2NiAxNC45NjcgMzQuNDg1IDIzLjUyNiA1NS4防腐省略...');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ==========================================
   5. 媒体查询 (Media Queries) 响应式适配
   ========================================== */

/* 移动端/平板及以下（小于1024px） */
@media screen and (max-width: 1023px) {
  .banner {
    aspect-ratio: 103 / 59;
  }

  .lens-icon-normal {
    rotate: 90deg;
  }
}

/* 平板及桌面端（大于等于768px） */
@media screen and (min-width: 768px) {
  .button-ws {
    border: min(9px, 0.4688vw) solid #fff;
    font-size: min(52px, 2.7083vw);
    letter-spacing: min(9.85px, 0.5146vw);
    line-height: min(64px, 3.3333vw);
    margin: min(50px, 2.604vw) auto;
    padding: min(41px, 2.135vw) min(29.2px, 1.5208vw);
  }

  .button-ws:hover {
    font-size: 48px;
  }

  /* 最后一行的内边距在平板及以上变大 */
  .lens-table tr:last-child .lens-table-td:not(:first-child) {
    padding-bottom: 80px;
  }

  /* 子标题大小及文字多方向描边 */
  .lens-table .lens-table-subtitle {
    text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff;
    width: min(170px, 8.854vw);
    font-size: min(24px, 2vw);
    letter-spacing: min(2.4px, 0.125vw);
    line-height: min(40px, 2.083vw);
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 大屏桌面端（大于等于1024px） */
@media screen and (min-width: 1024px) {
  .lens-table .lens-table-th {
    padding: 12px 24px;
  }

  .lens-table .lens-table-title {
    font-size: min(29px, 1.51vw);
  }

  .lens-table .lens-table-td {
    --ring-w: 5px;
    padding: 12px 20px;
    width: 100%;
    height: 100%;
  }

  .lens-table .lens-table-bb {
    border-bottom-width: 1px;
  }

  /* 了解更多区域：大屏由竖向变横向排列 */
  .lens-table .lens-table-more {
    flex-direction: row;
  }

  /* 标题背景装饰变大 */
  .types-title::before {
    width: 212px;
    height: 112px;
  }
}