body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container{
	max-width:1400px;
	margin:auto;
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #fff;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    z-index: 1000; /* 确保导航栏在其他内容之上 */

}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* 允许子元素换行 */

}

.navbar-logo {
    color: black;
    text-decoration: none;
    font-weight: bold;
    flex: 1; /* 让logo占据剩余空间（在桌面端） */
    text-align: left; /* 在桌面端左对齐 */
	display: flex;
}

.navbar-logo img{
	width: 70px;
	height:auto;
}

.navbar-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    flex: 2; /* 让菜单占据更多空间（在桌面端） */
    justify-content: center; /* 在桌面端居中对齐菜单 */
}

.navbar-menu li {
    margin: 0 10px; /* 调整菜单项之间的间距 */
}

.navbar-menu a {
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.navbar-menu a:hover {
    background-color: #575757;
	color:white;
    border-radius: 5px;
}

.navbar-buttons {
    display: flex;
    gap: 10px;
    flex: 1; /* 让按钮区域占据剩余空间（在桌面端） */
    justify-content: flex-end; /* 在桌面端将按钮区域对齐到右侧 */
}

.navbar-button {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    background-color: #e6322e;
    border-radius: 5px;
}

.navbar-button:hover {
    background-color: #bf1d1d;
}

.content {
    padding: 20px;
}

/* 手机端自适应样式 */
@media (max-width: 768px) {
	.container {
		width: 100%;
		max-width: 100%; /* 移除最大宽度限制，以适应任何屏幕尺寸 */
		margin: 0 auto; /* 虽然这里设置了自动外边距，但由于宽度是100%，所以不会有水平居中效果 */
	}
	
	.navbar{
		padding:30px 0;
	}
    .navbar-container {
        flex-direction: column; /* 垂直布局 */
        align-items: flex-start; /* 顶部对齐 */
    }

    .navbar-logo {
        flex: none; /* logo不再占据剩余空间 */
        margin-bottom: 10px; /* 添加底部间距 */
        text-align: center; /* 在手机端居中对齐 */
        width: 100%; /* 让logo占据整行宽度 */
    }

    .navbar-menu {
        flex: none; /* 菜单不再占据更多空间 */
        width: 100%; /* 让菜单占据整行宽度 */
        justify-content: center; /* 在手机端居中对齐菜单项 */
    }

    .navbar-menu li {
        margin: 5px 0; /* 调整菜单项之间的垂直间距 */
        width: 100%; /* 让每个菜单项占据整行宽度 */
        text-align: center; /* 菜单项内容居中对齐 */
    }

    .navbar-buttons {
        flex: none; /* 按钮区域不再占据剩余空间 */
        width: 100%; /* 让按钮区域占据整行宽度 */
        justify-content: center; /* 在手机端居中对齐按钮 */
        margin-top: 10px; /* 添加顶部间距 */
    }

	.content {
		padding: 0px;
	}
	
}

/* 图片模块样式 */
.image-module {
    text-align: center; /* 使内容（在这里是图片）居中 */
    margin: auto; /* 添加一些顶部和底部的外边距，并水平居中 */
    max-width: 1400px; /* 限制模块的最大宽度 */
    width: 100%; /* 使模块在较小的屏幕上占据全部可用宽度 */
}
 
.image-module img {
    max-width: 100%; /* 图片的最大宽度为模块的100% */
    height: auto; /* 图片的高度自动调整以保持宽高比 */
    display: block; /* 移除图片底部的默认间隙 */
    margin: 0 auto; /* 水平居中图片（尽管在text-align: center;的父元素中已经居中） */
}
footer {
    background-color: #f5f5f5; /* 设置背景颜色 */
    padding: 20px 0; /* 添加内边距 */
    text-align: center; /* 文本居中 */
}
 
.footer-top {
    margin-bottom: 15px; /* 添加底部外边距以分隔上下两部分 */
}
 
.footer-menu {
    list-style: none; /* 移除列表项前的默认标记 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中菜单项 */
}
 
.footer-menu li {
    margin: 0 10px; /* 添加列表项之间的间距 */
}
 
.footer-menu a {
    text-decoration: none; /* 移除链接的下划线 */
    color: #333; /* 设置链接文字颜色 */
}
 
.footer-menu a:hover {
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
}
 
.footer-bottom {
    font-size: 14px; /* 设置文字大小 */
    color: #666; /* 设置文字颜色 */
}
 
.copyright, .address {
    margin: 0; /* 移除默认的外边距 */
}

@media (min-width:1100px){
	.footer-menu li {
		margin: 0 40px;
	}
}

/* 表单样式 */
.info-form {
    display: flex;
    flex-direction: column; /* 垂直排列表单项 */
}
 
/* 表单项样式 */
.form-group {
    margin-bottom: 15px; /* 每个表单项之间的间距 */
}
 
/* 标签和输入字段样式 */
label {
    font-size: 16px; /* 标签文字大小 */
    margin-bottom: 5px; /* 标签和输入字段之间的间距 */
}
 
input {
    width: 100%; /* 输入字段宽度占满容器 */
    padding: 10px; /* 内边距 */
    font-size: 16px; /* 输入文字大小 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box; /* 包括内边距和边框在内计算元素的总宽度和高度 */
}
 
/* 提交按钮样式 */
button {
    padding: 10px; /* 内边距 */
    font-size: 16px; /* 文字大小 */
    border: none; /* 移除边框 */
    border-radius: 4px; /* 圆角 */
    background-color: #007bff; /* 背景颜色 */
    color: #fff; /* 文字颜色 */
    cursor: pointer; /* 鼠标悬停时显示手指图标 */
    transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
}
 
button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景颜色变化 */
}
 
/* 响应式设计 */
@media (max-width: 480px) {
    .container {
        padding: 15px; /* 较小屏幕上的内边距调整 */
    }
 
    input, button {
        font-size: 14px; /* 较小屏幕上的文字大小调整 */
        padding: 8px; /* 较小屏幕上的内边距调整 */
    }
}
.form-container {
	max-width:1420px;
	width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.7);
    background-image: url("../img/shouye7.jpg");
    background-size: cover;
    background-position: center;
    padding-bottom: 20px;
}
 
.input-field {
    width: 300px;
    height: 60px;
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 
.submit-button {
    width: 243px;
    height: 60px;
    background-color: #e6322e; /* 绿色背景 */
    color: white; /* 白色文字 */
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* 平滑的过渡效果 */
}
 
.submit-button:hover {
    background-color: #bf1d1d; /* 鼠标悬停时改变背景颜色 */
}
@media (max-width:1430px){
	.form-container{
		max-width:100%;
	}
}