/* 默认样式初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: 0;
}

/* input默认样式 */
input {
  /* 清除默认输入框轮廓 */
  outline: none;
  /* 设置1px实线solid边框 */
  border: 1px solid #d9d9d9;
  /* 设置内边距上下3px、左右10px */
  padding: 3px 10px;
  /* 设置圆角4px */
  border-radius: 4px;
  /* 设置动画过度时间0.3s */
  transition: 0.3s;
}

a {
  color: #4d80f0;
  /* 清除a标签默认的下划线 */
  text-decoration: none;
}

/* 设置input标签选中[:focus]状态边框为红色 */
input:focus {
  border: 1px solid red;
}

/* input placeholder 文字样式 */
input[type=password]::placeholder,
input[type=text]::placeholder {
  font-size: 14px;
  font-family: Arial;
  color: #ccc
}

/* 设置body标签内的字体默认颜色 */
body {
  color: #666;
}

/* 设置整体水平垂直居中 */
#app {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 420px;
  height: 529px;
}

/* 标题样式 */
h2 {
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000;
  margin-bottom: 24px;
}

/* .content {
  margin-bottom: 24px;
} */

/* .content元素后面的第一代子元素span样式设置 */
.content > span {
  /* 将span行内元素转为块元素 */
  display: block;
  margin-bottom: 5px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
}

/* input输入框默认宽高 */
.content-input {
  width: 418px;
  height: 40px;
}

/* 手机号码输入区样式 */
/* 使用弹性盒子布局 */
.content-a {
  display: flex;
  /* 排列方向：主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 在主轴上的对齐方式：两端对齐，项目之间的间隔都相等。 */
  justify-content: space-between;
}

/* 中国 +86 样式 */
.content-a .select-country {
  border: 1px solid #d9d9d9;
  width: 106px;
  height: 40px;
  /* 行内文字水平垂直居中 */
  text-align: center;
  line-height: 40px;
  /* 设置圆角上4px、右和下0、左4px */
  border-radius: 4px 0 0 4px;
  /* 字体设置 */
  font-family: PingFang SC;
  font-style: normal;
  /* 文本粗细 */
  font-weight: 400;
  /* 文本大小 */
  font-size: 16px;
  /* 清除右边框 */
  border-right-style: none;
}

/* 请输入常用手机号 样式 */
.content-input-phone {
  width: 320px;
  border-radius: 0 4px 4px 0;
}

/* 验证码： */
/* 请输入验证码 样式 */
.content-input-Code {
  width: 254px;
}

/* 验证码按钮样式 */
.content-button-Code {
  width: 146px;
  color: #f71934;
  background: #fff;
}

/* 验证码按钮选中时样式 */
.content-button-Code:focus {
  border: 1px solid #d9d9d9;
}

/* 设置密码： */
/* 使用加号（+）相邻兄弟选择器 选择.passwrod相邻的.icon-close-eyes */
.password + .icon-close-eyes {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  margin-top: 14px;
  transition: 0.3s;
}

/* 清除原来带有的眼睛 */
.password[type="password"]::-ms-reveal {
  display: none;
}

/* 通过js控制，当type="text"时眼睛的样式 */
.password[type="text"] + .icon-close-eyes {
  background: url(../image/adcf90ea5b04886b.png) no-repeat;
  background-size: 100%;
}
/* 通过js控制，当type="password"时眼睛的样式 */
.password[type="password"] + .icon-close-eyes {
  background: url(../image/947298788c1fe98d.png) no-repeat;
  background-size: 100%;
}

/* 协议复选框 */
.protocol input[type="checkbox"] {
  border: 2px solid #c5c5c5;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  /* 复选框与文本垂直居中对齐 */
  vertical-align: middle;
  /* 清除复选框默认样式 */
  appearance: none;
  /* 设置复选框内边距为0 */
  padding: 0;
  /* 设置动画过度时间0.3s */
  transition: 0.3s;
}

/* 设置复选框选中:checked状态的样式 */
.protocol input[type="checkbox"]:checked {
  background: url(../image/checkbox.png) no-repeat;
  background-size: 100%;
  border: 2px solid red;
}

.protocol span {
  font-size: 12px;
}

/* 立即注册 */
.button {
  margin-top: 24px;
}

.button input {
  background: #fa2c19;
  border-radius: 4px;
  width: 420px;
  height: 48px;
  line-height: 48px;
  border: none;
  color: #fff;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  cursor: pointer;
}

.taps {
  opacity: 0;
  color: #c5c5c5;
  font-size: 12px !important;
  transition: 0.2s;
}