/* 移动端点击去除系统默认蓝/灰高亮框 */
@media (max-width: 767px) {
    *,
    *::before,
    *::after {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
}

/* 鼠标悬停轻微放大 */
@media (hover: hover) {
    .success-button,
    .fail-button,
    .second-btn,
    .app-buttons-content .app-buttons,
    .book-btn,
    .entry-popup-submit,
    .class-btn,
    .gender-toggle,
    .close,
    .entry-popup-close,
    .first-screen-btn,
    .award-footer-floating-btn,
    .fp .prev,
    .fp .next {
        transition: transform 0.2s ease;
    }
    .success-button:hover,
    .fail-button:hover,
    .second-btn:hover,
    .book-btn:hover,
    .entry-popup-submit:hover,
    .class-btn:hover,
    .gender-toggle:hover,
    .close:hover,
    .entry-popup-close:hover,
    .first-screen-btn:hover,
    .award-footer-floating-btn:hover,
    .fp .prev:hover,
    .fp .next:hover {
        transform: scale(1.05);
    }
    .app-buttons-content .app-buttons:hover {
        transform: scale(1.05);
    }
}

/* Loading Styles */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

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

.loading-logo {
    width: 15vw;
    height: 10.1vw;
    background-image: url('../img/pc/logo.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-text {
    margin-top: 2vw;
    font-size: 2vw;
    color: #0d4281;
    animation: fadeInOut 1.5s ease-in-out infinite;
}

.loading-progress-container {
    margin-top: 2vw;
    width: 20vw;
    height: 2vw;
    /* background-color: rgba(204, 101, 50, 0.3); */
    border-radius: 0.25vw;
    overflow: visible;
    position: relative;
    padding-top: 1vw;
}

.loading-progress-bar {
    height: 0.5vw;
    width: 0%;
    background-color: #0d4281;
    border-radius: 0.25vw;
    transition: width 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
}

.loading-progress-percent {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5vw;
    color: #0d4281;
    z-index: 10;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    
    .loading-logo {
        width: 40vw;
        height: 26.9333vw;
    }
    .loading-text {
        font-size: 4vw;
    }
    .loading-progress-container {
        width: 40vw;
        height: 4vw;
    }
    .loading-progress-bar {
        height: 1vw;
    }
    .loading-progress-percent {
        font-size: 3vw;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes firstScreenPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fingerTapHint {
    0% {
        transform: translateY(0) scale(1);
    }
    52% {
        transform: translateY(0.15vw) scale(1.15);
    }
    50% {
        transform: translateY(0.15vw) scale(1.15);
    }
    68% {
        transform: translateY(0.15vw) scale(1.15);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInUpSoft {
    from {
        opacity: 0;
        transform: translate3d(0, 1.0417vw, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes successCheckAppear {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    70% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes successRewardBreath {
    0%,
    100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.16);
    }
}

.fadeInUpSoft {
    animation-name: fadeInUpSoft;
    animation-duration: 0.7s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 767px) {
    @keyframes fadeInUpSoft {
        from {
            opacity: 0;
            transform: translate3d(0, 2.6667vw, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.loading-container.hidden {
    opacity: 0;
    visibility: hidden;
}

@media only screen and (max-width: 767px) {
    body {
        padding: 0px;
        margin: 0px;
    }
    .container {
        width: 100vw;
        position: relative;
    }
    .body-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /*top-award-content start*/
    .top-award-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        height: 114.2667vw;
        background-image: url('../img/bg1.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .logo-content {
        position: absolute;
        top: 2.4vw;
        left: 1.47vw;
        z-index: 100;
    }
    .logo {
        width: 17.2vw;
        height: 11.58vw;
        background-image: url('../img/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-award {
        width: 94vw;
        height: 30.8vw;
        background-image: url('../img/award.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .top-award i {
        position: absolute;
        bottom: 4vw;
        left: 5vw;
        width: 84vw;
        height: 15vw;
        border-radius: 15vw;
    }
    .middle-book-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2vw;
    }
    .middle-book {
        width: 36.2667vw;
        height: 8.9333vw;
        z-index: 10;
        position: relative;
        margin-bottom: 2.4vw;
        border-radius: 10vw;
    }
    .middle-book i{
        position: absolute;
        left: 1.6vw;
        bottom: 0.6vw;
        border-radius: 10vw;
        width: 33vw;
        height: 8.2vw;
    }
    .apple-btn{
        background-image: url('../img/appleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .google-btn {
        background-image: url('../img/googleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    /*top-award-content end*/


    /*phone-content start*/
    .phone-content {
        width: 100vw;
        position: relative;
        background-image: url('../img/bg2.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin-top: -1px;
        height: 132.1333vw;
        overflow: hidden;
    }
    .phone-step-container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 11vw;
        box-sizing: border-box;
    }
    .phone-step-right {
        position: static;
        order: 1;
        width: 100%;
        z-index: 2;
        flex-shrink: 0;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .phone-title {
        width: 52.5333vw;
        height: 17.0667vw;
        background-image: url('../img/title1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: -4.5vw;
        margin-top: 2.2vw;
    }
    .phone-step1 {
        width: 100%;
        height: auto;
        margin: 0;
        position: static;
        order: 2;
        overflow: visible;
        flex-shrink: 0;
    }
    .phone-input-content {
        position: static;
        width: 100%;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .input-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 5.2vw;
    }
    .input-bg {
        width: 75.6vw;
        height: 8.6667vw;
        background-image: url('../img/buttonBar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left: 3.2vw;
        box-sizing: border-box;
    }
    .phone-prefix {
        width: 6vw;
        height: 2.8vw;
        background-image: url('../img/phonePrefix010.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .phone-prefix-divider {
        width: 0.2667vw;
        height: 5.3333vw;
        background-image: url('../img/dividerShape.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
        margin: 0 1.6vw;
    }
    .input {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 100%;
        border: none;
        border-radius: 2vw;
        text-align: left;
        outline: none;
        font-size: 2.8vw;
        color: #999999;
        background: transparent;
    }
    .input input::placeholder {
        color: #999999;
    }
    .protocal-container {
        width: 100vw;
        /* margin-top: 2.4vw; */
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .protocal-content {
        width: 78vw;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .circle {
        height: 3.7333vw;
        width: 3.7333vw;
        flex-shrink: 0;
        /* border: 0.2667vw solid #4b8fd9; */
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;
    }
    .right-icon {
        width: 2.6667vw;
        height: 2.6667vw;
        background-image: url('../img/checkIcon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        top: -1.8vw;
        left: 1vw;
    }
    .protocal-tip {
        height: 8.8vw;
        width: 70.4vw;
        /* background-image: url('../img/protocal.webp'); */
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 1.6vw;
        flex-shrink: 0;
    }
    .book-btn-content {
        width: 100%;
        height: 32.8vw;
        margin-top: -4.4vw;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .book-btn {
        width: 69.2vw;
        height: 32.8vw;
        display: flex;
        background-image: url('../img/preRegisterButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 15vw;
        position: relative;
        transform-origin: center center;
        animation: firstScreenPulse 1.5s ease-in-out infinite;
    }
    .reward-store-btn--pc {
        display: none;
    }
    .reward-store-btn--mo {
        width: 78vw;
        height: 38.6667vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .phone-step2 {
        width: auto;
        height: auto;
        margin: 0 auto;
        position: relative;
    }
    .app-buttons-content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.6vw;
        position: static;
    }
    .app-btn-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .app-buttons-content .apple-btn {
        background-image: url('../img/appleButton.webp');
    }
    .app-buttons-content .google-btn {
        background-image: url('../img/googleButton.webp');
    }
    .app-buttons{
        width: 36.2667vw;
        height: 8.9333vw;
        position: relative;
        border-radius: 10vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .phone-step3 {
        width: 91.7333vw;
        height: 59.2vw;
        /* background-image: url('../img/step3.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 89.7333vw 100%; */
        /* background-position-x: 2vw; */
        margin: auto;
        position: relative;
    }
    .facebook-buttons-content{
        height: 10.53vw;
        width: 100%;
        position: absolute;
        bottom: 8.4vw;
    }
    .facebook-buttons{
        width: 37.47vw;
        height: 100%;
        /* background-image: url('../img/facebook.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 100% 100%; */
        position: absolute;
        right: 9vw;
        border-radius: 10vw;
    }
    .facebook-buttons i{
        position: absolute;
        left: 1.4vw;
        bottom: .8vw;
        height: 7.6vw;
        width: 34.6vw;
        border-radius: 5vw;
    }
    /*phone-content end*/

    /*book-user-container start*/
    .book-user-container {
        width: 100vw;
        height: 150.6667vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background-image: url('../img/bg3.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin-top: -1px;
        overflow: hidden;
    }
    .book-user-title {
        width: 52.54vw;
        height: 17.07vw;
        background-image: url('../img/title2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 11vw;
    }
    .book-cloud {
        width: 100vw;
        height: 31.6vw;
        background-image: url('../img/cloud.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        margin: auto;
        bottom: -2vw;
    }
    .book-user-content {
        min-width: 56vw;
        width: auto;
        height: 5vw;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        position: absolute;
        top: 5.6vw;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .book-tip {
        width: 19.4vw;
        height: 4.9vw;
        background-image: url('../img/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 2vw;
    }
    .book-num {
    display: flex;
    }
    .book-num img{      
        height: 7vw;   
        width: auto;
    }
    .book-milestone-reward{
        width: 100%;
        height: 100%;
        position: relative;
        display: block;
    }
    .milestone-reward {
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .milestone-reward1 {
        left: 0.2917vw;
        top: 34.25vw;
        width: 30.6667vw;
        height: 53.6vw;
    }
    .milestone-reward2 {
        left: 34.75vw;
        top: 22.7708vw;
        width: 30.6667vw;
        height: 53.6vw;
    }
    .milestone-reward3 {
        left: 68.1875vw;
        top: 33.4896vw;
        width: 30.6667vw;
        height: 53.6vw;
    }
    .milestone-reward4 {
        left: 16.6771vw;
        top: 80.6146vw;
        width: 30.6667vw;
        height: 53.6vw;
    }
    .milestone-reward5 {
        left: 51.4271vw;
        top: 81.0313vw;
        width: 30.6667vw;
        height: 53.6vw;
    }
    /*book-user-container end*/

    /*award-footer start*/
    .award-footer {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background-image: none;
        margin-top: -1px;
    }
    .award-footer-title {
        width: 52.54vw;
        height: 16.94vw;
        background-image: url('../img/title3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 4vw;
    }
    .feature-title {
        width: 52.54vw;
        height: 16.94vw;
        background-image: url('../img/title4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 10.5vw;
        margin-bottom: 3vw;
    }

    /* 人物选择 */
    .character-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        position: relative;
    }
    .award-footer-pc1 {
        width: 100vw;
        height: 106.6667vw;
        position: relative;
        background-image: url('../img/bg4.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        /* overflow: hidden; */
    }
    .award-footer-pc2 {
        width: 100vw;
        height: 112.4vw;
        position: relative;
        background-image: url('../img/bg5.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        overflow: hidden;
    }

    .info-panel {
        display: flex;
        position: relative;
        width: 100vw;
        top: 27vw;
        z-index: 1;
    }

    .gender-toggle-wrap {
        position: absolute;
        top: 61.0667vw;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 0;
        z-index: 2;
        pointer-events: none;
    }

    .gender-toggle {
        position: absolute;
        left: 86.4688vw;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        pointer-events: auto;
        bottom: -17vw;
    }

    .gender-toggle img {
        width: 10vw;
        height: 9.4667vw;
    }

    .character-info {
        margin-bottom: 2.2133vw;
        width: 46.2667vw;
    }

    .info-content img {
        width: 46.2667vw;
        height: 53.4667vw;
    }

    .character-display-wrap {
        position: absolute;
        bottom: 5.2vw;
        left: 0;
        width: 100%;
        min-height: 45vw;
        pointer-events: none;
        z-index: 0;
    }
    .character-display {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        pointer-events: none;
    }

    .character-display img {
        position: absolute;
        bottom: 0;
        height: auto;
    }

    .character-display img[id^="char_male_"] {
        right: auto;
        left: auto;
    }

    .character-display img[id^="char_female_"] {
        right: auto;
        left: auto;
    }

    /* 医官 */
    #char_male_doctor {
        width: 78vw;
        left: 22vw;
        bottom: -37vw;
    }
    #char_female_doctor {
        width: 71.8667vw;
        left: 28.2vw;
        bottom: 9vw;
    }

    /* 猎魔人 */
    #char_male_hunter {
        width: 68.9333vw;
        left: 31vw;
        bottom: 11vw;
    }
    #char_female_hunter {
        width: 74.6667vw;
        left: 25vw;
        bottom: 11vw;
    }

    /* 乐师 */
    #char_male_bard {
        width: 67.0667vw;
        left: 33vw;
        bottom: 11vw;
    }
    #char_female_bard {
        width: 65.6vw;
        left: 34vw;
        bottom: 12vw;
    }

    /* 狂刃 */
    #char_male_berserker {
        width: 74.6667vw;
        left: 25vw;
        bottom: -24vw;
    }
    #char_female_berserker {
        width: 69.6vw;
        left: 31vw;
        bottom: -1vw;
    }

    /* 幻刺 */
    #char_male_assassin {
        width: 57.8667vw;
        left: 43vw;
        bottom: -11vw;
    }
    #char_female_assassin {
        width: 90vw;
        left: 10vw;
        bottom: 13vw;
    }

    .class-selector {
        display: flex;
        gap: .2vw;
        position: absolute;
        right: 1vw;
        bottom: 8vw;
    }

    .class-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        height: 14.8vw;
        position: relative;
        border-radius: 30vw;
        padding: 0;
    }

    .class-btn img {
        width: 13.7333vw;
        height: auto;
        padding: 0;
    }

    .award-footer-floating-bar,
    .award-footer-finger-pointer,
    .award-footer-floating-btn {
        position: fixed;
        opacity: var(--mobile-float-opacity, 0);
        transition: opacity 1s linear, bottom 0.2s ease;
    }
    .award-footer-floating-bar {
        bottom: var(--mobile-float-bottom, 0px);
        left: 0;
        top: auto;
        width: 100vw;
        height: 37.6vw;
        background-image: url('../img/floatingBar.webp');
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        pointer-events: none;
        z-index: 110;
    }
    .award-footer-finger-pointer {
        bottom: calc(-0.3944vw + var(--mobile-float-bottom, 0px));
        left: 88vw;
        top: auto;
        width: 8.9333vw;
        height: 8.4vw;
        background-image: url('../img/fingerPointer.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        transform-origin: center bottom;
        animation: fingerTapHint 2.2s ease-in-out infinite;
        z-index: 112;
    }
    .award-footer-floating-btn {
        bottom: calc(-0.6478vw + var(--mobile-float-bottom, 0px));
        left: 50.1333vw;
        top: auto;
        width: 48.6667vw;
        height: 20.1333vw;
        background-image: url('../img/floatingBarButton.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
        transform-origin: center center;
        z-index: 111;
        /* animation: firstScreenPulse 1.5s ease-in-out infinite; */
    }
    /*award-footer end*/
    
    
    
    
    .footer-container {
        position: relative;
        background-image: url('../img/userAgreement.webp');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 100vw;
        height: 12.8vw;
        flex-shrink: 0;
    }

    .footer-legal-links {
        position: absolute;
        right: 24.6875vw;
        top: 65%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.8333vw;
        z-index: 1;
    }

    .footer-terms-btn {
        width: 7.7333vw;
        height: 2vw;
        background: url('../img/termsOfService.webp') no-repeat center;
        background-size: contain;
        cursor: pointer;
        flex-shrink: 0;
    }

    .footer-privacy-btn {
        width: 16vw;
        height: 2vw;
        background: url('../img/privacyPolicy.webp') no-repeat center;
        background-size: contain;
        cursor: pointer;
        flex-shrink: 0;
    }

    .footer-legal-divider {
        color: #f5a623;
        font-size: 2.1333vw;
        line-height: 1;
        user-select: none;
    }

    .content-box {
        width: 100vw;
        height: 100vw;
        position: relative;
        top: 25vw;
    }

    .success-content,
    .fail-content,
    .duplicate-content {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 999;
    }
    .success-content .content-box,
    .fail-content .content-box,
    .duplicate-content .content-box {
        top: 0;
    }
    .success-content .close,
    .success-content .succes-close {
        width: 7.7333vw;
        height: 7.7333vw;
        background-image: url('../img/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 33.3333vw);
        right: calc(50vw - 43.5vw);
        cursor: pointer;
    }
    .success-content .success-btn {
        position: absolute;
        top: calc(50vh + 17vw);
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        flex-direction: row;
        gap: 2vw;
        display: flex;
        justify-content: center;
    }
    .success-bg {
        width: 90vw;
        height: 66.6667vw;
        background-image: url('../img/preRegisterSuccess.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(50vh - 33.3333vw);
        overflow: visible;
    }
    .success-prize-btn {
        position: absolute;
        left: 49%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: 72vw;
        height: 30vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        z-index: 4;
    }
    .success-reward-figurine {
        position: absolute;
        left: 64%;
        top: 28.5%;
        width: 21.62vw;
        height: 20.72vw;
        background-image: url('../img/successRewardFigurine.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transform: scale(1);
        transform-origin: center center;
        z-index: 2;
    }
    .success-content.reward-enlarged .success-reward-figurine {
        animation: successRewardBreath 2s ease-in-out infinite;
    }
    .success-progress {
        position: absolute;
        left: 10.6%;
        top: 64.5%;
        width: 74.8%;
        height: 3.24vw;
        z-index: 2;
    }
    .success-progress-bar {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1.35vw;
        transform: translateY(-50%);
    }
    .success-progress-track {
        width: 100%;
        height: 100%;
        background-image: url('../img/progressBarBg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .success-progress-fill {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-image: url('../img/progressBarFill.webp');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: width 2.8s ease-in-out;
        z-index: 1;
    }
    .success-content.is-animating .success-progress-fill {
        width: 50%;
    }
    .success-progress-steps {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .success-progress-step {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 3.24vw;
        height: 3.24vw;
        z-index: 2;
    }
    .success-progress-step[data-step="1"] {
        left: 17%;
    }
    .success-progress-step[data-step="2"] {
        left: 50%;
    }
    .success-progress-step[data-step="3"] {
        left: 83%;
    }
    .success-progress-node {
        width: 3.24vw;
        height: 3.24vw;
        background-image: url('../img/progressNodeInactive.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: background-image 0.25s ease;
    }
    .success-progress-step.is-done .success-progress-node {
        background-image: url('../img/progressNodeActive.webp');
    }
    .success-progress-check {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.16vw;
        height: 1.98vw;
        margin-left: -1.08vw;
        margin-top: -0.99vw;
        background-image: url('../img/progressCheck.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        transform: scale(0.4);
        transform-origin: center center;
        z-index: 3;
        pointer-events: none;
    }
    .success-progress-step.is-done .success-progress-check {
        animation: successCheckAppear 0.35s ease forwards;
        pointer-events: auto;
    }
    .success,
    .success-google {
        width: 36.2667vw;
        height: 8.9333vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .success {
        background-image: url('../img/appleButton.webp');
    }
    .success-google {
        background-image: url('../img/googleButton.webp');
    }
    .fail-content .close,
    .fail-content .fail-close,
    .duplicate-content .close,
    .duplicate-content .duplicate-close {
        width: 7.7333vw;
        height: 7.7333vw;
        background-image: url('../img/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        right: calc(50vw - 49vw);
        cursor: pointer;
    }
    .fail-content .close,
    .fail-content .fail-close {
        top: calc(50vh - 37.5vw);
    }
    .duplicate-content .close,
    .duplicate-content .duplicate-close {
        top: calc(50vh - 30.5794vw);
    }
    .fail-content .success-btn {
        position: absolute;
        top: calc(50vh + 22vw);
        left: 52%;
        transform: translateX(-50%);
        width: 90vw;
        flex-direction: row;
        gap: 2vw;
        display: flex;
        justify-content: center;
    }
    .fail-bg {
        width: 90vw;
        height: 75vw;
        background-image: url('../img/preRegisterFail.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(50vh - 37.5vw);
    }
    .fail-role-btn {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: 62.6667vw;
        height: 45vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        z-index: 4;
    }
    .duplicate-bg {
        width: 90vw;
        height: 55.1587vw;
        background-image: url('../img/preRegisterDuplicate.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(50vh - 27.5794vw);
    }
    .entry-popup-content {
        display: none;
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 12000000000;
        background-color: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
    }
    .entry-popup-content.is-visible {
        display: block;
    }
    .entry-popup-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 131.6vw;
    }
    .entry-popup-bg {
        width: 100%;
        height: 100%;
        background-image: url('../img/entryPopupBg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }
    .entry-popup-close {
        width: 7.0222vw;
        height: 7.0222vw;
        background-image: url('../img/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 5;
        top: 44.2041vw;
        right: 9.1308vw;
        cursor: pointer;
    }
    .entry-popup-countdown {
        position: absolute;
        left: 50.2%;
        top: 38.8%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.8vw;
        z-index: 2;
        font-size: 4.1481vw;
        font-weight: 700;
        color: #fff;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        pointer-events: none;
    }
    .entry-countdown-hh,
    .entry-countdown-mm,
    .entry-countdown-ss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 7.1111vw;
        height: 5.6296vw;
        /* padding: 0 0.8vw; */
        /* background: rgba(0, 0, 0, 0.9); */
        border-radius: 0.5926vw;
    }
    .entry-countdown-sep {
        color: #fff;
        font-weight: 700;
        margin: 0 0.2963vw;
    }
    .entry-popup-phones {
        position: absolute;
        left: 50%;
        top: 47.89%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 5.2285vw;
        z-index: 2;
    }
    .entry-phone-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: scale(1);
        transform-origin: center top;
        transition: transform 0.25s ease;
        cursor: pointer;
    }
    .entry-phone-option.is-selected {
        transform: scale(1);
    }
    .entry-phone-visual {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .entry-phone-visual--iphone .phone-img {
        height: 28.8vw;
        width: 25.33333333vw;
        object-fit: contain;
    }
    .entry-phone-visual--samsung .phone-img {
        width: 25.33333333vw;
        height: 28.8vw;
        object-fit: contain;
    }
    .entry-phone-option .phone-img--selected {
        display: none;
    }
    .entry-phone-option.is-selected .phone-img--unselected {
        display: none;
    }
    .entry-phone-option.is-selected .phone-img--selected {
        display: block;
    }
    .entry-phone-option.is-selected {
        cursor: pointer;
    }
    .entry-popup-form {
        position: absolute;
        left: 50%;
        top: 70.9%;
        transform: translateX(-50%);
        width: 61.5778vw;
        z-index: 2;
        /* background: aliceblue; */
        opacity: 0.8;
    }
    .entry-popup-input-bg {
        width: 100%;
        height: 8.3222vw;
        background-image: url('../img/entryPopupPhoneBar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 1.8967vw;
        box-sizing: border-box;
    }
    .entry-popup-phone-prefix {
        width: 9.5111vw;
        height: 2.6944vw;
        background-image: url('../img/entryPopupPhonePrefix010.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .entry-popup-phone-divider {
        width: 0.2422vw;
        height: 2.9vw;
        background-image: url('../img/dividerShape.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
        margin: 0 1.3217vw;
    }
    .entry-popup-input {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .entry-popup-input input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 3vw;
        color: #999;
    }
    .entry-popup-input input::placeholder {
        color: #999;
        font-size: 2.2vw;
    }
    .entry-popup-protocal {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        /* margin-top: 1.2vw; */
        width: 100%;
    }
    .entry-popup-circle {
        position: relative;
        width: 2.4222vw;
        height: 2.4222vw;
        flex-shrink: 0;
        cursor: pointer;
        /* border: 0.2667vw solid #4b8fd9; */
        border-radius: 50%;
        box-sizing: border-box;
        left: 1.2106vw;
    }
    .entry-popup-circle.is-checked {
        border-color: transparent;
    }
    .entry-popup-check {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/checkIcon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }
    .entry-popup-circle.is-checked .entry-popup-check {
        display: block;
    }
    .entry-popup-protocal-tip {
        flex: 1;
        height: 4.5926vw;
        margin-left: 1.2106vw;
        margin-top: 0.2867vw;
        background-image: url('../img/protocal.webp');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .entry-popup-submit {
        position: absolute;
        left: 50%;
        bottom: -6.0279vw;
        width: 54.53333333vw;
        height: 17.73333333vw;
        margin-left: -27.2666667vw;
        background-image: url('../img/entryPopupSubmitBtn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        transform-origin: center center;
        animation: firstScreenPulse 1.5s ease-in-out infinite;
        z-index: 3;
    }
    .fail-btn {
        width: 100%;
        height: 10.27vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .fail,
    .fail-google {
        width: 36.2667vw;
        height: 8.9333vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .fail {
        background-image: url('../img/appleButton.webp');
    }
    .fail-google {
        background-image: url('../img/googleButton.webp');
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: absolute;
        top: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #0d4281;
        font-size: 1.5vw;
    }
    .pro-item {
        width: 15vw;
        margin-top: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .protocal-content {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .footer-google-btn {
        display: none;
    }

    /* 轮播图 start */
    .feature-container{
        width: 95vw;
        min-height: 46.8vw;
        /* padding-bottom: 10vw; */
        position: relative;
        top: 7vw;
    }
    .feature-container-frame {
        width: 81.4667vw;
        height: 46.8vw;
        position: absolute;
        top: 13vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        pointer-events: none;
    }
    .feature {
        width: 95vw;
        position: relative;
        margin: 0 auto;
        top: 14vw;
        z-index: 1;
    }

    .feature .swiper-container {
        width: 95vw;
        overflow: hidden;
    }

    .feature .swiper-slide {
        width: 79.8667vw;
        height: 44.8vw;
        position: relative;
        transition: transform 0.3s ease;
        transform: scale(0.8);
    }

    .feature .swiper-slide-active {
        transform: scale(1);
        z-index: 2;
    }

    .feature .swiper-slide-prev {
        transform: scale(0.8) translateX(15%);
    }

    .feature .swiper-slide-next {
        transform: scale(0.8) translateX(-15%);
    }

    .feature .swiper-slide-prev::after,
    .feature .swiper-slide-next::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.74);
        z-index: 1;
        pointer-events: none;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        z-index: 110;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .prev {
        width: 12.2667vw;
        height: 12vw;
        margin-top: -6vw;
        background-image: url('../img/arrowLeft.webp');
        left: -0.5vw;
    }

    .next {
        width: 12.2667vw;
        height: 12vw;
        margin-top: -6vw;
        background-image: url('../img/arrowRight.webp');
        right: -0.5vw;
    }

    .fp {
        display: flex;
        justify-content: center;
        /* margin-top: 2vw; */
        position: relative;
        top: 15.2vw;
    }

    .fp .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60vw;
        min-height: 3.7333vw;
        padding-left: 1.33vw;
        position: relative;
        top: 0;
        background-image: url('../img/horizontalLine.webp');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 55.2vw 0.1333vw;
    }

    .fp .swiper-pagination-bullet {
        width: 1.7333vw;
        height: 1.7333vw;
        background: url('../img/dotInactive.webp') no-repeat;
        background-size: contain;
        margin: 0 1.07vw;
        opacity: 1;
        position: relative;
        z-index: 1;
    }

    .fp .swiper-pagination-bullet-active {
        width: 3.6vw;
        height: 3.7333vw;
        background: url('../img/dotActive.webp') no-repeat;
        background-size: contain;
    }
    .feature .swiper-slide img,
    .swiper-lazy{
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: relative;
        z-index: 0;
    }
    /* 轮播图 end */
}

@media only screen and (min-width: 767px) {
    body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
    }
    .container {
        width: 100vw;
        position: relative;
    }
    .body-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /*top-award-content start*/
    .top-award-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 56.25vw;
        background-image: url('../img/pc/bg1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .logo-content {
        position: absolute;
        top: 2vw;
        left: 2vw;
        z-index: 100;
    }
    .logo {
        width: 7.81vw;
        height: 5.26vw;
        background-image: url('../img/pc/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-award {
        width: 41.6667vw;
        height: 12.8646vw;
        background-image: url('../img/pc/award.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 33.1771vw;
        cursor: pointer;
    }
    .top-award i {
        height: 7vw;
        display: block;
        border-radius: 20vw;
        overflow: hidden;
        position: absolute;
        bottom: 1.6vw;
        left: 2vw;
        width: 37.5vw;
    }
    .middle-book-content {
        width: 37.8125vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 46.6667vw;
    }
    .middle-book {
        width: 18.75vw;
        height: 4.84375vw;
        z-index: 10;
        position: relative;
        border-radius: 15vw;
    }
    .middle-book i {
        height: 4vw;
        display: block;
        border-radius: 20vw;
        overflow: hidden;
        position: absolute;
        bottom: 0.5vw;
        left: 0.8vw;
        width: 17vw;
    }
    .apple-btn {
        background-image: url('../img/pc/appleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .google-btn {
        background-image: url('../img/pc/googleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .first-screen-btn {
        position: absolute;
        left: 66.5625vw;
        top: 33.3333vw;
        width: 27.0313vw;
        height: 12.8125vw;
        background-image: url('../img/pc/firstScreenButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        z-index: 10;
        transform-origin: center center;
        animation: firstScreenPulse 1.5s ease-in-out infinite;
    }

    .book-user-title {
        width: 29.2708vw;
        height: 9.4792vw;
        background-image: url('../img/pc/title2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: -2vw;
    }
    .book-milestone-reward{
        width: 100%;
        height: 100%;
        position: relative;
        display: block;
    }
    .milestone-reward {
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .milestone-reward1 {
        left: 14.9vw;
        top: 16.25vw;
        width: 15.7292vw;
        height: 21.4063vw;
    }
    .milestone-reward2 {
        left: 28.4vw;
        top: 21.7708vw;
        width: 15.7292vw;
        height: 21.4063vw;
    }
    .milestone-reward3 {
        left: 41.92vw;
        top: 13.4896vw;
        width: 15.7292vw;
        height: 21.4063vw;
    }
    .milestone-reward4 {
        left: 55.2vw;
        top: 21.6146vw;
        width: 15.7292vw;
        height: 21.4063vw;
    }
    .milestone-reward5 {
        left: 68.8vw;
        top: 17.0313vw;
        width: 15.7292vw;
        height: 21.4063vw;
    }
    /*top-award-content end*/

    /*phone-content start*/
    .phone-content {
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: 56.25vw;
        background-image: url('../img/pc/bg2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: -0.7292vw;
    }
    .phone-title {
        width: 29.2708vw;
        height: 9.4792vw;
        background-image: url('../img/pc/title1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .phone-step-container {
        width: 100vw;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.3646vw;
    }
    .phone-step-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.2083vw;
        margin-top: 1.7708vw;
        position: static;
    }
    .phone-step1 {
        width: 36.9792vw;
        height: 44.6354vw;
        /* background-image: url('../img/pc/step1.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 100%; */
        position: static;
        display: flex;
        flex-shrink: 0;
    }
    .phone-input-content {
        position: static;
        width: 100%;
        z-index: 10;
    }
    .input-content {
        position: absolute;
        left: 51.4583vw;
        top: 17.8646vw;
        width: 27.5vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        z-index: 10;
    }
    .input-bg {
        width: 27.5vw;
        height: 3.4375vw;
        background-image: url('../img/pc/buttonBar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left: 1.25vw;
        box-sizing: border-box;
    }
    .phone-prefix {
        width: 2.3438vw;
        height: 1.0938vw;
        background-image: url('../img/pc/phonePrefix010.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .phone-prefix-divider {
        width: 0.1042vw;
        height: 2.0833vw;
        background-image: url('../img/pc/dividerShape.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
        margin: 0 0.625vw;
    }
    .input {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 0.8333vw;
        color: #999999;
        background: transparent;
    }
    .input input::placeholder {
        color: #999999;
    }
    .protocal-container {
        position: static;
        width: 0;
        height: 0;
        margin: 0;
    }
    .protocal-content {
        position: static;
        width: 0;
        height: 0;
    }
    .circle {
        position: absolute;
        left: 53.0208vw;
        top: 21.6667vw;
        width: 1.0417vw;
        height: 1.0417vw;
        cursor: pointer;
        z-index: 10;
    }
    .right-icon {
        width: 1.0417vw;
        height: 1.0417vw;
        background-image: url('../img/pc/checkIcon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
    }
    .protocal-tip {
        height: 1.6146vw;
        width: 24.4271vw;
        background-image: url('../img/pc/protocal.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: .5vw;
    }
    .book-btn-content {
        position: absolute;
        left: 53.9583vw;
        top: 23.8021vw;
        width: 23.0208vw;
        height: 10.9896vw;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    .book-btn {
        width: 100%;
        height: 100%;
        display: flex;
        background-image: url('../img/pc/preRegisterButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        position: relative;
        border-radius: 20vw;
        transform-origin: center center;
        animation: firstScreenPulse 1.5s ease-in-out infinite;
    }
    
    .phone-step2 {
        width: 32.8125vw;
        height: 21.25vw;
        /* background-image: url('../img/pc/step2.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 100%; */
        position: static;
        display: flex;
        flex-shrink: 0;
    }
    .app-buttons-content {
        position: static;
        width: 0;
        height: 0;
    }
    .reward-store-btn--mo {
        display: none;
    }
    .reward-store-btn--pc {
        position: absolute;
        left: 21.8125vw;
        top: 36.8854vw;
        width: 44.7917vw;
        height: 15.625vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .app-buttons-content .app-btn-wrap.apple-btn-wrap {
        position: absolute;
        left: 67.6042vw;
        top: 40.8854vw;
    }
    .app-buttons-content .app-btn-wrap.google-btn-wrap {
        position: absolute;
        left: 67.6042vw;
        top: 44.375vw;
    }
    .app-buttons-content .app-buttons.apple-btn {
        width: 12.0313vw;
        height: 3.0208vw;
        background-image: url('../img/pc/appleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .app-buttons-content .app-buttons.google-btn {
        width: 12.0313vw;
        height: 3.0208vw;
        background-image: url('../img/pc/googleButton.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .app-buttons{
        border-radius: 10vw;
    }
    .phone-step3 {
        width: 32.0313vw;
        height: 21.1458vw;
        /* background-image: url('../img/pc/step3.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 100% 100%; */
        position: relative;
        display: flex;
        flex-shrink: 0;
    }
    .facebook-buttons-content{
        height: 3.75vw;
        width: 100%;
        position: absolute;
        bottom: 2.8646vw;
    }
    .facebook-buttons{
        width: 13.3854vw;
        height: 100%;
        /* background-image: url('../img/pc/facebook.webp'); */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        /* background-size: 100% 100%; */
        position: absolute;
        right: 3.5938vw;
        cursor: pointer;
    }
    .facebook-buttons i{
    position: absolute;
    bottom: .4vw;
    left: .4vw;
    width: 12.3854vw;
    height: 2.75vw;
    display: block;
    border-radius: 10vw;
}
    /*phone-content end*/
















    
    /*book-user-container start*/
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 56.25vw;
        background-image: url('../img/pc/bg3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
    }
    .book-user-content {
        min-width: 26vw;
        height: 4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        overflow: visible;
        justify-content: flex-start;
        position: absolute;
        top: 2.6vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    .book-tip {
        width: 10.1042vw;
        height: 2.5521vw;
        background-image: url('../img/pc/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: .4vw;
    }
    .book-num {
        height: 3.5417vw;
        font-size: 2.5vw;
        font-weight: 600;
        text-align: center;
        margin-left: .5vw;
    }
    .book-num img{
        height: 3.5417vw;
    }
    .book-cloud {
        width: 100vw;
        height: 31.6vw;
        background-image: url('../img/pc/cloud.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        margin: auto;
        bottom: -7.9271vw;
        left: 0;
        z-index: 99;
    }
    /*book-user-container end*/

    /*award-footer start*/
    .award-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        background-image: url(../img/pc/bg4.webp);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 56.25vw;
    }

    .character-container {
        flex-direction: column;
        align-items: center;
        width: 100vw;
        position: relative;
    }

    
    .award-footer-pc1 {
        display: block;
        height: 56.25vw;
        /* background-image: url('../img/pc/bg4.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        width: 70.8vw;
        margin: 0 auto 0;
        position: relative;
    }
    .award-footer-title {
        width: 29.2708vw;
        height: 9.4792vw;
        background-image: url('../img/pc/title3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin: 2vw auto 2vw;
    }



    .info-panel {
        width: 19.2188vw;
        text-align: left;
        position: absolute;
        top: 18.0729vw; /* 347px / 1920 */
        left: 1.3375vw; /* 306px / 1920，相对居中容器的视口坐标 */
        z-index: 1;
    }

    .gender-toggle-wrap {
        position: absolute;
        top: 23.8542vw; /* 458px / 1920 */
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 0;
        z-index: 10;
        pointer-events: none;
    }

    .gender-toggle {
        position: absolute;
        left: 70.4688vw; /* 1353px / 1920 */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        pointer-events: auto;
    }

    .gender-toggle img {
        display: block;
        width: 3.9063vw; /* 75px / 1920 */
        height: 3.6979vw; /* 71px / 1920 */
    }

    .character-info {
        margin-bottom: 0;
        width: 19.2188vw;
    }

    .info-content img {
        width: 19.2188vw;
        height: 24.5313vw;
    }

    .character-display-wrap {
        position: absolute;
        bottom: 5.2vw;
        left: 0;
        width: 100%;
        min-height: 45vw;
        pointer-events: none;
        z-index: 0;
    }
    .character-display {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        pointer-events: none;
    }

    .character-display img {
        position: absolute;
        bottom: 0;
        height: auto;
    }

    /* 男性角色左右微调（改 right 或 left） */
    .character-display img[id^="char_male_"] {
        right: 2.62vw;
        left: auto;
    }

    /* 女性角色左右微调（改 right 或 left） */
    .character-display img[id^="char_female_"] {
        right: 2.62vw;
        left: auto;
    }

    /* 医官 */
    #char_male_doctor {width: 57.9167vw;left: 15vw;}
    #char_female_doctor {width: 56.1979vw;left: 17vw;}

    /* 猎魔人 */
    #char_male_hunter {width: 49.0625vw;left: 15vw;}
    #char_female_hunter {width: 49.8438vw;left: 10vw;}

    /* 乐师（@2x ÷ 2） */
    #char_male_bard {width: 38.6979vw;left: 19vw;}
    #char_female_bard {width: 37.8646vw;left: 19vw;}

    /* 狂刃 */
    #char_male_berserker { width: 53.3854vw; }
    #char_female_berserker { width: 57.4479vw; }

    /* 幻刺 */
    #char_male_assassin {width: 57.1354vw;left: 18vw;}
    #char_female_assassin {width: 62.2396vw;left: 1vw;}

    .class-selector {
        position: absolute;
        right: 4vw;
        top: 12vw;
        width: 10.99vw;
        height: 35.21vw;
        background: url('../img/pc/radian.webp') no-repeat;
        background-size: 100% 100%;
    }

    .class-btn {
        position: absolute;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1;
        width: 5.3646vw;
        border-radius: 10vw;
    }

    .class-btn img {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    
    .class-btn.doctor-btn {
        top: 1.35vw;
        left: 3.91vw;
    }
    
    .class-btn.hunter-btn {
        top: 7.97vw;
        left: 6.77vw;
    }
    
    .class-btn.bard-btn {
        top: 14.53vw;
        left: 8.49vw;
    }

    .class-btn.berserker-btn {
        top: 21.15vw;
        left: 6.77vw;
    }
    
    .class-btn.phantom-btn {
        top: 27.71vw;
        left: 3.91vw;
    }

    
    .award-footer-pc2 {
        display: flex;
        position: relative;
        height: 53.125vw;
        background-image: url('../img/pc/bg5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .award-footer-floating-bar {
        position: absolute;
        bottom: .0vw;
        left: 0;
        width: 100vw;
        height: 22.0833vw;
        background-image: url('../img/pc/floatingBar.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100vw 22.0833vw;
        pointer-events: none;
        z-index: 0;
    }

    .award-footer-finger-pointer {
        position: absolute;
        top: 48.9167vw; /* 920px */
        left: 74.9479vw; /* 1439px */
        width: 4.7917vw;
        height: 4.4792vw;
        background-image: url('../img/pc/fingerPointer.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        z-index: 5;
        transform-origin: center bottom;
        animation: fingerTapHint 2.2s ease-in-out infinite;
    }
    .award-footer-floating-btn {
        position: absolute;
        top: 42.5vw;
        left: 53.375vw;
        width: 25.9375vw;
        height: 11.1458vw;
        background-image: url('../img/pc/floatingBarButton.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
        z-index: 3;
        transform-origin: center center;
        /* animation: firstScreenPulse 1.5s ease-in-out infinite; */
    }
    .feature-title {
        width: 29.2708vw;
        height: 9.4792vw;
        background-image: url('../img/pc/title4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 1vw;
    }
    
    
    
    
    .footer-container {
        position: relative;
    }

    .content-box {
        width: 100vw;
        height: 100vw;
        position: fixed;
        top: calc(50vh - 16vw);
    }
    .success-content,
    .fail-content,
    .duplicate-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 111;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .success-content .content-box {
        top: calc(50vh - 19.2708vw);
    }
    .success-bg {
        width: 52.0312vw;
        height: 38.5417vw;
        background-image: url('../img/pc/preRegisterSuccess.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        overflow: visible;
    }
    .success-prize-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 43.4896vw;
        height: 16.7708vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        z-index: 4;
    }
    .success-reward-figurine {
        position: absolute;
        left: 64.2%;
        top: 28.8%;
        width: 12.5vw;
        height: 11.9792vw;
        background-image: url('../img/pc/successRewardFigurine.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transform: scale(1);
        transform-origin: center center;
        z-index: 2;
    }
    .success-content.reward-enlarged .success-reward-figurine {
        animation: successRewardBreath 2s ease-in-out infinite;
    }
    .success-progress {
        position: absolute;
        left: 12.6%;
        top: 63.5%;
        width: 74.8%;
        height: 1.875vw;
        z-index: 2;
    }
    .success-progress-bar {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 0.7812vw;
        transform: translateY(-50%);
    }
    .success-progress-track {
        width: 100%;
        height: 100%;
        background-image: url('../img/pc/progressBarBg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .success-progress-fill {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-image: url('../img/pc/progressBarFill.webp');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: width 2.8s ease-in-out;
        z-index: 1;
    }
    .success-content.is-animating .success-progress-fill {
        width: 45%;
    }
    .success-progress-steps {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .success-progress-step {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1.875vw;
        height: 1.875vw;
        z-index: 2;
    }
    .success-progress-step[data-step="1"] {
        left: 12%;
    }
    .success-progress-step[data-step="2"] {
        left: 45%;
    }
    .success-progress-step[data-step="3"] {
        left: 86%;
    }
    .success-progress-node {
        width: 1.875vw;
        height: 1.875vw;
        background-image: url('../img/pc/progressNodeInactive.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: background-image 0.25s ease;
    }
    .success-progress-step.is-done .success-progress-node {
        background-image: url('../img/pc/progressNodeActive.webp');
    }
    .success-progress-check {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1.25vw;
        height: 1.1458vw;
        margin-left: -0.625vw;
        margin-top: -0.5729vw;
        background-image: url('../img/pc/progressCheck.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0;
        transform: scale(0.4);
        transform-origin: center center;
        z-index: 3;
        pointer-events: none;
    }
    .success-progress-step.is-done .success-progress-check {
        animation: successCheckAppear 0.35s ease forwards;
        pointer-events: auto;
    }
    .succes-close {
        width: 3.0208vw;
        height: 3.0208vw;
        background-image: url('../img/pc/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 16.2708vw);
        right: calc(50vw - 22.0156vw - 1.4583vw);
        cursor: pointer;
    }
    .success-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        gap: 0.8333vw;
        cursor: pointer;
        left: 1.4167vw;
        top: -7.6vw;
    }
    .success-content .success-btn {
        gap: 3.8333vw;
        left: 0;
        top: -8.6vw;
    }
    .success,
    .success-google,
    .fail,
    .fail-google {
        width: 12.0313vw;
        height: 3.0208vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .success {
        background-image: url('../img/pc/appleButton.webp');
    }
    .success-google {
        background-image: url('../img/pc/googleButton.webp');
    }
    .fail-content .content-box {
        top: calc(50vh - 18.8281vw);
    }
    .duplicate-content .content-box {
        top: calc(50vh - 11.1458vw);
    }
    .fail-bg {
        width: 45.1562vw;
        height: 37.6562vw;
        background-image: url('../img/pc/preRegisterFail.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .fail-role-btn {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: 32.6458vw;
        height: 22.9792vw;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        z-index: 4;
    }
    .duplicate-bg {
        width: 36.3542vw;
        height: 22.2917vw;
        background-image: url('../img/pc/preRegisterDuplicate.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .fail-close {
        width: 3.0208vw;
        height: 3.0208vw;
        background-image: url('../img/pc/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 18.8281vw);
        right: calc(50vw - 22.5781vw - 3.0208vw);
        cursor: pointer;
    }
    .duplicate-close {
        width: 3.0208vw;
        height: 3.0208vw;
        background-image: url('../img/pc/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 11.1458vw);
        right: calc(50vw - 18.1771vw - 3.0208vw);
        cursor: pointer;
    }
    .fail-btn {
        width: 100%;
        height: 17.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .fail {
        background-image: url('../img/pc/appleButton.webp');
    }
    .fail-google {
        background-image: url('../img/pc/googleButton.webp');
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: absolute;
        top: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #0d4281;
        font-size: 1.5vw;
    }
    .pro-item {
        width: 15vw;
        margin-top: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .protocal-content {
        /* width: 50%; */
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* 轮播图 */
    .feature-container{
        width: 68vw;
        min-height: 25.0521vw;
        position: absolute;
        top: 9.2708vw; /* 178px */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
    .feature-container-frame {
        width: 43.6979vw;
        height: 25.0521vw;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        pointer-events: none;
    }
    .feature {
        width: 68vw;
        position: relative;
        margin: 0 auto;
        top: 0.4688vw;
        left: 0;
        z-index: 1;
    }

    .feature .swiper-container {
        width: 68vw;
        overflow: hidden;
    }

    .feature .swiper-slide {
        width: 42.8646vw;
        height: 24.1146vw;
        position: relative;
        transition: transform 0.3s ease;
        transform: scale(0.8);
    }

    .feature .swiper-slide-active {
        transform: scale(1);
        z-index: 2;
    }

    .feature .swiper-slide-prev {
        transform: scale(0.8) translateX(15%);
    }

    .feature .swiper-slide-next {
        transform: scale(0.8) translateX(-15%);
    }

    .feature .swiper-slide-prev::after,
    .feature .swiper-slide-next::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.74);
        z-index: 1;
        pointer-events: none;
    }

    .feature .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: relative;
        z-index: 0;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        z-index: 110;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .prev {
        width: 4.8958vw;
        height: 4.6875vw;
        margin-top: -2.3438vw;
        background-image: url('../img/pc/arrowLeft.webp');
        left: 0.5vw;
    }

    .next {
        width: 4.7917vw;
        height: 4.6875vw;
        margin-top: -2.3438vw;
        background-image: url('../img/pc/arrowRight.webp');
        right: 0.5vw;
    }

    .fp {
        display: flex;
        justify-content: center;
        margin-top: 1.5vw;
    }

    .fp .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50vw;
        min-height: 1.4583vw;
        padding-left: 1vw;
        position: relative;
        top: 0;
        background-image: url('../img/pc/horizontalLine.webp');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21.5625vw 0.0521vw;
    }

    .fp .swiper-pagination-bullet {
        width: 0.6771vw;
        height: 0.6771vw;
        background: url('../img/pc/dotInactive.webp') no-repeat;
        background-size: 100% 100%;
        margin: 0 0.5vw;
        opacity: 1;
        position: relative;
        z-index: 1;
    }

    .fp .swiper-pagination-bullet-active {
        width: 1.4063vw;
        height: 1.4583vw;
        background: url('../img/pc/dotActive.webp') no-repeat;
        background-size: 100% 100%;
    }
    .footer-container {
        position: relative;
        background-image: url('../img/pc/userAgreement.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100vw 8.0729vw;
        width: 100vw;
        height: 8.0729vw;
        flex-shrink: 0;
    }

    .footer-legal-links {
        position: absolute;
        right: 29.1vw;
        top: 52%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.5208vw;
        z-index: 1;
    }

    .entry-popup-content {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 120;
        background-color: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
        align-items: center;
        justify-content: center;
    }
    .entry-popup-content.is-visible {
        display: flex;
    }
    .entry-popup-box {
        position: relative;
        width: 43.0208vw;
        height: 39.8438vw;
        flex-shrink: 0;
    }
    .entry-popup-bg {
        width: 100%;
        height: 100%;
        background-image: url('../img/pc/entryPopupBg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }
    .entry-popup-close {
        width: 3.0208vw;
        height: 3.0208vw;
        background-image: url('../img/pc/modalClose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 5;
        top: 5.1667vw;
        right: 3.75vw;
        cursor: pointer;
    }
    .entry-popup-countdown {
        position: absolute;
        left: 49.9%;
        top: 39.2%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3vw;
        z-index: 2;
        font-size: 1.25vw;
        font-weight: 700;
        color: #fff;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        pointer-events: none;
    }
    .entry-countdown-hh,
    .entry-countdown-mm,
    .entry-countdown-ss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.0833vw;
        height: 1.6667vw;
        padding: 0 0.26vw;
        border-radius: 0.1563vw;
    }
    .entry-countdown-sep {
        color: #fff;
        font-weight: 700;
        margin: 0 0.1042vw;
    }
    .entry-popup-phones {
        position: absolute;
        left: 50%;
        top: 47.6%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 1.25vw;
        z-index: 2;
    }
    .entry-phone-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: scale(1);
        transform-origin: center top;
        transition: transform 0.25s ease;
        cursor: pointer;
    }
    .entry-phone-option.is-selected {
        transform: none;
    }
    .entry-phone-visual {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-shrink: 0;
    }
    .entry-phone-visual--iphone {
        width: 7.7604vw;
        height: 8.8021vw;
    }
    .entry-phone-visual--samsung {
        width: 8.3333vw;
        height: 8.8542vw;
    }
    .entry-phone-visual .phone-img {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .entry-phone-option .phone-img--selected {
        display: none;
    }
    .entry-phone-option.is-selected .phone-img--unselected {
        display: none;
    }
    .entry-phone-option.is-selected .phone-img--selected {
        display: block;
    }
    .entry-phone-option.is-selected {
        cursor: pointer;
    }
    .entry-popup-form {
        position: absolute;
        left: 49%;
        top: 71%;
        transform: translateX(-50%);
        width: 18.75vw;
        z-index: 2;
    }
    .entry-popup-input-bg {
        width: 18.75vw;
        height: 2.2917vw;
        background-image: url('../img/pc/entryPopupPhoneBar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 0.9vw;
        box-sizing: border-box;
    }
    .entry-popup-phone-prefix {
        width: 1.5104vw;
        height: 0.7292vw;
        background-image: url('../img/pc/entryPopupPhonePrefix010.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .entry-popup-phone-divider {
        width: 0.1042vw;
        height: 1.25vw;
        background-image: url('../img/pc/dividerShape.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
        margin: 0 0.625vw;
    }
    .entry-popup-input {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .entry-popup-input input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.625vw;
        color: #999;
    }
    .entry-popup-input input::placeholder {
        color: #999;
        font-size: 0.625vw;
    }
    .entry-popup-protocal {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-top: 0vw;
        width: 100%;
        margin-left: .6vw;
    }
    .entry-popup-circle {
        position: relative;
        width: 1.0417vw;
        height: 1.0417vw;
        flex-shrink: 0;
        cursor: pointer;
        border-radius: 50%;
        box-sizing: border-box;
    }
    .entry-popup-circle.is-checked {
        border-color: transparent;
    }
    .entry-popup-check {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/pc/checkIcon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }
    .entry-popup-circle.is-checked .entry-popup-check {
        display: block;
    }
    .entry-popup-protocal-tip {
        flex: 1;
        height: 1.6146vw;
        margin-left: 0.4167vw;
        margin-top: 0.05vw;
        background-image: url('../img/pc/protocal.webp');
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .entry-popup-submit {
        position: absolute;
        left: 50%;
        bottom: -2vw;
        width: 15vw;
        height: 5.7812vw;
        margin-left: -7.5vw;
        background-image: url('../img/pc/entryPopupSubmitBtn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        transform-origin: center center;
        animation: firstScreenPulse 1.5s ease-in-out infinite;
        z-index: 3;
    }

    .footer-terms-btn {
        width: 3.0208vw;
        height: 0.8333vw;
        background: url('../img/pc/termsOfService.webp') no-repeat center;
        background-size: contain;
        cursor: pointer;
        flex-shrink: 0;
    }

    .footer-privacy-btn {
        width: 6.3021vw;
        height: 0.8333vw;
        background: url('../img/pc/privacyPolicy.webp') no-repeat center;
        background-size: contain;
        cursor: pointer;
        flex-shrink: 0;
    }

    .footer-legal-divider {
        /* color: #f5a623; */
        font-size: 0.8333vw;
        line-height: 1;
        user-select: none;
    }
}