
.main-container {
  width: 1180px;
}

/* 介绍段落样式 */
.intro-section {
  padding-bottom: 20px;
  padding-right: 50px;
  color: #2b2a2a;
}

.intro-text {
  color: #333333;
  font-size: 16px;
  line-height: 30px;
  font-family: arial, helvetica, sans-serif;
}

/* 标题栏样式 */
.section-header {
  width: 1180px;
  height: 50px;
  background-color: #3483ff;
  margin: 0 auto;
}

.section-header-text {
  font-family: Arial;
  font-size: 22px;
  margin-left: 10px;
  color: #ffffff;
  line-height: 52px;
  font-weight: bold;
}

/* 内容段落样式 */
.content-section {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 50px;
  color: #2b2a2a;
}

.content-text {
  color: #333333;
  font-size: 16px;
  line-height: 30px;
  font-family: arial, helvetica, sans-serif;
}

/* 图表容器样式 */
.chart-container {
  background: #f4f4f4;
  width: 1177px;
  height: 550px;
}

.chart-spacer {
  width: 1177px;
  height: 15px;
}

.chart-text-left {
  width: 635px;
  margin-left: 30px;
  float: left;
  margin-top: 10px;
  font-size: 16px;
  line-height: 36px;
}

.chart-text-right {
  width: 540px;
  margin-left: 30px;
  float: left;
  margin-top: 10px;
  font-size: 16px;
  line-height: 36px;
}

.highlight-text {
  color: #3483ff;
  font-weight: bold;
}

.chart-caption {
  width: 1160px;
  margin-top: 10px;
  height: 30px;
}

.chart-caption-text {
  width: 520px;
  float: right;
  font-size: 18px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.3px;
}

/* 带间距的标题栏 */
.section-header-spaced {
  width: 1180px;
  height: 50px;
  background-color: #3483ff;
  margin: 0 auto;
  margin-top: 20px;
}

/* 简化结构图表容器 */
.simplify-chart {
  background: #f4f4f4;
  width: 1181px;
  height: 396px;
  margin-top: 30px;
}

.simplify-chart-bg {
  background: url(/d/file/p/2021/08-13/25fd093e86c0ad56ef998d9558a8a86c.jpg);
  width: 830px;
  height: 396px;
  margin: 0 auto;
}

.simplify-chart-center-text {
  width: 830px;
  float: left;
  margin-top: 200px;
  text-align: center;
  font-size: 16px;
  line-height: 36px;
  color: #000;
}

