html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
	margin: 0;
	padding: 0
}

.telephone {
	display: flex;
	justify-content: center;
	align-content: center;
	margin: 10px 0;
	text-align: center;
}
fieldset,
img {
	border: 0
}

img {
	display: block
}

address,
caption,
cite,
code,
dfn,
th,
var {
	font-style: normal;
	font-weight: normal
}

ul,
ol {
	list-style: none
}

* {
	margin: 0;
	padding: 0
}

em,
i {
	font-style: normal
}

li {
	list-style: none
}

img {
	border: 0;
	vertical-align: middle
}

button {
	cursor: pointer
}

:focus {
	outline: 0;
}

a {
	color: #232323;
	text-decoration: none
}

a:hover {
	color: #232323
}

.gray {
	color: #333;
	line-height: 22px;
	font-size: 19px;
}

.font30 {
	font-size: 30px;
}

body {
	font-size: 16px;
	background-color: #ebebeb;
}

.noscroll,
.noscroll body {
	width: 100%;
	position: relative;
	overflow: hidden !important;
	height: 100% !important
}

.wrap {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
}

#header {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
	height: auto;
	background-color: #fff;
	display: block;
	width: 100%;
	margin: 0 auto;
}

.wrap #header {
	background-color: transparent;
}


#header {
	position: absolute;
	max-height: 44px;
	-webkit-transition: background .1s ease .2s, max-height .35s ease;
	transition: background .1s ease .2s, max-height .35s ease;
}

#header.openHeaderMenu {
	color: inherit;
	background-color: #fff;
	will-change: background;
	-webkit-transition: background-color .35s ease, max-height .35s ease;
	transition: background-color .35s ease, max-height .35s ease;
	will-change: transform, max-height;
	max-height: 100vh;
}

#header .logo {
	background: url(../image/logo20_green.png) 0 0;
	background-size: 100% 100%;
	display: block;
	width: 110px;
	height: 21px;
	position: absolute;
	left: 0;
	top: 10px;
	left: 50%;
	margin-left: -55px;
}



.openHeaderMenu a.nav-menu b em {
	opacity: 0;
}

.openHeaderMenu a.nav-menu b:before {
	-webkit-transform: matrix(.70711, .70711, -.70711, .70711, 0, 9);
	transform: matrix(.70711, .70711, -.70711, .70711, 0, 9);
}

.openHeaderMenu a.nav-menu b:after {
	-webkit-transform: matrix(.70711, -.70711, .70711, .70711, 0, -6);
	transform: matrix(.70711, -.70711, .70711, .70711, 0, -6);
}

.content {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background: #ecf2ff;
}

.content .page {
	position: relative;
	overflow: hidden;
}

.content .page1 {
	background-size: 100% 650px;
	display: block;
	width: 100%;
	height: 650px;
	padding-top: 30px;
}

.content .page1 .image {
	background: url(../image/applogo.png) center center;
	background-size: 98px 98px;
	display: block;
	width: 98px;
	height: 98px;
	margin: 120px auto 0;
}

.content .title {
	margin-top: 18px;
	line-height: 40px;
}

.opactiy {
	opacity: 0;
}

.content .page .image2 {
	display: block;
	width: 100%;
	margin-top: 35px;
}

.content .page .image3 {
	width: 100%;
	margin-top: 35px;
}

.content .btn {
	width: 144px;
	height: 38px;
	line-height: 38px;
	background-color: #137cf0;
	border-radius: 18px;
	border: 1px solid #137cf0;
	color: #fff;
	margin: 220px 0;
	font-size: 18px;
}

footer {
	font-size: 10px;
	text-align: center;
	color: #999;
	margin: 18px 0;
	line-height: 18px;
}



#os-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-color: rgba(0, 0, 0, .1);
	z-index: 888;
	max-height: 0;
	opacity: 0;
	-webkit-transition: opacity .3s ease 0s, max-height 0s linear .5s;
	transition: opacity .3s ease 0s, max-height 0s linear .5s;
	width: 100%;
	margin: 0 auto;
}

#header.show-mask~#os-mask {
	opacity: 1;
	max-height: 100vh;
	-webkit-transition: opacity .3s ease 0s, max-height 0s linear 0s;
	transition: opacity .3s ease 0s, max-height 0s linear 0s;
}

/*****   animate.css  *****/
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
	from {
		transform: translate(0, 100px);
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		transform: translate(0, 100px);
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	animation-timing-function: ease;
	animation-duration: 500ms;
}

