*, *: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%;
	}
}
body,html{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wrapper
{
	/* position: absolute;
	top: 0;
	left: 0; */
	height: 100%;
    width: 100%;
    max-width: 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; */
    -webkit-transform-style: flat;
	transform-style:flat;
}
.wrapper .page
{
	position: relative;
	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;
	background-size: 100% 100%;
}
.wrapper .page .page-wrapper{
    width: 1200px;
    height: 100%;
    position: absolute;
	top: 50%;
	left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wrapper .page .page-wrapper img{
    width: 121px;
    height: 121px;
}
.wrapper .page .page-wrapper span{
   font-size: 24px;
   margin: 30px 0;
   font-size: #333;
}
.wrapper .page .page-wrapper div{
    width: 370px;
 }
/* .wrapper .page.page1
{
    /*background-image: url(../images/alzs-bg1.png);*/
    background-size: 100% 100%;
}
.wrapper .page.page2
{
    background-image: url(../images/alzs-bg2.png);
    background-size: 100% 100%;
}
.wrapper .page.page3
{
    background-image: url(../images/alzs-bg3.png);
    background-size: 100% 100%;
}
.wrapper .page.page4
{
    background-image: url(../images/alzs-bg4.png);
    background-size: 100% 100%;
}
.wrapper .page.page5
{
    background-image: url(../images/alzs-bg5.png);

}
.wrapper .page.page6
{
    background-image: url(../images/alzs-bg6.png);
    background-size: 100% 100%;
} */
.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: 50px;
    width: 100%;
    height:calc(100vh - 50px);
    z-index: 1000;
	/* -webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1000; */
    -webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	will-change: opacity;
}
.nav-panel nav{
    width: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media(max-width:1200px) {
    .nav-panel nav,.wrapper .page .page-wrapper{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .wrapper .page{
       background-size: cover !important;
    }
    /* .wrapper .page .page-wrapper div{
        width: 80%;
    } */
}
@media(max-width:500px) {
    .wrapper .page .page-wrapper div{
        width: 80%;
    }
}
.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
{
    width: auto;
	list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.nav-panel ul .nav-btn
{
    width: 3.5em;
    height: 3.5em;
    margin-bottom: 2em;
    border-radius: 50%;
    -webkit-transition: border-color, -webkit-transform 0.3s;
	transition: border-color, transform 0.3s;
	will-change: border-color, transform;
	/* position: relative;
	overflow: hidden;
	width: 5em;
	height:5em;
	margin-bottom: 1em;
	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 img{
    width: 100%;
    height: 100%;
    display: block;
}
.nav-panel ul .nav-btn.active{
    /* width: 4.5em;
    height: 4.5em; */
    -webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
    box-shadow: 0px 0px 20px 0px rgba(7, 5, 5, 0.4);
}
.nav-panel ul .nav-btn:hover
{
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
    box-shadow: 0px 0px 20px 0px rgba(31, 31, 27, 0.1);

}
/* .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: yellow;
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
	background-color: yellow;
} */
.nav-panel .scroll-btn
{
	position: absolute;
	left: 2em;
	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;
}