* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html {
  min-height: 100vh;
  font-size: calc(100vw / 7.5);
}

@media (min-width: 640px) {
  html {
    font-size: 85.2px;
  }
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  font-size: 0.28rem;
  line-height: 1;
  background: #f5f5f5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}
a {
  text-decoration: none;
  color: #333;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* 富文本 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 0.28rem;
}

button {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;

  -webkit-tap-highlight-color: transparent;
  /* iOS 禁用点击高亮 */
  -webkit-user-select: none;
  user-select: none;
}

input {
  border: none;
  outline: none;
  background: transparent;
}

.home-page {
  position: absolute;
  width: 100%;
  max-width: 7.5rem;
  background-color: #f5f5f5;
  background-image: url(../img/video_bg.jpg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.video-content {
  position: relative;
  top: 0;
  width: 7.5rem;
  /* height: 5.81rem; */
}

.video-bg {
  position: absolute;
  width: 7.5rem;
  /* height: 5.22rem; */
}

.video-box {
  /* position: absolute !important; */
  /* top: 1.61rem !important; */
  /* left: 50% !important; */
  /* transform: translateX(-50%) !important; */
  /* -webkit-transform: translateX(-50%) !important; */
  position: relative;
  margin: 1.6rem auto 0;
  width: 7.18rem !important;
  height: 4.04rem !important;
  box-shadow: 0 0 0 0.06rem white !important;
  overflow: hidden;
}
/* 封面图，倒计时 */
.video-holder {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.video-holder .count-down {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  color: #fff;
  line-height: 0.6rem;
  background-color: rgba(0, 0, 0, 0.5);
}
/* 视频 */
/* .vjs-control-bar {
  opacity: 1 !important;
} */
.vjs-remaining-time {
  display: none;
}
.video-replay .vjs-current-time,
.video-replay .vjs-duration {
  position: relative;
  display: block !important;
}
.video-replay.video-js .vjs-time-control,
.video-replay .vjs-current-time {
  padding: 0 0.1rem;
}
.video-replay .vjs-current-time::after {
  content: '/';
  position: absolute;
  right: -0.05rem;
  font-size: 0.2rem;
  color: #fff;
}

.video-js {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-js .vjs-big-play-button {
  margin-left: 0;
  width: 0.52rem;
  height: 0.52rem;
  line-height: 0.52rem;
  top: auto;
  bottom: 0.1rem;
  left: 0.1rem;
  background-color: none;
  border: none;
  border-radius: 50%;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-size: 0.32rem;
}

.home-video {
  position: absolute;
  border-radius: 0.04rem;
  width: 100% !important;
  height: 100% !important;
}
.home-status2,
.home-status {
  position: relative;
  margin: 0 auto;
  width: 6.62rem;
  height: 1.45rem;
  display: none;
  z-index: 2;
}
.status-item {
  position: absolute;
  width: 6.62rem;
  height: 1.45rem;
}

.status-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}
.status-item .click-tips {
  position: absolute;
  right: -0.1rem;
  bottom: 0.1rem;
  width: 0.6rem;
  height: 0.6rem;
  background: url(../img/click.png) no-repeat 0 0 / 100% auto;
  z-index: 2;
  animation: heartbeat 2s ease-in-out infinite;
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.active {
  display: block !important;
}

.hide {
  display: none !important;
}

.get-card-btn {
  position: absolute;
  background-color: rgb(255, 255, 255);
  right: 0.38rem;
  top: 0.55rem;
  width: 1.28rem;
  height: 0.41rem;
  font-size: 0.24rem;
  color: #146dfb;
  border-radius: 0.3rem;
}

.home-live-tab {
  position: relative;
  width: 100%;
  height: 0.8rem;
  background-color: #fff;
  margin: 0.18rem 0;
}

.home-live-tab ul {
  position: relative;
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}

.home-live-tab-ul li {
  width: 33.33%;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.28rem;
  color: #333333;
  font-weight: bold;
  position: relative;
}

.home-live-tab-ul .active {
  color: #146dfb;
}

.home-live-tab-ul .active:after {
  content: ' ';
  width: 0.2rem;
  height: 0.04rem;
  line-height: 0;
  font-size: 0;
  background: #146dfb;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  margin-left: -.1rem;
  left: 50%;
  bottom: 0.15rem;
}

.home-live-container {
  position: relative;
  padding: 0.22rem 0.5rem 0 0.55rem;
  word-break: break-all;
}

.live-container {
  display: none;
}

.live-container ul {
  width: 100%;
}

.live-container ul li:nth-child(1) {
  padding-top: 0;
  border-top: none;
}

.live-container ul li {
  padding: 0.6rem 0;
  /* border-top: 2px dashed #ccc; */
  /* 顶部虚线 */
}

.live-title {
  font-size: 0.4rem;
  color: #333333;
  line-height: 1.2;
  width: 100%;
  text-align: justify;
  font-weight: bold;
}

.live-host-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* height: 0.4rem;      */
  box-sizing: border-box;
  font-size: 0.28rem;
  padding: 0.38rem 0;
}

.live-host {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.live-host img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.live-host span {
  margin-right: 0.1rem;
  color: #333;
  font-size: 0.24rem;
}

.live-time {
  color: #999999 !important;
  font-size: 0.18rem !important;
  padding-top: 0.08rem !important;
}

.live-is-top {
  width: 0.6rem;
  height: 0.3rem;
  display: none;
}

.live-is-top p {
  height: 0.3rem;
  /* line-height: 0.3rem; */
  line-height: 1.3;
  font-size: 0.2rem;
  color: #007aff;
  border: 1px solid #007aff;
  border-radius: 0.2rem;
  padding: 0;
  margin: 0;
  text-align: center;
}
.live-content,
.live-content p {
  margin: 0 0 0.2rem !important;
  font-size: 0.28rem !important;
  color: #333;
  line-height: 1.5;
  font-weight: normal;
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-break: strict;
  hanging-punctuation: none;
  text-justify: inter-ideograph;
  -webkit-text-justify: inter-ideograph;
  -webkit-text-spacing: ideograph-alpha;
}
.live-content span {
  display: inline-block;
}
.live-content img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  margin: 0.1rem auto !important;
  height: auto !important;
  box-sizing: border-box;
}

/* .live-container {
  padding-bottom: 1.5rem;
} */

/* 容器 */
.like-contanter {
  position: fixed;
  width: 0.88rem;
  height: 0.83rem;
  bottom: 2rem;
  left: 50%;
  transform: translateX(2.59rem);
  -webkit-transform: translateX(2.59rem);
  z-index: 5;
}

.like-contanter p {
  position: relative;
  width: 2rem;
  font-size: 0.3rem;
  color: #ff6974;
  text-align: center;
  left: 50%;
  transform: translateX(-1rem);
  padding-top: 0.1rem;
}

/* 点赞图标呼吸动画 */
.like-btn {
  position: relative;
}
.like-btn img {
  width: 0.88rem;
  height: 0.83rem;
  animation: pulse 0.8s infinite linear;
  -webkit-animation: pulse 0.8s infinite linear;
}
.ani-like {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.88rem;
  height: 0.83rem;
  background: url(../img/like.png) no-repeat 0 0 / 100% 100%;
  animation: fade-out 0.8s ease;
  -webkit-animation: fade-out 0.8s ease;
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@-webkit-keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@keyframes fade-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes fade-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* 星星漂浮容器 */
.like-move {
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  pointer-events: none;
  width: 0.88rem;
  height: 0.83rem;
}

.like-move img {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  animation: s-float-up 1.6s linear infinite;
}

.like-move img:nth-child(1) {
  animation-delay: 0s;
  left: 30%;
}

.like-move img:nth-child(2) {
  animation-delay: 0.4s;
  left: 60%;
}

.like-move img:nth-child(3) {
  animation-delay: 0.8s;
  left: 30%;
}

.like-move img:nth-child(4) {
  animation-delay: 1.2s;
  left: 60%;
}

/* S型上升轨迹 + 缩放 + 透明度 */
@keyframes s-float-up {
  0% {
    transform: translate(-50%, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  25% {
    transform: translate(-70%, -0.4rem) rotate(-10deg) scale(1.05);
    opacity: 0.9;
  }

  50% {
    transform: translate(-30%, -0.8rem) rotate(10deg) scale(1.1);
    opacity: 0.7;
  }

  75% {
    transform: translate(-70%, -1.2rem) rotate(-15deg) scale(0.9);
    opacity: 0.4;
  }

  100% {
    transform: translate(-50%, -1.6rem) rotate(0deg) scale(0.6);
    opacity: 0;
  }
}

.get-certificate-page {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 7.5rem;
  display: none;
}

.gc-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #3461fd;
}

.gc-bg img {
  width: 100%;
  display: block;
}

.gc-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 13.34rem;
}

.flower {
  position: absolute;
  top: 1.7rem;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  width: 6.3rem;
  height: 2.3rem;
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  animation: flower-pulse 1.2s linear infinite;
  /* Safari兼容 */
  -webkit-animation: flower-pulse 1.2s linear infinite;
}

.flower img {
  width: 100%;
}

/* 动画关键帧：呼吸放大缩小 */
@keyframes flower-pulse {
  0%,
  100% {
    transform: translate(-50%, 0) scale(1);
  }

  50% {
    transform: translate(-50%, 0) scale(1.05);
  }
}

/* Safari兼容前缀 */
@-webkit-keyframes flower-pulse {
  0%,
  100% {
    -webkit-transform: translate(-50%, 0) scale(1);
  }

  50% {
    -webkit-transform: translate(-50%, 0) scale(1.05);
  }
}

.gc-title {
  position: absolute;
  top: 1.18rem;
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  line-height: 0.48rem;
  font-weight: bold;
}

.gc-tiger-r {
  position: absolute;
  top: 4.92rem;
  right: 0.21rem;
  width: 1.85rem;
  height: 1.99rem;
}

.gc-tiger-l {
  position: absolute;
  top: 4.92rem;
  left: 0.46rem;
  width: 1.58rem;
  height: 2.03rem;
}

.gc-style {
  position: absolute;
  top: 2.92rem;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  width: 3.3rem;
  height: 4.67rem;
}

.gc-tips-txt {
  position: absolute;
  top: 8.02rem;
  width: 100%;
  text-align: center;
  line-height: 0.48rem;
  font-size: 0.26rem;
  color: #fff;
  font-weight: bold;
}

.gc-create-btn {
  position: absolute;
  background-color: rgb(252, 254, 255);
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  top: 9.4rem;
  width: 2.8rem;
  height: 0.96rem;
  text-align: center;
  list-style: 0.9rem;
  font-size: 0.32rem;
  color: #000;
  border-radius: 10rem;
}

.gc-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-3.35rem);
  top: 0.4rem;
  width: 0.58rem;
  height: 0.58rem;
}

/* 整体容器，适配 750px 设计稿，1rem = 100px */
.input-page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 7.5rem;
  display: none;
}

.input-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #3461fd;
}
.input-bg img {
  width: 100%;
  display: block;
}

/* 内容容器 */
.input-container {
  text-align: center;

  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  top: 0;
}

/* 顶部提示标题 */
.input-tips {
  position: absolute;
  top: 1.18rem;
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  line-height: 0.48rem;
  font-weight: bold;
}

/* 输入区域白框 */
.input-content-box {
  background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 3.4rem;
  left: 50%;
  padding-top: 1.2rem;
  padding-bottom: 0.2rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 6.4rem;
  /* height: 5.51rem; */

  /* padding: 0.6rem 0.4rem 0.8rem; */
}

/* 标题 */
.input-title {
  font-size: 0.32rem;
  line-height: 0.38rem;
  font-weight: bold;
  color: #333;
  position: absolute;
  width: 100%;
  top: 0.44rem;
  text-align: center;
}

.input-title-tips {
  position: absolute;
  width: 100%;
  font-size: 0.22rem;
  line-height: 1;
  color: red;
  top: 0.96rem;
}

/* 每行输入 */
.input-name-box,
.input-school-box,
.input-class-box {
  display: flex;
  align-items: center;
  background: transparent;
  margin: 0.2rem auto;
  /* padding: 0.4rem 0; */
  width: 5.5rem;
  height: 0.93rem;
  border-bottom: 0.02rem solid #edeff2;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* -webkit-transform: translateX(-50%); */
}

.input-name-box {
  top: 1.62rem !important;
}

.input-school-box {
  top: 2.89rem !important;
}

.input-class-box {
  top: 4.16rem !important;
}

.input-name-box span,
.input-school-box span,
.input-class-box span {
  display: flex;
  align-items: center;
  margin-right: 0.2rem;
}

.input-name-box img,
.input-school-box img,
.input-class-box img,
.input-school-box img,
.input-class-box img {
  width: 0.4rem;
  height: auto;
}

/* 输入框 */
.input-name-box input,
.input-school-box input,
.input-class-box input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 0.32rem;
  line-height: 0.68rem;
  color: #333;
}

