body {
  background-color: #F1F1F1;                                                                 /* 背景颜色 */
}

.box {
  position: relative;                                                                       /* 相对定位 */
  width: 100%;                                                                              /* 宽度 */
  /*min-height: 100vh;                                                                      /* 最小高度占满视口 */
  height: 100%;
  background-color: #fff;                                                                   /* 背景颜色 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.page {
  margin-left: auto;                                                                        /* 左外边距自动 */
  margin-right: auto;                                                                       /* 右外边距自动 */
  background-color: #FBFDFD;                                                                /* 背景颜色 */
}

/* 手机端 */
@media screen and (max-width: 768px) and (hover: none) and (pointer: coarse) {
  body {
    background: #FFFF;                                                                      /* 背景颜色（手机端） */
  }
}

/* 电脑端 */
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body {
    background-color: #F1F1F1;                                                              /* 背景颜色（电脑端） */
  }
  .box {
    width: calc(9 / 16 * 100vh);                                                            /* 宽度按 9:16 比例 */
    margin-left: auto;                                                                      /* 左外边距自动 */
    margin-right: auto;                                                                     /* 右外边距自动 */
  }
}

/*====================================== 导航栏CSS */
.nav {
  position: relative;                                                                       /* 相对定位 */
  width: 100%;                                                                              /* 宽度 */
  height: 1.3rem;                                                                           /* 高度 */
  background-color: #0088FF;                                                                /* 背景颜色 */
}

/*=================================== 左侧返回按钮 */
.nav_fanhui {
  position: absolute;                                                                       /* 绝对定位 */
  left: 0rem;                                                                               /* 左距离 */
  top: 0rem;                                                                                /* 顶距离 */
  height: 100%;                                                                             /* 高度 */
  padding: .413333rem .32rem 0rem;                                                          /* 内边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.nav_fanhui span {
  display: block;                                                                           /* 块级元素 */
  width: .306667rem;                                                                        /* 宽度 */
  height: .56rem;                                                                           /* 高度 */
  background: url(../images/common_sprite_img.png) no-repeat -7.04rem -0.32rem;              /* 背景图位置 */
  background-size: 8.346667rem 5.946667rem;                                                 /* 背景图尺寸 */
}

