@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background: #07285d;
	-webkit-text-size-adjust: none !important;	/* iOS禁止微信改变字号 */
}

body{
-webkit-text-size-adjust: 100% !important;	/* iOS禁止微信改变字号 */	
}


@media (max-width: 380px) {
	body{ font-size:14px; }
}

@media (max-width: 325px) {
	body{ font-size:12px; }
}

@media (min-width: 760px) {
	body{ font-size:20px; }
}

a{
	color:#000;
}

a:hover{
	text-decoration: none;
	color: #c00 !important;
}

img{
	display:block;
	max-width: 100%;
	max-height: 100%;
}

a,input,textarea{
	outline: none;
}

table{
	font-size: 1em;
}

p,li{
	overflow: hidden;
}

.photo{
	position: relative;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

.abs0{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}

.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 1;
}

.abs i,.abs0 i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.box{
	position: fixed;
	left: -30%;
	top: 0px;
	width: 160%;
	height: 100%;
	overflow: hidden;
}

.bg0{
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: url("images/bg0.png") no-repeat center center;
	background-size: contain;
}

.music{
	position: fixed;
	left: 2%;
	top: 48%;
	width: 6%;
	height: 4%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 99;
}
.music.on{ background-image: url("images/music-on.png"); }
.music.off{ background-image: url("images/music-off.png"); }
.music img{display: inline-block;}
@-ms-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-moz-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-o-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-webkit-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@keyframes music{from{ transform:rotate(-360deg); }to{ }}
.music.on{
	animation:'music' 1.5s linear 0s infinite;
	-ms-animation:music 1.5s linear 0s infinite;
	-moz-animation:music 1.5s linear 0s infinite;
	-o-animation:'music' 1.5s linear 0s infinite;
	-webkit-animation:'music' 1.5s linear 0s infinite;
}

#state1 .music{
	display: none;
}

.page{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 100%;
}

#state1 #page1{
	top: 0%;
	background: url("images/p1-bg.png") no-repeat center center;
	background-size: contain;
}

@keyframes page1-hide{
	from{ top: 0%; }
	99.99%{ top: 0%; opacity: 1; }
	to{ top: 100%; opacity: 0; }
}
#state2 #page1{
	animation:'page1-hide' 0.01s ease-in-out 0.0s forwards;
	-ms-animation:page1-hide 0.01s ease-in-out 0.0s forwards;
	-moz-animation:page1-hide 0.01s ease-in-out 0.0s forwards;
	-o-animation:'page1-hide' 0.01s ease-in-out 0.0s forwards;
	-webkit-animation:'page1-hide' 0.01s ease-in-out 0.0s forwards;
}

.p1-bg{
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-image: url("images/p1-bg.png");
}

@keyframes p1-bg{
	from{ }
	to{ opacity: 1; }
}
#state1 .p1-bg{
	animation:'p1-bg' 0.2s ease-in-out 0.0s forwards;
	-ms-animation:p1-bg 0.2s ease-in-out 0.0s forwards;
	-moz-animation:p1-bg 0.2s ease-in-out 0.0s forwards;
	-o-animation:'p1-bg' 0.2s ease-in-out 0.0s forwards;
	-webkit-animation:'p1-bg' 0.2s ease-in-out 0.0s forwards;
}

.p1-logo{
	width: 14.8%;
	height: 3.2%;
	left: 42.6%;
	top: 10.5%;
	background-image: url("images/p1-logo.png");
}

@keyframes p1-logo{
	from{ margin-top: -1em; }
	to{ opacity: 1; }
}
#state1 .p1-logo{
	animation:'p1-logo' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p1-logo 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p1-logo 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p1-logo' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p1-logo' 0.5s ease-in-out 0.3s forwards;
}

.p1-topic1{
	width: 57.7%;
	height: 15.8%;
	left: 21.1%;
	top: 18.3%;
	background-image: url("images/p1-topic1.png");
}

@keyframes p1-topic1{
	from{ transform: scale(1.4,1.4); }
	to{ opacity: 1; }
}
#state1 .p1-topic1{
	animation:'p1-topic1' 0.5s ease-in-out 0.0s forwards;
	-ms-animation:p1-topic1 0.5s ease-in-out 0.0s forwards;
	-moz-animation:p1-topic1 0.5s ease-in-out 0.0s forwards;
	-o-animation:'p1-topic1' 0.5s ease-in-out 0.0s forwards;
	-webkit-animation:'p1-topic1' 0.5s ease-in-out 0.0s forwards;
}

