body{background: #f5e8c8;}

.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: 1334px; }
/*MAIN END*/
/*.help_tips START*/
.help_tips{}
.help_tips.show .bg { opacity: 0; }
/*.help_tips .mc START*/
.help_tips .mc{position: absolute; width: 632px; height: 329px; top: 428px; left: 59px;}
.help_tips .mc .pic{position: absolute; width: 632px; height: 238px; top: 0px; left: 0px; background: url(../images/msg_tips_mc_pic_81.png); }
.help_tips .mc .txt{position: absolute; width: 550px; height: 238px; text-align: center; left: 0; right: 0; margin: 0 auto; top: 0; color: RGB(204,63,62); font-size: 32px; line-height: 46px; display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; }
.help_tips .mc .close_button{position: absolute; width: 80px; height: 42px; top: 287px; left: 276px; background: url(../images/msg_tips_mc_close_button_92.png); }
/*.msg_tips START*/
.msg_tips{}
/*.msg_tips .mc START*/
.msg_tips .mc{position: absolute; width: 632px; height: 329px; top: 428px; left: 59px;}
.msg_tips .mc .pic{position: absolute; width: 632px; height: 238px; top: 0px; left: 0px; background: url(../images/msg_tips_mc_pic_81.png); }
.msg_tips .mc .txt{position: absolute; width: 550px; height: 238px; text-align: center; left: 0; right: 0; margin: 0 auto; top: 0; color: RGB(204,63,62); font-size: 32px; line-height: 46px; display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; }
.msg_tips .mc .close_button{position: absolute; width: 80px; height: 42px; top: 287px; left: 276px; background: url(../images/msg_tips_mc_close_button_92.png); }
/*.role_tips START*/
.role_tips{}
/*.role_tips .mc START*/
.role_tips .mc{position: absolute; width: 633px; height: 945px; top: 88px; left: 59px;}
.role_tips .mc .pic{position: absolute; width: 633px; height: 867px; top: 0px; left: 0px; background: url(../images/role_tips_mc_pic_72.png); }
.role_tips .mc .close_button{position: absolute; width: 80px; height: 43px; top: 902px; left: 276px; background: url(../images/role_tips_mc_close_button_48.png); }