/* 提示文字 */
.show-tips-txt,
.input-tips-txt {
  position: absolute;
  top: 9.7rem;
  width: 100%;
  text-align: center;
  line-height: 0.38rem;
  font-size: 0.26rem;
  color: #fff;
  font-weight: bold;
}
.show-tips-txt {
  top: 11.4rem;
}

/* 确认按钮 */
.input-sure-btn {
  position: absolute;
  background-color: rgb(252, 254, 255);
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  top: 10.72rem;
  width: 2.8rem;
  height: 0.96rem;
  text-align: center;
  list-style: 0.9rem;
  font-size: 0.32rem;
  color: #000;
  border-radius: 10rem;
}

/* 返回按钮 */
.input-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-3.35rem);
  top: 0.4rem;
  width: 0.58rem;
  height: 0.58rem;
}

.input-back-btn img {
  width: 0.5rem;
  height: 0.5rem;
}

.show-certificate-page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 7.5rem;
  background-color: #3461fd;
  display: none;
}

.shc-bg {
  position: relative;
  width: 100%;
}
.shc-bg img {
  display: block;
  width: 100%;
}

.shc-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 13.34rem;
}

.shc-title {
  position: absolute;
  top: 1.18rem;
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  line-height: 0.48rem;
  font-weight: bold;
}