.p1-topic1-gif{
	width: 78.2%;
	height: 17.8%;
	left: 10.9%;
	top: 17.3%;
	text-align: center;
}

.p1-topic1-gif img{
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: auto;
}

.p1-topic2{
	width: 20%;
	height: 8.75%;
	left: 56.3%;
	top: 32%;
	background-image: url("images/p1-topic2.png");
}

@keyframes p1-topic2{
	from{ margin-top: 1em; }
	to{ opacity: 1; }
}
#state1 .p1-topic2{
	animation:'p1-topic2' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p1-topic2 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p1-topic2 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p1-topic2' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p1-topic2' 0.5s ease-in-out 0.3s forwards;
}

.p1-machine1{
	width: 66.1%;
	height: 30.9%;
	left: 9.5%;
	top: 39.5%;
	background-image: url("images/p1-machine1.png");
}

@keyframes p1-machine1{
	from{ margin-top: -1em; margin-left: -1em; }
	to{ opacity: 1; }
}
#state1 .p1-machine1{
	animation:'p1-machine1' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p1-machine1 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p1-machine1 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p1-machine1' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p1-machine1' 0.5s ease-in-out 0.6s forwards;
}

.p1-topic3,.p1-btn{
	width: 44.1%;
	height: 26.9%;
	left: 27.6%;
	top: 55.8%;
	cursor: pointer;
}

@keyframes p1-topic3{
	from{ margin-top: 1em; }
	to{ opacity: 1; }
}
#state1 .p1-topic3{
	animation:'p1-topic3' 0.5s ease-in-out 0.9s forwards;
	-ms-animation:p1-topic3 0.5s ease-in-out 0.9s forwards;
	-moz-animation:p1-topic3 0.5s ease-in-out 0.9s forwards;
	-o-animation:'p1-topic3' 0.5s ease-in-out 0.9s forwards;
	-webkit-animation:'p1-topic3' 0.5s ease-in-out 0.9s forwards;
}

.p1-topic3 i{
	background-image: url("images/p1-topic3.png");
}

@keyframes p1-topic3-move{
	from{  }
	50%{ transform: scale(0.95,0.95); }
	to{ }
}
.p1-topic3 i{
	animation:'p1-topic3-move' 2s linear 0s infinite;
	-ms-animation:p1-topic3-move 2s linear 0s infinite;
	-moz-animation:p1-topic3-move 2s linear 0s infinite;
	-o-animation:'p1-topic3-move' 2s linear 0s infinite;
	-webkit-animation:'p1-topic3-move' 2s linear 0s infinite;
}

.p1-machine2{
	width: 57.0%;
	height: 26.1%;
	left: 14.1%;
	top: 66.3%;
	background-image: url("images/p1-machine2.png");
}

@keyframes p1-machine2{
	from{ margin-top: 1em; margin-left: 1em; }
	to{ opacity: 1; }
}
#state1 .p1-machine2{
	animation:'p1-machine2' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p1-machine2 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p1-machine2 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p1-machine2' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p1-machine2' 0.5s ease-in-out 0.6s forwards;
}

.p1-bottom{
	width: 97.3%;
	height: 27.8%;
	left: 2.7%;
	bottom: 0%;
	background-image: url("images/p1-bottom.png");
}

@keyframes p1-bottom{
	from{ }
	to{ opacity: 1; }
}
#state1 .p1-bottom{
	animation:'p1-bottom' 0.2s ease-in-out 0.0s forwards;
	-ms-animation:p1-bottom 0.2s ease-in-out 0.0s forwards;
	-moz-animation:p1-bottom 0.2s ease-in-out 0.0s forwards;
	-o-animation:'p1-bottom' 0.2s ease-in-out 0.0s forwards;
	-webkit-animation:'p1-bottom' 0.2s ease-in-out 0.0s forwards;
}

.p1-mouse,
.p2-mouse{
	width: 10%;
	height: 10%;
}

.p1-mouse{
	left: 45%;
	top: 70%;
}

