/* 设置全局样式 */ /* 设置整个页面的字体、边距、布局等样式 */ /* 新增基础响应式设置 */
:root { /* 定义根元素变量 */
    font-size: 16px; /* 基础字体大小 */
    --input-width: min(490px, 90vw); /* 输入框宽度变量 */
}

@media screen and (max-width: 768px) { /* 移动端媒体查询 */
    :root { /* 移动端根元素设置 */
        font-size: 14px; /* 减小字体大小 */
    }
    
    /* 移动端布局调整 */
    body { /* 页面主体 */
        flex-direction: column; /* 垂直排列 */
    }
    
    .container { /* 主容器 */
        flex-direction: row; /* 改为行排列(左右布局) */
        flex-wrap: nowrap; /* 不允许换行 */
        align-items: stretch; /* 关键修改：强制子元素等高 */
        min-height: 0; /* 重置最小高度 */
    }

    .nav-container { /* 导航容器 */
        background-image: url('../images/SJ2.JPG'); /* 背景图 */
        background-size: cover; /* 背景覆盖 */
        background-position: center; /* 背景居中 */
        flex: 0 0 20%; /* 固定20%宽度 */
        padding: 0; /* 无内边距 */
        box-sizing: border-box; /* 盒模型 */
        display: flex; /* 弹性布局 */
        flex-direction: column; /* 垂直排列 */
        justify-content: space-between; /* 两端对齐 */
        align-items: center; /* 居中对齐 */
        position: relative; /* 相对定位 */
        height: auto; /* 关键修改：移除固定高度 */
    }


    nav ul {
        width: 100%;
        padding-top: 26px; /* 添加顶部内边距确保整个列表下移 */
        margin: 0;
    }

    nav ul li { /* 导航项 */
        position: relative; /* 相对定位 */
        top: 0; /* 重置上偏移 */
        margin: 10px 0; /* 上下边距 */
        text-align: center; /* 文字居中 */
        transform: none; /* 取消Y轴偏移 */
        width: 100%; /* 全宽 */
        height: 25px; /* 固定高度 */
    }

 
    nav ul li:first-child {
        margin-top: 10px; /* 首项与顶部间距 */
    }



    nav ul li:first-child {
        margin-top: 0; /* 重置上边距，因为现在由ul的padding-top控制 */
    }
 
    nav ul li a { /* 导航链接 */
        text-decoration: none; /* 无下划线 */
        color: #999; /* 文字色 */
        padding: 0px; /* 内边距 */
        display: block; /* 块级显示 */
        box-sizing: border-box; /* 盒模型 */
        transition: all 0.3s ease; /* 过渡效果 */
        position: relative; /* 相对定位 */
        left: 0; /* 左偏移 */
        white-space: nowrap; /* 不换行 */
        text-align: center; /* 文字居中 */
        width: 100%; /* 全宽 */
        height: 25px; /* 固定高度 */
    }

 
    
    nav ul li a:hover {
        background-color: rgba(221, 221, 221, 0.5);
        color: #333;
        width: 100%;
        border-radius: 4px;
        padding: 0px 0px;
        /* 确保不影响布局 */
        position: relative;
        left: 0;
        transform: none;
        z-index: 1;
    }
    


    .header { /* 头部 */
        height: auto; /* 固定高度 */
        padding: 0px; /* 内边距 */
        background-image: url('../images/SJ1.JPG') !important; /* 背景图 */
        background-size: cover; /* 推荐：保持图片比例 */
        flex-shrink: 0; /* 防止头部被压缩 */
    }

    .header-buttons { /* 头部按钮区 */
        margin-top: 0px; /* 上边距 */
        transform: none; /* 取消变换 */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 居中对齐 */
        padding: 0px 0px; /* 内边距 */
    }
    
    .header-buttons button { /* 头部按钮 */
        margin: 3px; /* 外边距 */
        padding: 3px 3px; /* 内边距 */
        font-size: 10px; /* 字体大小 */
    }
    
    .content { /* 内容区 */
        flex: 0 0 80%; /* 占据80%宽度 */
        width: 80%; /* 明确宽度 */
        padding: 0; /* 无内边距 */
        background-image: url('../images/SJ3.JPG') !important; /* 背景图 */
        background-size: cover; /* 背景覆盖 */
        background-position: top; /* 从顶部开始 */
    }
    
    .text-area { /* 文本区 */
        padding: 0px; /* 内边距 */
        margin-top: 0px; /* 更精细控制 */
    }
    
    /* 模态框在移动端的调整 */
    .modal-content { /* 模态框内容 */
        width: 95%; /* 宽度 */
        margin: 5% auto; /* 外边距 */
        padding: 10px; /* 内边距 */
    }
    
    /* 表单输入框调整 */
    input[type="text"], /* 文本输入 */
    input[type="tel"], /* 电话输入 */
    input[type="password"], /* 密码输入 */
    input[type="email"], /* 邮箱输入 */
    select { /* 选择框 */
        width: 100%; /* 全宽 */
        box-sizing: border-box; /* 盒模型 */
    }
    
    /* 经销商注册表单调整 */
    #dealerRegisterForm fieldset { /* 表单字段集 */
        padding: 10px; /* 内边距 */
    }
    
    #dealerRegisterForm label { /* 表单标签 */
        display: block; /* 块级显示 */
        margin-top: 8px; /* 上边距 */
    }
    
    #dealerRegisterForm input, /* 表单输入 */
    #dealerRegisterForm select { /* 表单选择 */
        width: 100%; /* 全宽 */
    }
}

