.bg-mask {
    width: 100%;
    height: 778vh;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    z-index: 99999999;
    display: none;
}

.main1 {
    width: 100%;
    height: 100%;
    background-image: url('../img/header_bg_webp.webp'), url('../img/header_bg.png');
    background-size: 100% 100%;
}

.shaking-one {
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
}

.shaking-two {
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
}

#header-title {
    width: 66%;
    height: 57%;
    background-image: url('../img/header_title.png');
    background-size: 100% 100%;
    position: absolute;
    top: 33.6vh;
    left: -1%;
    right: 0;
    margin: auto;
}

.header-btn {
    width: 44%;
    height: 14%;
    /* background-color: red; */
    background-size: 100% 100%;
    position: absolute;
    top: 79vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.small-btn {
    display: block;
    width: 23%;
    height: 40%;
    /* background-color: green; */
    background-size: 100% 100%;
}

.small-btn img {
    width: 100%;
    height: 100%;
}

.main2 {
    width: 100%;
    height: 152%;
    background-image: url('../img/main1_bg_webp.webp'), url('../img/main1_bg.png');
    background-size: 100% 100%;
}

#google-radio {
    width: 1vw;
    height: 1.4vh;
    /* background-color: red; */
    position: absolute;
    top: 172.35vh;
    left: 31.9%;
    margin: auto;
}

#app-radio {
    width: 1vw;
    height: 1.4vh;
    /* background-color: red; */
    position: absolute;
    top: 172.35vh;
    left: 40.77%;
    margin: auto;
}

#check-area {
    width: 4.3%;
    height: 2.5vh;
    position: absolute;
    top: 170vh;
    left: 54.2%;
    margin: auto;
    font-size: 0.7vw;
}

#main1-input {
    width: 11%;
    height: 1.8vw;
    position: absolute;
    top: 169.5vh;
    left: 59%;
    margin: auto;
    border: none;
    border-radius: 5px;
    padding-left: 15px;
    font-size: 0.7vw;
}

#main1-input:active {
    box-shadow: inset 0px 0px 0px 1.5px #bebdbb;
}

#main1-check {
    width: 1.1vw;
    height: 2vh;
    position: absolute;
    top: 178.8vh;
    left: 40.2%;
    margin: auto;
    cursor: pointer;
}

#main1-preorder {
    width: 13vw;
    height: 9vh;
    background-image: url('../img/login_btn.png');
    background-size: 100% 100%;
    position: absolute;
    top: 188vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
}

#main1-preorder:active {
    width: 9.75vw;
    height: 6.75vh;
}

#FB {
    width: 4.5vw;
    height: 3vh;
    background-image: url('../img/FB_up.png');
    background-size: 100% 100%;
    position: absolute;
    top: 195.8vh;
    left: 39.98vw;
    margin: auto;
    /* cursor: pointer; */
}

/* #FB:active {
    transform: scale(0.9);
} */

#main1-getreward {
    width: 6.8vw;
    height: 6vh;
    background-image: url('../img/main1_getorder.png');
    background-size: 100% 100%;
    position: absolute;
    top: 194.3vh;
    left: 46.97vw;
    margin: auto;
    /* cursor: pointer; */
}

/* #main1-getreward:active {
    transform: scale(0.9);
} */

#main1-app {
    width: 8.55vw;
    height: 4.8vh;
    /* background-color: red; */
    position: absolute;
    top: 212.2vh;
    left: 38.6vw;
    margin: auto;
    /* cursor: pointer; */
}

#main1-google {
    width: 8.55vw;
    height: 4.8vh;
    /* background-color: red; */
    position: absolute;
    top: 212.2vh;
    left: 52vw;
    margin: auto;
    /* cursor: pointer; */
}

.main3 {
    width: 100%;
    height: 178%;
    background-image: url('../img/main2_bg_webp.webp'), url('../img/main2_bg.png');
    background-size: 100% 100%;
}

