/* pages/member/MemberGradeList/MemberGradeList.wxss */
.member-grade {
  background-color: #fff;
}

.member-grade .header {
  margin-bottom: 32rpx;
  width: 100%;
}

.member-grade .header .use-header {
  background-color: #3b3b4f;
  padding: 40rpx;
  position: relative;
  display: flex;
}

.member-grade .header .use-header .img {
  width: 120rpx;
  height: 120rpx;
  border: solid 4rpx #fff;
  border-radius: 50%;
  margin-right: 32rpx;
  overflow: hidden;
}

.member-grade .header .use-header .img image {
  width: 100%;
}

.member-grade .header .use-header .ul {
  text-align: left;
}

.member-grade .header .use-header .ul .li {
  line-height: 56rpx;
  color: #fff;
  font-size: 28rpx;
}

.member-grade .header .use-header .ul .name {
  font-weight: bold;
}

.member-grade .header .use-header .button {
  width: 21%;
  height: 52rpx;
  background-color: #fff;
  border-radius: 26rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 16rpx;
  position: absolute;
  margin-top: 34rpx;
  right: 20rpx;
}

.member-grade .header .time {
  background-color: rgba(59, 59, 79, 0.8);
  text-align: left;
  height: 72rpx;
  padding: 0 40rpx;
  display: flex;
}

.member-grade .header .time .font {
  font-size: 28rpx;
  line-height: 72rpx;
  color: #f5d59c;
}

.member-grade .header .time .font .span {
  font-weight: bold;
}

.member-grade .header .time icon {
  margin-right: 20rpx;
  font-size: 36rpx;
  color: rgb(245, 213, 156);
}

.member-grade .current {
  padding: 0 28rpx;
}

.member-grade .current .ul {
  padding: 0 32rpx;
  margin-bottom: 20rpx;
}

.member-grade .current .ul .li {
  line-height: 60rpx;
  text-align: left;
  display: flex;
  font-size: 28rpx;
}

.member-grade .current .ul .li .circur {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #f5d59c;
  margin-top: 22rpx;
  margin-right: 20rpx;
}

.member-grade .member-box {
  margin: 0 28rpx 32rpx 28rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx 1rpx rgba(0, 0, 0, 0.2);
}

.member-grade .top {
  margin-bottom: 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5d59c;
  border-radius: 12rpx 12rpx 0 0;
  color: #333;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-grade .top .h1 {
  text-align: left;
  margin-left: 24rpx;
}

.member-grade .top .go_buy {
  width: 144rpx;
  height: 52rpx;
  border-radius: 64rpx;
  font-size: 24rpx;
  color: #fff;
  border: none;
  background:
    -webkit-linear-gradient(
      left,
      rgba(68, 68, 88, 1),
      rgba(47, 47, 69, 1)
    );
}

.member-grade .title-box {
  display: flex;
  justify-content: space-between;
}

.member-grade .title-box .left {
  margin-left: 28rpx;
  width: 32%;
  height: 2rpx;
  background-color: #ccc;
  margin-top: 30rpx;
}

.member-grade .title-box .span {
  font-size: 32rpx;
  line-height: 60rpx;
}

.member-grade .title-box .right {
  width: 32%;
  height: 2rpx;
  background-color: #ccc;
  margin-top: 30rpx;
  margin-right: 28rpx;
}

.member-grade .bottom {
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5d59c;
  border-radius: 0 0 12rpx 12rpx;
  color: #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-grade .bottom .h1 {
  font-size: 32rpx;
  text-align: left;
  margin-left: 24rpx;
}

.member-grade .button {
  height: 52rpx;
  padding: 0 20rpx;
  color: #f5d59c;
  background-color: #3b3b4f;
  border-radius: 8rpx;
  line-height: 52rpx;
  text-align: center;
  margin-right: 28rpx;
}

.member-grade .member-box .ul {
  padding: 0 32rpx;
  margin-bottom: 20rpx;
}

.member-grade .member-box .ul .li {
  line-height: 60rpx;
  text-align: left;
  display: flex;
  font-size: 28rpx;
}

.member-grade .member-box .ul .li .circur {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #bbb;
  margin-top: 22rpx;
  margin-right: 20rpx;
}

.member-grade .introduce {
  background-color: #fff;
  border-bottom: solid 2rpx #e2e2e2;
}

.member-grade .introduce .h2 {
  margin-left: 28rpx;
  padding-right: 28rpx;
  font-size: 28rpx;
  line-height: 72rpx;
  border-bottom: solid 2rpx #e2e2e2;
  text-align: left;
}

.member-grade .introduce .p {
  margin: 0 28rpx;
  line-height: 40rpx;
  text-align: left;
  padding: 20rpx 0;
}

.member-grade .service {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: 90rpx;
  background-color: #3b3b4f;
  display: flex;
  justify-content: center;
}

.member-grade .service .left icon {
  font-size: 40rpx;
  color: rgb(245, 213, 156);
}

.member-grade .service {
  display: flex;
  justify-content: center;
  align-items: center;
}

.member-grade .service .span {
  margin-left: 20rpx;
  color: #f5d59c;
  font-size: 28rpx;
  background-color: #3b3b4f;
}

/* kefu */
.icon-close11 {
  position: absolute;
  right: 4%;
  top: 0;
  font-size: 18px;
  color: #000;
}

.pop-content {
  background-color: #fff;
  border-radius: 38rpx;
  text-align: center;
  background: #fff;
  padding: 35rpx 0;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 650rpx;
}

.pop-content .pop-top {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pop-content .pop-top .left {
  width: 50%;
  display: flex;
  justify-content: center;
  position: relative;
}

.pop-content .pop-top .left .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pop-content .pop-top .left .wrap .image {
  width: 84rpx;
  height: 84rpx;
  margin: 0 auto;
  margin-bottom: 16rpx;
}

.pop-content .pop-top .left .wrap .image image {
  width: 100%;
  height: 100%;
}

.pop-content .pop-top .right {
  width: 50%;
  display: flex;
  justify-content: center;
}

.pop-content .pop-top .right .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pop-content .pop-top .right .wrap .image {
  width: 84rpx;
  height: 84rpx;
  margin: 0 auto;
  margin-bottom: 16rpx;
}

.pop-content .pop-top .right .wrap .image image {
  width: 100%;
  height: 100%;
}

.pop-content .line {
  width: 1px;
  height: 51rpx;
  background-color: #999;
}

.pop-bottom {
  margin-top: 32rpx;
  width: 327rpx;
  display: flex;
  justify-content: center;
  height: 327rpx;
}

.pop-bottom .image {
  width: 100%;
  height: 100%;
}

.pop-bottom .image image {
  width: 100%;
  height: 100%;
}

.kefuxiaoxi {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
}

.msgbox {
  line-height: 40rpx;
  box-sizing: border-box;
  padding: 20rpx;
}

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