/* 设置页面背景 */
body {
  background: url(../images/bg_pc.jpg) no-repeat center center fixed; /* 设置PC端背景图片 */
  background-size: cover;  /* 背景图片覆盖整个容器 */
  min-height: 100vh;  /* 最小高度为视口高度 */
  margin: 0;  /* 清除外边距 */
  padding: 0;  /* 清除内边距 */
  display: flex;  /* 使用弹性布局 */
  align-items: flex-start;  /* 从顶部开始对齐 */
  justify-content: center;  /* 水平居中 */
}

/* 移动端背景适配 */
@media screen and (max-width: 768px) {
  body {
    background: url(../images/bg_mobile.jpg) no-repeat center center fixed;  /* 设置移动端背景图片 */
    background-size: cover;  /* 背景图片覆盖整个容器 */
  }
}

/* 登录框容器样式 */
.signin {
  width: 90%;  /* 宽度为父容器的90% */
  max-width: 670px;  /* 最大宽度670px */
  margin-top: 65vh;  /* 距顶部65%视口高度 */
  padding: 20px;  /* 内边距20px */
  transform: translateY(-50%);  /* 向上偏移自身50%高度 */
}



/* 表单样式 */
.form-signin {
  display: flex;  /* 使用弹性布局 */
  flex-direction: column;  /* 垂直排列 */
  gap: 15px;  /* 元素间距15px */
  background: rgba(0, 0, 0, 0.8);  /* 背景色黑色60%透明度 */
  padding: 20px;  /* 内边距20px */
  border-radius: 5px;  /* 圆角5px */
}

/* 输入框组样式 */
.d-flex {
  display: flex !important;  /* 强制使用弹性布局 */
  align-items: center;  /* 垂直居中对齐 */
  height: 40px;  /* 高度45px */
  margin-bottom: 15px;  /* 底部外边距15px */
  gap: 20px;  /* 元素间距20px */
}

/* 输入框标签样式 */
.input-group-text {
  width: 160px;  /* 宽度80px */
  background: url(../images/wz_bg.png) no-repeat center center !important;  /* 设置背景图片 */
  background-size: 100% 100% !important;  /* 背景图片完全覆盖 */
 
  color: rgb(132, 36, 21);  /* 文字颜色 */
  font-weight: bold;  /* 文字加粗 */
  justify-content: center;  /* 水平居中 */
  height: 100%;  /* 高度100% */
  display: flex;  /* 使用弹性布局 */
 
}

/* 输入框和下拉框共同样式 */
.form-control, #options {
  flex: 1;  /* 占据剩余空间 */
  height: 100%;  /* 高度100% */
  background: transparent;  /* 透明背景 */
  border: 1px solid #FFD700;  /* 金色边框 */
  color: #FFD700;  /* 文字颜色金色 */
  padding: 0 15px;  /* 左右内边距15px */
  margin-left: 20px;  /* 左外边距20px */
}

/* 输入框占位符样式 */
.form-control::placeholder {
  color: rgba(255, 215, 0, 0.5);  /* 半透明金色 */
}

/* 复选框容器样式 */
.checkbox {
  display: flex;  /* 使用弹性布局 */
  align-items: center;  /* 垂直居中 */
  color: #695f22;  /* 文字颜色金色 */
  margin-bottom: 15px;  /* 底部外边距15px */
  gap: 5px;  /* 元素间距5px */
}

/* 按钮组样式 */
.d-flex:last-child {
  gap: 15px;  /* 按钮间距15px */
  margin-bottom: 0;  /* 移除底部外边距 */
}

