@charset "utf-8";
/* CSS Document */

/*intro*/
.intro{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #444;
  z-index: 99;
  overflow: hidden;
}
.pIntro{
  position:  absolute;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -150px;
  width: 300px;
  height: 150px;
  background: url(../images/intro.jpg) 0 0;  
}

/*open images*/
.open{
  position:fixed;
  width: 100%;
  height: 100%;
}

.open li{
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-transition:transform 8s linear;
  transition:transform 8s linear;
  opacity: 0;
}

.open li.p1{
  width: 100%; 
  height: 112%;
  background-image: url(../images/open/01.jpg); 
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}
.open li.p2{
  width: 108%;
  height: 100%;
  background-image: url(../images/open/02.jpg); 
  -webkit-transform: translate(0%,0);
  transform: translate(0%,0);
}
.open li.p3{ 
  background-image: url(../images/open/03.jpg);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}


.open li.p1.showNow{
  -webkit-transform: translate(0, -12%);
  transform: translate(0, -12%);
  opacity: 1;
}
.open li.p2.showNow{
  -webkit-transform: translate(-8%,0);
  transform: translate(-8%,0);
  opacity: 1;
}
.open li.p3.showNow{
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

@media screen and (orientation : portrait){
  .open li.p1{
    width: 130%;
    height: 100%;
    -webkit-transform: translate(-20%,0);
    transform: translate(-20%,0);
  }

  .open li.p2{
    width: 130%;
  }

  .open li.p1.showNow{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .open li.p2.showNow{
    -webkit-transform: translate(-20%, 0);
    transform: translate(-20%, 0);
  }
}