@import url('https://fonts.googleapis.com/css2?family=PingFang+SC:wght@300;400;500;600&display=swap');

:root {
    --primary: #003CF1;
    --primary-light: #0A82FF;
    --text-main: #FFFFFF;
    --text-sub: #A2A2A2;
    --bg-dark: #000000;
}

* {
    box-sizing: border-box;
}

.page-scale {
    width: min(1414px, 100vw);
    margin: 0 auto;
    padding: min(95px, calc(95 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw)) min(80px, calc(80 / 1414 * 100vw));
    position: relative;
}
body.contactus-page {
    margin: 0;
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: "PingFang SC Regular", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
}
.expert-info{
    text-align: center;
}
/* 背景视觉效果容器 - 流星特效背景 */
.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.background-visuals.meteor-background {
    background: transparent;
}

.background-visuals .gradient {
    position: absolute;
    width: min(1200px, calc(1200 / 1414 * 100vw));
    height: min(520px, calc(520 / 1414 * 100vw));
    border-radius: 999px;
    filter: blur(min(160px, calc(160 / 1414 * 100vw)));
    opacity: 0.6;
}

.background-visuals .gradient-1 {
    left: min(-260px, calc(-260 / 1414 * 100vw));
    top: min(1200px, calc(1200 / 1414 * 100vw));
    background: radial-gradient(circle, rgba(0, 59, 255, 0.26) 0%, rgba(0, 0, 0, 0) 70%);
}

#meteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.background-visuals .gradient-2 {
    right: min(-220px, calc(-220 / 1414 * 100vw));
    top: min(1400px, calc(1400 / 1414 * 100vw));
    background: radial-gradient(circle, rgba(0, 82, 255, 0.77) 0%, rgba(0, 0, 0, 0) 70%);
}

.contact-lines {
    position: absolute;
    left: 50%;
    top: min(1420px, calc(1420 / 1414 * 100vw));
    transform: translateX(-50%);
    width: min(1118px, calc(1118 / 1414 * 100vw));
    height: min(640px, calc(640 / 1414 * 100vw));
    opacity: 0.9;
}

.contact-lines img {
    position: absolute;
    left: 0;
    top: 0;
}

section {
    position: relative;
    z-index: 1;
}


.section-header {
    text-align: center;
    margin-bottom: min(35px, calc(35 / 1414 * 100vw));
}

.section-title {
    /*margin: 0;*/
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 400;
    background-clip: text;
    font-family: "PingFang SC Regular";
    line-height: 1;
    margin-bottom: min(11px, calc(11 / 1414 * 100vw));
}

.section-subtitle {
    /*margin: min(6px, calc(6 / 1414 * 100vw)) 0 0;*/
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-sub);
    font-family: "PingFang SC Semibold";
}

/* Hero */
.contact-hero {
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
    position: relative;
}

.contact-hero .hero-bg {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.hero-decor {
    position: absolute;
}

.hero-decor.decor-left {
    width: min(505px, calc(505 / 1414 * 100vw));
    height: min(299px, calc(299 / 1414 * 100vw));
    left: 0;
    top: min(427px, calc(427 / 1414 * 100vw));
}

.hero-decor.decor-right {
    width: min(282px, calc(282 / 1414 * 100vw));
    height: min(167px, calc(167 / 1414 * 100vw));
    right: 0;
    top: min(888px, calc(888 / 1414 * 100vw));
}

.hero-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(517px, calc(517 / 1414 * 100vw));
    text-align: center;
}

