html,body{width:100%;height:100%;overflow:hidden}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
.inner,.nav-panel ul .nav-btn:after{content:"";position:absolute;top:50%;left:50%}

@media(max-width:767px){body{font-size:70%}}
.wrapper{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}

.wrapper .page{position:relative;width:100%;height:100%;transition:transform 0.5s ease-in-out;}

.wrapper .page.page1{background:url() no-repeat center center;background-size: cover;}
.wrapper .page.page2{background:url(../images/t1.jpg)no-repeat center center;background-size: cover;}
.wrapper .page.page3{background:url(../images/t2.jpg)no-repeat center center;background-size: cover;}
.wrapper .page.page4{background:url(../images/t3.jpg)no-repeat center center;background-size: cover;}
.wrapper .page.page5{background:url(../images/t44.jpg)no-repeat center center;background-size: cover;}
.wrapper .page.page6{background:url(../images/t6.jpg)no-repeat center center;background-size: cover;}
.wrapper .page.page7{background:url(../images/t5.jpg)no-repeat center center;background-size: cover;}

.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:2%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:1000;-webkit-transition:opacity .5s,-webkit-transform .5s cubic-bezier(.57,1.2,.68,2.6);transition:opacity .5s,transform .5s cubic-bezier(.57,1.2,.68,2.6);will-change:transform,opacity}
.nav-panel.invisible{opacity:0;-webkit-transform:translateY(-50%) scale(.5);-ms-transform:translateY(-50%) scale(.5);transform:translateY(-50%) scale(.5)}
.nav-panel ul{list-style-type:none}
.nav-panel ul .nav-btn{position:relative;overflow:hidden;width:1em;height:1em;margin-bottom:.5em;border:.12em solid #fff;border-radius:50%;cursor:pointer;-webkit-transition:border-color,-webkit-transform .3s;transition:border-color,transform .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(.3);-ms-transform:translateX(-50%) translateY(-50%) scale(.3);transform:translateX(-50%) translateY(-50%) scale(.3);background-color:#fff;opacity:0;-webkit-transition:-webkit-transform,opacity .3s;transition:transform,opacity .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(.7);-ms-transform:translateX(-50%) translateY(-50%) scale(.7);transform:translateX(-50%) translateY(-50%) scale(.7);opacity:1}
.nav-panel ul .nav-btn:hover{border-color:#ff0;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.nav-panel ul .nav-btn:hover:after{background-color:#ff0}
.nav-panel .scroll-btn{position:absolute;left:0;width:1em;height:1em;border:.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 .3s;transition:border-color .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:#ff0}
.check-out{position:absolute;bottom:1rem;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);font-size:2rem;color:#fff}
.check-out a{color:#faa;text-decoration:none;padding-bottom:.3rem;border-bottom:.2rem solid}