.happy .happy_auto {
  position: absolute;
  top: 10px;
  width: 200%;
  -webkit-animation: logo 14s infinite linear 0.5s both;
          animation: logo 14s infinite linear 0.5s both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2%;
}
.happy .happy_ttl_01 {
  position: absolute;
  top: 1.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 70%;
}
.happy .happy_ttl_02 {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 90%;
}
.happy .happy_img {
  position: absolute;
  width: 80%;
}
.happy .happy_img.right {
  right: 0;
}
.happy .happy_img.left {
  left: 0;
}
.happy .happy_img_01 {
  top: 8%;
}
.happy .happy_img_02 {
  top: 18%;
}
.happy .happy_img_03 {
  top: 28%;
}
.happy .happy_img_04 {
  top: 38%;
}
.happy .happy_txt_box {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5%;
  padding: 0 3%;
  height: 3%;
}
.happy .happy_txt_box .txt_box {
  background-color: #fff;
  padding: 10px;
  height: 30%;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
  opacity: 0;
}
.happy .happy_txt_box .txt_box img {
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: 0.8s 1.2s;
  transition: 0.8s 1.2s;
  opacity: 0;
}
.happy .happy_txt_box.box1 {
  top: 10%;
}
.happy .happy_txt_box.box2 {
  top: 20%;
}
.happy .happy_txt_box.box3 {
  top: 30%;
}
.happy .happy_txt_box.box4 {
  top: 40%;
}
.happy .happy_txt_box.box1, .happy .happy_txt_box.box3 {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.happy .happy_txt_box.box1 .txt_box, .happy .happy_txt_box.box3 .txt_box {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.happy .happy_txt_box.box1 .txt_box.move, .happy .happy_txt_box.box3 .txt_box.move {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  opacity: 1;
}
.happy .happy_txt_box.box1 .txt_box.move img, .happy .happy_txt_box.box3 .txt_box.move img {
  opacity: 1;
}
.happy .happy_txt_box.box2, .happy .happy_txt_box.box4 {
  right: 0;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.happy .happy_txt_box.box2 .txt_box, .happy .happy_txt_box.box4 .txt_box {
  -webkit-clip-path: inset(0 0 0 100%);
          clip-path: inset(0 0 0 100%);
}
.happy .happy_txt_box.box2 .txt_box.move, .happy .happy_txt_box.box4 .txt_box.move {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  opacity: 1;
}
.happy .happy_txt_box.box2 .txt_box.move img, .happy .happy_txt_box.box4 .txt_box.move img {
  opacity: 1;
}
.happy .happy_txt_13 {
  position: absolute;
  top: 53.7%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 53%;
}
.happy .happy_txt_14 {
  position: absolute;
  top: 69.3%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 73%;
}
.happy .happy_txt_15 {
  position: absolute;
  top: 72.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 78%;
}