.update3 .person {
   background:url('../images/update3_people.png');
   width:1475px;
   height:841px;
   position:absolute;
   top:94px;
   left:50%;
   transform:translateX(-49%);
   opacity:0;
}
.active.update3 .person {
   animation: fade-in-out 0.5s 1.2s forwards ease-in;
}
.update3 .image_frame {
   width:751px;
   height:484px;
   background:url("../images/update3_frame.png") no-repeat;
   position:absolute;
   top:277px;
   left:50%;
   transform:translateX(-50%);
   display:flex;
   justify-content: center;
   align-items: center;
   opacity:0;
}
.active.update3 .image_frame {
   animation: bottom_from_top 0.5s 1.8s forwards;
}
.update3 .image_frame .content_image {
   width:718px;
   height:457px;
   background:url("../images/update3_content.png") no-repeat;
}
.update3 .image_frame .frame_shine {
   width:614px;
   height:24px;
   background:url("../images/update3_shine.png") no-repeat;
   position:absolute;
   top:-10px;
   left:54%;
   transform:translateX(-50%);
   
}
.update3 .chain {
   width:1910px;
   height:561px;
   position: relative;
   top:-50px;
   left:-25%;
   /* transform:translateX(-50%); */
   margin:0 auto;
   opacity:0;
}
.update3 .chain::before {
   background:url('../images/chain.png') no-repeat;
   content:"";
   width:100%;
   height:100%;
   position:absolute;
}
.active.update3 .chain {
   animation: chainExpand 0.5s 1.8s forwards;
}

.update4 .update_title2 {
   background:url("../images/update4_title.png") no-repeat;
   width:315px;
   height:104px;
   left:-35px;
}
.update4 .update4_sub {
   background:url("../images/update4_sub.png") no-repeat;
   width:723px;
   height:42px;
}
.update4 .paper {
   width:1251px;
   height:481px;
   position:absolute;
   top:300px;
   left:0;
   opacity: 0;
}
.active.update4 .paper {
   animation: fadeInExpand 0.8s 1.1s ease-out forwards;
}
.update4 .paper::before {
   content:'';
   position:absolute;
   width:100%;
   height:100%;
   inset:0;
   background-image:url("../images/update4_paper.png");
   background-repeat: no-repeat;
   background-position: -325px 0;
}
.update4 .bubble1 {
   background:url('../images/update4_bubble1.png') no-repeat;
   width:204px;
   height:206px;
   position:absolute;
   top:627px;
   left:-115px;
   z-index:1;
   opacity:0;
}
.update4 .water1 {
   background:url('../images/water1.png') no-repeat;
   width:156px;
   height:153px;
   position:absolute;
   top:555px;
   left:-155px;
   z-index:1;
}
.update4 .water2 {
   background:url('../images/water2.png') no-repeat;
   width:137px;
   height:56px;
   position:absolute;
   top:190px;
   right:-80px;
   z-index:1;
}
.update4 .bubble2 {
   background:url('../images/update4_bubble2.png') no-repeat;
   width:149px;
   height:151px;
   position:absolute;
   top:225px;
   right:-35px;
   z-index:1;
   opacity:0;
}
.active.update4 .bubble1 {
   animation: bubble-appear 0.3s 2.2s forwards ease-out, bubble-float 1s 2.9s infinite alternate-reverse ease-in-out;
}
.active.update4 .bubble2 {
   animation: bubble-appear 0.3s 2.4s forwards ease-out, bubble-float 1s 3.2s infinite alternate ease-in-out;
}

@keyframes bubble-float {
   from {
      transform:translateY(3px)
   }
   to {
      transform:translateY(0px)
   }
}

@keyframes bubble-appear {
   from {
      opacity:0;
      transform:scaleX(0.8) scaleY(0.8) translateY(20px);
   }
   to {
      opacity:1;
      transform:scaleX(1) scaleY(1) translateY(0px);
   }
}

.update4 .slight {
   position:absolute;
   top:0;
   left:50%;
   transform:translateX(-50%);
   background:url("../images/slight.png");
   width:1834px;
   height:935px;
   opacity: 0;
}
.active.update4 .slight {
   animation: fade-in-out 1s 1s forwards;
}
.update4 .content_image {
   background-image:url('../images/update4_content_image.png');
   width:1066px;
   height:334px;
   z-index:44;
   position:absolute;
   top:50%;
   left:50%;
   transform:translateX(-50%) translateY(-50%);
}

