* { margin: 0; padding: 0;}
html,body{ margin:0; padding:0; height:100%; text-align: center;}
a{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none; color: #FFF;}

.fixHeight{ height: 200px !important;}

.logo{position: absolute; top: 0; left: 0; width: 750px; height: 57px; background: url(../images/logo.jpg); z-index: 100;}
Section{overflow: hidden; min-height: 1000px; max-height: 1224px; height: 100%;min-width:320px; width: 750px;}
@media screen and (max-height:1100px){
	.jj{transform:scale(0.8,0.8) !important; margin-bottom: -12%;}
	.title{transform:scale(0.9,0.9) !important;margin-top: -7%;}
	.btn4{transform:scale(0.8,0.8) !important;margin-bottom: -4%;}
	.rotateEdge{transform:scale(0.9,0.9) !important; margin-bottom: -7%;}
	.rotateEdgeLight{transform:scale(0.9,0.9) !important; margin-bottom: -7%;}
	.rotate{transform:scale(0.9,0.9) !important; margin-bottom: -7%;}
	.pointer{margin-bottom: -7%;}
}



#loadingSection{overflow:hidden;   margin: auto;position: relative; background: url(../images/yellowBg.jpg) bottom center;}
#mainSection{overflow:hidden;   margin: auto;position: relative; background: url(../images/homeBg.jpg) bottom center;}
#rotateSection{overflow:hidden;   margin: auto;position: relative; background: url(../images/rotateBg.jpg) bottom center;}
#prizesSection{   margin: auto;position: relative;background: url(../images/prizesBg.jpg) bottom center;}
#myPrizesSection{    margin: auto;position: relative;background: url(../images/myPrizesBg.jpg) bottom center;}
/* loading */
.loadingWord{ position: absolute;left: 255px; bottom: 376px;  width: 220px; height: 93px; background: url(../images/loadingWord.png) bottom no-repeat; }
.lj{position: absolute;left: 282px;bottom: 452px; width: 178px; height: 205px; background: url(../images/l.png); text-decoration: none;
	-webkit-animation-name: ljAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
@-webkit-keyframes ljAni{
    33%{background-position-x: 0px;}
    66%{background-position-x: -178px;}
    100%{background-position-x: -356px;}
}

#percentShow{ font-size: 40px; color: #FFF; position: absolute; bottom: 650px; left: 334px;}

/* mainSection */
.ground{ position: absolute;left: -35px; bottom: 0; z-index: 10; width: 852px; height: 287px; background: url(../images/ground.png) bottom no-repeat; background-size:100% 100% ; }
.msgBg{ position: absolute; left: 6px; bottom:36px; z-index: 12; width: 741px; height: 128px; background: url(../images/msgBg.png) no-repeat;}
.chatBg{position: absolute;right: 77px; bottom: 125px; z-index: 13; width: 379px; height: 54px; background: url(../images/chatBg.png); color:#FFF; line-height: 48px;}
.btn1{ z-index:21;position: absolute; left: 112px; bottom: 165px; width: 152px; height: 77px; background: url(../images/btn1.png); display: block;}
.btn2{position: absolute; left: 297px; bottom: 167px; width: 165px; height: 79px; background: url(../images/btn2.png) no-repeat; display: block;}
.btn3{position: absolute; left: 489px; bottom: 165px; width: 149px; height: 76px; background: url(../images/btn3.png) no-repeat; display: block;}
.plant{position: absolute; left: -72px; bottom:100px; width: 891px; height: 525px; background: url(../images/plant.png);}
.cloud1{position: absolute; left: 30px; bottom:655px; width: 152px; height: 73px; background: url(../images/cloud1.png);}
.cloud2{position: absolute; left: 502px; bottom:591px; width: 100px; height: 52px; background: url(../images/cloud2.png);}
.prizes{position: absolute; left: 73px; bottom:266px;  width: 654px; height: 432px; background: url(../images/prizes.png);}
.btn4{position: absolute;left: 189px;bottom: 244px; width: 367px; height: 221px; background: url(../images/btn41.png); background-size:200% 100% ; text-decoration: none;
	-webkit-animation-name: btn4Ani;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
.btn4 span{ color: #FFF; margin-top: 105px; margin-left: 0px; display: block; font-size:20px; }
@-webkit-keyframes btn4Ani{
    50%{background-position-x: 0px;}
    100%{background-position-x: -367px;}
}
.jj{position: absolute;left: 159px;bottom: 447px; width: 399px; height: 449px; background: url(../images/jj1.png); background-size:200% 100% ;
	-webkit-animation-name: jjAni;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}

@-webkit-keyframes jjAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -399px;}
}
.title{position: absolute;left: 121px;top: 67px; width: 559px; height: 397px; background: url(../images/title1.png); background-size:200% 100% ;	
	-webkit-animation-name: titleAni;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
@-webkit-keyframes titleAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -559px;}
}
.ray{position: absolute;left: -100px;top: 67px; width: 962px; height: 668px; background: url(../images/ray.png);}
.WinnersList{ width:560px; margin-left: 40px; height: 24px; overflow: hidden;margin-top: 66px;text-align: left;  }
.WinnersList li{color: #FFF; font-size:20px; list-style: none;}



                                   

/* popup */
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 750px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(255,249,145,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}
.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}
.md-content h4 {
	padding-top: 20px;
	padding--bottom: 10px;
}
.eventAlertTxt h4 { font-size: 26px !important;}
.eventAlertTxt p {
	font-size: 24px !important;
	line-height: 1.8em; background:url(../images/dot.png) 12px 10px no-repeat;
	padding-left: 1.6em;
}
.eventAlertTxt p.nodot {background:none;}
.md-effect-3 .md-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.importAlert{ width: 655px; height: 1162px; background:url(../images/importAlert.png); background-size:100% 100% ;}
.importAlert .md-close{ width: 100px; height: 102px; position: absolute; display: block; right: 20px; top:220px; background:url(../images/improtAlertClose.png);}
.importAlertTxt{width: 560px; height: 720px; top: 330px; left: 40px; position: absolute;}


.eventAlert{width: 749px; height: 1173px; background:url(../images/eventBg.png); background-size: 100% 100%;}
.eventAlert .md-close{ width: 100px; height: 102px; position: absolute; display: block; right: 60px; top:70px; background:url(../images/eventClose.png);}
.eventAlertTxt{width: 620px; height: 700px; padding-right: 30px;  top: 330px; left: 50px; position: absolute; overflow: hidden; text-align: left; font-size:20px;}

.eventAlert .swiper-slide{ padding-right: 40px;}
.eventAlert .swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
}
.eventAlert .swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 150;
  width: 30px;
  height: 98%;
}
.eventAlert .swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background:url(../images/scrollBg.png);
  background-size: 100% 100%;
  border-radius: 10px;
  left: 0;
  top: 0;
}
.eventAlert .swiper-scrollbar-cursor-drag {
  cursor: move;
}

