/* 联系我们开始 */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}

.contact-pic {
    background-image: url('../img/contact-pic.webp');
    background-repeat: no-repeat;
    background-size: cover; /* 确保背景图片覆盖整个容器 */
    background-position: center;
    width: 100vw; /* 使用视口宽度，确保全屏 */
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    box-sizing: border-box; /* 确保padding和border不会增加额外宽度 */
}

@media (max-width: 768px) {
    .contact-pic {
        height: auto;
        min-height: 150px; /*确保移动端内容不足时 支撑图片高度，显示图片*/
    }
}

.contact-corporate {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 77%;
    margin:5rem 0 5rem;
}

.contact-title {
    text-align: left;
    color: #2a5ca8;
    width: 100%;
    margin-bottom: 1em;
    font-size: 38px;
}

.text-section {
    text-align: left;
    width: 24%;
    min-width: 200px;
    word-wrap: break-word;
}

.text-section span {
    color: #2a5ca8;
    font-size: 24px;
}

.rich-text {
    line-height: 1.6;
    max-width: 100%;
    font-size: 24px;
}

.map-container {
    position: relative;
    width: calc(50% + 50px);
    max-width: 850px;
    margin-left: -100px;
    transform: translateX(50px);
}

.map-bg {
    background-image: url('../img/contact-bg.png');
    background-size: contain;
    background-position: center;
    width: 99%;
    height: 580px;
}

/*.office {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    align-items: flex-start;*/
/*    width: 100%;*/
/*    max-width: 100%;*/
/*    margin: -190px auto 1.5em;*/
/*    gap: 66px;*/
/*    transform: translateX(-64px);*/
/*}*/

.office {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    justify-content: center;
    gap: 1.5rem;
    max-width: calc(150px * 5 + 1.5rem * 4);  /* 修正间隙计算 */
    margin: -361px auto 1.5em;  /* 上移增加负值 */
    position: relative;
    left: -65px;  /* 代替translateX */
}

.office div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: auto;
    margin-bottom: 1.5em;
}

.office img {
    width: 7.8em;
    height: 7.8em;
    border-radius: 50%;
    object-fit: cover;
    gap: 0.5em;
}

.office span {
    font-weight: bold;
    margin: 0.5em 0;
}

.office small {
    white-space: normal;
}

/* 联系信息 开始 */

.contact-info {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, minmax(600px, 650px));
    justify-content: center;
    gap: 35px;
}

.info-item {
    position: relative;
    width: 650px;
    min-height: 350px;
    border: 2px solid #add7f9;
    transition: all 0.3s ease;
    padding: 2.5rem 2rem;
    box-sizing: border-box;
}

/*.info-item {*/
/*    position: relative;*/
/*    flex: 0 0 calc(50% - 17.5px);*/
/*    max-width: 650px;*/
/*    min-height: 350px;*/
/*    border: 2px solid #add7f9;*/
/*    transition: all 0.3s ease;*/
/*    display: flex;*/
/*    padding: 2.5rem 2rem;*/
/*    align-items: center;*/
/*    box-sizing: border-box;*/
/*}*/

.info-item:hover {
    border-color: #339cef;
}

.contact-content {
    width: 100%;
    text-align: left;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    word-wrap: break-word;
}

.branch-office {
    font-size: 24px;
    color: #339cef;
    margin-bottom: 1.875rem;
}

.c-title {
    font-size: clamp(1.2rem, 1.5vw, 2.5rem);
    margin-bottom: 3.4375rem;
    font-weight: bold;
    line-height: 1;
}

.contact-content a {
    color: #333;
    text-decoration: none;
    line-height: 1.4;
}


@media (max-width: 1024px) {
    .contact-corporate {
        flex-direction: column;
    }
    .text-section {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2em;
    }
    .map-container {
        width: 100%;
        margin-left: -15%;
        height: auto;
    }
    .map-bg {
        background-size: cover;
        height: auto;
        min-height: 200px;
    }
    .office {
        max-width: 45%;
    }
}

@media (max-width: 768px) {
    .contact-title{
        font-size: 30px;
        line-height: 30px;
    }
    .office {
        max-width: 100% !important;
        margin: 50px auto;
        transform: none !important;
    }

    .map-container {
        margin-left: 0;
        transform: none !important;
    }

    .contact-info {
        gap: 20px;
        padding: 1rem;
    }

    .info-item {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: 320px;
        padding: 2rem;
    }

    .c-title {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 480px) {
    .office {
        width: 100%;
        box-sizing: border-box;
        padding: 0 5vw; /* 视口百分比边距 */

        /* 网格 */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18vw; /* 视口百分比间隙 */
    }

    .office div {
        width: 100%;
        margin: 0 0 1vw;
    }

    .info-item {
        padding: 1.5rem;
        min-height: 280px;
    }

    .branch-office {
        margin-bottom: 1.25rem;
    }

    .c-title {
        margin-bottom: 2rem;
    }
}
/* 联系我们结束 */