/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(reset.css);
/* Color */
/* variable */
/* Function */
.box--full {
  width: 750px;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  touch-action: none;
  top: 0;
  left: 0;
}

.box--onepage {
  overflow: hidden;
}

.bodyWrap {
  width: 100%;
  overflow: hidden;
  height: 100%;
  position: relative;
}

img {
  width: 100%;
  float: left;
}

.paging {
  position: absolute;
  z-index: 1;
  top: 1150px;
  left: 0;
  right: 0;
}
.paging ul {
  text-align: center;
}
.paging ul li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 55, 100, 0.4);
  border-radius: 50%;
  margin: 0 15px;
}
.paging ul li.actived {
  background-color: #003764;
}

.scaleWrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center 0;
  z-index: 2;
}

.apply {
  position: absolute;
  z-index: 3;
  width: 360px;
  bottom: 30px;
  left: 195px;
}

.text {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 603px;
}

.page {
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  width: 750px;
  position: absolute;
  background-color: #000;
}

.logo {
  width: 277px;
  height: 193px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
}

.music--on {
  width: 32px;
  position: fixed;
  top: 11px;
  left: 13px;
  z-index: 200;
  display: none;
}

.page--2,
.page--3,
.page--4,
.page--5,
.page--6,
.page--7,
.page--8,
.page--9,
.page--10,
.page--11,
.page--12,
.page--13,
.page--14,
.page--15 {
  display: none;
}

#pop--1,
#pop--2,
#pop--3 {
  width: 750px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

.music--rotate {
  -webkit-animation: change 4s linear infinite;
}

@keyframes change {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
#page--1 {
  background-color: rgba(59, 16, 83, 0.15);
  z-index: 100;
}

.p--1--5--1 {
  position: absolute;
  width: 60px;
  left: 250px;
  top: 1050px;
  z-index: 100;
}
.p--1--5--1 .p--1--5--1--wrap {
  width: 60px;
  position: absolute;
}

.handLoop {
  animation: p151Css 10s forwards;
}

@keyframes p151Css {
  0% {
    top: 0;
    left: 0;
    opacity: 1;
  }
  20% {
    top: -200px;
    left: 100px;
    opacity: 1;
  }
  30% {
    top: -200px;
    left: 100px;
    opacity: 0;
  }
  35% {
    top: 0;
    left: 0;
    opacity: 0;
  }
  36% {
    top: 0;
    left: 0;
    opacity: 1;
  }
  46% {
    top: -200px;
    left: 100px;
    opacity: 1;
  }
  56% {
    top: -200px;
    left: 100px;
    opacity: 0;
  }
  61% {
    top: 0;
    left: 0;
    opacity: 0;
  }
  66% {
    top: 0;
    left: 0;
    opacity: 1;
  }
  86% {
    top: -200px;
    left: 100px;
    opacity: 1;
  }
  91% {
    top: -200px;
    left: 100px;
    opacity: 0;
  }
  100% {
    top: -200px;
    left: 100px;
    opacity: 0;
  }
}
.p--1--1 {
  width: 300px;
  position: absolute;
  top: 33px;
  left: 225px;
  z-index: 1;
}

.p--1--2 {
  width: 566px;
  position: absolute;
  top: 196px;
  left: 92px;
  z-index: 1;
}

.p--1--3 {
  width: 482px;
  position: absolute;
  top: 468px;
  left: 52px;
  z-index: 3;
}

.p--1--4 {
  width: 228px;
  position: absolute;
  top: 438px;
  left: 26px;
  z-index: 1;
}

.p--1--5 {
  width: 222px;
  position: absolute;
  top: 523px;
  left: 490px;
  z-index: 1;
}

.p--1--6 {
  width: 330px;
  position: absolute;
  top: 813px;
  left: 490px;
  z-index: 1;
}

