/**, *:before, *:after
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}*/

.inner, .nav-panel ul .nav-btn:after
{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
}

html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@media (max-width: 767px)
{
	body
	{
		font-size: 70%;
	}
}

.wrapper
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 1.5s;
	transition: transform 1.5s;
	-webkit-perspective: 3000;
	perspective: 3000;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.wrapper .page
{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform: rotateX(180deg) scale(0.3);
	transform: rotateX(180deg) scale(0.3);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	will-change: transform;
}
.wrapper .page h2
{

}
.wrapper .page.page1
{
/*	background-color: #66a6b8;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #66a6b8), color-stop(80%, #5471B9));
	background-image: -webkit-linear-gradient(-280deg, #66a6b8 20%, #5471B9 80%);
	background-image: -webkit-linear-gradient(80deg, #66a6b8 20%, #5471B9 80%);
	background-image: linear-gradient(10deg,#66a6b8 20%, #5471B9 80%);*/
}
.wrapper .page.page2
{
    background: url(/skin/images/banner-about-2.jpg);
/*	background-color: #f29c54;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f29c54), color-stop(100%, #DB4367));
	background-image: -webkit-linear-gradient(-315deg, #f29c54 0%, #DB4367 100%);
	background-image: -webkit-linear-gradient(45deg, #f29c54 0%, #DB4367 100%);
	background-image: linear-gradient(45deg,#f29c54 0%, #DB4367 100%);*/
}
.wrapper .page.page3
{
    background: url(/skin/images/banner-news.jpg);
/*	background-color: #23af56;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23af56), color-stop(100%, #67A79A));
	background-image: -webkit-linear-gradient(-405deg, #23af56 0%, #67A79A 100%);
	background-image: -webkit-linear-gradient(315deg, #23af56 0%, #67A79A 100%);
	background-image: linear-gradient(135deg,#23af56 0%, #67A79A 100%);*/
}
.wrapper .page.page4
{
    background: url(/skin/images/banner-pro-2.jpg);
	/*background-color: #412F2F;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
	background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
	background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
	background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);*/
}
.wrapper .page.page5
{
    background: url(/skin/images/banner-case-2.jpg);
}
.wrapper .page.page6
{
    background: url(/skin/images/banner-zs.jpg);
}
.wrapper.active-page1
{
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page2
{
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page3
{
	-webkit-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page4
{
	-webkit-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page5
{
	-webkit-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page6
{
	-webkit-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page7
{
	-webkit-transform: translateY(-600%);
	-ms-transform: translateY(-600%);
	transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page8
{
	-webkit-transform: translateY(-700%);
	-ms-transform: translateY(-700%);
	transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page9
{
	-webkit-transform: translateY(-800%);
	-ms-transform: translateY(-800%);
	transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.wrapper.active-page10
{
	-webkit-transform: translateY(-900%);
	-ms-transform: translateY(-900%);
	transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.nav-panel
{
	position: fixed;
	top: 50%;
	right: 1em;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1000;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
	transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
	will-change: transform, opacity;
}
.nav-panel.invisible
{
	opacity: 0;
	-webkit-transform: translateY(-50%) scale(0.5);
	-ms-transform: translateY(-50%) scale(0.5);
	transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
	list-style-type: none;
}
.nav-panel ul .nav-btn
{
	position: relative;
	overflow: hidden;
	width: 1em;
	height: 1em;
	margin-bottom: 0.5em;
	border: 0.12em solid #fff;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transition: border-color, -webkit-transform 0.3s;
	transition: border-color, transform 0.3s;
	will-change: border-color, transform;
}
.nav-panel ul .nav-btn:after
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
	transform: translateX(-50%) translateY(-50%) scale(0.3);
	background-color: #fff;
	opacity: 0;
	-webkit-transition: -webkit-transform, opacity 0.3s;
	transition: transform, opacity 0.3s;
	will-change: transform, opacity;
}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after
{
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
	transform: translateX(-50%) translateY(-50%) scale(0.7);
	opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
	border-color: #ec4e4f;
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
	background-color: #ec4e4f;
}
.nav-panel .scroll-btn
{
	position: absolute;
	left: 0;
	width: 1em;
	height: 1em;
	border: 0.2em solid #fff;
	border-left: none;
	border-bottom: none;
	cursor: pointer;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: border-color 0.3s;
	transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
	top: -1.6em;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
	bottom: -1.2em;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
	border-color: yellow;
}