@charset "utf-8";
/* CSS Document */


.box {
  margin:0;
  overflow: hidden;
}

.box .boxInner,
.box .boxInner-com,
.box .boxInner-7s,
.box .boxInner-9s,
.box .boxInner-11s,
.box .boxInner-13s {
  width: 100%;
  height: inherit;
  text-align: center;
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.isPlay,
.isPlay-com {
 animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

.isPlay-com:before,
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
}


.isPlay-7s,
.isPlay-9s{
	animation-name: play;
	animation-timing-function: cubic-bezier(.8,0,.5,1);
	position: relative;
	opacity: 1 !important;
}

.isPlay-7s{animation-duration: .7s;}
.isPlay-9s{animation-duration: .9s;}



.isPlay-7s:before,
.isPlay-9s:before{
  animation-name: maskOut;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
}

.isPlay-7s:before{animation-duration: .7s; animation-delay: .7s;}
.isPlay-9s:before{animation-duration: .9s; animation-delay: .9s;}



@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
  
  
  
  
  
}