/*intro*/
.skip{ position:fixed; right:10px; bottom:10px; cursor:pointer;}
.intro .obj1{ 
position:absolute; top:45%; left:30%;  margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-01.png) 50% 50% no-repeat;
background-size:cover; background-origin:content-box;
-webkit-animation: uad 2s 0s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
-moz-animation:  uad 2s 0s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
animation:  uad 2s 0s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
}
.intro .obj2{
position:absolute; top:48%; left:38%;  margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-02.png) 50% 50% no-repeat;
background-size:cover; background-origin:content-box;
-webkit-animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
-moz-animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;

}
.intro .obj3{ 
position:absolute; top:44%; left:46%;  margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-03.png) 50% 50% no-repeat;
background-size:cover; background-origin:content-box;
-webkit-animation: uad 2s 0.3s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
-moz-animation: uad 2s 0.3s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
animation: uad 2s 0.3s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
}
.intro .obj4{ 
position:absolute; top:49%; left:54%; margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-04.png) 50% 50% no-repeat;
background-size:cover; background-origin:content-box;
-webkit-animation: uad 2s 0.2s 3 alternate , center 1s 2s 1 alternate forwards ,zoomOut 2s 3s alternate forwards;
-moz-animation: uad 2s 0.2s 3 alternate , center 1s 2s 1 alternate forwards ,zoomOut 2s 3s alternate forwards;
animation: uad 2s 0.2s 3 alternate , center 1s 2s 1 alternate forwards ,zoomOut 2s 3s alternate forwards;
}
.intro .obj5{ 
position:absolute; top:44%; left:62%; margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-05.png) 50% 50% no-repeat;
background-size:cover;
-webkit-animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
-moz-animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
animation: uad 2s 0.5s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
}
.intro .obj6{ 
position:absolute; top:47%; left:70%; margin:-39px 0 0 -45px; width:78px; height:90px; background:url(../images/animate/intro-obj-06.png) 50% 50% no-repeat;
background-size:cover; background-origin:content-box;
-webkit-animation: uad 2s 0.1s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
-moz-animation: uad 2s 0.1s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
animation: uad 2s 0.1s 3 alternate , center 1s 2s 1 alternate forwards , zoomOut 2s 3s alternate forwards;
}
.intro .obj7{ 
position:absolute; top:40%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; background:url(../images/animate/intro-obj-07.png) no-repeat;
background-size:cover; background-origin:content-box; opacity:0;
-webkit-animation: zoomIn 2s 4s alternate forwards;
-moz-animation:zoomIn 2s 4s alternate forwards;
animation: zoomIn 2s 4s alternate forwards
}
.intro .obj8{ 
position:absolute; top:40%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; background:url(../images/animate/intro-obj-08.png) no-repeat;
background-size:cover; background-origin:content-box; opacity:0;
-webkit-animation: zoomIn2 1s 5.5s alternate forwards;
-moz-animation:zoomIn2 1s 5.5s alternate forwards;
animation: zoomIn2 1s 5.5s alternate forwards
}
.intro .dot{
width:5px;
height:5px;
background:#5d514a no-repeat;
border-radius:5px;
background-size:cover; background-origin:content-box; opacity:0;
-webkit-animation: zoomIn2 1s 9.8s alternate forwards;
-moz-animation:zoomIn2 1s 9.8s alternate forwards;
animation: zoomIn2 1s 9.8s alternate forwards
}


/*上下*/
@-webkit-keyframes uad {
  0 {
     margin:-39px 0 0 -45px;
  }
  
  50% {
      margin:-20px 0 0 -45px;
  }

  100% {
      margin:-39px 0 0 -45px;
  }
}
@-moz-keyframes uad {
  0 {
     margin:-39px 0 0 -45px;
  }
  
  50% {
      margin:-20px 0 0 -45px;
  }

  100% {
      margin:-39px 0 0 -45px;
  }
}
@keyframes uad {
  0 {
     margin:-39px 0 0 -45px;
  }
  
  50% {
      margin:-20px 0 0 -45px;
  }

  100% {
      margin:-39px 0 0 -45px;
  }
}

/*集中*/
@-webkit-keyframes center {
	
  100% {
	  top:40%;
	  left:50%;
	  margin:-39px 0 0 -45px;
	  
  }

}
@-moz-keyframes center {

  100% {
	  top:40%;
	  left:50%;
	  margin:-39px 0 0 -45px;
  }
}
@keyframes center {

  100% {
	  top:40%;
	  left:50%;
	  margin:-39px 0 0 -45px;
  }
}

/*縮小*/
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);	
  }

  100% {
    opacity: 0;
	
  }
}
@-moz-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
	visibility: hidden;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  70% {
    opacity: 1;
	visibility:visible;
	transform:rotate(180deg);
  }
}
@-moz-keyframes zoomIn {
  0% {
    opacity: 0;
	visibility: hidden;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  70% {
    opacity: 1;
	visibility:visible;
	transform:rotate(180deg);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
	visibility: hidden;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  70% {
    opacity: 1;
	visibility:visible;
	transform:rotate(180deg);
  }
}
@-webkit-keyframes zoomIn2 {
  100% {
    opacity: 1;
  }
}
@-moz-keyframes zoomIn2 {

  100% {
    opacity: 1;
  }
}
@keyframes zoomIn2 {

  100% {
    opacity: 1;
  }
}