@-webkit-keyframes flyLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate(80px, 50px) scale(0, 0);
		transform: translate(80px, 50px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(78px, 48px) scale(.1, .1);
		transform: translate(78px, 48px) scale(.1, .1);
	}

	80% {
		-webkit-transform: translate(10px, 6px) scale(.8, .8);
		transform: translate(10px, 6px) scale(.8, .8);
	}

	90% {
		-webkit-transform: translate(0px, 0px) scale(1.1, 1.1);
		transform: translate(0px, 0px) scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
	}
}

@keyframes flyLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate(80px, 50px) scale(0, 0);
		transform: translate(80px, 50px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(78px, 48px) scale(.1, .1);
		transform: translate(78px, 48px) scale(.1, .1);
	}

	80% {
		-webkit-transform: translate(10px, 6px) scale(.8, .8);
		transform: translate(10px, 6px) scale(.8, .8);
	}

	90% {
		-webkit-transform: translate(0px, 0px) scale(1.1, 1.1);
		transform: translate(0px, 0px) scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes flyRight {
	0% {
		opacity: 0;
		-webkit-transform: translate(-100px, 60px) scale(0, 0);
		transform: translate(-100px, 60px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(-98px, 58px) scale(.1, .1);
		transform: translate(-98px, 58px) scale(.1, .1);
	}

	80% {
		-webkit-transform: translate(-10px, 6px) scale(.8, .8);
		transform: translate(-10px, 6px) scale(.8, .8);
	}

	90% {
		-webkit-transform: translate(0px, 0px) scale(1.15, 1.15);
		transform: translate(0px, 0px) scale(1.15, 1.15);
	}

	100% {
		opacity: 1;
	}
}

@keyframes flyRight {
	0% {
		opacity: 0;
		-webkit-transform: translate(-100px, 60px) scale(0, 0);
		transform: translate(-100px, 60px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(-98px, 58px) scale(.1, .1);
		transform: translate(-98px, 58px) scale(.1, .1);
	}

	80% {
		-webkit-transform: translate(-10px, 6px) scale(.8, .8);
		transform: translate(-10px, 6px) scale(.8, .8);
	}

	90% {
		-webkit-transform: translate(0px, 0px) scale(1.15, 1.15);
		transform: translate(0px, 0px) scale(1.15, 1.15);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes flyBottom {
	0% {
		opacity: 0;
		-webkit-transform: translate(-60px, -80px) scale(0, 0);
		transform: translate(-60px, -80px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(-58px, -78px) scale(.1, .1);
		transform: translate(-58px, -78px) scale(.1, .1);
	}

	80% {

		-webkit-transform: translate(-6px, -8px) scale(.8, .8);
		transform: translate(-6px, -8px) scale(.8, .8);
	}

	90% {

		-webkit-transform: translate(0px, 0px) scale(1.2, 1.2);
		transform: translate(0px, 0px) scale(1.2, 1.2);
	}

	100% {
		opacity: 1;
	}
}

@keyframes flyBottom {
	0% {
		opacity: 0;
		-webkit-transform: translate(-60px, -80px) scale(0, 0);
		transform: translate(-60px, -80px) scale(0, 0);
	}

	40% {
		opacity: .1;
		-webkit-transform: translate(-58px, -78px) scale(.1, .1);
		transform: translate(-58px, -78px) scale(.1, .1);
	}

	80% {

		-webkit-transform: translate(-6px, -8px) scale(.8, .8);
		transform: translate(-6px, -8px) scale(.8, .8);
	}

	90% {

		-webkit-transform: translate(0px, 0px) scale(1.2, 1.2);
		transform: translate(0px, 0px) scale(1.2, 1.2);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes zoomInBig {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.2, 1.2);
		opacity: 1;
	}

	60% {
		transform: scale(.8, .8);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.8, .8);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@keyframes zoomInBig {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.2, 1.2);
		opacity: 1;
	}

	60% {
		transform: scale(.8, .8);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.8, .8);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.2, 1.2);
		opacity: 1;
	}

	60% {
		transform: scale(.9, .9);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.9, .9);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.2, 1.2);
		opacity: 1;
	}

	60% {
		transform: scale(.9, .9);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.9, .9);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@-webkit-keyframes zoomInSmall {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.1, 1.1);
		opacity: 1;
	}

	60% {
		transform: scale(.8, .8);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.9, .9);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

@keyframes zoomInSmall {
	0% {
		opacity: 0;
		transform: scale(.2, .2);
	}

	40% {
		transform: scale(1.1, 1.1);
		opacity: 1;
	}

	60% {
		transform: scale(.8, .8);
	}

	70% {
		transform: scale(1.1, 1.1);
	}

	80% {
		transform: scale(.9, .9);
	}

	90% {
		transform: scale(1.1, 1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}


.iconLeft {
	-webkit-animation: zoomInBig 1s ease .3s forwards;
	animation: zoomInBig 1s ease .3s forwards;
}

.iconRight {
	-webkit-animation: zoomIn 1s ease .5s forwards;
	animation: zoomIn 1s ease .5s forwards;
}

.iconBottom {
	-webkit-animation: zoomInSmall 1s ease .7s forwards;
	animation: zoomInSmall 1s ease .7s forwards;
}

.flyLeft {
	-webkit-animation: flyLeft 1s ease-in 0s forwards;
	animation: flyLeft 1s ease-in 0s forwards;
}

.flyRight {
	-webkit-animation: flyBottom 1.2s ease-in 0s forwards;
	animation: flyBottom 1.2s ease-in 0s forwards;
}

.flyBottom {
	-webkit-animation: flyRight 1.1s ease-in 0s forwards;
	animation: flyRight 1.1s ease-in 0s forwards;
}

.delay0005 {
	animation-delay: .05s;
}

.delay0015 {
	animation-delay: .15s;
}


.delay002 {
	animation-delay: .2s;
	-webkit-animation-delay: .2s;
	/* Safari 和 Chrome */
}

.delay003 {
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
	/* Safari 和 Chrome */
}

.delay004 {
	animation-delay: .4s;
	-webkit-animation-delay: .4s;
	/* Safari 和 Chrome */
}


.delay005 {
	animation-delay: .5s;
	-webkit-animation-delay: .5s;
	/* Safari 和 Chrome */
}

.delay006 {
	animation-delay: .6s;
	-webkit-animation-delay: .6s;
	/* Safari 和 Chrome */
}

.delay007 {
	animation-delay: .7s;
	-webkit-animation-delay: .7s;
	/* Safari 和 Chrome */
}

.delay008 {
	animation-delay: .8s;
	-webkit-animation-delay: .8s;
	/* Safari 和 Chrome */
}

.delay01 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	/* Safari 和 Chrome */
}

.delay015 {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	/* Safari 和 Chrome */
}

/*game css*/
.wrap.game-wrap .page1 {
	color: #fff;
}

.game-wrap .content .page1 {
	background: url(./images/game/bg1.png) no-repeat;
	background-size: 100%;
}

.game-wrap .content .page1 .image {
	background-image: url(./images/game/game10.0.png);
	background-size: cover;
}

.game-wrap .content .btn {
	background-color: #fff9ee;
	border: 1px solid #fff9ee;
	color: #fd426d;
}



.game-wrap .content .page3 {
	background-image: url(./images/game/welfare.png);
	height: 640px;
	width: 100%;
	background-size: 100% 100%;
}

.game-wrap .content .page4 {
	background-image: url(./images/game/community.png);
	height: 640px;
	width: 100%;
	background-size: 100% 100%;
}

.game-wrap .content .page5 {
	background-image: url(./images/game/video-zone.png);
	height: 640px;
	width: 100%;
	background-size: 100% 100%;
}

.game-wrap .content .page6 {
	background-image: url(./images/game/hupo.png);
	height: 640px;
	width: 100%;
	background-size: 100% 100%;
}

.game-wrap .page2 .icon1 {
	background: url(./images/game/icon1.png) 0 0;
	background-size: 82px 63px;
	width: 82px;
	height: 63px;
	left: 206px;
	top: 260px;
}

.game-wrap .page2 .icon2 {
	background: url(./images/game/icon2.png) 0 0;
	background-size: 94px 43px;
	width: 94px;
	height: 43px;
	left: 156px;
	top: 354px;
}

.game-wrap .page2 .icon3 {
	background: url(./images/game/icon3.png) 0 0;
	background-size: 107px 77px;
	width: 107px;
	height: 77px;
	left: 54px;
	top: 240px;
}

.game-wrap .page2 .icon4 {
	background: url(./images/game/icon4.png) 0 0;
	background-size: 104px 63px;
	width: 104px;
	height: 63px;
	left: 110px;
	top: 308px;
}

.game-wrap .page3 .icons {
	position: absolute;
	width: 100%;
	height: 412px;
	left: 0;
	top: 2px;
	transform-origin: 50% 70%;
	-webkit-transform-origin: 50% 70%;
}

.game-wrap .page3 .icon {
	background-image: url(./images/game/p3-icon.png);
	background-repeat: no-repeat;
	background-size: 415px;
	position: absolute;
}

.game-wrap .page3 .icon.icon1 {
	width: 25px;
	height: 33px;
	left: 121px;
	top: 148px;
	background-position: -149px -25px;
}

.game-wrap .page3 .icon.icon2 {
	width: 48px;
	height: 26px;
	top: 211px;
	left: 250px;
	background-position: -281px -80px;
}

.game-wrap .page3 .icon.icon3 {
	width: 32px;
	height: 34px;
	top: 275px;
	left: 93px;
	background-position: -124px -155px;
}

.game-wrap .page3 .icon.icon4 {
	width: 48px;
	height: 27px;
	top: 321px;
	left: 56px;
	background-position: -89px -195px;
}

.game-wrap .page3 .icon.icon5 {
	width: 20px;
	height: 13px;
	top: 314px;
	left: 129px;
	background-position: -161px -197px;
}

.game-wrap .page3 .icon.icon6 {
	width: 112px;
	height: 96px;
	top: 197px;
	left: 54px;
	background-position: -76px -58px;
}

.game-wrap .page3 .icon.icon7 {
	width: 95px;
	height: 78px;
	top: 264px;
	left: 208px;
	background-position: -256px -131px;
}

.game-wrap .page3 .icon.icon8 {
	width: 13px;
	height: 14px;
	top: 323px;
	left: 234px;
	background-position: -278px -221px;
}

@-webkit-keyframes animationZoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

@keyframes animationZoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	15% {
		opacity: 1;
		-webkit-transform: scale3d(1.3, 1.3, 1.3);
		transform: scale3d(1.3, 1.3, 1.3);
	}

	30% {
		-webkit-transform: scale3d(.8, .8, .8);
		transform: scale3d(.8, .8, .8);
	}

	45% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	60% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	75% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.icons .icon {
	opacity: 0;
}

.icons.animate {
	-webkit-animation: animationZoomIn 1s ease 0s forwards;
	animation: animationZoomIn 1s ease 0s forwards;
}

.icons.animate .icon1,
.icons.animate .icon2,
.icons.animate .icon3,
.icons.animate .icon4,
.icons.animate .icon5,
.icons.animate .icon6,
.icons.animate .icon7,
.icons.animate .icon8 {
	opacity: 1
}


@-webkit-keyframes bounceIn {

	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {

	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes wobble-i1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(10px, 5px);
		transform: translate(10px, 5px);
	}
}

@keyframes wobble-i1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(10px, 5px);
		transform: translate(10px, 5px);
	}
}