#main2-people {
    width: 10vw;
    height: 5vh;
    /* background-color: red; */
    position: absolute;
    left: 6.3vw;
    right: 0;
    top: 295.24vh;
    bottom: 0;
    margin: auto;
    color: #FF7300;
    text-align: center;
    line-height: 5vh;
    font-weight: bold;
    font-size: 2.3vw;
}

#map-mask {
    width: 61.4vw;
    height: 54.3vh;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 304.5vh;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
    z-index: 10;
}

#map1 {
    width: 13vw;
    height: 21.14vh;
    background-image: url('../img/map1_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 312.3vh;
    /* bottom: 0; */
    left: 24vw;
    /* right: 0; */
    margin: auto;
    cursor: pointer;
    z-index: 9;
}

#map1:hover {
    /* width: 16.25vw;
    height: 25vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize1 {
    width: 9vw;
    height: 16vh;
    background-image: url('../img/prize1.png');
    background-size: 100% 100%;
    position: absolute;
    top: 321.3vh;
    /* bottom: 0; */
    left: 25vw;
    /* right: 0; */
    margin: auto;
    z-index: 10;
    /* display: none; */
}

#map2 {
    width: 8vw;
    height: 20vh;
    background-image: url('../img/map2_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 331.8vh;
    /* bottom: 0; */
    left: 35.2vw;
    /* right: 0; */
    margin: auto;
}

#map2:hover {
    /* width: 11.25vw;
    height: 25vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize2 {
    width: 8vw;
    height: 16vh;
    background-image: url('../img/prize2.png');
    background-size: 100% 100%;
    position: absolute;
    top: 337.5vh;
    /* bottom: 0; */
    left: 34vw;
    /* right: 0; */
    margin: auto;
    display: none;
}

#map3 {
    width: 15vw;
    height: 28.3vh;
    background-image: url('../img/map3_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 303.2vh;
    /* bottom: 0; */
    left: 31.5vw;
    /* right: 0; */
    margin: auto;
}

#map3:hover {
    /* width: 15vw;
    height: 27.5vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize3 {
    width: 8vw;
    height: 15.5vh;
    background-image: url('../img/prize3.png');
    background-size: 100% 100%;
    position: absolute;
    top: 311vh;
    /* bottom: 0; */
    left: 37vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
    display: none;
}

#map4 {
    width: 12vw;
    height: 23vh;
    background-image: url('../img/map4_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 325vh;
    /* bottom: 0; */
    left: 45.85vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
}

#map4:hover {
    /* width: 15vw;
    height: 36.25vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize4 {
    width: 9vw;
    height: 17vh;
    background-image: url('../img/prize4.png');
    background-size: 100% 100%;
    position: absolute;
    top: 332vh;
    /* bottom: 0; */
    left: 46vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
    display: none;
}

#map5 {
    width: 13.5vw;
    height: 21vh;
    background-image: url('../img/map5_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 310.8vh;
    /* bottom: 0; */
    left: 47.35vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
}

#map5:hover {
    /* width: 16.375vw;
    height: 26.25vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize5 {
    width: 7vw;
    height: 15.4vh;
    background-image: url('../img/prize5.png');
    background-size: 100% 100%;
    position: absolute;
    top: 313vh;
    /* bottom: 0; */
    left: 54.3vw;
    /* right: 0; */
    margin: auto;
    z-index: 10;
    display: none;
}

#map6 {
    width: 17.1vw;
    height: 29.19vh;
    background-image: url('../img/map6_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 322.76vh;
    /* bottom: 0; */
    left: 54.54vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
}

#map6:hover {
    /* width: 20.125vw;
    height: 28.75vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize6 {
    width: 7vw;
    height: 14.4vh;
    background-image: url('../img/prize6.png');
    background-size: 100% 100%;
    position: absolute;
    top: 336vh;
    /* bottom: 0; */
    left: 61.4vw;
    /* right: 0; */
    margin: auto;
    z-index: 10;
    display: none;
}

#map7 {
    width: 14.7vw;
    height: 18.5vh;
    background-image: url('../img/map7_red.png');
    background-size: 100% 100%;
    position: absolute;
    top: 310.7vh;
    /* bottom: 0; */
    left: 57.83vw;
    /* right: 0; */
    margin: auto;
}

