*, legend, td, th {
  padding: 0
}
*, img, legend {
  border: 0
}
*, hr {
  box-sizing: content-box
}
*, body {
  margin: 0
}
button, select {
  text-transform: none
}
a, a:hover {
  text-decoration: none
}
a, label[for] {
  cursor: pointer
}
a:active, a:focus, a:hover {
  outline: 0
}
ul {
  list-style: none;
}
body {
  font: 16px/2 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  max-width: 320px;
  margin: 0 auto;
  position: relative;
  background: #000;    overflow: hidden;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block
}
[hidden], template {
  display: none
}
a {
  background-color: transparent
}
#pageContain {
  max-width: 320px;
  margin: 0 auto;
  position: relative;
}
img {
  max-width: 100%;
}
.page {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 320px;
  height: 480px!important;
  overflow: hidden;
}
.contain {
  width: 100%;
  height: 100%;
  display: none;
}
.current .contain, .slide .contain {
  display: block;
}
.current {
  display: block;
  z-index: 1;
}
.slide {
  display: block;
  z-index: 2;
}
.swipe {
  display: block;
  z-index: 3;
  transition-duration: 0ms !important;
  -webkit-transition-duration: 0ms !important;
}
.toptxt {
  position: absolute;
  right: 25px;
  top: 38px;
  color: #fff;
  z-index: 999;
  font-size: 22px;
}
.toptxt img {
  margin-left: 10px;
}
.page1 {
  background: #000 url(../images/dra2/p1-1-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page2 {
  background: #000 url(../images/dra2/p2-bg2.jpg?v3) no-repeat 0 0;
  background-size: cover;
}
.page2-1 {
  background: #000 url(../images/dra2/p2-bg.jpg?v3) no-repeat 0 0;
  background-size: cover;
}
.page3 {
  background: #000 url(../images/dra/p3-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page4 {
  background: #000 url(../images/dra/p4-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page5 {
  background: #000 url(../images/dra/p5-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page6 {
  background: #000 url(../images/dra/p6-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page7 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page8 {
  background: #000 url(../images/dra/p8-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page9 {
  background: #000 url(../images/dra/p9-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page10 {
  background: #000 url(../images/dra/p10-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page11 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page12 {
  background: #000 url(../images/dra/p12-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page13 {
  background: #000 url(../images/dra/p13-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page14 {
  background: #000 url(../images/dra/p9-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page14-1 {
  background: #000 url(../images/dra/p14-1-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page14-2 {
  background: #000 url(../images/dra/p14-2-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page15 {
  background: #000 url(../images/dra/p15-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page16 {
  background: #000 url(../images/dra/p16-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page17 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page18 {
  background: #000 url(../images/dra/p18-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page19 {
  background: #000 url(../images/dra/p19-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page20 {
  background: #000 url(../images/dra/p20-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page21 {
  background: #000 url(../images/dra/p21-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page22 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page23 {
  background: #000 url(../images/dra/p23-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page24 {
  background: #000 url(../images/dra/p24-bg.jpg?v2) no-repeat 0 0;
  background-size: cover;
}
.page25 {
  background: #000 url(../images/dra/p9-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page25-1, .page25-2 {
  background: #000 url(../images/dra/p23-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page26 {
  background: #000 url(../images/dra/p26-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page27 {
  background: #000 url(../images/dra/p27-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page28 {
  background: #000 url(../images/dra/p28-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page29 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page30 {
  background: #000 url(../images/dra/p30-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page31 {
  background: #000 url(../images/dra/p31-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page32 {
  background: #000 url(../images/dra/p9-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page32-1, .page32-2 {
  background: #000 url(../images/dra/p32-1-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page33 {
  background: #000 url(../images/dra/p33-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page34 {
  background: #000 url(../images/dra/p34-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page35 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page36 {
  background: #000 url(../images/dra/p36-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page37 {
  background: #000 url(../images/dra/p37-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page38 {
  background: #000 url(../images/dra/p7-bg.jpg?1) no-repeat 0 0;
  background-size: cover;
}
.page39 {
  background: #000 url(../images/dra/p39-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page40 {
  background: #000 url(../images/dra/p40-bg.jpg) no-repeat 0 0;
  background-size: cover;
}
.page41 {
  background: #000 url(../images/dra/p41-bg.jpg?v3) no-repeat 0 0;
  background-size: cover;
}
.txt {
  margin-top: 20%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  text-indent: -9999px;
}
.logo {
  position: absolute;
  z-index: 99;
  left: 5%;
  top: 5%;
  -webkit-animation: dragTop .7s ease-in-out 1s both;
  animation: dragTop .7s ease-in-out 1s both;
}
.p1-1-nc {
  -webkit-animation: fadeIn .9s ease 0.56s both;
  animation: fadeIn .9s ease 0.56s both;
}
.p1-1-nc, .p1-2-nc, .p1-3-nc {
  position: absolute;
  bottom: 0;
  left: 0;
}
.start {
  position: absolute;
  z-index: 99;
  left: 50%;
  margin-left: -18px;
  bottom: 50px;
  -webkit-animation: start 1.5s infinite ease-in-out;
  animation: start 1.5s infinite ease-in-out;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  -ms-transform-origin: center center !important;
}
 @-webkit-keyframes start {
 0%, 30% {
 opacity: 0;
 -webkit-transform: rotate(0deg) translate(0, -10px);
}
 60% {
 opacity: 1;
 -webkit-transform: rotate(0deg) translate(0, 0);
}
 100% {
 opacity: 0;
 -webkit-transform: rotate(0deg) translate(0, 5px);
}
}
 @keyframes start {
 0%, 30% {
 opacity: 0;
 transform: rotate(0deg) translate(0, -10px);
}
 60% {
 opacity: 1;
 transform: rotate(0deg) translate(0, 0);
}
 100% {
 opacity: 0;
 transform: rotate(0deg) translate(0, 5px);
}
}
.fb-share {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -120px;
  z-index: 999;
  margin-left: -178px;
  -webkit-animation: dragBottomSpan .9s ease 0.5s both;
  animation: dragBottomSpan .9s ease 0.5s both;
}
#audio {
  top: -50px;
  position: absolute;
}
.page-text {
    background: url(../images/dra/text-bg.png) no-repeat 0 0;
    color: #fff;
    font-size: 14px;
    max-width: 570px;
    margin: 0 auto;
    margin-top: 116%;
    padding: 10px 10px 10px 13px;
    height: 86px;
    background-size: 100%;
    -webkit-animation: fadeIn .9s ease 0.56s both;
    animation: fadeIn .9s ease 0.56s both;
  position: relative;
    line-height: 1.6;
}
#typed6 { 
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  white-space: pre;letter-spacing: 3px;
}
.wztx {
      text-align: center;
    margin-top: 60%;
}