.shc-style {
  position: absolute;
  top: 3.18rem;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  width: 4rem;
  height: 5.66rem;
}

.shc-tips-txt {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 0.48rem;
  font-size: 0.26rem;
  color: #fff;
  top: 9.38rem;
}

.shc-continue-btn {
  position: absolute;
  background-color: rgb(252, 254, 255);
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  top: 10.72rem;
  width: 3.8rem;
  height: 0.96rem;
  text-align: center;
  font-size: 0.32rem;
  color: #000;
  border-radius: 10rem;
}
#shcContinue1Btn,
#shcContinueBtn {
  top: 10.2rem;
}
.shc-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-3.35rem);
  /* left: 0.4rem; */
  top: 0.4rem;
  width: 0.58rem;
  height: 0.58rem;
}

.my-certificate-page {
  position: absolute;
  top: 0;
  width: 100%;
  /* height: auto; */
  max-width: 7.5rem;
  background-color: #3461fd;
  background-image: url('../img/c_bg.jpg');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: none;
}

.mc-bg {
  position: relative;
  width: 100%;
}
.mc-bg img {
  display: block;
  width: 100%;
}
.mc-content {
  /* position: absolute; */
  position: relative;
  top: 0;
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}

.mc-top-title {
  padding-top: 1.18rem;
  /* margin-top: 1.18rem; */
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  line-height: 0.48rem;
  font-weight: bold;
}

