/* CSS Document */
html, body {
      position: relative;
      height: 100%;
      overflow: hidden;
    }
body{-webkit-text-size-adjust:none;}
*{-webkit-text-size-adjust:none; font-size:12px; font-family:"微软雅黑"; margin:0; padding:0; outline:none;}
input,textarea,select{ font-size:100%;}ul{ list-style:none;}
a,span{ display:inline-block; border: medium none;display: inline-block;outline: medium none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
img{ vertical-align:top; border:none; width:100%;}
{margin:0 auto; position:relative; /*display:none;*/ }
.rel{ position:relative;}
.abs{position:absolute; }
.main{ position:relative; width:100%; height: 100%;}
.section{ position:relative; width:100%;overflow:hidden;}
img{ width:100%;}

.btn_pause{position:fixed; width:70px; top:20px; left:1130px; z-index:90;}
.btn_play{ -webkit-transform-origin:center center;transform-origin:center center;animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;}
.bg{ width: 16672px; top: 0; left: 0;}
.bg .img_bg{float: left;width: 1667px;}
.bg .img_bg:nth-child(1){ width: 1334px; }
.bg .img_bg:nth-child(10){width: 2002px;}

.box{ position: absolute; width: 100%;  height: 100%; transform: rotate(90deg); -webkit-transform: rotate(90deg);display: none;}                                                                              
.start_layer{position: fixed; width: 100%; height: 100%;}
.loading_layer{ width: 100%; height: 100%; background: #000;}
.load_cup{ display: block; width: 150px; padding: 150px 0 60px 0; margin: 0 auto;}
.loadhint{ width: 100%; text-align: center; padding: 0 0 30px 0; color: #fff; font-size: 30px;}
.loadtxt{ width: 100%; text-align: center; color: #fff; font-size: 30px; font-weight: bold;}
.hint_layer{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 99;}
.hint_bg{position: absolute; width: 100%; height: 100%; top: 0; left: 0;  background: rgba(0,0,0,.7);}
.hint_txt{ display: block; padding: 320px 0 0 0; text-align: center; color: #fff; font-size: 42px;}

.code{font-size: 17px; color: #000; top: 700px; left: 20px; z-index: 99; line-height: 18px; opacity: 0.7;}
.main .peo_con{display:none;top:26px; left:-100px;width: 750px; height: 1000px;}
.peo1{ width: 100%; height: 100%; background: url("../images/peo/peo1.png") no-repeat;}
.peo1_move .peo1{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo1_z{ width: 350px; left: 1443px; top: 96px; display: none;} 

.main .peo2_con{ /*left: 0;*/top:40px;}
.peo2{ width: 100%; height: 100%; background: url("../images/peo/peo2.png?v=2") no-repeat;}
.peo1_move .peo2{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo2_z{ width: 350px; left: 4000px; top: 96px; display: none;} 

.main .peo3_con{ /*left: 20px;*/top:40px;}
.peo3{ width: 100%; height: 100%; background: url("../images/peo/peo3.png?v=1") no-repeat;}
.peo1_move .peo3{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo3_z{ width: 583px; left: 6300px; top: 96px;display: none;} 


.main .peo4_con{/* left: 0;*/top:40px;}
.peo4{ width: 100%; height: 100%; background: url("../images/peo/peo4.png?v=1") no-repeat;}
.peo1_move .peo4{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo4_z{ width: 402px; left: 8600px; top: 96px;display: none;} 


.main .peo5_con{ /*left: 20px;*/top:40px;}
.peo5{ width: 100%; height: 100%; background: url("../images/peo/peo5.png?v=6") no-repeat;}
.peo1_move .peo5{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo5_z{ width: 331px; left: 10800px; top: 96px;display: none;} 

.main .peo6_con{ left: -500px;}
.peo6{ width: 100%; height: 100%; background: url("../images/peo/peo6.png?v=1") no-repeat;}
.peo1_move .peo6{animation: step1 1.2s steps(6) both infinite;-webkit-animation: step1 1.2s steps(6) both infinite;}
.peo6_z{ width: 335px; left: 12950px; top: 96px;} 
.peo6_z{ width: 335px; left: 13580px; top: 96px; display: none;} 
.peo7_z{ width: 341px; left: 13750px; top: 100px;} 
.peo8_z{ width: 302px; left: 13475px; top: 100px;} 

.cup{width: 170px; top: 200px; left: 400px;transform:rotate(12deg);-webkit-transform:rotate(12deg); }
.peo1_name{ width: 100px; left: 25px; top: 110px; display: none; height: 0; overflow: hidden;}
.peo1_name_show{animation: name1Show 0.6s 0s linear both; -webkit-animation: name1Show 0.6s 0s linear both; }

.page1_txt{ position: absolute; top:508px ; left: 114px; width: 812px; height: 0; overflow: hidden;}
.active .page1_txt1{animation: txtShow 1s 0.3s linear both; -webkit-animation: txtShow 1s 0.3s linear both; }
.active .page1_txt2{animation: txtShow 1s 1.3s linear both; -webkit-animation: txtShow 1s 1.3s linear both; }
.active .page1_txt3{animation: txtShow 1s 2.3s linear both; -webkit-animation: txtShow 1s 2.3s linear both; }
.active .page1_txt4{animation: txtShow 1s 3.3s linear both; -webkit-animation: txtShow 1s 3.3s linear both; }
.active .page1_txt5{animation: txtShow 1s 4.3s linear both; -webkit-animation: txtShow 1s 4.3s linear both; }
.active .page1_txt6{animation: txtShow 1s 5.3s linear both; -webkit-animation: txtShow 1s 5.3s linear both; }
.active .page1_txt7{animation: txtShow 1s 6.3s linear both; -webkit-animation: txtShow 1s 6.3s linear both; }
.active .page1_txt8{animation: txtShow 1s 7.3s linear both; -webkit-animation: txtShow 1s 7.3s linear both; }
.active .page1_txt9{animation: txtShow 1s 8.3s linear both; -webkit-animation: txtShow 1s 8.3s linear both; }
.active .page1_txt10{animation: txtShow 1s 9.3s linear both; -webkit-animation: txtShow 1s 9.3s linear both; }
.active .page1_txt11{animation: txtShow 1s 10.3s linear both; -webkit-animation: txtShow 1s 10.3s linear both; }
.active .page1_txt12{animation: txtShow 1s 11.3s linear both; -webkit-animation: txtShow 1s 11.3s linear both; }

.peo1_txt{position: absolute; width: 210px; height: 0; overflow: hidden; top: 180px; left: 900px; display: none;}
.peo1_txt1.peo1_txt_show{animation: txt2Show 2s 0s linear both; -webkit-animation: txt2Show 2s 0s linear both;}
.peo1_txt2.peo1_txt_show{animation: txt2Show 2s 2s linear both; -webkit-animation: txt2Show 2s 2s linear both;}
.peo1_txt3.peo1_txt_show{animation: txt2Show 2s 4s linear both; -webkit-animation: txt2Show 2s 4s linear both;}


.peo2_name{ width: 100px; left: 25px; top: 100px; display: none; height: 0; overflow: hidden;}
.peo2_name_show{animation: name2Show 1s 0s linear both; -webkit-animation: name2Show 1s 0s linear both; }
.peo2_txt{position: absolute; width: 182px; height: 0; overflow: hidden; top: 150px; left: 800px; display: none;}
.peo2_txt1.peo2_txt_show{animation: txt3Show 2s 0s linear both; -webkit-animation: txt3Show 2s 0s linear both;}
.peo2_txt2.peo2_txt_show{animation: txt3Show 2s 2s linear both; -webkit-animation: txt3Show 2s 2s linear both;}
.peo2_txt3.peo2_txt_show{animation: txt3Show 2s 4s linear both; -webkit-animation: txt3Show 2s 4s linear both;}
.peo2_txt4.peo2_txt_show{animation: txt3Show 2s 6s linear both; -webkit-animation: txt3Show 2s 6s linear both;}


.peo3_name{ width: 100px; left: 35px; top: 100px; display: none; height: 0; overflow: hidden;}
.peo3_name_show{animation: name2Show 1s 0s linear both; -webkit-animation: name2Show 1s 0s linear both; }
.peo3_txt{position: absolute; width: 253px; height: 0; overflow: hidden; top: 180px; left: 700px; display: none;}
.peo3_txt1.peo3_txt_show{animation: txt4Show 2s 0s linear both; -webkit-animation: txt4Show 2s 0s linear both;}
.peo3_txt2.peo3_txt_show{animation: txt4Show 2s 2s linear both; -webkit-animation: txt4Show 2s 2s linear both;}
.peo3_txt3.peo3_txt_show{animation: txt4Show 2s 4s linear both; -webkit-animation: txt4Show 2s 4s linear both;}
.peo3_txt4.peo3_txt_show{animation: txt4Show 2s 6s linear both; -webkit-animation: txt4Show 2s 6s linear both;}



.peo4_name{ width: 100px; left: 25px; top: 100px; display: none; height: 0; overflow: hidden;}
.peo4_name_show{animation: name2Show 1s 0s linear both; -webkit-animation: name2Show 1s 0s linear both; }
.peo4_txt{position: absolute; width: 210px; height: 0; overflow: hidden; top: 160px; left: 750px; display: none;}
.peo4_txt1.peo4_txt_show{animation: txt4Show 1.8s 0s linear both; -webkit-animation: txt4Show 1.8s 0s linear both;}
.peo4_txt2.peo4_txt_show{animation: txt4Show 1.8s 1.8s linear both; -webkit-animation: txt4Show 1.8s 1.8s linear both;}
.peo4_txt3.peo4_txt_show{animation: txt4Show 1.8s 3.6s linear both; -webkit-animation: txt4Show 1.8s 3.6s linear both;}

.peo5_name{ width: 100px; left: 15px; top: 100px; display: none; height: 0; overflow: hidden;}
.peo5_name_show{animation: name2Show 1s 0s linear both; -webkit-animation: name2Show 1s 0s linear both; }
.peo5_txt{position: absolute; width: 280px; height: 0; overflow: hidden; top: 220px; left: 700px; display: none;}
.peo5_txt1.peo5_txt_show{animation: txt5Show 1.8s 0s linear both; -webkit-animation: txt5Show 1.8s 0s linear both;}
.peo5_txt2.peo5_txt_show{animation: txt5Show 1.8s 1.8s linear both; -webkit-animation: txt5Show 1.8s 1.8s linear both;}
.peo5_txt3.peo5_txt_show{animation: txt5Show 1.8s 3.6s linear both; -webkit-animation: txt5Show 1.8s 3.6s linear both;}
.peo5_txt4.peo5_txt_show{animation: txt5Show 1.8s 5.4s linear both; -webkit-animation: txt5Show 1.8s 5.4s linear both;}




.peo6_name{ width: 100px; left: 500px; top: 400px; display: none; height: 0; overflow: hidden; z-index: 95;}
.peo7_name{ width: 100px; left: 780px; top: 400px; display: none; height: 0; overflow: hidden; z-index: 95;}
.peo8_name{ width: 100px; left: 180px; top: 400px; display: none; height: 0; overflow: hidden; z-index: 95;}
.peo6_name_show{animation: name2Show 1s 0s linear both; -webkit-animation: name2Show 1s 0s linear both; }
.peo6_txt{position: absolute; width: 328px; height: 0; overflow: hidden; top: 180px; left: 850px; display: none;}
.peo6_txt2{left: 870px;}
.peo6_txt3{left: 875px;}
.peo6_txt4{left: 880px;}
.peo6_txt5{left: 890px;}
.peo6_txt1.peo6_txt_show{animation: txt6Show 1.7s 0s linear both; -webkit-animation: txt6Show 1.7s 0s linear both;}
.peo6_txt2.peo6_txt_show{animation: txt6Show 1.7s 1.7s linear both; -webkit-animation: txt6Show 1.7s 1.7s linear both;}
.peo6_txt3.peo6_txt_show{animation: txt6Show 1.7s 3.4s linear both; -webkit-animation: txt6Show 1.7s 3.4s linear both;}
.peo6_txt4.peo6_txt_show{animation: txt6Show 1.7s 5.1s linear both; -webkit-animation: txt6Show 1.7s 5.1s linear both;}
.peo6_txt5.peo6_txt_show{animation: txt6Show 1.7s 6.8s linear both; -webkit-animation: txt6Show 1.7s 6.8s linear both;}

.end_txt{position: absolute; width: 905px; height:0; overflow: hidden; top: 470px; left: 160px;display: none; }
.end_txt1.end_txt_show{animation: txt7Show 0.8s 0s linear both; -webkit-animation: txt7Show 0.8s 0s linear both;}
.end_txt2.end_txt_show{animation: txt7Show 0.8s 0.8s linear both; -webkit-animation: txt7Show 0.8s 0.8s linear both;}
.end_txt3.end_txt_show{animation: txt7Show 0.8s 1.6s linear both; -webkit-animation: txt7Show 0.8s 1.6s linear both;}
.end_txt4.end_txt_show{animation: txt7Show 0.8s 2.4s linear both; -webkit-animation: txt7Show 0.8s 2.4s linear both;}
.end_txt5.end_txt_show{animation: txt7Show 0.8s 3.2s linear both; -webkit-animation: txt7Show 0.8s 3.2s linear both;}
.end_txt6.end_txt_show{animation: txt7Show 0.8s 4s linear both; -webkit-animation: txt7Show 0.8s 4s linear both;}
.end_txt7.end_txt_show{animation: txt7Show 0.8s 4.8s linear both; -webkit-animation: txt7Show 0.8s 4.8s linear both;}
.end_txt8.end_txt_show{animation: txt7Show 0.8s 5.6s linear both; -webkit-animation: txt7Show 0.8s 5.6s linear both;}

.layer_peo{ z-index: 50; display: none; opacity: 0;}
.layer_1{ top: -50px; left: -300px; opacity: 0;}
.layer_1.layer1_show{animation: layerIn 1.6s 0s linear both; -webkit-animation: layerIn 1.6s 0s linear both;}
.layer_1.layer1_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.peo1_con.peo_out{animation: peoOut 0.4s 0.6s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo1{top: -50px; left: 150px; display: none; opacity: 0; width: 700px;}
.end_peo1.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}


.layer_2{ top: -350px; left: -200px; opacity: 0; }
.layer_2.layer2_show{animation: layerRotateIn 1.6s 0s linear both; -webkit-animation: layerRotateIn 1.6s 0s linear both;}
.layer_2.layer2_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.peo2_con.peo_out{animation: peoOut 0.4s 0.4s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo2{top: -50px; left: 150px; display: none; opacity: 0;width: 680px;}
.end_peo2.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}

.layer_3{ top: -130px; left: -130px; opacity: 0; }
.layer_3.layer3_show{animation: layerWaterIn 1.6s 0s linear both; -webkit-animation: layerWaterIn 1.6s 0s linear both;}
.layer_3.layer3_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.peo3_con.peo_out{animation: peoOut 0.4s 0.4s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo3{top: -50px; left: 180px; display: none; opacity: 0;width: 690px;}
.end_peo3.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}

.layer_4{ top: 100px; left: 200px; opacity: 0; }
.layer_4.layer4_show{animation: layerFlyIn 1.6s 0s linear both; -webkit-animation: layerFlyIn 1.6s 0s linear both;}
.layer_4.layer4_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.peo4_con.peo_out{animation: peoOut 0.4s 0.4s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo4{top: -25px; left: 150px; display: none; opacity: 0;width: 650px;}
.end_peo4.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}


.layer_5{ top: 0; left: 100px;}
.layer_5.layer5_show{animation: layerLeafIn 1.6s 0s linear both; -webkit-animation: layerLeafIn 1.6s 0s linear both;}
.layer_5.layer5_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.peo5_con.peo_out{animation: peoOut 0.4s 0.4s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo5{top: -30px; left: 150px; display: none; opacity: 0;width: 640px;}
.end_peo5.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}


.layer_6{ top: -320px; left: -120px;}
.layer_6.layer6_show{animation: layerRotateIn 1.6s 0s linear both; -webkit-animation: layerRotateIn 1.6s 0s linear both;}
.layer_6.layer6_out{animation: layerOut 0.8s 0s linear both; -webkit-animation: layerOut 0.8s 0s linear both;}
.end_peo6all{ left: 0; top: 0; width: 100%; height: 100%;}
.peo6_z.peo_out,.peo7_z.peo_out,.peo8_z.peo_out{animation: peoOut 0.4s 0.4s linear both; -webkit-animation: peoOut 0.4s 0.4s linear both;}
.end_peo6{top: 0; left: 180px; display: none; opacity: 0;width: 620px; }
.end_peo6.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}
.end_peo7{top: 0; left: -20px; display: none; opacity: 0; width: 620px;}
.end_peo7.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}
.end_peo8{top: 0; left: 360px;  display: none; opacity: 0;width: 615px;}
.end_peo8.peo_show{animation: peoShow 0.8 0s linear both; -webkit-animation: peoShow 0.8s 0s linear both;}

@media screen and (min-aspect-ratio: 13/9) { 
	.box{ bottom:none; top:-20px;transform: rotate(0deg); -webkit-transform: rotate(0deg);}
	.btn_pause{position:fixed; width:80px; top:40px; left:1220px; z-index:99;}
	.page1_txt{ top: 480px;}
}


@-webkit-keyframes layerIn {
  0% {opacity: 0;-webkit-transform: scale(0.5);}
  50% {opacity: 0.8;-webkit-transform: scale(1.2);}
  100% {opacity: 0;-webkit-transform: scale(5);}
}

@keyframes layerIn {
    0% {opacity: 0;transform: scale(0.5);}
  50% {opacity: 0.8;transform: scale(1.2);}
  100% {opacity: 0;transform: scale(5);}
}

@-webkit-keyframes layerOut {
  0% {opacity: 1;-webkit-transform: scale(1);}
  100% {opacity: 0;-webkit-transform: scale(5);}
}

@keyframes layerOut {
    0% {opacity: 1;transform: scale(1);}
  100% {opacity: 0;transform: scale(5);}
}


@-webkit-keyframes layerRotateIn {
  0% {opacity: 0;-webkit-transform: scale(0.5) rotate(0deg)}
  50% {opacity: 1;-webkit-transform: scale(1) rotate(180deg);}
  100% {opacity: 0;-webkit-transform: scale(5) rotate(360deg);}
}

@keyframes layerRotateIn {
    0% {opacity: 0;transform: scale(0.5) rotate(0);}
  50% {opacity: 1;transform: scale(1) rotate(180deg);}
  100% {opacity: 0;transform: scale(5) rotate(360deg);}
}


@-webkit-keyframes layerWaterIn {
  0% {opacity: 0;-webkit-transform: scale(0.4);}
  40% {opacity: 0.7;-webkit-transform: scale(1.5);}
  100% {opacity: 0;-webkit-transform: scale(4);}
}

@keyframes layerWaterIn {
    0% {opacity: 0;transform: scale(0.4);}
  40% {opacity: 0.7;transform: scale(1.5);}
  100% {opacity: 0;transform: scale(4);}
}

@-webkit-keyframes layerFlyIn {
  0% {opacity: 0;-webkit-transform: scale(0.4) translate3d(1000px,600px,0);}
  30% {opacity: 1;-webkit-transform: scale(1.2) translate3d(0,0,0);}
  100% {opacity: 0;-webkit-transform: scale(4) translate3d(-300px,-300px,0);}
}

@keyframes layerFlyIn {
    0% {opacity: 0;transform: scale(0.4) translate3d(1000px,600px,0);}
  30% {opacity: 1;transform: scale(1.2) translate3d(0,0,0);}
  100% {opacity: 0;transform: scale(4) translate3d(-300px,-300px,0);}
}

@-webkit-keyframes layerLeafIn {
  0% {opacity: 0;-webkit-transform: scale(0.4) translate3d(1000px,-300px,0);}
  30% {opacity: 1;-webkit-transform: scale(1.2) translate3d(0,0,0);}
  100% {opacity: 0;-webkit-transform: scale(4) translate3d(-500px,800px,0);}
}

@keyframes layerLeafIn {
    0% {opacity: 0;transform: scale(0.4) translate3d(1000px,-300px,0);}
  30% {opacity: 1;transform: scale(1.2) translate3d(0,0,0);}
  100% {opacity: 0;transform: scale(4) translate3d(-500px,800px,0);}
}

@-webkit-keyframes peoOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes peoOut {
    0% {opacity: 1;}
  100% {opacity: 0;}
}
@-webkit-keyframes peoShow {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes peoShow {
    0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes runAround {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(360deg)}
}

@keyframes runAround { 
    from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}

@-webkit-keyframes txtShow {
  0% { height: 0;}
  100% {height: 189px;}
}

@keyframes txtShow {
    0% {height: 0;}
    100% { height: 189px;}
}

@-webkit-keyframes txt2Show {
  0% { height: 0;}
  100% {height: 428px;}
}

@keyframes txt2Show {
    0% {height: 0;}
    100% { height: 428px;}
}

@-webkit-keyframes txt3Show {
  0% { height: 0;}
  100% {height: 392px;}
}

@keyframes txt3Show {
    0% {height: 0;}
    100% { height: 392px;}
}


@-webkit-keyframes txt4Show {
  0% { height: 0;}
  100% {height: 369px;}
}

@keyframes txt4Show {
    0% {height: 0;}
    100% { height: 369px;}
}


@-webkit-keyframes txt5Show {
  0% { height: 0;}
  100% {height: 351px;}
}

@keyframes txt5Show {
    0% {height: 0;}
    100% { height: 351px;}
}

@-webkit-keyframes txt6Show {
  0% { height: 0;}
  100% {height: 354px;}
}

@keyframes txt6Show {
    0% {height: 0;}
    100% { height: 354px;}
}

@-webkit-keyframes txt7Show {
  0% { height: 0;}
  100% {height: 279px;}
}

@keyframes txt7Show {
    0% {height: 0;}
    100% { height: 279px;}
}

@-webkit-keyframes name1Show {
  0% { height: 0;}
  100% {height: 194px;}
}

@keyframes name1Show {
    0% {height: 0;}
    100% { height: 194px;}
}
@-webkit-keyframes name2Show {
  0% { height: 0;}
  100% {height: 235px;}
}

@keyframes name2Show {
    0% {height: 0;}
    100% { height: 235px;}
}

@keyframes step1 {
 	0% {background-position: 0 0;}
    100% {background-position: -4500px 0;}
}    
@-webkit-keyframes step1 {
    0% {background-position: 0 0;}
    100% {background-position: -4500px 0;}
}