.typed-cursor{
          opacity: 1;
          animation: typedjsBlink 0.7s infinite;
          -webkit-animation: typedjsBlink 0.7s infinite;
                  animation: typedjsBlink 0.7s infinite;
          color: #fff;
    font-size: 30px;
    margin-left: 5px;
        }
        @keyframes typedjsBlink{
          50% { opacity: 0.0; }
        }
        @-webkit-keyframes typedjsBlink{
          0% { opacity: 1; }
          50% { opacity: 0.0; }
          100% { opacity: 1; }
        }
      
        .typed-fade-out{
          opacity: 0;
          transition: opacity .25s;
          -webkit-animation: 0;
                  animation: 0;
        }
      
.page14-1 .page-text {
  line-height: 1.5;
}
.text20 {
  opacity: .5;
  -webkit-animation: none;
  animation: none;
}
.page-text-step {
  background: url(../images/dra/text-step-bg.png) no-repeat 0 0;
  color: #fff;
  font-size: 20px;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 70%;
  padding: 8px 12px;
  min-height: 100px;
  background-size: 100%;
  -webkit-animation: dragBottomSpan .9s ease 0.5s both;
  animation: dragBottomSpan .9s ease 0.5s both;
  display: block;
}
.text-step2 {
  margin-top: 13%;
}
.page-text-step span.stp1 {
  color: #feb400;
  font-size: 24px;
  line-height: 1;
}
.page-text-step span.stp2 {
  color: #ffff00;
  font-size: 24px;
  line-height: 1;
}
.page-text span.font-24 {
  font-size: 18px;
  -webkit-animation-delay: 1.56s;
  animation-delay: 1.56s;
}