.mc-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-3.35rem);
  /* left: 0.4rem; */
  top: 0.4rem;
  width: 0.58rem;
  height: 0.58rem;
}

.first_class_logo {
  position: relative;
  margin-top: 0.18rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 3.95rem;
  height: 3.59rem;
}

.mc-continue-btn,
.mc-continue-btn {
  position: relative;
  background-color: rgb(252, 254, 255);
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  margin-top: 0.44rem;
  width: 3.8rem;
  height: 0.96rem;
  text-align: center;
  font-size: 0.32rem;
  color: #000;
  border-radius: 10rem;
}

.mc-tips-txt {
  position: relative;
  width: 100%;
  text-align: center;
  line-height: 0.38rem;
  font-size: 0.26rem;
  color: #fff;
  font-weight: bold;
  margin-top: 0.48rem;
}
.tips-bt {
  top: 12rem;
}
.mc-title {
  margin-top: 1.18rem;
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  line-height: 0.48rem;
  font-weight: bold;
}

.mc-box {
  margin: 0 auto;
  position: relative;
  margin-top: 0.32rem;
  background-color: #fff;
  border-radius: 0.5rem;
  width: 6.82rem;
  /* margin-bottom: 1.5rem; */
}

.mc-box ul {
  padding: 0.7rem 1.75rem;
}

