body{background: #fff; overflow: hidden;} 

.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: 1220px;}

.vr_clone{position: absolute; width: 50%; height: 100%; left: 50%; top: 0; overflow: hidden; pointer-events: none;}
.vr_clone .tips_mc.vr_left{width: 100%; overflow: hidden; }
.vr_clone .pic{-webkit-transform: translate3d(-300px,0,0) scale(0.75); }
.msg_tips.vr_left .pic{-webkit-transform: translate3d(-300px,0,0) scale(0.75); }
.vr_clone .video{-webkit-transform: translate3d(-305px,0,0) scale(0.5); }
.msg_tips.vr_left .video{-webkit-transform: translate3d(-305px,0,0) scale(0.5); }

.tips_mc.vr_left{width: 50%; overflow: hidden; }

.prize_tips .pic{position: absolute; width: 492px; height: 514px; left: 0; right: 0; margin: auto; top: 0; bottom: 0;}
.prize_tips .pic img{position: relative; width: 100%; height: 100%; }
.prize_tips .pic .close_button{position: absolute; width: 230px; height: 74px; top: 390px; left: 0; right: 0; margin: 0 auto;}

.hp2_tips .txt{position: absolute; width: 1220px; text-align: center; font-size: 42px; line-height: 50px; color: #ffffff; top: 50%; left: 0; }
/*.vr_tips START*/
.vr_tips{}
.vr_tips .title{position: absolute; width: 468px; height: 331px; top: 33px; left: 376px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_tips_title_100.png); }
.vr_tips .logo{position: absolute; width: 184px; height: 79px; top: 43px; left: 4px; background: url(http://game.163.com/weixin/gmdl_vr/images/logo.png); }
.vr_tips .txt{position: absolute; width: 469px; height: 108px; top: 393px; left: 375px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_tips_txt_26.png); }
.vr_tips .point2{position: absolute; width: 9px; height: 9px; top: 401px; left: 728px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_tips_point2_23.png); }
.vr_tips .point1{position: absolute; width: 19px; height: 19px; top: 396px; left: 723px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_tips_point1_74.png); }
.vr_tips .close_button{position: absolute; width: 157px; height: 48px; top: 529px; left: 531px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_tips_close_button_65.png); }
/*.choose_tips START*/
.choose_tips{}
.choose_tips .vr_tips_button{position: absolute; width: 153px; height: 218px; top: 287px; left: 718px; background: url(http://game.163.com/weixin/gmdl_vr/images/choose_tips_vr_tips_button_61.png); }
.choose_tips .close_button{position: absolute; width: 176px; height: 218px; top: 287px; left: 349px; background: url(http://game.163.com/weixin/gmdl_vr/images/choose_tips_close_button_58.png); }
.choose_tips .pic{position: absolute; width: 314px; height: 377px; top: 59px; left: 452px; background: url(http://game.163.com/weixin/gmdl_vr/images/choose_tips_pic_25.png); }
.choose_tips .logo{position: absolute; width: 184px; height: 79px; top: 43px; left: 4px; background: url(http://game.163.com/weixin/gmdl_vr/images/logo.png); }
/*MAIN END*/
.vr_tools{position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.vr_tools .vr_point_left{position: absolute; width: 50%; height: 100%; top: 0; left: 0; }
.vr_tools .vr_point_right{position: absolute; width: 50%; height: 100%; top: 0; left: 50%; }
.vr_tools .point{position: absolute; width: 2%; height: 2%; top: 49%; left: 49%; background: #ff0000; -webkit-border-radius: 50%; }
.vr_tools .count{position: absolute; top: 51%; left: 51%; color: #ffffff; font-size: 24px; white-space: nowrap; }
/*.wx3_tips START*/
.wx3_tips{}
.wx3_tips .pic{position: absolute; width: 475px; height: 270px; top: 46px; right: 50px; background: url(http://game.163.com/weixin/gmdl_vr/images/wx3_tips_pic_37.png); }
/*.top START*/
.top{position: absolute; width: 750px; height: 130px; top: 0px; left: 0px;}
.top .top_bg{position: absolute; width: 750px; height: 130px; top: 0px; left: 0px; background: url(http://game.163.com/weixin/gmdl_vr/images/top_top_bg_62.png); }
.top .web_button{position: absolute; width: 185px; height: 64px; top: 18px; left: 557px; background: url(http://game.163.com/weixin/gmdl_vr/images/top_web_button_74.png); }
.top .download2_button{position: absolute; width: 180px; height: 68px; top: 18px; left: 358px; background: url(http://game.163.com/weixin/gmdl_vr/images/top_download2_button_73.png); }

.word_tips{}
.word_tips .pic{position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.word_tips .word{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain; }
.word_tips .close_button{position: absolute; width: 750px; height: 15%; bottom: 0; }

.long_word_tips{}
.long_word_tips .pic{position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.long_word_tips .word_bg{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain; }
.long_word_tips .detail_box{position: absolute; width: 100%; height: 61%; top: 24%; overflow-y: scroll; overflow-x: hidden; }
.long_word_tips .word_detail{position: absolute; width: 90%; object-fit: cover; left: 5%; }
.long_word_tips .close_button{position: absolute; width: 750px; height: 15%; bottom: 0; }

.sound_play_button{position: absolute; width: 60px; height: 60px; background: url(../images/sound_play.png) no-repeat; background-size: 90%; top: 50px; right: 50px; }
.sound_pause_button{position: absolute; width: 60px; height: 60px; background: url(../images/sound_pause.png) no-repeat; background-size: 90%; top: 50px; right: 50px; }
.zl_open_button{position: absolute; width: 60px; height: 60px; background: url(../images/zl_open.png) no-repeat; background-size: 100%; top: 140px; right: 50px; }
.zl_close_button{position: absolute; width: 60px; height: 60px; background: url(../images/zl_close.png) no-repeat; background-size: 100%; top: 140px; right: 50px; }

.video_tips video{position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.video_tips .play_button{position: absolute; background: url(../images/stage4_play_button_26.png); width: 132px; height: 132px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; pointer-events: none; }
.video_tips .skip_button{position: absolute; top: 20px; right: 80px; text-decoration: underline; color: #fff; font-size: 28px; line-height: 32px; padding: 50px; }

.force_video_tips video{position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.force_video_tips .play_button{position: absolute; background: url(../images/stage4_play_button_26.png); width: 132px; height: 132px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; pointer-events: none; }
/* .force_video_tips .skip_button{position: absolute; top: 20px; right: 80px; text-decoration: underline; color: #fff; font-size: 28px; line-height: 32px; padding: 50px; } */
/*.hp_tips START*/
.hp_tips{}
.hp_tips .pic{position: absolute; width: 246px; height: 273px; top: 450px; left: 252px; background: url(http://game.163.com/weixin/gmdl_vr/images/hp_tips_pic_21.png); }
/*.stage4 START*/
.stage5{}
.stage5 .time{position: absolute; opacity: 0.01; }
.stage5 .bg{position: absolute; width: 1220px; height: 750px; left: 0; top: 0; }
.stage5 .move_tip{position: absolute; width: 245px; height: 64px; left: 0; right: 0; margin: 0 auto; top: 10px; background: url(http://game.163.com/weixin/gmdl_vr/images/move_tip.png); }
.stage5 .scale_tip{position: absolute; width: 100px; height: 64px; background: url(../images/finger.png); background-size: 100%; left: 0; right: 0; margin: 0 auto; top: 120px; -webkit-animation: scaleMove2 3s infinite; }
/* .stage5 .vr_button{position: absolute; width: 182px; height: 40px; left: 300px; bottom: 20px; background: url(http://game.163.com/weixin/gmdl_vr/images/vr_button.png); } */
/* .stage5 .panorama_button{position: absolute; width: 182px; height: 40px; left: 300px; bottom: 20px; background: url(http://game.163.com/weixin/gmdl_vr/images/panorama_button.png); } */

.stage2 .bg{position: absolute; width: 750px; height: 1500px; top: 0; left: 0; background: url(../images/bg3.jpg); background-size: 100%; }
.stage2 .p1{position: absolute; width: 240px; height: 218px; bottom: 0; right: 0; background: url(../images/p2_p1.png); -webkit-animation: fly 3s infinite ease-in-out; }
.stage2 .p2{position: absolute; width: 75px; height: 76px; top: 270px; left: 200px; background: url(../images/p2_p2.png); -webkit-animation: fly 4s infinite ease-in-out; }
.stage2 .p3{position: absolute; width: 94px; height: 321px; top: 856px; left: 0; background: url(../images/p2_p3.png); -webkit-animation: fly 5s infinite ease-in-out; }
.stage2 .p4{position: absolute; width: 147px; height: 168px; top: 40px; left: 560px; background: url(../images/p2_p4.png); -webkit-animation: fly 2s infinite ease-in-out; }
.stage2 .p5{position: absolute; width: 118px; height: 103px; top: 60px; left: 50px; background: url(../images/p2_p5.png); -webkit-animation: fly 2.5s infinite ease-in-out; }
.stage2 .p6{position: absolute; width: 53px; height: 51px; top: 60px; left: 600px; background: url(../images/p2_p6.png); -webkit-animation: fly 3.5s infinite ease-in-out; }
.stage2 .title{position: absolute; width: 647px; height: 269px; top: 100px; left: 0; right: 0; margin: 0 auto; background: url(../images/p2_title.png); -webkit-transform: scale(0.9); }
.stage2 .stage3_button{position: absolute; width: 309px; height: 91px; top: 895px; left: 0; right: 0; margin: 0 auto; background: url(../images/stage3.png); -webkit-transform: scale(0.9); }
.stage2 .stage3_button.no{background: url(../images/stage3_no.png); }
.stage2 .sit_list{position: absolute; width: 600px; top: 340px; left: 0; right: 0; margin: 0 auto; -webkit-transform: scale(0.9); display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-flex-direction: row; -webkit-justify-content: space-around; }
.stage2 .sit_list .sit{position: relative; width: 49px; height: 49px; background: url(../images/sit_empty.png); margin: 15px; }
.stage2 .sit_list .sit.full{background: url(../images/sit_full.png); }
.stage2 .sit_list .sit.choose{background: url(../images/sit_choose.png); }
.stage2 .count_mc{position: absolute; width: 692px; height: 81px; left: 0; right: 0; margin: 0 auto; top: 1020px; background: url(../images/count_bg.png); -webkit-transform: scale(0.7); }
.stage2 .count_txt{position: absolute; right: 196px; letter-spacing: 41px; font-size: 48px; color: #25207a; line-height: 81px; }

.stage1 .bg{position: absolute; width: 750px; height: 1500px; top: 0; left: 0; background: url(../images/p1.jpg); }
.stage1 .title{position: absolute; width: 634px; height: 297px; top: 220px; left: 0; right: 0; margin: 0 auto; background: url(../images/p1_title.png) }
.stage1 .city{position: absolute; width: 750px; height: 421px; top: 550px; left: 0; right: 0; margin: 0 auto; background: url(../images/p1_city.png) }
.stage1 .city_light{position: absolute; width: 750px; height: 421px; top: 550px; left: 0; right: 0; margin: 0 auto; background: url(../images/p1_city_light.png); -webkit-mask: url(../images/mask.png); -webkit-mask-size: 100%; -webkit-mask-position-x: 0px; -webkit-animation: lightMove 5s infinite linear; }
.stage1 .bg2{position: absolute; width: 750px; height: 1448px; top: 0; left: 0; background: url(../images/bg2.jpg); -webkit-animation: shine 2s infinite ease-in-out; }
.stage1 .stage2_button{position: absolute; width: 309px; height: 91px; top: 1025px; left: 0; right: 0; margin: 0 auto; background: url(../images/stage2_button.png) }
.stage1 .logo{position: absolute; width: 229px; height: 64px; left: 50px; top: 50px; background: url(../images/logo.png); }
.stage1 .stage2_button .inside{position: absolute; width: 309px; height: 91px; top: 0; left: 0; right: 0; margin: 0 auto; background: url(../images/stage2_button.png); -webkit-animation: scaleMove 2s infinite; }

.stage3 .pass{position: absolute; width: 750px; height: 1448px; top: 0; left: 0; }

.tanmu_list{position: absolute; width: 750px; height: 580px; top: 20px; left: 0; }
/*.tanmu_list .tanmu START*/
.tanmu_list .tanmu{position: absolute; display: -webkit-flex; -webkit-flex-direction: row; -webkit-justify-content: flex-start; -webkit-flex-wrap: nowrap; -webkit-transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 10s linear; }
.tanmu_list .tanmu .right{position: relative; -webkit-flex-shrink: 0; width: 27px; height: 40px; background: url(../images/stage2_tanmu_list_tanmu_right_38.png); opacity: 0.6;}
.tanmu_list .tanmu .txt{position: relative; -webkit-flex-shrink: 0; margin: 0 10px; color: RGB(255,255,255); font-size: 42px; line-height: 42px; white-space: nowrap; }
.tanmu_list .tanmu .left{position: relative; -webkit-flex-shrink: 0; width: 27px; height: 40px; background: url(../images/left.png); opacity: 0.6;}

.force_video_tips .tanmu_input{position: absolute; width: 80%; height: 60px; line-height: 60px; background: #fff; color: #000; bottom: 0; left: 0; }
.force_video_tips .send_button{position: absolute; width: 20%; height: 60px; text-align: center; line-height: 60px; background: #666666; color: #fff; font-size: 24px; bottom: 0; right: 0; }

@-webkit-keyframes scaleMove { 
	0% { -webkit-transform: scale(1); opacity: 1; }
	100% { -webkit-transform: scale(1.2); opacity: 0; }
}

@-webkit-keyframes scaleMove2 { 
	0% { -webkit-transform: scale(1); opacity: 0.8; }
	80%,100% { -webkit-transform: scale(1.5); opacity: 0.8; }
}

@-webkit-keyframes lightMove { 
	0% { -webkit-mask-position-x: 0px; }
	100% { -webkit-mask-position-x: 750px; }
}

@-webkit-keyframes shine { 
	0%,100% { -webkit-transform:translate3d(0,0,0); opacity: 0; }
	50% { -webkit-transform:translate3d(0,0,0); opacity: 0.8; }
}

@-webkit-keyframes fly { 
	0%,100% { -webkit-transform:translate3d(0,0,0); opacity: 1; }
	50% { -webkit-transform:translate3d(0,30px,0); opacity: 1; }
}