@import url('../js/glide/glide.core.min.css');
@font-face {
  font-family: 'DFYuanGB';
  src: url(../font/DFYuanGB-W5.woff2);
}
* {
  margin: 0px; padding: 0px
}
html {
  width: 100%
}
body {
  width: 100%; background: #fff; color: #000; font-size: 12px; font-family: Arial, Verdana; text-size-adjust: none
}
ul, ol {
  list-style: none
}
img {
  border: 0px
}
a {
  color: #000; text-decoration: none
}
a:hover {
  color: #000; text-decoration: none
}
.hide {
  display: none
}
.miniMessage {
  background: rgba(0, 0, 0, 0.8); font-size: 24px; color: #ffffff; transform: translateX(-50%) translateY(-50%) scale(0.9); opacity: 0; padding: 10px 20px; line-height: 140%; border-radius: 10px; position: fixed; top: 50%; left: 50%; z-index: 10000000; transition: transform 0.3s ease, opacity 0.3s ease
}
.miniMessage.on {
  transform: translateX(-50%) translateY(-50%) scale(1); opacity: 1
}
.miniMessage.on.out {
  transform: translateX(-50%) translateY(-50%) scale(1.15); opacity: 0
}
.wrap {
  width: 640px; height: 100vh; min-height: 1160px; font-family: 'DFYuanGB'; overflow: hidden; margin: auto; position: relative; z-index: 100
}
.wrap div.bgm {
  width: 53px; height: 53px; background: url(../images/bgm.png) 0px 0px no-repeat; position: absolute; top: 22px; right: 22px; z-index: 1000
}
.wrap div.bgm.off {
  background-position: 0px -53px
}
.wrap div.home {
  width: 100%; height: 100%; background: #4ac7ff; position: relative; z-index: 100
}
.wrap div.home div.logo {
  width: 101px; height: 47px; background: url(../images/logo.png) center center no-repeat; position: absolute; top: 22px; left: 25px; z-index: 200
}
.wrap div.home div.slogan {
  width: 508px; height: 211px; background: url(../images/slogan.png) center center no-repeat; transform: translateX(-50%); mix-blend-mode: lighten; position: absolute; top: 90px; left: 50%; z-index: 200
}
.wrap div.home div.stage {
  width: 100%; height: 1136px; background: url(../images/home.bg.jpg) 0px 0px no-repeat; position: absolute; bottom: 0px; left: 0px; z-index: 100; animation: home_stage 1s step-start infinite
}
.wrap div.home div.stage div.singer {
  width: 100%; height: 100%; background: url(../images/singer.png) 0px 0px no-repeat; animation: home_stage_singer 1.5s step-start infinite
}
.wrap div.home div.button {
  width: 401px; height: 109px; background: url(../images/btn.start.png) center center no-repeat; transform: translateX(-50%); position: absolute; bottom: 70px; left: 50%; z-index: 300; cursor: pointer
}
.wrap div.home div.text {
  width: 600px; transform: translateX(-50%); position: absolute; bottom: 10px; left: 50%; z-index: 300
}
.wrap div.home div.text div.agreement {
  width: 100%; padding-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #ffffff; line-height: 100%
}
.wrap div.home div.text div.agreement span.checkbox {
  width: 20px; height: 20px; box-sizing: border-box; border: #ffffff 2px solid; margin-right: 10px
}
.wrap div.home div.text div.agreement span.checkbox.checked {
  background: url(../images/checked.svg) center center no-repeat
}
.wrap div.home div.text div.tips {
  width: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 100%
}
.wrap div.main {
  width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0.9); opacity: 0; position: absolute; z-index: 80; transition: transform 0.3s ease, opacity 0.3s ease
}
.wrap div.main div.swiper {
  width: 100%; height: 100%; z-index: 100
}
.wrap div.main div.arrow {
  width: 34px; height: 53px; background: url(../images/arrow.png) center center no-repeat; transform: translateX(-50%); position: absolute; bottom: 20px; left: 50%; z-index: 1000; animation: arrow 2s ease infinite; transition: opacity 0.3s ease, z-index 0.3s ease
}
.wrap div.main div.arrow.white {
  filter: brightness(0) invert(1)
}
.wrap div.main div.arrow.out {
  opacity: 0; z-index: 80
}
.wrap div.main.on {
  transform: scale(1); opacity: 1; z-index: 200
}
.wrap div.page-profile {
  background: #55c6ff
}
.wrap div.page-profile div.text {
  width: 600px; margin-left: -300px; transform: translateY(30px); opacity: 0; position: absolute; top: 60px; left: 50%; z-index: 200
}
.wrap div.page-profile div.text div.avatar {
  width: 100%; display: flex; align-items: center; justify-content: center
}
.wrap div.page-profile div.text div.avatar img {
  display: block; width: 110px; height: 110px; border: rgba(255, 255, 255, 0.8) 10px solid; border-radius: 100%
}
.wrap div.page-profile div.text div.name {
  width: 100%; padding-top: 20px; font-size: 48px; line-height: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center
}
.wrap div.page-profile div.text div.welcome {
  width: 100%; padding-top: 20px; font-size: 34px; line-height: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center
}
.wrap div.page-profile div.text div.welcome em {
  font-style: normal; font-weight: bold; margin-left: 5px; color: #ff0016
}
.wrap div.page-profile div.text div.time {
  width: 100%; padding-top: 20px; font-size: 40px; line-height: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center
}
.wrap div.page-profile div.text div.time span {
  font-size: 48px; font-weight: bold; margin: 0px 5px
}
.wrap div.page-profile div.text div.tips {
  width: 100%; padding-top: 20px; font-size: 34px; line-height: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center
}
.wrap div.page-profile div.bg {
  width: 100%; height: 100%; background: url(../images/img.cloud.1.png) bottom center no-repeat; position: absolute; bottom: 0px; z-index: 100
}
.wrap div.page-profile div.girl {
  width: 624px; height: 654px; background: url(../images/profile.girl.png) center center no-repeat; transform: translateX(calc(-50% - 10px)); position: absolute; bottom: 0px; left: 50%; z-index: 120
}
.wrap div.page-profile div.window {
  width: 147px; height: 142px; background: url(../images/profile.window.png) center center no-repeat; transform: translateX(50px); position: absolute; bottom: 550px; left: 50%; z-index: 120; animation: profile_window 2s ease infinite
}
.wrap div.page-profile.on div.text {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-signin {
  background: #55c6ff
}
.wrap div.page-signin div.text {
  width: 500px; font-size: 34px; line-height: 200%; color: #ffffff; transform: translateY(30px); opacity: 0; position: absolute; top: 100px; left: 50px; z-index: 200
}
.wrap div.page-signin div.text b,
.wrap div.page-signin div.text span.signInCount {
  font-size: 48px
}
.wrap div.page-signin div.text em {
  font-style: normal; font-weight: bold; margin: 0px 5px; color: #ff0016
}
.wrap div.page-signin div.bg {
  width: 100%; height: 100%; background: url(../images/img.cloud.2.png) bottom center no-repeat; position: absolute; bottom: 0px; z-index: 100
}
.wrap div.page-signin div.stage {
  width: 100%; height: 1136px; background: url(../images/highfive.png) 0px 0px no-repeat; position: absolute; bottom: 0px; z-index: 120; animation: signin_stage 0.8s step-start infinite
}
.wrap div.page-signin.on div.text {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-lottery {
  background: #55c6ff
}
.wrap div.page-lottery div.text {
  width: 500px; font-size: 34px; line-height: 200%; color: #ffffff; text-align: center; margin-left: -250px; transform: translateY(30px); opacity: 0; position: absolute; top: 100px; left: 50%; z-index: 200
}
.wrap div.page-lottery div.text b {
  font-size: 48px
}
.wrap div.page-lottery div.text span.lotteryCount {
  font-size: 48px; font-weight: bold; padding: 0px 5px; color: #ff0016
}
.wrap div.page-lottery div.bg {
  width: 100%; height: 100%; background: url(../images/img.cloud.3.png) bottom center no-repeat; position: absolute; bottom: 0px; z-index: 100
}
.wrap div.page-lottery div.stage {
  width: 100%; height: 1136px; background: url(../images/lottery.png) 0px 0px no-repeat; position: absolute; bottom: 0px; z-index: 120; animation: lottery_stage 3s step-start infinite
}
.wrap div.page-lottery.on div.text {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-cocreation {
  background: #55bffc; overflow: hidden
}
.wrap div.page-cocreation div.x2025 {
  width: 469px; height: 120px; background: url(../images/2025.png); transform: translateX(-50%); mix-blend-mode: lighten; position: absolute; top: 250px; left: 50%; z-index: 200
}
.wrap div.page-cocreation div.x2025text {
  width: 600px; display: flex; align-items: baseline; justify-content: center; font-size: 34px; color: #ffffff; transform: translateX(-50%); position: absolute; top: 400px; left: 50%; z-index: 220
}
.wrap div.page-cocreation div.x2025text b {
  font-size: 36px
}
.wrap div.page-cocreation div.x2025text span.count {
  font-size: 58px; font-weight: bold; margin: 0px 5px; color: #ff0016
}
.wrap div.page-cocreation div.cloud {
  width: 100%; height: 4600px; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-cocreation div.cloud div.top {
  width: 960px; height: 2237px; background: url(../images/img.cloud.4.png) top center no-repeat; transform: translateX(-50%); mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) 100% 100% no-repeat; -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) 100% 100% no-repeat; position: absolute; top: -200px; left: 50%; z-index: 100
}
.wrap div.page-cocreation div.cloud div.cloudlayer {
  width: 640px; height: 1578px; background: url(../images/cloudlayer.png) center center no-repeat; transform: translateX(-50%); position: absolute; top: 1920px; left: 50%; z-index: 120
}
.wrap div.page-cocreation div.cloud div.stage {
  width: 640px; height: 1136px; background: url(../images/img.cloud.5.png) bottom center no-repeat; transform: translateX(-50%); position: absolute; bottom: 0px; left: 50%; z-index: 110
}
.wrap div.page-cocreation div.cloud div.stage div.inspiration {
  width: 500px; font-size: 34px; line-height: 200%; color: #ffffff; text-align: center; transform: translateX(calc(-50% - 60px)); opacity: 0; position: absolute; top: 200px; left: 50%; z-index: 200
}
.wrap div.page-cocreation div.cloud div.stage div.inspiration em {
  font-style: normal; font-weight: bold; font-size: 36px; padding-left: 5px
}
.wrap div.page-cocreation div.cloud div.stage div.inspiration span.inspirationCount {
  font-size: 48px; font-weight: bold; padding-right: 5px; color: #ff0016
}
.wrap div.page-cocreation div.cloud div.stage div.contribution {
  width: 500px; font-size: 34px; line-height: 200%; color: #ffffff; text-align: center; transform: translateX(-50%); opacity: 0; position: absolute; top: 270px; left: 50%; z-index: 200
}
.wrap div.page-cocreation div.cloud div.stage div.contribution em {
  font-style: normal; font-weight: bold; font-size: 36px; padding-left: 5px
}
.wrap div.page-cocreation div.cloud div.stage div.contribution span.contributionCount {
  font-size: 48px; font-weight: bold; padding-right: 5px; color: #ff0016
}
.wrap div.page-cocreation div.bulb {
  width: 241px; height: 314px; background: url(../images/bulb.png) center center no-repeat; transform: translateX(-50%) scale(0.7); opacity: 0; position: absolute; bottom: -100%; left: 50%; z-index: 500
}
.wrap div.page-cocreation.on div.x2025 {
  animation: cocreation_x2025 0.6s ease forwards 2s
}
.wrap div.page-cocreation.on div.x2025text {
  animation: cocreation_x2025text 0.6s ease forwards 2.1s
}
.wrap div.page-cocreation.on div.cloud {
  animation: cocreation_cloud 6s ease forwards 3s
}
.wrap div.page-cocreation.on div.cloud div.top {
  animation: cocreation_cloud_top 1.4s ease forwards 2s
}
.wrap div.page-cocreation.on div.cloud div.stage div.inspiration {
  animation: cocreation_stage_inspiration 0.6s ease forwards 9s
}
.wrap div.page-cocreation.on div.cloud div.stage div.contribution {
  animation: cocreation_stage_contribution 0.6s ease forwards 9.1s
}
.wrap div.page-cocreation.on div.bulb {
  animation: cocreation_bulb 8s ease forwards 2s, cocreation_bulb_light 2s ease infinite 10s
}
.wrap div.page-mycocreation {
  background: #5bc6ff
}
.wrap div.page-mycocreation div.text {
  width: 500px; font-size: 34px; line-height: 200%; color: #ffffff; transform: translateY(30px); opacity: 0; position: absolute; top: 100px; left: 50px; z-index: 200
}
.wrap div.page-mycocreation div.text b {
  font-size: 40px
}
.wrap div.page-mycocreation div.text span.cocreationCount {
  font-style: normal; font-size: 48px; font-weight: bold; margin: 0px 5px; color: #ff0016
}
.wrap div.page-mycocreation div.bg {
  width: 100%; height: 100%; background: url(../images/img.cloud.6.png) bottom center no-repeat; position: absolute; bottom: 0px; z-index: 100
}
.wrap div.page-mycocreation div.stage {
  width: 100%; height: 1136px; background: url(../images/dj.png) 0px 0px no-repeat; position: absolute; bottom: 0px; z-index: 120; animation: mycocreation_dj 0.8s step-start infinite
}
.wrap div.page-mycocreation.on div.text {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story {
  background: #7acffd
}
.wrap div.page-story div.glide,
.wrap div.page-story div.glide div.glide__track,
.wrap div.page-story div.glide ul.glide__slides,
.wrap div.page-story div.glide li.glide__slide {
  width: 100%; height: 100%
}
.wrap div.page-story div.glide div.glide__bullets {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; top: 885px; z-index: 1000
}
.wrap div.page-story div.glide div.glide__bullets button.glide__bullet {
  display: block; width: 14px; height: 14px; box-sizing: border-box; background: transparent; border: #4dc1ff 2px solid; border-radius: 100%; transition: all 0.3s ease
}
.wrap div.page-story div.glide div.glide__bullets button.glide__bullet--active {
  background: #4dc1ff
}
.wrap div.page-story div.glide div.glide__bullets.white button.glide__bullet {
  border-color: #ffffff
}
.wrap div.page-story div.glide div.glide__bullets.white button.glide__bullet--active {
  background-color: #ffffff
}
.wrap div.page-story div.glide div.menu {
  width: 500px; height: 82px; background: url(../images/story.menu.png) top center no-repeat; margin-left: -250px; position: absolute; top: 928px; left: 50%; z-index: 2000
}
.wrap div.page-story div.glide div.menu ul {
  width: 100%; height: 100%; box-sizing: border-box; padding: 0px 36px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 100
}
.wrap div.page-story div.glide div.menu ul li {
  width: 120px; height: 50px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; color: #7acffd; transition: color 0.3s ease
}
.wrap div.page-story div.glide div.menu::after {
  content: ''; display: block; position: absolute; background: #7acffd; width: 120px; height: 50px; border-radius: 50px; top: 50%; left: 50%; z-index: 50; transition: transform 0.3s ease
}
.wrap div.page-story div.glide div.menu[menu='1']::after {
  transform: translateX(-215px) translateY(-50%)
}
.wrap div.page-story div.glide div.menu[menu='2']::after {
  transform: translateX(-50%) translateY(-50%)
}
.wrap div.page-story div.glide div.menu[menu='3']::after {
  transform: translateX(95px) translateY(-50%)
}
.wrap div.page-story div.glide div.menu[menu='1'] ul li.s1 {
  color: #ffffff
}
.wrap div.page-story div.glide div.menu[menu='2'] ul li.s2 {
  color: #ffffff
}
.wrap div.page-story div.glide div.menu[menu='3'] ul li.s3 {
  color: #ffffff
}
.wrap div.page-story div.story {
  width: 100%; height: 100%; position: relative
}
.wrap div.page-story div.story-1 div.title {
  width: 450px; height: 194px; background: url(../images/story.text.1-1.png) center center no-repeat; margin-left: -225px; transform: translateY(30px); opacity: 0; position: absolute; top: 82px; left: 50%; z-index: 100
}
.wrap div.page-story div.story-1 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.1-1.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 120
}
.wrap div.page-story div.story-1 div.text {
  width: 600px; font-size: 24px; line-height: 160%; text-align: center; color: #489dcb; margin-left: -300px; transform: translateY(30px); opacity: 0; position: absolute; top: 800px; left: 50%; z-index: 200
}
.wrap div.page-story div.story-2 div.title {
  width: 521px; height: 102px; background: url(../images/story.text.1-2.png) center center no-repeat; margin-left: -260px; transform: translateY(30px); opacity: 0; position: absolute; top: 100px; left: 50%; z-index: 100
}
.wrap div.page-story div.story-2 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.1-2.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 120
}
.wrap div.page-story div.story-2 div.icons {
  width: 100%; height: 1136px; background: url(../images/story.icon.1-2.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-2 div.icons div.icon {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-2 div.icons div.icon1 {
  width: 236px; height: 115px; background: url(../images/story.icon.1-2a.png); margin-left: -110px; margin-top: -330px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-2 div.icons div.icon2 {
  width: 172px; height: 106px; background: url(../images/story.icon.1-2b.png); margin-left: -265px; margin-top: -5px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-2 div.icons div.icon3 {
  width: 179px; height: 98px; background: url(../images/story.icon.1-2c.png); margin-left: 120px; margin-top: -40px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-2 div.icons div.icon4 {
  width: 186px; height: 101px; background: url(../images/story.icon.1-2d.png); margin-left: 0px; margin-top: 155px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-2 div.icons div.percentage {
  width: 250px; height: 250px; background: url(../images/story.img.1-2-1.png); margin-left: -125px; margin-top: -190px
}
.wrap div.page-story div.story-3 div.title {
  width: 577px; height: 228px; background: url(../images/story.text.1-3.png) center center no-repeat; margin-left: -288px; transform: scale(0.3); opacity: 0; position: absolute; top: 115px; left: 50%; z-index: 100
}
.wrap div.page-story div.story-3 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.1-3.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 120
}
.wrap div.page-story div.story-3 div.highlights {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-3 div.highlights div.item {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-3 div.highlights div.item1 {
  width: 258px; height: 309px; background: url(../images/story.img.1-3-1.png); margin-left: -320px; margin-top: -210px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-3 div.highlights div.item2 {
  width: 257px; height: 296px; background: url(../images/story.img.1-3-2.png); margin-left: -115px; margin-top: -200px; transform: translateY(30px); opacity: 0; z-index: 110
}
.wrap div.page-story div.story-3 div.highlights div.item3 {
  width: 242px; height: 302px; background: url(../images/story.img.1-3-3.png); margin-left: 78px; margin-top: -205px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-3 div.highlights div.item4 {
  width: 305px; height: 172px; background: url(../images/story.img.1-3-4.png); margin-left: -255px; margin-top: 100px; transform: translateX(-100px); opacity: 0
}
.wrap div.page-story div.story-3 div.highlights div.item5 {
  width: 308px; height: 198px; background: url(../images/story.img.1-3-5.png); margin-left: -45px; margin-top: 90px; transform: translateX(100px); opacity: 0
}
.wrap div.page-story div.story-4 div.title {
  width: 450px; height: 194px; background: url(../images/story.text.2-1.png) center center no-repeat; margin-left: -225px; transform: translateY(30px); opacity: 0; position: absolute; top: 82px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-4 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.2-1.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-4 div.icons {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-4 div.icons div.icon {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-4 div.icons div.icon1 {
  width: 91px; height: 48px; background: url(../images/story.icon.2-1a.png); margin-left: -170px; margin-top: -210px; transform: translateY(-10px); animation: floating 2s ease infinite
}
.wrap div.page-story div.story-4 div.icons div.icon2 {
  width: 91px; height: 48px; background: url(../images/story.icon.2-1b.png); margin-left: 150px; margin-top: -210px; transform: translateY(-10px); animation: floating 2.2s ease infinite
}
.wrap div.page-story div.story-4 div.icons div.icon3 {
  width: 99px; height: 48px; background: url(../images/story.icon.2-1c.png); margin-left: 110px; margin-top: 5px; transform: translateY(-10px); animation: floating 2.1s ease infinite
}
.wrap div.page-story div.story-4 div.text {
  width: 600px; font-size: 24px; line-height: 160%; text-align: center; color: #ffffff; margin-left: -300px; transform: translateY(30px); opacity: 0; position: absolute; top: 800px; left: 50%; z-index: 200
}
.wrap div.page-story div.story-5 div.title {
  width: 300px; height: 77px; background: url(../images/story.text.2-2.png) center center no-repeat; margin-left: -155px; transform: scale(0.3); opacity: 0; position: absolute; top: 65px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-5 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.2-2.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-5 div.texts {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-5 div.texts div.text {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-5 div.texts div.text1 {
  width: 430px; height: 104px; background: url(../images/story.text.2-2a.png); margin-left: -200px; margin-top: -325px; transform: translateX(-100px); opacity: 0
}
.wrap div.page-story div.story-5 div.texts div.text2 {
  width: 388px; height: 132px; background: url(../images/story.text.2-2b.png); margin-left: -106px; margin-top: -158px; transform: translateX(100px); opacity: 0
}
.wrap div.page-story div.story-5 div.texts div.text3 {
  width: 288px; height: 166px; background: url(../images/story.text.2-2c.png); margin-left: -200px; margin-top: 50px; transform: translateX(-100px); opacity: 0
}
.wrap div.page-story div.story-6 div.title {
  width: 392px; height: 139px; background: url(../images/story.text.2-3.png) center center no-repeat; margin-left: -196px; transform: translateY(30px); opacity: 0; position: absolute; top: 82px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-6 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.2-3.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-6 div.texts {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-6 div.texts div.text {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-6 div.texts div.text1 {
  width: 578px; height: 496px; background: url(../images/story.text.2-3a.png); margin-left: -320px; margin-top: -350px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-6 div.texts div.text2 {
  width: 552px; height: 481px; background: url(../images/story.text.2-3b.png); margin-left: -230px; margin-top: -95px; transform: translateY(30px); opacity: 0
}
.wrap div.page-story div.story-7 div.title {
  width: 384px; height: 183px; background: url(../images/story.text.3-1.png) center center no-repeat; margin-left: -192px; transform: translateY(30px); opacity: 0; position: absolute; top: 86px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-7 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.3-1.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-7 div.images {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-7 div.images div.item {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-7 div.images div.item1 {
  width: 404px; height: 626px; background: url(../images/story.img.3-1a.png); margin-left: -180px; margin-top: -325px; transform: translateY(-10px); animation: floating 2s ease infinite
}
.wrap div.page-story div.story-7 div.images div.item2 {
  width: 245px; height: 230px; background: url(../images/story.img.3-1b.png); margin-left: -315px; margin-top: 40px; z-index: 120
}
.wrap div.page-story div.story-7 div.text {
  width: 600px; font-size: 24px; line-height: 160%; text-align: center; color: #ffffff; margin-left: -300px; transform: translateY(30px); opacity: 0; position: absolute; top: 800px; left: 50%; z-index: 200
}
.wrap div.page-story div.story-8 div.title {
  width: 394px; height: 86px; background: url(../images/story.text.3-2.png) center center no-repeat; margin-left: -290px; transform: scale(0.3); opacity: 0; position: absolute; top: 60px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-8 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.3-2.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-8 div.texts {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-8 div.texts div.text {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-8 div.texts div.text1 {
  width: 336px; height: 95px; background: url(../images/story.text.3-2a.png); margin-left: -35px; margin-top: -188px; transform: translateX(-100px); opacity: 0
}
.wrap div.page-story div.story-8 div.texts div.text2 {
  width: 353px; height: 132px; background: url(../images/story.text.3-2b.png); margin-left: -235px; margin-top: 135px; transform: translateX(100px); opacity: 0
}
.wrap div.page-story div.story-9 div.title {
  width: 396px; height: 87px; background: url(../images/story.text.3-3.png) center center no-repeat; margin-left: -290px; transform: scale(0.3); opacity: 0; position: absolute; top: 60px; left: 50%; z-index: 120
}
.wrap div.page-story div.story-9 div.image {
  width: 100%; height: 1136px; background: url(../images/story.img.3-3.png) top center no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.page-story div.story-9 div.images {
  width: 100%; height: 1136px; position: absolute; top: 0px; left: 0px; z-index: 180
}
.wrap div.page-story div.story-9 div.images div.item,
.wrap div.page-story div.story-9 div.images div.text {
  position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.page-story div.story-9 div.images div.item1 {
  width: 183px; height: 156px; background: url(../images/story.img.3-3-1.png); margin-left: -120px; margin-top: -425px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item2 {
  width: 175px; height: 140px; background: url(../images/story.img.3-3-2.png); margin-left: 105px; margin-top: -375px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item3 {
  width: 168px; height: 134px; background: url(../images/story.img.3-3-3.png); margin-left: -245px; margin-top: -285px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item4 {
  width: 169px; height: 128px; background: url(../images/story.img.3-3-4.png); margin-left: -20px; margin-top: -215px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item5 {
  width: 195px; height: 166px; background: url(../images/story.img.3-3-5.png); margin-left: -275px; margin-top: -130px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item6 {
  width: 175px; height: 134px; background: url(../images/story.img.3-3-6.png); margin-left: -52px; margin-top: -52px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item7 {
  width: 177px; height: 159px; background: url(../images/story.img.3-3-7.png); margin-left: 144px; margin-top: -120px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.item8 {
  width: 198px; height: 182px; background: url(../images/story.img.3-3-8.png); margin-left: -250px; margin-top: 60px; transform: translateY(-10px); opacity: 0
}
.wrap div.page-story div.story-9 div.images div.text {
  width: 436px; height: 182px; background: url(../images/story.text.3-3a.png); margin-left: -116px; margin-top: 105px; transform: translateX(100px); opacity: 0; z-index: 50
}
.wrap div.page-story.on li.glide__slide--active div.story-1 div.title {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-1 div.text {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-2 div.title {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-2 div.icons div.icon1 {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-2 div.icons div.icon2 {
  animation: fade_in_b .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-2 div.icons div.icon3 {
  animation: fade_in_b .3s ease forwards .4s
}
.wrap div.page-story.on li.glide__slide--active div.story-2 div.icons div.icon4 {
  animation: fade_in_b .3s ease forwards .5s
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.title {
  animation: fade_in_a .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.highlights div.item1 {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.highlights div.item2 {
  animation: fade_in_b .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.highlights div.item3 {
  animation: fade_in_b .3s ease forwards .4s
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.highlights div.item4 {
  animation: fade_in_c .3s ease forwards .5s
}
.wrap div.page-story.on li.glide__slide--active div.story-3 div.highlights div.item5 {
  animation: fade_in_d .3s ease forwards .6s
}
.wrap div.page-story.on li.glide__slide--active div.story-4 div.title {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-4 div.text {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-5 div.title {
  animation: fade_in_a .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-5 div.texts div.text1 {
  animation: fade_in_c .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-5 div.texts div.text2 {
  animation: fade_in_d .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-5 div.texts div.text3 {
  animation: fade_in_c .3s ease forwards .4s
}
.wrap div.page-story.on li.glide__slide--active div.story-6 div.title {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-6 div.texts div.text1 {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-6 div.texts div.text2 {
  animation: fade_in_b .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-7 div.title {
  animation: fade_in_b .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-7 div.text {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-8 div.title {
  animation: fade_in_a .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-8 div.texts div.text1 {
  animation: fade_in_d .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-8 div.texts div.text2 {
  animation: fade_in_c .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.title {
  animation: fade_in_a .3s ease forwards
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item1 {
  animation: fade_in_b .3s ease forwards .2s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item2 {
  animation: fade_in_b .3s ease forwards .25s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item3 {
  animation: fade_in_b .3s ease forwards .3s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item4 {
  animation: fade_in_b .3s ease forwards .35s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item5 {
  animation: fade_in_b .3s ease forwards .4s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item6 {
  animation: fade_in_b .3s ease forwards .45s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item7 {
  animation: fade_in_b .3s ease forwards .5s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.item8 {
  animation: fade_in_b .3s ease forwards .55s
}
.wrap div.page-story.on li.glide__slide--active div.story-9 div.images div.text {
  animation: fade_in_d .3s ease forwards .7s
}
.wrap div.page-ending {
  background: #59b4ef
}
.wrap div.page-ending div.text {
  width: 600px; font-size: 34px; line-height: 200%; color: #ffffff; text-align: center; margin-left: -300px; transform: translateY(30px); opacity: 0; position: absolute; top: 90px; left: 50%; z-index: 200
}
.wrap div.page-ending div.text em {
  font-size: 40px; font-style: normal; padding-left: 5px; padding-right: 5px; color: #e60014
}
.wrap div.page-ending div.stage {
  width: 100%; height: 1136px; background: url(../images/ending.png) 0px 0px no-repeat; position: absolute; bottom: 0px; z-index: 120; animation: ending_stage 0.8s step-start infinite
}
.wrap div.page-ending div.create {
  width: 410px; height: 68px; background: url(../images/button.create.png) center center no-repeat; transform: translateX(-50%); position: absolute; bottom: 50px; left: 50%; z-index: 1000
}
.wrap div.page-ending.on div.text {
  animation: fade_in_b .3s ease forwards
}
.wrap div.printer {
  width: 100%; height: 100%; background: #f11c0d; transform: scale(0.8); opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.wrap div.printer div.bg {
  width: 100%; height: 1138px; background: url(../images/printer.jpg) 0px 0px no-repeat; mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) 100% 100% no-repeat; -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) 100% 100% no-repeat; position: absolute; top: 0px; left: 0px; z-index: 100
}
.wrap div.printer div.bg div.info {
  width: 100%; height: 100%; transform: translateY(20px); opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 100; transition: transform 0.3s ease 0.7s, opacity 0.3s ease 0.7s
}
.wrap div.printer div.bg div.avatar {
  width: 62px; height: 62px; border-radius: 100%; overflow: hidden; transform: translateX(-212px); position: absolute; top: 163px; left: 50%; z-index: 120
}
.wrap div.printer div.bg div.avatar img {
  display: block; width: 100%; height: 100%
}
.wrap div.printer div.bg div.title {
  width: 262px; display: flex; align-items: center; font-size: 24px; line-height: 120%; color: #8f8f8f; transform: translateX(-50%); position: absolute; top: 160px; left: 50%; z-index: 120
}
.wrap div.printer div.bg div.line {
  width: 464px; height: 2px; background: url(../images/line.png) center center no-repeat; transform: translateX(-50%); position: absolute; top: 245px; left: 50%; z-index: 120
}
.wrap div.printer div.bg div.barcode {
  width: 466px; height: 28px; background: url(../images/barcode.png) center center no-repeat; transform: translateX(-50%); position: absolute; top: 920px; left: 50%; z-index: 120
}
.wrap div.printer div.bg div.persona {
  width: 480px; height: 720px; background: none top center no-repeat; transform: translateX(-50%); position: absolute; top: 160px; left: 50%; z-index: 100
}
.wrap div.printer div.bg div.persona[persona='1'] {
  background-image: url(../images/tag.1.png)
}
.wrap div.printer div.bg div.persona[persona='2'] {
  background-image: url(../images/tag.2.png)
}
.wrap div.printer div.bg div.persona[persona='3'] {
  background-image: url(../images/tag.3.png)
}
.wrap div.printer div.bg div.persona[persona='4'] {
  background-image: url(../images/tag.4.png)
}
.wrap div.printer div.bg div.persona[persona='5'] {
  background-image: url(../images/tag.5.png)
}
.wrap div.printer div.bg div.persona[persona='6'] {
  background-image: url(../images/tag.6.png)
}
.wrap div.printer div.bg div.persona[persona='7'] {
  background-image: url(../images/tag.7.png)
}
.wrap div.printer div.bg div.persona[persona='8'] {
  background-image: url(../images/tag.8.png)
}
.wrap div.printer div.restart {
  width: 90px; height: 80px; background: url(../images/button.restart.png) center center no-repeat; position: absolute; bottom: 50px; left: 40px; z-index: 200; cursor: pointer
}
.wrap div.printer div.save {
  width: 430px; height: 109px; background: url(../images/button.save.png) center center no-repeat; position: absolute; bottom: 40px; right: 30px; z-index: 200; cursor: pointer
}
.wrap div.printer div.share {
  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: scale(0.8); opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.wrap div.printer div.share div.box {
  transform: translateX(-50%) translateY(calc(-50% - 60px)); position: absolute; top: 50%; left: 50%; z-index: 100
}
.wrap div.printer div.share div.box div.image img {
  display: block; max-width: calc(100vw - 120px); max-height: calc(100vh - 200px)
}
.wrap div.printer div.share div.box div.text {
  width: 600px; transform: translateX(-50%); position: absolute; top: calc(100% + 30px); left: 50%; z-index: 100
}
.wrap div.printer div.share div.box div.text span.tips {
  display: block; line-height: 120%; font-size: 34px; color: #ffffff; text-align: center
}
.wrap div.printer div.share div.box div.text span.close {
  display: block; width: 60px; height: 60px; margin: auto; margin-top: 20px; background: url(../images/img.close.1.png) center center no-repeat; cursor: pointer
}
.wrap div.printer div.share.on {
  transform: scale(1); opacity: 1; z-index: 500
}
.wrap div.printer div.share.out {
  transform: scale(1.2); opacity: 0
}
.wrap div.printer.on {
  transform: scale(1); opacity: 1; z-index: 500
}
.wrap div.printer.on div.bg {
  animation: printer 0.6s step-start forwards 0.2s
}
.wrap div.printer.on div.bg div.info {
  transform: translateY(0px); opacity: 1
}
.wrap div.printer.out {
  transform: scale(1.2); opacity: 0
}
.wrap div.preparing {
  display: none !important
}
.rules {
  width: 100%; height: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.8); transform: scale(0.9); opacity: 0; backface-visibility: hidden; position: absolute; top: 0px; left: 0px; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.rules div.text {
  width: calc(100% - 80px); height: calc(100% - 140px); background: #ffffff; transform: translateX(-50%) translateY(-50%) translateZ(0); border-radius: 40px; overflow: hidden; position: absolute; top: 50%; left: 50%; z-index: 100
}
.rules div.text span.close {
  width: 84px; height: 84px; background: url(../images/img.close.1.png) center center no-repeat; position: absolute; top: 0px; right: 0px; z-index: 200; cursor: pointer
}
.rules div.text h2 {
  width: 100%; height: 84px; background: #e60014; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #ffffff
}
.rules div.text div.content {
  width: 100%; font-family: Arial, Verdana; height: calc(100% - 84px); overflow: scroll
}
.rules div.text div.content h3 {
  width: 100%; padding: 30px 0px; text-align: center; font-size: 26px; line-height: 140%; text-align: center
}
.rules div.text div.content div.detail {
  width: 100%; box-sizing: border-box; padding: 0px 35px 35px 35px; font-size: 22px; line-height: 200%; word-break: break-all
}
.rules div.text div.content div.detail p {
  margin-bottom: 30px
}
.rules div.text div.content div.detail ol {
  width: 100%; box-sizing: border-box; list-style: decimal; margin-bottom: 30px; padding-left: 28px
}
.rules.on {
  transform: scale(1); opacity: 1; z-index: 20000
}
.rules.on.out {
  transform: scale(1.15); opacity: 0
}
.loading {
  width: 100%; height: 100%; background: url(../images/loading.bg.jpg) #55c6ff bottom center no-repeat; display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; left: 0px; z-index: 10000; transition: transform 0.3s ease, opacity 0.3s ease
}
.loading div.tv {
  width: 342px; height: 261px; background: url(../images/loading.tv.png) center center no-repeat; display: flex; align-items: center; justify-content: center; transform: translateY(-100px); animation: tv 3s ease infinite
}
.loading div.tv span.text {
  display: block; font-size: 24px; line-height: 100%; padding-bottom: 20px; font-family: 'DFYuanGB'; color: #ffffff; text-align: center
}
.loading div.tv span.bar {
  width: 130px; height: 22px; box-sizing: border-box; display: block; margin: auto; border: #ffffff 2px solid; border-radius: 12px; overflow: hidden
}
.loading div.tv span.bar em {
  display: block; width: 0%; height: 100%; background: #ffffff; border-radius: 8px; transition: width 0.3s ease
}
.loading.out {
  transform: scale(1.15); opacity: 0
}
@keyframes arrow {
  0% {
    transform: translateX(-50%) translateY(-20px)
  }
  50% {
    transform: translateX(-50%) translateY(0px)
  }
  100% {
    transform: translateX(-50%) translateY(-20px)
  }
}
@keyframes tv {
  0% {
    transform: translateY(-100px)
  }
  50% {
    transform: translateY(-60px)
  }
  100% {
    transform: translateY(-100px)
  }
}
@keyframes floating {
  0% {
    transform: translateY(-10px)
  }
  50% {
    transform: translateY(0px)
  }
  100% {
    transform: translateY(-10px)
  }
}
@keyframes fade_in_a {
  0% {
    transform: scale(0.3); opacity: 0
  }
  100% {
    transform: scale(1); opacity: 1
  }
}
@keyframes fade_in_b {
  0% {
    transform: translateY(30px); opacity: 0
  }
  100% {
    transform: translateY(0px); opacity: 1
  }
}
@keyframes fade_in_c {
  0% {
    transform: translateX(-100px); opacity: 0
  }
  100% {
    transform: translateX(0px); opacity: 1
  }
}
@keyframes fade_in_d {
  0% {
    transform: translateX(100px); opacity: 0
  }
  100% {
    transform: translateX(0px); opacity: 1
  }
}
@keyframes home_stage {
  0% {
    background-position-x: 0px
  }
  25% {
    background-position-x: -640px
  }
  50% {
    background-position-x: -1280px
  }
  75% {
    background-position-x: -1920px
  }
  100% {
    background-position-x: 0px
  }
}
@keyframes home_stage_singer {
  0.00% {
    background-position: 0px 0px
  }
  4.55% {
    background-position: -640px 0px
  }
  9.09% {
    background-position: -1280px 0px
  }
  13.64% {
    background-position: -1920px 0px
  }
  18.18% {
    background-position: -2560px 0px
  }
  22.73% {
    background-position: -3200px 0px
  }
  27.27% {
    background-position: -3840px 0px
  }
  31.82% {
    background-position: -4480px 0px
  }
  36.36% {
    background-position: 0px -1138px
  }
  40.91% {
    background-position: -640px -1138px
  }
  45.45% {
    background-position: -1280px -1138px
  }
  50.00% {
    background-position: -1920px -1138px
  }
  54.55% {
    background-position: -2560px -1138px
  }
  59.09% {
    background-position: -3200px -1138px
  }
  63.64% {
    background-position: -3840px -1138px
  }
  68.18% {
    background-position: -4480px -1138px
  }
  72.73% {
    background-position: 0px -2276px
  }
  77.27% {
    background-position: -640px -2276px
  }
  81.82% {
    background-position: -1280px -2276px
  }
  86.36% {
    background-position: -1920px -2276px
  }
  90.91% {
    background-position: -2560px -2276px
  }
  95.45% {
    background-position: -3200px -2276px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes profile_window {
  0% {
    transform: translateX(50px) translateY(0px)
  }
  50% {
    transform: translateX(60px) translateY(-10px)
  }
  100% {
    transform: translateX(50px) translateY(0px)
  }
}
@keyframes signin_stage {
  0.00% {
    background-position: 0px 0px
  }
  20.00% {
    background-position: -640px 0px
  }
  40.00% {
    background-position: -1280px 0px
  }
  60.00% {
    background-position: -1920px 0px
  }
  80.00% {
    background-position: -2560px 0px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes lottery_stage {
  0.00% {
    background-position: 0px 0px
  }
  30.00% {
    background-position: -640px 0px
  }
  60.00% {
    background-position: 0px 0px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes cocreation_x2025 {
  0.00% {
    transform: translateX(-50%) translateY(0px); opacity: 1
  }
  100.00% {
    transform: translateX(-50%) translateY(-30px); opacity: 0
  }
}
@keyframes cocreation_x2025text {
  0.00% {
    transform: translateX(-50%) translateY(0px); opacity: 1
  }
  100.00% {
    transform: translateX(-50%) translateY(-30px); opacity: 0
  }
}
@keyframes cocreation_cloud {
  0.00% {
    top: 0px
  }
  100.00% {
    top: calc(0px - (4600px - 100%))
  }
}
@keyframes cocreation_cloud_top {
  0.00% {
    transform: translateX(-50%) scale(1)
  }
  100.00% {
    transform: translateX(-50%) scale(0.85)
  }
}
@keyframes cocreation_stage_inspiration {
  0.00% {
    top: 200px; opacity: 0
  }
  100.00% {
    top: 180px; opacity: 1
  }
}
@keyframes cocreation_stage_contribution {
  0.00% {
    top: 270px; opacity: 0
  }
  100.00% {
    top: 250px; opacity: 1
  }
}
@keyframes cocreation_bulb {
  0.00% {
    transform: translateX(-50%) scale(0.7); opacity: 0; bottom: -100%
  }
  15.00% {
    transform: translateX(-50%) scale(0.7); opacity: 1; bottom: 750px
  }
  30.00% {
    transform: translateX(-50%) scale(1) rotate(10deg); opacity: 1; bottom: 700px
  }
  100.00% {
    transform: translateX(calc(-50% - 35px)) scale(0.4) rotate(23deg); opacity: 1; bottom: 530px
  }
}
@keyframes cocreation_bulb_light {
  0.00% {
    bottom: 530px
  }
  50.00% {
    bottom: 550px
  }
  100.00% {
    bottom: 530px
  }
}
@keyframes mycocreation_dj {
  0.00% {
    background-position: 0px 0px
  }
  20.00% {
    background-position: -640px 0px
  }
  40.00% {
    background-position: -1280px 0px
  }
  60.00% {
    background-position: -1920px 0px
  }
  80.00% {
    background-position: -2560px 0px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes ending_stage {
  0.00% {
    background-position: 0px 0px
  }
  20.00% {
    background-position: -640px 0px
  }
  40.00% {
    background-position: -1280px 0px
  }
  60.00% {
    background-position: -1920px 0px
  }
  80.00% {
    background-position: -2560px 0px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes printer {
  0.00% {
    background-position: 0px 0px
  }
  9.09% {
    background-position: -640px 0px
  }
  18.18% {
    background-position: -1280px 0px
  }
  27.27% {
    background-position: -1920px 0px
  }
  36.36% {
    background-position: -2560px 0px
  }
  45.45% {
    background-position: -3200px 0px
  }
  54.55% {
    background-position: 0px -1138px
  }
  63.64% {
    background-position: -640px -1138px
  }
  72.73% {
    background-position: -1280px -1138px
  }
  81.82% {
    background-position: -1920px -1138px
  }
  90.91% {
    background-position: -2560px -1138px
  }
  100.00% {
    background-position: -2560px -1138px
  }
}