.p--1--7 {
  width: 220px;
  height: 220px;
  position: absolute;
  top: 734px;
  left: 275px;
  z-index: 4;
  border-radius: 50%;
  overflow: hidden;
}
.p--1--7 .p--1--7--1 {
  width: 170px;
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 4;
}
.p--1--7 .p--1--7--bg {
  width: 220px;
  height: 220px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #830051;
  opacity: 0.2;
  border-radius: 50%;
  z-index: 1;
}
.p--1--7 .p--1--7--aim {
  animation: opacity1Css 1.5s infinite linear;
}

.p--1--8 {
  width: 150px;
  position: absolute;
  top: 1090px;
  left: 65px;
  z-index: 10;
}
.p--1--8 img {
  pointer-events: none;
}

.p--1--9 {
  width: 150px;
  position: absolute;
  top: 988px;
  left: 213px;
  z-index: 10;
}
.p--1--9 img {
  pointer-events: none;
}

.p--1--10 {
  width: 150px;
  position: absolute;
  top: 1016px;
  left: 400px;
  z-index: 10;
}
.p--1--10 img {
  pointer-events: none;
}

.p--1--11 {
  width: 150px;
  position: absolute;
  top: 1099px;
  left: 554px;
  z-index: 10;
}
.p--1--11 img {
  pointer-events: none;
}

.p--1--13 {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 750px;
  top: 500px;
}

#page--2 {
  background-color: rgba(103, 209, 222, 0.2);
}

.p--2--1 {
  width: 98px;
  left: 70px;
  position: absolute;
  z-index: 1;
  top: 30px;
}

.p--2--2 {
  width: 150px;
  right: 0px;
  position: absolute;
  z-index: 1;
  top: 30px;
}

.p--2--3 {
  width: 170px;
  left: 179px;
  position: absolute;
  z-index: 2;
  top: 150px;
}

.p--2--4 {
  width: 37px;
  left: 439px;
  position: absolute;
  z-index: 2;
  top: 218px;
}

.p--2--5 {
  width: 37px;
  left: 590px;
  position: absolute;
  z-index: 2;
  top: 280px;
}

.p--2--6 {
  width: 37px;
  left: 120px;
  position: absolute;
  z-index: 2;
  top: 273px;
}

.p--2--7 {
  width: 37px;
  left: 254px;
  position: absolute;
  z-index: 2;
  top: 368px;
}

.p--2--8 {
  width: 82px;
  left: 546px;
  position: absolute;
  z-index: 1;
  top: 120px;
}

.p--2--9 {
  width: 67px;
  left: 96px;
  position: absolute;
  z-index: 1;
  top: 402px;
}

.p--2--10 {
  width: 604px;
  left: 74px;
  position: absolute;
  z-index: 1;
  top: 188px;
}

.p--2--11 {
  width: 87px;
  left: 424px;
  position: absolute;
  z-index: 1;
  top: 316px;
}

.p--2--12 {
  width: 89px;
  left: 515px;
  position: absolute;
  z-index: 1;
  top: 304px;
}

.page--3 {
  background-color: rgba(103, 209, 222, 0.2);
}

.p--3--3 {
  width: 150px;
  left: 500px;
  position: absolute;
  z-index: 6;
  top: 158px;
}
.p--3--3 .p--3--3--wrap {
  width: 150px;
  position: absolute;
  top: 0;
  left: 0;
  animation: p3Css 2s ease-in infinite;
}

.p--3--4 {
  width: 575px;
  left: 92px;
  position: absolute;
  z-index: 1s;
  top: 188px;
}

.p--3--5 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 603px;
}

@keyframes p3Css {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 0px;
    left: 10px;
  }
  50% {
    top: 10px;
    left: 10px;
  }
  75% {
    top: 10px;
    left: 0;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
.page--4 {
  background-color: rgba(103, 209, 222, 0.2);
}
.page--4 .paging {
  top: 1280px;
}

.p--4--3 {
  width: 313px;
  left: 180px;
  position: absolute;
  z-index: 1;
  top: 106px;
}

.p--4--4 {
  width: 136px;
  left: 180px;
  position: absolute;
  z-index: 2;
  top: 160px;
}

.p--4--5 {
  width: 183px;
  left: 290px;
  position: absolute;
  z-index: 2;
  top: 146px;
}

.p--4--6 {
  width: 118px;
  left: 486px;
  position: absolute;
  z-index: 2;
  top: 171px;
}

.p--4--7 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 603px;
}

