/*  相对定位，宽度 ，高度 ，背景颜色  */
.he {
    position: relative;  
    width: 100%;  
    height: 600px;  
    background-color: #f8f8f8;  
}

/* 宽度，高度，背景图片填充方式*/
.back-g {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* 内容的外部容器，字体，居中，内边距，背景颜色，宽度，高度，相对定位，底部距离 */
.yep {
    font-family: Arial, sans-serif; 
    margin: 0 auto; 
    padding: 0;
    background-color: #e8f5e9; 
    width: 800px; 
    height: auto; 
    position: relative; 
    margin-bottom: 5%;
}

/* 联系内容的内部布局,flex布局,左右对齐，内边距 */
.containe {
    display: flex; 
    justify-content: space-between; 
    padding: 20px; 
}

/* 信息样式，内边距，圆角，阴影，动画名 */
.contact-info{
    padding: 20px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    animation-name: slideleft;
}

/* 信息标题，字体颜色，动画名称 ，持续时间，最后状态*/
.contact-info h2 {
    color:cadetblue; 
    animation-name: slideleft; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
}

/*信息段落, 段落间距，动画名称，持续时间，最后状态*/
.contact-info p {
    margin: 30px 0px; 
    animation-name: slideleft; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
}

/*定义动画关键帧*/
@keyframes slideleft {
    from { transform: translateX(-100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 表单，背景色，内边距，圆角，阴影，宽度*/
.contact-form {
    background-color: #fff; 
    padding: 20px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    width:500px;
}

/* 显示二维码，居中，上边距，动画名称，持续时间，最后状态， */
.qr-code {
    text-align: center; 
    font-weight:bold;
    margin-top: 20px; 
    animation-name: slideleft; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
}

/* 二维码图片，宽度，高度，动画名称，持续时间，最后状态 */
.qr-code img {
    width: 150px; 
    height: 150px; 
    animation-name: slideleft; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
}

/* 表单内部布局，flex，垂直排列 */
.contact-form form {
    display: flex; 
    flex-direction: column; 
}

/*表单标签，上边距 */
.contact-form label {
    margin-top: 10px; 
}

/* 输入框和文本域，内边距，上边距，边框颜色，圆角*/
.contact-form input[type="text"],
.contact-form textarea {
    padding: 10px; 
    margin-top: 5px; 
    border: 2px solid #ccc; 
    border-radius: 5px; 
}

/* 表单按钮，上边距，内边距，背景颜色，文字颜色，无边框，圆角，指针 */
.contact-form button {
    margin-top: 20px; 
    padding: 10px; 
    background-color:#e8f5e9; 
    color: black; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
}

/*表单按钮悬停时的样式 */
.contact-form button:hover {
    background-color:cadetblue; /* 悬停时背景颜色变深 */
    color:white;
}

/* 响应式设计 */
@media (max-width: 820px) {
    .yep {
        width: 100%; 
    }
    .containe {
        flex-direction: column; 
    }
    .contact-form, .contact-info {
        width: 100%; 
    }
    .qr-code img {
        width: 70px; 
        height: 70px; 
    }
    .he {
        height: 300px; 
    }
}