.contact-info-wrap{padding:72px 0 24px}
.contact-info__intro{max-width:720px;margin:-8px auto 36px;text-align:center;color:var(--color-muted);font-size:15px;line-height:1.8}
.contact-info__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.contact-info__list li{padding:32px 24px 28px;background:#fff;border:1px solid var(--color-line);border-radius:12px;box-shadow:0 10px 28px rgba(13,27,46,.06);transition:transform .3s,box-shadow .3s,border-color .3s}
.contact-info__list li:hover{transform:translateY(-4px);border-color:#d7e6f8;box-shadow:0 16px 36px rgba(26,112,218,.12)}
.contact-info__list i{display:block;width:52px;height:52px;margin-bottom:20px;border-radius:12px;background:rgba(26,112,218,.1);position:relative}
.contact-info__list i:before{content:'';position:absolute;inset:14px;background:var(--color-main);mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}
.contact-info__list li:nth-child(1) i:before{mask-image:var(--svg-phone);-webkit-mask-image:var(--svg-phone)}
.contact-info__list li:nth-child(2) i:before{mask-image:var(--svg-email);-webkit-mask-image:var(--svg-email)}
.contact-info__list li:nth-child(3) i:before{mask-image:var(--svg-location);-webkit-mask-image:var(--svg-location)}
.contact-info__list li:nth-child(4) i:before{mask-image:var(--svg-qq);-webkit-mask-image:var(--svg-qq)}
.contact-info__list h3{margin-bottom:10px;font-size:16px;font-weight:700;color:#1a1a1a}
.contact-info__list a,.contact-info__list p{color:#444;font-size:15px;line-height:1.7;word-break:break-all}
.contact-info__list a:hover{color:var(--color-main)}
.contact-body-wrap{padding:48px 0 72px;background:#f5f8fc}
.contact-body{display:grid;grid-template-columns:.92fr 1.08fr;gap:32px;align-items:stretch}
.contact-way,.contact-form-box{padding:40px 36px;background:#fff;border:1px solid var(--color-line);border-radius:12px;box-shadow:0 10px 28px rgba(13,27,46,.05)}
.contact-way .mod-title,.contact-form-box .mod-title{text-align:left;margin-bottom:18px}
.contact-way .mod-title h2:after,.contact-form-box .mod-title h2:after{margin-left:0}
.contact-way__intro,.contact-form-box__intro{margin-bottom:24px;color:var(--color-muted);font-size:14px;line-height:1.85}
.contact-way__list{margin-bottom:28px}
.contact-way__list li{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-line);font-size:15px;line-height:1.6}
.contact-way__list strong{color:#888;font-weight:500}
.contact-way__list a,.contact-way__list span{color:#333}
.contact-way__list a:hover{color:var(--color-main)}
.contact-way__qr{display:grid;grid-template-columns:108px 1fr;gap:18px;align-items:center;padding:18px;background:#f5f8fc;border-radius:10px}
.contact-way__qr img{width:108px;height:108px;display:block;background:#fff;border-radius:8px;padding:6px}
.contact-way__qr p{font-size:16px;font-weight:600;color:#222}
.contact-way__qr span{display:block;margin-top:8px;color:#888;font-size:13px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form input,.contact-form textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--color-line);border-radius:4px;background:#f7f9fc;font-size:14px}
.contact-form textarea{grid-column:1/-1;height:140px;padding:12px 14px}
.contact-form .btn{grid-column:1/-1;width:100%;height:46px}
@media (max-width:1280px){
.contact-info__list{gap:16px}
.contact-way,.contact-form-box{padding:32px 24px}
.contact-body{gap:24px}
}
@media (max-width:1024px){
.contact-info__list{grid-template-columns:repeat(2,1fr)}
.contact-body{grid-template-columns:1fr}
}
@media (max-width:768px){
.contact-info-wrap{padding:48px 0 8px}
.contact-body-wrap{padding:32px 0 48px}
.contact-info__intro{margin-bottom:24px;font-size:14px}
.contact-info__list{gap:12px}
.contact-info__list li{padding:24px 18px 20px}
.contact-way,.contact-form-box{padding:24px 18px}
.contact-form{grid-template-columns:1fr}
.contact-way__list li{grid-template-columns:72px 1fr}
.contact-way__qr{grid-template-columns:88px 1fr;gap:14px;padding:14px}
.contact-way__qr img{width:88px;height:88px}
}
@media (max-width:360px){
.contact-info__list{grid-template-columns:1fr}
.contact-info__list a,.contact-info__list p{font-size:14px}
}