.page {
  width: 7.5rem;
  min-height: 100%;
  margin: 0 auto;
  background: #161622;
  overflow: hidden;
  position: relative;
}

.top {
  height: 1rem;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1rem;
  text-align: center;
  position: relative;
}

.top .profile {
  width: .52rem;
  height: .52rem;
  position: absolute;
  top: .24rem;
  left: .2rem;
}

.top span {
  font-weight: 600;
}

.setbtn {
  width: 1.68rem;
  height: 0.52rem;
  padding-left: .46rem;
  background: #FF3F3F;
  border-radius: 0.08rem;
  font-size: 0.26rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.52rem;
  text-shadow: 0px 0px 0px #4A151E;
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
}

.setbtn::before {
  content: "";
  width: .2rem;
  height: .28rem;
  background: url("../img/ring@2x.png") 100%/100% no-repeat;
  position: absolute;
  top: .12rem;
  left: .18rem;
}

.top-banner {
  width: 7.1rem;
  height: 2.4rem;
  margin: 0 auto;
  background: #E0E0E0;
  box-shadow: 0rem 0.04rem 0.2rem 0rem #4A151E;
  border-radius: 0.16rem;
  position: relative;
  overflow: hidden;
}

.top-banner .swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top-banner .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiper-pagination-bullet {
  width: 0.3rem;
  height: 0.06rem;
  background: #FFFFFF;
  box-shadow: 0rem 0.04rem 0.2rem 0rem #4A151E;
}

.swiper-pagination-bullet-active {
  width: 0.3rem;
  height: 0.06rem;
  background: #FF3F3F;
  box-shadow: 0rem 0.04rem 0.2rem 0rem #4A151E;
}

.top-banner .setbtn {
  right: .1rem;
  bottom: .16rem;
}

/* -------------------------------------------- */

.top-header img {
  width: 100%;
}
.page .form {
  width: 7.02rem;
  height: 4.62rem;
  margin: -3.56rem auto 0;
  padding: .4rem .28rem;
  position: relative;
  background: url("../img/home/bg_card@2x.png") 100%/100% no-repeat;
  box-sizing: border-box;
}
.page .form .form-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page .form .form-content input {
  width: 4rem;
  height: 0.84rem;
  padding: 0 .32rem;
  background: #48488D;
  border-radius: 0.16rem;
  border: none;
  font-size: 0.3rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #CDCDF6;
}
.page .form .form-content a {
  width: 2.18rem;
  height: .84rem;
  background: url("../img/home/btn@2x.png") 100%/100% no-repeat;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.84rem;
  text-align: center;
  text-decoration: none;
}

.page .form .info .title {
  margin: .3rem 0 .16rem;
  display: flex;
  align-items: center;
}

.page .form .info .title .check {
  width: .28rem;
  height: .3rem;
  margin-right: .12rem;
  background: url("../img/home/check.png") 100%/100% no-repeat;
}

.page .form .info .title .check.checked {
  background: url("../img/home/checked.png") 100%/100% no-repeat;
}

.page .form .info .title .text {
  height: 0.28rem;
  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #E8E8FC;
  line-height: 0.28rem;
  letter-spacing: -1px;
}

.page .form .info .desc {
  font-size: 0.18rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #B2B2E0;
  line-height: 0.26rem;
}

.page .form .info .link {
  height: 0.26rem;
  margin: .08rem 0 .06rem;
  font-size: 0.18rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 0.26rem;
  display: block;
  text-decoration: none;
}


.container {
  padding: 0 .3rem;
}