/*======================================= 中间文字 */
.nav_txt {
  position: absolute;                                                                       /* 绝对定位 */
  top: 50%;                                                                                 /* 顶部居中 */
  left: 50%;                                                                                /* 左侧居中 */
  transform: translate(-50%, -50%);                                                         /* 精确居中 */
  font-size: 0.586667rem;                                                                   /* 字体大小 */
  color: #FFF;                                                                              /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}

/*=================================== 中间LOGO图标 */
.nav_logo {
  position: relative;                                                                       /* 相对定位 */
  margin: 0 auto;                                                                           /* 水平居中 */
  width: 2.293333rem;                                                                       /* 宽度 */
  height: 100%;                                                                             /* 高度 */
  padding-top: .333333rem;                                                                  /* 上内边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.nav_logo span {
  display: block;                                                                           /* 块级元素 */
  width: 2.306667rem;                                                                       /* 宽度 */
  height: .666667rem;                                                                       /* 高度 */
  background: url(../images/common_sprite_img.png) no-repeat -0.266667rem -0.266667rem;      /* 背景图位置 */
  background-size: 8.346667rem 5.946667rem;                                                 /* 背景图尺寸 */
}

/*==================================== 右侧我的图标 */
.nav_wo {
  position: absolute;                                                                       /* 绝对定位 */
  right: .453333rem;                                                                        /* 右距离 */
  top: 0rem;                                                                                /* 顶距离 */
  padding-top: .386667rem;                                                                  /* 上内边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.nav_wo span {
  display: block;                                                                           /* 块级元素 */
  width: .56rem;                                                                            /* 宽度 */
  height: .56rem;                                                                           /* 高度 */
  background: url(../images/common_sprite_img.png) no-repeat -5.386667rem -0.32rem;          /* 背景图位置 */
  background-size: 8.346667rem 5.946667rem;                                                 /* 背景图尺寸 */
}

/*=================================== 右侧登录文字 */
.nav_login {
  position: absolute;                                                                       /* 绝对定位 */
  right: .453333rem;                                                                        /* 右距离 */
  top: 0rem;                                                                                /* 顶距离 */
  padding: .386667rem 0rem;                                                                 /* 内边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.nav_login span {
  font-size: .426667rem;                                                                    /* 字体大小 */
  color: #FFFFFF;                                                                           /* 字体颜色 */
}
.nav_login span:active {
  color: #FF6666;                                                                           /* 激活时字体颜色 */
}

/*======================================= 顶部logo */
.logo-ico {
  margin: 0 auto;                                                                           /* 水平居中 */
  width: 4.5rem;                                                                            /* 宽度 */
  height: 4.5rem;                                                                           /* 高度 */
  background: url(../images/logo.png) no-repeat;                                            /* 背景图 */
  background-size: 4.5rem 4.5rem;                                                           /* 背景图尺寸 */
}

/*======================================== 输入框层 */
.input_div {
  position: relative;                                                                       /* 相对定位 */
  margin: 0px auto;                                                                         /* 水平居中 */
  width: 82%;                                                                               /* 宽度 */
}

/*==================================== 输入框右图标 */
.input_ico {
  position: absolute;                                                                       /* 绝对定位 */
  left: .4rem;                                                                              /* 左距离 */
  line-height: 1.333333rem;                                                                 /* 行高 */
  font-size: .4rem;                                                                         /* 字体大小 */
  font-weight: 600;                                                                         /* 字体加粗 */
  color: #979A9E;                                                                           /* 字体颜色 */
}

/*=========================================== 输入框 */
.input_div input {
  width: 100%;                                                                              /* 宽度 */
  height: 1.333333rem;                                                                      /* 高度 */
  font-size: .4rem;                                                                         /* 字体大小 */
  color: #2d3037;                                                                           /* 字体颜色 */
  padding-left: 1.1rem;                                                                     /* 左内边距 */
  border: .026667rem solid #bdc5d3;                                                         /* 边框 */
  border-radius: 1rem;                                                                      /* 圆角 */
  margin-bottom: 0.5rem;                                                                    /* 下外边距 */
}

/*====================================== 输入框红边框 */
.input_div input:focus {
  border-color: #FF6666;                                                                    /* 聚焦时边框颜色 */
}

/*===================================== 输入框*清除 */
.input_close {
  position: absolute;                                                                       /* 绝对定位 */
  right: .4rem;                                                                             /* 右距离 */
  top: 0.35rem;                                                                             /* 上距离 */
  font-size: .6rem;                                                                         /* 字体大小 */
  color: #bdc5d3;                                                                           /* 字体颜色 */
  cursor: pointer;                                                                          /* 鼠标指针 */
  display: none;                                                                            /* 默认隐藏 */
}

/*======================================= 提示文字 */
.error_tishi {
  position: absolute;                                                                       /* 绝对定位 */
  top: -12px;                                                                               /* 上偏移 */
  right: 0%;                                                                                /* 右对齐 */
  transform: translateX(-50%);                                                              /* 水平居中 */
  z-index: 2;                                                                               /* 层级 */
  text-align: center;                                                                       /* 文字居中 */
  color: #0088FF;                                                                           /* 字体颜色 */
  background-color: #ffff;                                                                  /* 背景颜色 */
  padding-left: 0.3rem;                                                                     /* 左内边距 */
  padding-right: 0.3rem;                                                                    /* 右内边距 */
  font-size: 15px;                                                                          /* 字体大小 */
  white-space: nowrap;                                                                      /* 不换行 */
  overflow: hidden;                                                                         /* 超出隐藏 */
  text-overflow: ellipsis;                                                                  /* 省略号 */
  opacity: 0;                                                                               /* 默认透明 */
}

/*======================================= 记住账号 */
.choose {
  margin: 0px auto;                                                                         /* 水平居中 */
  width: 72%;                                                                               /* 宽度 */
  font-size: .346667rem;                                                                    /* 字体大小 */
  color: #5e6d81;                                                                           /* 字体颜色 */
  white-space: nowrap;                                                                      /* 不换行 */
  overflow: hidden;                                                                         /* 超出隐藏 */
  text-overflow: ellipsis;                                                                  /* 省略号 */
}
.choose input[type=checkbox] {
  position: relative;                                                                       /* 相对定位 */
  width: .48rem;                                                                            /* 宽度 */
  height: .48rem;                                                                           /* 高度 */
  border: .026667rem solid #dbe1e8;                                                         /* 边框 */
  vertical-align: top;                                                                      /* 顶端对齐 */
  outline: none;                                                                            /* 去除轮廓 */
  cursor: pointer;                                                                          /* 鼠标指针 */
  border-radius: 3px;                                                                       /* 圆角 */
}
.choose input[type=checkbox]:checked {
  background-color: #fff;                                                                   /* 选中背景 */
  border-color: #FF6666;                                                                    /* 选中边框 */
  outline: none;                                                                            /* 去除轮廓 */
}
.choose input[type=checkbox]:checked:before {
  position: absolute;                                                                       /* 绝对定位 */
  left: 1.3px;                                                                              /* 左偏移 */
  top: 4px;                                                                                 /* 上偏移 */
  width: .333333rem;                                                                        /* 宽度 */
  height: .133333rem;                                                                       /* 高度 */
  color: #fff;                                                                              /* 颜色 */
  content: '';                                                                              /* 伪元素内容 */
  border-bottom: 2px solid #FF6666;                                                         /* 下边框 */
  border-left: 2px solid #FF6666;                                                           /* 左边框 */
  transform: rotate(-45deg);                                                                /* 旋转 */
}

.choose .login_label {
  margin-left: .24rem;                                                                      /* 左外边距 */
}
.choose .choose_a {
  float: right;                                                                             /* 右浮动 */
  color: #5e6d81;                                                                           /* 字体颜色 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.choose .reg_label {
  margin-left: .24rem;                                                                      /* 左外边距 */
  font-size: .266667rem;                                                                    /* 字体大小 */
}
.choose .reg_span {
  color: #5e6d81;                                                                           /* 字体颜色 */
  font-size: .266667rem;                                                                    /* 字体大小 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.choose .reg_span a {
  color: #01AAFA;                                                                           /* 链接颜色 */
  font-size: .266667rem;                                                                    /* 字体大小 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}

/*======================================= 红色按钮 */
.red_button {
  width: 100%;                                                                              /* 宽度 */
  height: 1.333333rem;                                                                      /* 高度 */
  line-height: 1.333333rem;                                                                 /* 行高 */
  font-size: 0.386667rem;                                                                   /* 字体大小 */
  color: #fff;                                                                              /* 字体颜色 */
  background-color: #FF6666;                                                                /* 背景颜色 */
  border-radius: 1rem;                                                                      /* 圆角 */
  margin-top: 0.45rem;                                                                      /* 上外边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
  border: none;                                                                             /* 无边框 */
  outline: none;                                                                            /* 无轮廓 */
  display: flex;                                                                            /* 弹性布局 */
  justify-content: center;                                                                  /* 水平居中 */
  align-items: center;                                                                      /* 垂直居中 */
  gap: 0.2em;                                                                               /* 子元素间距 */
  position: relative;                                                                       /* 相对定位 */
}
.red_button:active {
  color: #FFF;                                                                              /* 激活字体颜色 */
  border: .026667rem solid #D0D0D0;                                                         /* 激活边框 */
  background-color: #D0D0D0;                                                                /* 激活背景 */
}
.red_button .loading {
  display: none;                                                                            /* 默认隐藏 */
  width: 1em;                                                                               /* 宽度（自适应） */
  height: 1em;                                                                              /* 高度（自适应） */
  border: 0.1em solid rgba(255, 255, 255, 0.5);                                             /* 边框 */
  border-top: 0.1em solid white;                                                            /* 顶部实色 */
  border-radius: 50%;                                                                       /* 圆形 */
  margin-right:.15rem;
  animation: spin 1s linear infinite;                                                       /* 旋转动画 */
}
.red_button.loading {
  pointer-events: none;                                                                     /* 禁止点击 */
  opacity: 0.9;                                                                             /* 透明度 */
}
.red_button.loading .loading {
  display: block;                                                                           /* 显示加载圈 */
}
@keyframes spin {
  0% { transform: rotate(0deg); }                                                           /* 动画起始 */
  100% { transform: rotate(360deg); }                                                       /* 动画结束 */
}

/*======================================= 白色按钮 */
.white_button {
  width: 100%;                                                                              /* 宽度 */
  height: 1.333333rem;                                                                      /* 高度 */
  line-height: 1.333333rem;                                                                 /* 行高 */
  font-size: .386667rem;                                                                    /* 字体大小 */
  color: #FF6666;                                                                           /* 字体颜色 */
  background-color: #fff;                                                                   /* 背景颜色 */
  border: .026667rem solid #FF6666;                                                         /* 边框 */
  border-radius: 1rem;                                                                      /* 圆角 */
  margin-top: .45rem;                                                                       /* 上外边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.white_button:active {
  color: #FFF;                                                                              /* 激活字体颜色 */
  border: .026667rem solid #D0D0D0;                                                         /* 激活边框 */
  background-color: #D0D0D0;                                                                /* 激活背景 */
}

/*======================================= 灰色按钮 */
.hui_button {
  width: 100%;                                                                              /* 宽度 */
  height: 1.333333rem;                                                                      /* 高度 */
  line-height: 1.333333rem;                                                                 /* 行高 */
  font-size: .386667rem;                                                                    /* 字体大小 */
  color: #fff;                                                                              /* 字体颜色 */
  background-color: #DCDCDC;                                                                /* 背景颜色 */
  border-radius: 1rem;                                                                      /* 圆角 */
  margin-top: .45rem;                                                                       /* 上外边距 */
  cursor: pointer;                                                                          /* 鼠标指针 */
}
.hui_button:active {
  color: #FFF;                                                                              /* 激活字体颜色 */
  border: .026667rem solid #D0D0D0;                                                         /* 激活边框 */
  background-color: #D0D0D0;                                                                /* 激活背景 */
}

/*======================================= 版权说明 */
footer p {
  margin-top: .45rem;                                                                       /* 上外边距 */
  line-height: .6rem;                                                                       /* 行高 */
  font-size: .306667rem;                                                                    /* 字体大小 */
  color: #bdc5d3;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
  font-family: Arial, "SimHei", sans-serif;
}

/*======================================= 注册页面-标题 */
.reg_title .title1 {
  line-height: 1.5rem;                                                                      /* 行高 */
  font-size: .613333rem;                                                                    /* 字体大小 */
  color: #2d3037;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
  margin-bottom: 0rem;                                                                      /* 下外边距 */
}
.reg_title .title2 {
  line-height: 1.5rem;                                                                      /* 行高 */
  font-size: .613333rem;                                                                    /* 字体大小 */
  color: #2d3037;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
  margin-top: 0.5rem;                                                                       /* 上外边距 */
  margin-bottom: 0.5rem;                                                                    /* 下外边距 */
}
.reg_title .title_ico {
  line-height: .68rem;                                                                      /* 行高 */
  font-size: .346667rem;                                                                    /* 字体大小 */
  color: #FF6666;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
  margin-bottom: .4rem;                                                                     /* 下外边距 */
}
.reg_title .title_ico > span {
  display: inline-block;                                                                    /* 行内块 */
  width: .373333rem;                                                                        /* 宽度 */
  height: .373333rem;                                                                       /* 高度 */
  background: url(../images/login_sprite_img.png) no-repeat -4.733333rem -1.413333rem;        /* 背景图位置 */
  background-size: 5.84rem 7.3rem;                                                          /* 背景图尺寸 */
  margin-right: .133333rem;                                                                 /* 右外边距 */
}

.mobile_ico {
  position: absolute;                                                                       /* 绝对定位 */
  top: 50%;                                                                                 /* 垂直居中 */
  transform: translateY(-50%);                                                              /* 精确居中 */
  left: .4rem;                                                                              /* 左距离 */
  width: .45rem;                                                                            /* 宽度 */
  height: .45rem;                                                                           /* 高度 */
  background: url(../images/yisu_sprite_img.png) no-repeat -0.55rem -0.12rem;                /* 背景图位置 */
  background-size: 10rem;                                                                   /* 背景图尺寸 */
}

.mima_ico {
  position: absolute;                                                                       /* 绝对定位 */
  left: .4rem;                                                                              /* 左距离 */
  top: 50%;                                                                                 /* 垂直居中 */
  transform: translateY(-50%);                                                              /* 精确居中 */
  width: .45rem;                                                                            /* 宽度 */
  height: .45rem;                                                                           /* 高度 */
  background: url(../images/yisu_sprite_img.png) no-repeat -1.43rem -0.12rem;                /* 背景图位置 */
  background-size: 10rem;                                                                   /* 背景图尺寸 */
}

/* 获取验证码按钮 */
.get_yzm {
  position: absolute;                                                                       /* 绝对定位 */
  right: 0rem;                                                                              /* 右对齐 */
  top: 0rem;                                                                                /* 顶部对齐 */
  width: 3.253333rem;                                                                       /* 宽度 */
  height: 1.333333rem;                                                                      /* 高度 */
  line-height: 1.333333rem;                                                                 /* 行高 */
  font-size: .373333rem;                                                                    /* 字体大小 */
  color: #FF6666;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
}
.get_yzm::before {
  position: absolute;                                                                       /* 绝对定位 */
  left: 0;                                                                                  /* 左对齐 */
  top: 50%;                                                                                 /* 垂直居中 */
  transform: translateY(-50%);                                                              /* 精确居中 */
  content: "";                                                                              /* 伪元素内容 */
  width: 2px;                                                                               /* 宽度 */
  height: .4rem;                                                                            /* 高度 */
  background-color: #DBE1E8;                                                                /* 背景颜色 */
}
.get_yzm.sent {
  color: #9EA7B3;                                                                           /* 已发送状态颜色 */
}
.none {
  display: none;                                                                            /* 隐藏元素 */
}

/* 标题样式 */
.other-title {
  position: relative;                                                                       /* 相对定位 */
  height: 1.0rem;                                                                           /* 高度 */
  line-height: 1.0rem;                                                                      /* 行高 */
  font-size: .426667rem;                                                                    /* 字体大小 */
  color: #9ea7b3;                                                                           /* 字体颜色 */
  text-align: center;                                                                       /* 文字居中 */
}
.other-title::before,
.other-title::after {
  position: absolute;                                                                       /* 绝对定位 */
  top: 0.5rem;                                                                              /* 垂直居中 */
  content: "";                                                                              /* 伪元素内容 */
  width: 1.3rem;                                                                            /* 宽度 */
  height: 1px;                                                                              /* 高度 */
  background-color: #dbe1e8;                                                                /* 背景颜色 */
}
.other-title::before {
  left: .533333rem;                                                                         /* 左侧线位置 */
}
.other-title::after {
  right: .533333rem;                                                                        /* 右侧线位置 */
}

/* 图标链接容器样式 */
.container {
  display: flex;                                                                            /* 弹性布局 */
  flex-direction: column;                                                                   /* 垂直排列 */
  align-items: center;                                                                      /* 水平居中 */
}
.other-link {
  display: flex;                                                                            /* 弹性布局 */
  justify-content: space-around;                                                            /* 两端对齐 */
  align-items: center;                                                                      /* 垂直居中 */
  padding: 0rem 1.2rem;                                                                     /* 左右内边距 */
  margin-bottom: 0.5rem;                                                                    /* 下外边距 */
}
.other-link a {
  width: 1.173333rem;                                                                       /* 宽度 */
  height: 1.173333rem;                                                                      /* 高度 */
  border: 0px solid red;                                                                    /* 调试用边框（可删） */
}
.other-link a.login-qq {
  background: url(../images/login_sprite_img.png) no-repeat -2.053333rem 0rem;               /* QQ图标 */
  background-size: 5.84rem 7.28rem;                                                         /* 背景图尺寸 */
}
.other-link a.login-wechat {
  background: url(../images/login_sprite_img.png) no-repeat -3.36rem 0rem;                   /* 微信图标 */
  background-size: 5.84rem 7.28rem;                                                         /* 背景图尺寸 */
}
.other-link a.login-alipay {
  background: url(../images/login_sprite_img.png) no-repeat -4.666667rem 0rem;               /* 支付宝图标 */
  background-size: 5.84rem 7.28rem;                                                         /* 背景图尺寸 */
}