.video_play_tips .pic{position: absolute; width: 750px; top: 400px; left: 0px; }
.video_play_tips .video{position: absolute; width: 750px; top: 0px; left: 0px; }
.video_play_tips .close_button{position: absolute; width: 50px; height: 30px; top: 40px; right: 30px; font-size: 36px; line-height: 40px; color: #fff; }

.stage1 .fire{position: absolute; width: 750px; height: 1448px; top: 0; left: 0; pointer-events: none; }

/*.stage1 START*/
.stage1{position: relative; min-height: 1334px; }
.stage1 .bg{position: absolute; width: 750px; height: 1334px; top: 0px; left: 0px; background: url(../images/stage1_bg_37.png); }
.stage1 .foot{position: relative; width: 750px; height: 132px; background: url(../images/stage1_foot_31.png); }
/*.stage1 .page5 START*/
.stage1 .page5{position: relative; width: 750px; height: 488px; }
.stage1 .page5.need_top{margin-top: 1334px; }
/*.stage1 .page5 .banners START*/
.stage1 .page5 .banners{position: absolute; width: 543px; height: 299px; top: 140px; left: 104px;}
.stage1 .page5 .banners .banner{position: absolute; width: 543px; height: 299px; top: 0px; left: 0px; -webkit-mask: url(../images/stage1_page5_banners_banner_17.png); }
.stage1 .page5 .banners .banner1{background: url(../images/banner1.png); }
.stage1 .page5 .banners .banner2{background: url(../images/banner2.png); }
.stage1 .page5 .banners .banner3{background: url(../images/banner3.png); }
.stage1 .page5 .banners .banner4{background: url(../images/banner4.png); }
.stage1 .page5 .banners .banner5{background: url(../images/banner5.png); }
.stage1 .page5 .banners .banner{-webkit-transform:translate3d(0,0,0) scale(0); -webkit-transition: -webkit-transform 0.5s,-webkit-filter 0.5s; opacity: 0; z-index: 0; }
.stage1 .page5 .banners .banner.current{-webkit-transform:translate3d(0,0,0) scale(1); -webkit-filter: brightness(100%); opacity: 1; z-index: 10; }
.stage1 .page5 .banners .banner.left{-webkit-transform:translate3d(-180px,0,0) scale(0.6); -webkit-filter: brightness(40%); opacity: 1; }
.stage1 .page5 .banners .banner.right{-webkit-transform:translate3d(180px,0,0) scale(0.6); -webkit-filter: brightness(40%); opacity: 1; }
/*.stage1 .page5 .dots START*/
.stage1 .page5 .dots{position: absolute; width: 500px; height: 29px; top: 459px; left: 0; right: 0; margin: 0 auto; display: -webkit-flex; -webkit-justify-content: center; -webkit-flex-direction: row; }
.stage1 .page5 .dots .current{position: relative; width: 29px; height: 29px; background: url(../images/stage1_page5_dots_current_85.png); margin: 0 10px; }
.stage1 .page5 .dots .normal{position: relative; width: 29px; height: 29px; background: url(../images/stage1_page5_dots_normal_21.png); margin: 0 10px; }
.stage1 .page5 .right_button{position: absolute; width: 26px; height: 27px; top: 276px; left: 669px; background: url(../images/stage1_page5_right_button_99.png); pointer-events: none; }
.stage1 .page5 .left_button{position: absolute; width: 25px; height: 27px; top: 276px; left: 57px; background: url(../images/stage1_page5_left_button_10.png); pointer-events: none; }
.stage1 .page5 .title_bg{position: absolute; width: 750px; height: 91px; top: 0px; left: 0px; background: url(../images/stage1_page4_title_bg_87.png); }
.stage1 .page5 .title{position: absolute; width: 750px; top: 25px; left: 0; text-align: center; color: RGB(204,63,62); font-size: 26px; line-height: 28px; }
/*.stage1 .page4 START*/
.stage1 .page4{position: relative; width: 750px; margin-top: 1334px; }
/*.stage1 .page4 .friends_list START*/
.stage1 .page4 .friends_list{position: relative; width: 750px; padding-top: 100px; display: -webkit-flex; -webkit-flex-direction: row; -webkit-justify-content: flex-start; -webkit-flex-wrap: wrap; }
/*.stage1 .page4 .friends_list .user START*/
.stage1 .page4 .friends_list .user{position: relative; width: 110px; height: 150px; margin: 20px 38px; }
.stage1 .page4 .friends_list .user .user_bg{position: absolute; width: 110px; height: 110px; top: 0px; left: 0px; background: url(../images/stage1_page4_friends_list_user_user_bg_41.png); }
.stage1 .page4 .friends_list .user .face{position: absolute; width: 98px; height: 98px; top: 6px; left: 6px; -webkit-border-radius: 50%; }
.stage1 .page4 .friends_list .user .name_txt{position: absolute; width: 110px; top: 130px; left: 0; text-align: center; color: RGB(51,51,51); font-size: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage1 .page4 .title_bg{position: absolute; width: 750px; height: 91px; top: 0px; left: 0px; background: url(../images/stage1_page4_title_bg_87.png); }
.stage1 .page4 .title_txt{position: absolute; width: 750px; top: 25px; left: 0; text-align: center; color: RGB(204,63,62); font-size: 26px; line-height: 28px; }
/*.stage1 .arrow_mc START*/
.stage1 .arrow_mc{position: absolute; width: 750px; height: 52px; top: 1253px; left: 0; }
.stage1 .arrow_mc .arrow_txt{position: absolute; width: 750px; top: 0px; left: 0; text-align: center; color: RGB(249,95,94); font-size: 26px; line-height: 26px; white-space: nowrap; }
.stage1 .arrow_mc .arrow_left{position: absolute; width: 108px; height: 23px; top: 1px; left: 115px; background: url(../images/stage1_arrow_mc_arrow_left_9.png); }
.stage1 .arrow_mc .arrow_right{position: absolute; width: 108px; height: 23px; top: 1px; right: 115px; background: url(../images/stage1_arrow_mc_arrow_left_9.png); -webkit-transform: scaleX(-1); }
.stage1 .arrow_mc .arrow{position: absolute; width: 32px; height: 17px; top: 35px; left: 0; right: 0; margin: 0 auto; background: url(../images/stage1_arrow_mc_arrow_14.png); }
/*.stage1 .page3 START*/
.stage1 .page3{position: absolute; width: 696px; height: 102px; top: 1111px; left: 29px;}
/*.stage1 .page3 .help_button START*/
.stage1 .page3 .help_button{position: absolute; width: 328px; height: 102px; top: 0px; left: 0px;}
.stage1 .page3 .help_button .button_bg{position: absolute; width: 328px; height: 102px; top: 0px; left: 0px; background: url(../images/stage1_page3_help_button_button_bg_13.png); }
.stage1 .page3 .help_button .button_txt{position: absolute; width: 328px; top: 0; left: 0; text-align: center; color: RGB(177,32,18); font-size: 26px; line-height: 92px; }
.stage1 .page3 .help_button .flower_left{position: absolute; width: 21px; height: 21px; top: 36px; left: 32px; background: url(../images/stage1_page3_help_button_flower_left_3.png); }
.stage1 .page3 .help_button .flower_right{position: absolute; width: 21px; height: 21px; top: 36px; right: 32px; background: url(../images/stage1_page3_help_button_flower_right_10.png); }
/*.stage1 .page3 .start_button START*/
.stage1 .page3 .start_button{position: absolute; width: 328px; height: 102px; top: 0px; left: 368px;}
.stage1 .page3 .start_button .button_bg{position: absolute; width: 328px; height: 102px; top: 0px; left: 0px; background: url(../images/stage1_page3_help_button_button_bg_13.png); }
.stage1 .page3 .start_button .button_txt{position: absolute; width: 328px; top: 0; left: 0; text-align: center; color: RGB(177,32,18); font-size: 26px; line-height: 92px; }
.stage1 .page3 .start_button .flower_left{position: absolute; width: 21px; height: 21px; top: 36px; left: 54px; background: url(../images/stage1_page3_help_button_flower_left_3.png); }
.stage1 .page3 .start_button .flower_right{position: absolute; width: 21px; height: 21px; top: 36px; right: 54px; background: url(../images/stage1_page3_help_button_flower_right_10.png); }
/*.stage1 .page2 START*/
.stage1 .page2{position: absolute; width: 624px; height: 313px; top: 750px; left: 63px;}
/*.stage1 .page2 .prize1 START*/
.stage1 .page2 .prize1{position: absolute; width: 535px; height: 63px; top: 246px; left: 0px;}
.stage1 .page2 .prize1 .id_pic{position: absolute; width: 61px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize1_id_pic_17.png); }
.stage1 .page2 .prize1 .prize_bg{position: absolute; width: 453px; height: 62px; top: 1px; left: 82px; background: url(../images/stage1_page2_prize1_prize_bg_72.png); }
.stage1 .page2 .prize1 .lock{position: absolute; width: 533px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize1_lock_88.png); }
/*.stage1 .page2 .prize2 START*/
.stage1 .page2 .prize2{position: absolute; width: 535px; height: 62px; top: 175px; left: 0px;}
.stage1 .page2 .prize2 .id_pic{position: absolute; width: 61px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize2_id_pic_31.png); }
.stage1 .page2 .prize2 .prize_bg{position: absolute; width: 453px; height: 62px; top: 0px; left: 82px; background: url(../images/stage1_page2_prize1_prize_bg_72.png); }
/* .stage1 .page2 .prize2 .prize_txt{position: absolute; width: 359px; top: 10px; left: 121px; color: RGB(204,63,62); font-size: 24px; line-height: 42px; white-space: nowrap; overflow: hidden; } */
.stage1 .page2 .prize2 .lock{position: absolute; width: 533px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize2_lock_20.png); }
/*.stage1 .page2 .prize3 START*/
.stage1 .page2 .prize3{position: absolute; width: 535px; height: 62px; top: 104px; left: 0px;}
.stage1 .page2 .prize3 .id_pic{position: absolute; width: 61px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize3_id_pic_21.png); }
.stage1 .page2 .prize3 .prize_bg{position: absolute; width: 453px; height: 62px; top: 0px; left: 82px; background: url(../images/stage1_page2_prize1_prize_bg_72.png); }
/* .stage1 .page2 .prize3 .prize_txt{position: absolute; width: 359px; top: 10px; left: 121px; color: RGB(204,63,62); font-size: 24px; line-height: 42px; white-space: nowrap; overflow: hidden; } */
.stage1 .page2 .prize3 .lock{position: absolute; width: 533px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize3_lock_72.png); }
/*.stage1 .page2 .prize4 START*/
.stage1 .page2 .prize4{position: absolute; width: 535px; height: 62px; top: 34px; left: 0px;}
.stage1 .page2 .prize4 .id_pic{position: absolute; width: 108px; height: 71px; top: -4px; left: -29px;  background: url(../images/icon4.png); }
.stage1 .page2 .prize4 .prize_bg{position: absolute; width: 453px; height: 62px; top: 0px; left: 82px; background: url(../images/stage1_page2_prize1_prize_bg_72.png); }
/* .stage1 .page2 .prize4 .prize_txt{position: absolute; width: 359px; top: 10px; left: 121px; color: RGB(204,63,62); font-size: 24px; line-height: 42px; white-space: nowrap; overflow: hidden; } */
.stage1 .page2 .prize4 .lock{position: absolute; width: 533px; height: 61px; top: 0px; left: 0px; background: url(../images/stage1_page2_prize4_lock_100.png); }
.stage1 .page2 .prize4 .lock .icon4{position: absolute; width: 108px; height: 71px; top: -4px; left: -29px; background: url(../images/icon4_white.png); }

