body{background: #de9cfa;}

.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;}

#main.fix{min-height: initial;}
#main{-webkit-transform-origin: 0 0;}
/*MAIN START*/
#main{width: 750px; min-height: 1448px;}
/*MAIN END*/
/*.too_much_tips START*/
.too_much_tips{}
.too_much_tips .pic{position: absolute; width: 660px; height: 307px; top: 545px; left: 45px; background: url(../images/too_much_tips_pic_48.png); }
.too_much_tips .txt{position: absolute; width: 660px; text-align: center; top: 662px; left: 45px; color: #521daa; font-size: 28px; line-height: 32px; }
.too_much_tips .stage2_button{position: absolute; width: 288px; height: 76px; top: 728px; left: 231px; background: url(../images/too_much_tips_stage2_button_7.png); }
.too_much_tips .close_button{position: absolute; width: 76px; height: 88px; top: 443px; left: 627px; background: url(../images/too_much_tips_close_button_100.png); }
/*.helped_tips START*/
.helped_tips{}
.helped_tips .pic{position: absolute; width: 660px; height: 307px; top: 546px; left: 48px; background: url(../images/helped_tips_pic_65.png); }
.helped_tips .txt{position: absolute; width: 660px; text-align: center; top: 667px; left: 48px; color: #521daa; font-size: 28px; line-height: 32px; }
.helped_tips .close_button{position: absolute; width: 76px; height: 88px; top: 444px; left: 630px; background: url(../images/helped_tips_close_button_87.png); }
.helped_tips .stage2_button{position: absolute; width: 288px; height: 76px; top: 729px; left: 234px; background: url(../images/helped_tips_stage2_button_51.png); }
/*.help_tips START*/
.help_tips{}
.help_tips .pic{position: absolute; width: 660px; height: 307px; top: 545px; left: 45px; background: url(../images/help_tips_pic_37.png); }
.help_tips .txt{position: absolute; width: 660px; text-align: center; top: 669px; left: 45px; color: #521daa; font-size: 28px; line-height: 32px; }
.help_tips .stage2_button{position: absolute; width: 268px; height: 76px; top: 728px; left: 241px; background: url(../images/help_tips_stage2_button_36.png); }
.help_tips .close_button{position: absolute; width: 76px; height: 88px; top: 443px; left: 627px; background: url(../images/help_tips_close_button_5.png); }
/*.role_tips START*/
.role_tips{}
.role_tips .pic{position: absolute; width: 660px; height: 857px; top: 151px; left: 45px; background: url(../images/stage2_role_pic_56.png?v=1); }
.role_tips .close_button{position: absolute; width: 43px; height: 43px; top: 165px; left: 643px; background: url(../images/role_tips_close_button_70.png); }
/*.stage2 START*/
.stage2{}
.stage2 .bg{position: absolute; width: 750px; height: 1448px; top: 0px; left: 0px; background: url(../images/stage2_bg_82.png); }
.stage2 .title{position: absolute; width: 605px; height: 252px; top: 116px; left: 72px; background: url(../images/stage2_title_64.png); }
.stage2 .role_pic{position: absolute; width: 660px; height: 857px; top: 417px; left: 45px; background: url(../images/stage2_role_pic_56.png?v=1); }
.stage2 .stage1_button{position: absolute; width: 74px; height: 85px; top: 1314px; left: 45px; background: url(../images/stage2_stage1_button_36.png); }
.stage2 .link_button{position: absolute; width: 272px; height: 80px; top: 1315px; left: 242px; background: url(../images/stage2_link_button_96.png); }
.stage2 .logo{position: absolute; width: 367px; height: 81px; top: 13px; left: 192px; background: url(../images/stage2_logo_72.png); }
/*.stage1 START*/
.stage1{position: relative; min-height: 1448px; }
.stage1 .bg{position: absolute; width: 750px; height: 1448px; top: 0px; left: 0px; background: url(../images/stage1_bg_36.png); }
.stage1 .title{position: absolute; width: 542px; height: 227px; top: 82px; left: 121px; background: url(../images/stage1_title_36.png); }
/*.stage1 .friends_list START*/
.stage1 .friends_list{position: relative; width: 750px; margin-top: 1280px; display: -webkit-flex; -webkit-flex-direction: row; -webkit-justify-content: flex-start; -webkit-flex-wrap: wrap; }
/*.stage1 .friends_list .user START*/
.stage1 .friends_list .user{position: relative; width: 207px; height: 239px; margin: 12px 20px; }
.stage1 .friends_list .user .user_bg{position: absolute; width: 207px; height: 239px; top: 0px; left: 0px; background: url(../images/stage1_friends_list_user_user_bg_60.png); }
.stage1 .friends_list .user .face{position: absolute; width: 82px; height: 82px; top: 14px; left: 63px; -webkit-border-radius: 50%; }
.stage1 .friends_list .user .name_txt{position: absolute; width: 166px; top: 98px; left: 22px; color: RGB(255,255,255); font-size: 24px; line-height: 30px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage1 .friends_list .user .help_txt{position: absolute; width: 207px; top: 136px; left: 0; color: RGB(117,58,202); font-size: 24px; line-height: 30px; text-align: center; }
/*.stage1 .user_mc START*/
.stage1 .user_mc{position: absolute; width: 546px; height: 82px; top: 300px; left: 97px;}
.stage1 .user_mc .user_bg{position: absolute; width: 546px; height: 82px; top: 0px; left: 0px; background: url(../images/stage1_user_mc_user_bg_48.png); }
.stage1 .user_mc .face{position: absolute; width: 73px; height: 73px; top: 5px; left: 5px; -webkit-border-radius: 50%; }
.stage1 .user_mc .name_txt{position: absolute; width: 370px; top: 26px; left: 90px; color: RGB(255,255,255); font-size: 24px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*.stage1 .line_mc START*/
.stage1 .line_mc{position: absolute; width: 633px; height: 218px; top: 925px; left: 56px;}
.stage1 .line_mc .line_bg{position: absolute; width: 658px; height: 240px; top: 0px; left: -20px; background: url(../images/stage1_line_mc_line_bg_17.png); }
.stage1 .line_mc .got_pic_1{position: absolute; width: 57px; height: 30px; top: 55px; left: 191px; background: url(../images/stage1_line_mc_got_pic_1_93.png); }
.stage1 .line_mc .got_pic_2{position: absolute; width: 57px; height: 30px; top: 55px; left: 339px; background: url(../images/stage1_line_mc_got_pic_1_93.png); }
.stage1 .line_mc .got_pic_3{position: absolute; width: 57px; height: 30px; top: 55px; left: 569px; background: url(../images/stage1_line_mc_got_pic_1_93.png); }
.stage1 .line_mc .line{position: absolute; width: 483px; height: 31px; top: 131px; left: 110px; background: url(../images/stage1_line_mc_line_35.png); }
/*.stage1 .arrow_mc START*/
.stage1 .arrow_mc{position: absolute; width: 200px; height: 85px; top: 1180px; left: 275px;}
.stage1 .arrow_mc .arrow{position: absolute; width: 52px; height: 53px; top: 32px; left: 74px; background: url(../images/stage1_arrow_mc_arrow_12.png); }
.stage1 .arrow_mc .help_txt{position: absolute; width: 200px; height: 33px; top: 0px; left: 0px; background: url(../images/stage1_arrow_mc_help_txt_16.png); }
/*.stage1 .banners START*/
.stage1 .banners{position: absolute; width: 468px; height: 477px; top: 360px; left: 145px;}
/*.stage1 .banners .card3 START*/
.stage1 .banners .card{position: absolute; width: 468px; height: 477px; top: 0px; left: 0px; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; -webkit-transform: translate3d(0,0,0) scale(1); opacity: 1; }
.stage1 .banners .card .card_bg{position: absolute; width: 468px; height: 477px; top: 0px; left: 0px; background: url(../images/stage1_banners_card3_card_bg_32.png); }
.stage1 .banners .card .pic{position: absolute; width: 320px; height: 395px; top: 76px; left: 74px; object-fit: cover; overflow: hidden;}
.stage1 .banners .card .top{position: absolute; width: 325px; height: 451px; top: 20px; left: 73px; background: url(../images/stage1_banners_card3_top_91.png); }
.stage1 .banners .card .detail_txt{position: absolute; width: 300px; text-align: center; top: 408px; left: 84px; color: RGB(224,227,238); font-size: 24px; line-height: 32px; }
.stage1 .banners .card .name_txt{position: absolute; width: 320px; text-align: center; top: 37px; left: 74px; color: RGB(255,255,255); font-size: 26px; line-height: 26px; }
.stage1 .banners .card.current{-webkit-transform: translate3d(0,0,0) scale(1); opacity: 1; z-index: 1; }
.stage1 .banners .card.left{-webkit-transform: translate3d(-200px,0,0) scale(0.8); opacity: 0.6; z-index: 0; }
.stage1 .banners .card.right{-webkit-transform: translate3d(200px,0,0) scale(0.8); opacity: 0.6; z-index: 0; }
.stage1 .banners .card .shadow{position: absolute; width: 677px; height: 366px; background: url(../images/shadow.png); top: 62px; left: -110px; display: none; }
.stage1 .banners .card.current .shadow{display: block; -webkit-animation: zoomIn 0.5s 1 ease-in-out; -webkit-transform-origin: center; }
/*.stage1 .help_button START*/
.stage1 .help_button{position: absolute; width: 243px; height: 90px; top: 840px; left: 254px; z-index: 1; }
.stage1 .help_button .help_button_bg{position: absolute; width: 243px; height: 90px; top: 0px; left: 0px; background: url(../images/stage1_help_button_help_button_bg_89.png); }
.stage1 .help_button .count_txt{position: absolute; width: 148px; top: 18px; left: 75px; color: RGB(95,36,150); font-size: 32px; line-height: 54px; text-align: center; }
.stage1 .help_button .count_txt .big{font-size: 34px; }
.stage1 .add_pic{position: absolute; width: 123px; height: 47px; top: 832px; left: 303px; background: url(../images/stage1_add_pic_20.png); -webkit-animation: fadeOutUp 1s 1 ease-in-out; z-index: 1; }
.stage1 .right_button{position: absolute; width: 40px; height: 101px; top: 575px; left: 640px; background: url(../images/stage1_right_button_39.png); opacity: 0.8; z-index: 1; }
.stage1 .left_button{position: absolute; width: 40px; height: 101px; top: 575px; left: 70px; background: url(../images/stage1_left_button_40.png); opacity: 0.8; z-index: 1; }
.stage1 .stage2_button2{position: absolute; width: 76px; height: 214px; top: 825px; left: 690px; background: url(../images/stage1_stage2_button2_13.png); z-index: 1; }
.stage1 .stage2_button{position: absolute; width: 238px; height: 68px; top: 1195px; left: 256px; background: url(../images/stage1_stage2_button_10.png); z-index: 1; }
.stage1 .logo{position: absolute; width: 367px; height: 81px; top: 15px; left: 18px; background: url(../images/stage2_logo_72.png); }
.stage1 .role_tips_button{position: absolute; width: 179px; height: 68px; top: 20px; left: 551px; background: url(../images/stage1_role_tips_button_5.png); z-index: 1; }