.mc-box ul li,
.mc-li {
  padding-bottom: 0.36rem;
}
.mc-no-txt {
  width: 100%;
  text-align: center;
  font-size: 0.26rem;
  line-height: 1;
  color: #999;
  margin: 1rem 0 0.64rem 0;
  /* margin: 1rem 0; */
}

.mc-save-txt {
  width: 100%;
  text-align: center;
  font-size: 0.26rem;
  line-height: 1;
  color: #999;
  margin-top: 0.3rem;
}

/* .login-page {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999 !important;
  background-color: #fff;
  display: none;
} */

.close-login-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.06666667rem;
  height: 1.06666667rem;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAb1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt6r1GAAAAJHRSTlMA/KrNUcP4Qgq/RQcTubWznkk3LCL0ozDqkUwmHA/cm3VbSjm8F2yqAAAA6UlEQVQ4y+3S25KDIBAE0JGEAQTRqNHc9t7//40bsk/LWDUfkPSb1CmproaeOnF2tBlffa8m7zfYaFz8fzKBd1KmDJuqsx6NkNeBWUAyQk4WCG0kTcYBTdd6IkWOAU12tZHSG8BeImlyXZj7VgAh5wDYA5Em00fD+d5Dk58W6Mq9mjwB4eJJSwdg15KaW4Hve9XNAx9PpZHi1se+RpVxue978KTJnwDuy76KTH3ZI5Imp4WPj/8p8moB2xJp8m0AZ+dJk2PZ18ndv+oeBgjfnoS0qSqCvx5Chlu13DlvvtOz83WXMdIrdX4B16QP+bmP60AAAAAASUVORK5CYII=) no-repeat 50%;
  background-size: 0.48rem 0.48rem;
  z-index: 11;
}

/* 首页底部 */
.home-bottom-tab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  height: 1rem;
  background-color: #fff;
  bottom: 0;
}

.home-bottom-tab ul {
  position: relative;
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}

.home-bottom-tab-ul li {
  width: 33.33%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.28rem;
  color: #333333;
  position: relative;
}

.home-bottom-tab-ul li:nth-child(1) {
  width: 40%;
}

.home-bottom-tab-ul li:nth-child(2) {
  width: 40%;
}

.home-bottom-tab-ul li:nth-child(3) {
  width: 20%;
}

.home-bottom-tab-ul .active {
  color: #146dfb;
}

.home-bottom-tab-ul .active:after {
  content: ' ';
  width: 0.2rem;
  height: 0.04rem;
  line-height: 0;
  font-size: 0;
  background: #146dfb;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  bottom: 0.05rem;
}

