/* Global *//************************************************************/

body{ overflow:hidden; height:100vh; background: rgb(2,0,36); background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(54,43,130,1) 0%, rgba(63,79,213,1) 100%);}
.loading{position:absolute; z-index:10000; top:0; left:0; width:100%; height:100%; background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(54,43,130,1) 0%, rgba(63,79,213,1) 100%); transition:all 0.5s}
.loading.done{ top:-100%; opacity:0}
.main{ position:absolute; top:50%; transform:translateY(-50%); width:100%}
.pageArea{ margin:0 auto; max-width:500px}
.page{ position:relative; cursor:url(../images/scrollicon.png), auto}
.aniImg{ position:absolute; opacity:0; width:100%}
.fixBG{ max-width:500px; width:100%}
.statusBar{ position:fixed; bottom:0; width:100%; height:5px; background-color:rgba(0,0,0,0.5)}
.statusBar .currStatus{ position:absolute; height:5px; background-color:rgba(255,255,255,0.5); transition: width .5s;}

/* loading icon *//************************************************************/
@keyframes loading-icon-1 {
	0% { top: 18.391499999999994px; height: 164.21699999999998px }
	50% { top: 57.285px; height: 86.42999999999999px }
	100% { top: 57.285px; height: 86.42999999999999px }
}
@keyframes loading-icon-2 {
	0% { top: 28.114875000000005px; height: 144.77024999999998px }
	50% { top: 57.285px; height: 86.42999999999999px }
	100% { top: 57.285px; height: 86.42999999999999px }
}
@keyframes loading-icon-3 {
	0% { top: 37.838249999999995px; height: 125.3235px }
	50% { top: 57.285px; height: 86.42999999999999px }
	100% { top: 57.285px; height: 86.42999999999999px }
}
.loading-icon div { position: absolute; width: 30.15px }.loading-icon div:nth-child(1) {
	left: 35.175px;
	background: rgba(178, 178, 178, 0.4890967485981602);
	animation: loading-icon-1 1s cubic-bezier(0,0.5,0.5,1) infinite;
	animation-delay: -0.2s
}
.loading-icon div:nth-child(2) {
	left: 85.425px;
	background: rgba(208, 208, 208, 0.4974838453723538);
	animation: loading-icon-2 1s cubic-bezier(0,0.5,0.5,1) infinite;
	animation-delay: -0.1s
}
.loading-icon div:nth-child(3) {
	left: 135.67499999999998px;
	background: rgba(255, 255, 255, 0.4890967485981602);
	animation: loading-icon-3 1s cubic-bezier(0,0.5,0.5,1) infinite;
	animation-delay: undefineds
}

.loadingio-spinner-pulse-d1aue2ncrcm { width: 200px; height: 200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow: hidden; background: none;}
.loading-icon { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0;}
.loading-icon div { box-sizing: content-box; }

/* Page Animation *//************************************************************/

.page.slick-active .ani1-1{ animation: fadein 0.3s linear forwards 0.5s; }
.page.slick-active .ani1-2{ animation: zoomout 0.3s linear forwards 1s; }
.page.slick-active .ani1-3{ animation: fadein 0.5s linear forwards 1.5s; width:22%; top: 85%; left:50%; transform:translateX(-50%) }

.page.slick-active .ani2-1{ animation: right 0.5s linear forwards 0.5s; }
.page.slick-active .ani2-2{ animation: left 0.5s linear forwards 0.75s; }
.page.slick-active .ani2-3{ animation: right 0.5s linear forwards 1s; }

