@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", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
}

/* 背景视觉效果容器 - 流星特效背景 */
.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;
}

.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);
}

/* 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: 0 auto;
    height: min(152px, calc(152 / 1414 * 100vw));
    background: url("/assets/design/ContactUs/info/bg.png");
    background-size: contain;
    display: flex;
    align-items: center;
    justify-items: center;
}

.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: min(-50px, calc(-50 / 1414 * 100vw));
    top: min(379px, calc(379 / 1414 * 100vw));
}

.contact-left-items .item-3 {
    left: min(-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(-22px, calc(-22 / 1414 * 100vw));
    top: min(240px, calc(240 / 1414 * 100vw));
}

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

.contact-right-items .item-3 {
    right: min(15px, calc(15 / 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(80px, calc(80 / 1414 * 100vw)) 0 0;
}

.expert-main {
    background: url('/assets/design/ContactUs/recruit/bg.png');
    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(773px, calc(773 / 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));
}

.expert-recruit-bg {
    position: absolute;
    top: max(-120px, calc(-120 / 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;
}

.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;
}

.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)));
}

@media (max-width: 768px) {
    

    .contact-label {
        font-size: 16px;
    }

    .contact-value {
        font-size: 14px;
    }

    .hero-title {
        width: 90%;
    }

    .hero-title h1 {
        font-size: 28px;
    }

    .hero-title p {
        font-size: 16px;
    }

    .expert-recruit-bg {
        display: none;
    }

    .expert-section {
        margin-bottom: 60px;
    }

    .expert-card {
        height: auto;
        min-height: 263px;
    }

    .expert-desc {
        padding: 30px 40px;
        font-size: 16px;
    }

    .recruit-contact {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto 30px;
    }

    .recruit-grid {
        margin-top: 30px;
        grid-template-columns: 1fr;
    }
}