@-webkit-keyframes wobble-i2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-10px, -5px);
		transform: translate(-10px, -5px);
	}
}

@keyframes wobble-i2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-10px, -5px);
		transform: translate(-10px, -5px);
	}
}

@-webkit-keyframes wobble-i3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 7px);
		transform: translate(0, 7px);
	}

	50% {
		-webkit-transform: translate(-3px, 7px);
		transform: translate(-3px, 7px);
	}

	75% {
		-webkit-transform: translate(-5px, 0);
		transform: translate(-5px, 0);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes wobble-i3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 7px);
		transform: translate(0, 7px);
	}

	50% {
		-webkit-transform: translate(-3px, 7px);
		transform: translate(-3px, 7px);
	}

	75% {
		-webkit-transform: translate(-5px, 0);
		transform: translate(-5px, 0);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@-webkit-keyframes wobble-i4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -9px);
		transform: translate(0, -9px);
	}

	50% {
		-webkit-transform: translate(-3px, -9px);
		transform: translate(-3px, -9px);
	}

	75% {
		-webkit-transform: translate(-5px, 0);
		transform: translate(-5px, 0);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes wobble-i4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -9px);
		transform: translate(0, -9px);
	}

	50% {
		-webkit-transform: translate(-3px, -9px);
		transform: translate(-3px, -9px);
	}

	75% {
		-webkit-transform: translate(-5px, 0);
		transform: translate(-5px, 0);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

.page2 .animate .icon4 {
	-webkit-animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards, wobble-i1 10s linear 1s infinite alternate;
	animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards, wobble-i1 10s linear 1s infinite alternate;
}

.page2 .animate .icon3 {
	-webkit-animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) .3s forwards, wobble-i3 10s linear 1.1s infinite forwards;
	animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) .3s forwards, wobble-i3 10s linear 1.1s infinite forwards;
}

