*{margin:0;padding: 0;}
html { font-size:1em;}
html,body { width: 100%; font-family: "微软雅黑",Helvetica,sans-serif;}

html,body{
	width: 100%;
	height: 100%;
}
body{
	max-width: 640px;
	margin:0 auto;
  background:#000;
	/*overflow: hidden;*/
}


/*----------------------------------------------------------------------------------------------------*/

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:374px){html{font-size:11px}}
@media screen and (min-width:375px) and (max-width:413px){html{font-size:12px}}
@media screen and (min-width:414px) and (max-width:499px){html{font-size:13px}}
@media screen and (min-width:500px) and (max-width:549px){html{font-size:15px}}
@media screen and (min-width:550px) and (max-width:600px){html{font-size:17px}}
@media screen and (min-width:601px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:21.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:22.5px}}
@media screen and (min-width:800px){html{font-size:24px}}
@media screen and (max-height:480px){html{font-size:9px;}}

/*----------------------------------------------------------------------------------------------------*/



section{
	width: 100%;
	height: 100%;
	position: relative;
}
.p0,.p1,.p2,.p3,.p4,.p5,.p6,.p7{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
  overflow: hidden;
	/*position: relative;*/
}

.p0{
	background: url(../img/bg0.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 10;
}
.p1{
	background: url(../img/bg1.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 9;
	display:none;
}
.p1gif{
  width: 100%;
  height: 100%;
  background: url(../img/p1.gif)no-repeat center top;
  background-size:  cover;
}
.p2{
	background: url(../img/bg2.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 8;
	display: none;
}
.p2gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p2a.gif)no-repeat center top;
  background-size:  cover;
}
.p2gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p2b.gif)no-repeat center top;
  background-size:  cover;
}
.gifb{
  display: none;
}
.p3{
	background: url(../img/bg3.jpg)no-repeat center top;
	background-size:  100% 100%;
	z-index: 7;
	display: none;
}

.p3gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p3a.gif)no-repeat center top;
  background-size:  100% 100%;
}
.p3gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p3b.gif)no-repeat center top;
  background-size:  100% 100%;
}


.p4{
	background: url(../img/bg4.jpg)no-repeat center top;
	background-size:  100% 100%;
	z-index: 6;
	display: none;
}

.p4gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p4a.gif)no-repeat center top;
  background-size:  100% 100%;
}
.p4gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p4b.gif)no-repeat center top;
  background-size:  100% 100%;
}

.p5{
	background: url(../img/bg5.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 5;
	display: none;
}

.p5gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p5a.gif)no-repeat center top;
  background-size:  cover;
}
.p5gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p5b.gif)no-repeat center top;
  background-size:  cover;
}


.p6{
	background: url(../img/bg6.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 6;
	display: none;
}

.p6gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p6a.gif)no-repeat center top;
  background-size:  cover;
}
.p6gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p6b.gif)no-repeat center top;
  background-size:  cover;
}

.p7{
	background: url(../img/bg7.jpg)no-repeat center top;
	background-size:  cover;
	z-index: 6;
	display: none;
}


.p7gifa{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p7a.gif)no-repeat center top;
  background-size:  cover;
}
.p7gifb{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/p7b.gif)no-repeat center top;
  background-size:  cover;
}


