html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html, body {
	line-height: 1;
	min-height:100%;
	font-family:Artial, Verdana, sans-serif;
}

body {
	background: #eeeeee;
	background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: linear-gradient(top, #eeeeee, #cccccc 100%);
	background-attachment:fixed;
}

ol, ul {
	list-style: none;
}

p {
	margin:1em 0;
	line-height:1.1em;
}

q {
	font-style:italic;
	color:#333;
}

h1 {
	font-size:2.91em;
	margin:0;
}

h1 > small {
	text-align:right;
	display:inline-block;
	font-size:.71em;
	text-indent:15em;
	color:#444;
}

h2 {
	color:inherit;
	font-size:1.91em;
	margin:2em 0 1em 0;
}

h2:first-child {margin-top:0;}

h3 {
	color:#333;
	font-size:1.41em;
	margin:1em 0;
}

h4 {
	color:#444;
	font-size:1.11em;
	margin:1em 0;
}

#progress {
	height:2%;
	background:#444;
	bottom:0;
	z-index:200;
}

#scrollbar {
	position:fixed;
	right:2px;
	height:50px;
	width:6px;
	background:#444;
	background:rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.6);
	z-index:300;
	border-radius:3px;
}

.skrollr-desktop #scrollbar {display:none;}

#bg1, #bg2, #bg3 {
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/star-bg2.jpg) repeat 0 0;
	background-size:100%
}

#bg2 {
	z-index:52;
	background-size:100%;
	background-blend-mode: color-burn;
}

#bg3 {
	z-index:53;
	background-image:url(../images/start-bg3.png);
	background-size:cover;
}

#intro {
	width:80%;
	left:50%;
	top:1em;
	margin-left:-40%;
	padding:2em;
	background:#fff;
	text-align:center;
	border-radius:1em;

	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#intro .arrows {
	font-size:2em;
	color:#09f;
}

#transform {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;

	.transform-origin(50%, 50%);
}

#properties {
	width:100%;
	height:100%;
	padding-top:10%;
	text-align:center;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#easing_wrapper {
	width:100%;
	height:100%;
}

#easing {
	top:10%;
	width:50%;
	z-index:101;
}

.drop {
	background:#09f;
	font-weight:bold;
	padding:1em;
}

#download {
	width:80%;
	left:10%;
	height:80%;
	padding:3em;
	border:0 solid #222;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.twitter-share-button, .twitter-follow-button {
	vertical-align:middle;
}







.app-header {
	position: fixed;
	top: 0;
	width: 640px;
	z-index: 100
}

.u-globalAudio {
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	position: fixed;
	left: 50%;
	margin-left: -27px;
	bottom: 28px;
	display: block;
}
/*
.u-globalAudio span {
	position: absolute;
	left: -60px;
	top: 10px;
	text-shadow: 1px 1px 1px #000;
	letter-spacing: 2px;
	-webkit-transition: all .2s linear;
	opacity: 0;
	-webkit-transform: translateX(-20px)
}
.u-globalAudio .icon-music {
	width: 54px;
	height: 54px;
	background: url(img/units-icons.png) 0 0;
	display: block
}
.u-globalAudio.z-play .icon-music {
	-webkit-animation: reverseRotataZ 1.2s linear infinite
}
.u-globalAudio span.z-show {
	opacity: 1;
	-webkit-transform: translateX(0px)
}
.u-globalAudio .coffee-steam-box {
	-webkit-transform: translate(-40px, -40px)
}
@-webkit-keyframes reverseRotataZ {
0% {
-webkit-transform:rotateZ(0deg)
}
100% {
-webkit-transform:rotateZ(-360deg)
}
}
@-webkit-keyframes rotataZ {
0% {
-webkit-transform:rotateZ(0deg)
}
100% {
-webkit-transform:rotateZ(360deg)
}
}*/








    
    .app-loading {
	position: fixed;
	top: 0;
	left: 0;
	margin:0 auto;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 1;
	-webkit-transition: all .5s;
	transition: all .5s;
	z-index: 99999;
	background-image:url(../images/bg2.png);
	background-color:#fefefe
}