.page--5 {
  background-color: rgba(103, 209, 222, 0.2);
}

.p--5--3 {
  width: 500px;
  left: 133px;
  position: absolute;
  z-index: 6;
  top: 252px;
}

.p--5--4 {
  width: 258px;
  left: 91px;
  position: absolute;
  z-index: 1;
  top: 213px;
}

.p--5--5 {
  width: 96px;
  left: 563px;
  position: absolute;
  z-index: 2;
  top: 236px;
}
.p--5--5 .p--5--5--wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: myfirst2 15s infinite linear;
}

.p--5--6 {
  width: 38px;
  left: 517px;
  position: absolute;
  z-index: 2;
  top: 275px;
}
.p--5--6 .p--5--6--wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: myfirst2 10s infinite linear;
}

.p--5--7 {
  width: 72px;
  left: 120px;
  position: absolute;
  z-index: 2;
  top: 560px;
}
.p--5--7 .p--5--7--wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: myfirst2 20s infinite linear;
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.page--6 {
  background-color: rgba(108, 0, 110, 0.15);
}

.p--6--3 {
  width: 564px;
  position: absolute;
  left: 124px;
  top: 112px;
  z-index: 1;
}

.p--6--4 {
  width: 112px;
  position: absolute;
  left: 518px;
  top: 207px;
  z-index: 2;
}
.p--6--4 .p--6--4--wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.p--6--5 {
  width: 112px;
  position: absolute;
  left: 567px;
  top: 304px;
  z-index: 2;
}
.p--6--5 .p--6--5--wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.scale {
  animation: saleCSS 0.5s ease-in-out alternate forwards;
}

@keyframes saleCSS {
  from {
    transform: scale(2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.p--6--6 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 583px;
}

.page--7 {
  background-color: rgba(108, 0, 110, 0.15);
}

.p--7--3 {
  width: 167px;
  position: absolute;
  top: 87px;
  z-index: 1;
  animation: yun71Css 0.8s infinite linear;
  display: none;
}

.p--7--4 {
  width: 374px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.p--7--4 .p--7--4--wrap {
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100%;
}

.p--7--5 {
  width: 300px;
  position: absolute;
  left: 206px;
  top: 222px;
  z-index: 1;
  animation: yun7Css 1s infinite linear;
  display: none;
}

.p--7--6 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 326px;
}

.huojian7 {
  animation: huojian7Css 2s ease-in-out alternate forwards;
}

@keyframes yun7Css {
  0% {
    left: 206px;
  }
  50% {
    left: 226px;
  }
  100% {
    left: 206px;
  }
}
@keyframes yun71Css {
  0% {
    left: 106px;
  }
  50% {
    left: 96px;
  }
  100% {
    left: 106px;
  }
}
@keyframes huojian7Css {
  0% {
    left: -500px;
    top: 450px;
  }
  100% {
    left: 326px;
    top: 84px;
  }
}
.page--8 {
  background-color: rgba(108, 0, 110, 0.15);
}
.page--8 .paging {
  top: 1280px;
}

.p--8--3 {
  width: 190px;
  position: absolute;
  left: 280px;
  top: 106px;
  z-index: 1;
}
.p--8--3 .p--8--3--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.p--8--4 {
  width: 514px;
  position: absolute;
  left: 116px;
  top: 260px;
  z-index: 1;
}

.p--8--5 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 503px;
}

.heart8 {
  animation: heart8Css 1.5s ease-in infinite;
}

@keyframes heart8Css {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}
.page--9 {
  background-color: rgba(196, 214, 96, 0.3);
}

.p--9--3 {
  width: 485px;
  position: absolute;
  left: 76px;
  top: 120px;
  z-index: 1;
}

.p--9--4 {
  width: 600px;
  position: absolute;
  left: 75px;
  top: 256px;
  z-index: 1;
}

.p--9--5 {
  width: 64px;
  position: absolute;
  left: 90px;
  top: 330px;
  z-index: 2;
}
.p--9--5 .p--9--5--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.p--9--6 {
  width: 50px;
  position: absolute;
  left: 212px;
  top: 245px;
  z-index: 2;
}

.p--9--7 {
  width: 60px;
  position: absolute;
  left: 393px;
  top: 280px;
  z-index: 2;
}

.p--9--8 {
  width: 66px;
  position: absolute;
  left: 536px;
  top: 290px;
  z-index: 2;
}

.p--9--9 {
  width: 75px;
  position: absolute;
  left: 585px;
  top: 440px;
  z-index: 2;
}

.p--9--10 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 700px;
}

