@charset "utf-8";

.object1 div,
.object2 div,
.object3 div,
.object4 div,
.object5 div,
.object6 div,
.object7 div,
.object8 div,
.object9 div,
.object10 div {
  background: url("./icon1.png") no-repeat
}

.object10 div,
.object11 div,
.object12 div,
.object13 div,
.object14 div,
.object15 div,
.object16 div,
.object17 div {
  background: url("./icon2.png") no-repeat
}

.stone {
  position: absolute;
  opacity: 0
}

h2 img {
  opacity: 0
}

.item-1 .content {
  height: 600px;
  margin-top: -300px
}

.item-1 .content h2 {
  height: 38px
}

.item-1 .stage {
  width: 100%;
  left: auto;
  margin-left: 0;
  position: relative;
  bottom: 55px
}

.item-1 .stage .flybase {
  width: 910px;
  height: 600px;
  margin: 0 auto;
  zoom: 1;
  position: relative;
  overflow: hidden
}

.item-1 .stage .phone_box {
  width: 268px;
  height: 161px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -134px;
  opacity: 0;
  background: url("./bag.png") no-repeat;
  z-index: 10
}

.item-1 .base_container {
  position: absolute;
  left: 50%;
  top: 103px;
  height: 350px;
  margin-left: -200px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 70%;
  perspective-origin: 50% 70%
}

.light_v {
  position: absolute;
  width: 910px;
  height: 650px;
  left: 50%;
  margin-left: -444px;
  top: -200px;
  -webkit-perspective: 930px;
  perspective: 930px;
  -webkit-perspective-origin: 50% 70%;
  perspective-origin: 50% 70%;
  transform: translateZ(-250px);
  -webkit-transform: translateZ(-250px);
  opacity: 0;
  background: url("./highlight.png") no-repeat bottom center
}

.base {
  width: 400px;
  height: 350px
}

.base .base_inner {
  opacity: 0
}

.base .base_inner .object {
  position: absolute;
  width: 95px;
  height: 95px;
  left: 200px;
  top: 350px
}

.base .base_inner .object div {
  opacity: 0
}

.base .base_inner .object1 {
  transform: translate(109px, -329px)
}

.base .base_inner .object2 {
  transform: translate(256px, -254px)
}

.base .base_inner .object3 {
  transform: translate(144px, -123px)
}

.base .base_inner .object4 {
  transform: translate(-48px, -90px)
}

.base .base_inner .object5 {
  transform: translate(-244px, -130px)
}

.base .base_inner .object6 {
  transform: translate(30px, -212px)
}

.base .base_inner .object7 {
  transform: translate(-337px, -262px)
}

.base .base_inner .object8 {
  transform: translate(-140px, -190px)
}

.base .base_inner .object9 {
  transform: translate(-83px, -265px)
}

.base .base_inner .object10 {
  transform: translate(-207px, -315px)
}

.base .base_inner .object11 {
  transform: translate(-59px, -305px)
}

.base .base_inner .object12 {
  transform: translate(216px, -290px)
}

.base .base_inner .object13 {
  transform: translate(-160px, -240px)
}

.base .base_inner .object14 {
  transform: translate(109px, -212px)
}

.base .base_inner .object15 {
  transform: translate(-261px, -180px)
}

.base .base_inner .object16 {
  transform: translate(-102px, -143px)
}

.base .base_inner .object17 {
  transform: translate(41px, -143px)
}

.base .base_inner .object18 {
  transform: translate(176px, -162px)
}

.object1 div {
  width: 100%;
  height: 100%;
  background-position: -446px 0px
}

.object2 div {
  width: 100%;
  height: 100%;
  background-position: -593px -74px
}

.object3 div {
  width: 100%;
  height: 100%;
  background-position: -480px -206px
}

.object4 div {
  width: 100%;
  height: 100%;
  background-position: -289px -240px
}

.object5 div {
  width: 100%;
  height: 100%;
  background-position: -93px -199px
}

.object6 div {
  width: 100%;
  height: 100%;
  background-position: -366px -116px
}

.object7 div {
  width: 100%;
  height: 100%;
  background-position: 0 -67px
}

