@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	overflow: hidden;
	font-family: "微软雅黑";
}

.page {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.page_0 {
	display: block;
	background-color: #9ed4f5;
}

.loader_light {
	position: absolute;
	width: 38.9%;
	height: auto;
	left: 30.5%;
	top: 24.1%;
}

.loader_cloud_1 {
	position: absolute;
	width: 22.9%;
	height: auto;
	left: 27.1%;
	top: 43.4%;
	animation: loader_cloud 2s 0s linear infinite alternate;
	-ms-animation: loader_cloud 2s 0s linear infinite alternate;
	-moz-animation: loader_cloud 2s 0s linear infinite alternate;
	-webkit-animation: loader_cloud 2s 0s linear infinite alternate;
}

@keyframes loader_cloud {
	from {
		transform: translateX(5px);
	}
	to {
		transform: translateX(-5px);
	}
}

@-ms-keyframes loader_cloud {
	from {
		-ms-transform: translateX(5px);
	}
	to {
		-ms-transform: translateX(-5px);
	}
}

@-moz-keyframes loader_cloud {
	from {
		-moz-transform: translateX(5px);
	}
	to {
		-moz-transform: translateX(-5px);
	}
}

@-webkit-keyframes loader_cloud {
	from {
		-webkit-transform: translateX(5px);
	}
	to {
		-webkit-transform: translateX(-5px);
	}
}

.loader_cloud_2 {
	position: absolute;
	width: 13.1%;
	height: auto;
	left: 52.1%;
	top: 48.3%;
	animation: loader_cloud 2s 0.5s linear infinite alternate;
	-ms-animation: loader_cloud 2s 0.5s linear infinite alternate;
	-moz-animation: loader_cloud 2s 0.5s linear infinite alternate;
	-webkit-animation: loader_cloud 2s 0.5s linear infinite alternate;
}

.p0_plane {
	position: absolute;
	width: 28.4%;
	height: auto;
	left: 35.9%;
	top: 32.3%;
	transform-origin: 50% -100%;
	-ms-transform-origin: 50% -100%;
	-moz-transform-origin: 50% -100%;
	-webkit-transform-origin: 50% -100%;
	animation: p0_plane 1s 0s ease-in-out infinite alternate;
	-ms-animation: p0_plane 1s 0s ease-in-out infinite alternate;
	-moz-animation: p0_plane 1s 0s ease-in-out infinite alternate;
	-webkit-animation: p0_plane 1s 0s ease-in-out infinite alternate;
}

@keyframes p0_plane {
	from {
		transform: translate(-10px, 0px);
	}
	to {
		transform: translate(10px, 0px);
	}
}

@-ms-keyframes p0_plane {
	from {
		-ms-transform: translate(-10px, 0px);
	}
	to {
		-ms-transform: translate(10px, 0px);
	}
}

@-moz-keyframes p0_plane {
	from {
		-moz-transform: translate(-10px, 0px);
	}
	to {
		-moz-transform: translate(10px, 0px);
	}
}

@-webkit-keyframes p0_plane {
	from {
		-webkit-transform: translate(-10px, 0px);
	}
	to {
		-webkit-transform: translate(10px, 0px);
	}
}

.p0_plane_flyout {
	animation: p0_plane_flyout 2s 0s linear forwards;
	-ms-animation: p0_plane_flyout 2s 0s linear forwards;
	-moz-animation: p0_plane_flyout 2s 0s linear forwards;
	-webkit-animation: p0_plane_flyout 2s 0s linear forwards;
}

@keyframes p0_plane_flyout {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	20% {
		transform: translate(50%, -30%) rotate(0deg);
	}
	80% {
		transform: translate(100%, -30%) rotate(-360deg);
	}
	100% {
		transform: translate(200%, -60%) rotate(-360deg);
	}
}

@-ms-keyframes p0_plane_flyout {
	0% {
		-ms-transform: translate(0, 0) rotate(0deg);
	}
	20% {
		-ms-transform: translate(50%, -30%) rotate(0deg);
	}
	80% {
		-ms-transform: translate(100%, -30%) rotate(-360deg);
	}
	100% {
		-ms-transform: translate(200%, -60%) rotate(-360deg);
	}
}

@-moz-keyframes p0_plane_flyout {
	0% {
		-moz-transform: translate(0, 0) rotate(0deg);
	}
	20% {
		-moz-transform: translate(50%, -30%) rotate(0deg);
	}
	80% {
		-moz-transform: translate(100%, -30%) rotate(-360deg);
	}
	100% {
		-moz-transform: translate(200%, -60%) rotate(-360deg);
	}
}

@-webkit-keyframes p0_plane_flyout {
	0% {
		-webkit-transform: translate(0, 0) rotate(0deg);
	}
	20% {
		-webkit-transform: translate(50%, -30%) rotate(0deg);
	}
	80% {
		-webkit-transform: translate(100%, -30%) rotate(-360deg);
	}
	100% {
		-webkit-transform: translate(200%, -60%) rotate(-360deg);
	}
}

.preload {
	display: none;
	position: absolute;
	width: 1px;
	height: 1px;
}

.preload img {
	position: absolute;
	width: 1px;
	height: 1px;
}

.page_outer,
.page_inner {
	position: absolute;
}

.music_btn {
	position: fixed;
	width: 30px;
	height: 30px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	top: 15px;
	right: 15px;
}

.music_play {
	background-image: url(../img/music.png);
	animation: music_play 2s 0s linear infinite;
	-ms-animation: music_play 2s 0s linear infinite;
	-moz-animation: music_play 2s 0s linear infinite;
	-webkit-animation: music_play 2s 0s linear infinite;
}

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

@-ms-keyframes music_play {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-moz-keyframes music_play {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

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

.music_pause {
	background-image: url(../img/music_close.png);
}

.page_down {
	position: absolute;
	width: auto;
	height: 60px;
	right: 2.5%;
	margin-top: -30px;
	top: 50%;
	animation: page_down 1s ease infinite alternate;
	-ms-animation: page_down 1s ease infinite alternate;
	-moz-animation: page_down 1s ease infinite alternate;
	-webkit-animation: page_down 1s ease infinite alternate;
}

@keyframes page_down {
	from {
		margin-right: 0px;
	}
	to {
		margin-right: 20px;
	}
}

@-ms-keyframes page_down {
	from {
		margin-right: 0px;
	}
	to {
		margin-right: 20px;
	}
}

@-moz-keyframes page_down {
	from {
		margin-right: 0px;
	}
	to {
		margin-right: 20px;
	}
}

@-webkit-keyframes page_down {
	from {
		margin-right: 0px;
	}
	to {
		margin-right: 20px;
	}
}

.page_1 {
	background-image: url(../img/bg1.jpg);
}

.p1_title {
	position: absolute;
	width: 39.1%;
	height: auto;
	left: 3.5%;
	top: 3.8%;
}

.p1_logo {
	position: absolute;
	width: 31.9%;
	height: auto;
	right: 5.5%;
	top: 5.1%;
}

.p1_small img {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	clear: both;
	opacity: 0;
}

.p1_small img:nth-child(1) {
	animation: fadeIn 0.5s 0.5s ease forwards;
	-ms-animation: fadeIn 0.5s 0.5s ease forwards;
	-moz-animation: fadeIn 0.5s 0.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 0.5s ease forwards;
}

.p1_small img:nth-child(2) {
	animation: fadeIn 0.5s 0.75s ease forwards;
	-ms-animation: fadeIn 0.5s 0.75s ease forwards;
	-moz-animation: fadeIn 0.5s 0.75s ease forwards;
	-webkit-animation: fadeIn 0.5s 0.75s ease forwards;
}

.p1_small img:nth-child(3) {
	animation: fadeIn 0.5s 1s ease forwards;
	-ms-animation: fadeIn 0.5s 1s ease forwards;
	-moz-animation: fadeIn 0.5s 1s ease forwards;
	-webkit-animation: fadeIn 0.5s 1s ease forwards;
}

.p1_small img:nth-child(4) {
	animation: fadeIn 0.5s 1.25s ease forwards;
	-ms-animation: fadeIn 0.5s 1.25s ease forwards;
	-moz-animation: fadeIn 0.5s 1.25s ease forwards;
	-webkit-animation: fadeIn 0.5s 1.25s ease forwards;
}

.p1_small img:nth-child(5) {
	animation: fadeIn 0.5s 1.5s ease forwards;
	-ms-animation: fadeIn 0.5s 1.5s ease forwards;
	-moz-animation: fadeIn 0.5s 1.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 1.5s ease forwards;
}

.p1_small img:nth-child(6) {
	animation: fadeIn 0.5s 1.75s ease forwards;
	-ms-animation: fadeIn 0.5s 1.75s ease forwards;
	-moz-animation: fadeIn 0.5s 1.75s ease forwards;
	-webkit-animation: fadeIn 0.5s 1.75s ease forwards;
}

.p1_small img:nth-child(7) {
	animation: fadeIn 0.5s 2s ease forwards;
	-ms-animation: fadeIn 0.5s 2s ease forwards;
	-moz-animation: fadeIn 0.5s 2s ease forwards;
	-webkit-animation: fadeIn 0.5s 2s ease forwards;
}

.p1_small img:nth-child(8) {
	animation: fadeIn 0.5s 2.25s ease forwards;
	-ms-animation: fadeIn 0.5s 2.25s ease forwards;
	-moz-animation: fadeIn 0.5s 2.25s ease forwards;
	-webkit-animation: fadeIn 0.5s 2.25s ease forwards;
}

.p1_small img:nth-child(9) {
	animation: fadeIn 0.5s 2.5s ease forwards;
	-ms-animation: fadeIn 0.5s 2.5s ease forwards;
	-moz-animation: fadeIn 0.5s 2.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 2.5s ease forwards;
}

.p1_small img:nth-child(10) {
	animation: fadeIn 0.5s 2.75s ease forwards;
	-ms-animation: fadeIn 0.5s 2.75s ease forwards;
	-moz-animation: fadeIn 0.5s 2.75s ease forwards;
	-webkit-animation: fadeIn 0.5s 2.75s ease forwards;
}

.p1_small img:nth-child(11) {
	animation: fadeIn 0.5s 3s ease forwards;
	-ms-animation: fadeIn 0.5s 3s ease forwards;
	-moz-animation: fadeIn 0.5s 3s ease forwards;
	-webkit-animation: fadeIn 0.5s 3s ease forwards;
}

.p1_small img:nth-child(12) {
	animation: fadeIn 0.5s 3.25s ease forwards;
	-ms-animation: fadeIn 0.5s 3.25s ease forwards;
	-moz-animation: fadeIn 0.5s 3.25s ease forwards;
	-webkit-animation: fadeIn 0.5s 3.25s ease forwards;
}

.p1_small img:nth-child(13) {
	animation: fadeIn 0.5s 3.5s ease forwards;
	-ms-animation: fadeIn 0.5s 3.5s ease forwards;
	-moz-animation: fadeIn 0.5s 3.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 3.5s ease forwards;
}

.p1_small img:nth-child(14) {
	animation: fadeIn 0.5s 3.75s ease forwards;
	-ms-animation: fadeIn 0.5s 3.75s ease forwards;
	-moz-animation: fadeIn 0.5s 3.75s ease forwards;
	-webkit-animation: fadeIn 0.5s 3.75s ease forwards;
}

.p1_small img:nth-child(15) {
	animation: fadeIn 0.5s 4s ease forwards;
	-ms-animation: fadeIn 0.5s 4s ease forwards;
	-moz-animation: fadeIn 0.5s 4s ease forwards;
	-webkit-animation: fadeIn 0.5s 4s ease forwards;
}

.p1_small img:nth-child(16) {
	animation: fadeIn 0.5s 4.25s ease forwards;
	-ms-animation: fadeIn 0.5s 4.25s ease forwards;
	-moz-animation: fadeIn 0.5s 4.25s ease forwards;
	-webkit-animation: fadeIn 0.5s 4.25s ease forwards;
}

.p1_small img:nth-child(17) {
	animation: fadeIn 0.5s 4.5s ease forwards;
	-ms-animation: fadeIn 0.5s 4.5s ease forwards;
	-moz-animation: fadeIn 0.5s 4.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 4.5s ease forwards;
}

.p1_small img:nth-child(18) {
	animation: fadeIn 0.5s 4.75s ease forwards;
	-ms-animation: fadeIn 0.5s 4.75s ease forwards;
	-moz-animation: fadeIn 0.5s 4.75s ease forwards;
	-webkit-animation: fadeIn 0.5s 4.75s ease forwards;
}

.p1_small img:nth-child(19) {
	animation: fadeIn 0.5s 5s ease forwards;
	-ms-animation: fadeIn 0.5s 5s ease forwards;
	-moz-animation: fadeIn 0.5s 5s ease forwards;
	-webkit-animation: fadeIn 0.5s 5s ease forwards;
}

.p1_small img:nth-child(20) {
	animation: fadeIn 0.5s 5.25s ease forwards;
	-ms-animation: fadeIn 0.5s 5.25s ease forwards;
	-moz-animation: fadeIn 0.5s 5.25s ease forwards;
	-webkit-animation: fadeIn 0.5s 5.25s ease forwards;
}

.p1_small img:nth-child(21) {
	animation: fadeIn 0.5s 5.5s ease forwards;
	-ms-animation: fadeIn 0.5s 5.5s ease forwards;
	-moz-animation: fadeIn 0.5s 5.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 5.5s ease forwards;
}

.p1_sec_1 {
	position: absolute;
	width: 58.3%;
	height: auto;
	left: 20.9%;
	top: 43.7%;
	transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	opacity: 0;
	animation: topin 1s 6s cubic-bezier(.37, -0.52, .68, 1.55) forwards;
	-ms-animation: topin 1s 6s cubic-bezier(.37, -0.52, .68, 1.55) forwards;
	-moz-animation: topin 1s 6s cubic-bezier(.37, -0.52, .68, 1.55) forwards;
	-webkit-animation: topin 1s 6s cubic-bezier(.37, -0.52, .68, 1.55) forwards;
}

.p1_sec_2 {
	position: absolute;
	width: 28.1%;
	height: auto;
	left: 22.1%;
	top: 41.5%;
	transform-origin: 41.5% 100%;
	-ms-transform-origin: 41.5% 100%;
	-moz-transform-origin: 41.5% 100%;
	-webkit-transform-origin: 41.5% 100%;
	transform: scale(0.1);
	-ms-transform: scale(0.1);
	-moz-transform: scale(0.1);
	-webkit-transform: scale(0.1);
	opacity: 0;
	animation: sbin 0.5s 7s ease forwards;
	-ms-animation: sbin 0.5s 7s ease forwards;
	-moz-animation: sbin 0.5s 7s ease forwards;
	-webkit-animation: sbin 0.5s 7s ease forwards;
}

.p1_sec_3 {
	position: absolute;
	width: 48.0%;
	height: auto;
	left: 24.0%;
	top: 33.7%;
	opacity: 0;
	animation: fadeIn 0.5s 7.5s ease forwards;
	-ms-animation: fadeIn 0.5s 7.5s ease forwards;
	-moz-animation: fadeIn 0.5s 7.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 7.5s ease forwards;
}

.p1_young {
	position: absolute;
	width: 47.2%;
	height: auto;
	left: 8.5%;
	bottom: 16.7%;
	transform: scale(3);
	-ms-transform: scale(3);
	-moz-transform: scale(3);
	-webkit-transform: scale(3);
	opacity: 0;
	animation: ssin 1s 8s ease forwards;
	-ms-animation: ssin 1s 8s ease forwards;
	-moz-animation: ssin 1s 8s ease forwards;
	-webkit-animation: ssin 1s 8s ease forwards;
}

.p1_plane {
	position: absolute;
	width: 28.4%;
	height: auto;
	left: -28.4%;
	top: 18%;
	animation: p1_plane 4s 0.5s ease forwards;
	-ms-animation: p1_plane 4s 0.5s ease forwards;
	-moz-animation: p1_plane 4s 0.5s ease forwards;
	-webkit-animation: p1_plane 4s 0.5s ease forwards;
}

@keyframes p1_plane {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	50% {
		transform: translate(200%, -100%) rotate(-10deg);
	}
	100% {
		transform: translate(500%, 0%) rotate(40deg);
	}
}

@-ms-keyframes p1_plane {
	0% {
		-ms-transform: translate(0, 0) rotate(0deg);
	}
	50% {
		-ms-transform: translate(200%, -100%) rotate(-10deg);
	}
	100% {
		-ms-transform: translate(500%, 0%) rotate(40deg);
	}
}

@-moz-keyframes p1_plane {
	0% {
		-moz-transform: translate(0, 0) rotate(0deg);
	}
	50% {
		-moz-transform: translate(200%, -100%) rotate(-10deg);
	}
	100% {
		-moz-transform: translate(500%, 0%) rotate(40deg);
	}
}

@-webkit-keyframes p1_plane {
	0% {
		-webkit-transform: translate(0, 0) rotate(0deg);
	}
	50% {
		-webkit-transform: translate(200%, -100%) rotate(-10deg);
	}
	100% {
		-webkit-transform: translate(500%, 0%) rotate(40deg);
	}
}

.page_2 {
	background-image: url(../img/bg2.jpg);
}

.p2_logo {
	position: absolute;
	width: 31.9%;
	height: auto;
	right: 5.5%;
	top: 1.7%;
}

.p2_book_list {
	position: absolute;
	width: 83.2%;
	height: auto;
	left: 4.7%;
	top: 17.1%;
}

.p2_book_btn div {
	position: absolute;
	display: block;
	width: 53.3%;
	height: 8%;
	left: 17.3%;
}

.p2_book_btn div:nth-child(1) {
	top: 31.6%;
}

.p2_book_btn div:nth-child(2) {
	top: 39.6%;
}

.p2_book_btn div:nth-child(3) {
	top: 48.5%;
}

.p2_book_btn div:nth-child(4) {
	top: 57.3%;
}

.p2_book_btn div:nth-child(5) {
	top: 66.1%;
}

.p2_book_btn div:nth-child(6) {
	top: 74.5%;
}

.p2_book_btn div:nth-child(7) {
	top: 82.8%;
}

.p2_plane {
	position: absolute;
	width: 29.1%;
	height: auto;
	left: -29.1%;
	top: 10%;
	animation: p2_plane_in 3s 0.3s ease forwards;
	-ms-animation: p2_plane_in 3s 0.3s ease forwards;
	-moz-animation: p2_plane_in 3s 0.3s ease forwards;
	-webkit-animation: p2_plane_in 3s 0.3s ease forwards;
}

@keyframes p2_plane_in {
	from {
		transform: translate(0%, 0%);
	}
	to {
		transform: translate(300%, 220%);
	}
}

@-ms-keyframes p2_plane_in {
	from {
		-ms-transform: translate(0%, 0%);
	}
	to {
		-ms-transform: translate(300%, 220%);
	}
}

@-moz-keyframes p2_plane_in {
	from {
		-moz-transform: translate(0%, 0%);
	}
	to {
		-moz-transform: translate(300%, 220%);
	}
}

@-webkit-keyframes p2_plane_in {
	from {
		-webkit-transform: translate(0%, 0%);
	}
	to {
		-webkit-transform: translate(300%, 220%);
	}
}

.p2_plane_out {
	animation: p2_plane_out 3s 0s linear forwards;
	-ms-animation: p2_plane_out 3s 0s linear forwards;
	-moz-animation: p2_plane_out 3s 0s linear forwards;
	-webkit-animation: p2_plane_out 3s 0s linear forwards;
}

@keyframes p2_plane_out {
	0% {
		transform: translate(300%, 220%) rotate(0deg);
	}
	5% {
		transform: translate(315%, 220%) rotate(0deg);
	}
	10% {
		transform: translate(330%, 220%) rotate(40deg);
	}
	100% {
		transform: translate(530%, 1020%) rotate(10deg);
	}
}

@-ms-keyframes p2_plane_out {
	0% {
		-ms-transform: translate(300%, 220%) rotate(0deg);
	}
	5% {
		-ms-transform: translate(315%, 220%) rotate(0deg);
	}
	10% {
		-ms-transform: translate(330%, 220%) rotate(40deg);
	}
	100% {
		-ms-transform: translate(530%, 1020%) rotate(10deg);
	}
}

@-moz-keyframes p2_plane_out {
	0% {
		-moz-transform: translate(300%, 220%) rotate(0deg);
	}
	5% {
		-moz-transform: translate(315%, 220%) rotate(0deg);
	}
	10% {
		-moz-transform: translate(330%, 220%) rotate(40deg);
	}
	100% {
		-moz-transform: translate(530%, 1020%) rotate(10deg);
	}
}

@-webkit-keyframes p2_plane_out {
	0% {
		-webkit-transform: translate(300%, 220%) rotate(0deg);
	}
	5% {
		-webkit-transform: translate(315%, 220%) rotate(0deg);
	}
	10% {
		-webkit-transform: translate(330%, 220%) rotate(40deg);
	}
	100% {
		-webkit-transform: translate(530%, 1020%) rotate(10deg);
	}
}

.page_3 {
	background-image: url(../img/bg3.jpg);
}

.p3_cloud_1,
.p3_cloud_2 {
	position: absolute;
	width: 42%;
	height: auto;
	left: -42%;
}

.p3_cloud_1 {
	top: 19%;
	animation: p3_cloud 6s 0s linear infinite;
	-ms-animation: p3_cloud 6s 0s linear infinite;
	-moz-animation: p3_cloud 6s 0s linear infinite;
	-webkit-animation: p3_cloud 6s 0s linear infinite;
}

.p3_cloud_2 {
	top: 26%;
	animation: p3_cloud 5s 2s linear infinite;
	-ms-animation: p3_cloud 5s 2s linear infinite;
	-moz-animation: p3_cloud 5s 2s linear infinite;
	-webkit-animation: p3_cloud 5s 2s linear infinite;
}

@keyframes p3_cloud {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(400%);
	}
}

@-ms-keyframes p3_cloud {
	from {
		-ms-transform: translateX(0);
	}
	to {
		-ms-transform: translateX(400%);
	}
}

@-moz-keyframes p3_cloud {
	from {
		-moz-transform: translateX(0);
	}
	to {
		-moz-transform: translateX(400%);
	}
}

@-webkit-keyframes p3_cloud {
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(400%);
	}
}

.p3_title {
	position: absolute;
	width: 59.3%;
	height: auto;
	left: 20.4%;
	top: 5.6%;
	opacity: 0;
	animation: fadeIn 0.5s 0.5s ease forwards;
	-ms-animation: fadeIn 0.5s 0.5s ease forwards;
	-moz-animation: fadeIn 0.5s 0.5s ease forwards;
	-webkit-animation: fadeIn 0.5s 0.5s ease forwards;
}

.p3_code {
	position: absolute;
	width: 39.2%;
	height: auto;
	left: 30.4%;
	top: 30.8%;
	opacity: 0;
	animation: bottomin 1s 1s ease forwards;
	-ms-animation: bottomin 1s 1s ease forwards;
	-moz-animation: bottomin 1s 1s ease forwards;
	-webkit-animation: bottomin 1s 1s ease forwards;
}

.p3_blue_text {
	position: absolute;
	width: 26.7%;
	height: auto;
	left: 36.7%;
	top: 57.0%;
	opacity: 0;
	animation: bottomin 1s 1.5s ease forwards;
	-ms-animation: bottomin 1s 1.5s ease forwards;
	-moz-animation: bottomin 1s 1.5s ease forwards;
	-webkit-animation: bottomin 1s 1.5s ease forwards;
}

.p3_logo {
	position: absolute;
	width: 31.9%;
	height: auto;
	left: 30.4%;
	bottom: 5%;
	transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-webkit-transform: rotateY(90deg);
	animation: rotate_y_show 0.5s 2.5s ease forwards;
	-ms-animation: rotate_y_show 0.5s 2.5s ease forwards;
	-moz-animation: rotate_y_show 0.5s 2.5s ease forwards;
	-webkit-animation: rotate_y_show 0.5s 2.5s ease forwards;
}

.hide {
	display: none;
}

.p3_plane {
	position: absolute;
	width: 28.3%;
	height: auto;
	left: -28.3%;
	top: 50%;
	transform-origin: 50% 1000%;
	-ms-transform-origin: 50% 1000%;
	-moz-transform-origin: 50% 1000%;
	-webkit-transform-origin: 50% 1000%;
	animation: p3_plane 3s 0.5s ease forwards;
	-ms-animation: p3_plane 3s 0.5s ease forwards;
	-moz-animation: p3_plane 3s 0.5s ease forwards;
	-webkit-animation: p3_plane 3s 0.5s ease forwards;
}

@keyframes p3_plane {
	from {
		transform: translate(0, 0) rotate(-40deg);
	}
	to {
		transform: translate(310%, -365%) rotate(0deg)
	}
}

@-ms-keyframes p3_plane {
	from {
		-ms-transform: translate(0, 0) rotate(-40deg);
	}
	to {
		-ms-transform: translate(310%, -365%) rotate(0deg)
	}
}

@-moz-keyframes p3_plane {
	from {
		-moz-transform: translate(0, 0) rotate(-40deg);
	}
	to {
		-moz-transform: translate(310%, -365%) rotate(0deg)
	}
}

@-webkit-keyframes p3_plane {
	from {
		-webkit-transform: translate(0, 0) rotate(-40deg);
	}
	to {
		-webkit-transform: translate(310%, -365%) rotate(0deg)
	}
}

.back_category {
	position: absolute;
	width: 30%;
	height: auto;
	left: 15%;
	top: 66.8%;
	opacity: 0;
	animation: bottomin 1s 2s ease forwards;
	-ms-animation: bottomin 1s 2s ease forwards;
	-moz-animation: bottomin 1s 2s ease forwards;
	-webkit-animation: bottomin 1s 2s ease forwards;
}
.invite_btn{
	position: absolute;
	width: 30%;
	height: auto;
	right: 15%;
	top: 66.8%;
	opacity: 0;
	animation: bottomin 1s 2s ease forwards;
	-ms-animation: bottomin 1s 2s ease forwards;
	-moz-animation: bottomin 1s 2s ease forwards;
	-webkit-animation: bottomin 1s 2s ease forwards;
}
.page_4_1,
.page_4_2,
.page_4_3,
.page_4_4,
.page_4_5,
.page_4_6,
.page_4_7 {
	background-image: none;
	background-color: transparent;
}

.p4_main {
	position: absolute;
	width: 99.1%;
	height: auto;
	left: 0;
	top: 5.6%;
}

.p4_logo {
	position: absolute;
	width: 31.9%;
	height: auto;
	right: 5.5%;
	top: 1.7%;
}

.close_book {
	position: absolute;
	width: 34.9%;
	height: auto;
	left: 32.8%;
	bottom: 3.8%;
}

.timer_share_pop {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}

.timer_share_pop_arrow {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 5%;
}