/* 模块外层容器（移除滚动入场动画初始透明，不需要JS直接正常显示） */
.contact_wrap {
    width: 100%;
    padding: 80px 20px;
}

/* 内容最大宽度1400px居中，全站统一规范 */
.contact_container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* 顶部标题区域 */
.contact_head {
    text-align: center;
    margin-bottom: 60px;
}

.contact_head h2 {
    font-size: 48px;
    color: #ff5522;
    margin-bottom: 16px;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.contact_head h2:hover {
    transform: scale(1.03);
}

.contact_head p {
    font-size: 16px;
    color: #777;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* 主体左右分栏 */
.contact_body {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* 左侧插画区域 */
.contact_illust {
    width: 40%;
    display: flex;
    justify-content: center;
}

.contact_illust img {
    max-width: 90%;
    transition: transform 0.4s ease;
}

.contact_illust img:hover {
    transform: translateY(-8px) rotate(2deg);
}

/* 右侧联系方式列表 */
.contact_info {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 单个联系信息卡片 */
.contact_item {
    width: 100%;
    padding: 20px 24px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact_item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* SVG图标容器样式 */
.contact_item .icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding-top: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.contact_item:hover .icon {
    transform: scale(1.2);
}

/* 电话图标 */
.icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.574 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}
.contact_item:hover .icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ff5522' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.574 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}

/* Whatsapp图标 */
.icon-whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471.145-.56.34-.098.197-.39.739-.751 1.437-.144.294-.587.641-.731.791-.133.133-.272.142-.51.01a9.836 9.836 0 0 1-2.898-1.813c-1.016-.915-1.912-2.123-2.142-2.372-.026-.026-.107-.127-.107-.247 0-.12.067-.226.178-.304.196-.136.438-.352.659-.528.222-.177.302-.302.43-.603.128-.3.044-.559-.03-.707-.074-.149-.669-1.611-.915-2.206-.24-.584-.487-.505-.669-.512-.172-.006-.367-.009-.564-.009a1.037 1.037 0 0 0-.744.347c-.256.269-.975.955-.975 2.317 0 1.362.997 2.681 1.137 2.864.141.183 1.964 3 4.774 4.211.668.294 1.189.47 1.593.602.675.207 1.289.177 1.781.108.544-.075 1.706-.694 1.949-1.365.242-.67.242-1.24.17-1.364-.073-.124-.271-.198-.569-.347M12.001 2C6.479 2 2.001 6.478 2.001 12c0 2.025.632 3.892 1.708 5.464l-.951 3.482a.998.998 0 0 0 .982 1.23l3.731-.986A9.96 9.96 0 0 0 12.001 22c5.522 0 9.999-4.478 9.999-10S17.523 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}
.contact_item:hover .icon-whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ff5522' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471.145-.56.34-.098.197-.39.739-.751 1.437-.144.294-.587.641-.731.791-.133.133-.272.142-.51.01a9.836 9.836 0 0 1-2.898-1.813c-1.016-.915-1.912-2.123-2.142-2.372-.026-.026-.107-.127-.107-.247 0-.12.067-.226.178-.304.196-.136.438-.352.659-.528.222-.177.302-.302.43-.603.128-.3.044-.559-.03-.707-.074-.149-.669-1.611-.915-2.206-.24-.584-.487-.505-.669-.512-.172-.006-.367-.009-.564-.009a1.037 1.037 0 0 0-.744.347c-.256.269-.975.955-.975 2.317 0 1.362.997 2.681 1.137 2.864.141.183 1.964 3 4.774 4.211.668.294 1.189.47 1.593.602.675.207 1.289.177 1.781.108.544-.075 1.706-.694 1.949-1.365.242-.67.242-1.24.17-1.364-.073-.124-.271-.198-.569-.347M12.001 2C6.479 2 2.001 6.478 2.001 12c0 2.025.632 3.892 1.708 5.464l-.951 3.482a.998.998 0 0 0 .982 1.23l3.731-.986A9.96 9.96 0 0 0 12.001 22c5.522 0 9.999-4.478 9.999-10S17.523 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}

/* 邮箱图标 */
.icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
}
.contact_item:hover .icon-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ff5522' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
}

/* 地址图标 */
.icon-location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}
.contact_item:hover .icon-location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ff5522' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}

.contact_item .text {
    font-size: 17px;
    color: #444;
    line-height: 1.6;
    transition: color 0.3s ease;
}
.contact_item:hover .text {
    color: #ff5522;
}

/* 底部标语 */
.contact_foot {
    text-align: center;
    margin-top: 60px;
}
.contact_foot h3 {
    font-size: 42px;
    color: #ff5522;
    font-weight: 600;
    transition: all 0.3s ease;
}
.contact_foot h3:hover {
    letter-spacing: 2px;
    transform: scale(1.02);
}

/* 平板适配 */
@media screen and (max-width: 1024px) {
    .contact_wrap {
        padding: 60px 20px;
    }
    .contact_body {
        flex-direction: column;
        gap: 40px;
    }
    .contact_illust,
    .contact_info {
        width: 100%;
    }
    .contact_head h2 {
        font-size: 38px;
    }
    .contact_foot h3 {
        font-size: 34px;
    }
}

/* 手机移动端适配 */
@media screen and (max-width: 767px) {
    .contact_wrap {
        padding: 40px 16px;
    }
    .contact_head {
        margin-bottom: 40px;
    }
    .contact_head h2 {
        font-size: 30px;
    }
    .contact_head p {
        font-size: 15px;
    }
    .contact_item {
        padding: 16px 18px;
    }
    .contact_item .text {
        font-size: 15px;
    }
    .contact_foot {
        margin-top: 40px;
    }
    .contact_foot h3 {
        font-size: 26px;
    }
}