.scale9 {
  animation: scale9CSS 1.5s ease-in-out alternate forwards;
}

@keyframes scale9CSS {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.page--10 {
  background-color: rgba(196, 214, 96, 0.3);
}

.p--10--4 {
  width: 540px;
  position: absolute;
  left: 125px;
  top: 191px;
  z-index: 2;
}

.p--10--5 {
  width: 100px;
  position: absolute;
  left: 126px;
  top: 225px;
  z-index: 2;
}
.p--10--5 .p--10--5--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb101Css 2s infinite linear;
}

.p--10--6 {
  width: 83px;
  position: absolute;
  left: 560px;
  top: 180px;
  z-index: 2;
}
.p--10--6 .p--10--6--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb102Css 2s infinite linear;
}

.p--10--7 {
  width: 52px;
  position: absolute;
  left: 230px;
  top: 312px;
  z-index: 2;
}
.p--10--7 .p--10--7--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb103Css 2s infinite linear;
}

.p--10--8 {
  width: 84px;
  position: absolute;
  left: 97px;
  top: 474px;
  z-index: 2;
}
.p--10--8 .p--10--8--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb101Css 2s infinite linear;
}

.p--10--9 {
  width: 88px;
  position: absolute;
  left: 472px;
  top: 480px;
  z-index: 2;
}
.p--10--9 .p--10--9--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb102Css 2s infinite linear;
}

.p--10--10 {
  width: 54px;
  position: absolute;
  left: 590px;
  top: 448px;
  z-index: 2;
}
.p--10--10 .p--10--10--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb103Css 2s infinite linear;
}

.p--10--11 {
  width: 80px;
  position: absolute;
  left: 538px;
  top: 576px;
  z-index: 2;
}
.p--10--11 .p--10--11--wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  animation: xb101Css 2s infinite linear;
}

.p--10--12 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 748px;
}

@keyframes xb101Css {
  0% {
    top: 0;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
@keyframes xb102Css {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}
@keyframes xb103Css {
  0% {
    top: -5px;
  }
  50% {
    top: 5px;
  }
  100% {
    top: -5px;
  }
}
.page--11 {
  background-color: rgba(196, 214, 96, 0.3);
}

.p--11--3 {
  width: 103px;
  position: absolute;
  left: 0;
  top: 267px;
  z-index: 3;
}
.p--11--3 .p--11--3--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun11Css 2s infinite linear;
}

@keyframes yun11Css {
  0% {
    left: 206px;
  }
  50% {
    left: 216px;
  }
  100% {
    left: 206px;
  }
}
.p--11--4 {
  width: 88px;
  position: absolute;
  left: 182px;
  top: 218px;
  z-index: 2;
}

.p--11--5 {
  width: 94px;
  position: absolute;
  left: 0;
  top: 369px;
  z-index: 2;
}
.p--11--5 .p--11--5--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun111Css 2s infinite linear;
}