#map7:hover {
    /* width: 18.25vw;
    height: 23.5vh; */
    z-index: 11;
    transform: scale(1.5);
}

#prize7 {
    width: 6.7vw;
    height: 15.4vh;
    background-image: url('../img/prize7.png');
    background-size: 100% 100%;
    position: absolute;
    top: 317.7vh;
    /* bottom: 0; */
    left: 65.9vw;
    /* right: 0; */
    margin: auto;
    z-index: 9;
    display: none;
}

#main2-input {
    width: 36vw;
    height: 4vh;
    background-color: #1C1D26;
    position: absolute;
    top: 127vh;
    left: 30vw;
    margin: auto;
    color: #757575;
    padding-left: 8px;
    font-size: 22px;
    font-weight: bold;
    display: none;
}

#main2-showreward {
    width: 5vw;
    height: 9vh;
    /* background-color: red; */
    background-image: url('../img/show_reward.png');
    background-size: 100% 100%;
    position: absolute;
    top: 381vh;
    left: 67.84vw;
    margin: auto;
    cursor: pointer;
}

#main2-showreward:hover {
    width: 6.25vw;
    height: 11.25vh;
}

#main2-right-btn {
    width: 18.7vw;
    height: 10vh;
    background-image: url('../img/main2_right_btn.png');
    background-size: 100% 100%;
    position: absolute;
    top: 382.5vh;
    left: 0;
    right: 0;
    margin: auto;
    /* cursor: pointer; */
}

/* #main2-right-btn:active {
    transform: scale(0.9);
} */

#main2-showfriend {
    width: 7vw;
    height: 3vh;
    /* background-color: red; */
    position: absolute;
    top: 398.25vh;
    left: 45.5vw;
    margin: auto;
    text-align: left;
    line-height: 3vh;
    color: #1C1D26;
    font-size: 1.5vw;
    font-weight: bold;
}

#reach1 {
    width: 4.5vw;
    height: 3.9vh;
    background-image: url('../img/no_reach.png');
    background-size: 100% 100%;
    position: absolute;
    top: 404.4vh;
    left: 51.6vw;
    margin: auto;
    /* cursor: pointer; */
}

#reach2 {
    width: 4.5vw;
    height: 3.9vh;
    background-image: url('../img/no_reach.png');
    background-size: 100% 100%;
    position: absolute;
    top: 408.4vh;
    left: 51.6vw;
    margin: auto;
    /* cursor: pointer; */
}

#reach3 {
    width: 4.5vw;
    height: 3.9vh;
    background-image: url('../img/no_reach.png');
    background-size: 100% 100%;
    position: absolute;
    top: 412.4vh;
    left: 51.6vw;
    margin: auto;
    /* cursor: pointer; */
}

.main4 {
    width: 100%;
    height: 169%;
    background-image: url('../img/main3_bg_webp.webp'), url('../img/main3_bg.png');
    background-size: 100% 100%;
}

.main3-change-box {
    width: 90vw;
    height: 116vh;
    background-image: url('../img/main3_1.png');
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 471.4vh;
    margin: auto;
}

#arms1 {
    width: 13.9vw;
    height: 27vh;
    /* background-color: red; */
    position: absolute;
    top: 9.8vh;
    left: 67.5vw;
    margin: auto;
    cursor: pointer;
}

#arms2 {
    width: 13.9vw;
    height: 27vh;
    /* background-color: red; */
    position: absolute;
    top: 44vh;
    left: 75.42vw;
    margin: auto;
    cursor: pointer;
}

#arms3 {
    width: 13.9vw;
    height: 27vh;
    /* background-color: red; */
    position: absolute;
    top: 69vh;
    left: 64.42vw;
    margin: auto;
    cursor: pointer;
}

.main5 {
    width: 100%;
    height: 179%;
    background-image: url('../img/main4_bg_webp.webp'), url('../img/main4_bg.jpg');
    background-size: 100% 100%;
}

