body{background: #cce1ef;}

.stage{height: 100%;-webkit-transform:translate3d(0,0,0);}
.stage.in{-webkit-animation: fadeIn 0.5s 1 ease-in-out;}
.stage.out{-webkit-animation: fadeOut 0.5s 1 ease-in-out;}

#main_container{position: relative; clear: both; }

#main.fix{min-height: initial;}
#main{-webkit-transform-origin: 0 0;}
/*MAIN START*/
#main{width: 750px; min-height: 1381px;}
/*MAIN END*/
/*.stage1 START*/
.stage1{}
.stage1 .bg{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/stage1_bg_8.png); }
.stage1 .stage2_button{position: absolute; width: 393px; height: 132px; top: 1152px; left: 172px; background: url(../images/stage1_stage2_button_41.png); }
/*.stage2 START*/
.stage2{}
.stage2 .bg{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/stage2_bg_45.png); }
.stage2 .people{position: absolute; width: 652px; height: 861px; top: 330px; left: 68px; background: url(../images/stage2_people_80.png); }
/*.stage2 .foot START*/
.stage2 .foot{position: absolute; width: 750px; height: 392px; top: 989px; left: 0px;}
.stage2 .foot .foot_bg{position: absolute; width: 750px; height: 392px; top: 0px; left: 0px; background: url(../images/stage2_foot_foot_bg_49.png); }
.stage2 .foot .stage3_button{position: absolute; width: 664px; height: 103px; top: 221px; left: 43px; background: url(../images/stage2_foot_stage3_button_47.png); }
.stage2 .title{position: absolute; width: 656px; height: 134px; top: 61px; left: 43px; background: url(../images/stage2_title_42.png); }
/*.stage3 START*/
.stage3{}
.stage3 .bg{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/stage3_bg_22.png); }
.stage3 .people{position: absolute; width: 329px; height: 434px; top: 554px; left: 265px; background: url(../images/stage3_people_89.png); }
/*.stage3 .foot START*/
.stage3 .foot{position: absolute; width: 750px; height: 392px; top: 989px; left: 0px;}
.stage3 .foot .foot_bg{position: absolute; width: 750px; height: 392px; top: 0px; left: 0px; background: url(../images/stage3_foot_foot_bg_81.png); }
.stage3 .foot .foot_txt{position: absolute; width: 682px; height: 164px; top: 35px; left: 39px; background: url(../images/stage3_foot_foot_txt_70.png); }
.stage3 .foot .stage4_button{position: absolute; width: 664px; height: 103px; top: 219px; left: 41px; background: url(../images/stage3_foot_stage4_button_31.png); }
.stage3 .title{position: absolute; width: 656px; height: 134px; top: 61px; left: 43px; background: url(../images/stage2_title_42.png); }
.stage3 .word{position: absolute; width: 699px; height: 265px; top: 324px; left: 29px; background: url(../images/stage3_word_48.png); }
.stage3 .role_tips_button{position: absolute; width: 104px; height: 39px; top: 208px; left: 602px; background: url(../images/stage3_role_tips_button_71.png); }
/*.stage4 START*/
.stage4{}
.stage4 .bg{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/stage4_bg_24.png); }
/*.stage4 .peoples START*/
.stage4 .peoples{position: absolute; width: 723px; height: 888px; top: 229px; left: 18px;}
/*.stage4 .peoples .p5 START*/
.stage4 .peoples .p5{position: absolute; width: 513px; height: 579px; top: 0px; left: 12px;}
.stage4 .peoples .p5 .pic{position: absolute; width: 513px; height: 579px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_pic_100.png); }
/*.stage4 .peoples .p5 .face_mc START*/
.stage4 .peoples .p5 .face_mc{position: absolute; width: 101px; height: 98px; top: 209px; left: 22px;}
.stage4 .peoples .p5 .face_mc .face{position: absolute; width: 84px; height: 85px; top: 3px; left: 14px; -webkit-mask: url(../images/stage4_peoples_p5_face_mc_face_56.png); }
.stage4 .peoples .p5 .face_mc .face_top{position: absolute; width: 101px; height: 98px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_face_mc_face_top_16.png); }
/*.stage4 .peoples .p4 START*/
.stage4 .peoples .p4{position: absolute; width: 329px; height: 449px; top: 396px; left: 0px;}
.stage4 .peoples .p4 .pic{position: absolute; width: 329px; height: 449px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p4_pic_23.png); }
/*.stage4 .peoples .p4 .face_mc START*/
.stage4 .peoples .p4 .face_mc{position: absolute; width: 101px; height: 98px; top: 225px; left: 15px;}
.stage4 .peoples .p4 .face_mc .face{position: absolute; width: 84px; height: 85px; top: 3px; left: 14px; -webkit-mask: url(../images/stage4_peoples_p5_face_mc_face_56.png); }
.stage4 .peoples .p4 .face_mc .face_top{position: absolute; width: 101px; height: 98px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_face_mc_face_top_16.png); }
/*.stage4 .peoples .p3 START*/
.stage4 .peoples .p3{position: absolute; width: 323px; height: 472px; top: 96px; left: 400px;}
.stage4 .peoples .p3 .pic{position: absolute; width: 323px; height: 472px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p3_pic_75.png); }
/*.stage4 .peoples .p3 .face_mc START*/
.stage4 .peoples .p3 .face_mc{position: absolute; width: 101px; height: 98px; top: 225px; left: 147px;}
.stage4 .peoples .p3 .face_mc .face{position: absolute; width: 84px; height: 85px; top: 3px; left: 14px; -webkit-mask: url(../images/stage4_peoples_p5_face_mc_face_56.png); }
.stage4 .peoples .p3 .face_mc .face_top{position: absolute; width: 101px; height: 98px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_face_mc_face_top_16.png); }
/*.stage4 .peoples .p1 START*/
.stage4 .peoples .p1{position: absolute; width: 329px; height: 434px; top: 325px; left: 247px;}
.stage4 .peoples .p1 .pic{position: absolute; width: 329px; height: 434px; top: 0px; left: 0px; background: url(../images/stage3_people_89.png); }
/*.stage4 .peoples .p1 .face_mc START*/
.stage4 .peoples .p1 .face_mc{position: absolute; width: 101px; height: 98px; top: 80px; left: 183px;}
.stage4 .peoples .p1 .face_mc .face{position: absolute; width: 84px; height: 85px; top: 3px; left: 14px; -webkit-mask: url(../images/stage4_peoples_p5_face_mc_face_56.png); }
.stage4 .peoples .p1 .face_mc .face_top{position: absolute; width: 101px; height: 98px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_face_mc_face_top_16.png); }
/*.stage4 .peoples .p2 START*/
.stage4 .peoples .p2{position: absolute; width: 307px; height: 477px; top: 411px; left: 397px;}
.stage4 .peoples .p2 .pic{position: absolute; width: 307px; height: 477px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p2_pic_33.png); }
/*.stage4 .peoples .p2 .face_mc START*/
.stage4 .peoples .p2 .face_mc{position: absolute; width: 101px; height: 98px; top: 197px; left: 195px;}
.stage4 .peoples .p2 .face_mc .face{position: absolute; width: 84px; height: 85px; top: 3px; left: 14px; -webkit-mask: url(../images/stage4_peoples_p5_face_mc_face_56.png); }
.stage4 .peoples .p2 .face_mc .face_top{position: absolute; width: 101px; height: 98px; top: 0px; left: 0px; background: url(../images/stage4_peoples_p5_face_mc_face_top_16.png); }
.stage4 .title_txt{position: absolute; width: 540px; top: 205px; left: 50px; color: #fff; font-size: 28px; line-height: 40px; text-shadow: 0px 0px 5px #000; -webkit-text-stroke: 1px #e1a04b; font-weight: bold; }
.stage4 .title_txt .yellow{color: #ffd800; }
.stage4 .title{position: absolute; width: 656px; height: 134px; top: 61px; left: 43px; background: url(../images/stage2_title_42.png); }
.stage4 .icons_bg{position: absolute; width: 670px; height: 122px; top: 960px; left: 45px; background: url(../images/stage4_icons_bg_71.png); }
/*.stage4 .icons START*/
.stage4 .icons{position: absolute; width: 688px; height: 152px; top: 949px; left: 22px;}
.stage4 .icons .get1{position: absolute; width: 160px; height: 116px; top: 9px; left: 0px; background: url(../images/stage4_icons_get1_87.png); }
.stage4 .icons .get2{position: absolute; width: 119px; height: 151px; top: 1px; left: 158px; background: url(../images/stage4_icons_get2_100.png); }
.stage4 .icons .get3{position: absolute; width: 158px; height: 113px; top: 15px; left: 278px; background: url(../images/stage4_icons_get3_4.png); }
.stage4 .icons .get4{position: absolute; width: 126px; height: 119px; top: 9px; left: 434px; background: url(../images/stage4_icons_get4_25.png); }
.stage4 .icons .get5{position: absolute; width: 107px; height: 137px; top: 0px; left: 581px; background: url(../images/stage4_icons_get5_4.png); }
.stage4 .icons .unget1{position: absolute; width: 133px; height: 88px; top: 23px; left: 13px; background: url(../images/stage4_icons_unget1_82.png); }
.stage4 .icons .unget2{position: absolute; width: 92px; height: 125px; top: 14px; left: 171px; background: url(../images/stage4_icons_unget2_76.png); }
.stage4 .icons .unget3{position: absolute; width: 130px; height: 84px; top: 29px; left: 292px; background: url(../images/stage4_icons_unget3_92.png); }
.stage4 .icons .unget4{position: absolute; width: 98px; height: 91px; top: 23px; left: 448px; background: url(../images/stage4_icons_unget4_54.png); }
.stage4 .icons .unget5{position: absolute; width: 75px; height: 109px; top: 14px; left: 595px; background: url(../images/stage4_icons_unget5_31.png); }
.stage4 .rank_tips_button{position: absolute; width: 319px; height: 85px; top: 1253px; left: 38px; background: url(../images/stage4_rank_tips_button_39.png); }
.stage4 .role_tips_button{position: absolute; width: 104px; height: 39px; top: 208px; left: 602px; background: url(../images/stage3_role_tips_button_71.png); }
/*.stage4 .my_mc START*/
.stage4 .my_mc{position: absolute; width: 666px; height: 242px; top: 1096px; left: 36px;}
.stage4 .my_mc .prize1_tips_button{position: absolute; width: 319px; height: 85px; top: 157px; left: 347px; background: url(../images/stage4_my_mc_prize1_tips_button_89.png); }
.stage4 .my_mc .prize2_tips_button{position: absolute; width: 319px; height: 85px; top: 157px; left: 347px; background: url(../images/stage4_my_mc_prize2_tips_button_100.png); }
.stage4 .my_mc .share_button{position: absolute; width: 664px; height: 134px; top: 0px; left: 0px; background: url(../images/stage4_my_mc_share_button_65.png); }
.stage4 .my_mc .share_button.more{background: url(../images/stage4_my_mc_share_button_more.png); }
/*.stage4 .other_mc START*/
.stage4 .other_mc{position: absolute; width: 666px; height: 242px; top: 1096px; left: 36px;}
.stage4 .other_mc .game_tips_button{position: absolute; width: 319px; height: 85px; top: 157px; left: 347px; background: url(../images/stage4_other_mc_game_tips_button_33.png); }
.stage4 .other_mc .help_tips_button{position: absolute; width: 664px; height: 134px; top: 0px; left: 0px; background: url(../images/stage4_other_mc_help_tips_button_24.png); }
.stage4 .other_mc .help_tips_button.more{background: url(../images/stage4_other_mc_help_tips_button_more.png); }
/*.game_tips START*/
.game_tips{}
.game_tips .pic{position: absolute; width: 612px; height: 573px; top: 508px; left: 68px; background: url(../images/game_tips_pic_63.png); }
.game_tips .close_button{position: absolute; width: 41px; height: 41px; top: 464px; left: 628px; background: url(../images/game_tips_close_button_51.png); }
.game_tips .open_button{position: absolute; width: 540px; height: 105px; left: 0; right: 0; margin: 0 auto; top: 945px; }
/*.share1_tips START*/
.share1_tips{}
.share1_tips .pic{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/share1_tips_pic_15.png); }
.share1_tips .tw_button{position: absolute; width: 166px; height: 166px; top: 1108px; left: 180px; background: url(../images/share1_tips_tw_button_49.png); }
.share1_tips .line_button{position: absolute; width: 166px; height: 166px; top: 1108px; left: 422px; background: url(../images/share1_tips_line_button_51.png); }
.share1_tips .close_button{position: absolute; width: 104px; height: 39px; top: 685px; left: 31px; background: url(../images/rank_tips_close_button_49.png); }
/*.share2_tips START*/
.share2_tips{}
.share2_tips .pic{position: absolute; width: 750px; height: 1381px; top: 0px; left: 0px; background: url(../images/share2_tips_pic_51.png); }
.share2_tips .tw_button{position: absolute; width: 166px; height: 166px; top: 1108px; left: 180px; background: url(../images/share1_tips_tw_button_49.png); }
.share2_tips .line_button{position: absolute; width: 166px; height: 166px; top: 1108px; left: 422px; background: url(../images/share1_tips_line_button_51.png); }
.share2_tips .close_button{position: absolute; width: 104px; height: 39px; top: 685px; left: 31px; background: url(../images/rank_tips_close_button_49.png); }
/*.help_tips START*/
.help_tips{}
.help_tips .pic{position: absolute; width: 612px; height: 573px; top: 426px; left: 69px; background: url(../images/help_tips_pic_5.png); }
.help_tips .close_button{position: absolute; width: 41px; height: 41px; top: 382px; left: 629px; background: url(../images/game_tips_close_button_51.png); }
/*.msg_tips START*/
.msg_tips{}
.msg_tips .pic{position: absolute; width: 612px; height: 307px; top: 559px; left: 69px; background: url(../images/msg_tips_pic_51.png); }
.msg_tips .txt{position: absolute; width: 612px; height: 300px; top: 560px; left: 70px; color: #fff; font-size: 28px; line-height: 42px; text-align: center; display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around; }
.msg_tips .close_button{position: absolute; width: 41px; height: 41px; top: 515px; left: 629px; background: url(../images/game_tips_close_button_51.png); }
/*.rank_tips START*/
.rank_tips{}
/*.rank_tips .mc START*/
.rank_tips .mc{position: absolute; width: 750px; height: 1077px; top: 304px; left: 0px;}
.rank_tips .mc .pic{position: absolute; width: 750px; height: 1077px; top: 0px; left: 0px; background: url(../images/rank_tips_mc_pic_11.png); }
/*.rank_tips .mc .user_list START*/
.rank_tips .mc .user_list{position: absolute; width: 750px; height: 910px; top: 166px; left: 0; overflow: hidden; }
/*.rank_tips .mc .user_list .user START*/
.rank_tips .mc .user_list .user{position: relative; width: 750px; height: 50px; margin: 22px auto; border-bottom: solid 1px rgba(0,0,0,0.3); color: #ffcdd5; }
.rank_tips .mc .user_list .user .no_txt{position: absolute; width: 190px; top: 0px; left: 0px; font-size: 28px; line-height: 42px; font-weight: bold; text-align: center; }
.rank_tips .mc .user_list .user .name_txt{position: absolute; width: 360px; top: 0px; left: 190px; font-size: 28px; line-height: 42px; text-align: center; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank_tips .mc .user_list .user .res_txt{position: absolute; width: 200px; top: 0px; left: 550px; font-size: 28px; line-height: 42px; text-align: center; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank_tips .mc .user_list .user.yellow{color: #ffd800; }
.rank_tips .mc .user_list .user.white{color: #fff; text-shadow: 2px 0px 2px #e19f4b, 0px 2px 2px #e19f4b, -2px 0px 2px #e19f4b, 0px -2px 2px #e19f4b; }
.rank_tips .mc .top3{position: absolute; width: 712px; height: 251px; top: 155px; left: 15px; background: url(../images/rank_tips_mc_top3_95.png); }
.rank_tips .mc .top3.has_self{top: 230px; }
.rank_tips .mc .top{position: absolute; width: 658px; height: 29px; top: 117px; left: 38px; background: url(../images/rank_tips_mc_top_53.png); }
.rank_tips .mc .arrow{position: absolute; width: 169px; height: 59px; top: 31px; left: 286px; background: url(../images/rank_tips_mc_arrow_57.png); }
.rank_tips .title{position: absolute; width: 693px; height: 73px; top: 115px; left: 32px; background: url(../images/rank_tips_title_96.png); }
.rank_tips .t2{position: absolute; width: 412px; height: 59px; top: 241px; left: 48px; background: url(../images/rank_tips_t2_85.png); }
.rank_tips .t1{position: absolute; color: #e1a04b; font-weight: bold; font-size: 28px; white-space: nowrap; top: 200px; left: 46px; line-height: 30px; }
.rank_tips .t1::after{width: 168px; height: 28px; top: 211px; left: 68px; background: url(../images/rank_tips_t1_15.png); content: ""; display: inline-block; vertical-align: middle; margin-left: 5px; }
.rank_tips .close_button{position: absolute; width: 104px; height: 39px; top: 328px; left: 31px; background: url(../images/rank_tips_close_button_49.png); }
/*.role_tips START*/
.role_tips{}
.role_tips .pic{position: absolute; width: 612px; height: 573px; top: 426px; left: 68px; background: url(../images/role_tips_pic_2.png); }
.role_tips .close_button{position: absolute; width: 41px; height: 41px; top: 382px; left: 628px; background: url(../images/game_tips_close_button_51.png); }
/*.prize1_tips START*/
.prize1_tips{}
.prize1_tips .pic{position: absolute; width: 612px; height: 408px; top: 482px; left: 78px; background: url(../images/prize1_tips_pic_41.png); }
.prize1_tips .close_button{position: absolute; width: 41px; height: 41px; top: 438px; left: 638px; background: url(../images/game_tips_close_button_51.png); }
/*.prize2_tips START*/
.prize2_tips{}
.prize2_tips .pic{position: absolute; width: 612px; height: 573px; top: 426px; left: 78px; background: url(../images/prize2_tips_pic_25.png); }
.prize2_tips .close_button{position: absolute; width: 41px; height: 41px; top: 382px; left: 638px; background: url(../images/game_tips_close_button_51.png); }
.prize2_tips .share_button{position: absolute; width: 526px; height: 120px; top: 851px; left: 115px; background: url(../images/prize2_tips_share_button_94.png); }