/* 联系我们独立样式 */
@import url("iconfont.css");

.contact-page { margin-top: 160px;margin-bottom: 100px; }

.contact-container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 15px;
}

.contact-layout { 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 30px; 
}

/* 左侧信息卡片区域 */
.info-cards { 
  flex: 1; 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 24px; 
}

.card { 
  position: relative; 
  background: #fff; 
  border: 1px solid #dfe6ee; 
  border-top: 4px solid #5f7d96; 
  border-radius: 4px; 
  padding: 28px 22px 22px; 
  color: #657487; 
}

.card .iconwrap { 
  position: absolute; 
  left: 50%; 
  top: -26px; 
  transform: translateX(-50%); 
  width: 52px; 
  height: 52px; 
  border-radius: 50%; 
  background: #5f7d96; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #fff; 
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.card .iconwrap em { 
  font-size: 22px; 
  line-height: 1; 
}

.card-title { 
  font-size: 20px; 
  font-weight: 700; 
  color: #3b4a5c; 
  margin-bottom: 10px; 
}

.card-text { 
  font-size: 16px; 
  color: #4a5b6f; 
}

.card.span-2 { grid-column: 1 / -1; }

/* 右侧图片区域 */
.contact-image { width: 45%; }
.contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }

/* 响应式 */
@media (max-width: 992px) {
  .contact-layout { flex-direction: column; }
  .contact-image { width: 100%; order: 2; }
  .info-cards { order: 1; grid-template-columns: 1fr; }
  .card.span-2 { grid-column: auto; }
}