/* ==================== 金属价格页面专属样式 ==================== */

.metal-section {
  width: 100%;
  padding: 3.854vw 11.552vw 3.854vw 12.76vw;
  background: #FFFFFF;
}

.metal-header {
  background: #01153A;
  padding: 2vw;
  margin: 0 0 2.813vw 0;
  text-align: center;
}

.metal-title {
  color: white;
  font-size: 1.875vw;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3vw;
}

.metal-content {
  background: white;
  margin: 0;
}

.metal-category-header {
  background: url('../img/btn_bg.webp');
  background-size: cover;
  background-position: center;
  width: 74.74vw;
  height: 3.021vw;
  color: white;
  font-size: 1.25vw;
  font-weight: 600;
  padding: 1.042vw 2.083vw;
  text-align: left;
  margin-top: 3.854vw;
  display: flex;
  align-items: center;
}

.metal-category-header:first-child {
  margin-top: 0;
}

.metal-table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: white;
  box-shadow:
    0 0.3vw 0.8vw rgba(0, 0, 0, 0.1),
    0 0.6vw 1.5vw rgba(0, 0, 0, 0.06),
    inset 0 0.05vw 0.1vw rgba(255, 255, 255, 0.8);
  border-radius: 0.3vw;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.metal-table-wrapper:hover {
  box-shadow:
    0 0.5vw 1.2vw rgba(0, 106, 255, 0.12),
    0 1vw 2.5vw rgba(0, 0, 0, 0.08),
    inset 0 0.05vw 0.1vw rgba(255, 255, 255, 0.9);
  transform: translateY(-0.2vw);
}

.metal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.625vw;
}

.metal-table thead {
  background: #f0f0f0;
}

.metal-table thead th {
  color: #454545;
  font-weight: 600;
  padding: 0.52vw 0.833vw;
  text-align: center;
  border: 0.052vw solid #ddd;
  font-size: 1.042vw;
  width: 9.336vw;
  height: 2.135vw;
  box-sizing: border-box;
}

.metal-table thead th:nth-child(1) {
  text-align: left;
}

.metal-table tbody tr {
  border-bottom: 0.052vw solid #ddd;
}

.metal-table tbody tr:hover {
  background: #f8f9fa;
}

.metal-table tbody td {
  padding: 0.52vw 0.833vw;
  color: #000000;
  font-size: 0.833vw;
  text-align: center;
  border: 0.052vw solid #ddd;
  width: 9.336vw;
  height: 2.135vw;
  box-sizing: border-box;
}

.metal-table tbody tr td:nth-child(1) {
  text-align: left;
}