.p8{
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../img/bg8.jpg)no-repeat center bottom #e6d1a6;
  background-size:  cover;
  z-index: 5;
  visibility:hidden;
  overflow: hidden;
}
.key{
  width: 100%;
  position: relative;
}
.key .texts{
  width: 100%;
}
.headimg{
    display: block;
    width: 4rem;
    height: 4rem;
   /* border: 1px solid red;*/
    border-radius: 100%;
    position: absolute;
    left: 50%;
    margin-left: -2rem;
    top: 54.4%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.name{
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0%;
  top: 74%;
  font-size: 1.8rem;
  color:#400202;
}
.name b{
  display: inline-block;
  width: auto;
  padding:1% 3%;
  border-bottom: 5px solid #d19e36;
}
.v_box{
  width: 90%;
  margin-left: 5%;
  text-align: center;
  position: relative;
}
.porster{
  width: 100%;
  position: relative;
  z-index: 3;
}
video{
  position: absolute;
  width: 33%;
  left: 50%;
  top: 0%;
  margin-left: -16.5%;
}


/*p0*/
.scales{
    width: 90%;
    position: absolute;
    left: 5%;
    top: -7%;
    animation: swing 3s infinite alternate linear;
    -webkit-animation: swing 3s infinite alternate linear;
}
.title0{
    width: 14%;
    position: absolute;
    left: 43%;
    top: 3%;
}
.moon{
    width: 86%;
    left: 7%;
    position: absolute;
    top: -5%;
}
.bird1,.bird2,.bird3,.bird4{
	position: absolute;
}
.bird1{
    width: 13%;
    left: 14%;
    bottom: 39%;
}
.bird2{
    width: 16%;
    left: 20%;
    bottom: 23%;
    transform:rotate(60deg);
	-ms-transform:rotate(60deg); 	/* IE 9 */
	-moz-transform:rotate(60deg); 	/* Firefox */
	-webkit-transform:rotate(60deg); /* Safari 和 Chrome */
	-o-transform:rotate(60deg); 	/* Opera */
}
.bird3{
    width: 25%;
    right: 21%;
    bottom: 27%;
}
.bird4{
    width: 8%;
    right: 6%;
    bottom: 19%;
    transform:rotate(-77deg);
	-ms-transform:rotate(-77deg); 	/* IE 9 */
	-moz-transform:rotate(-77deg); 	/* Firefox */
	-webkit-transform:rotate(-77deg); /* Safari 和 Chrome */
	-o-transform:rotate(-77deg); 
}




.title{
	width: 70%;
	position: absolute;
	left: 15%;
	top: 3%;
	animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}
.head{
	position: absolute;
    width: 55%;
    right: 0%;
    bottom: 1%;
}
.subject{
	display: block;
	color:#3f0205;
	font-size: 1.5rem;
	border-bottom: 5px solid #cd9851;
	position: relative;
}
.subject b{
	position: absolute;
	left: -8%;
	top: 0%;
	font-weight: normal;
}
.answer_box{
	width: 80%;
	position: absolute;
	left: 10%;
}
.one{
	bottom: 23%;
}
.two{
	bottom: 32%;
}
.three{
	bottom: 7%;
}
.four{
	bottom: 40%;
}
.five{
	bottom: 35%;
}
.six{
	bottom: 38%;
}

ol,li{
	list-style: none;
}
.oul{
	margin-top: 6%;
}
.oul li{
	color:#221107;
	font-size: 1.3rem;
	position: relative;
	margin-bottom: 12%;
}
.oul li>img{
	width:13%;
	vertical-align: middle;
	margin-right: 10px;
}
.oul li span{
    display: block;
    width: 90%;
    height: 100%;
    position: absolute;
    left: 16%;
    top: 0%;
}
.oul li span img{
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0;
}
em{
	font-style: normal;
}
.c_answer{
    position: absolute;
    top: 65%;
    left: 4%;
    font-size: 1.3rem;
}
.liactive{
	background: url(../img/sm_bg.png)no-repeat center center;
	background-size:contain;
}
.boximg{
    position: absolute;
    width: 42%;
    right: 8%;
    bottom: 5%;
}



.againbtn,.sharebtn{
  width: 40%;
  display: block;
  margin-left: 30%;
  margin-bottom: 3%;
}
.againbtn{
  margin-top: 2%;
}

.sharepage{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  left: 0%;
  top: 0%;
  background-color: rgba(0,0,0,.5);
  display: none;
}
.sharepage img{
    width: 40%;
    position: absolute;
    right: 10%;
    top: 8%;
}




/* 音乐 */
.music {
    -webkit-animation: sun 2.5s linear infinite;
    animation: sun 2.5s linear infinite;
}
@-webkit-keyframes sun{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes sun{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
.btn-music {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    z-index: 9999;
}



.shi{
  position: absolute;
    width: 42%;
    top: 16%;
    right: 15%;
  animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}
.ma{
    position: absolute;
    width: 35%;
    top: 15%;
    left: 6%;
  animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}
.cao{
    position: absolute;
    width: 30%;
    top: 47%;
    right: 0%;
  animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}
.long{
  position: absolute;
     width: 18%;
    right: 8%;
    top: 34%;
  animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}
.chuan{
  position: absolute;
    width: 52%;
    bottom: 2%;
    left: 6%;
    animation: cloud 2s infinite alternate linear;
    -webkit-animation: cloud 2s infinite alternate linear;
}









.slideinup{
	animation:slideInUp 0.6s 1 linear both;
	-webkit-animation:slideInUp 0.6s 1 linear both;
}

.slideoutup{
	animation:slideOutUp 0.6s 1 linear both;
	-webkit-animation:slideOutUp 0.6s 1 linear both;
}


.slideinright{
	animation:slideInRight 0.6s 1 linear both;
	-webkit-animation:slideInRight 0.6s 1 linear both;
}

.slideoutleft{
	animation:slideOutLeft 0.6s 1 linear both;
	-webkit-animation:slideOutLeft 0.6s 1 linear both;
}





@-webkit-keyframes cloud{
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}

	50% {
		-webkit-transform: translate3d(0, -10px, 0);	
	}
	
	100% {
		-webkit-transform: translate3d(0, 0, 0);	
	}
}
@keyframes cloud{
	0% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -10px, 0);	
	}
	
	100% {
		transform: translate3d(0, 0, 0);	
	}
}






@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}



@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}






@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  35% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }

  75% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  35% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }

  75% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}






/*loading*/



.loading{
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    z-index: 20000;

}

.loadingout{
    -webkit-animation-name:loadout;
    -webkit-animation-duration: 1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-animation-fill-mode: both;
       
}

@-webkit-keyframes loadout{
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1
    }
    
    100% {
        -webkit-transform: translate3d(0, -1000px, 0);
        opacity: 0
    }
}

#colorfulPulse {
  /*width: 100px;*/
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -40px;
}

#colorfulPulse span {
  display: inline-block;
  width: 10px;
  height: 40px;
  animation-name: scale;
  -webkit-animation-name: scale;
  -moz-animation-name: scale;
  -ms-animation-name: scale;
  -o-animation-name: scale;
  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -ms-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  margin-right: -3px;
}
#colorfulPulse div{
    color: #375d90;
    text-align: center;
}
span.item-1 {
  background: #ffea00;
}
span.item-2 {
  background: #ffea00;
}
span.item-3 {
  background: #ffea00;
}
span.item-4 {
  background: #ffea00;
}
span.item-5 {
  background: #ffea00;
}
span.item-6 {
  background: #ffea00;
}
span.item-7 {
  background: #ffea00;
}

.item-1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -ms-animation-delay: -1s;
  -o-animation-delay: -1s;
}

.item-2 {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
}

.item-3 {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
}

.item-4 {
  animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
}

.item-5 {
  animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
}

.item-6 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
}

.item-7 {
  animation-delay: -0.4s;
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
}

@-webkit-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-ms-keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes scale {
  0%, 40%, 100% {
    -moz-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -webkit-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }

  20%, 60% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}