.page.slick-active .ani3-1{ animation: chartUpTop 0.5s linear forwards 0.5s; }
.page.slick-active .ani3-2{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani3-3{ animation: chartUpTop 0.5s linear forwards 1.25s; transform-origin: 50% 30%}
.page.slick-active .ani3-4{ animation: chartUpBottom 0.5s linear forwards 2s;  transform-origin: 50% 90% }
.page.slick-active .ani3-5{ animation: fadein 0.5s linear forwards 2.5s; }
.page.slick-active .ani3-6{ animation: chartUpBottom 0.5s linear forwards 2.75s; transform-origin: 50% 70%}

.page.slick-active .ani4-1{ animation: chartUpTop 0.5s linear forwards 0.5s; }
.page.slick-active .ani4-2{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani4-3{ animation: chartUpBottom 0.5s linear forwards 1.5s;  transform-origin: 50% 85% }
.page.slick-active .ani4-4{ animation: fadein 0.5s linear forwards 2s; }

.page.slick-active .ani5-1{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani5-2{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani5-3{ animation: zoomin 0.5s linear forwards 0.5s; }
.page.slick-active .ani5-4{ animation: zoomin 0.5s linear forwards 0.5s; }

.page.slick-active .ani5a-1, .page.slick-active .ani5a-2, .page.slick-active .ani5a-3, .page.slick-active .ani5a-4{ opacity:1  }
.page.slick-active .ani5a-top{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 30% }
.page.slick-active .ani5a-1-text{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani5a-bottom{ animation: chartUpTop 0.5s linear forwards 1.5s; transform-origin: 50% 80% }
.page.slick-active .ani5a-4-text{ animation: fadein 0.5s linear forwards 2s; }

.page.slick-active .ani5b-1, .page.slick-active .ani5b-2, .page.slick-active .ani5b-3, .page.slick-active .ani5b-4{ opacity:1  }
.page.slick-active .ani5b-top{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 30% }
.page.slick-active .ani5b-2-text{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani5b-bottom{ animation: chartUpTop 0.5s linear forwards 1.5s; transform-origin: 50% 80% }
.page.slick-active .ani5b-3-text{ animation: fadein 0.5s linear forwards 2s; }

.page.slick-active .ani6-1{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani6-2{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani6-3{ animation: zoomin 0.5s linear forwards 0.5s; }

.page.slick-active .ani6a-1, .page.slick-active .ani6a-2, .page.slick-active .ani6a-3{ opacity:1  }
.page.slick-active .ani6a-1-box{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 30% }
.page.slick-active .ani6a-1-text{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani6a-3-box{ animation: chartUpTop 0.5s linear forwards 1.5s; transform-origin: 50% 80% }
.page.slick-active .ani6a-3-text{ animation: fadein 0.5s linear forwards 2s; }

.page.slick-active .ani6b-1, .page.slick-active .ani6b-2, .page.slick-active .ani6b-3{ opacity:1  }
.page.slick-active .ani6b-2-box{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 80% }
.page.slick-active .ani6b-2-text{ animation: fadein 0.5s linear forwards 1s; }

.page.slick-active .ani7-1{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani7-2{ animation: zoomin 0.5s linear forwards 0.5s; transform-origin: 50% 60% }
.page.slick-active .ani7-3{ animation: zoomin 0.5s linear forwards 0.5s; }

.page.slick-active .ani7a-1, .page.slick-active .ani7a-2, .page.slick-active .ani7a-3{ opacity:1  }
.page.slick-active .ani7a-1-box{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 30% }
.page.slick-active .ani7a-1-text{ animation: fadein 0.5s linear forwards 1s; }
.page.slick-active .ani7a-3-box{ animation: chartUpTop 0.5s linear forwards 1.5s; transform-origin: 50% 80% }
.page.slick-active .ani7a-3-text{ animation: fadein 0.5s linear forwards 2s; }

.page.slick-active .ani7b-1, .page.slick-active .ani7b-2, .page.slick-active .ani7b-3{ opacity:1  }
.page.slick-active .ani7b-2-box{ animation: chartUpTop 0.5s linear forwards 0.5s; transform-origin: 50% 30% }
.page.slick-active .ani7b-2-text{ animation: fadein 0.5s linear forwards 1s; }


.page.slick-active .ani8-1{ animation: left 0.5s linear forwards 0.5s; }
.page.slick-active .ani8-2{ animation: right 0.5s linear forwards 0.5s; }
.page.slick-active .ani8-3{ animation: left 0.5s linear forwards 0.75s; }
.page.slick-active .ani8-4{ animation: right 0.5s linear forwards 0.75s; }
.page.slick-active .ani8-5{ animation: left 0.5s linear forwards 1s; }
.page.slick-active .ani8-6{ animation: right 0.5s linear forwards 1s; }

.page.slick-active .ani9-1{ animation: right 0.5s linear forwards 0.5s; }
.page.slick-active .ani9-2{ animation: left 0.5s linear forwards 0.75s; }
.page.slick-active .ani9-3{ animation: right 0.5s linear forwards 1s; }


.page.slick-active .ani10-1{ animation: fadein 0.5s linear forwards 0.5s; }
.page.slick-active .ani10-2{ animation: fadein 0.5s linear forwards 1s; width:35%; top: 67.5%; left:50%; transform:translateX(-50%) }
.page.slick-active .ani10-3{ animation: fadein 0.5s linear forwards 1.25s; width:35%; top: 75.5%; left:50%; transform:translateX(-50%) }
.page.slick-active .ani10-4{ animation: fadein 0.5s linear forwards 1.5s; width:35%; top: 83.5%; left:50%; transform:translateX(-50%) }
.page.slick-active .ani10-5{ animation: fadein 0.5s linear forwards 2s; width:10%; top:3%; right:5% }
.page.slick-active .ani10-6{ animation: fadein 0.5s linear forwards 0.5s; width:33.3%; bottom: 3%; left:2%; }

/************************************************************/

@keyframes top {
	0% { opacity: 0; transform: translateY(-50%); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes right {
	0% { opacity: 0; transform: translateX(50%); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes bottom {
	0% { opacity: 0; transform: translateY(50%); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes left {
	0% { opacity: 0; transform: translateX(-50%); }
	100% { opacity: 1; transform: translateX(0); }
}

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

@keyframes zoomin {
	0% { opacity: 0;  transform:scale(0.5) }
	100% { opacity: 1; transform:scale(1) }
}

@keyframes zoomout {
	0% { opacity: 0;  transform:scale(1.5) }
	100% { opacity: 1; transform:scale(1) }
}

@keyframes chartUpTop {
	0% { opacity: 0; transform:scaleY(0); }
	100% { opacity: 1; transform:scaleY(1); }
}

@keyframes chartUpBottom {
	0% { opacity: 0; transform: scaleY(0); }
	100% { opacity: 1; transform: scaleY(1); }
}