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

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.drogue-bubble {
  width: 1.4rem;
  height: 1.84rem;
  position: fixed;
  top: 65%;
  right: 0;
  z-index: 9999;
}

.drogue-bubble-activity_image {
  width: 1.4rem;
  height: 1.4rem;
}

.drogue-bubble-activity_image img {
  width: 100%;
  height: 100%;
}

.drogue-bubble-close {
  width: 1.4rem;
  display: flex;
  justify-content: flex-end;
}

.drogue-bubble-close-button {
  width: 0.44rem;
  height: 0.44rem;
}

.drogue-bubble .icon {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  overflow: hidden;
  background-size: 100%;
}

.drogue-bubble.hidden {
  display: flex;
  transform: scale(0);
  transition: transform linear 100ms;
}

.drogue-bubble.show {
  transform: scale(1);
  transition: transform linear 100ms;
}

.drogue-bubble.shrink {
  transform: scale(0.9);
  transition: transform linear 100ms;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.rc-dialog-zoom-enter,
.rc-dialog-zoom-appear {
  opacity: 0;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-play-state: paused;
}

.rc-dialog-zoom-leave {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  animation-play-state: paused;
}

.rc-dialog-zoom-enter.rc-dialog-zoom-enter-active,
.rc-dialog-zoom-appear.rc-dialog-zoom-appear-active {
  animation-name: rcDialogZoomIn;
  animation-play-state: running;
}

.rc-dialog-zoom-leave.rc-dialog-zoom-leave-active {
  animation-name: rcDialogZoomOut;
  animation-play-state: running;
}

@keyframes rcDialogZoomIn {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes rcDialogZoomOut {
  0% {
    transform: scale(1, 1);
  }

  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}

@media (min-width: 768px) {
  .rc-dialog {
    width: 6rem;
    margin: 0.3rem auto;
  }
}

.rc-dialog-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #373737;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  filter: alpha(opacity=50);
  z-index: 1050;
}

.rc-dialog-mask-hidden {
  display: none;
}

.rc-dialog-fade-enter,
.rc-dialog-fade-appear {
  opacity: 0;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused;
}

.rc-dialog-fade-leave {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused;
}

.rc-dialog-fade-enter.rc-dialog-fade-enter-active,
.rc-dialog-fade-appear.rc-dialog-fade-appear-active {
  animation-name: rcDialogFadeIn;
  animation-play-state: running;
}

.rc-dialog-fade-leave.rc-dialog-fade-leave-active {
  animation-name: rcDialogFadeOut;
  animation-play-state: running;
}

@keyframes rcDialogFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rcDialogFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.wook-dialog-wrap.rc-dialog-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.wook-dialog-wrap .rc-dialog-content {
  position: relative;
  background-color: #ffffff;
  border: none;
  border-radius: 0.06rem 0.06rem;
  background-clip: padding-box;
}

.wook-dialog-wrap .rc-dialog-body {
  padding: 0.4rem;
  padding-bottom: 0.2rem;
}

.wook-dialog-wrap .rc-dialog-header {
  padding: 0.6rem 0.4rem 0.14rem;
  border-bottom: none;
  border-radius: 0.05rem 0.05rem 0 0;
  background: #fff;
  color: #666;
}

.wook-dialog-wrap .rc-dialog-title {
  color: #000;
  margin: 0;
  font-size: 0.34rem;
  line-height: 0.5rem;
  font-weight: bold;
}

.wook-dialog-wrap .center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wook-dialog-wrap .alert-content {
  max-height: 60vh;
  overflow: auto;
}

.wook-dialog-wrap .alert-content .content-style {
  color: #646464;
  line-height: 1.75;
  font-size: 0.32rem;
}

.wook-dialog-wrap .select-content {
  max-height: 5rem;
  overflow: auto;
}

.wook-dialog-wrap .confirm-button {
  overflow: hidden;
  margin-top: 0.6rem;
}

.wook-dialog-wrap .confirm-button div {
  float: right;
  color: #cf1717;
  font-size: 0.28rem;
  line-height: 0.7rem;
}

.wook-dialog-wrap .confirm-cancel {
  margin-left: 0.6rem;
}

.wook-dialog-wrap .wook-dialog {
  width: 5.4rem;
  position: relative;
  margin: 0;
}

.wook-dialog-wrap .wook-dialog.cancel-gray .confirm-cancel {
  color: #666;
}

.wook-dialog-wrap .wook-dialog.confirm-gray .confirm-sure {
  color: #666;
}

.wook-dialog-wrap .whats-app-special .confirm-cancel {
  color: #9e9e9e;
  margin-bottom: 0.2rem;
}

.wook-dialog-wrap .whats-app-special .confirm-sure {
  color: #d32f2f;
}

.wook-dialog-wrap .whatsapp-warn-tips .confirm-sure {
  color: #9e9e9e;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

@keyframes toastRot {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes toastFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.t-toast-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.01);
  height: 100%;
  z-index: 1070;
}

@keyframes toastLightFixTopIn {
  0% {
    transform: translate(-50%, -200%);
  }

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

@keyframes toastLightFixTopOut {
  0% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(-50%, -200%);
  }
}

@keyframes toastLightFixBottomIn {
  0% {
    transform: translate(-50%, 200%);
  }

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

@keyframes toastLightFixBottomOut {
  0% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(-50%, 200%);
  }
}

.t-toast-wrap {
  position: fixed;
  top: 0;
  z-index: 1070;
}

.t-toast-wrap .t-toast {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0.08rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0.04rem 0.04rem 0.08rem rgba(0, 0, 0, 0.3);
  z-index: 1071;
}

.t-toast-wrap .t-toast .t-toast-icon {
  margin-right: 0.2rem;
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: middle;
}

.t-toast-wrap .t-toast .t-toast-icon.toast-loading {
  animation: toastRot 0.9s infinite linear;
}

.t-toast-wrap .t-toast .t-toast-content {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  line-height: 1.5;
}

.t-toast-wrap .t-toast .toast-content {
  color: #fff;
  text-align: left;
  font-size: 0.32rem;
  min-width: 4rem;
  max-width: 5rem;
  padding: 0 0.2rem;
}

.t-toast-wrap .t-toast.t-toast-has-icon .toast-content {
  color: #fff;
  text-align: left;
  font-size: 0.32rem;
  margin: 0 0.2rem;
  padding: 0;
}

.t-toast-wrap .t-toast.t-toast-fade-enter,
.t-toast-wrap .t-toast.t-toast-fade-appear {
  opacity: 0;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-fade-enter-active,
.t-toast-wrap .t-toast.t-toast-fade-appear-active {
  animation-name: toastFadeIn;
}

.t-toast-wrap .t-toast.t-toast-fade-leave {
  opacity: 1;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-fade-leave-active {
  -webkit-animation-name: toastFadeOut;
  animation-name: toastFadeOut;
}

.t-toast-wrap .t-toast.t-toast-light-fix-top {
  top: 0.9rem;
  width: 6.9rem;
  left: 50%;
  transform: translate(-50%, 0);
  radius: 0;
  padding: 0.09rem 0;
}

.t-toast-wrap .t-toast.t-toast-light-fix-top-enter,
.t-toast-wrap .t-toast.t-toast-light-fix-top-appear {
  transform: translate(0, -200%);
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-light-fix-top-enter-active,
.t-toast-wrap .t-toast.t-toast-light-fix-top-appear-active {
  animation-name: toastLightFixTopIn;
}

.t-toast-wrap .t-toast.t-toast-light-fix-top-leave {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-light-fix-top-leave-active {
  animation-name: toastLightFixTopOut;
}

.t-toast-wrap .t-toast.t-toast-light-fix-bottom {
  bottom: 0.9rem;
  top: auto;
  width: 6.9rem;
  padding: 0.09rem;
  transform: translate(-50%, 0%);
}

.t-toast-wrap .t-toast.t-toast-light-fix-bottom-enter,
.t-toast-wrap .t-toast.t-toast-light-fix-bottom-appear {
  transform: translate(-50%, 200%);
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-light-fix-bottom-enter-active,
.t-toast-wrap .t-toast.t-toast-light-fix-bottom-appear-active {
  animation-name: toastLightFixBottomIn;
}

.t-toast-wrap .t-toast.t-toast-light-fix-bottom-leave {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.t-toast-wrap .t-toast.t-toast-light-fix-bottom-leave-active {
  animation-name: toastLightFixBottomOut;
}

.t-toast-wrap .t-toast.t-toast-loading .toast-content {
  min-width: 1.6rem;
  text-align: center;
}

.t-toast-wrap .t-toast.t-toast-loading .toast-content .t-toast-icon {
  display: block;
  margin: 0 auto 0.1rem auto;
  width: 0.6rem;
  height: 0.6rem;
}

.t-toast-fade-leave {
  opacity: 1;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.msg-notice__goods {
  padding: 0.2rem;
  font-size: 0.28rem;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.msg-notice__goods__item + .msg-notice__goods__item {
  margin-top: 0.2rem;
}

.msg-notice__goods__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msg-notice__goods__header .icon-notice {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.2rem;
  flex: none;
}

.msg-notice__goods__header .icon-close-gray {
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.2rem;
  flex: none;
}

.msg-notice__goods__content {
  padding-left: 1.1rem;
  margin-top: 0.2rem;
  display: flex;
}

.msg-notice__goods__content__img {
  margin-right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}

.msg-notice__goods__content__img img {
  width: 100%;
  height: 100%;
}

.msg-notice__goods__content__info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.msg-notice__goods__content__text {
  color: #f1a70b;
  flex: 1;
  margin-right: 0.3rem;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.msg-notice__goods__content .icon {
  width: 0.24rem;
  height: 0.36rem;
}

.msg-notice__goods__footer {
  padding-left: 1.1rem;
  margin-top: 0.2rem;
}

.msg-notice__goods__footer__btn {
  color: #2c8eda;
  text-decoration: underline;
  height: 0.32rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.msg-dialog {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  width: 7.5rem;
  z-index: 1005;
}

.msg-dialog .msg-body {
  transition: all linear 200ms;
  width: 7.1rem;
  box-shadow: 0 0.04rem 0.08rem #dbd9d9;
  margin: auto;
  overflow: hidden;
  background-color: #ffffff;
}

.msg-dialog .msg-body .icon-box {
  width: 1.3rem;
  height: 1.3rem;
  float: left;
}

.msg-dialog .msg-body .icon-box i {
  margin: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}

.msg-dialog .msg-body .container {
  position: relative;
  float: left;
  width: 5.4rem;
  margin-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.msg-dialog .msg-body .container .title {
  font-size: 0.32rem;
  color: #1f1f1f;
  font-weight: bold;
  margin-top: 0.08rem;
  height: 0.4rem;
  overflow: hidden;
  margin-bottom: 0.1rem;
}

.msg-dialog .msg-body .container .content {
  font-size: 0.26rem;
  height: 0.56rem;
  line-height: 0.28rem;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  margin-top: 0.2rem;
  color: #666;
}

.msg-dialog .msg-body .container .go {
  position: absolute;
  right: -0.4rem;
  width: 0.5rem;
  height: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
}

.msg-dialog .msg-body .container .go i {
  width: 0.5rem;
  height: 0.7rem;
  transform: rotate(180deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.msg-dialog .msg-body .container .btn-link {
  color: #2c8eda;
  text-decoration: underline;
  height: 0.32rem;
  margin-top: 0.2rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.pop-up {
  width: 68%;
  max-width: 7.5rem;
  padding: 0.2rem 0.5rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 100;
  border-radius: 0.08rem;
  color: #fff;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  font-size: 0.32rem;
  box-shadow: 0.04rem 0.04rem 0.08rem rgba(0, 0, 0, 0.3);
  word-break: break-word;
}

.pop-up .logo {
  width: 0.26rem;
  height: 0.26rem;
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.border-circle {
  border-radius: 0.46rem;
}

.pop-up-white {
  background-color: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.7);
}

.pop-up-err {
  background-color: rgba(255, 192, 203, 0.8);
  color: rgba(220, 20, 60, 0.8);
}

.pop-up-center {
  animation: popUpCenter 0.6s forwards linear;
}

.pop-up-top {
  animation: popUpTop 0.6s linear forwards;
}

.pop-up-bottom {
  animation: popUpBottom 0.6s linear forwards;
}

.pop-up-left {
  animation: popUpLeft 0.6s linear forwards;
}

.pop-up-right {
  animation: popUpRight 0.6s linear forwards;
}

@keyframes popUpCenter {
  from {
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  to {
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes popUpTop {
  from {
    bottom: 100vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    bottom: 86vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
}

@keyframes popUpBottom {
  from {
    top: 100vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    top: 86vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
}

@keyframes popUpLeft {
  from {
    right: 100vw;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }

  to {
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    opacity: 1;
  }
}

@keyframes popUpRight {
  from {
    left: 100vw;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }

  to {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.qr-rect {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  outline: 99.99rem solid rgba(0, 0, 0, 0.65);
}

.qr-rect .icon-scan-rect {
  width: 100%;
  height: 100%;
  background-size: contain;
}

.qr-line {
  position: absolute;
  left: 0;
  height: 0.04rem;
  width: 100%;
  -webkit-animation: qrScan 3s linear infinite alternate;
  animation: qrScan 3s linear infinite alternate;
}

.qr-tips {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;
  transform: translate(-50%);
  width: 150%;
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #fff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-close {
  position: absolute;
  z-index: 10;
  bottom: -4rem;
  left: 50%;
  transform: translate(-50%);
  width: 0.74rem;
  height: 0.74rem;
  opacity: 0.6;
}

@keyframes qrScan {
  from {
    top: 0;
  }

  to {
    top: 4.92rem;
  }
}

@-webkit-keyframes qrScan {
  from {
    top: 0;
  }

  to {
    top: 5rem;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.err-page {
  height: 100vh;
  width: 7.5rem;
  background: #fff;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.err-page .content {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.err-page .content span:first-child {
  display: block;
  width: 5.2rem;
  height: 3.2rem;
  margin: auto;
}

.err-page .content span:first-child i {
  width: 5.2rem;
  height: 3.2rem;
  background-size: 100%;
}

.err-page .content span:last-child {
  margin-top: 0.2rem;
  display: inline-block;
  font-size: 0.24rem;
  color: #666;
}

.err-page .content.loading span:first-child {
  width: 3rem;
  height: 1.2rem;
}

.err-page .content.loading span:first-child i {
  width: 3rem;
  height: 1.2rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.error-boundary .back-to-home {
  margin-top: 0.48rem;
}

.error-boundary .error-page {
  height: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.app-mark {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.app-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1003;
  display: none;
  align-items: center;
  justify-content: center;
}

.app-modal.show {
  display: flex;
  animation: modalFadeIn 300ms 1;
}

.app-modal.hide {
  display: flex;
  opacity: 0;
  transform: scale(0, 0);
  animation: modalFadeOut 300ms 1;
}

.app-modal .wrap {
  width: 5.6rem;
  background-color: #ffffff;
  box-shadow: 0 0.08rem 0.1rem 0 rgba(0, 0, 0, 0.14), 0 0.02rem 0.2rem 0 rgba(0, 0, 0, 0.12), 0 0.04rem 0.08rem -0.02rem rgba(0, 0, 0, 0.2);
  border-radius: 0.08rem;
  overflow: hidden;
}

.app-modal .wrap .body {
  max-height: 6.5rem;
  height: 50vh;
  overflow: auto;
  position: relative;
}

.app-modal .wrap .title {
  line-height: 0.8rem;
  font-size: 0.34rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem 0 0.4rem;
}

.app-modal .wrap .footer-box {
  text-align: right;
  border-top: 0.024rem solid #dbd9d9;
  height: 1rem;
  padding-top: 0.1rem;
}

.app-modal .wrap .footer-box .btn {
  color: #cf1717;
  margin-right: 0.4rem;
  height: 0.8rem;
}

.app-modal .wrap .footer-box .btn.cancel {
  color: #9e9e9e;
}

.app-modal .wrap .footer-box .btn.disabled {
  color: #9e9e9e;
  background-color: #fff;
}

.app-modal.large .wrap {
  width: 6.7rem;
}

.app-modal.large .wrap .body {
  min-height: 9rem;
}

.app-modal.all-screen .wrap {
  width: 7.5rem;
}

.app-modal.all-screen .wrap .body {
  height: 100vh;
}

.app-modal.middle .wrap {
  width: 6.7rem;
}

.app-modal.middle .wrap .body {
  height: 5.2rem;
  overflow: auto;
}

@keyframes modalFadeOut {
  from {
    transform: scale(1, 1);
    opacity: 1;
  }

  to {
    transform: scale(0, 0);
    opacity: 0;
  }
}

@keyframes modalFadeIn {
  from {
    transform: scale(0, 0);
    opacity: 0;
  }

  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.bottom-nav {
  width: 100%;
  max-width: 7.5rem;
  height: calc(1rem + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -0.02rem 0.06rem 0 rgba(0, 0, 0, 0.14);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  z-index: 100;
}

.bottom-nav ul {
  display: flex;
  justify-content: space-between;
}

.bottom-nav li {
  flex: 1;
  width: 20%;
  float: left;
  text-align: center;
  padding-top: 0.18rem;
  height: 1rem;
  position: relative;
}

.bottom-nav li span {
  display: block;
  width: 0.43rem;
  height: 0.43rem;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
}

.bottom-nav li .home {
  background-image: url(https://preapp.wook.id/image/icon_home.png);
}

.bottom-nav li .category {
  background-image: url(https://preapp.wook.id/image/icon_cate.png);
}

.bottom-nav li .pesan {
  background-image: url(https://preapp.wook.id/image/icon_pesanb.png);
}

.bottom-nav li .cart {
  background-image: url(https://preapp.wook.id/image/icon_cart.png);
}

.bottom-nav li .account {
  background-image: url(https://preapp.wook.id/image/icon_account.png);
}

.bottom-nav li .find {
  background-image: url(https://preapp.wook.id/image/icon_find.png);
}

.bottom-nav li .icon-num {
  padding: 0 0.05rem;
  width: 0.42rem;
  height: 0.42rem;
  position: absolute;
  text-align: center;
  top: 0.08rem;
  left: 0.7rem;
  right: 0;
  margin: auto;
  color: #cf1717;
  font-size: 0.24rem;
  line-height: 0.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  font-style: normal;
  font-weight: bold;
}

.bottom-nav li div {
  color: #9e9e9e;
  font-size: 0.24rem;
  line-height: 1.75;
}

.bottom-nav .active .home {
  background-image: url(https://preapp.wook.id/image/icon_home_s.png);
}

.bottom-nav .active .category {
  background-image: url(https://preapp.wook.id/image/icon_cate_s.png);
}

.bottom-nav .active .pesan {
  background-image: url(https://preapp.wook.id/image/icon_pesan_s.png);
}

.bottom-nav .active .cart {
  background-image: url(https://preapp.wook.id/image/icon_cart_s.png);
}

.bottom-nav .active .account {
  background-image: url(https://preapp.wook.id/image/icon_account_s.png);
}

.bottom-nav .active .find {
  background-image: url(https://preapp.wook.id/image/icon_find_s.png);
}

.bottom-nav .active div {
  color: #cf1717;
  font-size: 0.24rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.wook-popover {
  position: fixed;
  z-index: 140;
  display: none;
  background: #fff;
  border-radius: 0.08rem;
}

.wook-popover::after {
  content: '';
  position: absolute;
  height: 0.2rem;
  width: 0.2rem;
  background: transparent;
  transform: rotate(45deg);
}

.wook-popover.bottom-left::after {
  top: -0.1rem;
  right: 0.25rem;
}

.wook-popover.top-left::after {
  bottom: -0.1rem;
  right: 0.25rem;
}

.wook-popover.large {
  min-width: 2.6rem;
  box-shadow: 0 0.08rem 0.1rem 0 rgba(0, 0, 0, 0.14), 0 0.02rem 0.2rem 0 rgba(0, 0, 0, 0.12), 0 0.04rem 0.08rem -0.02rem rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.wook-popover.large::after {
  background: #fff;
  box-shadow: 0 0.08rem 0.1rem 0 rgba(0, 0, 0, 0.14), 0 0.02rem 0.2rem 0 rgba(0, 0, 0, 0.12), 0 0.04rem 0.08rem -0.02rem rgba(0, 0, 0, 0.2);
}

.wook-popover.large.visible {
  opacity: 1;
  visibility: visible;
}

.wook-popover.large .popover-item {
  position: relative;
  z-index: 10;
  height: 1rem;
  padding: 0 0.2rem;
  text-align: center;
  line-height: 1rem;
  white-space: nowrap;
  font-size: 0.28rem;
  color: #1f1f1f;
  border-bottom: 0.024rem solid #dbd9d9;
  background: #fff;
}

.wook-popover.large .popover-item:first-child {
  border-top-left-radius: 0.08rem;
  border-top-right-radius: 0.08rem;
}

.wook-popover.large .popover-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 0.08rem;
  border-bottom-right-radius: 0.08rem;
}

.wook-popover.small.visible {
  display: flex;
}

.wook-popover.small::after {
  background: #2e3133;
}

.wook-popover.small .popover-item {
  position: relative;
  z-index: 10;
  height: 0.6rem;
  padding: 0 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  white-space: nowrap;
  font-size: 0.24rem;
  color: #fff;
  border-right: 0.024rem solid #dbd9d9;
  border-color: #898f96;
  border-width: 0.01rem;
  background: #2e3133;
  letter-spacing: 0.04rem;
}

.wook-popover.small .popover-item:first-child {
  border-top-left-radius: 0.08rem;
  border-bottom-left-radius: 0.08rem;
}

.wook-popover.small .popover-item:last-child {
  border-right: none;
  border-top-right-radius: 0.08rem;
  border-bottom-right-radius: 0.08rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

header {
  height: 0.9rem;
  width: 100%;
}

header:last-of-type {
  box-shadow: 0 0.04rem 0.08rem #dbd9d9;
}

header .icon {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
}

header .icon-num {
  position: absolute;
  text-align: center;
  line-height: 0.4rem;
  width: 0.42rem;
  height: 0.42rem;
  font-size: 0.24rem;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 98%;
  font-style: normal;
  color: #cf1717;
}

header .icon-chat-history,
header .icon-header-more {
  width: 0.51rem;
  height: 0.52rem;
}

header .top {
  display: flex;
  justify-content: space-between;
  height: calc(0.9rem + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  border-bottom: 0.024rem solid #dbd9d9;
  line-height: 0.9rem;
  background-color: #ffffff;
}

header .top .active i.icon {
  position: relative;
}

header .top .active i.icon:after {
  content: '';
  position: absolute;
  width: 0.22rem;
  height: 0.22rem;
  border: 0.03rem solid #fff;
  border-radius: 50%;
  background: #e60e0e;
  top: -0.05rem;
  right: 0;
}

header .top .back {
  width: 1.7rem;
  height: 0.9rem;
  float: left;
  display: flex;
  align-items: center;
  margin-left: 0.2rem;
}

header .top .back .icon-back {
  width: 0.65rem;
  height: 0.65rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

header .top .logo {
  width: 1.7rem;
  display: block;
  float: left;
  height: 0.9rem;
}

header .top .logo .icon {
  width: 1.3rem;
  height: 0.38rem;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 0.3rem;
  margin-left: 0.24rem;
}

header .top .p-title {
  flex: 1;
  text-align: center;
  display: block;
  font-size: 0.34rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  height: 0.9rem;
}

header .top .p-title span {
  display: block;
  width: 100%;
  max-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .top .cart-btn {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  position: relative;
  float: right;
}

header .top .cart-btn .icon-cart-gray {
  margin-top: 0.16rem;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

header .top .cart-btn .icon-cart-gray.active {
  background-image: url(https://preapp.wook.id/image/icon_cart_active.png);
}

header .top .cart-btn .icon-msg {
  width: 0.52rem;
  height: 0.52rem;
  position: absolute;
  right: 0.32rem;
  bottom: 0.2rem;
}

header .top .cart-btn .icon-num {
  top: 0.03rem;
  right: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .top .search-btn,
header .top .service-btn,
header .top .chat-history-btn,
header .top .header-more-btn {
  position: relative;
  width: 0.8rem;
  height: 0.9rem;
  display: block;
  float: right;
}

header .top .search-btn .icon-search,
header .top .service-btn .icon-search,
header .top .chat-history-btn .icon-search,
header .top .header-more-btn .icon-search,
header .top .search-btn .icon-search-ai,
header .top .service-btn .icon-search-ai,
header .top .chat-history-btn .icon-search-ai,
header .top .header-more-btn .icon-search-ai,
header .top .search-btn .icon-header-kf,
header .top .service-btn .icon-header-kf,
header .top .chat-history-btn .icon-header-kf,
header .top .header-more-btn .icon-header-kf,
header .top .search-btn .icon-chat-history,
header .top .service-btn .icon-chat-history,
header .top .chat-history-btn .icon-chat-history,
header .top .header-more-btn .icon-chat-history,
header .top .search-btn .icon-header-more,
header .top .service-btn .icon-header-more,
header .top .chat-history-btn .icon-header-more,
header .top .header-more-btn .icon-header-more {
  margin-top: 0.15rem;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

header .top .agent-stock-btn {
  float: right;
  height: 0.9rem;
  margin-right: 0.2rem;
  color: #cf1717;
  display: block;
}

header .top .service-btn .icon-num {
  top: 0.03rem;
  right: 0.2rem;
}

header .top .message-btn {
  background-repeat: no-repeat;
  margin: auto;
  width: 0.52rem;
  height: 0.52rem;
  background-size: contain;
  float: right;
  margin-top: 0.15rem;
  margin-right: 0.35rem;
  position: relative;
}

header .top .message-btn b {
  padding: 0 0.05rem;
  min-width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  text-align: center;
  top: -0.1rem;
  right: -0.1rem;
  color: #cf1717;
  font-size: 0.24rem;
  line-height: 0.4rem;
  background-size: contain;
  background-repeat: no-repeat;
}

header .top .pesan {
  background-image: url(https://preapp.wook.id/image/icon_pesan.png);
}

header .top .business-btn {
  width: 0.52rem;
  height: 0.52rem;
  background-size: contain;
  float: right;
  margin-top: 0.15rem;
  margin-right: 0.35rem;
}

header .top .share-btn {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  float: right;
}

header .top .share-btn .icon-share {
  margin-top: 0.15rem;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

header .top .common-btn {
  font-size: 0.32rem;
  color: #cf1717;
  float: right;
  margin-right: 0.2rem;
}

header .top-simple {
  height: calc(0.9rem + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

header .top-simple > div {
  position: relative;
}

header .top-simple span {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .top-simple .icon {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}

header .top-simple .icon.icon-num {
  width: 0.42rem;
  height: 0.42rem;
  top: 0;
  right: -0.04rem;
}

header .top-simple .back {
  left: 0.2rem;
}

header .top-simple .back .icon-back-w {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

header .top-simple .cart-btn {
  right: 1.1rem;
}

header .top-simple .cart-btn.r {
  right: 0.2rem;
}

header .top-simple .share-btn {
  right: 0.16rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.guide-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1008;
}

.guide-box .guide-home {
  height: calc(100vh - env(safe-area-inset-bottom));
  width: 100%;
  position: relative;
}

.guide-box .guide-home .icon-box {
  position: absolute;
  top: 0.08rem;
  right: 0.12rem;
  width: 0.58rem;
  height: 0.8rem;
}

.guide-box .guide-home .guide-footer {
  margin-top: 0.5rem;
}

.guide-box .btn.btn-info {
  min-width: 2rem;
  border: 0.03rem solid #fff;
  color: #fff;
  display: inline-block;
  margin: auto;
  line-height: 0.8rem;
  position: relative;
  border-radius: 0.16rem;
  padding: 0 0.2rem;
}

.guide-box .guide-footer {
  text-align: center;
  margin-top: 2rem;
}

.guide-box .safe-area-top {
  height: env(safe-area-inset-top, 0);
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0 - env(safe-area-inset-top, 0));
}

.guide-box .safe-area-bottom {
  height: env(safe-area-inset-bottom, 0);
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.guide-box .guide-bg {
  position: absolute;
  left: 0;
  top: env(safe-area-inset-top, 0);
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  width: 100%;
  flex-direction: column;
}

.guide-box .guide-bg .top {
  height: 0.1rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .header {
  height: 0.7rem;
  display: flex;
}

.guide-box .guide-bg .header .m-left {
  width: 1.6rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .header .m-center {
  flex: 1;
  border: 0 solid rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .header .m-right {
  width: 0.3rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .middle {
  height: 1.3rem;
  display: flex;
}

.guide-box .guide-bg .middle .m-left {
  width: 0.3rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .middle .m-center {
  flex: 1;
  border: 0 solid rgba(0, 0, 0, 0.7);
  border-left-width: 0.2rem;
  border-right-width: 0.2rem;
  border-top-width: 0.2rem;
}

.guide-box .guide-bg .middle .m-right {
  width: 0.3rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .bottom {
  flex: 1;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .footer {
  height: 1.15rem;
  display: flex;
}

.guide-box .guide-bg .footer .m-left {
  width: 0.15rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-bg .footer .m-center {
  flex: 1;
  border: 0 solid rgba(0, 0, 0, 0.7);
  border-left-width: 0.2rem;
  border-right-width: 1.3rem;
  border-bottom-width: 0.1rem;
}

.guide-box .guide-bg .footer .m-right {
  width: 1.25rem;
  background: rgba(0, 0, 0, 0.7);
}

.guide-box .guide-chat {
  margin-top: env(safe-area-inset-top, 0);
}

.guide-box .guide-chat .guide-bg .header .m-center {
  border-left-width: 5.8rem;
  border-right-width: 0.2rem;
  border-top-width: 0.1rem;
}

.guide-box .guide-chat .n1 {
  padding-top: 2.9rem;
  padding-right: 1rem;
  height: 4.5rem;
}

.guide-box .guide-chat .n1 .point {
  left: 0.36rem;
  top: 2.1rem;
}

.guide-box .guide-chat .n1 .guide-line {
  position: absolute;
  left: 0.41rem;
  top: 2.28rem;
  height: 0.5rem;
  border-left: 0.02rem dashed #fff;
}

.guide-box .guide-chat .n2 {
  height: 1.2rem;
  padding-right: 1rem;
}

.guide-box .guide-chat .n2 .point {
  background: #ffc54d;
  top: -3.85rem;
  right: -0.1rem;
}

.guide-box .guide-chat .n2 .guide-line {
  position: absolute;
  right: -0.07rem;
  top: -3.7rem;
  height: 3.9rem;
  width: 1rem;
  border-right: 0.02rem dashed #ffc54d;
  border-bottom: 0.02rem dashed #ffc54d;
}

.guide-box .guide-chat .n3 {
  height: 1.2rem;
  padding-right: 0.16rem;
  margin-top: 2.4rem;
}

.guide-box .guide-chat .n3 .point {
  top: 1rem;
  left: 3rem;
}

.guide-box .guide-chat .n3 .guide-line {
  position: absolute;
  top: 0.5rem;
  left: 3.05rem;
  height: 0.4rem;
  border-left: 0.02rem dashed #fff;
}

.guide-box .guide-home {
  margin-top: env(safe-area-inset-top, 0);
}

.guide-box .guide-home .guide-bg .header .m-center {
  border-left-width: 6.6rem;
  border-right-width: 0.2rem;
  border-top-width: 0.05rem;
}

.guide-box .guide-home .title {
  padding-top: 1.3rem;
  text-align: center;
  font-size: 0.36rem;
  color: #ffb63e;
  font-weight: bold;
  position: relative;
  width: 4rem;
}

.guide-box .guide-home .n1 .point {
  right: -0.45rem;
  top: 0.8rem;
}

.guide-box .guide-home .n1 .guide-line {
  position: absolute;
  right: -0.4rem;
  top: 1rem;
  height: 0.46rem;
  width: 1.9rem;
  border-right: 0.02rem #fff dashed;
  border-bottom: 0.02rem #fff dashed;
}

.guide-box .guide-home .n2 {
  margin-top: 0.4rem;
}

.guide-box .icon-box {
  position: absolute;
  right: 0.36rem;
  top: 0.2rem;
  width: 1.3rem;
  height: 0.6rem;
}

.guide-box .icon-box img {
  width: 100%;
  height: 100%;
}

.guide-box .point {
  position: absolute;
  display: inline-block;
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background: #fff;
}

.guide-box .guide-brief {
  width: 5.6rem;
  margin: auto;
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #fff;
  position: relative;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.header-tips {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 7.5rem;
  padding: 0.18rem;
  line-height: 1.5;
  background: #f1b9b9;
  color: #fff;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  display: none;
}

.header-tips.visible {
  display: flex;
}

.header-tips .icon-loading-2 {
  width: 0.28rem;
  height: 0.28rem;
  margin-left: 0.1rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.back-to-top {
  position: fixed;
  bottom: calc(1.3rem + env(safe-area-inset-bottom, 0));
  right: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  z-index: 1003;
  transition: all 300ms ease 0s;
}

.back-to-top.hide {
  opacity: 0;
  display: none;
}

.back-to-top.show {
  opacity: 100;
  display: block;
}

.back-to-top i {
  width: 0.9rem;
  height: 0.9rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.dialog-select {
  z-index: 100;
  width: 90%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.2rem;
}

.dialog-select-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0.2rem;
}

.dialog-select-header-title {
  color: #000;
  font-size: 0.26rem;
  padding: 0.4rem 0;
}

.dialog-select-header-describe {
  font-size: 0.26rem;
  color: #9e9e9e;
}

.dialog-select-handleBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dialog-select-handle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: 0.01rem solid #9e9e9e;
  padding: 0.2rem 0;
}

.dialog-select-handle-time {
  font-size: 0.24rem;
  color: #cf1717;
}

.dialog-select-handle-close {
  font-size: 0.24rem;
  color: #000;
  padding-bottom: 0.05rem 0;
}

.dialog-select-handle-close-tips {
  font-size: 0.24rem;
  color: #9e9e9e;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.cd-skin-primary {
  font-size: 0;
}

.cd-skin-primary .cd-time-info {
  font-size: 0.24rem;
  color: #666;
  float: left;
  line-height: 0.4rem;
}

.cd-skin-primary .cd-time-txt,
.cd-skin-primary .cd-quites {
  color: #666;
  font-size: 0.28rem;
  margin: 0 0.06rem;
  vertical-align: middle;
}

.cd-skin-primary .cd-language {
  display: inline-block;
  font-size: 0.28rem;
  color: #666;
  vertical-align: middle;
}

.cd-skin-primary .cd-time-box {
  display: inline-block;
}

.cd-skin-primary .cd-cell {
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.03rem;
  font-size: 0.24rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background-image: url(https://preapp.wook.id/image/icon_countdown_red.png);
  background-size: 100% 100%;
}

.cd-skin-dark {
  font-size: 0;
}

.cd-skin-dark .cd-time-info {
  font-size: 0.24rem;
  color: #666;
  float: left;
  line-height: 0.4rem;
}

.cd-skin-dark .cd-time-txt,
.cd-skin-dark .cd-quites {
  color: #666;
  font-size: 0.28rem;
  margin: 0 0.06rem;
  vertical-align: middle;
}

.cd-skin-dark .cd-language {
  display: inline-block;
  font-size: 0.28rem;
  color: #666;
  vertical-align: middle;
}

.cd-skin-dark .cd-time-box {
  display: inline-block;
}

.cd-skin-dark .cd-cell {
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.03rem;
  font-size: 0.24rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background-image: url(https://preapp.wook.id/image/icon_countdown_black.png);
  background-size: 100% 100%;
}

.cd-skin-white {
  font-size: 0;
}

.cd-skin-white .cd-time-info {
  font-size: 0.24rem;
  color: #fff;
  float: left;
  line-height: 0.4rem;
}

.cd-skin-white .cd-time-txt,
.cd-skin-white .cd-quites {
  color: #fff;
  font-size: 0.28rem;
  margin: 0 0.06rem;
  vertical-align: middle;
}

.cd-skin-white .cd-language {
  display: inline-block;
  font-size: 0.28rem;
  color: #fff;
  vertical-align: middle;
}

.cd-skin-white .cd-time-box {
  display: inline-block;
}

.cd-skin-white .cd-cell {
  color: #000;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.03rem;
  font-size: 0.24rem;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: rgba(255, 255, 255, 0.8);
  background-size: 100% 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.page-section-item {
  padding: 0.3rem;
  background: #fff;
  margin: 0.2rem 0.3rem 0;
  border-radius: 0.08rem;
}

.page-section-item .icon-copy {
  width: 0.32rem;
  height: 0.32rem;
  margin-left: 0.2rem;
  position: relative;
}

.page-section-item .icon-copy:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(2.6, 2.6);
  width: 100%;
  height: 100%;
}

.page-section-item .copy-btn {
  display: inline-block;
  padding: 0.12rem 0.32rem 0.08rem 0.08rem;
}

.page-section-item .copy-btn .icon {
  width: 0.36rem;
  height: 0.36rem;
}

.section-stretched {
  width: 100%;
  margin: 0.2rem 0 0;
}

.section-right-angle {
  border-radius: 0;
}

.page-info-item .title {
  font-size: 0.32rem;
}

.label-value {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.5;
  margin-top: 0.2rem;
  font-size: 0.28rem;
}

.label-value:first-child {
  margin-top: 0;
}

.label-value .label {
  color: #666;
}

.label-value .value {
  color: #1f1f1f;
  max-width: 70%;
  text-align: right;
}

.label-value.column {
  flex-direction: column;
}

.label-value.column .value {
  max-width: 100%;
  text-align: left;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.pull-load-container {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
}

.pull-load-container .pull-load-body {
  background-color: #efefef;
}

.pull-load-container .pull-load-head {
  padding-top: 0.2rem;
}

.pull-load-container .pull-load-child {
  overflow: hidden;
  zoom: 1;
}

.pull-load-container .top-size-empty,
.pull-load-container .bottom-size-empty {
  line-height: 0;
  margin: 0;
  bottom: 0;
  height: 0;
}

.pull-load-container .pull-load-head,
.pull-load-container .pull-load-footer {
  font-size: 0.28rem;
  text-align: center;
  line-height: 0 !important;
  padding: 0;
}

.pull-load-container .pull-load-head i.icon-loading,
.pull-load-container .pull-load-footer i.icon-loading,
.pull-load-container .pull-load-head i.icon-loading-3,
.pull-load-container .pull-load-footer i.icon-loading-3 {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0.3rem 0;
}

.pull-load-container .pull-load-head i.icon-loading-2,
.pull-load-container .pull-load-footer i.icon-loading-2 {
  width: 0.32rem;
  height: 0.32rem;
  margin: 0.3rem 0.1rem;
  vertical-align: middle;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.c-tabs {
  height: 0.84rem;
}

.c-tabs .c-tabs-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  position: relative;
  touch-action: auto;
  scrollbar-width: none;
  /* Firefox */
}

.c-tabs .c-tabs-scroll-wrapper::-webkit-scrollbar {
  display: none;
  /* Safari 和 Chrome */
}

.c-tabs .c-tabs-nav-list {
  position: relative;
  display: flex;
  background: #fff;
  min-width: min-content;
  touch-action: auto;
  scrollbar-width: none;
  /* Firefox */
}

.c-tabs .c-tabs-nav-list::-webkit-scrollbar {
  display: none;
  /* Safari 和 Chrome */
}

.c-tabs .c-tabs-tab {
  position: relative;
  flex: 1;
  padding: 0.25rem 0;
  text-align: center;
  font-weight: bold;
  font-size: 0.26rem;
  transition: all 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: auto;
  scrollbar-width: none;
  /* Firefox */
}

.c-tabs .c-tabs-tab::-webkit-scrollbar {
  display: none;
  /* Safari 和 Chrome */
}

.c-tabs .c-tabs-tab:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  background: #cf1717;
  border-radius: 0.02rem;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.c-tabs .c-tabs-tab.active {
  color: #cf1717;
}

.c-tabs .c-tabs-tab.active:after {
  width: 0.7rem;
  height: 0.06rem;
}

.c-tabs .c-tabs-tab + .c-tabs-tab {
  margin-left: 0.3rem;
}

.c-tabs.animated .c-tabs-tab:after {
  display: none;
}

.c-tabs.animated .c-tabs-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.06rem;
  background: #cf1717;
  border-radius: 0.01rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.pdf-download {
  width: 100%;
  height: 100vh;
  overflow-x: auto;
  -webkit-overflow-scrolling: auto;
  position: relative;
  font-size: 0.24rem;
}

.pdf-download .container {
  width: 24rem;
  position: absolute;
  left: 0;
  top: 0;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.pull-load-container {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
}

.pull-load-container .pull-load-body {
  background-color: #efefef;
}

.pull-load-container .pull-load-head {
  padding-top: 0.2rem;
}

.pull-load-container .pull-load-head,
.pull-load-container .pull-load-footer {
  font-size: 0.28rem;
  text-align: center;
  line-height: 0 !important;
  padding: 0;
}

.pull-load-container .pull-load-head i.icon,
.pull-load-container .pull-load-footer i.icon {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0.3rem 0;
}

.pull-load-container .pull-load-head i.icon-loading-2,
.pull-load-container .pull-load-footer i.icon-loading-2 {
  width: 0.32rem;
  height: 0.32rem;
  margin: 0.3rem 0.1rem;
  vertical-align: middle;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.c-table .c-table-td {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.1rem;
  border-right: 0.01rem solid #ccc;
  border-bottom: 0.01rem solid #ccc;
}

.c-table .c-table-td:first-child {
  border-left: 0.01rem solid #ccc;
}

.c-table .c-table-td.td-merge {
  border-bottom: 0;
}

.c-table .c-table-render {
  width: 100%;
}

.c-table .c-table-render-merge {
  padding: 0.06rem 0.08rem;
}

.c-table .c-table-header {
  display: flex;
  background: #eeeeee;
}

.c-table .c-table-header .c-table-td {
  border-top: 0.01rem solid #ccc;
}

.c-table .c-table-row {
  display: flex;
}

.c-table .c-table-empty {
  border: 0.01rem solid #ccc;
  border-top: 0;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.lazy-img {
  background-color: #f1f1f1;
  background-image: url(https://preapp.wook.id/image/img_default_img.png);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.common-item-style {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.24rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
  padding: 0.08rem 0.08rem;
}

.common-item-style img {
  width: 0.64rem;
  height: 0.64rem;
}

.common-item-style span {
  font-size: 0.24rem;
  display: block;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.common-all-style {
  font-size: 0.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.24rem;
  height: 0.88rem;
  padding: 0.16rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
}

.category-slider {
  list-style: none;
  display: flex;
  align-items: center;
  height: 1.4rem;
  width: 7.5rem;
  background: #ffffff;
  position: fixed;
  top: calc(0.9rem + env(safe-area-inset-top, 0));
  z-index: 100;
  padding: 0.16rem 0.64rem 0.16rem 0.16rem;
}

.category-slider .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.24rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
  padding: 0.08rem 0.08rem;
}

.category-slider .item img {
  width: 0.64rem;
  height: 0.64rem;
}

.category-slider .item span {
  font-size: 0.24rem;
  display: block;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.category-slider .all {
  font-size: 0.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.24rem;
  height: 0.88rem;
  padding: 0.16rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
  height: 1.2rem;
}

.category-slider-collapsed {
  position: absolute;
  right: 0.1rem;
}

.category-slider-collapsed .icon {
  width: 0.4rem;
  height: 0.4rem;
}

.category-slider .active {
  border: 0.024rem solid #cf1717;
  color: #cf1717;
}

.category-expanded {
  width: 7.5rem;
  background: #ffffff;
  z-index: 101;
  position: fixed;
  top: 0.9rem;
  padding: 0.24rem 0.24rem 1rem 0.24rem;
  border-bottom: 0.08rem solid #f6f6f6;
}

.category-expanded-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1.6rem, 1fr));
  grid-gap: 0.1rem;
  list-style: none;
  overflow-y: auto;
  max-height: 9rem;
}

.category-expanded-table .all {
  font-size: 0.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.24rem;
  height: 0.88rem;
  padding: 0.16rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
  width: 1.6rem;
  height: 1.4rem;
  margin-right: 0;
  margin-bottom: 0;
}

.category-expanded-table .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.24rem;
  border-radius: 0.08rem;
  border: 0.01rem solid transparent;
  transition: all 0.2s;
  padding: 0.08rem 0.08rem;
  width: 1.6rem;
  margin-right: 0;
  margin-bottom: 0;
}

.category-expanded-table .item img {
  width: 0.64rem;
  height: 0.64rem;
}

.category-expanded-table .item span {
  font-size: 0.24rem;
  display: block;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.category-expanded-table .item span {
  width: 1.6rem;
}

.category-expanded-table .active {
  border: 0.024rem solid #cf1717;
  color: #cf1717;
}

.category-expanded-collapsed {
  position: absolute;
  bottom: 0.1rem;
  right: 0.4rem;
}

.category-expanded-collapsed .icon {
  width: 0.48rem;
  height: 0.48rem;
  transform: rotate(180deg);
}

.category-expanded-hidden {
  display: none;
}

.expanded {
  display: block;
  transform-origin: top;
  animation: expandedAnimation 0.1s forwards;
}

.collapsed {
  display: none;
  transform-origin: top;
  animation: collapsedAnimation 0.3s forwards;
}

@keyframes expandedAnimation {
  0% {
    transform: translateY(-0.9rem);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes collapsedAnimation {
  0% {
    display: block;
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5rem);
    display: none;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.secure-image.loading,
.secure-image.error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 0.024rem solid #e1e5e9;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.secure-image.loading {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 3rem;
}

.secure-image.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  animation: shimmer 1.5s infinite;
}

.secure-image .secure-image-placeholder {
  color: #6c757d;
  font-size: 0.26rem;
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
}

.secure-image .secure-image-placeholder.error {
  color: #dc3545;
}

.secure-image .secure-image-placeholder.loading-icon::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border: 0.024rem solid #dbd9d9;
  border-top: 0.024rem solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 0.04rem;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.infinite-scroll-container {
  overflow-y: auto;
  position: relative;
}

.loading-indicator {
  text-align: center;
  padding: 0.2rem 0;
  color: #999;
  font-size: 0.28rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.pull-to-refresh-container {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pull-to-refresh-container .icon-loading {
  display: none;
}

.pull-to-refresh-container.pulling .icon-loading {
  display: inline-block;
}

.refresh-indicator {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 0.26rem;
  color: #9e9e9e;
}

.refresh-indicator .icon {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0.2rem 0;
  margin: 0.3rem auto;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.back-top {
  bottom: calc(1.3rem + env(safe-area-inset-bottom, 0));
  z-index: 10;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.wook-popup {
  position: fixed;
  top: 100vh;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 120;
  transition: opacity 0.1s linear;
}

.wook-popup-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.35);
}

.wook-popup-body {
  position: absolute;
  width: 100vw;
  min-height: 0;
  background-color: #fff;
  z-index: 1;
  bottom: -100vh;
  max-height: 70vh;
  left: 0;
  height: auto;
  transition: bottom 0.3s ease-in;
  border-top-left-radius: 0.16rem;
  border-top-right-radius: 0.16rem;
}

.wook-popup-header {
  height: 0.85rem;
  border-bottom: 0.024rem solid #dbd9d9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
  font-size: 0.32rem;
  font-weight: bold;
  color: #1f1f1f;
}

.wook-popup .icon-close-p {
  width: 0.42rem;
  height: 0.42rem;
}

.wook-popup.visible {
  opacity: 1;
  top: 0;
}

.wook-popup.visible .wook-popup-body {
  bottom: 0;
}

.wook-popup.visible .wook-popup-mark {
  opacity: 1;
}

.wook-popup.fixed-height .wook-popup-body {
  height: 70vh;
}

.wook-popup.fixed-height .wook-popup-body > *:first-child {
  height: calc(100% - 0.98rem - 0.4rem);
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-btnbox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: calc(1.2rem + env(safe-area-inset-bottom, 0));
  padding: 0 0.25rem;
  padding-top: 0.25rem;
  width: 100%;
  max-width: 7.5rem;
  border-top: 0.01rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: #fff;
  z-index: 100;
}

.coupon-btnbox span {
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid #cf1717;
  width: 3.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

.coupon-btnbox span.white-red {
  font-size: 0.28rem;
  color: #cf1717;
}

.coupon-btnbox span.red-white {
  font-size: 0.28rem;
  background-color: #cf1717;
  color: #fff;
}

.tips {
  background-color: #fff;
}

.tips .tips-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 0.82rem;
  padding: 0.2rem 0;
  margin-left: 0.2rem;
}

.tips .tips-box .coupon-card {
  height: 1.46rem;
  width: 100%;
  display: flex;
  border-radius: 0.1rem;
}

.tips .tips-box .coupon-card .coupon-left {
  width: 2.7rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tips .tips-box .coupon-card .coupon-left .coupon-left-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
}

.tips .tips-box .coupon-card .coupon-left .coupon-left-price-box {
  align-items: start;
}

.tips .tips-box .coupon-card .coupon-left .coupon-left-price-box .coupon-left-price {
  margin-left: 0.12rem;
}

.tips .tips-box .coupon-card .coupon-left .currency {
  font-size: 0.2rem;
  margin-right: 0.04rem;
}

.tips .tips-box .coupon-card .coupon-left .coupon-price {
  font-size: 0.38rem;
}

.tips .tips-box .coupon-card .coupon-left .coupon-ratio {
  font-size: 0.44rem;
}

.tips .tips-box .coupon-card .coupon-left .coupon-ratio .coupon-ratio-eng {
  margin-left: 0.1rem;
  font-size: 0.24rem;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line {
  height: 0.8rem;
  padding: 0.05rem 0;
  width: 0.12rem;
  position: relative;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line::before {
  position: absolute;
  background-color: #fff;
  content: '';
  width: 0.18rem;
  height: 0.18rem;
  top: -0.43rem;
  left: 0;
  z-index: 100;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.tips .tips-box .coupon-card .coupon-left .dotted-line::after {
  position: absolute;
  background-color: #fff;
  content: '';
  width: 0.18rem;
  height: 0.18rem;
  bottom: -0.43rem;
  left: 0;
  z-index: 100;
  border-radius: 50%;
  transform: rotate(45deg);
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-red {
  border-right: 0.01rem dashed #cf1717;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-red::after {
  content: '';
  border: 0.01rem solid rgba(207, 23, 23, 0.3);
  border-right: 0.01rem solid #fff;
  border-bottom: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-red::before {
  content: '';
  border: 0.01rem solid rgba(207, 23, 23, 0.3);
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-blue {
  border-right: 0.01rem dashed #2c8eda;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-blue::after {
  content: '';
  border: 0.01rem solid rgba(44, 142, 218, 0.3);
  border-right: 0.01rem solid #fff;
  border-bottom: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-blue::before {
  content: '';
  border: 0.01rem solid rgba(44, 142, 218, 0.3);
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-green {
  border-right: 0.01rem dashed #189582;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-green::after {
  content: '';
  border: 0.01rem solid rgba(24, 149, 130, 0.3);
  border-bottom: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-left .dotted-line-green::before {
  content: '';
  border: 0.01rem solid rgba(24, 149, 130, 0.3);
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.tips .tips-box .coupon-card .coupon-right {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0.1rem 0.1rem;
}

.tips .tips-box .coupon-card .coupon-right .coupon-contain {
  font-size: 0.24rem;
  font-weight: bold;
  display: flex;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type {
  color: #9e9e9e;
  display: flex;
  flex-direction: column;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-type {
  font-size: 0.24rem;
  margin-left: 0.1rem;
  font-weight: bold;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-type-detail,
.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-type-list {
  display: flex;
  flex-direction: column;
  margin: 0.1rem 0;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-bottom {
  display: flex;
  align-items: center;
  margin-left: 0.1rem;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-bottom .coupon-btn {
  height: 0.48rem;
  line-height: 0.48rem;
  text-align: center;
  color: #fff;
  border-radius: 0.24rem;
  padding: 0 0.16rem;
  margin-left: 0.2rem;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-bottom .review-icon {
  margin-left: 0.2rem;
}

.tips .tips-box .coupon-card .coupon-right .coupon-date-type .coupon-bottom .review-icon i {
  display: block;
  width: 1.05rem;
  height: 0.71rem;
}

.tips .tips-box .coupon-card-red {
  background-color: rgba(207, 23, 23, 0.05);
  border: 0.01rem solid rgba(207, 23, 23, 0.3);
}

.tips .tips-box .coupon-card-blue {
  background-color: rgba(44, 142, 218, 0.05);
  border: 0.01rem solid rgba(44, 142, 218, 0.3);
}

.tips .tips-box .coupon-card-green {
  background-color: rgba(24, 149, 130, 0.05);
  border: 0.01rem solid rgba(24, 149, 130, 0.3);
}

.tips .tips-box .coupon-contain {
  font-size: 0.24rem;
}

.tips .tips-box .coupon-date {
  font-size: 0.24rem;
}

.tips .tips-box .coupon-btn-red {
  background-color: #cf1717;
}

.tips .tips-box .coupon-btn-blue {
  background-color: #2c8eda;
}

.tips .tips-box .coupon-btn-green {
  background-color: #189582;
}

.tips .tips-box .coupon-list-red,
.tips .tips-box .coupon-list-blue,
.tips .tips-box .coupon-list-green {
  font-weight: bold;
}

.tips .coupon-list-green,
.tips .coupon-contain-green,
.tips .coupon-ratio,
.tips .coupon-type-green,
.tips .coupon-date-green {
  color: #189582;
}

.tips .coupon-list-red,
.tips .coupon-contain-red,
.tips .coupon-type-red,
.tips .coupon-date-red,
.tips .currency-red,
.tips .coupon-price-red {
  color: #cf1717;
}

.tips .coupon-list-blue,
.tips .coupon-contain-blue,
.tips .coupon-type-blue,
.tips .coupon-date-blue,
.tips .currency-blue,
.tips .coupon-price-blue {
  color: #2c8eda;
}

.tips .tips-box-more {
  width: 6.3rem;
}

.tips .tips-box-more:nth-last-child(1) {
  margin-right: 0.2rem;
}

.tips .coupon-type-price {
  display: flex;
  flex-direction: column;
  width: 2.4rem;
  padding-left: 0.12rem;
}

.list-tips .tips-box {
  margin-right: 0.2rem;
}

.list-tips .tips-box .coupon-right .coupon-right-content .coupon-contain {
  font-size: 0.24rem;
  margin: 0 0 0.1rem 0.1rem;
}

.list-tips .tips-box .coupon-right .coupon-right-content .coupon-contain .coupon-type-price {
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.list-tips .tips-box .coupon-right .coupon-right-content .coupon-bottom .coupon-btn {
  margin-left: 0.1rem;
}

.list-tips .tips-box .coupon-right .coupon-right-content .coupon-bottom .coupon-date-type {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.coupon-mask-tips-popup .wook-popup-body {
  max-height: 90vh;
  padding: 0 0.3rem;
  max-width: 7.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.coupon-mask-tips-popup .wook-popup-body .viewCoupon-title {
  padding: 0.4rem 0.2rem;
  position: relative;
  border-bottom: 0.01rem solid #ccc;
  margin-bottom: 0.3rem;
}

.coupon-mask-tips-popup .wook-popup-body .viewCoupon-title .pr_title {
  text-align: left;
  font-size: 0.34rem;
}

.coupon-mask-tips-popup .wook-popup-body .viewCoupon-title .close-btn {
  position: absolute;
  right: 0.2rem;
  top: 0.4rem;
  width: 0.4rem;
  height: 0.4rem;
}

.coupon-mask-tips-popup .wook-popup-body .viewCoupon-title .close-btn i {
  width: 0.4rem;
  height: 0.4rem;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body {
  background-color: #fff;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box {
  margin-bottom: 0.3rem;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .coupon-mask-title {
  color: #1f1f1f;
  font-size: 0.28rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .coupon-mask-tips {
  color: #9e9e9e;
  font-size: 0.24rem;
  margin-bottom: 0.15rem;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .tips .tips-box {
  margin-bottom: 0.15rem;
  padding: 0;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .tips .tips-box .coupon-right {
  display: flex;
  flex-direction: column;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .tips .tips-box .coupon-date-type .coupon-type {
  font-size: 0.24rem;
  margin-left: 0.1rem;
  font-weight: bold;
}

.coupon-mask-tips-popup .wook-popup-body .pull-load-body .coupon-mask-box .tips .tips-mask .coupon-right-content .coupon-date-type {
  justify-content: space-around;
  padding: 0.1rem 0;
}

.coupon-popups .coupon-box {
  width: 6rem;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1003;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}

.coupon-popups .coupon-box-title {
  color: #cf1717;
  font-size: 0.34rem;
  padding-bottom: 0.5rem;
  text-align: center;
}

.coupon-popups .coupon-box-tips-card {
  display: flex;
  background-color: #fbe6ba;
  padding: 0.2rem;
  border-radius: 0.08rem;
}

.coupon-popups .coupon-box-tips-card-left {
  width: 2rem;
  word-break: break-all;
  display: flex;
  position: relative;
}

.coupon-popups .coupon-box-tips-card-left-price {
  display: flex;
  flex-direction: column;
  color: #cf1717;
  font-weight: bold;
  justify-content: center;
}

.coupon-popups .coupon-box-tips-card-left-price .currency {
  font-size: 0.24rem;
}

.coupon-popups .coupon-box-tips-card-left-price .coupon-price {
  font-size: 0.34rem;
}

.coupon-popups .coupon-box-tips-card-left-ratio {
  display: flex;
  flex-direction: column;
  color: #cf1717;
  font-weight: bold;
  font-size: 0.34rem;
  justify-content: center;
}

.coupon-popups .coupon-box-tips-card-left::before {
  position: absolute;
  background-color: #fff;
  content: '';
  width: 0.18rem;
  height: 0.18rem;
  top: -0.28rem;
  right: 0;
  z-index: 100;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.coupon-popups .coupon-box-tips-card-left::after {
  position: absolute;
  background-color: #fff;
  content: '';
  width: 0.18rem;
  height: 0.18rem;
  bottom: -0.28rem;
  right: 0;
  z-index: 100;
  border-radius: 50%;
  transform: rotate(45deg);
}

.coupon-popups .coupon-box-tips-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.coupon-popups .coupon-box-tips-card-right-top {
  margin-bottom: 0.2rem;
  color: #1f1f1f;
  font-size: 0.26rem;
  font-weight: bold;
}

.coupon-popups .coupon-box-tips-card-right-bottom .coupon-date {
  font-size: 0.24rem;
  color: #666;
}

.coupon-popups .coupon-box-illustrate {
  margin-top: 0.2rem;
}

.coupon-popups .coupon-box-illustrate-title {
  color: #ccc;
  margin-bottom: 0.1rem;
  font-size: 0.24rem;
}

.coupon-popups .coupon-box-illustrate-content {
  color: #000;
  font-size: 0.24rem;
  font-weight: bold;
  line-height: 0.36rem;
}

.coupon-popups .coupon-box-btn {
  margin-top: 0.2rem;
  width: 100%;
  height: 0.8rem;
  background-color: #cf1717;
  border-radius: 0.08rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  line-height: 0.8rem;
  font-size: 0.28rem;
}

.coupon-popups .coupon-box-alink {
  margin-top: 0.2rem;
  text-align: center;
}