#switch {
    width: 32vw;
    height: 100vh;
    /* background-color:black; */
    /* z-index: 999; */
    position: absolute;
    top: 638.4vh;
    left: 45vw;
    margin: auto;
}

img {
    position: absolute;
    width: 32vw;
    height: 100vh;
    z-index: 9999;
}

#imgId1 {
    opacity: 1;
}

#imgId2 {
    opacity: 0;
}

#imgId3 {
    opacity: 0;
}

#imgId4 {
    opacity: 0;
}

#imgId5 {
    opacity: 0;
}

ul {
    position: absolute;
    left: 24.6vw;
    top: 7vh;
    height: 100px;
    /* background-color: green; */
}

li {
    /* float: left; */
    margin-left: 10px;
    width: 10vw;
    height: 11vh;
    margin-top: 1.3vh;
    /* border-radius: 50%; */
    /* background-color: orange; */
    background-image: url('../img/no_switch.png');
    background-size: 100% 100%;
    cursor: pointer;
}

#leftArrow {
    position: absolute;
    left: 0px;
    top: 50%;
}

#rightArrow {
    position: absolute;
    right: 0px;
    top: 50%;
}

#userprotocol {
    width: 5.8vw;
    height: 3vh;
    /* background-color: red; */
    position: absolute;
    top: 772.4vh;
    left: 33.5vw;
    margin: auto;
}

#private {
    width: 5.8vw;
    height: 3vh;
    /* background-color: red; */
    position: absolute;
    top: 772.4vh;
    left: 42.5vw;
    margin: auto;
}

.message-tip-box {
    width: 24vw;
    height: 24vh;
    /* background-color: red; */
    background-image: url('../img/message_tip_box.png');
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 5vh;
    margin: auto;
    z-index: 999999999;
    display: none;
}

.message-content {
    width: 75%;
    height: 33%;
    /* background-color: yellow; */
    position: absolute;
    top: 6vh;
    left: 1.76vw;
    /* right: 0; */
    margin: auto;
    color: #3a6a02;
    text-align: center;
    font-size: 1vw;
}

#message-tip-close1 {
    width: 2vw;
    height: 4vh;
    /* background-color: green; */
    position: absolute;
    top: 1vh;
    left: 21.5vw;
    margin: auto;
    cursor: pointer;
}

#message-tip-close2 {
    width: 4vw;
    height: 4vh;
    /* background-color: green; */
    position: absolute;
    top: 16.5vh;
    left: 9vw;
    margin: auto;
    cursor: pointer;
}

.show-reward {
    width: 30vw;
    height: 30vh;
    /* background-color: red; */
    background-image: url('../img/show_reward_box.png');
    background-size: 100% 100%;
    position: fixed;
    top: 5vh;
    left: 0;
    right: 0;
    z-index: 999999999999;
    margin: auto;
    display: none;
}

.show-reward>#reward-close1 {
    width: 2.4vw;
    height: 4vh;
    /* background-color: green; */
    position: absolute;
    top: 2.8vh;
    left: 27.3vw;
    margin: auto;
    cursor: pointer;
}

.show-reward>.table {
    width: 23vw;
    height: 22vh;
    overflow: scroll;
    position: absolute;
    top: 4vh;
    left: 2.1vw;
    margin: auto;
}

.show-reward>.table>table {
    /* background-color: green; */
    width: 100%;
    height: auto;
    text-align: center;
}

.show-reward>.table>table>thead {
    width: 100%;
    height: 40px;
    background-color: #F46F02;
    color: #F6F9D3;
    font-size: 1vw;
}

.show-reward>.table>table td {
    width: 100px;
    height: 40px;
}

.show-reward>.table>table>tbody {
    color: #262531;
    font-size: 0.7vw;
    /* font-size: large; */
}

.copy-btn {
    width: 3vw;
    height: 3.7vh;
    /* background-color: blue; */
    background-image: url('../img/copy_btn.png');
    background-size: 100% 100%;
    margin: 0 auto;
    cursor: pointer;
}

.copy-btn:active {
    transform: scale(1.2);
}