.page2 .animate .icon2 {
	-webkit-animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards, wobble-i2 10s linear 1.2s infinite alternate;
	animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards, wobble-i2 10s linear 1.2s infinite alternate;
}

.page2 .animate .icon1 {
	-webkit-animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards, wobble-i4 8s linear 1.3s infinite forwards;
	animation: bounceIn .8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards, wobble-i4 8s linear 1.3s infinite forwards;
}

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

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

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

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

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

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

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

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

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

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

.page3 .animate .icon8 {
	-webkit-animation: moveIn3 2.5s linear 1.2s 1.5 forwards;
	animation: moveIn3 2.5s linear 1.2s 1.5 forwards;
}

.page3 .animate .icon4 {
	-webkit-animation: moveIn 2.5s linear 1.1s 1.5 forwards;
	animation: moveIn 2.5s linear 1.1s 1.5 forwards;
}

.page3 .animate .icon2 {
	-webkit-animation: moveIn4 2.5s linear 1.3s 1.5 forwards;
	animation: moveIn4 2.5s linear 1.3s 1.5 forwards;
}

.page3 .animate .icon3 {
	-webkit-animation: rotateIn1 .5s linear 0s forwards, moveIn2 2.5s linear 1.2s 1.5 forwards;
	animation: rotateIn1 .5s linear 0s forwards, moveIn2 2.5s linear 1.2s 1.5 forwards;
}

