body {
  background-color: #a8d7cd;
  font-family: 'source-han-sans-traditional', 'Microsoft JhengHei', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#main {
  width: 1920px;
  height: 1080px;
  position: absolute;
  overflow: hidden;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.game-start {
  position: absolute;
  margin-top: 250px;
  margin-left: 500px;
  animation-name: gamestart;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay:2s;
  animation-duration: .5s;
}
@keyframes gamestart {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.game-DISC {
  position: absolute;
  margin-top: 20px;
  margin-left: 500px;
  animation-name: gameDISC;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay:2.5s;
  animation-duration: .5s;
}

@keyframes gameDISC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.left {
  width: 770px;
  height: 870px;
  margin: 95px 0 0 95px;
  float: left;
  position: relative;
  z-index: 2;
}
.left .title {
  width: 487px;
  height: 340px;
  float: left;
}
.left .title .text {
  width: 487px;
  height: 340px;
  float: left;
}
.left .title .text > div {
  float: left;
  background-image: url(../images/index/image01.png);
  background-repeat: no-repeat;
  opacity: 0;

  -webkit-transform: translate(0, 10px);

          transform: translate(0, 10px);
  -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
  transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
  transition: transform .5s ease-out, opacity .5s ease-out;
  transition: transform .5s ease-out, opacity .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .left .title .text > div {
  opacity: 1;

  -webkit-transform: translate(0, 0);

          transform: translate(0, 0);
}
.left .title .text > div:nth-child(1) {
  width: 165px;
  height: 165px;
  background-position: 0 0;
}
.left .title .text > div:nth-child(2) {
  width: 171px;
  height: 165px;
  background-position: -165px 0;
}
.left .title .text > div:nth-child(3) {
  width: 148px;
  height: 175px;
  clear: left;
  background-position: 0 -165px;
}
.left .title .text > div:nth-child(4) {
  width: 172px;
  height: 175px;
  background-position: -148px -165px;
}
.left .title .text > div:nth-child(5) {
  width: 167px;
  height: 175px;
  background-position: -320px -165px;
}
.left .title .text > div .flag {
  float: left;
  opacity: 0;

  -webkit-transform-origin: left center;

          transform-origin: left center;
  -webkit-transform: rotateY(540deg);
          transform: rotateY(540deg);
  -webkit-transition: opacity .1s, -webkit-transform .4s ease-out;
  transition: opacity .1s, -webkit-transform .4s ease-out;
  transition: transform .4s ease-out, opacity .1s;
  transition: transform .4s ease-out, opacity .1s, -webkit-transform .4s ease-out;
}
#wrap.animate .left .title .text > div .flag {
  opacity: 1;

  -webkit-transform: rotateY(0deg);

          transform: rotateY(0deg);
}
.left .title .text > div:nth-child(1) .flag {
  margin: 60px 0 0 15px;
}
.left .title .text > div:nth-child(2) .flag {
  margin: 112px 0 0 102px;
}
.left .title .text > div:nth-child(3) .flag {
  margin: 91px 0 0 22px;
}
.left .title .text > div:nth-child(4) .flag {
  margin: 110px 0 0 19px;
}
.left .title .text > div:nth-child(5) .flag {
  margin: 91px 0 0 34px;
}
.left .title .icon {
  width: 150px;
  height: 150px;
  margin-left: 327px;
  position: absolute;

  -webkit-perspective: 400px;

          perspective: 400px;
  -webkit-perspective-origin: 18px -154px;
          perspective-origin: 18px -154px;
}
.left .title .icon .space {
  width: 40px;
  height: 40px;
  position: absolute;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;
}
.left .title .icon .space:nth-child(1) {
  -webkit-transform: translateX(50px) translateY(81px) translateZ(-100px) rotateY(40deg);
          transform: translateX(50px) translateY(81px) translateZ(-100px) rotateY(40deg);
}
.left .title .icon .space:nth-child(2) {
  -webkit-transform: translateX(50px) translateY(125px)  translateZ(-100px) rotateY(40deg);
          transform: translateX(50px) translateY(125px)  translateZ(-100px) rotateY(40deg);
}
.left .title .icon .space:nth-child(3) {
  -webkit-transform: translateX(50px) translateY(169px) translateZ(-100px) rotateY(40deg);
          transform: translateX(50px) translateY(169px) translateZ(-100px) rotateY(40deg);
}
.left .title .icon .space div {
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: url(../images/index/image21.jpg);
  background-repeat: no-repeat;
  background-size: 180px auto;
  border: 2px solid #184453;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, .7);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, .7);
  opacity: 0;

  -webkit-transition: opacity .1s, -webkit-transform .5s ease-out;

  transition: opacity .1s, -webkit-transform .5s ease-out;

  transition: transform .5s ease-out, opacity .1s;

  transition: transform .5s ease-out, opacity .1s, -webkit-transform .5s ease-out;
}
#wrap.animate .left .title .icon .space div {
  opacity: 1;
}
.left .title .icon .space:nth-child(1) div {
  background-position: -45px 0;

  -webkit-transform: rotateX(180deg);

          transform: rotateX(180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  -webkit-animation: title-icon01 3s infinite 6s forwards linear;
          animation: title-icon01 3s infinite 6s forwards linear;
}
@-webkit-keyframes title-icon01 {
  from, 50% {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  58%, 90% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}
@keyframes title-icon01 {
  from, 50% {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  58%, 90% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}
#wrap.animate .left .title .icon .space:nth-child(1) div {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.left .title .icon .space:nth-child(2) div {
  background-position: 0 0;

  -webkit-transform: rotateX(-90deg);

          transform: rotateX(-90deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;

  -webkit-animation: title-icon02 3s infinite 6s forwards linear;

          animation: title-icon02 3s infinite 6s forwards linear;
}
@-webkit-keyframes title-icon02 {
  from, 66% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  74% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  82%, to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
@keyframes title-icon02 {
  from, 66% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  74% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  82%, to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
#wrap.animate .left .title .icon .space:nth-child(2) div {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.left .title .icon .space:nth-child(3) div {
  background-position: -90px 0;

  -webkit-transform: rotateX(180deg);

          transform: rotateX(180deg);
    -webkit-transform-origin: center top;
            transform-origin: center top;
  -webkit-animation: title-icon03 3s infinite 6s forwards linear;
          animation: title-icon03 3s infinite 6s forwards linear;
}
@-webkit-keyframes title-icon03 {
  from, 58% {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  66%, 82% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  90%, to {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}
@keyframes title-icon03 {
  from, 58% {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
  66%, 82% {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  90%, to {
    opacity: 1;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}
#wrap.animate .left .title .icon .space:nth-child(3) div {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.left .btn-wrap {
  width: 750px;
  height: 470px;
  margin-top: 72px;
  float: left;
}
.left .btn-wrap .btn01-wrap,
.left .btn-wrap .btn {
  width: 335px;
  float: left;
}
.left .btn-wrap .btn {
  opacity: 0;

  -webkit-transform: translate(0, 10px);

          transform: translate(0, 10px);
  -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
  transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
  transition: transform .5s ease-out, opacity .5s ease-out;
  transition: transform .5s ease-out, opacity .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .left .btn-wrap .btn {
  opacity: 1;

  -webkit-transform: translate(0, 0);

          transform: translate(0, 0);
}
.left .btn-wrap .btn01-wrap {
  height: 280px;
}
.left .btn-wrap .btn {
  width: 335px;
  height: 127px;
  background-color: #f0cd64;
  border-radius: 20px;
  border: 5px solid #184453;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, .7);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, .7);
  cursor: pointer;
}
.left .btn-wrap .btn01 {
  margin-top: 133px;
}
.left .btn-wrap .btn02 {
  margin: 133px 0 0 56px;
}
.left .btn-wrap .btn03 {
  margin: 56px 0 0 56px;
  background-color: #184453;
  border-radius: 63px;
  border: 5px solid #fff;
}
.left .btn-wrap .btn04 {
  clear: left;
  margin: 56px 0 0 0px;
}
.left .btn-wrap .btn .icon {
  position: absolute;
  z-index: 1;
}
.left .btn-wrap .btn01 .icon {
  margin: 15px 0 0 22px;

  -webkit-transform-origin: 57px 62px;

          transform-origin: 57px 62px;
  -webkit-transition: -webkit-transform .4s ease-out;
  transition: -webkit-transform .4s ease-out;
  transition: transform .4s ease-out;
  transition: transform .4s ease-out, -webkit-transform .4s ease-out;
}
#wrap.animate .left .btn-wrap .btn01 .icon {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.left .btn-wrap .btn02 .icon {
  margin: 14px 0 0 31px;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#wrap.animate .left .btn-wrap .btn02 .icon {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.left .btn-wrap .btn03 .icon {
  margin: 0 0 0 153px;
}
.left .btn-wrap .btn03 .icon .circle {
  width: 31px;
  height: 21px;
  margin: 112px 0 0 0;
  position: absolute;
  background-color: #fff;
  border: 5px solid #184453;
  border-radius: 100%;
  z-index: 2;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#wrap.animate .left .btn-wrap .btn03 .icon .circle {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.left .btn-wrap .btn03 .icon .circle02 {
  margin-left: 136px;
}
.left .btn-wrap .btn03 .icon .icon01 {
  width: 152px;
  height: 75px;
  margin: 51px 0 0 12px;
   position: absolute;
  overflow: hidden;
  z-index: 1;

  -webkit-transition: height .5s ease-out;

  transition: height .5s ease-out;
}
.left .btn-wrap .btn03 .icon .icon01 img {
  -webkit-transform-origin: center 76px;
          transform-origin: center 76px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .left .btn-wrap .btn03 .icon .icon01 img {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.left .btn-wrap .btn03 .icon .icon02 {
   position: absolute;
  z-index: 3;
}
.left .btn-wrap .btn03 .icon .icon02:nth-child(1) {
  margin: 14px 0 0 108px;
}
.left .btn-wrap .btn03 .icon .icon02:nth-child(2) {
  margin: 31px 0 0 132px;
}
.left .btn-wrap .btn03 .icon .icon02:nth-child(3) {
  margin: 45px 0 0 114px;
}
.left .btn-wrap .btn04 .icon {
  margin: 26px 0 0 27px;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#wrap.animate .left .btn-wrap .btn04 .icon {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.left .btn-wrap .btn div {
  margin-top: 12px;
  position: absolute;
  color: #184453;
  font-size: 28px;
  line-height: 51px;
  text-align: center;
  font-weight: 600;
  z-index: 2;
}
.left .btn-wrap .btn01 div {
  margin-left: 140px;
}
.left .btn-wrap .btn02 div {
  margin-left: 140px;
}
.left .btn-wrap .btn03 div {
  margin-left: 48px;
  color: #f0cd64;
}
.left .btn-wrap .btn04 div {
  margin-left: 180px;
}
.left .btn-wrap .btn01-image {
  width: 340px;
  height: 135px;
  position: absolute;
  overflow: hidden;
}
.left .btn-wrap .btn01-image .image03,
.left .btn-wrap .btn01-image .image04,
.left .btn-wrap .btn01-image .image05 {
  position: absolute;

  -webkit-transform: translate(0, 135px);

          transform: translate(0, 135px);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#wrap.animate .left .btn-wrap .btn01-image .image03,
#wrap.animate .left .btn-wrap .btn01-image .image04,
#wrap.animate .left .btn-wrap .btn01-image .image05 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.left .btn-wrap .btn01-image .image03 {
  margin-left: 197px;
  z-index: -1;

  -webkit-animation: image03 3s infinite 6s forwards linear;

          animation: image03 3s infinite 6s forwards linear;
}
@-webkit-keyframes image03 {
  from, 50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  58%, 74% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  82%, to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes image03 {
  from, 50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  58%, 74% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  82%, to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.left .btn-wrap .btn01-image .image04 {
  margin-left: 100px;
  z-index: -2;

  -webkit-animation: image04 3s infinite 6s forwards linear;

          animation: image04 3s infinite 6s forwards linear;
}
@-webkit-keyframes image04 {
  from, 58% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  66%, 82% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  90%, to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes image04 {
  from, 58% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  66%, 82% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  90%, to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.left .btn-wrap .btn01-image .image05 {
  z-index: -3;

  -webkit-animation: image05 3s infinite 6s forwards linear;

          animation: image05 3s infinite 6s forwards linear;
}
@-webkit-keyframes image05 {
  from, 66% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  74%, 90% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes image05 {
  from, 66% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  74%, 90% {
    -webkit-transform: translate(0, 135px);
            transform: translate(0, 135px);
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.bg .image06 {
  position: absolute;
  z-index: 1;
}
.bg .image06-01 {
  margin-left: 800px;

  -webkit-transform: rotate(-23deg) scale(.8) translate(0, 1500px);

          transform: rotate(-23deg) scale(.8) translate(0, 1500px);
  -webkit-animation: image06-01 27s infinite forwards linear;
          animation: image06-01 27s infinite forwards linear;
}
@-webkit-keyframes image06-01 {
  from {
    -webkit-transform: rotate(-23deg) scale(.8) translate(0, 1500px);
            transform: rotate(-23deg) scale(.8) translate(0, 1500px);
  }
  to {
    -webkit-transform: rotate(-23deg) scale(.8) translate(0, -300px);
            transform: rotate(-23deg) scale(.8) translate(0, -300px);
  }
}
@keyframes image06-01 {
  from {
    -webkit-transform: rotate(-23deg) scale(.8) translate(0, 1500px);
            transform: rotate(-23deg) scale(.8) translate(0, 1500px);
  }
  to {
    -webkit-transform: rotate(-23deg) scale(.8) translate(0, -300px);
            transform: rotate(-23deg) scale(.8) translate(0, -300px);
  }
}
.bg .image06-02 {
  margin-left: 1168px;

  -webkit-transform: rotate(-23deg) scale(.5) translate(0, 2500px);

          transform: rotate(-23deg) scale(.5) translate(0, 2500px);
  -webkit-animation: image06-02 22s infinite forwards linear;
          animation: image06-02 22s infinite forwards linear;
}
@-webkit-keyframes image06-02 {
  from {
    -webkit-transform: rotate(-23deg) scale(.5) translate(0, 2500px);
            transform: rotate(-23deg) scale(.5) translate(0, 2500px);
  }
  to {
    -webkit-transform: rotate(-23deg) scale(.5) translate(0, -300px);
            transform: rotate(-23deg) scale(.5) translate(0, -300px);
  }
}
@keyframes image06-02 {
  from {
    -webkit-transform: rotate(-23deg) scale(.5) translate(0, 2500px);
            transform: rotate(-23deg) scale(.5) translate(0, 2500px);
  }
  to {
    -webkit-transform: rotate(-23deg) scale(.5) translate(0, -300px);
            transform: rotate(-23deg) scale(.5) translate(0, -300px);
  }
}
.bg .image06-03 {
  margin-left: 1138px;

  -webkit-transform: rotate(-23deg) translate(0, 1500px);

          transform: rotate(-23deg) translate(0, 1500px);
  -webkit-animation: image06-03 15s infinite forwards linear;
          animation: image06-03 15s infinite forwards linear;
}
@-webkit-keyframes image06-03 {
  from {
    -webkit-transform: rotate(-23deg) translate(0, 1500px);
            transform: rotate(-23deg) translate(0, 1500px);
  }
  to {
    -webkit-transform: rotate(-23deg) translate(0, -300px);
            transform: rotate(-23deg) translate(0, -300px);
  }
}
@keyframes image06-03 {
  from {
    -webkit-transform: rotate(-23deg) translate(0, 1500px);
            transform: rotate(-23deg) translate(0, 1500px);
  }
  to {
    -webkit-transform: rotate(-23deg) translate(0, -300px);
            transform: rotate(-23deg) translate(0, -300px);
  }
}
.bg .image17 {
  margin: 383px 0 0 932px;
  position: absolute;
  z-index: 2;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
  -webkit-animation: image17 20s infinite 5s forwards linear;
          animation: image17 20s infinite 5s forwards linear;
}
@-webkit-keyframes image17 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes image17 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#wrap.animate .bg .image17,
#wrap.repeat .bg .image17 {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.bg .box-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;

  -webkit-transform: scale(1.2);

          transform: scale(1.2);
}
.bg .box {
  width: 98px;
  height: 98px;
  margin: 888px 0 0 1315px;
  position: absolute;

  -webkit-perspective: 3000px;

          perspective: 3000px;
  -webkit-perspective-origin: 0px -1500px;
          perspective-origin: 0px -1500px;
}
.bg .box .space {
  width: 98px;
  height: 98px;
  position: absolute;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
}
.bg .box .space > div {
  width: 90px;
  height: 90px;
  position: absolute;
  /*border: 4px solid #184453;*/
  background-image: url(../images/index/image21.jpg);
  background-repeat: no-repeat;
  opacity: 0;

  -webkit-transition: opacity .1s, -webkit-transform .5s ease-out;

  transition: opacity .1s, -webkit-transform .5s ease-out;

  transition: transform .5s ease-out, opacity .1s;

  transition: transform .5s ease-out, opacity .1s, -webkit-transform .5s ease-out;
}
#wrap.animate .bg .box .space > div {
  opacity: 1;
}
.bg .box .space > div:nth-child(1) {
  background-position: -180px 0;

  /*transform: rotateX(0deg); */ /* 加在最後 */
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
    -webkit-transform-origin: center top;
            transform-origin: center top;
}
#wrap.animate .bg .box .space > div:nth-child(1) {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.bg .box .space > div:nth-child(2) {
  background-position: -90px 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(45px) translateY(-90px) translateZ(45px) rotateY(90deg) rotateX(90deg);
          transform: translateX(45px) translateY(-90px) translateZ(45px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(2) {
  -webkit-transform: translateX(45px) translateY(-90px) translateZ(45px) rotateY(90deg) rotateX(0deg);
          transform: translateX(45px) translateY(-90px) translateZ(45px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(3) {
  background-position: 0 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateY(-90px) rotateX(-90deg);
          transform: translateY(-90px) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(3) {
  -webkit-transform: translateY(-90px) rotateX(0deg);
          transform: translateY(-90px) rotateX(0deg);
}
.bg .box .space > div:nth-child(4) {
  background-position: 0 0;

  /*transform: rotateY(0); */
  -webkit-transform: translateY(-90px) rotateY(0deg);
          transform: translateY(-90px) rotateY(0deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(4) {
  -webkit-transform: translateY(-90px) rotateY(-270deg);
          transform: translateY(-90px) rotateY(-270deg);
}
.bg .box .space > div:nth-child(5) {
  /*transform: rotateY(90deg); */
  transform: translateY(-135px) translateZ(-45px) rotateX(90deg) rotateY(90deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(5) {
  -webkit-transform: translateY(-135px) translateZ(-45px) rotateX(90deg) rotateY(0deg);
          transform: translateY(-135px) translateZ(-45px) rotateX(90deg) rotateY(0deg);
}
.bg .box .space > div:nth-child(6) {
  background-position: -270px 0;

  /*transform: rotateX(180deg); */
  -webkit-transform: translateX(45px) translateY(-180px) translateZ(45px) rotateY(90deg) rotateX(180deg);
          transform: translateX(45px) translateY(-180px) translateZ(45px) rotateY(90deg) rotateX(180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(6) {
  -webkit-transform: translateX(45px) translateY(-180px) translateZ(45px) rotateY(90deg) rotateX(0deg);
          transform: translateX(45px) translateY(-180px) translateZ(45px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(7) {
  background-position: -90px 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(90px) translateY(-180px) translateZ(90px) rotateY(-270deg);
          transform: translateX(90px) translateY(-180px) translateZ(90px) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(7) {
  -webkit-transform: translateX(90px) translateY(-180px) translateZ(90px) rotateY(0deg);
          transform: translateX(90px) translateY(-180px) translateZ(90px) rotateY(0deg);
}
.bg .box .space > div:nth-child(8) {
  background-position: 0 0;

  /*transform: rotateY(180deg); */
  -webkit-transform: translateX(90px) translateY(-180px) rotateY(180deg);
          transform: translateX(90px) translateY(-180px) rotateY(180deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(8) {
  -webkit-transform: translateX(90px) translateY(-180px) rotateY(90deg);
          transform: translateX(90px) translateY(-180px) rotateY(90deg);
}
.bg .box .space > div:nth-child(9) {
  background-position: -180px 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateY(-180px) translateZ(-90px) rotateX(-90deg);
          transform: translateY(-180px) translateZ(-90px) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(9),
#wrap.repeat .bg .box .space > div:nth-child(9) {
  -webkit-transform: translateY(-180px) translateZ(-90px) rotateX(0deg);
          transform: translateY(-180px) translateZ(-90px) rotateX(0deg);
}
.bg .box .space > div:nth-child(10) {
  background-position: -90px 0;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateY(-270px) translateZ(-90px) rotateX(-180deg);
          transform: translateY(-270px) translateZ(-90px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(10) {
  -webkit-transform: translateY(-270px) translateZ(-90px) rotateX(0deg);
          transform: translateY(-270px) translateZ(-90px) rotateX(0deg);
}
.bg .box .space > div:nth-child(11) {
  background-position: -90px 0;

  /*transform: rotateY(0); */
  -webkit-transform: translateY(-270px) translateZ(-90px) rotateY(0deg);
          transform: translateY(-270px) translateZ(-90px) rotateY(0deg);
    -webkit-transform-origin: right center;
            transform-origin: right center;
}
#wrap.animate .bg .box .space > div:nth-child(11) {
  -webkit-transform: translateY(-270px) translateZ(-90px) rotateY(90deg);
          transform: translateY(-270px) translateZ(-90px) rotateY(90deg);
}
.bg .box .space > div:nth-child(12) {
  background-position: -180px 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(90px) translateY(-270px) rotateY(-270deg);
          transform: translateX(90px) translateY(-270px) rotateY(-270deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(12) {
  -webkit-transform: translateX(90px) translateY(-270px) rotateY(0deg);
          transform: translateX(90px) translateY(-270px) rotateY(0deg);
}
.bg .box .space > div:nth-child(13) {
  background-position: 0 0;

  /*transform: rotateX(180deg); */
  -webkit-transform: translateX(90px) translateY(-180px) rotateX(180deg);
          transform: translateX(90px) translateY(-180px) rotateX(180deg);
    -webkit-transform-origin: center top;
            transform-origin: center top;
}
#wrap.animate .bg .box .space > div:nth-child(13) {
  -webkit-transform: translateX(90px) translateY(-180px) rotateX(90deg);
          transform: translateX(90px) translateY(-180px) rotateX(90deg);
}
.bg .box .space > div:nth-child(14) {
  background-position: -90px 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(135px) translateY(-270px) translateZ(45px) rotateY(90deg) rotateX(90deg);
          transform: translateX(135px) translateY(-270px) translateZ(45px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(14) {
  -webkit-transform: translateX(135px) translateY(-270px) translateZ(45px) rotateY(90deg) rotateX(0deg);
          transform: translateX(135px) translateY(-270px) translateZ(45px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(15) {
  background-position: 0 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(126px) translateY(-299px) translateZ(137px) rotateY(-270deg);
          transform: translateX(126px) translateY(-299px) translateZ(137px) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(15) {
  -webkit-transform: translateX(126px) translateY(-299px) translateZ(137px) rotateY(-90deg);
          transform: translateX(126px) translateY(-299px) translateZ(137px) rotateY(-90deg);
}
.bg .box .space > div:nth-child(16) {
  background-position: -90px 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(129px) translateY(-297px) translateZ(225px) rotateY(-270deg);
          transform: translateX(129px) translateY(-297px) translateZ(225px) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(16) {
  -webkit-transform: translateX(129px) translateY(-297px) translateZ(225px) rotateY(0deg);
          transform: translateX(129px) translateY(-297px) translateZ(225px) rotateY(0deg);
}
.bg .box .space > div:nth-child(17) {
  background-position: 0 0;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateX(129px) translateY(-387px) translateZ(225px) rotateX(-180deg);
          transform: translateX(129px) translateY(-387px) translateZ(225px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(17) {
  -webkit-transform: translateX(129px) translateY(-387px) translateZ(225px) rotateX(90deg);
          transform: translateX(129px) translateY(-387px) translateZ(225px) rotateX(90deg);
}
.bg .box .space > div:nth-child(18) {
  background-position: -270px 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateX(129px) translateY(-387px) translateZ(135px) rotateX(-90deg);
          transform: translateX(129px) translateY(-387px) translateZ(135px) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(18) {
  -webkit-transform: translateX(129px) translateY(-387px) translateZ(135px) rotateX(90deg);
          transform: translateX(129px) translateY(-387px) translateZ(135px) rotateX(90deg);
}
.bg .box .space > div:nth-child(19) {
  background-position: 0 0;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateX(39px) translateY(-387px) translateZ(45px) rotateX(-180deg);
          transform: translateX(39px) translateY(-387px) translateZ(45px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(19) {
  -webkit-transform: translateX(39px) translateY(-387px) translateZ(45px) rotateX(90deg);
          transform: translateX(39px) translateY(-387px) translateZ(45px) rotateX(90deg);
}
.bg .box .space > div:nth-child(20) {
  background-position: -180px 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(175px) translateY(-387px) translateZ(180px) rotateY(90deg) rotateX(90deg);
          transform: translateX(175px) translateY(-387px) translateZ(180px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(20) {
  -webkit-transform: translateX(175px) translateY(-387px) translateZ(180px) rotateY(90deg) rotateX(0deg);
          transform: translateX(175px) translateY(-387px) translateZ(180px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(21) {
  background-position: 0 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(175px) translateY(-387px) translateZ(90px) rotateY(90deg) rotateX(90deg);
          transform: translateX(175px) translateY(-387px) translateZ(90px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(21) {
  -webkit-transform: translateX(175px) translateY(-387px) translateZ(90px) rotateY(90deg) rotateX(0deg);
          transform: translateX(175px) translateY(-387px) translateZ(90px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(22) {
  background-position: -90px 0;

  /*transform: rotateY(90deg); */
  -webkit-transform: translateX(130px) translateY(-387px) translateZ(45px) rotateY(90deg);
          transform: translateX(130px) translateY(-387px) translateZ(45px) rotateY(90deg);
    -webkit-transform-origin: right center;
            transform-origin: right center;
}
#wrap.animate .bg .box .space > div:nth-child(22) {
  -webkit-transform: translateX(130px) translateY(-387px) translateZ(45px) rotateY(0deg);
          transform: translateX(130px) translateY(-387px) translateZ(45px) rotateY(0deg);
}
.bg .box .space > div:nth-child(23) {
  background-position: 0 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(84px) translateY(-387px) rotateY(90deg) rotateX(90deg);
          transform: translateX(84px) translateY(-387px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(23) {
  -webkit-transform: translateX(84px) translateY(-387px) rotateY(90deg) rotateX(0deg);
          transform: translateX(84px) translateY(-387px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(24) {
  background-position: 0 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateX(35px) translateY(-389px) translateZ(-41px) rotateX(-90deg);
          transform: translateX(35px) translateY(-389px) translateZ(-41px) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(24) {
  -webkit-transform: translateX(35px) translateY(-389px) translateZ(-41px) rotateX(0deg);
          transform: translateX(35px) translateY(-389px) translateZ(-41px) rotateX(0deg);
}
.bg .box .space > div:nth-child(25) {
  background-position: -180px 0;

  /*transform: rotateY(180deg); */
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-41px) rotateY(180deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-41px) rotateY(180deg);
    -webkit-transform-origin: right center;
            transform-origin: right center;
}
#wrap.animate .bg .box .space > div:nth-child(25) {
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-41px) rotateY(-90deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-41px) rotateY(-90deg);
}
.bg .box .space > div:nth-child(26) {
  background-position: 0 0;

  /*transform: rotateY(90deg); */
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-128px) rotateY(90deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-128px) rotateY(90deg);
    -webkit-transform-origin: right center;
            transform-origin: right center;
}
#wrap.animate .bg .box .space > div:nth-child(26) {
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-128px) rotateY(0deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-128px) rotateY(0deg);
}
.bg .box .space > div:nth-child(27) {
  background-position: -270px 0;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-38px) rotateX(-180deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-38px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(27) {
  -webkit-transform: translateX(-55px) translateY(-389px) translateZ(-38px) rotateX(90deg);
          transform: translateX(-55px) translateY(-389px) translateZ(-38px) rotateX(90deg);
}
.bg .box .space > div:nth-child(27) > div {
  width: 90px;
    height: 65px;
    margin-top: 12px;
    position: absolute;
    background-image: url(../images/index/image19.png);
    background-repeat: repeat-x;

    -webkit-animation: line01 .3s infinite forwards linear;

            animation: line01 .3s infinite forwards linear;
}
@-webkit-keyframes line01 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10px 0;
  }
}
@keyframes line01 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10px 0;
  }
}
.bg .box .space > div:nth-child(27) > div > div {
  width: 90px;
    height: 1px;
    margin-top: 32px;
    position: absolute;
    background-color: #f0cd64;
}
.bg .box .space > div:nth-child(28) {
  background-position: 0 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateX(-55px) translateY(-502px) translateZ(-41px) rotateY(-90deg) rotateX(-90deg);
          transform: translateX(-55px) translateY(-502px) translateZ(-41px) rotateY(-90deg) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(28) {
  -webkit-transform: translateX(-55px) translateY(-502px) translateZ(-41px) rotateY(-90deg) rotateX(0deg);
          transform: translateX(-55px) translateY(-502px) translateZ(-41px) rotateY(-90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(29) {
  background-position: -90px 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(-10px) translateY(-502px) translateZ(2px) rotateY(-270deg);
          transform: translateX(-10px) translateY(-502px) translateZ(2px) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(29) {
  -webkit-transform: translateX(-10px) translateY(-502px) translateZ(2px) rotateY(0deg);
          transform: translateX(-10px) translateY(-502px) translateZ(2px) rotateY(0deg);
}
.bg .box .space > div:nth-child(30) {
  background-position: -180px 0;

  /*transform: rotateX(180deg); */
  -webkit-transform: translateX(35px) translateY(-502px) translateZ(45px) rotateY(90deg) rotateX(180deg);
          transform: translateX(35px) translateY(-502px) translateZ(45px) rotateY(90deg) rotateX(180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(30) {
  -webkit-transform: translateX(35px) translateY(-502px) translateZ(45px) rotateY(90deg) rotateX(0deg);
          transform: translateX(35px) translateY(-502px) translateZ(45px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(31) {
  background-position: 0 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(80px) translateY(-502px) translateZ(90px) rotateY(-270deg);
          transform: translateX(80px) translateY(-502px) translateZ(90px) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(31) {
  -webkit-transform: translateX(80px) translateY(-502px) translateZ(90px) rotateY(0deg);
          transform: translateX(80px) translateY(-502px) translateZ(90px) rotateY(0deg);
}
.bg .box .space > div:nth-child(32) {
  background-position: 0 0;

  /*transform: rotateY(-180deg); */
  -webkit-transform: translateX(170px) translateY(-502px) translateZ(90px) rotateY(-180deg);
          transform: translateX(170px) translateY(-502px) translateZ(90px) rotateY(-180deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(32) {
  -webkit-transform: translateX(170px) translateY(-502px) translateZ(90px) rotateY(0deg);
          transform: translateX(170px) translateY(-502px) translateZ(90px) rotateY(0deg);
}
.bg .box .space > div:nth-child(33) {
  background-position: -90px 0;

  /*transform: rotateY(-270deg); */
  -webkit-transform: translateX(170px) translateY(-457px) translateZ(135px) rotateX(90deg) rotateY(-270deg);
          transform: translateX(170px) translateY(-457px) translateZ(135px) rotateX(90deg) rotateY(-270deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(33) {
  -webkit-transform: translateX(170px) translateY(-457px) translateZ(135px) rotateX(90deg) rotateY(0deg);
          transform: translateX(170px) translateY(-457px) translateZ(135px) rotateX(90deg) rotateY(0deg);
}
.bg .box .space > div:nth-child(34) {
  background-position: -270px 0;

  /*transform: rotateX(90deg); */
  -webkit-transform: translateX(215px) translateY(-502px) translateZ(135px) rotateY(90deg) rotateX(90deg);
          transform: translateX(215px) translateY(-502px) translateZ(135px) rotateY(90deg) rotateX(90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(34) {
  -webkit-transform: translateX(215px) translateY(-502px) translateZ(135px) rotateY(90deg) rotateX(0deg);
          transform: translateX(215px) translateY(-502px) translateZ(135px) rotateY(90deg) rotateX(0deg);
}
.bg .box .space > div:nth-child(34) > div {
  width: 65px;
    height: 90px;
    margin-left: 12px;
    position: absolute;
    background-image: url(../images/index/image20.png);
    background-repeat: repeat-y;

    -webkit-animation: line02 .3s infinite forwards linear;

            animation: line02 .3s infinite forwards linear;
}
@-webkit-keyframes line02 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 10px;
  }
}
@keyframes line02 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 10px;
  }
}
.bg .box .space > div:nth-child(34) > div > div {
  width: 1px;
    height: 90px;
    margin-left: 32px;
    position: absolute;
    background-color: #f0cd64;
}
.bg .box .space > div:nth-child(35) {
  background-color: #c96450;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateX(170px) translateY(-592px) translateZ(90px) rotateX(-180deg);
          transform: translateX(170px) translateY(-592px) translateZ(90px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(35) {
  -webkit-transform: translateX(170px) translateY(-592px) translateZ(90px) rotateX(90deg);
          transform: translateX(170px) translateY(-592px) translateZ(90px) rotateX(90deg);
}
.bg .box .space > div:nth-child(36) {
  background-position: 0 0;

  /*transform: rotateY(180deg); */
  -webkit-transform: translateY(-584px) translateZ(120px) rotateX(90deg) rotateY(180deg);
          transform: translateY(-584px) translateZ(120px) rotateX(90deg) rotateY(180deg);
    -webkit-transform-origin: right center;
            transform-origin: right center;
}
#wrap.animate .bg .box .space > div:nth-child(36) {
  -webkit-transform: translateY(-584px) translateZ(120px) rotateX(90deg) rotateY(0deg);
          transform: translateY(-584px) translateZ(120px) rotateX(90deg) rotateY(0deg);
}
.bg .box .space > div:nth-child(37) {
  background-position: -180px 0;

  /*transform: rotateX(-180deg); */
  -webkit-transform: translateX(-80px) translateY(-626px) translateZ(73px) rotateX(-180deg);
          transform: translateX(-80px) translateY(-626px) translateZ(73px) rotateX(-180deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(37) {
  -webkit-transform: translateX(-80px) translateY(-626px) translateZ(73px) rotateX(90deg);
          transform: translateX(-80px) translateY(-626px) translateZ(73px) rotateX(90deg);
}
.bg .box .space > div:nth-child(38) {
  background-position: -90px 0;

  /*transform: rotateX(-90deg); */
  -webkit-transform: translateX(-81px) translateY(-627px) translateZ(-14px) rotateX(-90deg);
          transform: translateX(-81px) translateY(-627px) translateZ(-14px) rotateX(-90deg);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
}
#wrap.animate .bg .box .space > div:nth-child(38) {
  -webkit-transform: translateX(-81px) translateY(-627px) translateZ(-14px) rotateX(0deg);
          transform: translateX(-81px) translateY(-627px) translateZ(-14px) rotateX(0deg);
}
.bg .box .space > div:nth-child(39) {
  background-position: 0 0;

  /*transform: rotateY(-180deg); */
  -webkit-transform: translateX(8px) translateY(-627px) translateZ(-14px) rotateY(-180deg);
          transform: translateX(8px) translateY(-627px) translateZ(-14px) rotateY(-180deg);
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
#wrap.animate .bg .box .space > div:nth-child(39) {
  -webkit-transform: translateX(8px) translateY(-627px) translateZ(-14px) rotateY(-90deg);
          transform: translateX(8px) translateY(-627px) translateZ(-14px) rotateY(-90deg);
}
.bg .image09 {
  margin: 563px 0 0 1470px;
  position: absolute;
  z-index: 5;

  -webkit-transform: scale(0) rotate(-61deg) rotateX(36deg);

          transform: scale(0) rotate(-61deg) rotateX(36deg);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
  -webkit-animation: image09 10s infinite 13s forwards linear;
          animation: image09 10s infinite 13s forwards linear;
}
@-webkit-keyframes image09 {
  from {
    -webkit-transform: scale(1) rotate(-61deg) rotateX(36deg);
            transform: scale(1) rotate(-61deg) rotateX(36deg);
  }
  to {
    -webkit-transform: scale(1) rotate(-420deg) rotateX(36deg);
            transform: scale(1) rotate(-420deg) rotateX(36deg);
  }
}
@keyframes image09 {
  from {
    -webkit-transform: scale(1) rotate(-61deg) rotateX(36deg);
            transform: scale(1) rotate(-61deg) rotateX(36deg);
  }
  to {
    -webkit-transform: scale(1) rotate(-420deg) rotateX(36deg);
            transform: scale(1) rotate(-420deg) rotateX(36deg);
  }
}
#wrap.animate .bg .image09 {
  -webkit-transform: scale(1) rotate(-61deg) rotateX(36deg);
          transform: scale(1) rotate(-61deg) rotateX(36deg);
}
.bg .image08 {
  margin: 559px 0 0 1438px;
  position: absolute;
  z-index: 4;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .bg .image08 {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.bg .image12 {
  position: absolute;
  z-index: 4;

  -webkit-transform-origin: left bottom;

          transform-origin: left bottom;
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .bg .image12 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.bg .image12-01 {
  margin: 195px 0 0 1320px;

  -webkit-transform: translate(0, -245px);

          transform: translate(0, -245px);
  -webkit-animation: image12-01 10s infinite 13s forwards linear;
          animation: image12-01 10s infinite 13s forwards linear;
}
@-webkit-keyframes image12-01 {
  from {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  13%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
@keyframes image12-01 {
  from {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  13%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
.bg .image12-02 {
  margin: 441px 0 0 1703px;

  -webkit-transform: translate(0, -484px);

          transform: translate(0, -484px);
  -webkit-animation: image12-02 10s infinite 13s forwards linear;
          animation: image12-02 10s infinite 13s forwards linear;
}
@-webkit-keyframes image12-02 {
  from, 13% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  26%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
@keyframes image12-02 {
  from, 13% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  26%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
.bg .image18 {
  position: absolute;
  z-index: 6;

  -webkit-transform-origin: left bottom;

          transform-origin: left bottom;
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .bg .image18 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.bg .image18-01 {
  margin: 721px 0 0 1556px;

  -webkit-transform: translate(0, -761px);

          transform: translate(0, -761px);
  -webkit-animation: image18-01 10s infinite 13s forwards linear;
          animation: image18-01 10s infinite 13s forwards linear;
}
@-webkit-keyframes image18-01 {
  from, 26% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  39%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
@keyframes image18-01 {
  from, 26% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  39%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
.bg .image18-02 {
  margin: 582px 0 0 1324px;

  -webkit-transform: translate(0, -772px);

          transform: translate(0, -772px);
  -webkit-animation: image18-02 10s infinite 13s forwards linear;
          animation: image18-02 10s infinite 13s forwards linear;
}
@-webkit-keyframes image18-02 {
  from, 39% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  52%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
@keyframes image18-02 {
  from, 39% {
    -webkit-transform: translate(0, 0) rotateY(0deg);
            transform: translate(0, 0) rotateY(0deg);
  }
  52%, to {
    -webkit-transform: translate(0, 0) rotateY(360deg);
            transform: translate(0, 0) rotateY(360deg);
  }
}
.bg .image13 {
  width: 35px;
  height: 0px;
  position: absolute;
  background-image: url(../images/index/image13.png);
  background-repeat: no-repeat;
  z-index: 4;
  overflow: hidden;

  -webkit-transform: skewY(-23deg);

          transform: skewY(-23deg);
  -webkit-transition: height .5s ease-out;
  transition: height .5s ease-out;
}
#wrap.animate .bg .image13 {
  height: 200px;
}
.bg .image13-01 {
  margin: 352px 0 0 1417px;
}
.bg .image13-02 {
  margin: 352px 0 0 1567px;
}
.bg .image13-03 {
  margin: 600px 0 0 1344px;
}
.bg .image13-04 {
  margin: 736px 0 0 1576px;
}
.bg .image14 {
  width: 27px;
  height: 0;
  margin: 356px 0 0 1502px;
  position: absolute;
  background-image: url(../images/index/image14.png);
  background-repeat: no-repeat;
  z-index: 4;

  -webkit-transform-origin: 22px 7px;

          transform-origin: 22px 7px;
  -webkit-transition: height .5s ease-out;
  transition: height .5s ease-out;
  -webkit-animation: image14 22s infinite 13s forwards linear;
          animation: image14 22s infinite 13s forwards linear;
}
@-webkit-keyframes image14 {
  from, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  75% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@keyframes image14 {
  from, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  75% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
#wrap.animate .bg .image14 {
  height: 180px;
}
.bg .image15 {
  width: 25px;
  height: 0;
  margin: 608px 0 0 1437px;
  position: absolute;
  background-image: url(../images/index/image15.png);
  background-repeat: no-repeat;
  z-index: 4;

  -webkit-transform-origin: 22px 3px;

          transform-origin: 22px 3px;
  -webkit-transition: height .5s ease-out;
  transition: height .5s ease-out;
  -webkit-animation: image15 18s infinite 13s forwards linear;
          animation: image15 18s infinite 13s forwards linear;
}
@-webkit-keyframes image15 {
  from, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@keyframes image15 {
  from, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
#wrap.animate .bg .image15 {
  height: 173px;
}
.bg .image16 {
  width: 17px;
  height: 0;
  margin: 636px 0 0 1727px;
  position: absolute;
  background-image: url(../images/index/image16.png);
  background-repeat: no-repeat;
  z-index: 4;

  -webkit-transform-origin: 6px 8px;

          transform-origin: 6px 8px;
  -webkit-transition: height .5s ease-out;
  transition: height .5s ease-out;
  -webkit-animation: image14 14s infinite 13s forwards linear;
          animation: image14 14s infinite 13s forwards linear;
}
#wrap.animate .bg .image16 {
  height: 284px;
}
.bg .image07 {
  margin: 94px 0 0 1496px;
  position: absolute;
  z-index: 5;

  -webkit-transform: translate(400px, -345px);

          transform: translate(400px, -345px);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
  -webkit-animation: image07 8s infinite 14s forwards ease-out;
          animation: image07 8s infinite 14s forwards ease-out;
}
@-webkit-keyframes image07 {
  from, 73% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  76%, 79.99999% {
    opacity: 0;
    -webkit-transform: translate(-50px, 50px);
            transform: translate(-50px, 50px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate(400px, -345px);
            transform: translate(400px, -345px);
  }
  85%, to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes image07 {
  from, 73% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  76%, 79.99999% {
    opacity: 0;
    -webkit-transform: translate(-50px, 50px);
            transform: translate(-50px, 50px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate(400px, -345px);
            transform: translate(400px, -345px);
  }
  85%, to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
#wrap.animate .bg .image07 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.bg .image10 {
  width: 123px;
  height: 141px;
  margin: 479px 0 0 1640px;
  position: absolute;
  background-image: url(../images/index/image10.png);
  background-repeat: no-repeat;
  background-position: 0 141px;
  z-index: 5;
  overflow: hidden;

  -webkit-transition: background-position .5s ease-out;

  transition: background-position .5s ease-out;
  -webkit-animation: image10 8s infinite 13s forwards ease-out;
          animation: image10 8s infinite 13s forwards ease-out;
}
@-webkit-keyframes image10 {
  from, 82%, to {
    background-position: 0 0;
  }
  88% {
    background-position: 0 141px;
  }
}
@keyframes image10 {
  from, 82%, to {
    background-position: 0 0;
  }
  88% {
    background-position: 0 141px;
  }
}
#wrap.animate .bg .image10 {
  /*background-position: 0 0;*/
}
.bg .image11 {
  width: 121px;
  height: 141px;
  margin: 694px 0 0 1333px;
  position: absolute;
  background-image: url(../images/index/image11.png);
  background-repeat: no-repeat;
  background-position: 0 141px;
  z-index: 5;

  -webkit-transition: background-position .5s ease-out;

  transition: background-position .5s ease-out;
  -webkit-animation: image11 8s infinite 13s forwards ease-out;
          animation: image11 8s infinite 13s forwards ease-out;
}
@-webkit-keyframes image11 {
  from, 88%, to {
    background-position: 0 0;
  }
  94% {
    background-position: 0 141px;
  }
}
@keyframes image11 {
  from, 88%, to {
    background-position: 0 0;
  }
  94% {
    background-position: 0 141px;
  }
}
#wrap.animate .bg .image11 {
  /*background-position: 0 0;*/
}
.bg .hole {
  position: absolute;
  background-color: #184453;
  border-radius: 100%;
  z-index: 4;

  -webkit-transform: scale(0);

          transform: scale(0);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#wrap.animate .bg .hole {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.bg .hole-image07 {
  width: 51px;
  height: 27px;
  margin: 331px 0 0 1526px;
}
.bg .hole-image10 {
  width: 72px;
  height: 14px;
  margin: 614px 0 0 1676px;
}
.bg .hole-image11 {
  width: 72px;
  height: 14px;
  margin: 828px 0 0 1367px;
}
.bg .hole-none {
  width: 51px;
  height: 27px;
  margin: 711px 0 0 1529px;
  z-index: 5;
}
/*.bg .box .space div:nth-child(1) {
  background-color: #fff;

    transform-origin: center bottom;
}
.bg .box .space div:nth-child(2) {
  background-color: #fff;

  transform: rotateY(90deg) translateX(96px) translateZ(-96px);
    transform-origin: right center;
}
.bg .box .space div:nth-child(3) {
  background-color: #e68661;

  transform: rotateX(90deg) translateY(2px) translateZ(96px);
    transform-origin: center bottom;
}
.bg .box .space div:nth-child(4) {
  background-color: #e68661;

  transform: rotateX(90deg) translateY(-2px) translateZ(-96px);
    transform-origin: center top;
}*/