.simplify-chart-label-a {
  width: 200px;
  float: left;
  margin-top: 120px;
  margin-left: 80px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

.simplify-chart-label-b {
  width: 150px;
  float: left;
  margin-top: 120px;
  margin-left: 370px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

/* 制造难度图表容器 */
.difficulty-chart {
  background: #f4f4f4;
  width: 1181px;
  height: 333px;
  margin-top: 30px;
}

.difficulty-chart-bg {
  background: url(/d/file/p/2021/08-13/0764ca2e8c35069def1a7d1e73deebee.jpg);
  width: 909px;
  height: 303px;
  margin: 0 auto;
}

.difficulty-chart-content {
  width: 909px;
  height: 250px;
}

.difficulty-chart-center-text {
  width: 250px;
  float: left;
  margin-top: 160px;
  text-align: center;
  margin-left: 470px;
  font-size: 16px;
  line-height: 26px;
  color: #000;
}

.difficulty-chart-label-a {
  width: 200px;
  float: left;
  margin-top: 30px;
  margin-left: 90px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

.difficulty-chart-label-b {
  width: 150px;
  float: left;
  margin-top: 30px;
  margin-left: 410px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

/* 尺寸测量图表容器 */
.measurement-chart {
  background: #f4f4f4;
  width: 1181px;
  height: 353px;
  margin-top: 30px;
}

.measurement-chart-bg {
  background: url(/d/file/p/2021/08-13/f317824c9a23ec2322b8083077057735.jpg);
  width: 957px;
  height: 351px;
  margin: 0 auto;
}

.measurement-chart-content {
  width: 957px;
  height: 250px;
}

.measurement-chart-center-text {
  width: 250px;
  float: left;
  margin-top: 190px;
  text-align: center;
  margin-left: 460px;
  font-size: 16px;
  line-height: 26px;
  color: #000;
}

.measurement-chart-label-a {
  width: 200px;
  float: left;
  margin-top: 50px;
  margin-left: 90px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

.measurement-chart-label-b {
  width: 150px;
  float: left;
  margin-top: 50px;
  margin-left: 410px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  letter-spacing: -0.2px;
}

/* 避免CNC加工图表 */
.avoid-cnc-chart {
  background: url(/d/file/p/2021/08-13/0a37f709d018f79fb55e9502620e1149.jpg);
  width: 852px;
  height: 291px;
  margin: 0 auto;
}

/* 底部链接样式 */
.bottom-links {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 50px;
}

.bottom-links-text {
  color: #333333;
  font-size: 16px;
  line-height: 30px;
  font-family: arial, helvetica, sans-serif;
}

.bottom-links a {
  color: #3483ff;
}

/* 标签区域样式 */
.tags-section {
  padding-top: 30px;
  padding-bottom: 30px;
  height: 120px;
}

.tags-text {
  font-size: 16px;
  font-family: arial, helvetica, sans-serif;
}

.tags-text strong a {
  color: #0782c1;
  text-decoration: none;
}

/* 通用间距 */
.spacer {
  height: 30px;
}

/* 图片样式 */
.chart-image {
  display: block;
  margin: 0 auto;
} 

/* 主容器响应式 */
.main-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 介绍段落响应式 */
.intro-section {
  padding: 15px 0;
  color: #2b2a2a;
}

.intro-text {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-family: arial, helvetica, sans-serif;
}

/* 标题栏响应式 */
.section-header {
  width: 100%;
  height: auto;
  min-height: 50px;
  background-color: #3483ff;
  margin: 0;
  margin-bottom: 15px;
}

.section-header-text {
  font-family: Arial;
  font-size: 18px;
  padding: 15px 10px;
  color: #ffffff;
  line-height: 1.4;
  font-weight: bold;
  display: block;
}

/* 内容段落响应式 */
.content-section {
  padding: 15px 0;
  color: #2b2a2a;
}

.content-text {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-family: arial, helvetica, sans-serif;
}

/* 图表容器响应式 */
.chart-container {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 400px;
  padding: 15px;
  margin: 20px 0;
}

@media screen and (max-width: 768px) {
  .chart-container {
    margin:0;
  }
}

.chart-spacer {
  display: none; /* 移动端隐藏 */
}

.chart-text-left,
.chart-text-right {
  width: 100%;
  margin: 10px 0;
  float: none;
  font-size: 14px;
  line-height: 1.5;
}

.highlight-text {
  color: #3483ff;
  font-weight: bold;
}

.chart-caption {
  width: 100%;
  margin-top: 15px;
  height: auto;
}

.chart-caption-text {
  width: 100%;
  float: none;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* 带间距的标题栏响应式 */
.section-header-spaced {
  width: 100%;
  height: auto;
  min-height: 50px;
  background-color: #3483ff;
  margin: 20px 0 15px 0;
  
}

/* 简化结构图表响应式 */
.simplify-chart {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 300px;
  margin-top: 20px;
  
  padding: 15px;
}

@media screen and (max-width: 768px) {
  .simplify-chart {
    padding:0;
  }
}

.simplify-chart-bg {
  background: url(/d/file/p/2021/08-13/25fd093e86c0ad56ef998d9558a8a86c.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 250px;
  margin: 0 auto;
  position: relative;
}

.simplify-chart-center-text {
  width: 100%;
  float: none;
  margin-top: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

.simplify-chart-label-a,
.simplify-chart-label-b {
  width: 50%;
  float: left;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  text-align: center;
  position: absolute;
  top: 10px;
}

.simplify-chart-label-a {
  left: 10px;
}

.simplify-chart-label-b {
  right: 10px;
}

/* 制造难度图表响应式 */
.difficulty-chart {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 250px;
  margin-top: 20px;
  
  padding: 15px;
}

.difficulty-chart-bg {
  background: url(/d/file/p/2021/08-13/0764ca2e8c35069def1a7d1e73deebee.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.difficulty-chart-content {
  width: 100%;
  height: 100%;
}

.difficulty-chart-center-text {
  width: 100%;
  float: none;
  margin-top: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.difficulty-chart-label-a,
.difficulty-chart-label-b {
  width: 50%;
  float: left;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  text-align: center;
  position: absolute;
  bottom: 10px;
}

.difficulty-chart-label-a {
  left: 10px;
}

.difficulty-chart-label-b {
  right: 10px;
}

/* 尺寸测量图表响应式 */
.measurement-chart {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 250px;
  margin-top: 20px;
  
  padding: 15px;
}

.measurement-chart-bg {
  background: url(/d/file/p/2021/08-13/f317824c9a23ec2322b8083077057735.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.measurement-chart-content {
  width: 100%;
  height: 100%;
}

.measurement-chart-center-text {
  width: 100%;
  float: none;
  margin-top: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.measurement-chart-label-a,
.measurement-chart-label-b {
  width: 50%;
  float: left;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  text-align: center;
  position: absolute;
  bottom: 10px;
}

.measurement-chart-label-a {
  left: 10px;
}

.measurement-chart-label-b {
  right: 10px;
}

/* 避免CNC加工图表响应式 */
.avoid-cnc-chart {
  background: url(/d/file/p/2021/08-13/0a37f709d018f79fb55e9502620e1149.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
  margin: 20px auto;
  
}

/* 底部链接响应式 */
.bottom-links {
  padding: 15px 0;
}

.bottom-links-text {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-family: arial, helvetica, sans-serif;
}

.bottom-links a {
  color: #3483ff;
  word-break: break-all;
}

/* 标签区域响应式 */
.tags-section {
  padding: 20px 0;
  height: auto;
  min-height: 80px;
}

.tags-text {
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.5;
}

.tags-text strong a {
  color: #0782c1;
  text-decoration: none;
  display: inline-block;
  margin: 5px 10px 5px 0;
  word-break: break-all;
}

/* 通用间距响应式 */
.spacer {
  height: 15px;
}

/* 图片响应式 */
.chart-image {
  display: block;
  margin: 15px auto;
  max-width: 100%;
  height: auto;
  
}

@media screen and (max-width: 768px) {
  .chart-image {
    margin: 0;
  }
}

.simplify-chart-pc{
  display: block;
}

.simplify-chart-mobile{
  display: none;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .simplify-chart-pc{
    display: none;
  }
  .simplify-chart-mobile{
    display: block;
  }
}

/* 平板设备适配 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-container {
    padding: 0 20px;
  }
  
  .section-header-text {
    font-size: 20px;
  }
  
  .chart-text-left,
  .chart-text-right {
    font-size: 15px;
  }
  
  .simplify-chart-bg,
  .difficulty-chart-bg,
  .measurement-chart-bg {
    height: 300px;
  }
  
  .avoid-cnc-chart {
    height: 250px;
  }
}

/* 桌面设备适配 (1025px及以上) */
@media (min-width: 1025px) {
  .main-container {
    width: 1180px;
    padding: 0;
  }
  
  .section-header {
    width: 1180px;
    height: 50px;
  }
  
  .section-header-text {
    font-size: 22px;
    line-height: 52px;
    padding: 0 10px;
  }
  
  .section-header-spaced {
    width: 1180px;
    height: 50px;
    margin-top: 20px;
  }
  
  .chart-container {
    width: 1177px;
    height: 550px;
    padding: 0;
  }
  
  .chart-spacer {
    display: block;
    width: 1177px;
    height: 15px;
  }
  
  .chart-text-left {
    width: 635px;
    margin-left: 30px;
    float: left;
    margin-top: 10px;
    font-size: 16px;
    line-height: 36px;
  }
  
  .chart-text-right {
    width: 540px;
    margin-left: 30px;
    float: left;
    margin-top: 10px;
    font-size: 16px;
    line-height: 36px;
  }
  
  .chart-caption {
    width: 1160px;
    margin-top: 10px;
    height: 30px;
  }
  
  .chart-caption-text {
    width: 520px;
    float: right;
    font-size: 18px;
    line-height: 36px;
    text-align: left;
  }
  
  .simplify-chart {
    width: 1181px;
    height: 396px;
    padding: 0;
  }
  
  .simplify-chart-bg {
    width: 830px;
    height: 396px;
    background-size: auto;
  }
  
  .simplify-chart-center-text {
    width: 830px;
    float: left;
    margin-top: 200px;
    text-align: center;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .simplify-chart-label-a {
    width: 200px;
    float: left;
    margin-top: 120px;
    margin-left: 80px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .simplify-chart-label-b {
    width: 150px;
    float: left;
    margin-top: 120px;
    margin-left: 370px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .difficulty-chart {
    width: 1181px;
    height: 333px;
    padding: 0;
  }
  
  .difficulty-chart-bg {
    width: 909px;
    height: 303px;
    background-size: auto;
  }
  
  .difficulty-chart-content {
    width: 909px;
    height: 250px;
  }
  
  .difficulty-chart-center-text {
    width: 250px;
    float: left;
    margin-top: 160px;
    text-align: center;
    margin-left: 470px;
    font-size: 16px;
    line-height: 26px;
    position: static;
  }
  
  .difficulty-chart-label-a {
    width: 200px;
    float: left;
    margin-top: 30px;
    margin-left: 90px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .difficulty-chart-label-b {
    width: 150px;
    float: left;
    margin-top: 30px;
    margin-left: 410px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .measurement-chart {
    width: 1181px;
    height: 353px;
    padding: 0;
  }
  
  .measurement-chart-bg {
    width: 957px;
    height: 351px;
    background-size: auto;
  }
  
  .measurement-chart-content {
    width: 957px;
    height: 250px;
  }
  
  .measurement-chart-center-text {
    width: 250px;
    float: left;
    margin-top: 190px;
    text-align: center;
    margin-left: 470px;
    font-size: 16px;
    line-height: 26px;
    position: static;
  }
  
  .measurement-chart-label-a {
    width: 200px;
    float: left;
    margin-top: 50px;
    margin-left: 90px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .measurement-chart-label-b {
    width: 150px;
    float: left;
    margin-top: 50px;
    margin-left: 410px;
    font-size: 16px;
    line-height: 36px;
    position: static;
  }
  
  .avoid-cnc-chart {
    width: 852px;
    height: 291px;
    background-size: auto;
  }
  
  .bottom-links {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 50px;
  }
  
  .tags-section {
    padding-top: 30px;
    padding-bottom: 30px;
    height: 120px;
  }
  
  .tags-text {
    font-size: 16px;
  }
  
  .tags-text strong a {
    margin: 0 10px 0 0;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .bottom-links a,
  .tags-text strong a {
    display: inline-flex;
    align-items: center;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .chart-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}