.p2-mouse{
	right: 20%;
	bottom: 1%;
}

.p1-mouse i,
.p2-mouse i{
	background-image: url("images/mouse.png");
}

@keyframes mouse{
	from{ }
	to{ opacity: 1; }
}
#state1 .p1-mouse{
	animation:'mouse' 0.5s ease-in-out 0.9s forwards;
	-ms-animation:mouse 0.5s ease-in-out 0.9s forwards;
	-moz-animation:mouse 0.5s ease-in-out 0.9s forwards;
	-o-animation:'mouse' 0.5s ease-in-out 0.9s forwards;
	-webkit-animation:'mouse' 0.5s ease-in-out 0.9s forwards;
}

#state2 .p2-mouse{
	animation:'mouse' 0.5s ease-in-out 1.2s forwards;
	-ms-animation:mouse 0.5s ease-in-out 1.2s forwards;
	-moz-animation:mouse 0.5s ease-in-out 1.2s forwards;
	-o-animation:'mouse' 0.5s ease-in-out 1.2s forwards;
	-webkit-animation:'mouse' 0.5s ease-in-out 1.2s forwards;
}

@keyframes mouse-move{
	from{  }
	50%{ transform: scale(1.1,1.1); }
	to{ }
}
.p1-mouse i,
.p2-mouse i{
	animation:'mouse-move' 2s linear 0s infinite;
	-ms-animation:mouse-move 2s linear 0s infinite;
	-moz-animation:mouse-move 2s linear 0s infinite;
	-o-animation:'mouse-move' 2s linear 0s infinite;
	-webkit-animation:'mouse-move' 2s linear 0s infinite;
}

#state3 #page3,
#state4 #page4,
#state5 #page5,
#state6 #page6{
	background: url("images/p3-bg.png") no-repeat center center;
	background-size: contain;
	z-index: 9;
}

.back{
	width: 6.5%;
	height: 3.6%;
	left: 71.4%;
	top: 5.1%;
	background-image: url("images/back.png");
	cursor: pointer;
}

@keyframes back{
	from{ }
	to{ opacity: 1; }
}
#state2 .back,
#state3 .back,
#state4 .back,
#state5 .back,
#state6 .back{
	animation:'back' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:back 0.5s ease-in-out 0.3s forwards;
	-moz-animation:back 0.5s ease-in-out 0.3s forwards;
	-o-animation:'back' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'back' 0.5s ease-in-out 0.3s forwards;
}

.tree{
	width: 46%;
	height: 3.6%;
	left: 22%;
	top: 5.1%;
}

.tree label{
	margin: 0px 0.3em;
}

.tree span{
	font-weight: bold;
}

@keyframes tree{
	from{ }
	to{ opacity: 1; }
}
#state2 .tree,
#state3 .tree,
#state4 .tree,
#state5 .tree,
#state6 .tree{
	animation:'tree' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:tree 0.5s ease-in-out 0.3s forwards;
	-moz-animation:tree 0.5s ease-in-out 0.3s forwards;
	-o-animation:'tree' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'tree' 0.5s ease-in-out 0.3s forwards;
}

#state2 #page2{
	top: 0%;
}

@keyframes page2-hide{
	from{ top: 0%; }
	99.99%{ top: 0%; opacity: 1; }
	to{ top: 100%; opacity: 0; }
}

#state3 #page2{
	animation:'page2-hide' 0.01s ease-in-out 0.0s forwards;
	-ms-animation:page2-hide 0.01s ease-in-out 0.0s forwards;
	-moz-animation:page2-hide 0.01s ease-in-out 0.0s forwards;
	-o-animation:'page2-hide' 0.01s ease-in-out 0.0s forwards;
	-webkit-animation:'page2-hide' 0.01s ease-in-out 0.0s forwards;
}

.p2-topic{
	width: 18.8%;
	height: 6.6%;
	left: 40.6%;
	top: 13.6%;
	background-image: url("images/p2-topic.png");
}

@keyframes p2-topic{
	from{ margin-top: -1em; }
	to{ opacity: 1; }
}
#state2 .p2-topic{
	animation:'p2-topic' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p2-topic 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p2-topic 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p2-topic' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p2-topic' 0.5s ease-in-out 0.3s forwards;
}