.loading-box {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -40px auto auto -40px;
	width: 80px;
	height: 80px;
	display: block;
	opacity: 1;
	-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.3) ;
	box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.3) ;
	background-color:#1C2271
	
	
}
.loading-box img{
	width:100%;
	height:auto;}

.loading-box{
	animation: myfirst 5s infinite;
	-webkit-animation: myfirst 5s infinite;	/* Safari 和 Chrome */
	}




@keyframes myfirst
{
0%   {filter: blur(0px) ;}
40%   {filter: blur(0px) ;}
50%  {filter: blur(6px) ;}
60%  {filter: blur(0px) ;}
100%  {filter: blur(0px) ;}
}



@-webkit-keyframes myfirst
{
0%   {-webkit-filter: blur(0px) ;}
40%   {-webkit-filter: blur(0px) ;}
50%  {-webkit-filter: blur(6px) ;}
60%  {-webkit-filter: blur(0px) ;}
100%  {-webkit-filter: blur(0px) ;}
}


.app-loading.z-hide, .app-loading2.z-hide {
	opacity: 0;
	visibility: hidden
}
.app-loading .cycleWrap, .app-loading .lineWrap {
	position: absolute;
	width: 94px;
	height: 85px
}
.app-loading .cycle, .app-loading .line {
	display: block;
	position: absolute;
	background: #6eae44
}
.app-loading .cycle {
	z-index: 10;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0)
}
.app-loading .cycle-1 {
	right: 0;
	bottom: 0
}
.app-loading .cycle-2 {
	left: 0;
	bottom: 0
}
.app-loading .cycle-3 {
	left: 50%;
	top: 0;
	margin-left: -9px
}
.app-loading .cycle-4 {
	right: 18px;
	top: 50%;
	margin-top: -8px
}
.app-loading .line {
	z-index: 9;
	height: 5px;
	border-radius: 3px
}
.app-loading .line-1 {
	right: 9px;
	bottom: 6px;
	width: 78px;
	-webkit-transform: scale(0, 1);
	-moz-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: 0;
	-moz-transform-origin: 0;
	transform-origin: 0
}
.app-loading .line-2 {
	left: 8px;
	bottom: 4px;
	width: 80px;
	-webkit-transform: rotate(-60deg) scale(0, 1);
	-moz-transform: rotate(-60deg) scale(0, 1);
	transform: rotate(-60deg) scale(0, 1);
	-webkit-transform-origin: 0;
	-moz-transform-origin: 0;
	transform-origin: 0
}
.app-loading .line-3 {
	left: 47px;
	top: 7px;
	width: 40px;
	-webkit-transform: rotate(60deg) scale(0, 1);
	-moz-transform: rotate(60deg) scale(0, 1);
	transform: rotate(60deg) scale(0, 1);
	-webkit-transform-origin: 0;
	-moz-transform-origin: 0;
	transform-origin: 0
}
.app-loading .cycle-1 {
	-webkit-animation: cycleChange 3s infinite ease-in-out;
	moz-animation: cycleChange 3s infinite ease-in-out;
	animation: cycleChange 3s infinite ease-in-out
}
.app-loading .cycle-2 {
	-webkit-animation: cycleChange 3s .525s infinite ease-in-out;
	moz-animation: cycleChange 3s .525s infinite ease-in-out;
	animation: cycleChange 3s .525s infinite ease-in-out
}
.app-loading .cycle-3 {
	-webkit-animation: cycleChange 3s 1.05s infinite ease-in-out;
	moz-animation: cycleChange 3s 1.05s infinite ease-in-out;
	animation: cycleChange 3s 1.05s infinite ease-in-out
}
.app-loading .cycle-4 {
	-webkit-animation: cycleChange 3s 1.575s infinite ease-in-out;
	moz-animation: cycleChange 3s 1.575s infinite ease-in-out;
	animation: cycleChange 3s 1.575s infinite ease-in-out
}
.app-loading .line-1 {
	-webkit-animation: lineChange01 3s infinite ease-in-out;
	moz-animation: lineChange01 3s infinite ease-in-out;
	animation: lineChange01 3s infinite ease-in-out
}
.app-loading .line-2 {
	-webkit-animation: lineChange02 3s .525s infinite ease-in-out;
	moz-animation: lineChange02 3s .525s infinite ease-in-out;
	animation: lineChange02 3s .525s infinite ease-in-out
}
.app-loading .line-3 {
	-webkit-animation: lineChange03 3s 1.05s infinite ease-in-out;
	moz-animation: lineChange03 3s 1.05s infinite ease-in-out;
	animation: lineChange03 3s 1.05s infinite ease-in-out
}
@-webkit-keyframes cycleChange {
0%, 24%, 100% {
-webkit-transform:scale(0)
}
9% {
-webkit-transform:scale(1.2)
}
}
@-moz-keyframes cycleChange {
0%, 24%, 100% {
-moz-transform:scale(0)
}
9% {
-moz-transform:scale(1.2)
}
}
@keyframes cycleChange {
0%, 24%, 100% {
transform:scale(0)
}
9% {
transform:scale(1.2)
}
}
@-webkit-keyframes lineChange01 {
0% {
-webkit-transform:translate(76px, 0) scale(0, 1)
}
18.75% {
-webkit-transform:translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:translate(0, 0) scale(0, 1)
}
}
@-moz-keyframes lineChange01 {
0% {
-webkit-transform:translate(76px, 0) scale(0, 1)
}
18.75% {
-webkit-transform:translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:translate(, 0) scale(0, 1)
}
}
@keyframes lineChange01 {
0% {
-webkit-transform:translate(76px, 0) scale(0, 1) scale(0, 1)
}
18.75% {
-webkit-transform:translate(0, 0) scale(1, 1) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:translate(0, 0) scale(0, 1) scale(0, 1)
}
}
@-webkit-keyframes lineChange02 {
0% {
-webkit-transform:rotate(-60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(-60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(-60deg) translate(78px, 0) scale(0, 1)
}
}
@-moz-keyframes lineChange02 {
0% {
w-webkit-transform:rotate(-60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(-60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(-60deg) translate(78px, 0) scale(0, 1)
}
}
@keyframes lineChange02 {
0% {
-webkit-transform:rotate(-60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(-60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(-60deg) translate(78px, 0) scale(0, 1)
}
}
@-webkit-keyframes lineChange03 {
0% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(60deg) translate(40px, 0) scale(0, 1)
}
}
@-moz-keyframes lineChange03 {
0% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(60deg) translate(40px, 0) scale(0, 1)
}
}
@keyframes lineChange03 {
0% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(0, 1)
}
18.75% {
-webkit-transform:rotate(60deg) translate(0, 0) scale(1, 1)
}
37.5%, 100% {
-webkit-transform:rotate(60deg) translate(40px, 0) scale(0, 1)
}
}




.app-loading2 {
	background: url(img/app-loading.png) 0 0 no-repeat;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -48px auto auto -48px;
	width: 95px;
	height: 95px;
	display: block;
	-webkit-animation: rotataZ 1s linear infinite;
	opacity: 1;
	-webkit-transition: all .5s;
	z-index: 99999
}









.intro-wrap{
	width:100%;
	left:50%;
	top:0;
	bottom:0;
	margin-left:-50%;
	background:#fff;
	background-image:url(../images/intro-1.jpg);
	background-size:cover;
	background-position:top center;
	}

.year-wrap{
	width:90%;
	left:50%;
	top:0;
	margin-left:-45%;
	text-align:left;
	color:#fff
	}
.year-wrap p{
	margin:0}
.year-num{
	font-size:50px;}
	
	
.history-div{
	width:100%;}
.history-div img{
	width:100%;
	height:auto;}
	
	
.ease{
    -webkit-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
}
.linear{
    -webkit-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
}
.ease-in{
    -webkit-transition-timing-function:ease-in;
    -moz-transition-timing-function:ease-in;
}
.ease-out{
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
}
.ease-in-out{
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
}
.cubic-bezier{
    -webkit-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
    -moz-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
}