body{background: #fff;}

.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*/
.role_tips{}
.role_tips .pic{position: absolute; width: 750px; height: 1448px; top: 0; left: 0; background: url(../images/role_pic.png); }
.role_tips .txt{position: absolute; width: 650px; left: 0; right: 0; margin: 0 auto; font-size: 26px; line-height: 30px; text-align: left; color: #fff; top: 195px; }
.role_tips .txt .b{font-weight: bold; }
.role_tips .txt .c{text-align: center; }
.role_tips .close_button{position: absolute; width: 100px; height: 100px; top: 100px; right: 36px;  }
/*.game_tips START*/
.game_tips{}
/*.game_tips .game_mc START*/
.game_tips .game_mc{position: absolute; width: 602px; height: 623px; top: 395px; left: 79px;}
.game_tips .game_mc .pic{position: absolute; width: 602px; height: 623px; top: 0px; left: 0px; background: url(../images/game_tips_game_mc_pic_32.png); }
.game_tips .game_mc .txt{position: absolute; width: 650px; top: 70px; left: -25px; color: RGB(245,245,245); font-size: 26px; line-height: 42px; text-align: center; }
.game_tips .game_mc .txt p{text-align: center; }
.game_tips .game_mc .txt .b{font-weight: bold; }
.game_tips .game_mc .txt .r{color: #f54545; }
.game_tips .game_mc .txt .c{text-align: center; }
.game_tips .game_mc .txt .name{font-size: 40px; line-height: 80px; font-weight: bold; }
/*.game_tips .game_mc .logos START*/
.game_tips .game_mc .logos{position: absolute; width: 132px; height: 132px; top: 20px; left: 229px;}
.game_tips .game_mc .logos .logo{position: absolute; width: 128px; height: 128px; top: 0px; left: 0px; }
.game_tips .close_button{position: absolute; width: 141px; height: 139px; top: 403px; left: 511px; background: url(../images/game_tips_close_button_70.png); }
/*.stage1 START*/
.stage1{height: 1448px; top: 0; bottom: 0; margin: auto; }
.stage1 .get_button{position: absolute; width: 310px; height: 150px; top: 1170px; left: 50px; }
.stage1 .again_button{position: absolute; width: 310px; height: 150px; top: 1160px; right: 50px; }
.stage1 .icons_mc{position: absolute; width: 700px; top: 560px; height: 580px; left: 0; right: 0; margin: 0 auto; }
.stage1 .icons_mc .top{position: absolute; width: 389px; height: 54px; top: 0; left: 0; right: 0; margin: 0 auto; background: url(../images/top.png); }
.stage1 .icons_mc .role_button{position: absolute; width: 200px; height: 50px; line-height: 50px; color: #fff; font-size: 28px; text-align: center; left: 0; right: 0; margin: 0 auto; bottom: 0; }
.stage1 .icons_mc_2 .role_button{bottom: -25px; }
.stage1 .icons_mc_3 .role_button{bottom: -25px; }
.stage1 .icons_mc_1 .pic{position: absolute; width: 570px; height: 397px; left: 0; right: 0; margin: 0 auto; top: 88px; background: url(../images/icons1.png); }
.stage1 .icons_mc_2 .pic{position: absolute; width: 559px; height: 485px; left: 0; right: 0; margin: 0 auto; top: 70px; background: url(../images/icons2.png); }
.stage1 .icons_mc_3 .pic{position: absolute; width: 560px; height: 486px; left: 0; right: 0; margin: 0 auto; top: 70px; background: url(../images/icons3.png); }
.stage1 .icons_mc_4 .pic{position: absolute; width: 570px; height: 600px; left: 0; right: 0; margin: 0 auto; top: 25px; background: url(../images/icons4.png); -webkit-transform: scale(0.85); }
.stage1 .icons_mc_5 .pic{position: absolute; width: 581px; height: 398px; left: 0; right: 0; margin: 0 auto; top: 88px; background: url(../images/icons5.png); }
.stage1 .icons_mc .icon{position: absolute; width: 270px; height: 185px; }
.stage1 .icons_mc .icon1{top: 90px; left: 60px; }
.stage1 .icons_mc .icon2{top: 90px; left: 360px; }
.stage1 .icons_mc .icon3{top: 300px; left: 60px; }
.stage1 .icons_mc .icon4{top: 300px; left: 360px; }
.stage1 .icons_mc .icon5{top: 70px; left: 214px; height: 155px; }
.stage1 .icons_mc .icon6{top: 230px; left: 60px; height: 155px; }
.stage1 .icons_mc .icon7{top: 230px; left: 360px; height: 155px; }
.stage1 .icons_mc .icon8{top: 400px; left: 60px; height: 155px; }
.stage1 .icons_mc .icon9{top: 400px; left: 360px; height: 155px; }
.stage1 .icons_mc_4 .icon1{top: 66px; left: 60px; height: 150px; }
.stage1 .icons_mc_4 .icon2{top: 66px; left: 360px; height: 150px; }
.stage1 .icons_mc_4 .icon3{top: 225px; left: 60px; height: 150px; }
.stage1 .icons_mc_4 .icon4{top: 225px; left: 360px; height: 150px; }
.stage1 .icons_mc_4 .icon5{top: 380px; left: 60px; height: 150px; }
.stage1 .icons_mc_4 .icon6{top: 380px; left: 360px; height: 150px; }
.stage1 .movie{position: absolute; width: 750px; height: 1448px; top: 0px; left: 0px; z-index: -1; }
.stage1 .play_button{position: absolute; width: 67px; height: 67px; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: url(../images/play_button.png); -webkit-animation: scaleMove 1s infinite ease-in-out both; }
.stage1 .netease_logo{position: absolute; width: 274px; height: 63px; top: 155px; left: 50px; background: url(../images/logo.png); }
.stage1 .shake{position: absolute; width: 750px; height: 1448px; top: 0; left: 0; }
.stage1 .name_txt{position: absolute; top: 400px; color: #fff; font-size: 28px; line-height: 42px; width: 28px; right: 75px; }

@-webkit-keyframes scaleMove { 
	0%,100% { -webkit-transform:translate3d(0,0,0) scale(1.3); }
	50% { -webkit-transform:translate3d(0,0,0) scale(1.5); }
}

.bg{position: absolute; width: 750px; height: 1448px; top: 0px; left: 0px; background: url(../images/bg_65.png); }