/* Sweep Effect - 通用扫光效果 */
.sweep-effect {
    overflow: hidden;
}
.sweep-effect::before {
    content: "";
    position: absolute;
    top: 0;
    right: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, transparent, rgba(255, 255, 255, 0.6), transparent, transparent);
    -webkit-animation: sweep 2s linear infinite;
    animation: sweep 2s linear infinite;
}
@keyframes sweep {
    0% { right: -100%; opacity: 1;}
    50% { right: -30%; opacity: 1;}
    80% { right: 12%; opacity: 0;}
    100% {right: 40%;opacity: 0;} 
}
@media only screen and (max-width: 767px) {
    .sweep-effect::before {
        left: -100%;
    }
    @keyframes sweep {
        0% { left: -100%; opacity: 1;}
        50% { left: -30%; opacity: 1;}
        80% { left: 12%; opacity: 0;}
        100% {left: 40%;opacity: 0;} 
    }
}
@media only screen and (min-width: 767px) {
    
}

/* 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: 7.5vw;
    background-image: url('../imgs/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: #cc6532;
    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: #cc6532;
    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: #cc6532;
    z-index: 10;
    font-weight: bold;
}

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

@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: 0;
        margin: 0;
    }
    .container {
        width: 100vw;
        position: relative;
        margin-bottom: 17.8vw;
    }
    .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: 179.2vw;
        background-image: url('../imgs/bg1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .logo-content {
        position: absolute;
        top: 2vw;
        left: 2.9vw;
        z-index: 100;
    }
    .logo {
        width: 20.4vw;
        height: 10.26vw;
        background-image: url('../imgs/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-award {
        width: 90.93vw;
        height: 23.07vw;
        background-image: url('../imgs/award.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .top-award i {
        position: absolute;
        bottom: 1vw;
        left: 0.8vw;
        width: 88.6vw;
        height: 17.2vw;
        border-radius: 15vw;
    }
    .middle-book-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2vw;
        padding-bottom: 2.7333vw;
        padding-top: 2vw;
    }
    .middle-book {
        width: 43.87vw;
        height: 11.47vw;
        z-index: 10;
        position: relative;
        margin-bottom: 2.4vw;
        border-radius: 10vw;
    }
    .middle-book i{
        position: absolute;
        left: 0.6vw;
        bottom: 0.6vw;
        border-radius: 10vw;
        width: 39.4vw;
        height: 9.6vw;
    }
    .apple-btn{
        background-image: url('../imgs/apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .google-btn {
        background-image: url('../imgs/google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /*top-award-content end*/


    /*phone-content start*/
    .phone-content {
        width: 100%;
        position: relative;
        background-image: url('../imgs/bg2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
        height: 244.9333vw;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .phone-title {
        width: 60.8vw;
        height: 16.2667vw;
        background-image: url('../imgs/title1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.2667vw;
    }
    .phone-step1 {
        width: 96.6667vw;
        height: 85vw;
        margin: auto;
        position: relative;
        overflow: visible;
    }
    .phone-input-content {
        position: absolute;
        bottom: 2vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    .input-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .input-bg {
        width: 81.2vw;
        height: 10.6667vw;
        background-image: url('../imgs/input-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .input {
        height: 92%;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 40vw;
        border: none;
        border-radius: 2vw;
        text-align: center;
        outline: none;
        font-size: 4vw;
        color: #913b28;
    }
    .input input::placeholder {
        color: #c39487;
    }
    .protocal-container {
        width: 100vw;
        height: 4.1333vw;
        margin-top: 2.1333vw;
        margin-bottom: 3.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .protocal-content {
        width: 78vw;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .circle {
        height: 3.7333vw;
        width: 3.7333vw;
        background-image: url('../imgs/kk.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .right-icon {
        height: 4.9333vw;
        width: 5.0667vw;
        background-image: url('../imgs/right-icon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -1.2vw;
    }
    .protocal-tip {
        height: 4.1333vw;
        width: 62.5333vw;
        background-image: url('../imgs/protocal.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1.5vw;
        margin-top: 1vw;
    }
    .book-btn-content {
        width: 100%;
        height: 15.6vw;
        margin-bottom: 6.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .book-btn {
        width: 60.8vw;
        height: 100%;
        display: flex;
        background-image: url('../imgs/book.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 15vw;
        position: relative;
    }
    .book-btn i{
        width: 58.2vw;
        height: 14vw;
        position: absolute;
        bottom: 1.2vw;
        left: 1vw;
        border-radius: 15vw;
    }
    
    .phone-step2 {
        width: 93.8667vw;
        height: 42vw;
        margin: auto;
        position: relative;
    }
    .app-buttons-content {
        width: 100%;
        height: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.8vw;
        position: absolute;
        bottom: 8.8vw;
    }
    .app-buttons-content .apple-btn {
        background-image: url('../imgs/apple1.webp');
    }
    .app-buttons-content .google-btn {
        background-image: url('../imgs/google1.webp');
    }
    .app-buttons{
        height: 100%;
        width: 38.2667vw;
        position: relative;
        border-radius: 10vw;
    }
    .app-buttons i{
        position: absolute;
        left: 0.5vw;
        bottom: .8vw;
        height: 8.6vw;
        width: 36.8vw;
        border-radius: 5vw;
    }
    .phone-step3 {
        width: 91.7333vw;
        height: 74vw;
        margin: auto;
        position: relative;
    }
    .facebook-buttons-content{
        height: 11.4667vw;
        width: 100%;
        position: absolute;
        bottom: 8.4vw;
        display: flex;
        justify-content: center;
    }
    .facebook-buttons{
        width: 43.8667vw;
        height: 100%;
        background-image: url('../imgs/facebook.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 10vw;
        position: relative;
    }
    .facebook-buttons i{
        position: absolute;
        left: 1vw;
        bottom: .8vw;
        height: 10vw;
        width: 41.6vw;
        border-radius: 5vw;
    }
    /*phone-content end*/

    /*bottom-buttons-content start*/
    .bottom-buttons-content{
        height: 27.73vw;
        width: 100vw;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        background-image: url('../imgs/bottom.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 10;
        align-items: flex-end;
    }
    .bottom-buttons{
        width: 58.53vw;
        height: 16.80vw;
        -webkit-mask: url('../imgs/bottom-btn.webp') 0 0/100%;
        mask: url('../imgs/bottom-btn.webp') 0 0/100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        bottom: 2.4vw;
    }
    .bottom-buttons i{
        position: absolute;
        left: 0vw;
        bottom: 0;
        height: 100%;
        width: 100%;
    }
    .bottom-buttons img{
        width: 58.53vw;
        height: 16.80vw;
    }
    /*bottom-buttons-content end*/

    /*book-user-container start*/
    .book-user-container {
        width: 100%;
        height: 177.3333333vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background-image: url('../imgs/bg3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
    }
    .book-user-title {
        width: 76.6667vw;
        height: 16.2667vw;
        background-image: url('../imgs/title2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 4vw;
    }
    .book-cloud {
        display: none;
    }
    .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: -7.8vw;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .book-tip {
        width: 19.4vw;
        height: 4.9vw;
        background-image: url('../imgs/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: 100vw;
        height: 120vw;
        background-image: url('../imgs/milestone_reward1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        top: 13.3333vw;
    }
    /*book-user-container end*/

    /*award-footer start*/
    .award-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .award-footer-title {
        width: 55.6vw;
        height: 20vw;
        background-image: url('../imgs/title3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.2667vw;
    }
    .award-footer1-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .feature-title {
        width: 60.1333vw;
        height: 16.2667vw;
        background-image: url('../imgs/title4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 4vw;
        margin-bottom: 8.6667vw;
    }

    /* 人物选择 */
    .character-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        position: relative;
    }
    .award-footer1{
        background-image: url('../imgs/bg4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
        height: 141.8667vw;
    }
    .award-footer2{
        background-image: url('../imgs/bg5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -1px;
        height: 157.7333vw;
    }

    .info-panel {
        display: flex;
        position: relative;
        width: 100vw;
        top: 9.4667vw;
    }

    .gender-selector {
        display: flex;
        gap: 1.6vw;
        position: absolute;
        top: 35.2vw;
        left: 10.2667vw;
        z-index: 2;
    }

    .gender-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        height: 4.14vw;
        padding: 0;
        position: relative;
        border-radius: 20vw;
    }

    .gender-btn img {
        width: 14.14vw;
        height: auto;
    }

    .character-info {
        width: 100vw;
    }

    .info-content img {
        height: auto;
        width: 100vw;
    }

    .character-display{
        position: absolute;
        right: 0;
        top: -23.6267vw;
    }

    .character-display img {
        width: 100%;
        height: auto;
    }

    .class-selector {
        display: flex;
        justify-content: center;
        gap: 2vw;
        flex-wrap: wrap;
        position: absolute;
        bottom: 6.5333vw;
    }

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

    .class-btn img {
        width: 12.4vw;
        height: auto;
    }
    /*award-footer end*/
    
    
    
    
    .footer-container {
        position: absolute;
        background-image: url('../imgs/footer-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 22.6667vw;
        bottom: 0;
    }

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

    .success-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .success-bg {
        width: 100vw;
        height: 68.93vw;
        background-image: url('../imgs/success-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 33vw;
    }
    .close {
        width: 6.27vw;
        height: 5.60vw;
        background-image: url('../imgs/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 500;
        top: 34.6vw;
        right: 12.6vw;
    }
    .success-btn {
        width: 100%;
        height: 8.13vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 90vw;
    }
    .success-btn i {
        width: 29.8vw;
        height: 7vw;
        position: absolute;
        top: .2vw;
        left: 0.6vw;
        border-radius: 10vw;
        display: none;
    }
    .success {
        width: 31.07vw;
        height: 100%;
        background-image: url('../imgs/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-left: -17vw;
    }
    .fail-content {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .fail-bg {
        width: 100vw;
        height: 68.93vw;
        background-image: url('../imgs/fail-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 33vw;
    }
    .fail-btn {
        width: 100%;
        height: 10.27vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .fail {
        width: 31.07vw;
        height: 100%;
        background-image: url('../imgs/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-left: -17vw;
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: absolute;
        top: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #cc6532;
        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: 86.534vw;
        height: 48.66666667vw;
        background-size: 100% 100%;
        position: relative;
    }
    
    .feature {
        width: 86.534vw;
        position: relative;
        margin: 0 auto;
    }

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

    .feature .swiper-slide {
        width: 86.534vw;
        height: 48.6667vw;
    }

    .feature .swiper-slide-shadow-left,
    .feature .swiper-slide-shadow-right {
        background: rgba(0, 0, 0, .74);
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        margin-top: -3.87vw;
        width: 10.4vw;
        height: 10.9333vw;
        z-index: 10;
        cursor: pointer;
    }

    .prev {
        background: url('../imgs/pn1.webp') no-repeat;
        background-size: 100%;
        left: -6.13vw;
    }

    .next {
        background: url('../imgs/pn2.webp') no-repeat;
        background-size: 100%;
        right: -5.8vw;
    }

    .fp {
        display: flex;
        justify-content: center;
    }

    .fp .pagination {
        display: flex;
        justify-content: center;
        width: 60vw;
        padding-left: 1.33vw;
        position: relative;
        top: 10vw;
        align-items: center;
    }

    .fp .swiper-pagination-bullet {
        width: 2vw;
        height: 2vw;
        background: url('../imgs/dot1.webp') no-repeat;
        background-size: 100%;
        margin: 0 1.07vw;
        opacity: 1;
        position: relative;
        z-index: 1;
    }

    .fp .swiper-pagination-bullet-active {
        width: 3.7333vw;
        height: 3.6vw;
        background: url('../imgs/dot2.webp') no-repeat;
        background-size: 100%;
    }
    .swiper-lazy{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* 轮播图 end */
    
    /*alert-content start*/
    .alert-content {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        top: 0;
        left: 0;
    }
    .alert-bg {
        width: 97.46666667vw;
        height: 155.2vw;
        background-image: url('../imgs/alert-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .alert-close {
        width: 9.7vw;
        height: 8.6vw;
        background-image: url('../imgs/alert-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 3vw;
        z-index: 1002;
        top: 9.7vw;
    }
    .alert-btn {
        width: 48.8vw;
        height: 14.5vw;
        background-image: url('../imgs/alert-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 1002;
        top: 102.4vw;
        margin-left: 4vw;
    }
    .alert-btn i {
        width: 42.4vw;
        height: 11vw;
        display: block;
        overflow: hidden;
        border-radius: 100px;
        position: absolute;
        left: 2.9vw;
        top: .4vw;
    }
    .alert-input-content {
        width: 100vw;
        height: 6vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1002;
        top: 81.7vw;
        left: 2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .alert-input-bg {
        width: 63vw;
        height: 8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .input-left {
        width: 26.4vw;
        height: 8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 1.2vw;
        justify-content: center;
    }
    .alert-zone-code {
        font-size: 3.5vw;
        color: white;
        width: 11.86666667vw;
        height: 2.8vw;
        background: url('../imgs/TH+66.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .input-right {
        width: 40vw;
        height: 8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1vw;
    }
    .input-right input {
        font-size: 3.5vw;
        width: 35vw;
        height: 6vw;
        padding: 0px;
        margin: 0px;
        border: none;
        outline: none;
        background: none;
        padding: 0;
        margin: 0;
        color: white;
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);
        -webkit-user-select: text;
        user-select: text;
    }
    ::-webkit-input-placeholder {
        /* Chrome/Safari/Opera */
        color: white;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: white;
        opacity: 1;
        /* Firefox 默认降低placeholder透明度 */
    }
    :-ms-input-placeholder {
        /* IE 10+ */
        color: white;
    }
    :-moz-placeholder {
        /* Firefox 18- */
        color: white;
    }
    .alert-protocal-container {
        width: 100vw;
        height: 2.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 92vw;
        left: 9vw;
    }
    .alert-protocal-content {
        width: 78vw;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .alert-circle {
        height: 2.133333333vw;
        width: 2.133333333vw;
        background-image: url('../imgs/kuang.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .alert-right-icon {
        height: 2.4vw;
        width: 2.4vw;
        background-image: url('../imgs/gou.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .alert-protocal-tip {
        height: 2.8vw;
        width: 35.73333333vw;
        background-image: url('../imgs/tips.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1.5vw;
    }
    .time-content {
        height: 5.6vw;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 51.8vw;
        left: 2vw;
        z-index: 1100;
    }
    .time {
        height: 5.6vw;
        width: 4.2vw;
        color: white;
        font-weight: 600;
        position: relative;
        font-size: 6vw;
    }
    .time-1 {
        left: -2.6vw;
    }
    .time-2 {
        left: 0vw;
    }
    .time-3 {
        left: 4.6vw;
    }
    .time-4 {
        left: 7.2vw;
    }
    .time-5 {
        left: 11.8vw;
    }
    .time-6 {
        left: 14vw;
    }
    /*alert-content end*/
}

@media only screen and (min-width: 767px) {
    body {
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }
    .bottom-buttons-content {
        display: none;
    }
    .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: 58.3333vw;
        background-image: url('../imgs/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: 12.2396vw;
        height: 6.25vw;
        background-image: url('../imgs/pc/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-award {
        width: 38.59vw;
        height: 9.84vw;
        background-image: url('../imgs/pc/award.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 37.8vw;
        cursor: pointer;
    }
    .top-award i {
        height: 7.2vw;
        display: block;
        border-radius: 20vw;
        overflow: hidden;
        position: absolute;
        bottom: 0.6vw;
        left: 0.4vw;
        width: 37.5vw;
    }
    .middle-book-content {
        width: 35.4688vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 48.5vw;
    }
    .middle-book {
        width: 17.1354vw;
        height: 4.4792vw;
        z-index: 10;
        position: relative;
        border-radius: 15vw;
    }
    .middle-book i {
        height: 4vw;
        display: block;
        border-radius: 20vw;
        overflow: hidden;
        position: absolute;
        bottom: 0.4vw;
        left: 0.3vw;
        width: 16.4vw;
    }
    .apple-btn {
        background-image: url('../imgs/pc/apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .google-btn {
        background-image: url('../imgs/pc/google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }

    .book-user-title {
        width: 38.0208vw;
        height: 8.0208vw;
        background-image: url('../imgs/pc/title2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 2.24vw;
    }
    .book-milestone-reward{
        width: 81.82vw;
        height: 47.86vw;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        margin: 0 10.89vw 0 7.29vw;
    }
    /*top-award-content end*/

    /*phone-content start*/
    .phone-content {
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        background-image: url('../imgs/pc/bg2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 70.8333vw;
        margin-top: -1px;
        justify-content: center;
        align-content: flex-start;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .phone-title {
        width: 29.5833vw;
        height: 8.0208vw;
        background-image: url('../imgs/pc/title1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0.2604vw auto -1.6667vw;
    }
    .phone-step-container {
        width: 81.0938vw;
        height: 59.1667vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3646vw;
        /* background-image: url('../imgs/pc/step_container.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .phone-step1 {
        width: 70vw;
        height: 18vw;
        position: absolute;
        display: flex;
        flex-shrink: 0;
        left: 8.4vw;
    }
    .phone-input-content {
        position: absolute;
        left: 4.4vw;
        top: 12.5vw;
        z-index: 10;
    }
    .input-content {
        width: 28.44vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .input-bg {
        width: 100%;
        height: 3.75vw;
        background-image: url('../imgs/pc/input-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .input {
        height: 88%;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 15.625vw;
        border: none;
        text-align: center;
        outline: none;
        font-size: 1.5vw;
        color: #913b28;
    }
    .input input::placeholder {
        color: #c39487;
    }
    .protocal-container {
        width: 29.6vw;
        margin-top: 1.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .protocal-content {
        width: 78vw;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .circle {
        height: 1.30vw;
        width: 1.30vw;
        background-image: url('../imgs/pc/kk.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .right-icon {
        height: 1.77vw;
        width: 1.72vw;
        background-image: url('../imgs/pc/right-icon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -0.5208vw;
    }
    .protocal-tip {
        height: 1.46vw;
        width: 21.88vw;
        background-image: url('../imgs/pc/protocal.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: .5vw;
    }
    .book-btn-content {
        width: 15.36vw;
        height: 4.06vw;
        margin-bottom: 1.8229vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -.2vw;
        left: 29.6vw;
    }
    .book-btn {
        width: 100%;
        height: 100%;
        display: flex;
        background-image: url('../imgs/pc/book.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        position: relative;
        border-radius: 20vw;
    }
    .book-btn i{
        width: 14.8vw;
        height: 3.6vw;
        border-radius: 10vw;
        bottom: .4vw;
        position: absolute;
        left: 0.2vw;
    }
    
    .phone-step2 {
        width: 40vw;
        position: absolute;
        left: 13.6vw;
        display: flex;
        flex-shrink: 0;
        top: 28vw;
        height: 4.06vw;
    }
    .app-buttons-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1.1979vw;
        position: absolute;
    }
    .app-buttons-content .apple-btn {
        background-image: url('../imgs/pc/apple1.webp');
    }
    .app-buttons-content .google-btn {
        background-image: url('../imgs/pc/google1.webp');
    }
    .app-buttons{
        height: 100%;
        width: 15.36vw;
        position: relative;
        border-radius: 10vw;
    }
    .app-buttons i{
        width: 14.7vw;
        position: absolute;
        display: block;
        height: 3.6vw;
        border-radius: 5vw;
        left: .3vw;
        bottom: 0.2vw;
    }
    .phone-step3 {
        width: 70vw;
        height: 18vw;
        position: absolute;
        display: flex;
        flex-shrink: 0;
        top: 44.2vw;
    }
    .facebook-buttons-content{
        height: 4.06vw;
        width: 100%;
        position: absolute;
    }
    .facebook-buttons{
        width: 15.36vw;
        height: 100%;
        background-image: url('../imgs/pc/facebook.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        /* margin: 0 auto; */
        cursor: pointer;
        left: 29.4vw;
    }
    .facebook-buttons i{
        position: absolute;
        bottom: .2vw;
        left: .3vw;
        width: 14.8vw;
        height: 3.6vw;
        display: block;
        border-radius: 10vw;
    }
    .facebook-buttons img{
        display: none;
    }
    .phone-right-img {
        width: 24.69vw;
        height: 46.82vw;
        right: 0.31vw;
        bottom: 4.4vw;
        position: absolute;
        z-index: 10;
        background-image: url('../imgs/pc/right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /*phone-content end*/
















    
    /*book-user-container start*/
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        height: 64.8438vw;
        background-image: url('../imgs/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;
        margin: -0.3vw auto 0;
        text-align: center;
    }
    .book-tip {
        width: 10.1042vw;
        height: 2.5521vw;
        background-image: url('../imgs/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 {
        position: absolute;
        width: 29.38vw;
        height: 52.50vw;
        left: 0;
        bottom: -4.2vw;
        z-index: 10;
        background-image: url('../imgs/pc/mum.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /*book-user-container end*/

    /*award-footer start*/
    .award-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

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

    
    .award-footer1 {
        height: 54.1146vw;
        text-align: center;
        width: 100vw;
        margin: 0 auto 0;
        background-image: url(../imgs/pc/bg4.webp);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .award-footer2 {
        height: 78.5417vw;
        text-align: center;
        width: 100vw;
        margin: 0 auto 0;
        background-image: url(../imgs/pc/bg5.webp);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .award-footer-title {
        width: 27.5521vw;
        height: 9.8438vw;
        background-image: url('../imgs/pc/title3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin: -1.1979vw auto 0;
    }
    .award-footer1-content {
        width: 73.9583vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .info-panel {
        width: 100%;
        text-align: left;
        position: relative;
        top: 5.2vw;
        left: 1.25vw;
        display: flex;
    }

    .gender-selector {
        display: flex;
        gap: 1.6146vw;
        position: absolute;
        z-index: 10;
        top: 16.6146vw;
        left: 7.6042vw;
    }

    .gender-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        border-radius: 10vw;
    }

    .gender-btn img {
        display: block;
        height: 1.6146vw;
    }

    .character-info {
        width: 73.9583vw;
    }

    .info-content img {
        height: auto;
        width: 100%;
    }

    .character-display{
        width: 52.24vw;
        text-align: center;
        position: absolute;
        right: -17.03vw;
        top: -11.2vw;
    }

    .character-display img {
        width: 100%;
        height: auto;
    }

    .class-selector {
        position: absolute;
        right: 4vw;
        top: 12vw;
        width: 10.99vw;
        height: 35.21vw;
        background: url('../imgs/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: 4.84vw;
        border-radius: 10vw;
    }

    .class-btn img {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    
    .class-btn.sword-btn {
        top: 1.35vw; /* 26px / 1920px * 100 */
        left: 3.91vw; /* 75px / 1920px * 100 */
    }
    
    .class-btn.knife-btn {
        top: 7.97vw; /* 153px / 1920px * 100 */
        left: 6.77vw; /* 130px / 1920px * 100 */
    }
    
    .class-btn.doctor-btn {
        top: 14.53vw; /* 279px / 1920px * 100 */
        left: 8.49vw; /* 163px / 1920px * 100 */
    }

    .class-btn.gun-btn {
        top: 21.15vw; /* 406px / 1920px * 100 */
        left: 6.77vw; /* 130px / 1920px * 100 */
    }
    
    .class-btn.arrow-btn {
        top: 27.71vw; /* 532px / 1920px * 100 */
        left: 3.91vw; /* 75px / 1920px * 100 */
    }

    
    .award-footer-pc2 {
        display: flex;
        height: 85.4688vw;
        background-image: url('../imgs/pc/bg4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .feature-title {
        width: 29.2708vw;
        height: 9.4792vw;
        background-image: url('../imgs/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 {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .success-bg {
        width: 46.04vw;
        height: 32.19vw;
        background-image: url('../imgs/pc/success-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .succes-close {
        width: 3.2vw;
        height: 2.8vw;
        background-image: url('../imgs/pc/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 16vw);
        right: 29vw;
        cursor: pointer;
    }
    .success-btn {
        /* width: 100%; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        left: -4.4vw;
        top: -6.4vw;
        gap: 0.8333vw;
        cursor: pointer;
    }
    .success-btn i {
        width: 11.3vw;
        height: 2.7vw;
        position: relative;
        top: 0vw;
        left: 0.2vw;
        border-radius: 15vw;
        display: block;
    }
    .success,.success-google{
        width: 11.72vw;
        height: 3.07vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .success {
        background-image: url('../imgs/success-apple.webp');
    }
    .success-google {
        background-image: url('../imgs/pc/success-google.webp');
    }
    .fail-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .fail-bg {
        width: 46.04vw;
        height: 32.19vw;
        background-image: url('../imgs/pc/fail-bg.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.2vw;
        height: 2.8vw;
        background-image: url('../imgs/pc/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: calc(50vh - 15.5vw);
        right: 32.2vw;
        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 {
        width: 11.72vw;
        height: 3.08vw;
        background-image: url('../imgs/pc/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .fail-google {
        width: 11.72vw;
        height: 3.08vw;
        background-image: url('../imgs/pc/success-google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: absolute;
        top: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #cc6532;
        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: 61.042vw;
        height: 48.386vw;
        background-size: 100% 100%;
        position: relative;
    }
    
    .feature {
        width: 60vw;
        position: relative;
        margin: 0 auto;
        top: 1.6vw;
        left: .3vw;
        z-index: 1;
    }

    .feature .swiper-container {
        width: 100%;
        overflow: hidden;
    }

    .feature .swiper-slide {
        width: 100%;
        height: 33.75;
    }
    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        margin-top: -3vw;
        width: 5.9375vw;
        height: 5.99vw;
        z-index: 10;
        cursor: pointer;
    }

    .prev {
        background: url('../imgs/pc/pn1.webp') no-repeat;
        background-size: 100%;
        left: -7vw;
    }

    .next {
        background: url('../imgs/pc/pn2.webp') no-repeat;
        background-size: 100%;
        right: -7vw;
    }

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

    .fp .pagination {
        display: flex;
        justify-content: center;
        width: 50vw;
        padding-left: 1vw;
        position: relative;
        top: 5vw;
        align-items: center;
    }

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

    .fp .swiper-pagination-bullet-active {
        width: 1.25vw;
        height: 1.198vw;
        background: url('../imgs/pc/dot2.webp') no-repeat;
        background-size: 100%;
    }

    .feature-right-img {
        position: absolute;
        width: 23.28vw;
        height: 47.60vw;
        right: -19vw;
        bottom: -7.6vw;
        z-index: 1;
        background-image: url('../imgs/pc/yaya1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    
    .footer-container {
        position: absolute;
        background-image: url('../imgs/pc/footer-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 14.01vw;
        bottom: 0;
    }
    
    /*alert-content start*/
    
    .alert-content {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
    }
    .alert-bg {
        width: 29.890625vw;
        height: 47.59895833vw;
        background-image: url('../imgs/pc/alert-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .alert-close {
        width: 3.1vw;
        height: 2.7vw;
        background-image: url('../imgs/alert-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 2.1px;
        z-index: 1002;
        top: 3.7vw;
        cursor: pointer;
    }
    .alert-btn {
        width: 15.046875vw;
        height: 4.458333333vw;
        background-image: url('../imgs/pc/alert-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 1002;
        top: 31vw;
        cursor: pointer;
    }
    .alert-btn i {
        width: 13.1vw;
        height: 3.2vw;
        display: block;
        overflow: hidden;
        border-radius: 100px;
        position: absolute;
        left: .9vw;
        top: .2vw;
    }
    .alert-input-content {
        width: 100vw;
        height: 2.5vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 24.6vw;
    }
    .alert-input-bg {
        width: 20vw;
        height: 2vw;
        /* background-image: url('../imgs/pc/input-bg2.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .input-left {
        width: 8.4vw;
        height: 2.5vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .alert-zone-code {
        font-size: 1vw;
        color: white;
        width: 3.640625vw;
        height: 0.859375vw;
        background: url('../imgs/TH+66.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .input-right {
        width: 13vw;
        height: 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .input-right input {
        text-align: center;
        font-size: 1vw;
        width: 13vw;
        height: 2.5vw;
        padding: 0px;
        margin: 0px;
        border: none;
        /* 移除轮廓线（focus时的外边框） */
        outline: none;
        /* 移除背景色 */
        background: none;
        /* 移除内边距 */
        padding: 0;
        /* 移除外边距 */
        margin: 0;
        color: white;
    }
    ::-webkit-input-placeholder {
        /* Chrome/Safari/Opera */
        color: white;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: white;
        opacity: 1;
        /* Firefox 默认降低placeholder透明度 */
    }
    :-ms-input-placeholder {
        /* IE 10+ */
        color: white;
    }
    :-moz-placeholder {
        /* Firefox 18- */
        color: white;
    }
    .alert-protocal-container {
        width: 100vw;
        height: 0.859375vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 27.6vw;
    }
    .alert-protocal-content {
        width: 12vw;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: -6.8vw;
    }
    .alert-circle {
        height: 0.65625vw;
        width: 0.65625vw;
        background-image: url('../imgs/kuang.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .alert-right-icon {
        height: 0.739583333vw;
        width: 0.734375vw;
        background-image: url('../imgs/gou.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
    }
    .alert-protocal-tip {
        height: 0.859375vw;
        width: 10.95833333vw;
        background-image: url('../imgs/tips.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 0.5vw;
    }
    .time-content {
        height: 1.5vw;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        z-index: 1100;
        top: 15.6vw;
        font-size: 1.8vw;
    }
    .time {
        height: 1.5vw;
        width: 4.2vw;
        color: white;
        font-weight: 600;
        position: relative;
    }
    .time-1 {
        left: 8vw;
    }
    .time-2 {
        left: 5.85vw;
    }
    .time-3 {
        left: 4.3vw;
    }
    .time-4 {
        left: 2.2vw;
    }
    .time-5 {
        left: 0.8vw;
    }
    .time-6 {
        left: -1.4vw;
    }
    /*alert-content end*/
}