@import url(https://fonts.googleapis.com/earlyaccess/cwtexhei.css);

body {
    margin-top: 50px;
    font-family: 'Microsoft JhengHei', 'cwTeXHei', sans-serif;
}
.nav-show{
    margin-top: 0;
    animation:nav-show-animate 1s linear;
}

@keyframes nav-show-animate{
    from{
        margin-top: -100px;
    }
}

#first{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
}

#first div{
    opacity: 0;
    overflow: hidden;
}

#first span{
    white-space: nowrap;
    font-size: 8vw;
    color: #fff;
}

#first div:nth-child(1){
    position: absolute;
    bottom: 50%;
    animation: typing 1s steps(60, end);
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
}

#first::before{
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    filter: blur(0px);
    display: block;
    background-image: url("../images/1.JPG");
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

@keyframes typing {
  from {
      bottom: 20%;
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

#second{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
}

#second::before{
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    filter: blur(0px);
    display: block;
    background-image: url("../images/4.JPG");
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

#second span{
    white-space: nowrap;
    font-size: 8vw;
    color: #fff;
}

#second div:nth-child(1){
    position: absolute;
    bottom: 60%;
    right: 0;
    opacity: 0;
}

.page-animation{
    animation: typing 1s steps(60, end);
    animation-fill-mode:forwards;
}

#third{
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
}

#third::before{
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    filter: blur(0px);
    display: block;
    background-image: url("../images/3.JPG");
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

#third span{
    white-space: nowrap;
    font-size: 8vw;
    color: #fff;
}

#third div:nth-child(1){
    position: absolute;
    bottom: 30%;
    opacity: 0;
}

#fourth{
    position: absolute;
    top: 300%;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
}

#fourth::before{
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    filter: blur(0px);
    display: block;
    background-image: url("../images/2.JPG");
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

#fourth span{
    font-size: 8vw;
    color: #fff;
}

#fourth div:nth-child(1){
    position: absolute;
    bottom: 30%;
    opacity: 0;
}

#fiveth{
    position: absolute;
    top: 400%;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
}

#fiveth::before{
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    filter: blur(0px);
    display: block;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#fiveth div{
    color: #000;
}



@include keyframes(bounce) {
	0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
  }
	40% {
    @include transform(translateY(-30px));
  }
	60% {
    @include transform(translateY(-15px));
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
  filter: drop-shadow(rgba(0, 0, 0, 0.701961) 1px 1px 8px);
  z-index:10;
  cursor: pointer;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@media screen and (min-width: 1018px) {
    #first span,#second span,#third span,#fourth span{
        font-size: 4vw;
    }
    #fiveth div{
        font-size: 2vw;
    }
}