.page3 .animate .icon1 {
	-webkit-animation: moveIn3 2.5s linear 1.4s 1.5 forwards;
	animation: moveIn3 2.5s linear 1.4s 1.5 forwards;
}

.page3 .animate .icon5 {
	-webkit-animation: moveIn5 2.5s linear 1.2s 1.5 forwards;
	animation: moveIn5 2.5s linear 1.2s 1.5 forwards;
}

@-webkit-keyframes rotateIn1 {
	0% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		transform: rotate3d(0, 0, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
		opacity: 1;
	}
}

@keyframes rotateIn1 {
	0% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		transform: rotate3d(0, 0, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
		opacity: 1;
	}
}

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

	50% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 1, 1, -360deg);
		transform: rotate3d(0, 1, 1, -360deg);
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 1, 1, 0);
		transform: rotate3d(0, 1, 1, 0);
	}
}

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

	50% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 1, 1, -360deg);
		transform: rotate3d(0, 1, 1, -360deg);
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 1, 1, 0);
		transform: rotate3d(0, 1, 1, 0);
	}
}

@-webkit-keyframes moveIn {

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

	25% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}
}

@keyframes moveIn {

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

	25% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}
}

@-webkit-keyframes moveIn2 {

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

	25% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}
}

@keyframes moveIn2 {

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

	25% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0);
	}
}

@-webkit-keyframes moveIn3 {

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

	25% {
		-webkit-transform: translate3d(5px, 3px, 0);
		transform: translate3d(5px, 3px, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, 3px, 0);
		transform: translate3d(-5px, 3px, 0);
	}
}

@keyframes moveIn3 {

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

	25% {
		-webkit-transform: translate3d(5px, 3px, 0);
		transform: translate3d(5px, 3px, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, 3px, 0);
		transform: translate3d(-5px, 3px, 0);
	}
}

@-webkit-keyframes moveIn4 {

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

	25% {
		-webkit-transform: translate3d(5px, -3px, 0);
		transform: translate3d(5px, -3px, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, -3px, 0);
		transform: translate3d(-5px, -3px, 0);
	}
}

@keyframes moveIn4 {

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

	25% {
		-webkit-transform: translate3d(5px, -3px, 0);
		transform: translate3d(5px, -3px, 0);
	}

	75% {
		-webkit-transform: translate3d(-5px, -3px, 0);
		transform: translate3d(-5px, -3px, 0);
	}
}

@-webkit-keyframes moveIn5 {

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

	25% {
		-webkit-transform: translate3d(0, 3px, 0);
		transform: translate3d(0, 3px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, 3px, 0);
		transform: translate3d(0, 3px, 0);
	}
}

@keyframes moveIn5 {

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

	25% {
		-webkit-transform: translate3d(0, 3px, 0);
		transform: translate3d(0, 3px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, 3px, 0);
		transform: translate3d(0, 3px, 0);
	}
}

/*@media all and (orientation: portrait) {
 body {
    zoom: 1;
 }
}
@media all and (orientation: landscape) {
 body {
    zoom: 1.8;
 }*/
.noscroll,
.oc-noscroll {
	overflow-y: scroll !important;
}


@media screen and (max-width: 320px) {
	.wrap {
		width: 320px;
		max-width: 320px;
	}

	#header {
		width: 320px !important;
		background-size: 320px auto;
	}

	.content {
		width: 320px;
	}

	.content .page {
		width: 320px;
	}

	.content .page .image2,
	.content .page .image3 {
		width: 320px;
	}
}