.hero-title h1 {
    margin: 0;
    font-size: min(45px, calc(45 / 1414 * 100vw));
    font-weight: 600;
    background: linear-gradient(180deg, #1F80FF 0%, #FFFFFF 66.8%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-title p {
    margin: min(10px, calc(10 / 1414 * 100vw)) 0 0;
    font-size: min(25px, calc(25 / 1414 * 100vw));
    font-weight: 600;
    background: linear-gradient(180deg, rgba(31, 128, 255, 1) 10%, rgba(255, 255, 255, 1) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Contact Info */
.contact-join {
    width: 100%;
    margin: min(60px, calc(60 / 1414 * 100vw)) auto min(40px, calc(40 / 1414 * 100vw));
    position: relative;
}

.contact-info-container {
    width: min(934px, calc(934 / 1414 * 100vw));
    margin: 0 auto;
    position: relative;
}

.section-info-main {
    width: min(1180px, calc(1180 / 1414 * 100vw));
    margin: max(-100px, calc(-100 / 1414 * 100vw)) auto 0;
    height: min(152px, calc(152 / 1414 * 100vw));
    background: transparent;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-items: center;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    position: relative;
    transition: all 0.3s ease;
}

/* 渐变边框效果 */
.section-info-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    padding: min(1px, calc(1 / 1414 * 100vw));
    /* background: linear-gradient(180deg, #0A82FF 0%, #064E99 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; */
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(31, 128, 255, 0.7);
    pointer-events: none;
    z-index: 1;
}

/* 鼠标停留时显示背景 - 背景样式已移至 cdn_assets.html */
.section-info-main:hover {
    /* background在cdn_assets.html中定义 */
    background-size: 100% auto;
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

.section-info-main .info-main-font {
    margin: 0 auto;
}

.section-info-main .info-main-font div {
    font-size: min(20px, calc(20 / 1414 * 100vw));
}
/* 标题区域 */
.contact-section-title {
    position: absolute;
    left: 50%;
    top: min(84px, calc(84 / 1414 * 100vw));
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.main-itme1 {
    margin-bottom: min(20px, calc(20 / 1414 * 100vw));
}

.contact-section-title h2 {
    margin: 0;
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 400;
    color: #FFFFFF;
}

.contact-section-title p {
    margin: min(6px, calc(6 / 1414 * 100vw)) 0 0;
    font-size: min(22px, calc(22 / 1414 * 100vw));
    font-weight: 400;
    color: #A2A2A2;
}

/* 背景和内容容器 */
.contact-info-wrapper {
    position: relative;
    width: min(934px, calc(934 / 1414 * 100vw));
    height: min(785px, calc(785 / 1414 * 100vw));
    margin: 0 auto;
}

.contact-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: min(934px, calc(934 / 1414 * 100vw));
    height: min(785px, calc(785 / 1414 * 100vw));
    object-fit: contain;
}

/* 中间icon和文字 */
.contact-center-icon {
    position: absolute;
    left: min(414px, calc(414 / 1414 * 100vw));
    top: min(334px, calc(334 / 1414 * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(8px, calc(8 / 1414 * 100vw));
}

.contact-center-icon img {
    width: min(67px, calc(67 / 1414 * 100vw));
    height: min(67px, calc(67 / 1414 * 100vw));
}

.contact-center-icon span {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: #FFFFFF;
}

/* 左侧联系信息 */
.contact-left-items {
    position: absolute;
    left: 0;
    top: 0;
    width: min(300px, calc(300 / 1414 * 100vw));
}

.contact-left-items .contact-item {
    position: absolute;
}

.contact-left-items .item-1 {
    left: min(17px, calc(17 / 1414 * 100vw));
    top: min(240px, calc(240 / 1414 * 100vw));
}

.contact-left-items .item-2 {
    left: max(-50px, calc(-50 / 1414 * 100vw));
    top: min(379px, calc(379 / 1414 * 100vw));
}

.contact-left-items .item-3 {
    left: max(-5px, calc(-5 / 1414 * 100vw));
    top: min(519px, calc(519 / 1414 * 100vw));
}

/* 右侧联系信息 */
.contact-right-items {
    position: absolute;
    right: 0;
    top: 0;
    width: min(300px, calc(300 / 1414 * 100vw));
    text-align: right;
}

.contact-right-items .contact-item {
    position: absolute;
    right: 0;
}

.contact-right-items .item-1 {
    right: max(-122px, calc(-122 / 1414 * 100vw));
    top: min(240px, calc(240 / 1414 * 100vw));
}

.contact-right-items .item-2 {
    right: max(-146px, calc(-146 / 1414 * 100vw));
    top: min(379px, calc(379 / 1414 * 100vw));
}

.contact-right-items .item-3 {
    right: max(-113px, calc(-113 / 1414 * 100vw));
    top: min(518px, calc(518 / 1414 * 100vw));
}

/* 联系信息文字样式 */
.contact-left-items .contact-item,
.contact-right-items .contact-item {
    display: block;
    text-align: left;
}

.contact-item .contact-label {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.4;
    margin-bottom: min(20px, calc(20 / 1414 * 100vw));
}

.contact-item .contact-value {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.6;
    margin-top: 0;
}

.contact-item .contact-phone {
    margin-left: 0;
}

.contact-right-items {
    text-align: left;
}

.contact-right-items .contact-value {
    text-align: left;
}

/* Expert & Recruit Combined Section */
.contact-expert-recruit {
    position: relative;
    width: min(1414px, 100vw);
    margin: 0 auto;
    padding: min(120px, calc(120 / 1414 * 100vw)) 0 0;
}

.expert-main {
    /* 背景样式已移至 cdn_assets.html */
    background-size: contain;
    width: min(1119px, calc(1119 / 1414 * 100vw));
    height: min(463px, calc(463 / 1414 * 100vw));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: max(-80px, calc(-80 / 1414 * 100vw));
}

.expert-font {
    width: min(783px, calc(783 / 1414 * 100vw));
    height: min(263px, calc(263 / 1414 * 100vw));
    padding-top: min(40px, calc(40 / 1414 * 100vw));
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-family: "PingFang SC Semibold";
}

.expert-recruit-bg {
    position: absolute;
    top: max(-80px, calc(-80 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: min(1414px, 100vw);
    z-index: 0;
}

.down-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.expert-section,
.recruit-section {
    position: relative;
    z-index: 1;
}

/* Expert */
.expert-section {
    position: relative;
}

.expert-card {
    position: relative;
    width: min(919px, calc(919 / 1414 * 100vw));
    height: min(263px, calc(263 / 1414 * 100vw));
    margin: 0 auto min(40px, calc(40 / 1414 * 100vw));
    border-radius: min(7px, calc(7 / 1414 * 100vw));
    overflow: hidden;
}

.expert-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 60, 241, 0.32);
    border: min(2px, calc(2 / 1414 * 100vw)) solid #1F80FF;
    filter: blur(min(50px, calc(50 / 1414 * 100vw)));
}

.expert-desc {
    position: relative;
    margin: 0;
    padding: min(46px, calc(46 / 1414 * 100vw)) min(73px, calc(73 / 1414 * 100vw)) 0;
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: min(0.4px, calc(0.4 / 1414 * 100vw));
}

.expert-contact {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(18px, calc(18 / 1414 * 100vw));
    margin-top: min(26px, calc(26 / 1414 * 100vw));
}

.expert-contact .contact-icons {
    width: min(54px, calc(54 / 1414 * 100vw));
    height: min(54px, calc(54 / 1414 * 100vw));
    border-radius: 50%;
    border: min(1px, calc(1 / 1414 * 100vw)) solid #002BFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expert-contact .contact-icons img {
    width: min(32px, calc(32 / 1414 * 100vw));
    height: min(32px, calc(32 / 1414 * 100vw));
}

.expert-contact .contact-names {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    line-height: 1.6;
}

.expert-contact .contact-arrow {
    width: min(18px, calc(18 / 1414 * 100vw));
    height: min(18px, calc(18 / 1414 * 100vw));
}

/* Recruit */
.recruit-section {
    width: min(1130px, calc(1130 / 1414 * 100vw));
    margin: 0 auto;
    position: relative;
}

.recruit-contact {
    position: absolute;
    left: min(407px, calc(407 / 1414 * 100vw));
    top: min(125px, calc(125 / 1414 * 100vw));
    width: min(319px, calc(319 / 1414 * 100vw));
    height: min(79px, calc(79 / 1414 * 100vw));
}

.recruit-contact-bg {
    position: absolute;
    inset: 0;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid #002BFF;
    background: radial-gradient(ellipse 155.27% 239.57% at 3.01% -18.86%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
}

.recruit-contact-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: min(12px, calc(12 / 1414 * 100vw));
    padding: min(26px, calc(26 / 1414 * 100vw)) min(35px, calc(35 / 1414 * 100vw));
    font-size: min(19px, calc(19 / 1414 * 100vw));
    font-weight: 400;
    transition: transform 0.3s ease;
}

.recruit-contact-inner:hover {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

/* 鼠标停留时背景图片也一起动 */
.recruit-contact:hover .recruit-contact-bg {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw))) scale(1.02);
}

.recruit-contact-bg {
    transition: transform 0.3s ease;
}

.recruit-contact-inner img {
    width: min(24px, calc(24 / 1414 * 100vw));
    height: min(24px, calc(24 / 1414 * 100vw));
}

.recruit-grid {
    display: grid;
    grid-template-columns: repeat(2, min(540px, calc(540 / 1414 * 100vw)));
    grid-template-rows: repeat(2, min(210px, calc(210 / 1414 * 100vw)));
    gap: min(29px, calc(29 / 1414 * 100vw)) min(50px, calc(50 / 1414 * 100vw));
    margin-top: min(188px, calc(188 / 1414 * 100vw));
}

.job-card {
    position: relative;
    /*border-radius: 0;*/
    background-size: cover;
    background-position: center;
    padding: min(70px, calc(70 / 1414 * 100vw)) 0 0 min(68px, calc(68 / 1414 * 100vw));
    color: #FFFFFF;
    overflow: hidden;
    border: #064E99 solid 1px;
    border-radius: 10px;
}

/* 招聘卡片背景覆盖层 */
.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
    z-index: 1;
}

.job-card:hover::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.job-card > * {
    position: relative;
    z-index: 2;
}

.job-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    letter-spacing: min(0.4px, calc(0.4 / 1414 * 100vw));
}

.job-sub {
    margin-top: min(6px, calc(6 / 1414 * 100vw));
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-sub);
}

/* Footer glow */
.contact-footer-glow {
    width: 100%;
    height: min(530px, calc(530 / 1414 * 100vw));
    margin: min(80px, calc(80 / 1414 * 100vw)) auto min(40px, calc(40 / 1414 * 100vw));
    background: radial-gradient(ellipse 130% 107% at 50% 10%, rgba(0, 0, 0, 0) 37%, #003CF1 69%, #FFFFFF 100%);
    filter: blur(min(51px, calc(51 / 1414 * 100vw)));
}