html, body {
  margin: 0;
}
.animation_row img {
  vertical-align: top;
  height: auto;
}

.animation_row {
  max-width: 1472px;
  position: relative;
  font-family: 'Host Grotesk', sans-serif;
  color: #1A263C;

  overflow: hidden;
 
}

.animation_row * {
  pointer-events: none;
}
  
.animation_scalable {
  transform-origin: left top;
      width: 1472px;
    position: absolute;
    left: 0;
    top: 0;
}

.animation_full {
  width: 100%;
  height: auto;
  vertical-align: top;
  position: relative;
}
.animation_text {
  position: absolute;
  right: 38px;
  top: 123px;
  width: 546px;
  padding: 0px 65px 0 47px;
  box-sizing: border-box;
  color: #19263c;
  height: 479px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.animation_heading {
  font-weight: 700;
      font-size: 62px;
    line-height: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3em;
}
.animation_p {
  margin: 32px 0 0 0;
  font-size: 20px;
  line-height: 1.4em;
  font-weight: 700;
}
.animation_abs {
  position: absolute;
}

/*animation1*/
.animation1_replay {
  visibility: hidden;
  opacity: 0;
  left: 221px;
  top: 433px;
  width: 296px;
  height: 35px;
  cursor: pointer;
  pointer-events: all!important;
}
.animation1_fireworks {
  width: 420px;
  height: 535px;
  left: 160px;
  top: 103px;
  width: 660px;
    height: 575px;
    left: 40px;
    top: 73px;
}
.animation1_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.animation1_img {
  left: 38px;
  top: 38px;
}
.animation1_svg1 {
  left: 149px;
  top: 117px;
}
.animation1_onetime {
  left: 75px;
  top: 118px;
}
.animation1_s50 {
  left: 173px;
  top: 177px;
}
.animation1_cursor {
  left: 830px;
  top: 500px;
}
.animation1_svg2 {
  left: 149px;
  top: 91px;
}
.animation1_s15 {
  left: 173px;
  top: 131px;
}
.animation1_svg3 {
  left: 149px;
  top: 91px;
}
.animation1_50input {
  font-size: 14px;
  color: #1A263C;
  line-height: 1em;
  left: 81px;
  width: 120px;
  top: 271px;
  background: #fff;
  text-align: left;
}
.animation1_subtotal {
  width: 206px;
  text-align: right;
  left: 142px;
  top: 325.61px;
  font-weight: bold;
  font-size: 14px;
  color: #2F3135;
  line-height: 1em;
}
.animation1_info_2 {
  left: 93px;
  top: 295.61px;
}


/*animation3*/
.animation3_fireworks {
  width: 420px;
  height: 535px;
  left: 355px;
  top: 103px;
}
.animation3_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.animation_center {
  position: absolute;
  left: 391px;
  top: 172px;
  width: 346px;
  height: 410px;
}
.animation_img1 {
  width: 100%;
  height: auto;
}
.animation_heading1 {
  text-align: center;
  font-size: 16px;
  color: #FAA718;
  line-height: 18px;
  margin: 23px 18px 0 18px;
}
.animation_p1 {
  margin: 8px 20px 0 20px;
  font-size: 8px;
  color:#1A263C;
  line-height: 1em;
  text-align: center;
}
.animation_p2 {
  font-weight: bold;
  font-size: 8px;
  width: 110%;
  position: absolute;
  left: -5%;
  bottom: 25px;
  text-align: center;
}
.animation_button1 {
  position: absolute;
  bottom: 58px;
  left: 0;
  width:100% ;
  height: auto;
}
.animation_button2 {
  position: absolute;
  bottom: 77.89px;
  height: auto;
  left: 96px;
}
.animation_box1 {
  left: 176px;
  top: 268px;
}
.animation_cursor1 {
  left: 350px;
    top: 400px;
}
.animation_hidden {
  opacity: 0;
}
.animation_button2_text {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 15px;
  color: #fff;
  line-height: 1em;
  white-space: nowrap;
}
.animation_button2_text.after::after {
  content:"|";
}


/*animation2*/
.animation2_phone {
  left: 366px;
  top: 146px;
}
.animation2_phone1 {
  width: 470px;
  height: auto;
}
.animation2_finger {
  left: 0px;
    top: 248px;
    width:140px;
}
.animation2_frame {
  position: absolute;
    left: 0;
    top: 518px;
  width: 300px;
  height: 250px;
    transform-origin: left top;
}
.animation2_mask {
  left: 57px;
  top: 121px;
  padding-top: 10px;
  width: 300px;
  height: 449px;
    transform-origin: left top;
    transform: scale(0.67);
    overflow: hidden;
    border-radius: 25px;
    box-sizing: border-box;

}
.animation2_scroll_img {
  width: 100%;
  height: 268px;
}
.animation_row3 iframe {
  background: url(https://www.feathr.co/hubfs/banners/for_199065818941/images/Iphone-spinner.gif) center no-repeat ;
  background-size: 50% auto;
}
.animation2_frame160x600 {
  left: 168px;
  top: 355px;
  transform-origin: left top;
  transform: scale(0.075);
  width: 160px;
  height: 600px;
}
.animation2_frame300x250 {
  left: 148px;
  top: 408px;
  transform-origin: left top;
  transform: scale(0.172);
  width: 300px;
  height: 250px;
}
.animation2_frame300x600 {
  left: 163px;
  top: 460px;
  transform-origin: left top;
  transform: scale(0.07);
  width: 300px;
  height: 600px;
}
.animation2_frame320x50 {
  left: 142px;
  top: 515px;
  transform-origin: left top;
  transform: scale(0.2);
  width: 320px;
  height: 50px;
}
.animation2_frame728x90 {
  left: 142px;
  top: 542px;
  transform-origin: left top;
  transform: scale(0.09);
  width: 728px;
  height: 90px;
}
.animation2_frame970x250 {
  left: 142px;
  top: 564px;
  transform-origin: left top;
  transform: scale(0.065);
  width: 970px;
  height: 250px;
}
.animation2_nums {
  left: 257px;
  width: 152px;
  top: 278px;
  color: #23DFF2;
  font-weight: bold;
  line-height: 1em;
  font-size: 26.25px;
  text-align: left;
}

/*animation4*/
.animation4_nums1 {
  left: 33px;
  top: 55px;
  font-size: 34.67px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums2 {
  left:28px;
  top: 45px;
  font-size: 27px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums3 {
  left: 29px;
  top: 48px;
  font-size: 29px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums4 {
  left: 32px;
  top:53px;
  font-size: 33px;
  line-height: 1em;
  font-weight: bold;
}
.animation_tr_rb {
  transform-origin: right bottom;
}
.animation_tr_lb {
  transform-origin: left bottom;
}
.animation_tr_lt {
  transform-origin: left top;
}
.animation_tr_rt {
  transform-origin: right top;
}