body{ font-family: "Microsoft Yahei";}
.icon_m{ width: 63px; height: 63px; background: url(../images/play.png) 0 0 no-repeat; position: fixed; top: 20px; right: 20px; z-index: 99;}
.stop{ background-position: 0 -63px;}
.swiper-slide{ position: relative;}
.wrap{ width: 640px; height: 960px; margin: 0 auto; }
@keyframes movearr
{
0% { bottom: 20px; opacity: 0;}
100%{ bottom: 10px;opacity: 1;}
}

@-moz-keyframes movearr
{
0% { bottom: 20px; opacity: 0;}
100%{ bottom: 10px;opacity: 1;}
}

@-webkit-keyframes movearr
{
0% { bottom: 20px; opacity: 0;}
100%{ bottom: 10px;opacity: 1;}
}

@-o-keyframes movearr
{
0% { bottom: 20px; opacity: 0;}
100%{ bottom: 10px;opacity: 1;}
}
.wrap .arr{ width: 40px; height: 44px; background: url(../images/arr.png) no-repeat; position: absolute; left: 50%; margin-left: -20px; bottom: 10px; z-index: 99;
animation: movearr 1s infinite;
-moz-animation: movearr 1 sinfinite;
-webkit-animation: movearr 1s infinite;
-o-animation: movearr 1s infinite;
}

.swiper-container{ width: 100%; height: 960px;}
.page1{ width: 640px; background: url(../images/bg1.jpg) no-repeat; background-size: 100% 100%;}
.page1 .prize{ width: 240px; height: 90px; float: left;   margin-top: 200px; margin-left: 30px; position: relative; overflow: hidden;}
/*gift move*/
@keyframes move
{
0% { top: 0}
50%{ top: -84px;}
100%{ top: 0;}
}

@-moz-keyframes move
{
0% { top: 0}
50%{ top: -84px;}
100%{ top: 0;}
}

@-webkit-keyframes move
{
0% { top: 0}
50%{ top: -84px;}
100%{ top: 0;}
}

@-o-keyframes move
{
0% { top: 0}
50%{ top: -84px;}
100%{ top: 0;}
}
.prize img{ position: absolute; top: 0;
animation: move 8s infinite;
-moz-animation: move 8 sinfinite;
-webkit-animation: move 8s infinite;
-o-animation: move 8s infinite;}

.page1 .btn{ width: 439px; height: 116px; display: block; background: url(../images/page1_btn1.png) 0 0 no-repeat; margin: 0 auto; margin-top: 730px;}
.page1 .btn:active{ background-position: 0 -116px;}

.wrap{ width: 640px; position: relative;}
.page2{ width: 640px; background: url(../images/bg2.jpg) no-repeat;background-size: 100% 100%;}

@keyframes moveone
{
  0% { left: 0; opacity: 0;}
  100%{ left: 30px; opacity: 1;}
}

@-moz-keyframes moveone
{
  0% { left: 0; opacity: 0;}
  100%{ left: 30px; opacity: 1;}
}

@-webkit-keyframes moveone
{
  0% { left: 0; opacity: 0;}
  100%{ left: 30px; opacity: 1;}
}

@-o-keyframes moveone
{
  0% { left: 0; opacity: 0;}
  100%{ left: 30px; opacity: 1;}
}

.page2 .img1{ position: absolute; left: 30px; top: 30px;}
.page2.swiper-slide-active .img1{
  animation: moveone 1s ;
  -moz-animation: moveone 1s ;
  -webkit-animation: moveone 1s ;
  -o-animation: moveone 1s ;
}

@keyframes movetwo
{
  0% { left: 0;opacity: 0;}
  100%{ left: 60px; opacity: 1;}
}

@-moz-keyframes movetwo
{
  0% { left: 0;opacity: 0;}
  100%{ left: 60px; opacity: 1;}
}

@-webkit-keyframes movetwo
{
  0% { left: 0;opacity: 0;}
  100%{ left: 60px; opacity: 1;}
}

@-o-keyframes movetwo
{
  0% { left: 0;opacity: 0;}
  100%{ left: 60px; opacity: 1;}
}