body { /* 页面主体 */
    font-family: Arial, sans-serif; /* 字体 */
    margin: 0; /* 外边距 */
    padding: 0; /* 内边距 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    min-height: 100vh; /* 最小高度 */
}

/* 设置头部区域的样式（PC端） */
.header { /* 头部 */
    background-image: url('../images/background_A.JPG'); /* 背景图 */
    background-size: 100% 100%; /* 背景大小 */
    background-position: left top; /* 背景位置 */
    padding: 10px; /* 内边距 */
    height: 210px; /* 固定高度 */
    overflow: hidden; /* 溢出隐藏 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
}

@media screen and (max-width: 768px) {
    .header {
        height: auto; /* 固定高度 */
        background-size: 100% auto; /* 宽度100%，高度自动 */
        background-position: top center; /* 顶部居中 */
        min-height: 66px; /* 设置最小高度 */
        position: relative; /* 添加相对定位 */
        background-repeat: no-repeat; /* 禁止重复 */
    }
    .header-buttons {
        margin-top: 0; /* 移除原有margin */
        position: absolute; /* 绝对定位 */
        bottom: 1px; /* 距离底部5px */
        right: 1px; /* 距离右侧5px */
        transform: none; /* 移除原有transform */
        padding: 3px 3px; /* 内边距 */
    }
}

/* 设置头部区域内按钮的样式 */
.header-buttons { /* 头部按钮区 */
    display: flex; /* 弹性布局 */
    justify-content: flex-end; /* 右对齐 */
    margin-top: 170px; /* 上边距 */
    padding: 0px 0px; /* 内边距 */
    transform: translateX(-17px); /* X轴偏移 */
}

.header-buttons button { /* 头部按钮 */
    background-color: #750101; /* 背景色 */
    color: white; /* 文字色 */
    border: 1px solid #707070; /* 边框 */
    padding: 3px 3px; /* 内边距 */
    font-size: 11px; /* 字体大小 */
    cursor: pointer; /* 指针样式 */
    border-radius: 5px; /* 圆角 */
    margin: 5px; /* 外边距 */
}

/* 悬停样式 */
.header-buttons button:hover { /* 头部按钮悬停 */
    background-color: #390202; /* 深色背景 */
}

