/* header */
.header {
  top: 0;
  position: sticky;
  background: #fff;
  z-index: 10;
}
.header-top {
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
  color: inherit;
}
.header-logo > img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 100%;
}
.header-right {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-user {
  display: flex;
  align-items: center;
  margin-right: 24px;
  font-size: 12px;
  position: relative;
  height: 100%;
  cursor: pointer;
}
.header-user > .avatar {
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 100%;
}
.header-user::after {
  content: '';
  width: 12px;
  height: 12px;
  display: flex;
  margin-left: 10px;
  background: url('data:image/svg+xml;utf8,<svg t="1732255647746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5126" width="200" height="200"><path d="M496.344438 763.66067c0.005117 0.00307 0.010233 0.00614 0.01535 0.008186 0.438998 0.240477 0.88516 0.470721 1.336438 0.690732 0.01842 0.00921 0.035816 0.01842 0.053212 0.027629 0.432859 0.210801 0.87288 0.409322 1.316995 0.600681 0.037862 0.016373 0.074701 0.034792 0.112564 0.051165 0.429789 0.183172 0.865717 0.354064 1.305739 0.51984 0.053212 0.019443 0.104377 0.042979 0.157589 0.062422 0.418532 0.154519 0.842181 0.295735 1.2689 0.432859 0.076748 0.024559 0.152473 0.053212 0.230244 0.077771 0.413416 0.128937 0.831948 0.245593 1.252527 0.35918 0.092098 0.024559 0.183172 0.054235 0.275269 0.077771 0.398066 0.103354 0.801249 0.192382 1.205455 0.280386 0.118704 0.025583 0.23536 0.057305 0.354064 0.081864 0.381693 0.078795 0.769526 0.143263 1.156336 0.207731 0.143263 0.024559 0.285502 0.054235 0.428765 0.076748 0.3776 0.058328 0.759293 0.101307 1.140986 0.146333 0.156566 0.01842 0.311085 0.042979 0.467651 0.059352 0.394996 0.039909 0.793062 0.065492 1.192152 0.091074 0.147356 0.00921 0.292666 0.025583 0.440022 0.033769 0.547469 0.027629 1.098008 0.041956 1.65264 0.041956s1.105171-0.014326 1.65264-0.041956c0.147356-0.007163 0.292666-0.023536 0.440022-0.033769 0.399089-0.025583 0.797156-0.051165 1.192152-0.091074 0.157589-0.016373 0.311085-0.040932 0.467651-0.059352 0.381693-0.045025 0.763386-0.088004 1.140986-0.146333 0.144286-0.022513 0.285502-0.052189 0.428765-0.076748 0.38681-0.064468 0.773619-0.12996 1.156336-0.207731 0.118704-0.024559 0.23536-0.056282 0.354064-0.081864 0.404206-0.088004 0.807389-0.178055 1.205455-0.280386 0.093121-0.023536 0.183172-0.053212 0.275269-0.077771 0.420579-0.112564 0.839111-0.229221 1.252527-0.35918 0.077771-0.024559 0.152473-0.053212 0.230244-0.077771 0.426719-0.137123 0.850367-0.278339 1.2689-0.432859 0.053212-0.019443 0.104377-0.041956 0.157589-0.062422 0.438998-0.164752 0.87595-0.335644 1.305739-0.51984 0.037862-0.016373 0.074701-0.034792 0.112564-0.051165 0.444115-0.191358 0.883113-0.38988 1.316995-0.600681 0.01842-0.00921 0.035816-0.01842 0.053212-0.027629 0.451278-0.220011 0.89744-0.450255 1.336438-0.690732 0.005117-0.00307 0.010233-0.00614 0.01535-0.008186 2.728134-1.497097 5.213745-3.381004 7.384178-5.578042l0.022513 0.022513 351.620289-383.934253c5.791913-5.78782 9.374508-13.785981 9.374508-22.621207 0-17.662265-14.3181-31.980365-31.980365-31.980365-8.834202 0-16.832364 3.582595-22.620184 9.373485L511.698125 688.751586 182.542476 328.942801c-5.78782-5.79089-13.784958-9.373485-22.620184-9.373485-17.662265 0-31.980365 14.3181-31.980365 31.980365 0 8.835226 3.582595 16.833387 9.374508 22.621207l351.620289 383.934253 0.022513-0.022513c0 0 0 0 0 0C491.130693 760.278643 493.616304 762.16255 496.344438 763.66067z" p-id="5127"></path></svg>') no-repeat center;
  background-size: 100%;
}
.header-nav {
  top: 0;
  left: 0;
  height: 56px;
  padding-left: 272px;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 56px;
}
.nav-item {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.loginbtn {
  display: flex;
  align-items: center;
}
.loginbtn::after {
  content: '';
  width: 1px;
  height: 12px;
  margin: 0 16px;
  background: #bdbdbe;
}
.btn {
  background-color: #f6f6f6;
  border-color: #f6f6f6;
  color: #2c2c2c;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  height: 36px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.btn.primary {
  color: #fff;
  background-color: #f67942;
  border-color: #f67942;
}
.btn + .btn {
  margin-left: 16px;
}

.vipbtn {
  width: 100px;
  aspect-ratio: 100 / 36;
  background-image: url("/assets/pay-new/images/openVipBtn-light.png");
  background-size: contain;
  background-repeat: no-repeat;
  color: #f67942;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.header-user-popover {
  top: 100%;
  right: 0;
  position: absolute;
  overflow: hidden;
  cursor: default;
}
.header-user-popover-inner {
  border-radius: 8px;
  width: 320px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  background: #fff;
  box-shadow: 0 8px 20px 0 rgba(0,0,0,.06);
  animation: fadeInUp;
  animation-duration: 0.3s;
}
.header-user-popover-wrapper.close .header-user-popover-inner {
  animation: fadeOutDown forwards;
  animation-duration: 0.3s;
}
.header-user-popover-wrapper.close {
  pointer-events: none;
}

.common-dialog-mask {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
  z-index: 1000000000;
}
.common-dialog {
  --this-color: #fff;
  --this-bg: linear-gradient(135deg, #ff7106 10%, #fead44 100%);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  animation: zoomIn 0.3s ease-in-out;
}
.common-dialog-mask.close {
  animation: fadeOut 0.3s ease-in-out forwards;
}
.common-dialog-mask.close > .common-dialog {
  animation: zoomOut 0.3s ease-in-out forwards;
}
.common-dialog-header {
  height: 120px;
  background-image: var(--this-bg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.colorful-make {
  top: 60%;
  bottom: 0;
  width: 323px;
  height: 290px;
  position: absolute;
  background: var(--this-bg);
  border-radius: 100%;
}
.colorful-make::before,
.colorful-make::after {
  position: absolute;
  color: var(--this-color);
  background: var(--this-bg);
  border-radius: 100%;
  content: '';
}
.colorful-make::before {
  right: -558px;
  bottom: 0;
  height: 300px;
  width: 677px;
  top: -325px;
  transform: rotate(341deg);
  opacity: .6;
}
.colorful-make::after {
  left: -262px;
  bottom: 0;
  height: 214px;
  width: 402px;
  top: -170px;
  transform: rotate(326deg);
  opacity: .4;
}
.common-dialog-center {
  z-index: 2;
  color: var(--this-color);
}
.common-dialog-title {
  font-size: 1.2em;
  padding: 0 10px;
  margin-top: 10px;
}
.common-dialog-icon {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}
.common-dialog-close {
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  position: absolute;
  color: var(--this-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-dialog-body {
  padding: 15px;
  background: #fff;
}
.common-dialog-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 15px;
  border-radius: 4px;
  background: #f7f7f7;
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 10px;
  text-decoration: none;
}
.common-dialog-cell > .left {
  color: #999;
}
.common-dialog-cell > .right {
  color: #4e5358;
}
.common-dialog-cell .small {
  font-size: 12px;
  margin-left: 4px;
}
.common-dialog-confirm {
  height: 40px;
  border-radius: 40px;
  background: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  margin-top: 16px;
}
.common-dialog-price > i {
  margin-right: 4px;
  font-size: 12px;
}
.common-dialog-vip {
  text-align: center;
  margin-top: 10px;
  padding: 0 6px;
  height: 20px;
  background: rgba(246, 121, 66, .1);
  border-radius: 4px;
  border: 1px solid rgba(246, 121, 66, .3);
  font-weight: 400;
  font-size: 12px;
  color: #f67942;
  line-height: 20px;
}

.common_tab {
  --this-h: 40px;
  --this-p: 24px;
  gap: 4px;
  display: flex;
  align-items: center;
}
.common_tab-item {
  height: var(--this-h);
  padding: 0 var(--this-p);
  border-radius: var(--this-h);
  line-height: var(--this-h);
  color: #8a8b92;
  cursor: pointer;
  transition: all 0.2s linear;
}
.common_tab-item:hover,
.common_tab-item:active,
.common_tab-item.active {
  color: #2c2c2c;
  background: #f6f6f6;
  text-decoration: none;
}
.common_tab-item.active {
  font-weight: 600;
}

@media screen and (max-width: 749px) {
  .header-top {
    padding: 0 12px;
  }
  .header-logo {
    padding: 10px 0;
    font-size: 14px;
  }
  .header-logo > img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }
  .header-user {
    margin-right: 10px;
  }
  .header-user > .avatar {
    margin-right: 8px;
  }
  .header-user::after {
    margin-left: 4px;
  }
  .header-nav {
    padding: 0 12px;
    position: relative;
    justify-content: center;
    height: 36px;
  }
  .btn {
    padding: 0 8px;
    height: 28px;
    font-size: 12px;
  }
  .vipbtn {
    width: 70px;
  }

  .header-user-popover-wrapper {
    inset: 0;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
  }
  .header-user-popover {
    top: 0;
    left: 0;
    width: 100%;
    position: relative;
  }
  .header-user-popover-inner {
    width: 100%;
    animation: zoomIn 0.3s;
  }
  .header-user-popover-wrapper.close {
    /* pointer-events: none; */
    background: transparent;
  }
  .header-user-popover-wrapper.close .header-user-popover-inner {
    animation: zoomOut forwards;
    animation-duration: 0.3s;
  }

  .common-dialog-mask {
    align-items: flex-end;
  }
  .common-dialog {
    animation-name: slideInUp;
  }
  .common-dialog-mask.close > .common-dialog {
    animation-name: slideOutDown;
  }
  .common_tab {
    justify-content: center;
  }
}