body{background: #6e6258; background-image: url(../img/en/pc.jpg); background-size: cover; background-position: center top; height: 100vh; }

html{font-size: 625%; }
div{background-size: 100%; background-repeat: no-repeat; }

.notifications-container{transform: scale(0.5) translateX(-50%) !important; transform-origin: top left; max-width: 640px !important; }

.stage{height: 100%; -webkit-transform: translate3d(0,0,0); }
.stage.in{-webkit-animation: fadeIn 0.5s 0.2s 1 ease-in-out both; }
.stage.out{-webkit-animation: fadeOut 0.8s 0.2s 1 ease-in-out both; }
/*MAIN START*/
#main{width: 7.5rem; min-height: 16.24rem;}
#all{position: absolute; width: 100%; height: 100%; transform: perspective(0) translate3d(0,0,0); left: 0; right: 0; margin: 0 auto; }
/*MAIN END*/
/*.stage1 START*/
.stage1{}
.stage1 .bg{position: absolute; width: 7.5rem; height: 16.24rem !important; top: 0.0rem; left: 0.0rem; background-image: url(../img/en/bg0.png); }
.stage1 .title{position: absolute; width: 5.99rem; height: 2.35rem; top: 1.51rem; left: 0.74rem; background-image: url(../img/stage1_title_54.png); }
/*.stage1 .welcome_mc START*/
.stage1 .welcome_mc{position: absolute; width: 5.91rem; height: 1.36rem; top: 4.7rem; left: 0.9rem;}
.stage1 .welcome_mc .mc_bg{position: absolute; width: 5.91rem; height: 1.36rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage1_welcome_mc_mc_bg_65.png); }
.stage1 .welcome_mc .welcome_txt{    position: absolute;
    width: 5.4rem;
    top: 0.05rem;
    left: 0.5rem;
    color: #f2dbb3;
    font-size: 0.24rem;
    line-height: 0.32rem;
    height: 0.95rem;
    display: flex;
    flex-direction: column;
    justify-content: center;} 