.prizesAlert{width: 655px; height: 897px; background:url(../images/inputMsg.png);background-size:100% 100% ;}
.prizesAlert .md-close{ width: 100px; height: 102px; position: absolute; display: block; right: -6px; top:-20px; background:url(../images/prizesClose.png);}



/* rotateSection */
.rotateEdge{ position: absolute;left: -15px; bottom: 220px; width: 780px; height: 945px; background: url(../images/rotateEdge.png); background-size:100% 100% ; }
.rotateEdgeLight{position: absolute;left: 16px;bottom: 282px; width: 730px; height: 669px; background: url(../images/rotateEdgeLight.png);
	-webkit-animation-name: rotateEdgeLightAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
@-webkit-keyframes rotateEdgeLightAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -730px;}
}

.rotateFrontBg{ position: absolute;left: -70px; bottom: -185px; width: 867px; height: 545px; background: url(../images/rotateFrontBg.png); background-size:100% 100% ; }
.rotateTitle{ position: absolute;right: 0px; top: 64px; width: 326px; height: 243px; background: url(../images/rotateTitle.png); }
.btnAct{position: absolute;left: 183px;bottom: 50px; width: 374px; height: 221px; background: url(../images/btnAct.png); background-size:200% 100% ; display: block;
	-webkit-animation-name: btnActAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
.btnAct span{ color: #FFF; margin-top: 105px; margin-left: 0px; display: block; font-size:20px; }
@-webkit-keyframes btnActAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -374px;}
}
.btnBackRotate{position: absolute;left: 69px; bottom: 108px; width: 114px; height: 119px; background: url(../images/btnBackRotate.png); display: block;}
.rotate {position: absolute;left:35px; bottom: 229px;width: 700px;height: 700px;background: url(../images/turntable.png); background-size:100% 100% ;}
.rotate img{opacity:0; width: 100%; height: 100%;}
.pointer {left: 283px;bottom: 418px;width: 190px;height: 316px;position: absolute;background: url(../images/pointer.png);}