.object8 div {
  width: 100%;
  height: 100%;
  background-position: -197px -139px
}

.object9 div {
  width: 100%;
  height: 100%;
  background-position: -254px -64px
}

.object10 div {
  width: 100%;
  height: 100%;
  background-position: -74px -6px
}

.object10 {
  width: 70px !important;
  height: 70px !important
}

.object10 div {
  width: 100%;
  height: 100%;
  background-position: -74px -6px
}

.object11 {
  width: 70px !important;
  height: 70px !important
}

.object11 div {
  width: 100%;
  height: 100%;
  background-position: -222px -16px
}

.object12 {
  width: 70px !important;
  height: 70px !important
}

.object12 div {
  width: 100%;
  height: 100%;
  background-position: -498px -29px
}

.object13 {
  width: 70px !important;
  height: 70px !important
}

.object13 div {
  width: 100%;
  height: 100%;
  background-position: -120px -77px
}

.object14 {
  width: 70px !important;
  height: 70px !important
}

.object14 div {
  width: 100%;
  height: 100%;
  background-position: -391px -106px
}

.object15 {
  width: 70px !important;
  height: 70px !important
}

.object15 div {
  width: 100%;
  height: 100%;
  background-position: -18px -137px
}

.object16 {
  width: 70px !important;
  height: 70px !important
}

.object16 div {
  width: 100%;
  height: 100%;
  background-position: -180px -177px
}

.object17 {
  width: 70px !important;
  height: 70px !important
}

.object17 div {
  width: 100%;
  height: 100%;
  background-position: -323px -188px
}

.item-2 .content {
  margin: 0 auto;
  width: 1200px;
  height: 600px;
  margin-top: -300px
}

.item-2 .content h2 {
  height: 38px
}

@keyframes txt {
  from {
    opacity: 0;
    transform: translateY(60px)
  }

  to {
    opacity: 1;
    transform: translateY(0px)
  }
}

@-webkit-keyframes txt {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px)
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0px)
  }
}

.animate .vfcnt ul li:nth-of-type(1) {
  animation: ciclescale 200ms linear 500ms forwards;
  -webkit-animation: ciclescale 200ms linear 500ms forwards;
  -moz-animation: ciclescale 200ms linear 500ms forwards
}

.animate .vfcnt ul li:nth-of-type(2) {
  animation: ciclescale 200ms linear 700ms forwards;
  -webkit-animation: ciclescale 200ms linear 700ms forwards;
  -moz-animation: ciclescale 200ms linear 700ms forwards
}

.animate .vfcnt ul li:nth-of-type(3) {
  animation: ciclescale 200ms linear 900ms forwards;
  -webkit-animation: ciclescale 200ms linear 900ms forwards;
  -moz-animation: ciclescale 200ms linear 900ms forwards
}

.animate .vfcnt ul li:nth-of-type(4) {
  animation: ciclescale 200ms linear 1100ms forwards;
  -webkit-animation: ciclescale 200ms linear 1100ms forwards;
  -moz-animation: ciclescale 200ms linear 1100ms forwards
}

.animate .vfcnt ul li:nth-of-type(5) {
  animation: ciclescale 200ms linear 1300ms forwards;
  -webkit-animation: ciclescale 200ms linear 1300ms forwards;
  -moz-animation: ciclescale 200ms linear 1300ms forwards
}

.animate .vfcnt ul li:nth-of-type(6) {
  animation: ciclescale 200ms linear 1500ms forwards;
  -webkit-animation: ciclescale 200ms linear 1500ms forwards;
  -moz-animation: ciclescale 200ms linear 1500ms forwards
}

.animate .vfcnt ul li:nth-of-type(7) {
  animation: ciclescale 200ms linear 1700ms forwards;
  -webkit-animation: ciclescale 200ms linear 1700ms forwards;
  -moz-animation: ciclescale 200ms linear 1700ms forwards
}

.animate .vfcnt ul li:nth-of-type(8) {
  animation: ciclescale 200ms linear 1900ms forwards;
  -webkit-animation: ciclescale 200ms linear 1900ms forwards;
  -moz-animation: ciclescale 200ms linear 1900ms forwards
}