/* Some DEMO style */
body {
	margin: 0;
	padding: 0;
}

.swiper {
      width: 300px;
      height: 600px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
    }

    .swiper-slide img {
      display: block;
    }
.mySwiper {
	/* transition:transform 0.1s ease ; */
 
}
.swiper.swiper-cube {
   
}
.mySwiper.scale-out {
  transform: scale(0.7);
}
.mySwiper.scale-in {
  transform: scale(1);
}

.swiper-slide.swiper-slide-active {
  z-index: 2;
}
.swiper-slide .entity-img {
  object-fit: contain;
  width: 100%;
  height: auto;
}


.clicktag {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 20;
}

.full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.anim1 {
  transition: opacity 0.2s ease-out 0s,  transform 0.7s ease-out 0.1s; 
  transform: translateZ(50px) scale(0.95833);
  perspective: 900px;

}

.anim2 {
  transition: opacity 0.2s ease-out 0s,  transform 0.7s ease-out 0.3s; 

}


.overflow {
  
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  
}
.swiper.swiper-cube.mySwiper {
  overflow: hidden;
}
.moon{
   position: absolute;
   left: 62px;
    top: 110px;
   width: 120px;
   height: auto;
   transition:all 0.7s linear 0.5s;
   transform: translateZ(50px);
   transform-origin: 68px 15px;
}
.swiper-slide-active .moon{
  animation: move1 2s linear  ;
   animation-delay: 0.6s;
  
   
}
@keyframes move1 {
 
         0% {
    transform:translateZ(50px) rotate(20deg);
  }

  16% {
    transform:translateZ(50px) rotate(-6.4deg);
  }

  28% {
    transform:translateZ(50px) rotate(2.6deg);
  }

  44% {
    transform:translateZ(50px) rotate(-0.1deg);
  }

  59% {
    transform:translateZ(50px) rotate(0.4deg);
  }

  73% {
    transform:translateZ(50px) rotate(-0.2deg);
  }

  88% {
    transform:translateZ(50px) rotate(0deg);
  }

  100% {
    transform:translateZ(50px) rotate(0deg);
  }
}
.stick1, .stick2, .stick3 {
  transform-origin: right bottom;
  position: absolute;
  transition:all 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
  opacity: 0;
}
.stick1{
   left: 27px;
    top: 218px;
   width: 166.5px;
   height: auto;
}
.stick2{
   left: 17px;
    top: 274px;
   width: 164.5px;
   height: auto;
   transition-delay: 0.6s;
}
.stick3{
   left: 16px;
    top: 244px;
   width: 167px;
   height: auto;
   transition-delay: 0.5s;
}

.anim2_moon {
  position: absolute;
  left: 130px;
  width: 171px;
  height: auto;
  top: 142px;
  transform:translateZ(50px)  scale(0.95833) ;
  transition:all 0.7s linear 0.5s;
  transform-origin: 78px 24px;
}
.swiper-slide-active .anim2_moon{
  animation: move2 2s linear  ;
   animation-delay: 0.6s;
 
   
}

@keyframes move2 {
 
         0% {
    transform:translateZ(50px) rotate(20deg) scale(0.95833);
  }

  16% {
    transform:translateZ(50px) rotate(-6.4deg) scale(0.95833);
  }

  28% {
    transform:translateZ(50px) rotate(2.6deg) scale(0.95833);
  }

  44% {
    transform:translateZ(50px) rotate(-0.1deg) scale(0.95833);
  }

  59% {
    transform:translateZ(50px) rotate(0.4deg) scale(0.95833);
  }

  73% {
    transform:translateZ(50px) rotate(-0.2deg) scale(0.95833);
  }

  88% {
    transform:translateZ(50px) rotate(0deg) scale(0.95833);
  }

  100% {
    transform:translateZ(50px) rotate(0deg) scale(0.95833);
  }
}

#anim3_1  {
  transform: translateZ(0px) ;
}
#anim3_2  {
  transform: translateZ(35px) scale(0.97084);
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 20px;
  height: 20px;
  right: 5px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.597489 10.1925L4.78249 6.00002L0.597489 1.80752C0.457801 1.66699 0.379395 1.4769 0.379395 1.27877C0.379395 1.08063 0.457801 0.890538 0.597489 0.750016C0.738011 0.610328 0.9281 0.531921 1.12624 0.531921C1.32438 0.531921 1.51447 0.610328 1.65499 0.750016L6.42499 5.52002C6.5514 5.64779 6.6223 5.82028 6.6223 6.00002C6.6223 6.17976 6.5514 6.35224 6.42499 6.48002L1.65499 11.25C1.51447 11.3897 1.32438 11.4681 1.12624 11.4681C0.9281 11.4681 0.738011 11.3897 0.597489 11.25C0.457801 11.1095 0.379395 10.9194 0.379395 10.7213C0.379395 10.5231 0.457801 10.333 0.597489 10.1925Z' fill='white'/%3E%3C/svg%3E") center no-repeat;
}

.swiper-button-prev {
  transform: scaleX(-1) ;
   left: 5px;
  right: auto;
}

.swiper-slide img {
  pointer-events: none;
  }