.btnAward{position: absolute;left: 192px;bottom: 80px;  width: 374px; height: 218px; background: url(../images/btnAward.png); background-size:200% 100% ; text-decoration: none;
	-webkit-animation-name: btnAwardAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
.btnAward span{ color: #FFF; margin-top: 110px; margin-left: -10px; display: block; font-size:22px; }
@-webkit-keyframes btnAwardAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -374px;}
}
.btnAwardW{position: absolute;top: 70px;left: 56px;  width: 260px; height: 50px; background: url(../images/btnW1.png); text-decoration: none;
	-webkit-animation-name: btnAwardWAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
.btnAwardW2{position: absolute;top: 70px;left: 56px;  width: 260px; height: 50px; background: url(../images/btnW2.png); text-decoration: none;
	-webkit-animation-name: btnAwardWAni;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
}
@-webkit-keyframes btnAwardWAni{
    50%{background-position-y: 0px;}
    100%{background-position-y: -50px;}
}
.awardAlert { background: none;}
.awardAlertTxt{ width: 750px; height: 1000px; background: none;}
.awardAlert .md-close{ width: 114px; height: 119px; position: absolute; display: block; left: 60px; top:-50px; background:url(../images/btnBackMyPrizes.png); z-index: 2;}
.awardBox{ width: 100%; height: 719px; position: absolute;}
.awardBox .prizeImg{ width: 412px; height: 410px; position: absolute;left: 173px; z-index: 1; text-align: center;}
.awardBox .awardImg{width: 422px; height: 392px; position: absolute; left:174px; bottom: 0; background:url(../images/Award0.png); background-size:100% 100% ;}
.awardBox .awardImg p{ text-align: center; margin-top: 220px; font-size: 28px; text-shadow:10px 10px 2px rgba(0,0,0,0.6);  }
/* myPrizesSection */
.btnBackMyPrizes{position: absolute;left: 36px; top: 95px; width: 114px; height: 119px; background: url(../images/btnBackMyPrizes.png); display: block;}
.myPrizesTitle{ position: absolute;left: 225px; top: 94px; width: 293px; height: 96px; background: url(../images/myPrizesTitle.png); }
.prizesTitle{ position: absolute;left: 225px; top: 94px; width: 293px; height: 96px; background: url(../images/prizesTitle.png); }
.prizesBox{ bottom: 550px;  width:100%;position: absolute; z-index: 20;}
.prizesTxtBox{ position:absolute; bottom:56px; width: 100%; }
.myPrizesTxtBox{ position:absolute; bottom:182px; width: 100%; }
.prizesTxtBox .textDiv,.myPrizesTxtBox .textDiv{
	width: 584px; height: 361px; background: #6D07F3; border-radius: 6px; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, .5); margin: auto;
	text-align: left;
	padding: 80px 20px 20px 20px;
	color: #FFF;
}
.prizesTxtBox .textDiv{ height: 490px;}
.myPrizesTxtBox .textDiv{ height: 361px;}
.prizesTxtBox .textDiv .swiper-container,.myPrizesTxtBox .textDiv .swiper-container{ width: 560px; height: 420px; padding-right: 20px;}

.prizesTxtBox .textDiv h4,.myPrizesTxtBox .textDiv h4{ font-size:26px; padding-bottom: 12px;}
.prizesTxtBox .textDiv p,.myPrizesTxtBox .textDiv p{ font-size: 24px !important; padding-bottom: 20px;}
.prizesTxtBox .textDiv table,.myPrizesTxtBox .textDiv table{width: 100%;}
table.gridtable {
	color:#FFF;
	border-width: 1px;
	border-color: #FFF;
	border-collapse: collapse;
}
table.gridtable th {
	font-weight: bold;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #FFF;

}
table.gridtable td {
	font-size: 24px !important;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #FFF;

}
.prizesBtnLayer{ position: absolute; width: 100%; bottom: 68px; z-index: 20;}
.prizesBtnLayer .prizesBtn{ width: 419px; height: 128px; display: block;  background: url(../images/btnView.png); margin: auto;}

.swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
}   
.swiper-button-next{ width: 99px; height: 110px; background: url(../images/btnNext.png); top:398px;}
.swiper-button-prev{ width: 99px; height: 110px; background: url(../images/btnPrv.png); top:398px;}
input.ip1,input.ip2,input.ip3{ width: 339px; height: 71px; background: url(../images/inputBg.png);  border: none; position: absolute; padding-left: 20px; font-size: 26px;}
input.ip1{ left: 140px; top: 180px;}
input.ip2{ left: 140px; top: 350px;}
input.ip3{ left: 140px; top: 520px;}
.prizesAlert .btnSubmit{ width: 372px; height: 128px; display: block; position: absolute; bottom: 130px; left: 140px; background: url(../images/btnSubmit.png);}
.prizesLine{ position: absolute; width: 608px; height: 44px; left:75px; bottom:610px; background: url(../images/prizesLine.png); z-index: 10;}

/* 奖品介绍页 */
#prizesSection h3,#myPrizesSection h3{ font-size: 2em; text-align: center; padding-bottom: 24px;}
#prizesSection h4,#myPrizesSection h4{}