/* 按钮样式 */
.btn {
  flex: 1;  /* 平均分配空间 */
  height: 45px;  /* 高度45px */
  background: linear-gradient(to bottom, #FFD700, #FDB931);  /* 金色渐变背景 */
  border: none;  /* 无边框 */
  color: #000;  /* 文字颜色黑色 */
  font-weight: bold;  /* 文字加粗 */
}

/* 按钮悬停效果 */
.btn:hover {
  opacity: 0.9;  /* 透明度变化 */
}

/* 移动端适配样式 */
@media (max-width: 480px) {
  .signin {
    width: 95%;  /* 宽度95% */
    padding: 10px;  /* 内边距10px */
    margin-top: 60vh;  /* 距顶部60%视口高度 */
  }
  
  .form-signin {
    padding: 15px 10px;  /* 内边距调整 */
  }
  
  .d-flex {
    height: 40px;  /* 高度40px */
    margin-bottom: 10px;  /* 底部外边距10px */
  }
  
  .input-group-text {
    width: 60px;  /* 标签宽度60px */
    font-size: 14px;  /* 文字大小14px */
  }
  
  .form-control {
    font-size: 14px;  /* 文字大小14px */
    padding: 0 10px;  /* 左右内边距10px */
  }
  
  #options {
    height: 40px;  /* 高度40px */
    font-size: 14px;  /* 文字大小14px */
  }
}

/* 移动端表单透明度 */
@media screen and (max-width: 768px) {
  .form-signin {
    background: rgba(0, 0, 0, 1);  /* 完全不透明 */
  }
}

/* 确保特定元素背景透明 */
.form-control,
#options,
.checkbox,
.btn {
    background-color: transparent;  /* 背景透明 */
}

/* 下拉框样式 */
#options {
    flex: 1;  /* 占据剩余空间 */
    height: 100%;  /* 高度100% */
    background: transparent;  /* 背景透明 */
    border: 1px solid #FFD700;  /* 金色边框 */
    color: #FFD700;  /* 文字颜色金色 */
    padding: 0 15px;  /* 左右内边距15px */
}

/* Logo容器样式 */
.logo-container {
    position: fixed;  /* 固定定位 */
    top: 40px;  /* 距顶部40px */
    left: 50%;  /* 左偏移50% */
    transform: translateX(-50%);  /* 水平居中 */
    z-index: 10;  /* 层级 */
}

/* Logo图片样式 */
.main-logo {
    width: 250px;  /* 宽度250px */
    height: 230px;  /* 高度230px */
}

/* Logo移动端适配 */
@media (max-width: 480px) {
    .logo-container {
        top: 10px;  /* 距顶部10px */
    }
    
    .main-logo {
        width: 150px;  /* 宽度150px */
        height: 150px;  /* 高度150px */
    }
}

/* PC端二维码容器样式 */
.qr-container {
  position: fixed;  /* 固定定位 */
  top: 20px;  /* 距顶部20px */
  right: 20px;  /* 距右侧20px */
  width: 250px;  /* 宽度250px */
  height: 300px;  /* 高度300px */
  background-color: #fff;  /* 背景白色 */
  border: 1px solid #ddd;  /* 灰色边框 */
  border-radius: 5px;  /* 圆角5px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 添加阴影 */
  padding: 10px;  /* 内边距10px */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 子元素垂直排列 */
  align-items: center;  /* 水平居中对齐 */
  justify-content: space-between;  /* 均匀分布子元素 */
}

/* 文本样式 */
.qr-text {
  font-size: 14px;  /* 文字大小 */
  color: #333;  /* 深色文字 */
  margin: 0;  /* 清除外边距 */
  text-align: center;  /* 居中文本 */
}

/* 二维码图片样式 */
.qr-code {
  width: 226px;  /* 图片宽度226px */
  height: 226px;  /* 图片高度226px */
  object-fit: cover;  /* 图片按比例覆盖 */
  border: 1px solid #ccc;  /* 图片边框 */
  border-radius: 5px;  /* 图片圆角 */
}

/* 移动端隐藏二维码容器 */
@media screen and (max-width: 768px) {
  .qr-container {
    display: none;  /* 隐藏二维码容器 */
  }
}