/* 设置容器区域的样式 */
.container { /* 主容器 */
    display: flex; /* 弹性布局 */
    flex: 1; /* 填充剩余空间 */
    align-items: stretch; /* 关键修改：强制子元素等高 */
}
 
/* 设置导航容器区域的样式 */
.nav-container { /* 导航容器 */
    background-image: url('../images/background_B.JPG'); /* 背景图 */
    background-size: cover; /* 背景覆盖 */
    background-position: center; /* 背景居中 */
    flex: 0 0 20%; /* 固定20%宽度 */
    padding: 0; /* 无内边距 */
    box-sizing: border-box; /* 盒模型 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 居中对齐 */
    position: relative; /* 相对定位 */
    height: auto; /* 关键修改：移除固定高度 */
}

/* 设置导航菜单的样式 */
nav ul { /* 导航列表 */
    list-style-type: none; /* 无列表符号 */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
    width: 100%; /* 全宽 */
}
 
nav ul li { /* 导航项 */
    position: relative; /* 相对定位 */
    top: 0; /* 重置上偏移 */
    margin-bottom: 20px; /* 底部间距 */
    text-align: center; /* 文字居中 */
    width: 100%; /* 全宽 */
    transform: none; /* 取消Y轴偏移 */
    height: 25px; /* 固定高度 */
}
 
/* 设置导航链接的样式 */
nav ul li a { /* 导航链接 */
    text-decoration: none; /* 无下划线 */
    color: #999; /* 文字色 */
    padding: 0px; /* 内边距 */
    display: block; /* 块级显示 */
    width: 100%; /* 全宽 */
    height: 30px; /* 固定高度 */
    box-sizing: border-box; /* 盒模型 */
    transition: all 0.3s ease; /* 过渡效果 */
    position: relative; /* 相对定位 */
    left: 0; /* 左偏移 */
    white-space: nowrap; /* 不换行 */
    text-align: center; /* 文字居中 */
}

 

/* 设置导航链接导航悬停效果样式（PC端默认） */
@media screen and (min-width: 769px) {
    nav ul li a:hover {
        background-color: #ddd;
        border-radius: 0;
        width: 440%; /* PC端悬停宽度 */
        box-sizing: border-box; /* 盒模型 */
        left: -170%; /* PC端左偏移 */
        transform: translateX(0);/* 取消变换 */
        z-index: 10; /* 堆叠顺序 */
    }
}

/* 内容区（PC端默认） */
.content { /* 内容区 */
    background-image: url('../images/background_C.JPG'); /* 背景图 */
    background-size: cover; /* 背景覆盖 */
    background-position: center; /* 背景居中 */
    flex: 1; /* 填充剩余空间 */
    padding: 20px; /* 内边距 */
    box-sizing: border-box; /* 盒模型 */
}

/* 设置文本区域的样式 */
.text-area { /* 文本区 */
    background-color: #fff; /* 白色背景 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
    font-weight: normal; /* 正常字重 */
    margin-top: 0px; /* 更精细控制 */
}
 
/* 设置按钮区域的样式 */
.buttons { /* 按钮区 */
    margin-top: 2px; /* 上边距 */
    text-align: left; /* 左对齐 */
    margin-left: 10px; /* 左边距 */
}
 
/* 设置按钮的通用样式 */
button { /* 通用按钮 */
    background-color: #750101; /* 背景色 */
    color: white; /* 文字色 */
    border: 1px solid #f5f3f3; /* 边框 */
    border-radius: 5px; /* 圆角 */
    margin: 0 0px; /* 左右边距 */
    padding: 5px 5px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 指针样式 */
    white-space: nowrap; /* 防止文字换行 */
}

button:hover { /* 通用按钮悬停 */
    background-color: #390202; /* 深色背景 */
}
 
/* 设置导航容器内导航和版权信息的样式 */
.nav-container nav { /* 导航容器内导航 */
    flex: 1; /* 填充空间 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 居中对齐 */
}
 