.update5 .update_title3 {
   background: url("../images/update5_title.png") no-repeat;
   width:584px;
   height:109px;
}
.update5 .update5_sub {
   background:url('../images/update5_sub.png') no-repeat;
   width:530px;
   height:43px;
}

.update5 .image1 {
   background:url("../images/update5_box.png") no-repeat;
   width:745px;
   height:432px;
   position:absolute;
   left:50%;
   transform:translateX(-50%);
   top:295px;
   opacity: 0;
}
.active.update5 .image1 {
   animation: bottom_from_top 0.5s 1s forwards;
}
.update5 .image2 {
   position:absolute;
   top:423px;
   left:100px;
   opacity:0;
}
.active.update5 .image2 {
   animation:right_from_left 1s 1.2s forwards;
}
.update5 .image3 {
   position:absolute;
   top:423px;
   right:110px;
   opacity:0;
}
.active.update5 .image3 {
   animation:left_from_right 1s 1.2s forwards;
}
.update5 .image2 .image2_frame,
.update5 .image3 .image3_frame {
   position:relative;
   background:url("../images/box_frame.png") no-repeat;
   width:312px;
   height:300px;
   display:flex;
   justify-content: center;
   align-items: center;
   z-index:11;
}
.update5 .image_box_shine {
   width:344px;
   height:334px;
   display:flex;
   justify-content: center;
   align-items: center;
}
.update5 .image_box_shine::before {
   content:'';
   background-image:url('../images/box_shine.png');
   background-repeat:no-repeat;
   width:100%;
   height:100%;
   position:absolute;
   animation: shine 0.8s infinite alternate;
}
.update5 .image2_content {
   position:relative;
   z-index:22;
   background:url("../images/update5_minbox_1.png") no-repeat;
   width:297px;
   height:288px;
}


.update5 .image3_content {
   position:relative;
   z-index:22;
   background:url("../images/update5_minbox_2.png") no-repeat;
   width:297px;
   height:288px;
}

@keyframes main_title_animation {
   from {
      opacity:0;
      transform:translateY(-10px);
   }
   to {
      opacity:1;
      transform:translateY(0px);
   }
}

@keyframes bgzoom_in_out {
   from {
      transform:scaleX(1) scaleY(1)
   }
   to {
      transform:scaleX(1.1) scaleY(1.1)
   }
}
@keyframes fadeInExpand {
   0% {
     opacity: 0;
     transform: scaleX(0);
   }
   100% {
     opacity: 1;
     transform: scaleX(1);
   }
 }

 @keyframes chainExpand {
   from {
      opacity:0;
      top:-60px;
   }
   to {
      opacity:1;
      top:-50px;
   }
 }

@keyframes fade-in-out {
   from {
      opacity:0;
   }
   to {
      opacity:1;
   }
}
@keyframes shine {
   0% {
      opacity: 0.3;
   }
   100% {
      opacity: 1;
   }
}

@keyframes appear {
   from {
      opacity:0;
      tranform:scaleX(0) scaleY(0) translateX(-50%)
   }
   to {
      opacity:1;
      transform:scaleX(1) scaleY(1) translateX(-50%)
   }
}

@keyframes left_from_right {
   from {
      opacity:0;
      right:0;
   }
   to {
      opacity:1;
      right:110px;
   }
}

@keyframes right_from_left {
   from {
      opacity:0;
      left:0;
   }
   to {
      opacity:1;
      left:100px;
   }
}

@keyframes bottom_from_top {
   from {
      opacity:0;
      top:280px;
   }
   to {
      opacity:1;
      top:295px;
   }
}

@keyframes char_ani {
   0% {
      opacity:0;
      transform:translateX(-50%) scaleX(0.9) scaleY(0.9);
   }
   80% {
      opacity:0.8;
   }
   /* 95% {
      opacity:0.9;
   }  */
   100% {
      opacity:1;
      transform:translateX(-50%) scaleX(1) scaleY(1);
   }
}