/*第一屏*/
.topic {
  width: 720px;
  height: 2796px;
  position: relative;
  background: url("../image/section1/bg.jpg") no-repeat;
  background-size: 100%;
  /* background-position-y: -5px; */
}

.topic_down {
  width: 720px;
  height: 2796px;
  position: relative;
  background: url("../image/section1/bg.jpg") no-repeat;
  background-size: 100%;
  /* background-position-y: -5px; */
}

/* 顶部 */
.top-list {
  position: fixed;
  top: 0;
  width: 720px;
  height: 90px;
  background: url("../image/section1/nav-top-bg.png") no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 5;
}
.menu-btn {
  position: fixed;
  right: -6px;
  top: 15px;
  transform: translateX(-50%);
  width: 51px;
  height: 51px;
  background: url("../image/section1/menu-btn.png") no-repeat;
  background-size: 100%;
  z-index: 5;
}

/*
.top-list li {
  width: 59px;
  height: 59px;
  margin-left: 17px;
} */

.top-list li a {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.head-icon {
  width: 186px;
  height: 76px;
  position: absolute;
  left: 20px;
  background: url(../image/section1/logo.png) no-repeat;
  background-size: 100%;
  margin-top: 10px;

}
.head-icon1 {
  width: 50px;
  height: 75px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 83%;
  /* transform: translateX(-50%); */
  animation: bounce-inSS 2s linear infinite;
}
.head-icon1 img {
  width: 100%;
}
/*第一屏*/
@keyframes bounce-inSS {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}
.top-list .top-home {
  width: 60px;
  height: 30px;
  background: url("../image/section1/top-home.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 550px;
  top: 27px;
}

.top-list .top-youtube {
  width: 43px;
  height: 35px;
  background: url("../image/section1/top-YouTube.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 470px;
  top: 25px;
}

@keyframes music-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.top-list .top-music {
  width: 35px;
  height: 41px;
  background: url("../image/section1/nomusic.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 585px;
  top: 20px;
}

.top-list .top-music.active {
  background: url("../image/section1/music.png") no-repeat;
  background-size: 100%;
  animation: music-animation 2s linear infinite;
}

.top-list .top-discord {
  width: 52px;
  height: 52px;
  background: url("../image/section1/top-discord.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 590px;
  top: 15px;
}

.top-list .top-menu {
  width: 35px;
  height: 28px;
  margin-right: 10px;
  background: url("../image/section1/top-menu.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 650px;
  top: 27px;
}

.top-list .top-lounge {
  width: 48px;
  height: 37px;
  background: url("../image/section1/top-lounge.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 380px;
  top: 25px;
}
.btn-shoping{
  width: 461px;
  height: 153px;
  position: absolute;
  top: 1000px;
  left: 50%;
  margin-left: -230.5px;
  background: url(../image/section1/btn-shoping.png) no-repeat;
  background-size: 100%;
}

/* 侧边栏 */
.nav-list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 720px;
  height: 2334px;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.9);
}

.nav-list i.nav-logo {
  width: 369px;
  height: 133px;
  background: url(../image/section1/nav-logo.png) no-repeat;
  background-size: 100%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 98px;
}

/* @font-face {
  font-family: "Danjo-bold";
  src: url(../../fonts/Danjo-bold-Regular.otf);
} */

.nav-list li {
  font-family: "Danjo-bold", "Noto Serif KR", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -3px;
  color: #fcfcfc;
  text-align: center;
  width: 463px;
  margin: 0 auto;
  margin-top: 30px;
  position: relative;
}

.nav-list .nav-1 {
  margin-top: 295px;
}

.nav-list li.active {
  color: #ffffff;
  /* filter: brightness(1.6); */
}
.nav-list li.active::after {
  content: "";
  width: 463px;
  height: 89px;
  background: url(../image/section1/nav-selected.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.nav-list .nav-store {
  position: relative;
  width: 575px;
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav-store > a {
  display: block;
  width: 279px;
  height: 84px;
  background: url(../image/section1/nav-store-gp.png) no-repeat;
  background-size: 100%;
  margin-bottom: 30px;
}
.nav-store > a.nav-store-ios {
  width: 279px;
  height: 84px;
  background-image: url(../image/section1/nav-store-ios.png);
}
.nav-store > a.nav-store-one {
  width: 278px;
  height: 82px;
  background-image: url(../image/section1/nav-store-one.png);
}
.nav-store > a.nav-store-galaxy {
  width: 278px;
  height: 82px;
  background-image: url(../image/section1/nav-store-galaxy.png);
}


.nav-store.down > a {
  display: block;
  width: 271px;
  height: 83px;
  background: url(../image/section1/nav-store-gp-down.png) no-repeat;
  background-size: 100%;
  margin-bottom: 30px;
}
.nav-store.down > a.nav-store-ios {
  width: 278px;
  height: 83px;
  background-image: url(../image/section1/nav-store-ios-down.png);
}
.nav-store.down > a.nav-store-one {
  width: 278px;
  height: 82px;
  background-image: url(../image/section1/nav-store-one-down.png);
}
.nav-store.down > a.nav-store-galaxy {
  width: 278px;
  height: 82px;
  background-image: url(../image/section1/nav-store-galaxy-down.png);
}

.nav-close{
  width: 40px;
  height: 32px;
  position: absolute;
  top: 36px;
  right: 34px;
  background: url(../image/section1/nav-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.topic .btn-video {
  width: 136px;
  height: 136px;
  background: url("../image/section1/btn-play.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 588px;
  margin: auto;
  z-index: 2;
}

.topic .slogan {
  width: 606px;
  height: 179px;
  background: url(../image/section1/slogan.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  margin-left: -303px;
  top: 235px;
  z-index: 2;
}
.topic .slogan-countdown {
  width: 541px;
  height: 244px;
  background: url(../image/section1/slogan-countdown.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  margin-left: -270.5px;
  top: 185px;
  z-index: 2;
}

.topic .jump-order {
  width: 511px;
  height: 194px;
  background: url(../images/btn-jump-order.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 820px;
  left: 96px;
  z-index: 2;
}

.topic .arrow-down {
  width: 102px;
  height: 118px;
  background: url(../images/arrow-down.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1000px;
  left: 307px;
  z-index: 2;
  -webkit-animation: bounce-down 1s linear infinite;
  animation: bounce-down 1s linear infinite;
}

.topic .order-count {
  width: 720px;
  height: 480px;
  position: relative;
  top: 140px;
  /* background: url("../images/order-slogan.png") no-repeat; */
}

.topic .order-count .count {
  width: 720px;
  height: 164px;
  position: relative;
  top: 156px;
  left: 0px;
  background: url(../images/order-count-bg.png) no-repeat;
}

.topic .order-count .count span {
  width: 196px;
  height: 50px;
  position: absolute;
  top: 56px;
  left: 164px;
  line-height: 1;
  font-size: 56px;
  font-weight: 700;
  color: #c53f30;
  letter-spacing: 2px;
  text-align: center;
}

.topic .order-count {
  display: inline-block;
}

.topic .order-link-btns {
  font-size: 0;
  display: inline-block;
  position: relative;
  margin-top: 150px;
  margin-left: 25px;
  z-index: 2;
}

.topic .order-link-btns a {
  width: 120px;
  height: 120px;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  margin-top: -15px;
}

.topic .order-link-btns a:nth-of-type(1) {
  background: url(../images/order-fb-btn.png) no-repeat;
}

.topic .order-link-btns a:nth-of-type(2) {
  background: url(../images/order-fans-btn.png) no-repeat;
}

.topic .order-link-btns a:nth-of-type(3) {
  background: url(../images/order-home-btn.png) no-repeat;
}

.topic .btn-order {
  width: 423px;
  height: 122px;
  position: absolute;
  top: 1100px;
  left: 50%;
  margin-left: -216.5px;
  z-index: 1;
  background: url("../image/section1/btn-order.png") no-repeat;
  background-size: 100%;
}

.topic .btn-order.over {
  width: 510px;
  height: 183px;
  margin-left: -255px;
  background: url("../image/over/btn-yuyue-over.png") no-repeat;
  background-size: 100%;
}

.topic .btn-order.no-aftere::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url(../image/fb-like-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 12px;
  left: 24px;
  z-index: 1;
}

.topic .btn-order.no-aftere::after {
  content: "";
  display: inline-block;
  width: 63px;
  height: 58px;
  background: url(../image/fb-like-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 111px;
  left: 394px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
}

.header-select {
  width: 523px;
  height: 198px;
  position: absolute;
  left: 60px;
  right: 0;
  top: 910px;
  margin: 0 auto;
 
}

.header-i {
  content: '';
  width: 245px;
  height: 176px;
  background-image: url(../image/section1/phoneli.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: -25px;
  left: 250px;
  z-index: 2;
  pointer-events: none;
}

.header-select .header-select-ios{
  display: none;
  width: 434px;
  height: 148px;
}

.header-select .header-select-android{
  display: none;
  width: 438px;
  height: 149px;
}



.slogan2 {
  width: 720px;
  height: 365px;
  background: url(../image/section1/slogn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 445px;
  left: 50%;
  margin-left: -360px;
  /* display: none; */
}

.header-mask {
  width: 438px;
  height: 149px;
  mask-image: url('../image/section1/header-select.png'); /* 确保路径正确 */
  mask-size: cover;
}

.header-mask.ios{
  width: 434px;
  height: 148px;
  mask-image: url('../image/section1/header-select-ios.png'); /* 确保路径正确 */
  mask-size: cover;
}


.header-select.store-active::before {
  content: '';
  display: inline-block;
  width: 43px;
  height: 43px;
  background: url(../image/section1/active-red.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 4px;
  left: 20px;
  z-index: 2;
}
.header-select.store-active::after {
  content: '';
  display: inline-block;
  width: 66px;
  height: 55px;
  background: url(../image/section1/active-hand.png) no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: 35px;
  right: 55px;
}

.light-animation-wap {
  animation: sg 2s linear infinite;
  background: linear-gradient(120deg, #0000, #0000, #fff7, #0000, #0000);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .65s;
  width: 100%;
  pointer-events: none;
}

.topic .topic-gifts {
  position: absolute;
  top: 1174px;
  left: 20px;
  z-index: 1;
}

.topic .topic-ball {
  width: 150px;
  height: 131px;
  background: url("../images/topic-ball.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 587px;
  left: 19px;
  -webkit-animation: ball 3s ease-in-out infinite;
  animation: ball 3s ease-in-out infinite;
  z-index: 1;
  transform-style: preserve-3d;
}

.topic .topic-ball::before {
  content: "";
  width: 228px;
  height: 254px;
  background: url("../images/topic-ball-light.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: -80px;
  left: -43px;
  transform: translateZ(-1px);
  -webkit-animation: ball-light 3s ease-in-out infinite;
  animation: ball-light 3s ease-in-out infinite;
}

@keyframes ball {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ball-light {
  0% {
    width: 228px;
    height: 254px;
  }

  50% {
    width: 280px;
    height: 312px;
  }

  100% {
    width: 228px;
    height: 254px;
  }
}

.topic .btn-web {
  width: 138px;
  position: absolute;
  top: 1120px;
  left: 445px;
}

.reward-bg {
  width: 654px;
  height: 1154px;
  background: url(../image/pop/reward/pop-award-bg.png) no-repeat;
  background-size: 100%;
}
.reward-hidde {
  width: 540px;
  height: 705px;
  overflow: hidden;
  overflow-y: auto;
  position: absolute;
  top: 60px;
  left: 52%;
  transform: translateX(-50%);
}



.reward-scroll {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.reward-scroll .title {
  margin: 0 auto;
  margin-bottom: 12px;
}

.reward-scroll .title1 {
  width: 316px;
  height: 34px;
  background: url("../image/pop/reward/left-title-1.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .title2 {
  width: 315px;
  height: 34px;
  background: url("../image/pop/reward/left-title-2.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .title3 {
  width: 249px;
  height: 34px;
  background: url("../image/pop/reward/left-title-3.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .title4 {
  width: 282px;
  height: 34px;
  background: url("../image/pop/reward/left-title-4.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .title5 {
  width: 248px;
  height: 34px;
  background: url("../image/pop/reward/left-title-5.png") no-repeat;
  background-size: 100%;
}

.reward-scroll ul {
  margin-bottom: 45px;
}

.reward-scroll .ul-1 {
  width: 515px;
  height: 171px;
  background: url("../image/pop/reward/left-1.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .ul-2 {
  width: 515px;
  height: 228px;
  background: url("../image/pop/reward/left-2.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .ul-3 {
  width: 515px;
  height: 115px;
  background: url("../image/pop/reward/left-3.png") no-repeat;
  background-size: 100%;
}

.reward-scroll .ul-4 {
  width: 515px;
  height: 54px;
  background: url("../image/pop/reward/left-4.png") no-repeat;
  background-size: 100%;
}
.reward-scroll .ul-5 {
  width: 511px;
  color: #ffffed;
}



/* 列表item */
.reward-scroll ul li {
  width: 515px;
  height: 54px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  padding-right: 5px;
  box-sizing: border-box;
  justify-content: space-around;
}
/* .reward-scroll .ul-4 li{
  width: 550px;
} */

.reward-scroll ul li .text {
  width: 220px;
  text-align: center;
  /* margin-left: 10px; */
  /* margin-right: 4px; */
  color: #b5b5b5;
  line-height: 36px;
  font-size: 18px;
}

.reward-scroll ul li .codItem {
  width: 288px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.reward-scroll ul li .codItem #code {
  width: 75px;
  font-size: 20px;
  text-align: right;
  color: #b5b5b5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reward-scroll ul li .codItem #code.scode {
  width: 62px;
}

.reward-scroll .right-2.ul-5 li {
  width: 515px;
  height: 54px;
  background: url("../image/pop/reward/bar-bg.png") no-repeat;
  background-size: 100%;
  margin-bottom: 7px;
}

.reward-bg #no-code {
  color: #dddddd;
  font-weight: 500;
  height: 25px;
}
.reward-bg #no-code a{
  font-size: 15px;
  text-decoration:underline;
  text-decoration-color:#ddd;
  display: inline-block;
  line-height: 20px;
  text-align: center;
}

.reward-scroll ul li .copy {
  width: 41px;
  height: 23px;
  background: url(../image/pop/reward/btn-copy.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  margin-left: 20px;
  margin-top: -1px;
}

.reward-scroll ul li #code:empty+.copy {
  display: none;
}
/* .reward-scroll .ul-1 li .text,.reward-scroll .ul-1 li .codItem,
.reward-scroll .ul-2 li .text,.reward-scroll .ul-2 li .codItem {
display: none;
} */

/* .reward-scroll .ul-4 li .text,.reward-scroll .ul-4 li .codItem{
  background: url(../image/pop/reward/left-5-bg.png) no-repeat;
  background-size: 100%;
  width: 232px;
  height: 36px;
} */
.reward-scroll .ul-4 li .codItem2{
  background: url(../image/pop/reward/lounge.png) no-repeat;
  background-size: 100%;
  width: 232px;
  height: 36px;
}
.reward-scroll .ul-4 li .text {
  width: 228px;
  text-align: center;
  margin-left: 4px;
  margin-right: 10px;
  color: #fff;
  line-height: 36px;
}

.reward-btn {
  width: 286px;
  height: 55px;
  position: absolute;
  background: url(../image/pop/reward/btn-Privacy.png) no-repeat;
  background-size: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 840px;
  cursor: pointer;
}
.reward-bg .dia-close{
  left: 565px;
  top: -55px;
}
/*<!-- 光斑 -->*/

/* 光斑 */
.poker-star {
  width: 574px;
  height: 300px;
  position: absolute;
  top: 415px;
  left: 57px;
  z-index: 10;
  pointer-events: none;
  /* background-color: rgba(0, 0, 0, 0.8); */
}

.poker-star ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}

.poker-star li {
  /* opacity: 0.5; */
  transition: all .3s ease-out;
}

.poker-star .poker-star1,
.poker-star .poker-star1-2,
.poker-star .poker-star1-3,
.poker-star .poker-star1-4,
.poker-star .poker-star1-5 {
  position: absolute;
  width: 27px;
  height: 27px;
  top: 230px;
  left: 360px;
}

.poker-star .poker-star2,
.poker-star .poker-star2-2,
.poker-star .poker-star2-3,
.poker-star .poker-star2-4,
.poker-star .poker-star2-5,
.poker-star .poker-star2-6,
.poker-star .poker-star2-7 {
  position: absolute;
  width: 23px;
  height: 23px;
  top: 180px;
  left: 75px;
  /* animation: butterfly-float2 6s 2.1s infinite ease-out; */
  /* transform: scale(.9); */
}

.poker-star .poker-star3,
.poker-star .poker-star3-2,
.poker-star .poker-star3-3,
.poker-star .poker-star3-4,
.poker-star .poker-star3-5,
.poker-star .poker-star3-6 {
  position: absolute;
  width: 21px;
  height: 20px;
  top: 140px;
  left: 165px;
  /* animation: butterfly-float3 6s 3.1s infinite ease-out; */
}


/* 第一步:右侧下 */
.poker-star .poker-star2 {
  top: 265px;
  left: 338px;
  animation: butterfly-float1 2s .2s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

.poker-star .poker-star1 {
  top: 394px;
  left: 319px;
  animation: butterfly-float1 4s 1.1s infinite cubic-bezier(0.57, 1.52, 1, 1);
}


/* 第二步:左侧下 */
.poker-star .poker-star1-2 {
  top: 250px;
  left: 190px;
  animation: butterfly-float2 3s 1.6s infinite ease-out;
}

.poker-star .poker-star3-6 {
  top: 226px;
  left: 103px;
  animation: butterfly-float1 3s 2.1s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

/* 中间左 */
.poker-star .poker-star2-5 {
  top: 180px;
  left: 150px;
  animation: butterfly-float3 3s 2.6s infinite ease-out;
}

.poker-star .poker-star2-3 {
  top: 189px;
  left: 223px;
  animation: butterfly-float3 3s 3.1s infinite cubic-bezier(0.57, 1.52, 1, 1);
}



/* 中间右 */
.poker-star .poker-star2-2 {
  top: 205px;
  left: 382px;
  animation: butterfly-float3 3s 3.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

.poker-star .poker-star1-3 {
  top: 170px;
  left: 391px;
  animation: butterfly-float3 5s 3.1s infinite ease-out;
}

.poker-star .poker-star3 {
  top: 171px;
  left: 470px;
  animation: butterfly-float3 5s 2.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

.poker-star .poker-star1-4 {
  top: 110px;
  left: 420px;
  animation: butterfly-float1-4 5s 1.1s infinite ease-out;
}


/* 左上 */
.poker-star .poker-star1-5 {
  top: 145px;
  left: 185px;
  animation: butterfly-float1 6s 3.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

.poker-star .poker-star2-6 {
  top: 125px;
  left: 145px;
  animation: butterfly-float1 6s 2.1s infinite ease-out;
}

.poker-star .poker-star2-4 {
  top: 132px;
  left: 75px;
  animation: butterfly-float1 6s 1.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

/* 中间向上 */

.poker-star .poker-star3-5 {
  top: 83px;
  left: 152px;
  animation: butterfly-floatup 6s 5.1s infinite ease-out;
}

.poker-star .poker-star3-4 {
  top: 68px;
  left: 210px;
  animation: butterfly-floatup 6s 4.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

.poker-star .poker-star3-3 {
  top: 76px;
  left: 312px;
  animation: butterfly-floatup 6s 3.1s infinite ease-out;
}

.poker-star .poker-star3-2 {
  top: 68px;
  left: 473px;
  animation: butterfly-floatup 6s 2.6s infinite cubic-bezier(0.57, 1.52, 1, 1);
}

@keyframes butterfly-float1 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(-10px) translateY(-15px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-float1-4 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(-10px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-float2 {
  0% {
    transform: translateY(0) scale(.9);
    opacity: 1;
  }

  50% {
    transform: translateX(-5px) translateY(-15px) scale(.9);
    opacity: .1;
  }

  100% {
    transform: translateY(0) scale(.9);
    opacity: 1;
  }
}

@keyframes butterfly-float3 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(5px) translateY(-10px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-floatup {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(3px) translateY(-15px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}