/*.stage1 .buttons START*/
.stage1 .buttons{position: absolute; width: 6.6rem; height: 2.09rem; top: 9.71rem; left: 0; right: 0; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
.stage1 .buttons .job_button{position: relative; text-align: center; text-indent: 0.7rem; color: #f7e1ae; font-size: 0.3rem; font-weight: bold; line-height: 0.74rem; width: 3.29rem; height: 0.74rem; background-image: url(../img/en/task_btn.png); }
.stage1 .buttons .draw_button{position: relative; text-align: center; text-indent: 0.7rem; color: #f7e1ae; font-size: 0.3rem; font-weight: bold; line-height: 0.74rem; width: 3.29rem; height: 0.74rem; background-image: url(../img/en/draw_btn.png); }
.stage1 .buttons .stage2_button{position: relative; font-size: 0.38rem; color: #f1ddb5; text-align: center; line-height: 1.45rem; font-weight: bold; width: 6.37rem; height: 1.33rem; margin: -0.2rem auto 0; background-image: url(../img/en/start_btn.png); }
/*.stage1 .buttons .high_mc START*/
.stage1 .buttons .high_mc{position: relative; width: 3.07rem; height: 0.46rem; margin-bottom: 0.1rem; }
.stage1 .buttons .high_mc .mc_bg{position: absolute; width: 3.07rem; height: 0.46rem; top: 0.0rem; left: 0.0rem;     background-size: auto 100%;
    background-position: left; background-image: url(../img/en/stage1_res_bg1.png); }
.stage1 .buttons .high_mc .name{position: absolute;
    font-size: 0.22rem;
    color: #e5d5b9;
    line-height: 0.46rem;
    width: 2.35rem;
    text-align: center; }
.stage1 .buttons .high_mc .res{position: absolute; white-space: nowrap; width: 0.74rem; top: 0.0rem; left: 2.3rem; text-align: center; color: #341d12; font-size: 0.24rem; font-weight: bold; line-height: 0.46rem; }
/*.stage1 .buttons .times_mc START*/
/* .stage1 .buttons .times_mc{position: relative; width: 2.61rem; height: 0.31rem; }
.stage1 .buttons .times_mc .mc_bg{position: absolute; width: 1.95rem; height: 0.31rem; top: 0.0rem; left: 0.0rem;     background-size: auto 100%;
    background-position: left; background-image: url(../img/stage1_buttons_times_mc_mc_bg_13.png); }
.stage1 .buttons .times_mc .res{position: absolute; white-space: nowrap; width: 0.49rem; top: 0.0rem; left: 1.9rem; color: RGB(147,60,56); font-size: 0.3rem; font-weight: bold; line-height: 0.32rem; } */
/*.stage1 .urs_mc START*/
.stage1 .urs_mc{position: absolute; width: 2.96rem; height: 0.35rem; top: 0.45rem; left: 0.56rem;}
.stage1 .urs_mc .loginout{    position: absolute; color: #a9987c; 
    font-size: 0.24rem;
    text-decoration: underline; }
.stage1 .urs_mc .mc_bg{position: absolute; width: 2.96rem; height: 0.35rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage1_urs_mc_mc_bg_70.png); }
.stage1 .urs_mc .urs_txt{position: absolute; width: 1.41rem; top: 0.11rem; left: 1.38rem; color: #a9987c; font-size: 0.23rem; line-height: 0.23rem; }
.stage1 .langs{    position: absolute;
    width: 1.5rem;
    left: -0.8rem;
    right: 0;
    margin: 0 auto;
    color: #c3ae8f;
    background-color: #4e3f35;
    padding: 0.05rem;
    top: 0.4rem;
    border-radius: 0.2rem; 
    border: none !important;
    outline:  none !important;
    text-indent: 0.1rem;
}


.music_button{position: absolute; width: 0.6rem; height: 0.64rem; top: 0.28rem; left: 6.43rem; background-image: url(../img/en/pause.png); }
.music_button.playing{background-image: url(../img/en/music.png); }
/* 
@keyframes rotate{
    0%{transform: scale(1); }
    50%{transform: scale(1.05); }
    100%{transform: scale(1); }
} */

.stage1 .role_tips_button{position: absolute; top: 0.45rem; right: 1.3rem; border-bottom: solid 0.01rem #a9987c; font-size: 0.24rem; color: #a9987c; }
/*.stage2 START*/
.stage2{}
.stage2 .stage1_button{position: absolute; width: 0.95rem; height: 0.94rem; background-image: url(../img/en/return2.png); top: 11.67rem; left: 0.5rem; }
.stage2 .bg{position: absolute; width: 7.5rem; height: 16.24rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/en/bg2.jpg); }
.stage2 .top{position: absolute; width: 7.5rem; height: 0.51rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage2_top_59.png); }
.stage2 .foot{position: absolute; width: 7.5rem; height: 0.33rem; top: 15.91rem; left: 0.0rem; background-image: url(../img/stage2_foot_5.png); }
.stage2 .slogan{position: absolute; width: 7.5rem; height: 2.91rem; top: 0.98rem; left: 0.0rem; background-image: url(../img/stage2_slogan_78.png); }
.stage2 .title{position: absolute; width: 6.76rem; height: 0.81rem; top: 4.23rem; left: 0.36rem; background-image: url(../img/stage2_title_95.png); }
.stage2 .next_button{position: absolute; text-indent: 0.5rem; font-size: 0.32rem; color: #f1ddb5; text-align: center; line-height: 1.5rem; font-weight: bold; width: 4.87rem; height: 1.33rem; top: 11.37rem; left: 1.2rem; right: 0; margin: 0 auto; opacity: 0.5; background-image: url(../img/en/next.png); }
.stage2 .next_button.play{background-image: url(../img/en/next.png); opacity: 1; }
/* .stage2 .next_button_display{position: absolute; width: 2.98rem; height: 0.8rem; top: 11.39rem; left: 1.09rem; background-image: url(../img/stage2_next_button_display_86.png); } */
/* .stage2 .music_button{position: absolute; width: 0.6rem; height: 0.64rem; top: 0.58rem; left: 6.7rem; background-image: url(../img/stage1_music_button_94.png); } */
/*.stage2 .cards_mc START*/
.stage2 .cards_mc{position: absolute; width: 5rem; height: 4.6rem; top: 5.9rem; left: 0; right: 0; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; }
/*.stage2 .cards_mc .card START*/
.stage2 .cards_mc .card{position: relative; width: 2.08rem; height: 2.01rem; }
.stage2 .cards_mc .card .hover{position: absolute; display: none; width: 2.24rem; height: 2.17rem; top: -0.05rem; left: -0.05rem; background-image: url(../img/en/hover.png); }
/* .stage2 .cards_mc .card .box_hover{position: absolute; display: none; width: 2.41rem; height: 4.77rem; top: 0.14rem; left: 0.09rem; background-image: url(../img/stage2_cards_mc_card_box_hover_95.png); } */
.stage2 .cards_mc .card .box{position: absolute; width: 2.08rem; height: 2.01rem; top: 0; left: 0; }
.stage2 .cards_mc .card1 .box{background-image: url(../img/en/1.png);}
.stage2 .cards_mc .card2 .box{background-image: url(../img/en/2.png);}
.stage2 .cards_mc .card3 .box{background-image: url(../img/en/3.png);}
.stage2 .cards_mc .card4 .box{background-image: url(../img/en/4.png);}
.stage2 .cards_mc .card.current .hover{display: block; }
/* .stage2 .cards_mc .card.current .box_hover{display: block; } */
/* .stage2 .cards_mc .card.current .box{display: none; } */
/*.stage2 .cards_mc .card .status START*/
.stage2 .cards_mc .card .status{position: absolute; width: 1.69rem; height: 4.27rem; top: 0.26rem; left: 0.3rem;}
.stage2 .cards_mc .card .status .life3{position: absolute; width: 0.63rem; height: 0.14rem; top: 0.5rem; left: 1.06rem; background-image: url(../img/stage2_cards_mc_card_status_life3_70.png); }
.stage2 .cards_mc .card .status .tip1{position: absolute; width: 0.78rem; height: 0.22rem; top: 0.48rem; left: 0.0rem; background-image: url(../img/stage2_cards_mc_card_status_tip1_28.png);}
.stage2 .cards_mc .card .status .tip2{position: absolute; width: 0.78rem; height: 0.23rem; top: 0.72rem; left: 0.0rem; background-image: url(../img/stage2_cards_mc_card_status_tip2_93.png);}
.stage2 .cards_mc .card .status .t1{position: absolute; width: 0.38rem; top: 3.25rem; right: 0.1rem; color: RGB(26, 44, 51); font-size: 0.24rem; line-height: 0.3rem; white-space: nowrap; transform: scale(0.8); transform-origin: right bottom; }
.stage2 .cards_mc .card .status .t2{position: absolute; width: 0.38rem; top: 3.62rem; right: 0.1rem; color: RGB(26, 44, 51); font-size: 0.24rem; line-height: 0.3rem; white-space: nowrap; transform: scale(0.8); transform-origin: right bottom; }
.stage2 .cards_mc .card .status .t3{position: absolute; width: 0.38rem; top: 4rem; right: 0.1rem; color: RGB(26, 44, 51); font-size: 0.24rem; line-height: 0.3rem; white-space: nowrap; transform: scale(0.8); transform-origin: right bottom; }
.stage2 .cards_mc .card .status .p3{position: absolute; width: 1.22rem; height: 1.58rem; top: 1.23rem; left: 0.16rem; background-image: url(../img/stage2_cards_mc_card_status_p3_66.png); }
.stage2 .cards_mc .card .status .p2{position: absolute; width: 1.09rem; height: 1.7rem; top: 1.14rem; left: 0.23rem; background-image: url(../img/stage2_cards_mc_card_status_p2_49.png); }
.stage2 .cards_mc .card .status .p1{position: absolute; width: 1.33rem; height: 1.68rem; top: 1.14rem; left: 0.11rem; background-image: url(../img/stage2_cards_mc_card_status_p1_45.png); }
.stage2 .cards_mc .card .name{position: absolute;
    width: 120%;
    bottom: 0.05rem;
    left: -10%;
    text-align: center;
    color: #fdf4e4;
    font-size: 0.24rem;
    line-height: 0.24rem;
    white-space: nowrap;
    transform: scale(0.75);
    font-weight: bold; }
.stage2 .arrow{position: absolute; animation: arrowMove 2s ease-in-out infinite; width: 0.73rem; height: 0.69rem; top: 5.16rem; background-image: url(../img/stage2_arrow_93.png); }
.stage2 .arrow.pos1{left: 0.95rem; }
.stage2 .arrow.pos2{left: 3.44rem; }
.stage2 .arrow.pos3{left: 5.95rem; }

@keyframes arrowMove{
    0%,100%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(0.1rem);
    }
}

.stage2 .item{position: absolute; width: 6.29rem; height: 0.2rem; top: 12.49rem; left: 0.56rem; background-image: url(../img/stage2_item_72.png); opacity: 0.9;}
/*.stage3 START*/
.stage3{}
.stage3 .game{position: absolute; width: 7.5rem; height: 16.24rem; top: 0.0rem; left: 0.0rem; }
.stage3 .game canvas{position: absolute; width: 7.5rem; height: 16.24rem; top: 0.0rem; left: 0.0rem; }
.stage3 .bg{position: absolute; width: 7.5rem; height: 16.24rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage3_bg_11.png); }
.stage3 .slogan{position: absolute; pointer-events: none; width: 7.5rem; height: 2.18rem; top: 0.62rem; left: 0.0rem; background-image: url(../img/en/title.png); }
/*.stage3 .res_mc START*/
.stage3 .res_mc{position: absolute; pointer-events: none; width: 4.92rem; height: 0.91rem; top: 13rem; left: 0.59rem;}
.stage3 .res_mc.up{top: 11.5rem; }
/*.stage3 .res_mc .lifes START*/
.stage3 .res_mc .lifes{position: absolute; width: 7.5rem; height: 0.35rem; top: 0.0rem; left: 0.0rem; display: flex; flex-direction: row; justify-content: flex-start; }
.stage3 .res_mc .lifes .heart{position: relative; margin-right: 0.2rem; width: 0.44rem; height: 0.35rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage3_res_mc_lifes_heart_36.png); }

/* @keyframes lifeShow {
    0%{transform: scale(1.4); opacity: 0; }
    100%{transform: scale(1); opacity: 1; }
} */

.stage3 .res_mc .t1{position: absolute; width: 1.34rem; height: 0.31rem; top: 0.6rem; left: 0.8rem; color: #fff; font-size: 0.24rem; white-space: nowrap; }
.stage3 .res_mc .times{position: absolute; width: 0.16rem; top: 0.63rem; left: 2.52rem; color: RGB(247,216,93); font-size: 0.3rem; line-height: 0.3rem; }
.stage3 .res_mc .t2{position: absolute; width: 0.73rem; height: 0.31rem; top: 0.6rem; left: 3.66rem; color: #fff; font-size: 0.24rem; white-space: nowrap; }
.stage3 .res_mc .res{position: absolute; width: 0.52rem; top: 0.64rem; left: 4.9rem; color: RGB(247,216,93); font-size: 0.3rem; line-height: 0.3rem; }
.stage3 .player{position: absolute; width: 1.23rem; height: 1.61rem; top: 10.52rem; left: 2.96rem; background-image: url(../img/stage3_player_77.png); }
.stage3 .emeny1{position: absolute; width: 0.78rem; height: 0.96rem; top: 8.7rem; left: 5.72rem; background-image: url(../img/stage3_emeny1_89.png); }
.stage3 .emeny2{position: absolute; width: 0.78rem; height: 0.96rem; top: 7.94rem; left: 3.45rem; background-image: url(../img/stage3_emeny2_14.png); }
.stage3 .coin{position: absolute; width: 0.29rem; height: 0.28rem; top: 9.67rem; left: 3.18rem; background-image: url(../img/stage3_coin_85.png); }
/*.stage3 .red_mc START*/
.stage3 .red_mc{position: absolute; width: 3.01rem; height: 0.6rem; top: 2.77rem; left: 0.65rem;}
.stage3 .red_mc .red_bg{position: absolute; width: 3.01rem; height: 0.6rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage3_red_mc_red_bg_42.png); }
.stage3 .red_mc .add_word{position: absolute; width: 1.71rem; top: 0.09rem; left: 0.54rem; color: RGB(238,244,232); font-size: 0.29rem; line-height: 0.29rem; }
/*.stage3 .urs_mc START*/
.stage3 .urs_mc{position: absolute; width: 2.96rem; height: 0.35rem; top: 0.45rem; left: 0.56rem;}
.stage3 .urs_mc .mc_bg{position: absolute; width: 2.96rem; height: 0.35rem; top: 0.0rem; left: 0.0rem; background-image: url(../img/stage1_urs_mc_mc_bg_70.png); }
.stage3 .urs_mc .urs_txt{position: absolute; width: 1.41rem; top: 0.11rem; left: 1.38rem; color: RGB(238,244,232); font-size: 0.23rem; line-height: 0.23rem; }
/* .stage3 .music_button{position: absolute; width: 0.6rem; height: 0.64rem; top: 0.28rem; left: 6.43rem; background-image: url(../img/stage1_music_button_94.png); } */
/* .stage3 .role_tips_button{position: absolute; width: 1.06rem; height: 0.32rem; top: 0.46rem; left: 5.3rem; background-image: url(../img/stage3_role_tips_button_60.png); } */
.stage3 .role_tips_button{position: absolute; top: 0.45rem; right: 1.3rem; border-bottom: solid 0.01rem #a9987c; font-size: 0.24rem; color: #a9987c; }