/* 弹窗 */
.pop-up {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999998;
}
.pop-box {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-width: 5.5rem;
  background-color: #fff;
  border-radius: 0.08rem;
  z-index: 999999;
}
.pop-box h1 {
  padding: 0.3rem 0 0;
  font-size: 0.32rem;
  text-align: center;
}
.pop-box p {
  margin: 0;
  padding: 0.15rem 0.3rem 0.3rem;
  font-size: 0.28rem;
  color: #777;
  line-height: 0.48rem;
  text-align: center;
}
.pop-box .pop-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: center;
  border-top: 0.02rem solid #eee;
}
.pop-box .pop-btn a {
  display: block;
  height: 0.8rem;
  font-size: 0.28rem;
  color: #8e8e93;
  line-height: 0.8rem;
  text-align: center;
  text-decoration: none;
}
.pop-box .pop-btn a:first-child {
  flex: 1;
}
.pop-box .pop-btn a:last-child {
  color: #1264e0;
}
.pop-box .pop-btn a.primary {
  width: calc(50% - 0.02rem);
  border-left: 0.02rem solid #eee;
}
.toast {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.3rem;
  width: fit-content;
  font-size: 0.28rem;
  color: #fff;
  line-height: 0.72rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.08rem;
  z-index: 999999;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0.2rem;
  z-index: 98;
}
.loading p {
  font-size: 0.26rem;
  color: #fff;
  text-align: center;
}
.loading-spinner {
  margin: 0.5rem auto 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../img/loading.png') no-repeat center center / 100% 100%;
  animation: turn 3s linear infinite;
  z-index: 99;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
/* 证书海报 */
.poster-cert {
  position: absolute;
  top: -9000px;
  left: 0;
  width: 1080px;
  height: 1528px;
  z-index: 9;
}
.poster-bg {
  width: 1080px;
  height: 1528px;
}
.poster-info {
  position: absolute;
  top: 550px;
  left: 0;
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.poster-name {
  margin: 0 100px 20px;
  text-align: center;
}
.poster-name b {
  display: inline;
  font-size: 72px;
  color: #e5b20f;
  line-height: 80px;
  letter-spacing: 2px;
  font-weight: bold;
}
.poster-name span {
  display: inline-block;
}
.poster-name,
.poster-name span {
  /* padding-left: 20px; */
  font-size: 60px;
  color: #333333;
  line-height: 80px;
  letter-spacing: 2px;
  font-weight: normal;
}
.poster-item {
  margin-bottom: 10px;
  width: 500px;
  font-size: 30px;
  color: #333333;
  line-height: 44px;
  text-align: left;
  font-weight: 500;
  letter-spacing: 1px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.poster-item span {
  flex: 1;
}
.poster-code {
  position: absolute;
  right: 120px;
  bottom: 130px;
  font-size: 18px;
  color: #333;
  line-height: 40px;
  text-align: right;
}
.barcode {
  position: absolute;
  top: 1120px;
  left: 150px;
  width: 240px;
  height: 90px;
  z-index: 11;
}

/*选择地区弹层*/
.express-area-box {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  background-color: #fff;
  border-radius: 0.12rem 0.12rem 0 0;
  color: #4d525d;
  line-height: 0.8rem;
  z-index: 999;
  transition: bottom 0.3s ease;
}

.express-area-box header {
  position: relative;
  border-bottom: 0.01rem solid #eee;
}

.express-area-box header h3 {
  line-height: 0.68rem;
  text-align: center;
}

.express-area-box header .back,
.express-area-box header .close {
  position: absolute;
  top: 0;
}

.express-area-box header .back {
  display: none;
  left: 0;
}

.express-area-box header .close {
  right: 0;
}

.express-area-box article {
  height: 6rem;
  overflow-y: scroll;
}
.area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.area-list li {
  text-align: center;
  /* padding: 0 .3rem; */
  width: 33.3333%;
  white-space: nowrap;
}

/* @media (min-width: 720px) {
  .express-area-box {
    left: 50%;
    margin-left: -50%;
    width: 750px;
  }
} */

/*遮罩层*/
.mask-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.selet-area-wrap {
  display: -webkit-box;
  width: 100%;
  height: 0.68rem;
  /* padding: 0 .3rem; */
  background: #f1f1f1;
}
.selet-area-wrap p {
  -webkit-box-flex: 1;
  text-align: center;
  width: 100%;
  line-height: 0.68rem;
}
.selet-area-wrap span {
  display: inline-block;
  text-align: center;
  padding-left: 0;
  position: relative;
  width: auto;
}
.selet-area-wrap span.current {
  color: #3461fd;
}
.selet-area-wrap span.current:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.02rem;
  background: #449fff;
  top: 0.66rem;
}

.hot-city {
  padding: 0 0.3rem;
}
.hot-city p {
  color: #bbb;
}
.hot-city ul {
  padding: 0 0.3rem;
}
.hot-city li {
  display: inline-block;
  width: 17.7%;
  text-align: center;
  margin: 0% 3%;
}
/* 搜索框 */
.autocomplete-suggestions {
  text-align: left;
  cursor: default;
  border: 1px solid #ccc;
  border-top: 0;
  background: #fff;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
  position: absolute;
  display: none;
  z-index: 9999;
  max-height: 254px;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.autocomplete-suggestion {
  position: relative;
  padding: 0 0.6em;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.02em;
  color: #333;
}
.autocomplete-suggestion b {
  font-weight: 400;
  color: #1f8dd6;
}
.autocomplete-suggestion.selected {
  background: #f0f0f0;
}
.autocomplete-suggestion {
  font-size: 0.28rem;
  line-height: 0.46rem;
}
.autocomplete-suggestions {
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}