.p2-machine1{
	width: 57.7%;
	height: 51.7%;
	left: 22.2%;
	top: 21.1%;
	background-image: url("images/p2-machine1.png");
}

@keyframes p2-machine1{
	from{ transform: scale(1.1,1.1); }
	to{ opacity: 1; }
}
#state2 .p2-machine1{
	animation:'p2-machine1' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p2-machine1 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p2-machine1 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p2-machine1' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p2-machine1' 0.5s ease-in-out 0.6s forwards;
}

.p2-text{
	width: 42.4%;
	height: 42.2%;
	left: 28.8%;
	top: 27.8%;
	background-image: url("images/p2-text.png");
}

@keyframes p2-text{
	from{ transform: scale(0.9,0.9); }
	to{ opacity: 1; }
}
#state2 .p2-text{
	animation:'p2-text' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p2-text 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p2-text 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p2-text' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p2-text' 0.5s ease-in-out 0.6s forwards;
}

.p2-machine2{
	width: 72.5%;
	height: 29.9%;
	left: 13.8%;
	top: 63.1%;
	text-align: center;
}

.p2-machine2 img{
	display: inline-block;
	width: auto;
	height: 100%;
}

@keyframes p2-machine2{
	from{ margin-top: -1em; }
	to{ opacity: 1; }
}
#state2 .p2-machine2{
	animation:'p2-machine2' 0.5s ease-in-out 0.9s forwards;
	-ms-animation:p2-machine2 0.5s ease-in-out 0.9s forwards;
	-moz-animation:p2-machine2 0.5s ease-in-out 0.9s forwards;
	-o-animation:'p2-machine2' 0.5s ease-in-out 0.9s forwards;
	-webkit-animation:'p2-machine2' 0.5s ease-in-out 0.9s forwards;
}

.p2-flip{
	width: 30%;
	height: 15%;
	right: 18.75%;
	bottom: 2.16%;
	background-image: url("images/p2-flip.png");
	background-position: right bottom;
	cursor: pointer;
}

@keyframes p2-flip{
	from{ }
	to{ opacity: 1; }
}
#state2 .p2-flip{
	animation:'p2-flip' 0.5s ease-in-out 1.2s forwards;
	-ms-animation:p2-flip 0.5s ease-in-out 1.2s forwards;
	-moz-animation:p2-flip 0.5s ease-in-out 1.2s forwards;
	-o-animation:'p2-flip' 0.5s ease-in-out 1.2s forwards;
	-webkit-animation:'p2-flip' 0.5s ease-in-out 1.2s forwards;
}

#state3 #page3{
	top: 0%;
}

#state4 #page4{
	top: 0%;
}

#state5 #page5{
	top: 0%;
}

#state6 #page6{
	top: 0%;
}

@keyframes page3-hide{
	from{ top: 0%; }
	99.99%{ top: 0%; opacity: 1; }
	to{ top: 100%; opacity: 0; }
}

#state4 #page3,
#state5 #page4,
#state6 #page5{
	animation:'page3-hide' 0.01s ease-in-out 0.0s forwards;
	-ms-animation:page3-hide 0.01s ease-in-out 0.0s forwards;
	-moz-animation:page3-hide 0.01s ease-in-out 0.0s forwards;
	-o-animation:'page3-hide' 0.01s ease-in-out 0.0s forwards;
	-webkit-animation:'page3-hide' 0.01s ease-in-out 0.0s forwards;
}

.p3-box{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

@keyframes p3-box-hide{
	from{ top: 0%; }
	to{ top: -100%; }
}

.p3-box.hide{
	animation:'p3-box-hide' 0.5s ease-in-out 0.0s forwards;
	-ms-animation:p3-box-hide 0.5s ease-in-out 0.0s forwards;
	-moz-animation:p3-box-hide 0.5s ease-in-out 0.0s forwards;
	-o-animation:'p3-box-hide' 0.5s ease-in-out 0.0s forwards;
	-webkit-animation:'p3-box-hide' 0.5s ease-in-out 0.0s forwards;
}

@keyframes p3-box-show{
	from{ top: -100%; }
	to{ top: 0%;  }
}

.p3-box.show{
	animation:'p3-box-show' 0.5s ease-in-out 0.0s forwards;
	-ms-animation:p3-box-show 0.5s ease-in-out 0.0s forwards;
	-moz-animation:p3-box-show 0.5s ease-in-out 0.0s forwards;
	-o-animation:'p3-box-show' 0.5s ease-in-out 0.0s forwards;
	-webkit-animation:'p3-box-show' 0.5s ease-in-out 0.0s forwards;
}

.p3-topic1,
.p3-topic2,
.p3-topic3,
.p3-topic4{
	width: 48.2%;
	height: 6.7%;
	left: 25.9%;
	top: 13.5%;
}

.p3-topic1{
	background-image: url("images/p3-topic1.png");
}

@keyframes p3-topic{
	from{ margin-top: -1em; }
	to{ opacity: 1; }
}
#state3 .p3-topic1{
	animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
}

