@charset "utf-8";
/*Npcink

	版本：1.0
	整理：Muze
	帮助：https://www.npc.ink/21029.html
*/
.n-bg {
  max-width: 1230px;
  margin: 0 auto;
}
/*用户中心*/
.vip-banner,
.vip-banner .user {
  display: -webkit-flex;
  align-items: center;
}
.vip-banner {
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 235px;
  padding: 0 120px 65px;
  background: url("4be58b8da844004b-web.webp") 50% / cover no-repeat;
  font-weight: 300;
  color: #fff;
}

/*头像*/
.vip-banner .user .avatar img {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: transparent url("23102fb6f0c7ea3a.jpg") 50% / cover no-repeat;
}

/*描述*/
.vip-banner .user .info {
  margin-left: 20px;
}

.vip-banner .user .info strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}

/*我的订单*/
.vip-banner .order {
  display: flex;
  align-items: center;
}

.vip-banner .order .button {
  margin-left: 10px;
  font-size: 32px;
  color: #000;

  border-radius: 20px;
  line-height: 40px;
  background-color: #f2f2f2;
}

.vip-banner .order .button .iconfont {
  width: 40px;
  text-align: center;
}

/*表格*/
.vip-swiper {
  display: flex;
}

.vip-swiper .swiper-slide {
  width: 360px;
  padding: 15px;
}

.vip-swiper .swiper-slide {
  width: 360px;
  padding: 15px;
}

/*边框*/
.vip-card {
  height: 392px;
  margin: 0 auto;
  padding: 20px 20px 30px;
  border-radius: 4px;
  background: #fff;
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/*卡片*/
.card-88vip .card {
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#4e4e4e),
    to(#131312)
  );
  background-image: -o-linear-gradient(top left, #4e4e4e, #131312);
  background-image: linear-gradient(to bottom right, #4e4e4e, #131312);
}

.vip-card,
.vip-card .card {
  width: 320px;
  position: relative;
}

.vip-card .card {
  height: 163px;
  border-radius: 8px;
}

.card-88vip .card:after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url("4f85df929c767090.png") 50% / cover no-repeat;
}

/*LOGO*/
.card-88vip .card .logo {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 20px;
  width: 140px;
  height: 14px;
  background: url("03d92113fea01b46.png") 50% / contain no-repeat;
}

/*图标*/
.card-88vip .card .company-logo {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  right: 20px;
  width: 50px;
  height: 9px;
  background: url("a1543d154a7860c0.png") 50% / contain no-repeat;
}

/*描述*/

.vip-card .card .info {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 10px;
  color: #fff;
}

.card-88vip .card .info {
  color: #e7b986;
  opacity: 0.77;
  font-size: 14px;
}
.vip-card .card .info strong {
  display: block;
  line-height: 20px;
}

.vip-card .card .info p {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}

/*图标*/
.vip-card .welfare {
  display: flex;
  flex-wrap: wrap;
}

.vip-card .welfare .unit {
  width: 25%;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}

/*图标*/
.vip-card .welfare .unit .iconfont {
  font-size: 40px;
  font-weight: 1;
  color: #ff410f;
}

.iconfont {
  font-family: iconfont;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vip-card .welfare .unit p {
  margin: 5px 0 0;
  color: #999;
  line-height: 17px;
  font-size: 12px;
}

/*描述*/
.vip-card .notice {
  margin: 40px 5px 0;
  color: grey;
  font-size: 12px;
}

/*卡片二*/
.card-svip .card {
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#4c4c4c),
    to(#000)
  );
  background-image: -o-linear-gradient(top left, #4c4c4c, #000);
  background-image: linear-gradient(to bottom right, #4c4c4c, #000);
}

/*LOGO*/
.card-svip .card .logo {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 105px;
  height: 42px;
  background: url("c574432ef0ecedf4.png") 50% / contain no-repeat;
}

/*背景图*/
.card-svip .card:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  width: 148px;
  height: 113px;
  background: url("0ec1bc933ffe5eed.png") 50% / contain no-repeat;
}
/*卡片三*/

.card-trial .card {
  background-image: -o-linear-gradient(238deg, #d3c7ad 0, #c49933 100%);
  background-image: linear-gradient(-148deg, #d3c7ad, #c49933);
}

.card-trial .card .logo {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 116px;
  height: 24px;
  background: url("7a016cda86ef759e.png") 50% / contain no-repeat;
}

.card-trial .card .tip {
  position: absolute;
  right: 0;
  top: 0;
  width: 49px;
  height: 17px;
  background: url("dcde3ea3d3e7a73f.png") 50% / contain no-repeat;
}

.card-trial .card .description {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 64px;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
}

.card-trial .card:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  width: 112px;
  height: 112px;
  background: url("84624443373e28f8.png") 50% / contain no-repeat;
}