.tablist {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tablist .menu {
  width: .44rem;
  height: .44rem;
}

.tablist .menu img {
  width: 100%;
}

.tablist .left {
  width: 6.2rem;
  height: 1rem;
  overflow: hidden;
}

.tablist .left .wrapper {
  overflow-x: auto;
}

.tablist .list {
  height: 1.5rem;
  display: flex;
}

.tablist .list .item {
  height: 1rem;
  margin-right: .48rem;
  font-size: 0.34rem;
  position: relative;
}

.tablist .list .item a {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 1rem;
  white-space: nowrap;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.tablist .list .item.active {
  position: relative;
}

.tablist .list .item.active a {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

.tablist .list .item.active::after {
  content: "";
  width: 0.38rem;
  height: 0.04rem;
  background: #FF3F3F;
  border-radius: 0.02rem;
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  transform: translateX(-50%);
}

.con {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.con .item {
  width: 3.38rem;
  height: 6.02rem;
  margin-bottom: .16rem;
  background: #E0E0E0;
  border-radius: .1rem;
  overflow: hidden;
  position: relative;
}

.con .item img {
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.con .item .desc {
  width: 3.38rem;
  height: 1.66rem;
  padding: .28rem .14rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%);
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.36rem;
  text-shadow: 0px 0px 0px #000000;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
}

.con .item .setbtn {
  right: .2rem;
  bottom: .3rem;
}

.menu-wrap {
  position: relative;
}

.menu-wrap.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.menu-wrap.fixed .tablist {
  padding: 0 .3rem;
  background-color: #161622;
}

.menu-wrap.fixed .fixedmenu {
  left: 0;
}

.fixedmenu {
  width: 7.5rem;
  padding: 0 .3rem .42rem;
  background-color: #161622;
  position: absolute;
  top: 0;
  left: -.3rem;
  right: 0;
  box-sizing: border-box;
  z-index: 20;
  display: none;
}

.fixedmenu .title {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.fixedmenu .title .left {
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

.fixedmenu .title .right {
  width: .44rem;
  height: .44rem;
}

.fixedmenu .con {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.fixedmenu .con .menu-item {
  width: 1.6rem;
  height: 0.72rem;
  margin-right: .16rem;
  margin-bottom: .16rem;
  background: #2A2A42;
  border-radius: 0.04rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.72rem;
  text-align: center;
  box-sizing: border-box;
}

.fixedmenu .con .menu-item:nth-child(4n) {
  margin-right: 0;
}

.fixedmenu .con .menu-item.active {
  background: rgba(255, 63, 63, 0.2);
  border: 0.02rem solid #FF3F3F;
}

.login-wrap {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.login-wrap .login-modal {
  width: 5.6rem;
  height: 6.12rem;
  padding: .78rem .58rem .5rem;
  background: #252544;
  border-radius: 0.24rem;
  box-sizing: border-box;
  position: relative;
}

.login-wrap .login-modal .close {
  width: .46rem;
  height: .46rem;
  position: absolute;
  top: .22rem;
  right: .22rem;
}

.login-wrap .login-modal .title {
  height: 0.48rem;
  margin-bottom: .54rem;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.48rem;
}

.login-wrap .login-modal .input {
  width: 4.44rem;
  height: .65rem;
  margin: 0 auto .8rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid #9F9A9A;
  box-sizing: border-box;
  position: relative;
}

.login-wrap .login-modal .input input {
  width: 60%;
  height: 0.44rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 0.44rem;
  border: none;
  background: transparent;
  outline: none;
}

.login-wrap .login-modal .input .errmsg {
  height: 0.36rem;
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FF0000;
  line-height: 0.36rem;
  position: absolute;
  left: 0;
  bottom: -.7rem;
}

.login-wrap .login-modal .input-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-wrap .login-modal .auth {
  height: 0.44rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 0.44rem;
}

.login-wrap .login-modal .time {
  height: 0.44rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 0.44rem;
  opacity: .5;
  display: none;
}

.login-wrap .login-modal .getbtn {
  width: 4.44rem;
  height: 0.8rem;
  margin: 0 auto;
  background: #FF3F3F;
  border-radius: 0.12rem;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.8rem;
  text-align: center;
}


.overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 20;
}

.overlay .modal {
  width: 6.4rem;
  max-height: 100%;
  padding: .48rem .58rem .58rem;
  background: #D72368;
  box-shadow: inset 0rem 0rem 0.48rem 0.06rem rgba(255, 255, 255, 0.5);
  border-radius: 0.38rem;
  box-sizing: border-box;
}

.overlay .modal .title {
  height: 0.48rem;
  margin-bottom: .3rem;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.48rem;
  text-align: center;
}

.overlay .modal .content {
  max-height: 4rem;
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.36rem;
  overflow: auto;
}

.overlay .modal .btn {
  width: 4.48rem;
  height: 1rem;
  margin: .34rem auto 0;
  background: #FFFFFF;
  border-radius: 0.5rem;
  text-align: center;
  overflow: hidden;
  display: block;
}

.overlay .modal .btn img {
  width: 1.26rem;
  margin-top: .3rem;
}

.overlay .modal .close {
  height: 0.5rem;
  padding: 0.12rem;
  margin-top: .28rem;
  font-size: 0.36rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.5rem;
  text-align: center;
}

.overlay.orderModal .modal .content {
  max-height: 100%;
}

/*sasd*/


.zhezhao {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 20;
}

.zhezhao .modal {
  width: 6.4rem;
  max-height: 100%;
  padding: .48rem .58rem .58rem;
  background: #D72368;
  box-shadow: inset 0rem 0rem 0.48rem 0.06rem rgba(255, 255, 255, 0.5);
  border-radius: 0.38rem;
  box-sizing: border-box;
}

.zhezhao .modal .title {
  height: 0.48rem;
  margin-bottom: .3rem;
  font-size: 0.34rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.48rem;
  text-align: center;
}

.zhezhao .modal .content {
  max-height: 4rem;
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.36rem;
  overflow: auto;
}

.zhezhao .modal .btn {
  width: 4.48rem;
  height: 1rem;
  margin: .34rem auto 0;
  background: #FFFFFF;
  border-radius: 0.5rem;
  text-align: center;
  overflow: hidden;
  display: block;
}

.zhezhao .modal .btn img {
  width: 1.26rem;
  margin-top: .3rem;
}

.zhezhao .modal .close {
  height: 0.5rem;
  padding: 0.12rem;
  margin-top: .28rem;
  font-size: 0.36rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.5rem;
  text-align: center;
}

.zhezhao.orderModal .modal .content {
  max-height: 100%;
}