/* 设置版权和ICP信息的样式 */
.nav-container .copyright, /* 版权信息 */
.nav-container .icp { /* ICP信息 */
    text-align: center; /* 文字居中 */
    margin: 10px 0; /* 上下边距 */
    position: relative; /* 关键修改：改为相对定位 */
    bottom: auto; /* 取消底部定位 */
    width: 100%; /* 全宽 */
    margin-top: 0; /* 重置上边距 */
}
 
.nav-container .copyright { /* 版权信息 */
    margin-bottom: 20px; /* 调整底部间距 */
}

/* 模态对话框样式 */
.modal { /* 模态框 */
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 堆叠顺序 */
    left: 0; /* 左定位 */
    top: 0; /* 上定位 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    overflow: auto; /* 滚动条 */
    background-color: rgba(0,0,0,0.4); /* 半透明背景 */
}
 

 
/* 关闭按钮的样式 */
.close { /* 关闭按钮 */
    color: #aaa; /* 文字色 */
    float: right; /* 右浮动 */
    font-size: 16px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    cursor: pointer; /* 指针样式 */
}
 
/* 关闭按钮在鼠标悬停和聚焦时的样式 */
.close:hover, /* 悬停 */
.close:focus { /* 聚焦 */
    color: black; /* 黑色文字 */
    text-decoration: none; /* 无下划线 */
}

input[type="text"] { /* 文本输入 */
    width: var(--input-width); /* 使用变量宽度 */
}

input[type="tel"] { /* 电话输入 */
    width: var(--input-width); /* 使用变量宽度 */
}

input[type="password"] { /* 密码输入 */
    width: var(--input-width); /* 使用变量宽度 */
}

input[type="email"] { /* 邮箱输入 */
    width: var(--input-width); /* 使用变量宽度 */
}

/* 简单的按钮样式 */
.wechat-login-button { /* 微信登录按钮 */
    background-color: #1aad19; /* 背景色 */
    color: white; /* 文字色 */
    border: none; /* 无边框 */
    padding: 10px 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 无下划线 */
    display: inline-block; /* 行内块 */
    font-size: 16px; /* 字体大小 */
    margin-right: 10px; /* 右边距 */
    cursor: pointer; /* 指针样式 */
}

.wechat-login-button:hover { /* 微信按钮悬停 */
    background-color: #148c12; /* 深色背景 */
}


/* 基础模态框样式 */
.modal-content {
    position: relative;
    margin: 5% auto;
    padding: 0px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    animation: modalopen 0.4s;
  }
  
  /* 模态框A特定样式 */
  #dealerRegisterModalA .modal-content {
    background-color: #f8f9fa;
    color: #212529;
    /* 尺寸设置 */
    width: 90%; /* 相对宽度 */
    max-width: 300px; /* 最大宽度限制 */
    min-width: 300px; /* 最小宽度保证 */
    min-height: 300px; /* 最小高度保证 */
    height: auto; /* 高度自适应内容 */
    /* 其他样式 */
    padding: 0px;
    border-radius: 8px;
    box-sizing: border-box; /* 确保padding计入尺寸 */
    /* 新增的居中样式 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文本内容居中（备用） */
  }



  /* 模态框B特定样式 */
  #dealerRegisterModalB .modal-content {
    background-color: #f8f9fa;
    color: #212529;
    /* 尺寸设置 */
    width: 90%; /* 相对宽度 */
    max-width: 300px; /* 最大宽度限制 */
    min-width: 300px; /* 最小宽度保证 */
    min-height: 300px; /* 最小高度保证 */
    height: auto; /* 高度自适应内容 */
    /* 其他样式 */
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box; /* 确保padding计入尺寸 */
    /* 新增的居中样式 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文本内容居中（备用） */
  }
  
  /* 移动端适配 */
  @media screen and (max-width: 768px) {
    .modal-content {
      width: 95%;
      margin: 10% auto;
      padding: 15px;
    }
  }
  
  @keyframes modalopen {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
  }