@keyframes yun111Css {
  0% {
    left: 506px;
  }
  50% {
    left: 486px;
  }
  100% {
    left: 506px;
  }
}
.p--11--6 {
  width: 600px;
  position: absolute;
  left: 60px;
  top: 270px;
  z-index: 1;
}

.p--11--7 {
  width: 165px;
  position: absolute;
  left: 518px;
  top: 450px;
  z-index: 2;
}

.p--11--8 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 725px;
}

.page--12 {
  background-color: rgba(240, 186, 0, 0.2);
}

.p--12--3 {
  width: 518px;
  position: absolute;
  left: 118px;
  top: 184px;
  z-index: 2;
}

.p--12--4 {
  width: 170px;
  position: absolute;
  left: 0;
  top: 171px;
  z-index: 1;
}
.p--12--4 .p--12--4--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun121Css 2s infinite linear;
}

@keyframes yun121Css {
  0% {
    left: 106px;
  }
  50% {
    left: 116px;
  }
  100% {
    left: 106px;
  }
}
.p--12--5 {
  width: 142px;
  position: absolute;
  left: 0;
  top: 119px;
  z-index: 3;
}
.p--12--5 .p--12--5--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun122Css 2s infinite linear;
}

@keyframes yun122Css {
  0% {
    left: 556px;
  }
  50% {
    left: 546px;
  }
  100% {
    left: 556px;
  }
}
.p--12--6 {
  width: 164px;
  position: absolute;
  left: 0;
  top: 270px;
  z-index: 3;
}
.p--12--6 .p--12--6--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun123Css 3s infinite linear;
}

@keyframes yun123Css {
  0% {
    left: 356px;
  }
  50% {
    left: 376px;
  }
  100% {
    left: 356px;
  }
}
.p--12--7 {
  width: 80px;
  position: absolute;
  left: 444px;
  top: 358px;
  z-index: 3;
}
.p--12--7 .p--12--7--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.p--12--8 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 760px;
}

.coin12 {
  animation: coin12CSS 2s infinite linear;
}

@keyframes coin12CSS {
  0% {
    top: -200px;
    opacity: 0;
  }
  25% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.page--13 {
  background-color: rgba(240, 186, 0, 0.2);
}

.p--13--3 {
  width: 438px;
  position: absolute;
  left: 140px;
  top: 160px;
  z-index: 1;
}

.p--13--4 {
  width: 67px;
  position: absolute;
  left: 225px;
  top: 337px;
  z-index: 2;
}
.p--13--4 .p--13--4--wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.p--13--5 {
  width: 66px;
  position: absolute;
  left: 295px;
  top: 290px;
  z-index: 2;
}
.p--13--5 .p--13--5--wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.p--13--6 {
  width: 68px;
  position: absolute;
  left: 370px;
  top: 305px;
  z-index: 2;
}
.p--13--6 .p--13--6--wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.p--13--7 {
  width: 66px;
  position: absolute;
  left: 447px;
  top: 293px;
  z-index: 2;
}
.p--13--7 .p--13--7--wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.p--13--8 {
  width: 60px;
  position: absolute;
  left: 528px;
  top: 331px;
  z-index: 2;
}
.p--13--8 .p--13--8--wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.p--13--9 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 650px;
}

.gift131 {
  animation: gift131CSS 0.5s ease-in-out alternate forwards;
}

