:root { --contact-navy: #06101c; --contact-panel: #0b2340; --contact-cyan: #00e8ff; --contact-blue: #5aa8dc; --contact-line: #3d7eae; --contact-text: rgba(255, 255, 255, .92); --contact-label: #c5ced8; --contact-input: #050d18; --contact-border: rgba(90, 168, 220, .55); }
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
.contact-page { width: 100%; min-height: calc(100vh - var(--header-height)); padding: 4.5rem 0 5rem; background: var(--contact-navy); box-sizing: border-box; }
.contact-page__inner { margin: 0 auto; width: 100%; max-width: 1440px; padding: 0 2.5rem; box-sizing: border-box; }
.contact-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: 3rem; align-items: start; }
.contact-page__info { min-width: 0; padding-top: .25rem; }
.contact-page__label { margin: 0 0 10px; font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--contact-blue); }
.contact-page__who-title { margin: 0 0 20px; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: #fff; letter-spacing: .02em; text-transform: uppercase; }
.contact-page__who-sub { margin: .55rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: #fff; letter-spacing: .01em; text-transform: uppercase; }
.contact-page__who-text { margin: .9rem 0 0; font-size: 1.125rem; font-weight: 100; line-height: 1.45; color: var(--contact-text); }
.contact-page__who-text p { margin: 0 0 .85rem; }
.contact-page__who-text p:last-child { margin-bottom: 0; }
.contact-page__divider { width: 100%; height: 1px; margin: 1.35rem 0 1.15rem; background: #3c6a8c; }
.contact-page__address-title { margin: 0 0 20px; font-size: 1.75rem; font-weight: 600; line-height: 1.3; color: var(--contact-blue); }
.contact-page__address-block { margin: 0 0 1rem; }
.contact-page__address-block:last-child { margin-bottom: 0; }
.contact-page__address-label { margin: 0 0 .2rem; font-size: 1.5rem; font-weight: 600; line-height: 1.35; color: #fff; }
.contact-page__address-text { margin: 0; font-size: 1.125rem; font-weight: 200; line-height: 1.45; color: var(--contact-text); }
.contact-page__social-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.contact-page__social-title { margin: 0; flex-shrink: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--contact-blue); }
.contact-page__social { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.contact-page__social a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--contact-border); border-radius: 4px; color: #fff; background: transparent; font-size: .875rem; text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.contact-page__social a:hover { border-color: var(--contact-cyan); color: var(--contact-cyan); background: rgba(0, 240, 255, .08); }
.contact-page__form-wrap { min-width: 0; }
.contact-page__card { padding: 4rem 2rem 4rem; border: 1px solid #088caa; border-radius: 16px; background: #0f335f; box-sizing: border-box; }
.contact-page__card-title { margin: 0 0 30px; text-align: center; font-size: 1.875rem; font-weight: 700; line-height: 1.3; color: #fff; }
.contact-page__card-desc { margin: .7rem auto 1.35rem; max-width: 34rem; text-align: center; font-size: .75rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.contact-page__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.contact-page__field { display: flex; flex-direction: column; min-width: 0; gap: .4rem; }
.contact-page__field--full { grid-column: 1 / -1; }
.contact-page__field label { font-size: .8125rem; font-weight: 400; line-height: 1.2; color: var(--contact-label); }
.contact-page__field input, .contact-page__field select, .contact-page__field textarea { width: 100%; height: 2.5rem; padding: 0 .85rem; border: 1px solid var(--contact-border); border-radius: 4px; background: var(--contact-input); color: #fff; font-size: .875rem; font-family: inherit; outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; }
.contact-page__field select { background-image: url("data:image/svg+xml,%3Csvg !string!!string!!string!!string!%3E%3Cpath !string!!string!/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.contact-page__field input::placeholder, .contact-page__field textarea::placeholder { color: #6b7280; }
.contact-page__field input:focus, .contact-page__field select:focus, .contact-page__field textarea:focus { border-color: var(--contact-cyan); }
.contact-page__field textarea { height: auto; min-height: 8.5rem; padding: .75rem .85rem; resize: vertical; }
.contact-page__submit { width: 100%; height: 2.85rem; border: none; border-radius: 4px; background: var(--contact-cyan); color: #061526; font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; transition: opacity .2s ease, box-shadow .2s ease; }
.contact-page__submit:hover { opacity: .92; box-shadow: 0 0 18px rgba(0, 240, 255, .35); }
.contact-page__submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-page__alert { margin-top: 1rem; }
.contact-submit { margin-top: 40px; }
.d-none { display: none; }
/* html 全局白色字体会被 layer 白底弹窗继承，这里强制可读色 */
.layui-layer.layui-layer-dialog { color: #333; }
.layui-layer.layui-layer-dialog .layui-layer-title { color: #333; }
.layui-layer.layui-layer-dialog .layui-layer-content { color: #333; }
.layui-layer.layui-layer-dialog .layui-layer-btn a { color: #333; }
.layui-layer.layui-layer-dialog .layui-layer-btn .layui-layer-btn0 { color: #fff; }
@media screen and (max-width:1200px) {
.contact-page__grid { gap: 2.5rem; }
.contact-page__card { padding: 2rem 1.75rem; }
}
@media screen and (max-width:991px) {
.contact-page { padding: 2.5rem 0 3.5rem; }
.contact-page__inner { padding: 0 1.25rem; }
.contact-page__grid { grid-template-columns: 1fr; gap: 2rem; }
.contact-page__info { max-width: none; }
}
@media screen and (max-width:576px) {
.contact-page { padding: 12% 0 14%; }
.contact-page__form-grid { grid-template-columns: 1fr; gap: 1rem; }
.contact-page__card { padding: 1.5rem 1.15rem; border-radius: 14px; }
.contact-page__divider { margin: 1.5rem 0; }
.contact-page__submit { height: 3rem; font-size: .9375rem; }
.contact-page__card-title{font-size: 24px;}
}