.p3-topic2{
	background-image: url("images/p3-topic2.png");
}

#state4 .p3-topic2{
	animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
}

.p3-topic3{
	background-image: url("images/p3-topic3.png");
}

#state5 .p3-topic3{
	animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
}

.p3-topic4{
	background-image: url("images/p3-topic4.png");
}

#state6 .p3-topic4{
	animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-topic 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-topic' 0.5s ease-in-out 0.3s forwards;
}

.p3-main1,
.p3-main2,
.p3-main3,
.p3-main4{
	width: 69.9%;
	height: 47.7%;
	left: 12.2%;
	top: 21.8%;
}

.p3-main1{
	background-image: url("images/p3-main1.png");
}

@keyframes p3-main{
	from{ margin-top: 1em; }
	to{ opacity: 1; }
}
#state3 .p3-main1{
	animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
}

.p3-main2{
	background-image: url("images/p3-main2.png");
}

#state4 .p3-main2{
	animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
}

.p3-main3{
	background-image: url("images/p3-main3.png");
}

#state5 .p3-main3{
	animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
}

.p3-main4{
	background-image: url("images/p3-main4.png");
}

#state6 .p3-main4{
	animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-ms-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-moz-animation:p3-main 0.5s ease-in-out 0.3s forwards;
	-o-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
	-webkit-animation:'p3-main' 0.5s ease-in-out 0.3s forwards;
}

.p3-tab{
	width: 43.2%;
	height: 7%;
	left: 28.4%;
	top: 70.4%;
	cursor: pointer;
}

@keyframes p3-tab{
	from{ }
	to{ opacity: 1; }
}
#state3 .p3-tab,
#state4 .p3-tab,
#state5 .p3-tab,
#state6 .p3-tab{
	animation:'p3-tab' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p3-tab 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p3-tab 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p3-tab' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p3-tab' 0.5s ease-in-out 0.6s forwards;
}

.p3-tab span{
	position: absolute;
	width: 20.3%;
	height: 100%;
	top: 0%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.p3-tab .tab1{
	left: 0px;
	background-image: url("images/p3-tab1a.png");
}

.p3-tab .tab2{
	left: 26.1%;
	background-image: url("images/p3-tab2a.png");
}

.p3-tab .tab3{
	left: 52.9%;
	background-image: url("images/p3-tab3a.png");
}

.p3-tab .tab4{
	left: 79.7%;
	background-image: url("images/p3-tab4a.png");
}

.p3-tab .tab1.on{
	background-image: url("images/p3-tab1b.png");
}

.p3-tab .tab2.on{
	background-image: url("images/p3-tab2b.png");
}

.p3-tab .tab3.on{
	background-image: url("images/p3-tab3b.png");
}

.p3-tab .tab4.on{
	background-image: url("images/p3-tab4b.png");
}

.p3-line{
	width: 83.6%;
	height: 2%;
	left: 8.2%;
	top: 79.3%;
	background-image: url("images/p3-line.png");
}

@keyframes p3-line{
	from{ }
	to{ opacity: 1; }
}
#state3 .p3-line,
#state4 .p3-line,
#state5 .p3-line,
#state6 .p3-line{
	animation:'p3-line' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p3-line 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p3-line 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p3-line' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p3-line' 0.5s ease-in-out 0.6s forwards;
}

.p3-arrow{
	width: 8.6%;
	height: 8.5%;
	left: 45.7%;
	top: 85.4%;
	cursor: pointer;
}

