body, html {
  padding: 0;
  margin: 0;
}

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

#container, .section {
  height: 100%;
  position: relative;
}

#section0,  #section1,  #section2,  #section3,  #section4 {

}

#section0 {
  background-color: #000;
}

#section1 {
  color: #333;
  background-image: url(/images/index_07.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:100% 100%; 
}

#section2 {
  color: #333;
  background-image: url(/images/index_08.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size:100% 100%; 
}

#section3 {
  color: #333;
  background-color: #f4f4f4;
}

#section4 {
  color: #333;
  background-color:#000000;
  background-image: url(/images/index_10.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:100% 100%; 
}

#section0 p { color: #F1FF00; }

#section3 p { color: #00A3AF; }

.left { float: left; }

.intro {
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

#pages {
  position: fixed; z-index:99999999;
  right: 15px;
  top: 45%;
  list-style: none;
  height:150px; padding:33px 0px 0px 0px;
  background-image: url(a_page.png);
  background-repeat: no-repeat;
  background-position: top right;
}

#pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7e7e7;
  margin: 0 0 10px 5px;
}

#pages li.active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ce8f2c;
  margin: 0 0 10px 5px;
}
}

#section0 .title {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
  animation: sectitle0 1s ease-in-out 100ms forwards;
}

#section0 p {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: sec0 1s ease-in-out 100ms forwards;
  animation: sec0 1s ease-in-out 100ms forwards;
}
 @-webkit-keyframes 
sectitle0 {  0% {
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @keyframes 
sectitle0 {  0% {
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @-webkit-keyframes 
sec0 {  0% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @keyframes 
sec0 {  0% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}