@media only screen and (max-width: 767px) {
    body {
        padding: 0px;
        margin: 0px;
    }
    .container {
        width: 100vw;
    }
    .header {
        width: 100%;
        height: 12.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        z-index: 1000;
        background-image: url('../img/mb/header-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header-content {
        width: 94vw;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .header .left {
        width: 25.4vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .left .logo {
        width: 100%;
        height: 7.7vw;
        background-image: url('../img/mb/logo.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header .right {
        width: 60vw;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .fb-login {
        width: 16vw;
        height: 5.8vw;
        background-image: url('../img/mb/fb-login.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 2vw;
    }
    .logout {
        height: 5.8vw;
        color: #247292;
        font-size: 4.5vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 2vw;
        font-weight: 600;
    }
    .logout-border {
        padding: 0px 1vw;
    }
    .menu {
        width: 8.4vw;
        height: 8.4vw;
        background-image: url('../img/mb/menu.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** menu content **/
    .menu-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        display: none;
    }
    .menu-content {
        width: 42.2vw;
        height: 127vw;
        background-image: url('../img/mb/menu-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 14.2vw;
        left: 55.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menu-active {
        background-image: url('../img/mb/menu-btn.webp');
    }
    .menu-item {
        width: 36.4vw;
        height: 8.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 3.8vw;
        display: none;
    }
    .home-item {
        width: 36.4vw;
        height: 8.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 3.8vw;
        display: none;
    }
    .menu-close-cotnent {
        width: 36.4vw;
        height: 12.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
    }
    .menu-close {
        width: 12.5vw;
        height: 12.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/mb/menu-close.webp');
        margin-top: 32vw;
        position: absolute;
        z-index: 10001;
    }
    .menu-1 {
        margin-top: 9.7vw;
    }
    .menu-title {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 4.8vw;
    }
    .menu-draw {
        width: 20.4vw;
        background-image: url('../img/mb/menu-title-1.webp');
    }
    .menu-team {
        width: 25.6vw;
        background-image: url('../img/mb/team.webp');
    }
    .menu-invite {
        width: 25.6vw;
        background-image: url('../img/mb/invite.webp');
    }
    .menu-daily-log {
        width: 25.6vw;
        background-image: url('../img/mb/daily-log.webp');
    }
    .menu-jod-vote {
        width: 25.6vw;
        background-image: url('../img/mb/jod-vote.webp');
    }
    .menu-jod {
        width: 20.2vw;
        background-image: url('../img/mb/job.webp');
    }
    .menu-game-desc {
        width: 20.2vw;
        background-image: url('../img/mb/game-desc.webp');
    }
    .menu-process {
        width: 25.6vw;
        background-image: url('../img/mb/process.png');
    }
    .menu-award-query {
        width: 20.2vw;
        background-image: url('../img/mb/award-query.webp');
    }
    .bg1 {
        width: 100vw;
        height: 203.2vw;
        background-image: url('../img/mb/bg1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .bg1-title {
        width: 100%;
        height: 32.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 55vw;
    }
    .title-1 {
        width: 85.6vw;
        height: 22.5vw;
        background-image: url('../img/mb/bg1-title.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .phone-content {
        width: 100%;
        position: absolute;
        top: 97.4vw;
        z-index: 100;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .phone-title {
        width: 73.3vw;
        height: 13.9vw;
        background-image: url('../img/phone-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .input-content {
        width: 100vw;
        height: 10.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99;
        position: relative;
    }
    .input-bg {
        width: 77.7vw;
        height: 100%;
        background-image: url('../img/mb/input-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .zone-code-content {
        width: 34.4vw;
        height: 95%;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-image: url('../img/mb/zone-code-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1px;
    }
    .zone-code {
        width: 24vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 4vw;
        font-weight: 600;
        color: white;
        margin-left: 2vw;
    }
    .zone-code-item {
        display: flex;
        font-size: 4vw;
        font-weight: 600;
        color: white;
        padding: 2vw 0px;
    }
    .select-zone-content {
        width: 34.4vw;
        height: 29.3vw;
        z-index: 99;
        position: absolute;
        top: 0.5vw;
        background-image: url('../img/mb/select-zone-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .to-down {
        width: 3.9vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .down {
        width: 3.9vw;
        height: 2.2vw;
        background-image: url('../img/mb/to-down.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1vw;
    }
    .input {
        height: 92%;
        width: 43.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 41.5vw;
        border: none;
        border-radius: 2vw;
        text-align: center;
        outline: none;
    }
    .protocal-container {
        width: 100vw;
        height: 3vw;
        margin-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .protocal-content {
        width: 78vw;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .circle {
        height: 3vw;
        width: 3.5vw;
        background-image: url('../img/kk.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .right-icon {
        height: 3vw;
        width: 3vw;
        background-image: url('../img/right-icon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .protocal-tip {
        height: 3vw;
        width: 47.9vw;
        background-image: url('../img/protocal.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1.5vw;
    }
    .book-btn-content {
        position: relative;
        width: 100%;
        height: 20.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1vw;
        z-index: 2;
    }
    .book-btn {
        width: 64.8vw;
        height: 100%;
        display: flex;
        background-image: url('../img/mb/book.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .top-award-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 188vw;
    }
    .middle-book-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .middle-book {
        width: 42.4vw;
        height: 12.6vw;
        /* background-image: url('../img/apple.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 10;
        top: -3vw;
        position: relative;
    }
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 196.8vw;
    }
    .book-user-content {
        width: 49vw;
        height: 5vw;
        background-image: url('../img/user-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .book-tip {
        width: 28vw;
        height: 2.5vw;
        background-image: url('../img/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** b2 **/
    .bg2 {
        width: 100%;
        height: 200.5vw;
        background-image: url('../img/mb/bg2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg2-title-content {
        width: 100%;
        height: 17.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2.2vw;
    }
    .bg2-title {
        width: 62.4vw;
        height: 27.8vw;
        background-image: url('../img/mb/bg2-title.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .activity-time-content {
        width: 100%;
        height: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 23.4vw;
    }
    .activity-time {
        width: 73.4vw;
        height: 3.2vw;
        background-image: url('../img/mb/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg2 .award-content {
        width: 100%;
        height: 47.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 27.7vw;
    }
    .bg2 .award {
        width: 82.8vw;
        height: 47.8vw;
        background-image: url('../img/mb/bg2-award.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-input-content {
        width: 100%;
        height: 7.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 84.1vw;
    }
    .team-input {
        width: 65.6vw;
        height: 7.3vw;
        background-image: url('../img/mb/bg2-input.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .team-input input {
        width: 37vw;
        height: 5vw;
        border: none;
        margin-left: 2px;
        text-align: center;
        margin-top: 1px;
        outline: none;
    }
    .join-team {
        height: 7vw;
        width: 24vw;
        margin-left: 2vw;
    }
    .question {
        width: 6.4vw;
        height: 6.4vw;
        position: absolute;
        background-image: url('../img/mb/question.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        right: 10vw;
        top: -5vw;
    }
    .has-team .question {
        right: 5vw;
        top: -3vw;
    }
    .team-btn {
        width: 100%;
        height: 8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 98.6vw;
    }
    .team-create {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/create-team.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 17.4vw;
    }
    .team-search {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/search-team.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 9vw;
    }
    .has-team {
        width: 100%;
        height: 7.3vw;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 78vw;
        display: flex;
        align-items: center;
    }
    .invite-code-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 27vw;
        height: 7.3vw;
        margin-left: 7vw;
    }
    .code-bg {
        width: 11.7vw;
        height: 7.3vw;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-image: url('../img/mb/team-code.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%; */
    }
    .code-data {
        height: 3.3vw;
        font-size: 3vw;
        color: red;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .team-copy {
        width: 26.2vw;
        height: 7.3vw;
        background-image: url('../img/mb/team-copy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1.7vw;
    }
    .search-team-2 {
        width: 26.2vw;
        height: 7.3vw;
        background-image: url('../img/mb/searcg-friend.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1vw;
    }
    .team-list {
        width: 77.2vw;
        height: 17.4vw;
        display: flex;
        flex: row;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 86vw;
        margin-left: 11.3vw;
    }
    .team-user {
        width: 10.9;
        height: 16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-right: 5.7vw;
    }
    .team-avatar {
        width: 10.9vw;
        height: 10.9vw;
        background-image: url('../img/mb/avatar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-name {
        width: 10.9vw;
        height: 4.4vw;
        color: #6F6F6F;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        outline: none;
    }
    .bg2 .award-content2 {
        width: 100%;
        height: 45.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 113.8vw;
    }
    .bg2 .award2 {
        width: 82.9vw;
        height: 45.3vw;
        background-image: url('../img/mb/bg2-award2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-receive-award {
        width: 100%;
        height: 45.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 135.8vw;
    }
    .team-award-btn {
        width: 26.6vw;
        height: 8vw;
        background-image: url('../img/mb/team-award-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 {
        width: 100%;
        height: 173.7vw;
        background-image: url('../img/mb/bg3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg3-title-content {
        width: 100%;
        height: 9.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 3.4vw;
    }
    .bg3-title {
        width: 62.4vw;
        height: 9.2vw;
        background-image: url('../img/mb/bg3-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3-activity-time-content {
        width: 100%;
        height: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15.5vw;
    }
    .bg3-activity-time {
        width: 73.4vw;
        height: 3.6vw;
        background-image: url('../img/mb/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .copy-btn {
        width: 100%;
        height: 7.3vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 32.9vw;
    }
    .invite-code {
        width: 11.7vw;
        height: 3.2vw;
        background-image: url('../img/mb/invite_code.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .invite-num {
        height: 100%;
        font-size: 3.7vw;
        margin-right: 2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: red;
        font-weight: 600;
    }
    .copy {
        width: 26.2vw;
        height: 100%;
        background-image: url('../img/mb/copy-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .write-invite-code {
        position: absolute;
        top: 43.2vw;
        width: 100%;
        height: 7.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .wirte-code {
        width: 54.4vw;
        height: 100%;
        background-image: url('../img/mb/bind-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
    }
    .f-code {
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 27vw;
    }
    .wirte-code-btn {
        width: 27vw;
        height: 100%;
    }
    .f-code-info {
        height: 85%;
        width: 23vw;
        border: none;
        margin-left: 1vw;
        font-size: 4.3vw;
        color: red;
        font-weight: 600;
        text-align: center;
        outline: none;
    }
    .my-invite-num {
        width: 9.7vw;
        height: 9.4vw;
        background-image: url('../img/mb/0.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 52.8vw;
        left: 50.5vw;
    }
    .cat {
        width: 30.2vw;
        height: 34.6vw;
        background-image: url('../img/mb/bg3-cat.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 137vw;
        right: 0px;
    }
    .invite-user {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 64.9vw;
    }
    .invite-top,
    .invite-bottom {
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6.5vw;
    }
    .invite-top-left {
        width: 42.6vw;
        height: 32.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .top-left-img {
        width: 42.6vw;
        height: 24.1vw;
        background-image: url('../img/mb/lv1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-left-btn {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-top-right {
        width: 42.6vw;
        height: 32.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .top-right-img {
        width: 42.6vw;
        height: 24.1vw;
        background-image: url('../img/mb/lv3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-right-btn {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-bottom-left {
        width: 42.6vw;
        height: 32.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bottom-left-img {
        width: 42.6vw;
        height: 24.1vw;
        background-image: url('../img/mb/lv5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bottom-left-btn {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-bottom-right {
        width: 42.6vw;
        height: 32.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bottom-right-img {
        width: 42.6vw;
        height: 24.1vw;
        background-image: url('../img/mb/lv10.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bottom-right-btn {
        width: 27.8vw;
        height: 8vw;
        background-image: url('../img/mb/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .bg4 {
        width: 100%;
        height: 271.3vw;
        background-image: url('../img/mb/bg4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg4-title-content {
        width: 100%;
        height: 9.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1vw;
    }
    .bg4-title {
        width: 62.4vw;
        height: 9.2vw;
        background-image: url('../img/mb/bg4-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg4-activity-time-content {
        width: 100%;
        height: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12vw;
    }
    .bg4-activity-time {
        width: 73.4vw;
        height: 3.6vw;
        background-image: url('../img/mb/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .clock-num {
        width: 9.6vw;
        height: 9.4vw;
        background-image: url('../img/mb/0.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 28.2vw;
        left: 53.4vw;
    }
    .daily-content {
        width: 100%;
        position: absolute;
        top: 41vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .daily-top {
        display: flex;
        flex-direction: row;
    }
    .daily-item {
        width: 18.9vw;
        height: 5.6vw;
        background-image: url('../img/mb/not-receive.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: -2.7vw;
        left: 11vw;
    }
    .day1 {
        width: 37vw;
        height: 23.2vw;
        background-image: url('../img/mb/day1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 4vw;
        margin-left: 10vw;
        position: relative;
    }
    .day3 {
        width: 37vw;
        height: 23.2vw;
        background-image: url('../img/mb/day3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .daily-bottom {
        display: flex;
        flex-direction: row;
        margin-top: 4.5vw;
        align-items: center;
    }
    .day5 {
        width: 37vw;
        height: 23.2vw;
        background-image: url('../img/mb/day5.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 17vw;
        margin-right: 4vw;
        position: relative;
    }
    .day7 {
        width: 37vw;
        height: 23.2vw;
        background-image: url('../img/mb/day7.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .girl {
        width: 32.4vw;
        height: 66.4vw;
        background-image: url('../img/mb/bg4-girl.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 15.5vw;
        left: 0px;
        top: 25vw;
    }
    .daily-btn {
        width: 41vw;
        height: 11vw;
        background-image: url('../img/mb/clock.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 62vw;
        left: 41vw;
    }
    .vote-title-content {
        width: 100%;
        height: 9.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 135.3vw;
    }
    .vote-title {
        width: 79.7vw;
        height: 9.2vw;
        background-image: url('../img/mb/vote-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .vote-activity-time-content {
        width: 100%;
        height: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 146.5vw;
    }
    .vote-activity-time {
        width: 73.7vw;
        height: 3.6vw;
        background-image: url('../img/mb/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .vote-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 158.5vw;
    }
    .vote-top {
        width: 63vw;
        height: 46.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-left: 7vw;
    }
    .vote-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .vote-1 {
        width: 31.3vw;
        height: 47.6vw;
        background-image: url('../img/mb/bg4-1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .vote-num {
        width: 26.5vw;
        height: 4.1vw;
        background-image: url('../img/mb/vote-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 10vw;
        color: white;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .vote-btn {
        width: 18.4vw;
        height: 5.3vw;
        background-image: url('../img/mb/vote.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 5vw;
    }
    .vote-2 {
        width: 34.6vw;
        height: 46.8vw;
        background-image: url('../img/mb/bg4-2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .vote-1-item {
        margin-left: -0.5vw;
    }
    .vote-2-item {
        margin-left: -4.8vw;
    }
    .vote-num-2 {
        margin-left: -4.8vw;
    }
    .vote-3-item {
        margin-left: 1vw;
    }
    .vote-4-item {
        margin-left: 1vw;
    }
    .vote-5-item {
        margin-left: 1vw;
    }
    .vote-bottom {
        height: 46.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin-top: 1.8vw;
    }
    .vote-3 {
        width: 32.6vw;
        height: 46.8vw;
        background-image: url('../img/mb/bg4-3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 2.5vw;
    }
    .vote-4 {
        width: 40.2vw;
        height: 47.4vw;
        background-image: url('../img/mb/bg4-4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-top: 15vw;
    }
    .vote-5 {
        width: 32.6vw;
        height: 47.2vw;
        background-image: url('../img/mb/bg4-5.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 2.5vw;
    }
    .bg5 {
        width: 100%;
        height: 161.6vw;
        background-image: url('../img/mb/bg5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg5-title-content {
        width: 100%;
        height: 8.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 26.9vw;
    }
    .bg5-title {
        width: 57.3vw;
        height: 8.9vw;
        background-image: url('../img/mb/bg5-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg5-swiper-content {
        width: 100vw;
        height: 108.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 32.8vw;
    }
    .bg5-swiper {
        width: 100%;
        height: 108.6vw;
        position: absolute;
        display: flex;
        flex-direction: column;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg5 .slide-div {
        position: relative;
        /* 使子元素可以基于 .slide-div 定位 */
        width: 100vw;
        height: 108.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .bg5 .slide-div::before {
        content: '';
        /* 创建伪元素 */
        position: absolute;
        /* 绝对定位 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-image: url('../img/border.png'); */
        /* 添加背景图片 */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 2;
        /* 保证伪元素在 img 上方 */
        pointer-events: none;
        /* 防止伪元素影响点击事件 */
    }
    .bg5 .slide-div img {
        width: 100vw;
        height: 108.6vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg5 .swiper-button-next {
        width: 11vw;
        height: 11vw;
        background-image: url('../img/mb/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 51.5vw;
        right: 4.5vw;
    }
    .bg5 .swiper-button-prev {
        width: 11vw;
        height: 11vw;
        background-image: url('../img/mb/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 51.5vw;
        left: 2.8vw;
    }
    .bg5 .pc-point {
        display: none;
    }
    .bg5 .point {
        width: 87.4vw;
        height: 16.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        position: absolute;
        top: 132.9vw;
        margin-left: 6.6vw;
    }
    .point-item {
        height: 16.6vw;
        width: 15.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .p1 {
        background-image: url('../img/mb/l1.webp');
    }
    .p2 {
        background-image: url('../img/mb/d2.webp');
    }
    .p3 {
        background-image: url('../img/mb/d3.webp');
    }
    .p4 {
        background-image: url('../img/mb/d4.webp');
    }
    .p5 {
        background-image: url('../img/mb/d5.webp');
    }
    .bg6 {
        width: 100%;
        height: 291.4vw;
        background-image: url('../img/mb/bg6.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg6-title-content {
        width: 100%;
        height: 9.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8.6vw;
    }
    .bg6-title {
        width: 57.3vw;
        height: 9.2vw;
        background-image: url('../img/mb/bg6-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .video {
        width: 79.8vw;
        height: 38.9vw;
        background-image: url('../img/mb/video.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        left: 9.2vw;
        position: absolute;
        top: 25.7vw;
    }
    .play {
        width: 11.6vw;
        height: 11.6vw;
        background-image: url('../img/mb/play.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .boy {
        width: 34.4vw;
        height: 55.3vw;
        background-image: url('../img/mb/boy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        position: absolute;
        left: 0px;
        top: 57vw;
    }
    .fb-button {
        width: 100%;
        height: 12.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 75.3vw;
    }
    .fb {
        width: 42.1vw;
        height: 12.5vw;
        background-image: url('../img/mb/facebook.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .process-title-content {
        width: 100%;
        height: 11.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 119vw;
    }
    .process-title {
        width: 91.8vw;
        height: 11.6vw;
        background-image: url('../img/mb/process-title.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 134.2vw;
    }
    .book-user-content {
        width: 49.3vw;
        height: 5.2vw;
        background-image: url('../img/mb/user-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .book-tip {
        width: 28vw;
        height: 2.5vw;
        background-image: url('../img/mb/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .book-num {
        height: 3.5vw;
        font-size: 2.5vw;
        font-weight: 600;
        color: #ffa30b;
        text-align: center;
    }
    .process-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 142.5vw;
    }
    .process-top {
        width: 95%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .process-bottom {
        width: 78%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin-top: 8vw;
    }
    .process-item {
        width: 29vw;
        height: 51.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .process-5 {
        background-image: url('../img/mb/5w.png');
    }
    .process-10 {
        background-image: url('../img/mb/10w.png');
    }
    .process-20 {
        background-image: url('../img/mb/20w.png');
    }
    .process-50 {
        background-image: url('../img/mb/50w.png');
    }
    .process-100 {
        background-image: url('../img/mb/100w.png');
    }
    .footer {
        width: 100%;
        height: 27.8vw;
        background-image: url('../img/footer-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0px;
    }
    .footer-btn-content {
        width: 100%;
        height: 9.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        margin-top: 2.9vw;
    }
    .footer-btn {
        width: 31.4vw;
        height: 9.3vw;
        display: flex;
        /* background-image: url('../img/apple-footer.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .success-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 900;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .success-bg {
        width: 100vw;
        height: 97vw;
        background-image: url('../img/success-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 33vw;
    }
    .close {
        width: 9.8vw;
        height: 8.7vw;
        background-image: url('../img/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: 26.3vw;
        right: 5vw;
    }
    .success-btn {
        width: 100%;
        height: 17.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .success {
        width: 61.7vw;
        height: 17.5vw;
        background-image: url('../img/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .fail-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 2000;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .fail-bg {
        width: 100vw;
        height: 97vw;
        background-image: url('../img/fail-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 33vw;
    }
    .close {
        width: 9.8vw;
        height: 8.7vw;
        background-image: url('../img/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: 26.3vw;
        right: 5vw;
    }
    .fail-btn {
        width: 100%;
        height: 17.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .fail {
        width: 61.7vw;
        height: 17.5vw;
        background-image: url('../img/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: relative;
        top: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #cc6532;
        font-size: 1vw;
    }
    .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;
        margin-right: 11vw;
    }
    .google-btn {
        display: none;
    }
    .footer-google-btn {
        display: none;
    }
    .fix-award {
        display: none;
    }
    .bg3-desc-content {
        display: none;
    }
    .pc-vote-content {
        display: none;
    }
    .pc-bg3-swiper-content {
        display: none;
    }
    .pc-process-container {
        display: none;
    }
    .create-team-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .create-team-bg {
        width: 98vw;
        height: 78vw;
        background-image: url('../img/mb/alert/create-team-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .create-btn {
        width: 42.2vw;
        height: 11.6vw;
        background-image: url('../img/mb/alert/create-team-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 45.8vw;
    }
    .team-close {
        width: 9.8vw;
        height: 8.8vw;
        background-image: url('../img/mb/alert/team-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -5vw;
        right: 3.8vw;
    }
    .create-team-bg input {
        width: 57vw;
        border: none;
        position: absolute;
        top: 30vw;
        padding: 3vw 0px;
    }
    .pc-bg6-swiper-content {
        display: none;
    }
    .pc-point {
        display: none;
    }
    .alert-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .alert-bg {
        width: 98vw;
        height: 56.6vw;
        background-image: url('../img/mb/alert/name-repeat.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .alert-close {
        width: 9.8vw;
        height: 8.8vw;
        background-image: url('../img/mb/alert/team-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -5vw;
        right: 1vw;
    }
    .login-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .login-bg {
        width: 98vw;
        height: 78vw;
        background-image: url('../img/mb/alert/login-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .login-fb-btn {
        width: 54.1vw;
        height: 13.8vw;
        background-image: url('../img/mb/alert/fb.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 38.2vw;
    }
    .login-close {
        width: 9.8vw;
        height: 8.8vw;
        background-image: url('../img/mb/alert/login-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -5vw;
        right: 3.8vw;
    }
    .toast-content {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 80vw;
    }
    .toast {
        display: block;
        background: #292929;
        color: white;
        padding: 2vw 4vw;
        text-align: center;
        border-radius: 2vw;
    }
    .query-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .query-content {
        width: 96.5vw;
        height: 142.2vw;
        background-image: url('../img/mb/alert/query-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .query-close {
        width: 9.8vw;
        height: 8.8vw;
        background-image: url('../img/mb/alert/query-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 6.6vw;
        right: 2.4vw;
    }
    .query-list {
        width: 65.4vw;
        height: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26.8vw;
        overflow-y: auto;
    }
    .query-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .query-team .qury-title {
        width: 59.2vw;
        height: 5.2vw;
        background-image: url('../img/mb/alert/team-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .query-invite .qury-title {
        width: 59.2vw;
        height: 5.2vw;
        background-image: url('../img/mb/alert/invite-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 8.4vw;
    }
    .query-daily .qury-title {
        width: 59.2vw;
        height: 5.2vw;
        background-image: url('../img/mb/alert/daily-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 8.4vw;
    }
    .query-vote .qury-title {
        width: 59.2vw;
        height: 5.2vw;
        background-image: url('../img/mb/alert/vote-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 8.4vw;
    }
    .query-code-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 3vw;
    }
    .query-code {
        width: 39.3vw;
        height: 7.3vw;
        background-image: url('../img/mb/alert/awrd-code-border.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-size: 4vw;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .query-btn {
        width: 26.2vw;
        height: 7.3vw;
        background-image: url('../img/mb/alert/award-cipy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #prebook {
        position: absolute;
        top: 0vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #team {
        position: absolute;
        top: 190vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #invite {
        position: absolute;
        top: 390vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #daily {
        position: absolute;
        top: 550vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #vote {
        position: absolute;
        top: 690vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #job {
        position: absolute;
        top: 850vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #game {
        position: absolute;
        top: 960vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #process {
        position: absolute;
        top: 1100vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    .game-title-content {
        width: 100%;
        height: 8.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6.5vw;
    }
    .game-title {
        width: 57.3vw;
        height: 8.9vw;
        background-image: url('../img/mb/bg6-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .google-apple-content {
        display: none;
    }
    .tip-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 1999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .tip-bg {
        width: 96.5vw;
        height: 145.8vw;
        background-image: url('../img/mb/alert/tip.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .tip-close {
        width: 9.8vw;
        height: 8.8vw;
        background-image: url('../img/mb/alert/tip-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -5vw;
        right: 1vw;
    }
    .pc-login {
        display: none;
    }
    .pc-logout {
        display: none;
    }
    .user-namme {
        width: 25vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .marquee-container {
        width: 80vw;
        height: 18.2vw;
        overflow: hidden;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        top: 167vw;
        left: 10.4vw;
    }
    .marquee-list {
        display: flex;
        flex-direction: column;
        animation: scroll 60s linear infinite;
    }
    .marquee-item {
        height: 6vw;
        line-height: 1vw;
        font-size: 3vw;
        color: #906f54;
    }
}

@media only screen and (min-width: 767px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        overflow-x: hidden;
    }
    .container {
        width: 100%;
    }
    .header {
        display: none;
    }
    .fix-award {
        width: 10.9vw;
        height: 11.2vw;
        background-image: url('../img/pc/fix-award.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 1000;
        top: 2vw;
        right: 1.3vw;
        animation: swing 2s ease-in-out infinite;
    }
    /** menu content **/
    .menu-container {
        width: 10.1vw;
        height: 33.9vw;
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 11.2vw;
        right: 1.3vw;
        z-index: 999;
        position: fixed;
    }
    .menu-content {
        width: 10.1vw;
        height: 100%;
        background-image: url('../img/pc/menu-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menu-active {
        background-image: url('../img/mb/menu-btn.webp');
    }
    .menu-item {
        width: 8.8vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 1vw;
    }
    .home-item {
        width: 8.8vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 1vw;
        margin-top: 1vw;
    }
    .facebook-login {
        width: 8.8vw;
        height: 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .facebook-btn {
        width: 8.1vw;
        height: 2.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/login.webp');
    }
    .menu-close-cotnent {
        width: 8.8vw;
        height: 3.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 33.5vw;
    }
    .menu-close {
        width: 3.5vw;
        height: 3.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../img/pc/menu-close.webp');
        position: absolute;
        z-index: 10001;
    }
    .menu-1 {
        margin-top: 2.1vw;
    }
    .menu-title {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 4.8vw;
    }
    .menu-draw {
        width: 5vw;
        height: 1.1vw;
        background-image: url('../img/mb/menu-title-1.webp');
    }
    .menu-team {
        width: 6.1vw;
        height: 1.1vw;
        background-image: url('../img/mb/team.webp');
    }
    .menu-invite {
        width: 6.2vw;
        height: 1.1vw;
        background-image: url('../img/mb/invite.webp');
    }
    .menu-daily-log {
        height: 1.1vw;
        width: 6.2vw;
        background-image: url('../img/mb/daily-log.webp');
    }
    .menu-jod-vote {
        height: 1.1vw;
        width: 6.2vw;
        background-image: url('../img/mb/jod-vote.webp');
    }
    .menu-jod {
        width: 4.9vw;
        height: 1.1vw;
        background-image: url('../img/mb/job.webp');
    }
    .menu-game-desc {
        width: 4.9vw;
        height: 1.1vw;
        background-image: url('../img/mb/game-desc.webp');
    }
    .menu-process {
        width: 6.2vw;
        height: 1.1vw;
        background-image: url('../img/mb/process.png');
    }
    .menu-award-query {
        width: 4.9vw;
        height: 1.1vw;
        background-image: url('../img/mb/award-query.webp');
    }
    .bg1 {
        width: 100%;
        height: 82.3vw;
        background-image: url('../img/pc/bg1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .bg1-title {
        width: 100%;
        height: 12vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 35vw;
    }
    .title-1 {
        width: 43.6vw;
        height: 12vw;
        background-image: url('../img/pc/bg1-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .phone-content {
        width: 100%;
        position: absolute;
        top: 60.3vw;
        z-index: 100;
    }
    .phone-title-content {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .phone-title {
        width: 73.3vw;
        height: 13.9vw;
        background-image: url('../img/phone-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .input-content {
        width: 100vw;
        height: 5.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99;
        position: relative;
    }
    .input-bg {
        width: 38.5vw;
        height: 100%;
        background-image: url('../img/pc/input-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .zone-code-content {
        width: 17vw;
        height: 98%;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-image: url('../img/pc/zone-code-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 1px;
    }
    .zone-code {
        width: 11.8vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        font-size: 1.8vw;
        font-weight: 600;
        color: white;
        margin-left: 2vw;
    }
    .zone-code-item {
        display: flex;
        font-size: 1.8vw;
        font-weight: 600;
        color: white;
        padding: 1vw 0px;
    }
    .select-zone-content {
        width: 17vw;
        height: 16.6vw;
        position: absolute;
        background-image: url('../img/pc/select-zone-code.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 11.5vw;
    }
    .to-down {
        width: 5.2vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 1vw;
    }
    .down {
        width: 2vw;
        height: 1vw;
        background-image: url('../img/mb/to-down.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .input {
        height: 92%;
        width: 21.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .input input {
        height: 95%;
        width: 21vw;
        border: none;
        border-radius: 1vw;
        text-align: center;
        font-size: 1.5vw;
        outline: none;
    }
    .protocal {
        width: 100%;
        height: 3vw;
        position: absolute;
        top: 12.2vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #cc6532;
        font-size: 1vw;
    }
    .protocal-container {
        width: 100vw;
        height: 3vw;
        margin-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .protocal-content {
        width: 20vw;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .circle {
        height: 1.7vw;
        width: 2.3vw;
        background-image: url('../img/pc/kk.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .right-icon {
        height: 1.7vw;
        width: 1.7vw;
        background-image: url('../img/pc/right-icon.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .protocal-tip {
        height: 1.4vw;
        width: 23.8vw;
        background-image: url('../img/pc/protocal.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 0.5vw;
    }
    .book-btn-content {
        width: 100%;
        height: 8.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .book-btn {
        width: 25.2vw;
        height: 100%;
        display: flex;
        background-image: url('../img/pc/book.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-award-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 188vw;
    }
    .middle-book-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
    }
    .middle-book {
        width: 42.4vw;
        height: 12.6vw;
        /* background-image: url('../img/apple.webp'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 10;
        top: -3vw;
        position: relative;
    }
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 196.8vw;
    }
    .book-user-content {
        width: 49vw;
        height: 5vw;
        background-image: url('../img/user-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .book-tip {
        width: 28vw;
        height: 2.5vw;
        background-image: url('../img/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    /** b2 **/
    .bg2 {
        width: 100%;
        height: 79.6vw;
        background-image: url('../img/pc/bg2.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bg2-title-content {
        width: 100%;
        height: 5.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 34.8vw;
    }
    .bg2-title {
        width: 60.8vw;
        height: 5.1vw;
        background-image: url('../img/pc/bg2-title.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .activity-time-content {
        width: 100%;
        height: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 40.5vw;
    }
    .activity-time {
        width: 47.5vw;
        height: 3vw;
        background-image: url('../img/pc/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg2-award-content {
        display: flex;
        flex-direction: row;
        height: 23.7vw;
        width: 42.7vw;
        position: absolute;
        top: 47.3vw;
        justify-content: space-between;
        margin-left: 1vw;
    }
    .bg2 .award-content {
        width: 16.7vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    .bg2 .award {
        width: 16.7vw;
        height: 16.4vw;
        background-image: url('../img/pc/bg2-award.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-container {
        width: 25vw;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        align-items: center;
        justify-content: flex-end;
    }
    .team-input-content {
        width: 26vw;
        height: 2.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .team-input {
        width: 20.4vw;
        height: 2.2vw;
        background-image: url('../img/pc/bg2-input.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .team-input input {
        width: 11.5vw;
        height: 1.8vw;
        border: none;
        margin-left: 2px;
        text-align: center;
        margin-top: 1px;
        font-size: 1.1vw;
        outline: none;
        border-radius: 1vw;
        margin-left: 0.5vw;
    }
    .join-team {
        height: 2.1vw;
        width: 8.5vw;
        background-image: url('../img/pc/join-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .question {
        width: 2.4vw;
        height: 2.4vw;
        position: absolute;
        background-image: url('../img/pc/question.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        right: 0.1vw;
        top: -1.7vw;
    }
    .has-team .question {
        right: -2vw;
        top: -1.8vw;
    }
    .team-btn {
        width: 20.4vw;
        height: 2.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        top: 2vw;
    }
    .team-create {
        width: 8.8vw;
        height: 2.6vw;
        background-image: url('../img/mb/create-team.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-search {
        width: 8.8vw;
        height: 2.6vw;
        background-image: url('../img/mb/search-team.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .has-team {
        width: 100%;
        height: 7.3vw;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 0vw;
        display: flex;
        align-items: flex-start;
    }
    .invite-code-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 9vw;
        height: 2.3vw;
    }
    .code-bg {
        width: 3.5vw;
        height: 2.3vw;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-image: url('../img/mb/team-code.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%; */
    }
    .code-data {
        height: 2.3vw;
        font-size: 1vw;
        color: red;
        width: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .team-copy {
        width: 7.9vw;
        height: 2.3vw;
        background-image: url('../img/mb/team-copy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 5px;
    }
    .search-team-2 {
        width: 7.9vw;
        height: 2.3vw;
        background-image: url('../img/mb/searcg-friend.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 2px;
    }
    .team-list {
        width: 100%;
        height: 4.7vw;
        display: flex;
        flex: row;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        top: 2.8vw;
    }
    .team-user {
        width: 3.2;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-right: 1.3vw;
    }
    .team-avatar {
        width: 3.8vw;
        height: 3.9vw;
        background-image: url('../img/mb/avatar.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .team-name {
        width: 3.8vw;
        height: 1.7vw;
        color: red;
        font: 1vw;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        outline: none;
    }
    .bg2 .award-content2 {
        width: 100%;
        height: 45.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 4vw;
    }
    .bg2 .award2 {
        width: 24.6vw;
        height: 14.5vw;
        background-image: url('../img/pc/bg2-award2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 {
        width: 100%;
        height: 61vw;
        background-image: url('../img/pc/bg3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg3-title-content {
        width: 100%;
        height: 5.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 3.1vw;
    }
    .bg3-title {
        width: 44.8vw;
        height: 5.1vw;
        background-image: url('../img/pc/bg3-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3-desc-content {
        width: 100%;
        height: 2.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15.7vw;
    }
    .bg3-desc {
        width: 27.2vw;
        height: 2.6vw;
        background-image: url('../img/pc/bg3-desc.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3-activity-time-content {
        width: 100%;
        height: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 9.6vw;
    }
    .bg3-activity-time {
        width: 47.5vw;
        height: 3vw;
        background-image: url('../img/pc/time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .invite-btn-content {
        width: 100%;
        height: 2.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 20.8vw;
        justify-content: space-between;
    }
    .copy-btn {
        width: 20vw;
        height: 2.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-left: 32.2vw;
    }
    .invite-code {
        width: 3.4vw;
        height: 1vw;
        background-image: url('../img/mb/invite_code.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .invite-num {
        height: 100%;
        width: 5.5vw;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        color: red;
        font-weight: 600;
        margin-left: 3px;
    }
    .copy {
        width: 7.9vw;
        height: 100%;
        background-image: url('../img/mb/copy-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .write-invite-code {
        width: 16.7vw;
        height: 2.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 32.1vw;
    }
    .wirte-code {
        width: 16.7vw;
        height: 100%;
        background-image: url('../img/pc/bind-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 3vw;
    }
    .cat {
        width: 13vw;
        height: 15.6vw;
        background-image: url('../img/pc/cat.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 44.9vw;
        left: 61.9vw;
    }
    .invite-user {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 29.8vw;
    }
    .invite-top,
    .invite-bottom {
        width: 21vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 6.5vw;
        position: relative;
    }
    .invite-top {
        margin-left: 28.2vw;
    }
    .invite-top-left {
        width: 11.6vw;
        height: 8.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 4.8vw;
    }
    .top-left-img {
        width: 11.6vw;
        height: 6.6vw;
        background-image: url('../img/pc/lv1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-left-btn {
        width: 6.6vw;
        height: 1.9vw;
        background-image: url('../img/pc/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-top-right {
        width: 11.6vw;
        height: 8.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        margin-left: 10.5vw;
    }
    .top-right-img {
        width: 11.6vw;
        height: 6.6vw;
        background-image: url('../img/pc/lv3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .top-right-btn {
        width: 6.6vw;
        height: 1.9vw;
        background-image: url('../img/pc/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-bottom-left {
        width: 11.6vw;
        height: 8.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 5.3vw;
    }
    .bottom-left-img {
        width: 11.6vw;
        height: 6.6vw;
        background-image: url('../img/pc/lv5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bottom-left-btn {
        width: 6.6vw;
        height: 1.9vw;
        background-image: url('../img/pc/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .invite-bottom-right {
        width: 11.6vw;
        height: 8.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        margin-left: 10vw;
    }
    .bottom-right-img {
        width: 11.6vw;
        height: 6.6vw;
        background-image: url('../img/pc/lv10.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bottom-right-btn {
        width: 6.6vw;
        height: 1.9vw;
        background-image: url('../img/pc/dark-r.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
    }
    .bg4 {
        width: 100%;
        height: 55vw;
        background-image: url('../img/pc/bg4.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg4-title-content {
        width: 100%;
        height: 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -2.5vw;
    }
    .bg4-title {
        width: 44.8vw;
        height: 5vw;
        background-image: url('../img/pc/bg4-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg4-activity-time-content {
        width: 100%;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 4.5vw;
    }
    .bg4-activity-time {
        width: 51.9vw;
        height: 5.5vw;
        background-image: url('../img/pc/bg4-activity-time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .daily-content {
        width: 100%;
        position: absolute;
        top: 19vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .daily-top {
        display: flex;
        flex-direction: row;
        width: 33.8vw;
        left: 35.5vw;
        position: absolute;
    }
    .daily-item {
        width: 8.3vw;
        height: 2.4vw;
        background-image: url('../img/pc/not-receive.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 8.7vw;
        left: 4.5vw;
    }
    .day1 {
        width: 15.9vw;
        height: 10vw;
        background-image: url('../img/pc/day1.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 1.7vw;
    }
    .day3 {
        width: 15.9vw;
        height: 10vw;
        background-image: url('../img/pc/day3.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .daily-bottom {
        display: flex;
        flex-direction: row;
        top: 12.1vw;
        align-items: center;
        width: 33.8vw;
        left: 36.7vw;
        position: absolute;
    }
    .day5 {
        width: 15.9vw;
        height: 10vw;
        background-image: url('../img/pc/day5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 1.7vw;
    }
    .day7 {
        width: 15.9vw;
        height: 10vw;
        background-image: url('../img/pc/day7.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .girl {
        width: 21.8vw;
        height: 29vw;
        background-image: url('../img/pc/girl.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 1200;
        left: 12vw;
        top: 5.5vw;
    }
    .vote-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 158.5vw;
        display: none;
    }
    .bg5 {
        width: 100%;
        height: 52.1vw;
        background-image: url('../img/pc/bg5.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .bg5-title-content {
        width: 100%;
        height: 5.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 2.1vw;
    }
    .bg5-title {
        width: 44.8vw;
        height: 5.2vw;
        background-image: url('../img/pc/bg5-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg5-activity-time-content {
        width: 100%;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 9.6vw;
    }
    .bg5-activity-time {
        width: 54.3vw;
        height: 5.5vw;
        background-image: url('../img/pc/bg5-activity-time.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .pc-vote-content {
        width: 100%;
        height: 31.4vw;
        position: absolute;
        top: 17.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .vote-list {
        width: 100%;
        height: 31.4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .vote-1 {
        width: 15.6vw;
        height: 24.1vw;
        background-image: url('../img/pc/bg4-1.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 13.9vw;
        top: 0px;
    }
    .vote-num {
        width: 12vw;
        height: 2vw;
        background-image: url('../img/pc/vote-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 7.2vw;
        left: 1.8vw;
        color: white;
        font-size: 1.4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .vote-num-2,
    .vote-num-4 {
        bottom: 7.5vw;
    }
    .vote-btn {
        width: 8.1vw;
        height: 2.3vw;
        background-image: url('../img/pc/vote.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 4vw;
        left: 3.7vw;
    }
    .vote-2 {
        width: 15.6vw;
        height: 24.1vw;
        background-image: url('../img/pc/bg4-2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 27.9vw;
        bottom: 0px;
    }
    .vote-3 {
        width: 15.6vw;
        height: 24.1vw;
        background-image: url('../img/pc/bg4-3.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 42vw;
        top: 0px;
    }
    .vote-4 {
        width: 15.6vw;
        height: 24.1vw;
        background-image: url('../img/pc/bg4-4.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 56.1vw;
        bottom: 0px;
    }
    .vote-5 {
        width: 15.6vw;
        height: 24.1vw;
        background-image: url('../img/pc/bg4-5.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 70.5vw;
        top: 0px;
    }
    .bg5-swiper-content {
        width: 62.5vw;
        height: 108.6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 32.8vw;
        display: none;
    }
    .pc-bg6-swiper-content {
        width: 62.5vw;
        height: 62.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bg6-swiper {
        width: 62.5vw;
        height: 62.5vw;
        display: flex;
        flex-direction: column;
        top: 12vw;
        margin-left: 13.5vw;
    }
    .swiper-3d .swiper-slide-shadow-right,
    .swiper-3d .swiper-slide-shadow-left {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg6 .slide-div img {
        width: 62.5vw;
        height: 62.5vw;
        display: block;
        z-index: 1;
        /* 确保 img 在伪元素下方 */
        position: relative;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    .bg3 .swiper-button-next {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-right.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .swiper-button-prev {
        width: 3.9vw;
        height: 6.6vw;
        background-image: url('../img/role-left.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bg3 .point {
        display: none;
    }
    .pc-point {
        width: 6.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        position: absolute;
        top: 28vw;
        left: 68.5vw;
    }
    .point-item {
        width: 6.1vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .pc1 {
        background-image: url('../img/pc/l1.webp');
    }
    .pc2 {
        background-image: url('../img/pc/d2.webp');
        right: -3.7vw;
    }
    .pc3 {
        background-image: url('../img/pc/d3.webp');
        right: -5.9vw;
    }
    .pc4 {
        background-image: url('../img/pc/d4.webp');
        right: -3.7vw;
    }
    .pc5 {
        background-image: url('../img/pc/d5.webp');
    }
    .bg6 {
        width: 100%;
        height: 216vw;
        background-image: url('../img/pc/bg6.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -2px;
        position: relative;
    }
    .game-title-content {
        width: 100%;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6.5vw;
    }
    .game-title {
        width: 37vw;
        height: 5.5vw;
        background-image: url('../img/pc/game-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .game-title-content {
        width: 100%;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6.5vw;
    }
    .game-title {
        width: 37vw;
        height: 5.5vw;
        background-image: url('../img/pc/game-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .game-desc-title-content {
        width: 100%;
        height: 5.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 74vw;
    }
    .game-desc-title {
        width: 37vw;
        height: 5.5vw;
        background-image: url('../img/pc/game-desc-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .video {
        width: 59.8vw;
        height: 29.1vw;
        background-image: url('../img/pc/video.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        left: 20.1vw;
        position: absolute;
        top: 86.4vw;
    }
    .play {
        width: 8.2vw;
        height: 8.2vw;
        background-image: url('../img/pc/play.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .boy {
        width: 32vw;
        height: 39vw;
        background-image: url('../img/pc/boy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 100;
        position: absolute;
        left: 1.4vw;
        top: 104vw;
    }
    .fb-button {
        width: 100%;
        height: 6.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 124vw;
    }
    .fb {
        width: 21.6vw;
        height: 6.5vw;
        background-image: url('../img/mb/facebook.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .process-title-content {
        width: 100%;
        height: 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 142vw;
    }
    .process-title {
        width: 52.8vw;
        height: 5vw;
        background-image: url('../img/pc/process-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .book-user-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 149.2vw;
    }
    .book-user-content {
        width: 36.6vw;
        height: 3.4vw;
        background-image: url('../img/pc/user-num-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .book-tip {
        width: 19.1vw;
        height: 1.6vw;
        background-image: url('../img/pc/user-num-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .book-num {
        height: 3.5vw;
        font-size: 2.5vw;
        font-weight: 600;
        color: #ffa30b;
        text-align: center;
    }
    .process-container {
        display: none;
    }
    .pc-process-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 156vw;
        height: 25.5vw;
    }
    .process-item {
        width: 11.4vw;
        height: 20vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .process-5 {
        background-image: url('../img/pc/5w.webp');
        position: absolute;
        top: 0px;
        left: 19.1vw;
    }
    .process-10 {
        background-image: url('../img/pc/10w.webp');
        position: absolute;
        bottom: 0px;
        left: 31.8vw;
    }
    .process-20 {
        background-image: url('../img/pc/20w.webp');
        position: absolute;
        top: 0px;
        left: 44.2vw;
    }
    .process-50 {
        background-image: url('../img/pc/50w.webp');
        position: absolute;
        bottom: 0px;
        left: 57.1vw;
    }
    .process-100 {
        background-image: url('../img/pc/100w.webp');
        position: absolute;
        top: 0px;
        left: 69.7vw;
    }
    .success-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .success-bg {
        width: 35.6vw;
        height: 32vw;
        background-image: url('../img/pc/success-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 3vw;
    }
    .succes-close {
        width: 3.2vw;
        height: 2.8vw;
        background-image: url('../img/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: 3vw;
        right: 36vw;
    }
    .success-btn {
        width: 100%;
        height: 17.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .success {
        background-image: url('../img/success-apple.webp');
        width: 20.3vw;
        height: 5.1vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 34vw;
        position: fixed;
    }
    .success-google {
        width: 20.3vw;
        height: 5.1vw;
        background-image: url('../img/pc/success-google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 40vw;
        position: fixed;
    }
    .fail-content {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .fail-bg {
        width: 35.6vw;
        height: 32vw;
        background-image: url('../img/fail-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 3vw;
    }
    .fail-close {
        width: 3.2vw;
        height: 2.8vw;
        background-image: url('../img/close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: 500;
        top: 3vw;
        right: 29vw;
    }
    .fail-btn {
        width: 100%;
        height: 17.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 140vw;
    }
    .fail {
        width: 20.3vw;
        height: 5.1vw;
        background-image: url('../img/pc/success-apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 34vw;
        position: fixed;
    }
    .fail-google {
        width: 20.3vw;
        height: 5.1vw;
        background-image: url('../img/pc/success-google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 40vw;
        position: fixed;
    }
    .pro-item {
        width: 9vw;
        margin-top: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .google-btn {
        display: none;
    }
    .footer-google-btn {
        display: none;
    }
    .point {
        display: none;
    }
    .vote-title-content {
        display: none;
    }
    .wirte-code {
        width: 16.7vw;
        height: 100%;
        background-image: url('../img/pc/bind-code.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .f-code {
        width: 8.8vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 0.5vw;
    }
    .f-code-info {
        height: 90%;
        width: 8.8vw;
        color: red;
        font-size: 1.5vw;
        font-weight: 600;
        text-align: center;
        outline: none;
        border: none;
    }
    .wirte-code-btn {
        width: 7.9vw;
        height: 2.2vw;
        background-image: url('../img/pc/bind.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .login-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .login-bg {
        width: 29.9vw;
        height: 23.8vw;
        background-image: url('../img/pc/alert/login-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .login-fb-btn {
        width: 16.5vw;
        height: 4.2vw;
        background-image: url('../img/pc/alert/fb.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 11.7vw;
    }
    .login-close {
        width: 2.9vw;
        height: 2.6vw;
        background-image: url('../img/mb/alert/login-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1.5vw;
        right: 0.8vw;
    }
    .alert-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .alert-bg {
        width: 29.4vw;
        height: 17.2vw;
        background-image: url('../img/pc/alert/name-repeat.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .alert-close {
        width: 2.9vw;
        height: 2.6vw;
        background-image: url('../img/pc/alert/team-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1.5vw;
        right: 0.3vw;
    }
    .vote-activity-time-content {
        display: none;
    }
    .daily-btn {
        width: 17.8vw;
        height: 4.8vw;
        background-image: url('../img/pc/clock.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 27vw;
        left: 46vw;
    }
    .toast-content {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 15vw;
    }
    .toast {
        display: block;
        background: #292929;
        color: white;
        padding: 0.3vw 1vw;
        text-align: center;
        border-radius: 0.3vw;
    }
    #prebook {
        position: absolute;
        top: 31vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #team {
        position: absolute;
        top: 110vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #invite {
        position: absolute;
        top: 160vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #daily {
        position: absolute;
        top: 219vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #vote {
        position: absolute;
        top: 274vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #job {
        position: absolute;
        top: 333vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #game {
        position: absolute;
        top: 401vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    #process {
        position: absolute;
        top: 467vw;
        z-index: 19999;
        width: 100%;
        height: 1px;
    }
    .google-apple-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 26.5vw;
    }
    .pc-apple {
        width: 18.3vw;
        height: 5.6vw;
        background-image: url('../img/pc/apple.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 29.5vw;
    }
    .pc-google {
        width: 18.3vw;
        height: 5.6vw;
        background-image: url('../img/pc/google.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 3.6vw;
    }
    .my-invite-num {
        width: 2.75vw;
        height: 2.5vw;
        background-image: url('../img/pc/0.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 25.1vw;
        left: 49.8vw;
    }
    .clock-num {
        width: 3vw;
        height: 3.8vw;
        background-image: url('../img/pc/0.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 13.3vw;
        left: 51.3vw;
    }
    .query-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .query-content {
        width: 29.5vw;
        height: 43.5vw;
        background-image: url('../img/pc/alert/query-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .query-close {
        width: 3vw;
        height: 2.7vw;
        background-image: url('../img/pc/alert/query-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1.9vw;
        right: 0.7vw;
    }
    .query-list {
        width: 20vw;
        height: 30vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 8vw;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        /* IE和Edge */
        -ms-overflow-style: none;
    }
    .query-list::-webkit-scrollbar {
        display: none;
    }
    .query-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .query-team .qury-title {
        width: 18.1vw;
        height: 1.6vw;
        background-image: url('../img/pc/alert/team-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .query-invite .qury-title {
        width: 18.1vw;
        height: 1.6vw;
        background-image: url('../img/pc/alert/invite-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.5vw;
    }
    .query-daily .qury-title {
        width: 18.1vw;
        height: 1.6vw;
        background-image: url('../img/pc/alert/daily-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.5vw;
    }
    .query-vote .qury-title {
        width: 18.1vw;
        height: 1.6vw;
        background-image: url('../img/pc/alert/vote-title.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.5vw;
    }
    .query-code-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 1.1vw;
    }
    .query-code {
        width: 16.7vw;
        height: 2.2vw;
        background-image: url('../img/pc/alert/awrd-code-border.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-size: 1.4vw;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .query-btn {
        width: 8vw;
        height: 2.2vw;
        background-image: url('../img/pc/alert/award-cipy.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .tip-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .tip-bg {
        width: 29vw;
        height: 45vw;
        background-image: url('../img/mb/alert/tip.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .tip-close {
        width: 2.9vw;
        height: 2.6vw;
        background-image: url('../img/mb/alert/tip-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1vw;
        right: 0.5vw;
    }
    .logout {
        width: 100%;
        height: 5.8vw;
        color: white;
        font-size: 1.1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
    .user-namme {
        width: 5vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .logout-border {
        padding: 0px 2px;
    }
    .team-receive-award {
        width: 100%;
        height: 45.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 3vw;
    }
    .team-award-btn {
        width: 8.4vw;
        height: 2.4vw;
        background-image: url('../img/pc/team-award-btn.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .create-team-container {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
    .create-team-bg {
        width: 29.9vw;
        height: 24.7vw;
        background-image: url('../img/pc/alert/create-team-bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .create-btn {
        width: 12.8vw;
        height: 3.5vw;
        background-image: url('../img/pc/alert/create-team-btn.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 14vw;
    }
    .team-close {
        width: 2.9vw;
        height: 2.6vw;
        background-image: url('../img/pc/alert/team-close.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1.2vw;
        right: 1vw;
    }
    .create-team-bg input {
        width: 18vw;
        border: none;
        position: absolute;
        top: 9.3vw;
        padding: 1.8vw 0px;
        border: none;
        font-size: 1.8vw;
        color: gray;
    }
    .footer {
        width: 100%;
        height: 16.5vw;
        background-image: url('../img/pc/footer-bg.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0px;
    }
    .footer-btn-content {
        width: 100%;
        height: 3.4vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: absolute;
        top: 1.8vw;
    }
    .footer-btn {
        width: 11.6vw;
        height: 3.4vw;
        display: flex;
        background-image: url('../img/pc/apple.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 34.4vw;
    }
    .footer-google-btn {
        width: 11.6vw;
        height: 3.4vw;
        display: flex;
        background-image: url('../img/pc/google.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 3vw;
    }
    .marquee-container {
        width: 16vw;
        height: 4.6vw;
        overflow: hidden;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        top: 18.2vw;
        left: 1.2vw;
    }
    .marquee-list {
        display: flex;
        flex-direction: column;
        animation: scroll 60s linear infinite;
    }
    .marquee-item {
        height: 30px;
        line-height: 1vw;
        font-size: 0.6vw;
        color: #906f54;
    }
}

.breath {
    animation: scaleAnimation 1s infinite alternate;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes swing {
    0%,
    100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.grayed {
    filter: grayscale(100%);
    opacity: 0.6;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}