/* ==========================================================================
   联系我们页面样式（浅蓝大气版）
   ========================================================================== */

.contact{padding:60px 0 10px; background:#fff;}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.contact-card{background:#f7fbff; border:1px solid #eef4fb; border-radius:16px; padding:30px 26px; text-align:center; position:relative; overflow:hidden;}
.contact-card:before{content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:3px; background:linear-gradient(90deg,#0066cc,#3498db); transition:width .4s;}
.contact-card:hover:before{width:100%;}
.contact-card i{display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg,#eaf3ff,#f5f9ff); color:#0066cc; font-size:28px; transition:.4s;}
.contact-card:hover i{background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; transform:translateY(-6px);}
.contact-card h3{font-size:18px; color:#0b2545; margin:16px 0 8px; font-weight:bold;}
.contact-card p{font-size:14px; color:#666; line-height:1.7; word-break:break-all;}
.contact-card a,.contact-card span{display:inline-block; margin-top:12px; font-size:13px; color:#0066cc; border:1px solid #b8d4f0; border-radius:20px; padding:5px 18px; transition:.3s;}
.contact-card a:hover{background:#0066cc; color:#fff; box-shadow:0 8px 18px rgba(0,102,204,.22);}
.contact-card span{color:#999; border-color:#e5ecf5;}

/* 留言 + 侧栏 */
.contact-main{padding:50px 0 70px; background:#f5f9ff;}
.contact-main article{display:flex; gap:30px; align-items:flex-start;}
.contact-form{flex:1.4; min-width:0; background:#fff; border-radius:18px; padding:38px; box-shadow:0 18px 40px rgba(11,37,69,.08);}
.contact-form h2{font-size:26px; color:#0b2545; font-weight:bold; padding-left:12px; border-left:4px solid #0066cc;}
.contact-form>div>p{font-size:14px; color:#999; margin:12px 0 24px; padding-left:16px;}
.contact-form dt{display:none;}
.contact-form dd{margin-bottom:16px;}
.contact-form input{height:48px; border-radius:8px; background:#f7fbff;}
.contact-form button{width:100%; color:#fff; border:none; line-height:48px; padding:0 30px; font-size:16px; border-radius:30px; cursor:pointer; transition:.3s; background:linear-gradient(135deg,#0066cc,#3498db); letter-spacing:3px;}
.contact-form button:hover{box-shadow:0 12px 26px rgba(0,102,204,.3); transform:translateY(-3px);}
.contact-side{flex:1; min-width:0; display:flex; flex-direction:column; gap:24px;}
.contact-qr{background:#fff; border-radius:18px; padding:28px; text-align:center; box-shadow:0 18px 40px rgba(11,37,69,.08);}
.contact-qr img{width:180px; border-radius:12px; border:1px solid #e5ecf5;}
.contact-qr h3{font-size:18px; color:#0b2545; margin-top:14px; font-weight:bold;}
.contact-qr p{font-size:13px; color:#999; margin-top:6px;}
.contact-promise{background:linear-gradient(135deg,#0b2545,#0066cc); border-radius:18px; padding:28px; color:#fff;}
.contact-promise h3{font-size:19px; font-weight:bold; margin-bottom:16px; padding-left:12px; border-left:4px solid #fff;}
.contact-promise ul li{margin-top:12px; font-size:14px; color:rgba(255,255,255,.92);}
.contact-promise ul li i{color:#8ec5ff; margin-right:8px;}

/* 常见问题 */
.contact-faq{padding:70px 0; background:#fff;}
.faq-list{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.faq-item{background:#f7fbff; border:1px solid #eef4fb; border-radius:14px; padding:26px 24px;}
.faq-item h3{font-size:16px; color:#0b2545; font-weight:bold;}
.faq-item h3 i{color:#0066cc; margin-right:8px;}
.faq-item p{font-size:14px; color:#666; line-height:1.9; margin-top:10px;}

@media(max-width:1200px){
  .contact-cards{grid-template-columns:repeat(2,1fr);}
  .contact-main article{flex-direction:column;}
  .contact-side{width:100%;}
}
@media(max-width:767px){
  .contact{padding:32px 0 6px;}
  .contact-cards{grid-template-columns:1fr; gap:12px;}
  .contact-main{padding:30px 0 32px;}
  .contact-form{padding:22px 16px;}
  .faq-list{grid-template-columns:1fr; gap:12px;}
  .contact-faq{padding:32px 0;}
}

.contact-main article:after{display:none;}