.stage1 .page2 .word_mask{position: absolute; width: 360px; height: 42px; top: 10px; left: 121px; overflow: hidden; }
.stage1 .page2 .prize .prize_txt{position: absolute; top: 0; left: 0; color: RGB(204,63,62); font-size: 24px; line-height: 42px; white-space: nowrap; -webkit-transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 5s; }

/*.stage1 .page2 .line_mc START*/
.stage1 .page2 .line_mc{position: absolute; width: 68px; height: 313px; top: 0px; left: 556px;}
.stage1 .page2 .line_mc .line_bg{position: absolute; width: 24px; height: 281px; top: 32px; left: 40px; background: url(../images/stage1_page2_line_mc_line_bg_97.png); }
.stage1 .page2 .line_mc .line{position: absolute; width: 20px; height: 278px; bottom: 1px; left: 42px; background: url(../images/stage1_page2_line_mc_line_83.png); }
.stage1 .page2 .line_mc .res_txt{position: absolute; width: 48px; top: -4px; left: 30px; color: RGB(255,254,254); font-size: 28px; line-height: 28px; text-shadow: 0px 0px 10px #000; text-align: center; }
.stage1 .page2 .line_mc .dot1{position: absolute; width: 14px; height: 13px; top: 271px; left: 45px; background: url(../images/stage1_page2_line_mc_dot1_65.png); }
.stage1 .page2 .line_mc .dot2{position: absolute; width: 14px; height: 13px; top: 201px; left: 45px; background: url(../images/stage1_page2_line_mc_dot1_65.png); }
.stage1 .page2 .line_mc .dot3{position: absolute; width: 14px; height: 13px; top: 128px; left: 45px; background: url(../images/stage1_page2_line_mc_dot1_65.png); }
.stage1 .page2 .line_mc .dot4{position: absolute; width: 14px; height: 13px; top: 58px; left: 45px; background: url(../images/stage1_page2_line_mc_dot1_65.png); }
.stage1 .page2 .line_mc .count{position: absolute; width: 26px; height: 230px; top: 56px; left: 0px; background: url(../images/stage1_page2_line_mc_count_54.png); }
.stage1 .page2 .line_mc .dot_full{position: absolute; width: 14px; height: 13px; top: 58px; left: 45px; background: url(../images/stage1_page2_line_mc_dot1_65.png); }
.stage1 .page2 .line_mc .dot_empty{position: absolute; width: 14px; height: 13px; top: 128px; left: 45px; background: url(../images/stage1_page2_line_mc_dot_empty_96.png); }
/*.stage1 .page1 START*/
.stage1 .page1{position: absolute; width: 750px; height: 373px; top: 357px; left: 0px;}
/*.stage1 .page1 .video_mc START*/
.stage1 .page1 .video_mc{position: absolute; width: 518px; height: 251px; top: 122px; left: 115px;}
.stage1 .page1 .video_mc .video_demo{position: absolute; width: 499px; height: 235px; top: 8px; left: 9px; background: url(../images/stage1_page1_video_mc_video_demo_65.png); }
.stage1 .page1 .video_mc .play_button{position: absolute; width: 70px; height: 68px; top: 92px; left: 224px; background: url(../images/stage1_page1_video_mc_play_button_62.png); pointer-events: none; }
.stage1 .page1 .video_mc .video_side{position: absolute; width: 518px; height: 251px; top: 0px; left: 0px; background: url(../images/stage1_page1_video_mc_video_side_91.png); pointer-events: none; }
.stage1 .page1 .top{position: absolute; width: 750px; height: 102px; top: 0px; left: 0px; background: url(../images/stage1_page1_top_13.png); }
/*.stage1 .page1 .ring_right START*/
.stage1 .page1 .ring_right{position: absolute; width: 73px; height: 290px; top: 23px; left: 643px;}
.stage1 .page1 .ring_right .ring_end{position: absolute; width: 30px; height: 124px; top: 166px; left: 24px; background: url(../images/stage1_page1_ring_right_ring_end_93.png); }
.stage1 .page1 .ring_right .ring_pic{position: absolute; width: 73px; height: 62px; top: 62px; left: 0px; background: url(../images/stage1_page1_ring_right_ring_pic_26.png); }
.stage1 .page1 .ring_right .line{position: absolute; width: 14px; height: 176px; top: 0px; left: 29px; background: url(../images/stage1_page1_ring_right_line_79.png); }
.stage1 .page1 .ring_right.ring .ring_pic{-webkit-animation: ring 1s 3 linear both; }
.stage1 .page1 .ring_right.ring .ring_end{-webkit-animation: ring2 1s 3 linear both; }
/*.stage1 .page1 .ring_left START*/
.stage1 .page1 .ring_left{position: absolute; width: 73px; height: 290px; top: 23px; left: 32px;}
.stage1 .page1 .ring_left .ring_end{position: absolute; width: 30px; height: 124px; top: 166px; left: 24px; background: url(../images/stage1_page1_ring_right_ring_end_93.png); }
.stage1 .page1 .ring_left .ring_pic{position: absolute; width: 73px; height: 62px; top: 62px; left: 0px; background: url(../images/stage1_page1_ring_right_ring_pic_26.png); }
.stage1 .page1 .ring_left .line{position: absolute; width: 14px; height: 176px; top: 0px; left: 29px; background: url(../images/stage1_page1_ring_right_line_79.png); }
.stage1 .page1 .ring_left.ring .ring_pic{-webkit-animation: ring 1s 3 linear both; }
.stage1 .page1 .ring_left.ring .ring_end{-webkit-animation: ring2 1s 3 linear both; }
/*.stage1 .name_mc START*/
.stage1 .name_mc{position: absolute; width: 570px; height: 51px; top: 309px; left: 90px;}
.stage1 .name_mc .name_bg{position: absolute; width: 570px; height: 51px; top: 0px; left: 0px; background: url(../images/stage1_name_mc_name_bg_26.png); }
.stage1 .name_mc .name_txt{position: absolute; width: 570px; top: 0; left: 0; text-align: center; color: #333333; font-size: 24px; line-height: 51px; white-space: nowrap; }
.stage1 .slogan{position: absolute; width: 736px; height: 177px; top: 90px; left: 0; right: 0; margin: 0 auto; background: url(../images/stage1_slogan_96.png); }
/*.stage1 .time_mc START*/
.stage1 .time_mc{position: absolute; width: 476px; height: 38px; top: 256px; left: 135px;}
.stage1 .time_mc .time_bg{position: absolute; width: 476px; height: 38px; top: 0px; left: 0px; background: url(../images/stage1_time_mc_time_bg_34.png); }
.stage1 .time_mc .time_txt{position: absolute; width: 476px; font-style: italic; top: 0; left: 0; text-align: center; color: RGB(255,255,255); font-size: 24px; line-height: 38px; white-space: nowrap; }
/*.stage1 .role_button START*/
.stage1 .role_button{position: absolute; width: 232px; height: 60px; top: 15px; left: 508px;}
.stage1 .role_button .button_bg{position: absolute; width: 232px; height: 60px; top: 0px; left: 0px; background: url(../images/stage1_role_button_button_bg_8.png); }
.stage1 .role_button .button_txt{position: absolute; width: 232px; top: 0; left: 0; text-align: center; color: RGB(192,33,33); font-size: 26px; line-height: 60px; white-space: nowrap; }
.stage1 .logo{position: absolute; width: 262px; height: 82px; top: 2px; left: 0px; background: url(../images/stage1_logo_26.png); }

.red{color: #cc3f3e; }

@-webkit-keyframes ring{
	0%,50%,100%{-webkit-transform: rotate(0deg); -webkit-transform-origin-y: 0; }
    25%{-webkit-transform: rotate(10deg); -webkit-transform-origin-y: 0; }
    75%{-webkit-transform: rotate(-10deg); -webkit-transform-origin-y: 0; }
}

@-webkit-keyframes ring2{
	0%,50%,100%{-webkit-transform: rotate(0deg); -webkit-transform-origin-y: 0; }
    25%{-webkit-transform: rotate(-10deg); -webkit-transform-origin-y: 0; }
    75%{-webkit-transform: rotate(10deg); -webkit-transform-origin-y: 0; }
}