@keyframes p3-arrow{
	from{ }
	to{ opacity: 1; }
}
#state3 .p3-arrow,
#state4 .p3-arrow,
#state5 .p3-arrow,
#state6 .p3-arrow{
	animation:'p3-arrow' 0.5s ease-in-out 0.6s forwards;
	-ms-animation:p3-arrow 0.5s ease-in-out 0.6s forwards;
	-moz-animation:p3-arrow 0.5s ease-in-out 0.6s forwards;
	-o-animation:'p3-arrow' 0.5s ease-in-out 0.6s forwards;
	-webkit-animation:'p3-arrow' 0.5s ease-in-out 0.6s forwards;
}

.p3-arrow i{
	background-image: url("images/p3-arrow.png");
}

@keyframes p3-arrow-move{
	from{  }
	50%{ margin-top: 1em; }
	to{ }
}
.p3-arrow i{
	animation:'p3-arrow-move' 2s linear 0s infinite;
	-ms-animation:p3-arrow-move 2s linear 0s infinite;
	-moz-animation:p3-arrow-move 2s linear 0s infinite;
	-o-animation:'p3-arrow-move' 2s linear 0s infinite;
	-webkit-animation:'p3-arrow-move' 2s linear 0s infinite;
}

.p3-btn{
	width: 83.6%;
	height: 18%;
	left: 8.2%;
	bottom: 0%;
	cursor: pointer;
}

.drop{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 100%;
	background: #f0f0f0;
}

@keyframes drop-active{
	from{ top: 100%; }
	to{ top: 0%; }
}
.drop.active{
	animation:'drop-active' 0.5s ease-in-out 0s forwards;
	-ms-animation:drop-active 0.5s ease-in-out 0s forwards;
	-moz-animation:drop-active 0.5s ease-in-out 0s forwards;
	-o-animation:'drop-active' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'drop-active' 0.5s ease-in-out 0s forwards;
}

@keyframes drop-hide{
	from{ top: 0%; }
	to{ top: 100%; }
}
.drop.hide{
	animation:'drop-hide' 0.5s ease-in-out 0s forwards;
	-ms-animation:drop-hide 0.5s ease-in-out 0s forwards;
	-moz-animation:drop-hide 0.5s ease-in-out 0s forwards;
	-o-animation:'drop-hide' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'drop-hide' 0.5s ease-in-out 0s forwards;
}

.drop .back{
	left: auto;
	right: 3%;
	width: 8%;
}

.drop .nav{
	position: absolute;
	width: 11.83%;
	right: 1%;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.drop .nav img{
	width: 100%;
}

.drop .nav .btn{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 13.9%;
	left: 0%;
	cursor: pointer;
}

.drop .nav .btn1{
	background-image: url("images/drop-nav1a.png");
	top: 7.8%;
}

.drop .nav .btn1.active{
	background-image: url("images/drop-nav1b.png");
}

.drop .nav .btn2{
	background-image: url("images/drop-nav2a.png");
	top: 31%;
}

.drop .nav .btn2.active{
	background-image: url("images/drop-nav2b.png");
}

.drop .nav .btn3{
	background-image: url("images/drop-nav3a.png");
	top: 54.4%;
}

.drop .nav .btn3.active{
	background-image: url("images/drop-nav3b.png");
}

.drop .nav .btn4{
	background-image: url("images/drop-nav4a.png");
	top: 77.6%;
}

.drop .nav .btn4.active{
	background-image: url("images/drop-nav4b.png");
}

.drop .btn{
	width: 100%;
	height: 5%;
	left: 0%;
	bottom: 1.5%;
	cursor: pointer;
}

.drop .drop1-btn{
	background-image: url("images/chart/chart1-btn.png");
}

.drop .drop2-btn{
	background-image: url("images/chart/chart2-btn.png");
}

.drop .drop3-btn{
	background-image: url("images/chart/chart3-btn.png");
}

@media only screen and (orientation: landscape) {
	.music{ left: 9%; }
	.box{ height: 100vh; width: 80vh; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0);  }
	.p2-flip{ right: 8.28%; }
	.drop{ width: 84%; left: 8%; }
	.drop .nav{ width: 8%; }
	.drop .back{ right: 3%; height: 5%; }
}