/* 设置页面整体高度 */
html, body {
    height: 100%;  /* 确保页面的高度占满整个视口 */
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    transition: 0.4s;
}

/* 顶部导航 */
nav {
    display: block;
    width: 100%;
    height: 55px;
    background-color: rgba(2, 28, 6, 0.8);
}

nav ul {
    height: 100%;
    margin-left: 5%;
    list-style-type: none; /* 去掉默认的列表样式 */
}

nav ul li {
    position: relative;
    float: left;
}

nav ul li a {
    display: block;
    height: 100%;
    padding: 0 22px;
    line-height: 55px;
    text-align: center;
    color: #609b5a;
    font-family: Arial, sans-serif; /* 统一字体 */
    font-size: 20px; /* 字体大小为 20px */
    text-decoration: none; /* 去掉链接下划线 */
}

nav ul li a:hover {
    background-color: #8dda64; /* hover 背景颜色 */
    color: #000;
}

/* 下拉菜单的样式 */
nav ul li.dropdown {
    position: relative;
    display: inline-block;
}

nav ul li .dropbtn {
    background-color: transparent; /* 去掉背景色，和其他菜单项一致 */
    color: #609b5a; /* 与其他菜单项颜色一致 */
    padding: 0 22px; /* 与其他菜单项的左右间距一致 */
    line-height: 55px; /* 与其他菜单项的行高一致 */
    font-family: Arial, sans-serif; /* 统一字体 */
    font-size: 20px; /* 字体大小为 20px */
    border: none;
    cursor: pointer;
    display: block;
    text-align: center;
}

nav ul li .dropbtn:hover {
    background-color: #8dda64; /* hover 背景颜色 */
    color: #000;
}

/* 下拉菜单的样式 */
nav ul li .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(96, 155, 90, 0.65); /* 设置背景色 */
    width: 100%; /* 使下拉菜单宽度与按钮一致 */
    box-sizing: border-box; /* 包含内边距和边框 */
    z-index: 1;
    padding: 0; /* 移除上下内边距，保证高度为 30px */
}

/* 下拉菜单项的样式 */
nav ul li .dropdown-content a {
    color: black;
    padding: 0 16px; /* 左右内边距保持一致，移除上下内边距 */
    line-height: 40px; /* 使菜单项内容垂直居中 */
    text-decoration: none;
    display: block;
    font-family: Arial, sans-serif; /* 统一字体 */
    font-size: 20px; /* 字体大小为 20px */
    height: 40px; /* 每个下拉菜单项的高度设置为 30px */
}

/* hover 状态下的样式 */
nav ul li .dropdown-content a:hover {
    background-color: #ddd; /* 悬停时背景颜色 */
}

/* 当鼠标悬停时显示下拉菜单 */
nav ul li.dropdown:hover .dropdown-content {
    display: block;
}
/* 底部 */
footer {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    background-color: rgba(2, 28, 6, 0.8);
    margin-top: auto;  /* 确保footer总是位于页面底部 */
}

footer p {
    text-align: center;
	color: #609b5a;
}

footer a {
    color: #000;
}

footer a:hover {
    text-decoration: underline;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

footer {
    margin-top: auto;  /* 使footer总是位于页面底部 */
}

/* 主要内容区：左中右布局 */
.main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px auto;
    width: 80%;
    flex-grow: 1; /* 确保内容区占据剩余的高度 */
}

.left-image, .right-image {
    width: 25%;
    display: flex;
    justify-content: center;
}

.left-image img, .right-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 登录模块 */
.login-module {
    width: 35%;
    height: auto;
    padding: 20px;
    background-color: rgba(100, 194, 96, 0.83);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-module h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-module input {
    width: 97%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgb(116, 143, 113);
    font-size: 16px;
    background-color: rgba(195, 246, 185, 0.89);
}

.login-module .submit-btn {
    text-align: center;
}

.login-module .submit-btn input {
    background-color: rgba(2, 28, 6, 0.8);
    color: #5eb256;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}

.login-module .submit-btn input:hover {
    background-color: rgba(2, 28, 6, 0.8);
}


.register-module {
    width: 35%;
    height: auto;
    padding: 20px;
    background-color: rgba(100, 194, 96, 0.83);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* 居中显示 */
}

.register-module h2 {
    text-align: center;
    margin-bottom: 20px;
}

.register-module input, .register-module select {
    width: 97%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgb(116, 143, 113);
    font-size: 16px;
    background-color: rgba(195, 246, 185, 0.89);
}

.register-module label {
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.register-module .submit-btn {
    text-align: center;
}

.register-module .submit-btn input {
    background-color: rgba(2, 28, 6, 0.8);
    color: #5eb256;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}

.register-module .submit-btn input:hover {
    background-color: rgba(2, 28, 6, 0.8);
}