* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.wrap-body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #0a0612;
    background-image: url(../images/bg-h5.webp?v=20260817-1);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

a {
    text-decoration: none;
    color: #1f1f1f;
}

.header-area {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    max-width: none;
}

.header-activity {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.75rem 0;
}

.logo-container {
    display: flex;
    align-items: center;
    margin: 0;
    color: white;
}

.logo-container img {
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
}

.logoo {
    width: auto;
    height: 3.4rem;
}

.contact-list {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    flex-shrink: 0;
}

.btnimg {
    padding: 0;
    margin: 0;
}

.btnimg.sp {
    display: none;
}

.icon-img {
    display: block;
    width: auto;
    height: 2.5rem;
}

.icon-img.icon-pc {
    display: none;
}

.main-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5.5rem 0 9rem;
}

.content-area {
    flex: 1;
    padding: 0 0.5rem;
    text-align: left;
}

.content-area img {
    display: block;
    width: 74%;
    max-width: 34rem;
}

.content-area .pic-pc {
    display: none;
}

.content-area .pic-h5 {
    display: block;
    margin-top: 0.5rem;
}

.footer-area {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    max-width: none;
    padding: 0.75rem 0.9rem 1.25rem;
}

.footer-area img {
    display: block;
    width: 100%;
    margin: auto;
}

.qr-area {
    display: none;
}

.qr-panel {
    position: relative;
    width: 100%;
    aspect-ratio: 781 / 261;
    background: url(../images/qr-pc.webp) no-repeat center / 100% 100%;
}

.qr-code {
    position: absolute;
    left: 1.92%;
    top: 7.28%;
    width: 28.68%;
    height: 85.82%;
    box-sizing: border-box;
    padding: 2%;
    overflow: hidden;
    background: transparent;
}

.qr-code canvas,
.qr-code img,
.qr-code table {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-collapse: collapse;
}

.app {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8125rem;
    width: 100%;
}

.btn_list {
    flex: 1;
    max-width: 48%;
}

.btn_list.android:nth-child(3) {
    display: none;
}

.ios img,
.android img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
}

.setup-tips-container {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0;
    text-align: center;
}

.setup-tips-container img {
    width: auto;
    height: 1rem;
}

.setup-tips-container > div:nth-child(2) {
    display: none;
}

.spinner-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 6, 18, 0.85);
}

.spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #e040fb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 768px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .wrap-body {
        background-image: url(../images/bg-pc.webp?v=20260817-1);
        background-position: center center;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .header-activity {
        align-items: center;
        padding: 1.1rem 2.3% 0;
    }

    .logoo {
        height: clamp(4rem, 6.2vw, 6.75rem);
    }

    .contact-list {
        position: static;
        top: auto;
        right: auto;
        gap: 0.65vw;
    }

    .icon-img.icon-h5 {
        display: none;
    }

    .icon-img.icon-pc {
        display: block;
        height: clamp(2.4rem, 3.35vw, 3.65rem);
    }

    .main-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 0;
    }

    .content-area {
        position: absolute;
        top: 19.8%;
        left: 3.8%;
        bottom: 29%;
        flex: none;
        width: 51%;
        max-width: 61rem;
        padding: 0;
        overflow: hidden;
    }

    .content-area img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: 100%;
        object-fit: contain;
        object-position: left top;
    }

    .content-area .pic-h5 {
        display: none;
    }

    .content-area .pic-pc {
        display: block;
        margin-top: 0;
    }

    .footer-area {
        position: absolute;
        left: 3.2%;
        bottom: 4%;
        width: 40.7%;
        max-width: 48.8rem;
        max-height: 24.2vh;
        padding: 0;
    }

    .qr-area {
        display: block;
        height: 100%;
    }

    .qr-panel {
        width: 100%;
        height: 100%;
        max-height: 24.2vh;
        aspect-ratio: 781 / 261;
    }

    .app,
    .setup-tips-container {
        display: none;
    }
}

.pwa-entry {
  position: fixed;
  display: flex;
  bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  right: max(calc((100vw - 750px) / 2 + 10px), 10px);
  flex-direction: column;
  align-items: center;
  width: min(18.6667vw, 140px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff3d6;
  cursor: pointer;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.pwa-entry[hidden] {
  display: none !important;
}

.pwa-entry-icon {
  position: relative;
  display: block;
  width: min(16vw, 120px);
  height: min(16vw, 120px);
  pointer-events: none;
}

.pwa-entry-icon img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: min(17.3333vw, 130px);
  height: min(16.2667vw, 122px);
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.pwa-entry > span:last-child {
  display: flex;
  width: 100%;
  height: min(6.4vw, 48px);
  align-items: center;
  justify-content: center;
  border: min(0.1333vw, 1px) solid #ff6464;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4949, #992c2c);
  box-shadow: 0 min(0.5333vw, 4px) min(0.2667vw, 2px) rgba(0, 0, 0, 0.25);
  font-size: min(3.2vw, 24px);
  font-weight: 500;
  letter-spacing: max(-0.128vw, -0.96px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .pwa-entry {
    display: none !important;
  }
}
@media screen and (max-width: 480px) {
    .logoo {
        height: 3.46875rem;
    }

    .icon-img.icon-h5 {
        height: 1.5625rem;
    }

    .content-area img {
        width: 73%;
    }

    .footer-area {
        padding: 0.5rem 1rem 1rem;
    }
}

@media screen and (max-width: 320px) {
    .logoo {
        height: 2.4rem;
    }

    .icon-img.icon-h5 {
        height: 2rem;
    }

    .content-area img {
        width: 68%;
    }

    .setup-tips-container img {
        height: 0.85rem;
    }
}