.page-text span.font-14 {
  -webkit-animation-delay: 2.35s;
  animation-delay: 2.35s;
}
.page-text span {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-animation: scaleRight .8s ease both;
  animation: scaleRight .8s ease both;
}
.page-text span.colorcs {
  color: #feb400;
}
.lin-17 {
  line-height: 1.7;
}
@-webkit-keyframes ajax-loader-rotate {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes ajax-loader-rotate {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
@keyframes ajax-loader-rotate {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
@keyframes lambShine {
0% {
opacity:0
}
30% {
opacity:1
}
50% {
opacity:.3
}
80% {
opacity:.7
}
100% {
opacity:1
}
}
@-webkit-keyframes lambShine {
0% {
opacity:0
}
20% {
opacity:1
}
50% {
opacity:.1
}
100% {
opacity:1
}
}
@keyframes TV {
0% {
transform:scale(0)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes TV {
0% {
-webkit-transform:scale(0)
}
100% {
-webkit-transform:scale(1)
}
}
@keyframes RubberBand {
0% {
opacity:0;
transform:scale(1)
}
30% {
opacity:1;
transform:scaleX(1.25) scaleY(0.75)
}
40% {
transform:scaleX(0.75) scaleY(1.25)
}
60% {
transform:scaleX(1.15) scaleY(0.85)
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-webkit-keyframes RubberBand {
0% {
opacity:0;
-webkit-transform:scale(1)
}
30% {
opacity:1;
-webkit-transform:scaleX(1.25) scaleY(0.75)
}
40% {
-webkit-transform:scaleX(0.75) scaleY(1.25)
}
60% {
-webkit-transform:scaleX(1.15) scaleY(0.85)
}
100% {
-webkit-transform:scale(1)
}
}
@keyframes bottomTitleIn {
0% {
opacity:0;
transform:translateY(130px)
}
100% {
opacity:1;
transform:translateY(0px)
}
}
@-webkit-keyframes bottomTitleIn {
0% {
opacity:0;
-webkit-transform:translateY(130px)
}
100% {
opacity:1;
-webkit-transform:translateY(0px)
}
}
@keyframes flag {
0% {
transform:translateY(80%);
opacity:0
}
20% {
opacity:1
}
100% {
transform:translateY(0%)
}
}
@-webkit-keyframes flag {
0% {
-webkit-transform:translateY(80%);
opacity:0
}
20% {
opacity:1
}
100% {
-webkit-transform:translateY(0%)
}
}
@keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes dragTop {
0% {
opacity:0;
transform:translateY(-70px)
}
60% {
opacity:1;
transform:translateY(20px)
}
90% {
transform:translateY(-5px)
}
97% {
transform:translateY(-1px)
}
100% {
transform:translateY(0px)
}
}
@-webkit-keyframes dragTop {
0% {
opacity:0;
-webkit-transform:translateY(-70px)
}
60% {
opacity:1;
-webkit-transform:translateY(20px)
}
90% {
-webkit-transform:translateY(-5px)
}
97% {
-webkit-transform:translateY(-1px)
}
100% {
-webkit-transform:translateY(0px)
}
}
@keyframes dragBottom {
0% {
opacity:0;
transform:translateY(70px)
}
30% {
opacity:1
}
60% {
transform:translateY(-20px)
}
90% {
transform:translateY(5px)
}
97% {
transform:translateY(1px)
}
100% {
transform:translateY(0px)
}
}
@-webkit-keyframes dragBottom {
0% {
opacity:0;
-webkit-transform:translateY(70px)
}
30% {
opacity:1
}
60% {
-webkit-transform:translateY(-20px)
}
90% {
-webkit-transform:translateY(5px)
}
97% {
-webkit-transform:translateY(1px)
}
100% {
-webkit-transform:translateY(0px)
}
}
@keyframes dragBottomSpan {
0% {
opacity:0;
transform:translateY(30px)
}
30% {
opacity:1
}
60% {
transform:translateY(-10px)
}
90% {
transform:translateY(5px)
}
97% {
transform:translateY(1px)
}
100% {
transform:translateY(0px)
}
}
@-webkit-keyframes dragBottomSpan {
0% {
opacity:0;
-webkit-transform:translateY(30px)
}
30% {
opacity:1
}
60% {
-webkit-transform:translateY(-10px)
}
90% {
-webkit-transform:translateY(5px)
}
97% {
-webkit-transform:translateY(1px)
}
100% {
-webkit-transform:translateY(0px)
}
}
@keyframes dragRight {
0% {
opacity:0;
transform:translateX(40px)
}
30% {
opacity:1
}
60% {
transform:translateX(-10px)
}
90% {
transform:translateX(5px)
}
100% {
transform:translateX(0px)
}
}
@-webkit-keyframes dragRight {
0% {
opacity:0;
-webkit-transform:translateX(40px)
}
30% {
opacity:1
}
60% {
-webkit-transform:translateX(-10px)
}
90% {
-webkit-transform:translateX(5px)
}
100% {
-webkit-transform:translateX(0px)
}
}
@keyframes scaleRight {
0% {
opacity:0;
transform:scaleX(0)
}
30% {
opacity:1
}
60% {
transform:scaleX(1.1)
}
90% {
transform:scaleX(0.97)
}
100% {
transform:scaleX(1)
}
}
@-webkit-keyframes scaleRight {
0% {
opacity:0;
-webkit-transform:scaleX(0)
}
30% {
opacity:1
}
60% {
-webkit-transform:scaleX(1.1)
}
90% {
-webkit-transform:scaleX(0.97)
}
100% {
-webkit-transform:scaleX(1)
}
}
@keyframes scaleAll {
0% {
transform:scale(0) rotate(30deg)
}
100% {
transform:scale(1) rotate(0)
}
}
@-webkit-keyframes scaleAll {
0% {
-webkit-transform:scale(0) rotate(30deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
}
@keyframes rotateBg {
0% {
transform:rotate(-15deg)
}
100% {
transform:rotate(15deg)
}
}
@-webkit-keyframes rotateBg {
0% {
-webkit-transform:rotate(-15deg)
}
100% {
-webkit-transform:rotate(15deg)
}
}
@keyframes rotateEarth {
0% {
transform:rotate(20deg)
}
100% {
transform:rotate(-20deg)
}
}
@-webkit-keyframes rotateEarth {
0% {
-webkit-transform:rotate(20deg)
}
100% {
-webkit-transform:rotate(-20deg)
}
}
@keyframes starShine {
0% {
opacity:.1;
transform:scale(1) rotate(0)
}
33% {
opacity:1;
transform:scale(1.2) rotate(3deg)
}
66% {
opacity:.1;
transform:scale(1) rotate(0)
}
100% {
opacity:1;
transform:scale(1.2) rotate(-3deg)
}
}
@-webkit-keyframes starShine {
0% {
opacity:.1;
-webkit-transform:scale(1) rotate(0)
}
33% {
opacity:1;
-webkit-transform:scale(1.2) rotate(3deg)
}
66% {
opacity:.1;
-webkit-transform:scale(1) rotate(0)
}
100% {
opacity:1;
-webkit-transform:scale(1.2) rotate(-3deg)
}
}
@keyframes mountain {
0% {
background-position:0 0
}
100% {
background-position:1000px 0
}
}
@-webkit-keyframes mountain {
0% {
background-position:0 0
}
100% {
background-position:1000px 0
}
}
#next {
  width: 100%;
  height: 100%;
}