@charset "utf-8";

body {
  margin: 0;
}


pre {

  background-color: #3a3a3a;

  padding: 20px;

  border-radius: 5px;

}



.section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row;
  color: #fff;
  position: relative;
  background-position: center; background-size: cover; background-repeat: no-repeat; color:#fff;
}

#page-1 {
}


#page-2 {
  background-image:url("/image/main/section1.jpg"); 
}

#page-3 {
  background-image:url("/image/main/section2.jpg"); 
}

#page-4 {
 background-image:url("/image/main/section3.jpg"); 
}

#page-5 {
 background-image:url("/image/main/section4.jpg"); 
}

#page-6 {
 background-image:url("/image/main/section5.jpg"); 
}

#page-7 {
 background-image:url("/image/main/section6.jpg"); 
}

#page-8 {
 background-image:url("/image/main/section7.jpg"); 
}

#page-9 {
 background-image:url("/image/main/section7.jpg"); 
}

@media all and (max-width:767px) {
  #page-4 {
    background-image:url("/image/main/section3_mo.jpg"); 
   }
   #page-5 {
    background-image:url("/image/main/section4_mo.jpg"); 
   }
   #page-6 {
    background-image:url("/image/main/section5_mo.jpg"); 
   }
   
}  

 nav {
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 100;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  nav ul li a span {
    background: #fff;
  }
  
  nav li {
    display: block;
    width: 10px;
    height: 10px;
    margin: 16px;
    position: relative;
  }
  
  nav span:after {
    background: rgba(255, 255, 255, 0.15);
    position: absolute;
    content: "";
    display: block;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 100%;
    transition: 0.3s;
  }
  
  nav li .active span {
    background: #b10808;
    position: absolute;
  }
  
  nav li .active span:after {
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative;
  }
  
  nav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
  }
  
  nav ul li a.active span,
  nav ul li:hover a.active span {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
  }
  
  nav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #fff;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    transition: all 0.1s ease-in-out;
  }
  
  nav ul li:hover a span {
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
  }
  
  .pg-horizontal nav {
    width: 100vw;
    left: 0;
    bottom: 20px;
  }
  .pg-horizontal nav ul li {
    float: left;
  }