.page2 .img2{ position: absolute; left: 60px;  top: 30px;}
.page2.swiper-slide-active .img2{ 
  position: absolute; 
  animation: movetwo 1s ;
  -moz-animation: movetwo 1s ;
  -webkit-animation: movetwo 1s ;
  -o-animation: movetwo 1s ;
  }
.page2 .btn{ width:126px; height: 170px; background: url(../images/video.png) no-repeat; position: absolute; top: 400px; left: 100px;}


.page3{ width: 640px; background: url(../images/bg3.jpg) no-repeat;background-size: 100% 100%;}

@keyframes movethree
{
  0% { left: 0;opacity: 0;}
  100%{ left: 65px; opacity: 1;}
}

@-moz-keyframes movethree
{
  0% { left: 0;opacity: 0;}
  100%{ left: 65px; opacity: 1;}
}

@-webkit-keyframes movethree
{
  0% { left: 0;opacity: 0;}
  100%{ left: 65px; opacity: 1;}
}

@-o-keyframes movethree
{
  0% { left: 0;opacity: 0;}
  100%{ left: 65px; opacity: 1;}
}
.page3 .img1{ position: absolute; top: 90px; left: 65px;}
.page3.swiper-slide-active .img1{ 
  animation: movethree 1s ;
  -moz-animation: movethree 1s ;
  -webkit-animation: movethree 1s ;
  -o-animation: movethree 1s ;
}

@keyframes movefour
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-moz-keyframes movefour
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-webkit-keyframes movefour
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-o-keyframes movefour
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

.page3 .img2{ position: absolute; top: 200px; left: 50px;}
.page3.swiper-slide-active .img2{ 
  animation: movefour 1s ;
  -moz-animation: movefour 1s ;
  -webkit-animation: movefour 1s ;
  -o-animation: movefour 1s ;
}

