/*  伟灿激光 产品详情页 · 最终上线版（手机自适应）*/
/*激光器*/
.vcan-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* iOS平滑滚动 */
    margin: 12px 0;
    /* 提示可滑动的轻阴影，提升交互感知（可选） */
    background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), 
                linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 0 100%;
    background-size: 20px 100%, 20px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
}
/* 表格样式 - 轻量化，使用系统字体提升加载速度 */
.vcan-table {
    width: 100%;
    min-width: 700px;   /* 保证内容不挤压，实际可根据需要调整 */
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
    font-size: 14px;    /* 基础字号，移动端通过媒体查询覆盖 */
    line-height: 1.4;
    background-color: #fff;
}
.vcan-table .firstRow{
    background: #bbb;
    font-weight: bold;
}
/* 统一边框与内边距，减少重绘 */
.vcan-table th,
.vcan-table td {
    border: 1px solid #ddd;
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}
/* 首列表头或参数列背景统一 */
.vcan-table th:first-child,
.vcan-table td:first-child {
    background: #bbb;
    font-weight: bold;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
    color: #222;
}
/* 表头样式略微强化，但保持轻量 */
.vcan-table th {
    background: #fafafa;
    font-weight: 600;
}
/* 移动端优化：调整字体、内边距，提升点击区域和可读性 */
@media (max-width: 640px) {
    .vcan-table {
        font-size: 12px;
        min-width: 650px;  /* 稍微缩小最小宽度避免过挤 */
    }
    .vcan-table th,
    .vcan-table td {
        padding: 8px 6px;
    }
    .vcan-table td:first-child,
    .vcan-table th:first-child {
        font-size: 12px;
        white-space: nowrap;
        
    }
}
/* 针对小折叠屏进一步优化 */
@media (max-width: 480px) {
    .vcan-table {
        font-size: 11px;
        min-width: 600px;
    }
    .vcan-table td,
    .vcan-table th {
        padding: 6px 4px;
    }
}
/*激光器结束*/

.vcan-product {
  --main-color: #0066aa;
  --red-color: #ff3333;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.vcan-product * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vcan-product .header,
.vcan-product .hero,
.vcan-product .features-config,
.vcan-product .tech-params,
.vcan-product .product-details,
.vcan-product .application,
.vcan-product .footer {
  padding: 20px;
}

.vcan-product .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.vcan-product .hero {
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vcan-product .hero-text h2 {
  font-size: 18px;
  font-weight: var(--fontblod7);
  margin-bottom: 10px;
}
.vcan-product .hero-text p {
  font-size: 14px;
  color: #555;
}
.vcan-product .hero-img {
  width: 100%;
  max-width: 280px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin: 0 auto;
}
.vcan-product .hero-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.vcan-product .features-config {
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-bottom: 1px solid #eee;
}
.vcan-product .section-title {
  background: var(--main-color);
  color: #fff;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 14px;
  border-radius: 3px;
}
.vcan-product .col ul {
  list-style: none;
  font-size: 14px;
}
.vcan-product .col li {
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
}
.vcan-product .col li::before {
  position: absolute;
  left: 0;
  color: var(--main-color);
  font-weight: bold;
}
.vcan-product .col li:nth-child(1)::before { content: "1."; }
.vcan-product .col li:nth-child(2)::before { content: "2."; }
.vcan-product .col li:nth-child(3)::before { content: "3."; }
.vcan-product .col li:nth-child(4)::before { content: "4."; }
.vcan-product .col li:nth-child(5)::before { content: "5."; }
.vcan-product .col li:nth-child(6)::before { content: "6."; }
.vcan-product .col li:nth-child(7)::before { content: "7."; }
.vcan-product .col li:nth-child(8)::before { content: "8."; }

.vcan-product .tech-params {
  border-bottom: 1px solid #eee;
}
.vcan-product .tech-params h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: bold;
}
.vcan-product .params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vcan-product .params-table td {
  padding: 8px 6px;
  border: 1px solid #e0e0e0;
  word-break: break-word;
}
.vcan-product .params-table td:nth-child(odd) {
  background: #bbb;
  font-weight: bold; /* 所有标题参数全部加粗 */
}

.vcan-product .product-details {
  border-bottom: 1px solid #eee;
}
.vcan-product .details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 15px;
}
.vcan-product .detail-item {
  text-align: center;
}
.vcan-product .detail-img {
  width: 100%;
  height: 140px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vcan-product .detail-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.vcan-product .detail-item p {
  font-size: 12px;
}

.vcan-product .application {
  border-bottom: 1px solid #eee;
}
.vcan-product .application h3{
  font-size: 18px;
  font-weight: bold;
}
.vcan-product .app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}
.vcan-product .app-item {
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vcan-product .app-item img {
  max-width: 90%;
  max-height: 90%;
  object-fit: cover;
  border-radius: 4px;
}



@media (min-width: 600px) {
  .vcan-product .hero {
    flex-direction: row;
    align-items: center;
  }
  .vcan-product .features-config {
    flex-direction: row;
  }
  .vcan-product .details-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .vcan-product .app-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .vcan-product .footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .vcan-product .params-table {
    font-size: 14px;
  }