@charset "UTF-8";
.vip-body .vip-pricing-content {
  position: relative;
  padding-top: 1.325rem;
}
.vip-body .vip-pricing-content .page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 11.875rem;
  background: linear-gradient(180deg, #FFF3D8 0%, #F9F0EA 100%, #FFE8DE 100%);
}
.vip-body .vip-pricing-content .page-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/vip/vip-bg-light.png) no-repeat center top;
  background-size: auto 100%;
}
.vip-body .vip-pricing-content .container {
  position: relative;
  z-index: 2;
}
.vip-body .vip-title {
  font-weight: 600;
  font-size: 0.65rem;
  color: #333333;
}
.vip-body .vip-desc-list {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
}
.vip-body .vip-desc-list .vip-desc-item {
  font-size: 20px;
  color: #333333;
  margin-right: 0.5rem;
}
.vip-body .vip-desc-list .vip-desc-item:last-child {
  margin-right: 0;
}
.vip-body .member-plan {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  height: 6.15rem;
  border-radius: 0.4rem;
  background: url(../images/vip/member-plan-bg1.jpg) no-repeat center center;
  background-size: contain;
  padding: 0.625rem 0.725rem;
}
.vip-body .member-plan .plan-title {
  font-weight: 600;
  font-size: 0.6rem;
  color: #FFD4B3;
  display: flex;
  align-items: center;
}
.vip-body .member-plan .plan-title::after, .vip-body .member-plan .plan-title::before {
  content: "";
  display: block;
  width: 0.35rem;
  height: 0.4rem;
  margin: 0 0.25rem;
  background: url(../images/vip/titls-stars.png) no-repeat center center;
  background-size: contain;
}
.vip-body .member-plan .plan-title::before {
  margin-left: 0;
}
.vip-body .member-plan .plan-desc {
  font-size: 0.225rem;
  color: #FFD7A3;
  margin-top: 0.325rem;
}
.vip-body .member-plan .plan-stars {
  position: absolute;
  right: 0;
  top: -1.5rem;
  width: 4.6rem;
  height: 4.3125rem;
}
.vip-body .product-pricing {
  position: relative;
  margin-top: -3.3125rem;
  padding: 0 0.2rem;
}
.vip-body .product-pricing .swiper-slide {
  padding: 0.5rem 0.15rem;
}
.vip-body .product-pricing .premium-item {
  position: relative;
  min-width: 3.75rem;
  height: 5.5rem;
  background: #FFFFFF;
  box-shadow: 0 0 0.25rem 0 rgba(84, 71, 57, 0.27);
  border-radius: 0.4rem;
  padding: 0.675rem 0.275rem;
}
.vip-body .product-pricing .premium-item .premium-time {
  font-size: 0.275rem;
  font-weight: 500;
  color: #483B2B;
}
.vip-body .product-pricing .premium-item .premium-price {
  margin-top: 0.15rem;
}
.vip-body .product-pricing .premium-item .premium-price .price-number {
  font-size: 0.8rem;
  color: #FF6702;
  font-weight: bold;
}
.vip-body .product-pricing .premium-item .premium-price .unit {
  font-size: 0.2rem;
  color: #3A322A;
}
.vip-body .product-pricing .premium-item .premium-price .original-price {
  font-size: 0.2rem;
  color: #3A322A;
  text-decoration: line-through;
}
.vip-body .product-pricing .premium-item .premium-desc {
  font-size: 0.175rem;
  color: #666666;
}
.vip-body .product-pricing .premium-item .info-list {
  margin-top: 0.375rem;
}
.vip-body .product-pricing .premium-item .info-list .info-item {
  font-weight: 500;
  font-size: 0.225rem;
  color: #483B2B;
  margin-top: 0.175rem;
}
.vip-body .product-pricing .premium-item .info-list .info-item::before {
  content: "\e622";
  font-family: "iconfont";
  font-size: 0.225rem;
  color: #B89D79;
}
.vip-body .product-pricing .premium-item .info-list .info-item:first-child {
  margin-top: 0;
}
.vip-body .product-pricing .premium-item .premium-ratio {
  display: none;
  position: absolute;
  top: -0.375rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: 3.05rem;
  height: 0.725rem;
  font-size: 0.275rem;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
  background: url(../images/vip/ratio-bg.png) no-repeat center center;
  background-size: contain;
  padding-top: 0.3rem;
}
.vip-body .product-pricing .premium-item .welfare-today {
  position: absolute;
  right: 0.475rem;
  top: 1.8rem;
  width: 1.15rem;
  height: 0.95rem;
}
.vip-body .product-pricing .premium-item .button-warp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.575rem 0.275rem;
}
.vip-body .product-pricing .premium-item .purchase-button {
  width: 100%;
  height: 0.8rem;
  background-color: #272120;
  border-radius: 0.1rem;
  font-weight: 500;
  font-size: 0.3rem;
  color: #FFD9AB;
}
.vip-body .product-pricing .premium-item .purchase-button:hover {
  background-color: #FF6702;
  color: #fff;
}
.vip-body .product-pricing .premium-item .countdown {
  position: absolute;
  top: 0.625rem;
  right: 0.575rem;
}
.vip-body .product-pricing .premium-item .countdown::before {
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.75rem;
  background: url(../images/vip/countdown.png) no-repeat center center;
  background-size: contain;
}
.vip-body .product-pricing .premium-item .countdown .countdown-text {
  position: absolute;
  bottom: -0.225rem;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 0 0.125rem;
  height: 0.3rem;
  background: linear-gradient(45deg, #FF804A 0%, #FF4249 100%);
  border: 0.0125rem solid #FFFFFF;
  border-radius: 0.15rem;
  font-weight: 500;
  font-size: 0.15rem;
  color: #FFFFFF;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-body .product-pricing .premium-item .countdown .countdown-text .number {
  font-size: 0.175rem;
  margin-left: 0.075rem;
}
.vip-body .product-pricing .premium-item.active {
  border: 0.05rem solid #E6CFA5;
}
.vip-body .product-pricing .premium-item.active .premium-ratio {
  display: block;
}
.vip-body .product-pricing .pricing-button-next,
.vip-body .product-pricing .pricing-button-prev {
  position: absolute;
  z-index: 20;
  top: 1.75rem;
  left: -0.375rem;
  width: 0.8rem;
  height: 0.8rem;
  background: #FFFFFF;
  box-shadow: 0 0 0.075rem 0 rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: #666;
  cursor: pointer;
  transition: all 0.1s linear;
}
.vip-body .product-pricing .pricing-button-next {
  left: auto;
  right: -0.375rem;
  cursor: pointer;
}
.vip-body .product-pricing .swiper-button-disabled {
  opacity: 0;
}

.section-header .title {
  font-weight: 600;
  font-size: 0.65rem;
  color: #333333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-header .title::after, .section-header .title::before {
  content: "";
  display: block;
  width: 0.35rem;
  height: 0.4rem;
  margin: 0 0.35rem;
  background: url(../images/vip/titls-stars.png) no-repeat center center;
  background-size: contain;
}
.section-header .desc {
  font-size: 24px;
  color: #666666;
  text-align: center;
  margin-top: 0.375rem;
}

.vip-rights {
  margin-top: 1.1rem;
}
.vip-rights .rights-table {
  position: relative;
  width: 100%;
  border: 0.025rem solid #DFC6A8;
  border-collapse: collapse;
}
.vip-rights .rights-table .vip-button {
  width: 2.1rem;
  height: 0.7rem;
  background: linear-gradient(90deg, #FFEEC3 0%, #FFCA9F 52%, #FCB3C5 100%);
  border-radius: 0.35rem;
  text-align: center;
  font-weight: 500;
  font-size: 0.3rem;
  color: #6C5A44;
}
.vip-rights .rights-table .vip-button:hover {
  color: #000;
}
.vip-rights .rights-table .experience-button {
  width: 2.1rem;
  height: 0.7rem;
  border-radius: 0.35rem;
  border: 2px solid #ECA672;
  background-color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 0.3rem;
  color: #BC9D79;
}
.vip-rights .rights-table .experience-button:hover {
  background-color: rgba(236, 166, 114, 0.2);
}
.vip-rights .rights-table .t-head .td {
  font-weight: 600;
  font-size: 0.5rem;
  color: #333333;
  height: 2.625rem;
}
.vip-rights .rights-table .t-head .td:nth-child(3) {
  background: rgba(255, 188, 0, 0.1);
}
.vip-rights .rights-table .t-body .th:nth-child(2n+1) {
  background-color: #FBF9F8;
}
.vip-rights .rights-table .t-body .td {
  font-weight: 500;
  font-size: 0.35rem;
  color: #333333;
  height: 1.3rem;
}
.vip-rights .rights-table .t-body .td:nth-child(3) {
  color: #DCA35D;
  background: rgba(255, 188, 0, 0.1);
}
.vip-rights .rights-table .t-body .td:nth-child(2) {
  color: #999999;
}
.vip-rights .rights-table .t-body .icon-invalid {
  font-size: 0.45rem;
  color: #999999;
}
.vip-rights .rights-table::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 33.33%;
  background: rgba(255, 188, 0, 0);
  box-shadow: 0 0.125rem 0.25rem 0 rgba(207, 172, 74, 0.28);
  pointer-events: none;
}

.vip-statistics ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vip-statistics ul li {
  width: 4.275rem;
  height: 2.8rem;
  background: #FBF3EB;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vip-statistics ul li .label {
  font-size: 0.3rem;
  color: #483B2B;
  margin-top: 0.125rem;
}
.vip-statistics ul li .value {
  color: #DCA35D;
  font-size: 0.3rem;
  font-weight: 500;
}
.vip-statistics ul li .value .number {
  font-size: 0.8rem;
}
.vip-statistics ul li .value .unit {
  font-size: 0.5rem;
}

.advantage-section .advantage-list {
  width: 8.5rem;
}
.advantage-section .advantage-list li {
  margin-bottom: 0.475rem;
}
.advantage-section .advantage-list li:last-child {
  margin-bottom: 0;
}
.advantage-section .advantage-list li .title {
  font-size: 0.4rem;
  color: #333333;
  font-weight: bold;
}
.advantage-section .advantage-list li .desc {
  font-size: 0.225rem;
  color: #666666;
  margin-top: 0.25rem;
}
.advantage-section .advantage-image {
  display: block;
  width: 8.85rem;
  height: 5.5rem;
  border-radius: 0.25rem;
}

.common-problem ul li {
  width: 100%;
  background: #FBF2ED;
  border-radius: 0.2rem;
  margin-top: 0.4rem;
  padding: 0.525rem 0.6rem;
}
.common-problem ul li:first-child {
  margin-top: 0;
}
.common-problem ul li .title {
  font-size: 0.4rem;
  color: #333333;
  font-weight: bold;
}
.common-problem ul li .content {
  font-size: 0.3rem;
  color: #666666;
  margin-top: 0.275rem;
}
.common-problem ul li .problem-arrow {
  font-size: 0.5rem;
  color: #333333;
}
.common-problem .prompt {
  color: #909090;
  font-size: 0.2rem;
  text-align: center;
}

.customer-service {
  width: 100%;
}
.customer-service .service-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.customer-service .service-list li {
  width: 4.275rem;
  height: 3.9rem;
  background: linear-gradient(180deg, #FFEEDE 0%, #FFFFFF 100%);
  box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.09);
  border-radius: 0.4rem;
  padding: 0.625rem 0.5rem 0;
}
.customer-service .service-list li .icon-warp {
  width: 0.9rem;
  height: 0.9rem;
  background: #3C3230;
  box-shadow: inset 0 0 0.125rem 0 #FFE2BD;
  border-radius: 0.15rem;
  font-size: 0.425rem;
  color: #F0BD96;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.customer-service .service-list li .title {
  font-size: 0.325rem;
  color: #333333;
  text-align: center;
  margin-top: 0.3rem;
}
.customer-service .service-list li .desc {
  font-size: 0.225rem;
  color: #666666;
  text-align: center;
  margin-top: 0.4rem;
}

.pay-layer {
  border-radius: 0.25rem;
  background: url("../images/vip/vip-bg.png") no-repeat #F0F5FD;
  background-size: 100% auto;
}
.pay-layer .layui-layer-content {
  height: 100% !important;
}

.pay-layer-content {
  width: 100%;
  height: 100%;
}

.pay-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* 优惠显示 */
}
.pay-container .pay-title {
  font-size: 0.325rem;
  color: #007DFF;
  text-align: center;
}
.pay-container .pay-qrcode-warp {
  position: relative;
  width: 3rem;
  height: 3rem;
  border: 0.0125rem solid #007DFF;
  background-color: #fff;
  padding: 0.25rem;
  margin: 0.35rem auto 0;
}
.pay-container .pay-qrcode-warp .qrcode-image {
  width: 100%;
  height: 100%;
}
.pay-container .pay-qrcode-warp .loading-warp {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.pay-container .pay-qrcode-warp .loading-warp .icon-loading {
  font-size: 0.5rem;
  color: #409eff;
}
.pay-container .pay-qrcode-warp .qrcode-disabled {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.0625rem;
  font-size: 0.2rem;
  color: #999;
}
.pay-container .pay-amount {
  margin-top: 0.375rem;
  font-size: 0.25rem;
  color: #333333;
  text-align: center;
}
.pay-container .pay-amount .amount-symbols {
  color: #007DFF;
}
.pay-container .pay-amount .amount-number {
  font-size: 0.5rem;
  color: #007DFF;
}
.pay-container .discount-box {
  font-size: 0.2rem;
  margin-top: 0.1rem;
  color: #f56c6c;
}
.pay-container .discount-box .discount-number {
  font-size: 0.25rem;
  font-weight: bold;
  margin-left: 0.05rem;
}
.pay-container .pay-method {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.375rem;
}
.pay-container .pay-method .method-icon {
  width: 0.4rem;
  height: 0.4rem;
  display: block;
  margin: 0 0.0625rem;
}
.pay-container .pay-mode-tips {
  margin-top: 0.125rem;
  font-size: 0.2rem;
  color: #666666;
  text-align: center;
}
.pay-container .pay-check-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  color: #666;
  margin-top: 0.25rem;
}
.pay-container .pay-check-agreement .check-active,
.pay-container .pay-check-agreement .check-none {
  font-size: 0.25rem;
  color: #333;
  margin-right: 0.075rem;
}
.pay-container .pay-check-agreement .check-active {
  color: #007DFF;
}

.pay-method-select {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
  gap: 0.25rem;
}
.pay-method-select .method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0.025rem solid #ccc;
  padding: 0.125rem 0.25rem;
  border-radius: 0.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pay-method-select .method-item .method-icon {
  width: 0.4rem;
  height: 0.4rem;
  margin-bottom: 0.075rem;
}
.pay-method-select .method-item span {
  font-size: 0.2rem;
  color: #666;
}
.pay-method-select .method-item.active {
  border-color: #007DFF;
  background-color: rgba(0, 125, 255, 0.08);
}
.pay-method-select .method-item.active span {
  color: #007DFF;
  font-weight: bold;
}

/*# sourceMappingURL=vip.css.map */