.content3{ width: 100%; float: left; margin-top: 240px;}
.content3 h3{ font: normal 40px/60px ""; color: #000; padding: 0 60px; }
.content3 p{ padding: 0 60px; font: normal 20px/30px ""; color: #333;}
.nav3{ width: 100%; height:106px; float: left; text-align: center;}
.nav3 a{ width: 143px; padding-left: 30px; height: 110px; padding-top: 40px; display:inline-block; background: url(../images/pagebg.png) 0 0 no-repeat; font: normal 24px/30px ""; color: #242424; text-align: left; text-decoration: none;}
.nav3 a b{ font: bold 32px/40px ""; color: #2f53b9;}
.nav3 a.current{ background-position: 0 -156px;}

.page4{ width: 640px; background: url(../images/bg4.jpg) no-repeat; background-size: 100% 100%;}
@keyframes movefive
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-moz-keyframes movefive
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-webkit-keyframes movefive
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}

@-o-keyframes movefive
{
  0% { left: 100px;opacity: 0;}
  100%{ left: 50px; opacity: 1;}
}


@keyframes movesix
{
  0% { left: 300px;opacity: 0;}
  100%{ left: 380px; opacity: 1;}
}

@-moz-keyframes movesix
{
  0% { left: 300px;opacity: 0;}
  100%{ left: 380px; opacity: 1;}
}

@-webkit-keyframes movesix
{
  0% { left: 300px;opacity: 0;}
  100%{ left: 380px; opacity: 1;}
}

@-o-keyframes movesix
{
  0% { left: 300px;opacity: 0;}
  100%{ left: 380px; opacity: 1;}
}
.page4 .img1{ position: absolute; top: 90px; left: 50px;}
.page4.swiper-slide-active .img1{ 
  animation: movefive 1s ;
  -moz-animation: movefive 1s ;
  -webkit-animation: movefive 1s ;
  -o-animation: movefive 1s ;
}
.page4 .img2{ position: absolute; top:160px; left: 380px;}
.page4.swiper-slide-active .img2{ 
  animation: movesix 1s ;
  -moz-animation: movesix 1s ;
  -webkit-animation: movesix 1s ;
  -o-animation: movesix 1s ;
}

.page5{ width: 640px; background: url(../images/bg5.jpg) no-repeat;background-size: 100% 100%; position: relative;}
.wrap5{ margin-top: 190px;}
.wrap5 .swiper-slide{ text-align: center; position: relative;}
.wrap5 img{	position: absolute;	bottom: 350px;left:50%;margin-left: -100px;height: 240px;transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;}
.wrap5 .swiper-slide-active img{opacity: 1;height: 500px;margin-left: -160px;}

/* page 6 */
.page6{ width: 640px; background: url(../images/bg6.jpg) no-repeat;background-size: 100% 100%; position: relative;}
.wrap6{ margin-top: 190px;}
.wrap6 .swiper-slide{ text-align: center; position: relative;}
.wrap6 img{	position: absolute;	bottom: 350px;left:50%;margin-left: -100px;height: 240px;transition:height 0.5s;-moz-transition:height 0.5s;-webkit-transition:height 0.5s;-o-transition:height 0.5s;}
.wrap6 .swiper-slide-active img{opacity: 1;height: 500px;margin-left: -160px;}

.page7{ width: 640px; background: url(../images/bg7.jpg) no-repeat;background-size: 100% 100%;}
.page7 .img1{ position: absolute; top: 70px; left: 50px;}
.page7.swiper-slide-active .img1{ 
  animation: movefive 1s ;
  -moz-animation: movefive 1s ;
  -webkit-animation: movefive 1s ;
  -o-animation: movefive 1s ;
}

.page8{ width: 640px; background: url(../images/bg8.jpg) no-repeat;background-size: 100% 100%;}
.page8 .img1{ position: absolute; top: 80px; left: 50px;}
.page8 .musicbox{ width: 100%; height: 490px; float: left; margin-top: 420px; background: url(../images/musicbg.jpg) no-repeat; position: relative;}
.page8.swiper-slide-active .img1{ 
  animation: movefive 1s ;
  -moz-animation: movefive 1s ;
  -webkit-animation: movefive 1s ;
  -o-animation: movefive 1s ;
}

.page8 .img2{ position: absolute; top: 195px; left: 250px;}

.page9{ width: 640px; background: url(../images/bg9.jpg) no-repeat; background-size: 100% 100%; position: relative; z-index: 100;}
.page9 .btn{ width: 342px; height: 89px; position: absolute; top: 460px; left: 150px; background: url(../images/btn2.png) 0 0 no-repeat;}
.page9 .btn:active{ background-position: 0 -89px;}
.page9 .prizebox{ width: 436px; height: 360px; position: absolute; top: 560px; left: 70px;  background: url(../images/box.png) 0 30px no-repeat;}

/*闪烁动画*/
@keyframes star
{
0% { opacity: 1}
50% {opacity: 0;}
100%{ opacity: 1;}
}

@-moz-keyframes star /* Firefox */
{
0% { opacity: 1}
50% {opacity: 0;}
100%{ opacity: 1;}
}

@-webkit-keyframes star /* Safari 和 Chrome */
{
0% { opacity: 1}
50% {opacity: 0;}
100%{ opacity: 1;}
}

@-o-keyframes star /* Opera */
{
0% { opacity: 1}
50% {opacity: 0;}
100%{ opacity: 1;}
}

.prizebox .star0{ width: 34px; height: 39px; position: absolute; background: url(../images/star1.png) no-repeat; top: 90px; left: 130px;
animation: star 2s infinite;
-moz-animation: star 2 sinfinite;
-webkit-animation: star 2s infinite;
-o-animation: star 2s infinite; }

.prizebox .star1{ width: 34px; height: 39px; position: absolute; background: url(../images/star1.png) no-repeat; top: 50px; left: 80px;
animation: star 3s infinite;
-moz-animation: star 3 sinfinite;
-webkit-animation: star 3s infinite;
-o-animation: star 3s infinite;	}

.prizebox .star2{ width: 90px; height: 100px; position: absolute; background: url(../images/star2.png) no-repeat; top: 160px; left: 50px;
  animation: star 2s infinite;
-moz-animation: star 2 sinfinite;
-webkit-animation: star 2s infinite;
-o-animation: star 2s infinite; }


.prizebox .star3{ width: 86px; height: 69px; position: absolute; background: url(../images/star3.png) no-repeat; top: 30px; left: 300px;
  animation: star 3s infinite;
-moz-animation: star 3 sinfinite;
-webkit-animation: star 3s infinite;
-o-animation: star 3s infinite; }

.prizebox .star4{ width: 86px; height: 69px; position: absolute; background: url(../images/star3.png) no-repeat; top: 100px; left: 275px;
  animation: star 1s infinite;
-moz-animation: star 1 sinfinite;
-webkit-animation: star 1s infinite;
-o-animation: star 1s infinite; }





.pagination1,.pagination2{
  position: absolute;
  z-index: 20;
  left: 0px;
  width: 100%;
  text-align: center;
  bottom: 120px;
}
.swiper-pagination-switch {
  display: inline-block;
  width:30px;
  height: 30px;
  border-radius: 15px;
  background: #020100;
  margin-right: 30px;
  cursor: pointer;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -ms-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  position: relative;
}
.swiper-visible-switch {
  opacity: 1;
  top: 0;
  background: #020100;
}
.swiper-active-switch {
  background: #cbcdfe;
}

.maskDiv{ width: 640px; height: 960px; background: #000; opacity: 0.3; position: fixed; left: 50%; top: 0; margin-left: -320px; z-index: 12;}
.popbox{ width: 560px; height: 510px; background: url(../images/popbg.jpg) no-repeat; position: fixed; z-index: 101; top: 50px; left: 50%; margin-left: -280px; }
.popbox h3{ font: bold 34px/50px ""; color: #786ade; float: left; margin-top: 160px; padding: 50px; padding-bottom: 40px;}
.popbox p{   float: left; clear:both; text-align: center; font: normal 25px/40px ""; color: #434343; margin-top: 20px; padding: 10px 50px; }

.popserver{ width: 600px; height: 600px; position: fixed; z-index: 101; top: 50px; left: 50%; margin-left: -300px; z-index: 101;}
.server_hd{ width: 100%; height: 80px; background: #5c4ec3; border-top-left-radius: 10px;border-top-right-radius: 10px; text-align: center; font: normal 36px/80px "Microsoft Yahei"; color: #fff;}
.server_hd span{ width: 80px; height: 80px; float: right; font: normal 40px/80px Arial; color: #fff; }
.server_cont{ height: 520px; background: #fff; position: relative;}
.input_ser{ width: 560px; height: 80px; float: left; margin-left: 20px; margin-top: 90px; border:1px solid #aaa; border-radius: 5px; padding: 5px; background: url(../images/list.jpg) 490px center no-repeat; font: normal 30px/80px "Microsoft Yahei"; color: #555; text-indent: 20px;}
.ser_list{ width: 570px; max-height: 400px; overflow-y: scroll; left: 20px; top: 172px; border: 1px solid #aaa; position: absolute; z-index: 102; background: #fff; color: #000;}
.ser_list li{ width: 100%; height: 60px; font: normal 30px/60px "Microsoft Yahei"; color: #555; text-indent: 10px;}

.input_area{width: 560px; height: 80px; float: left; margin-left: 20px; margin-top: 20px; border:1px solid #aaa; border-radius: 5px; padding: 5px; background: url(../images/list.jpg) 490px center no-repeat; font: normal 30px/80px "Microsoft Yahei"; color: #555; text-indent: 20px;}
.area_list{ width: 570px; max-height: 400px; overflow-y: scroll; left: 20px; top: 294px; border: 1px solid #aaa; position: absolute; z-index: 102; background: #fff; color: #000;}
.area_list li{ width: 100%; height: 60px; font: normal 30px/60px "Microsoft Yahei"; color: #555; text-indent: 10px;}

.getbtn{ width: 400px; height: 85px; float: left; margin-left: 100px; margin-top: 50px; background: #5c4ec3; text-align: center;font: normal 40px/85px "Microsoft Yahei"; color: #fff; text-decoration: none; border-radius: 5px;}