@keyframes gift131CSS {
  0% {
    top: 50px;
    left: 50px;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
.gift132 {
  animation: gift132CSS 0.5s ease-in-out alternate forwards;
}

@keyframes gift132CSS {
  0% {
    top: 100px;
    left: 20px;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
.gift133 {
  animation: gift133CSS 0.5s ease-in-out alternate forwards;
}

@keyframes gift133CSS {
  0% {
    top: 80px;
    left: 0;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
.gift134 {
  animation: gift134CSS 0.5s ease-in-out alternate forwards;
}

@keyframes gift134CSS {
  0% {
    top: 80px;
    left: -20px;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
.gift135 {
  animation: gift135CSS 0.5s ease-in-out alternate forwards;
}

@keyframes gift135CSS {
  0% {
    top: 80px;
    left: -50px;
    opacity: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}
.page--14 {
  background-color: rgba(240, 186, 0, 0.2);
  overflow: hidden;
}

.p--14--3 {
  width: 520px;
  position: absolute;
  left: 90px;
  top: 244px;
  z-index: 2;
}

.p--14--4 {
  width: 149px;
  position: absolute;
  left: 475px;
  top: 200px;
  z-index: 3;
}
.p--14--4 .p--14--4--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.p--14--5 {
  width: 108px;
  position: absolute;
  top: 204px;
  z-index: 1;
}
.p--14--5 .p--14--5--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: yun141Css 2s infinite linear;
}

@keyframes yun141Css {
  0% {
    left: 403px;
  }
  50% {
    left: 413px;
  }
  100% {
    left: 403px;
  }
}
.p--14--6 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 709px;
}

.p--14--7 {
  width: 370px;
  position: absolute;
  z-index: 3;
  top: 570px;
  left: -400px;
}
.p--14--7 .p--14--7--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.p--14--8 {
  width: 100px;
  position: absolute;
  z-index: 1;
  top: 195px;
  left: 184px;
}
.p--14--8 .p--14--8--wrap {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: paiziCss 2s infinite linear;
  transform-origin: right bottom;
}

.car14 {
  animation: car14CSS 1s ease-in-out alternate forwards;
}

.plane14 {
  animation: plane14CSS 1s ease-in-out alternate forwards;
}

@keyframes car14CSS {
  0% {
    left: 0px;
  }
  100% {
    left: 684px;
  }
}
@keyframes plane14CSS {
  0% {
    left: -100px;
    top: 40px;
    opacity: 0;
  }
  100% {
    left: 0;
    top: 0;
    opacity: 1;
  }
}
@keyframes paiziCss {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0);
  }
}
.page--15 {
  background-color: rgba(240, 186, 0, 0.2);
}

.p--15--3 {
  width: 600px;
  height: 630px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  left: 75px;
  top: 200px;
  z-index: 1;
  display: none;
}

.p--15--4 {
  width: 607px;
  left: 75px;
  position: absolute;
  z-index: 1;
  top: 909px;
}

.p--15--6 {
  width: 600px;
  height: 630px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  left: 75px;
  top: 200px;
  z-index: 10;
}
.p--15--6 img {
  pointer-events: none;
}

* {
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
}

body {
  padding: 0;
  background-color: #fff;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.bg--black {
  background: rgba(0, 0, 0, 0.9);
}

a:link,
a:visited {
  color: #333;
  text-decoration: none;
}

a:hover,
a:active {
  color: #b0a56c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  letter-spacing: 1px;
}

p {
  color: #000;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

.clear {
  clear: both;
}

div {
  color: #999;
}

li {
  list-style-type: none;
}

/*
*@include wBackgroundImg('icon/nav-bg.png','',0,0,repeat);
*/
/* page
----------------------------------------------------------------------*/
img {
  width: 100%;
  font-size: 0;
  float: left;
}

.clear {
  clear: both;
}

.arrow {
  transform-origin: center top;
  animation: arrowCss 2s infinite linear;
  position: absolute;
  left: 0;
  width: 100%;
}

@keyframes arrowCss {
  0% {
    top: 0;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
@keyframes opacityCss {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity1Css {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
.anim {
  animation: jiggle 2s ease-in infinite;
}

@keyframes jiggle {
  48%, 62% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px);
  }
  59% {
    transform: scale(1, 1) translate(0, -3px);
  }
}
.anim1 {
  animation: jiggle1 3s ease-in infinite;
}

@keyframes jiggle1 {
  48%, 62% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px);
  }
  59% {
    transform: scale(1, 1) translate(0, -3px);
  }
}