.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color:#33E5BC;
    z-index: 555;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loader .logo_load {
    width: 170px;
  }
  .top_back_img_sp{
    animation-name:topimgfade;
    animation-delay:2.5s;
    animation-timing-function: ease-out;
    animation-duration: 0.3s;
    opacity: 1;
    animation-fill-mode: forwards;
    bottom: -240px;
  
  }
  @keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -240px;
  
  }
  100% {
     opacity: 1;
     bottom:-200px;
  }
  }
  .top_txt_position{
    animation-name:top_txt_position_anime;
    animation-delay:2.9s;
    animation-timing-function: ease-out;
    animation-duration: 0.8s;
    opacity: 0;
    animation-fill-mode: forwards;
  }
  @keyframes top_txt_position_anime{
    0% {
       opacity: 0;
    
    }
    100% {
       opacity: 1;
    }
    }
    .top_txt_img{
      animation-name:top_txt_img;
      animation-delay:3s;
      animation-timing-function: ease-out;
      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      transform: rotate(-15deg);
    }
    @keyframes top_txt_img{
      0% {
         transform: rotate(-17deg);
      
      }
      100% {
         transform: rotate(0deg);
      }
      }
      @media screen and (min-width: 500px){
        .top_back_img_sp{
        bottom: -320px;
    }
    @keyframes topimgfade{
      0% {
         opacity: 1;
         bottom: -320px;
      
      }
      100% {
         opacity: 1;
         bottom: -280px;
      }
      }
    .top_txt_position{
      bottom: 515px;
    }
      }
      @media screen and (min-width: 500px) and (min-height: 700px){
        .top_back_img_sp{
        bottom: -320px;
    }
    @keyframes topimgfade{
      0% {
         opacity: 1;
         bottom: -320px;
      
      }
      100% {
         opacity: 1;
         bottom: -280px;
      }
      }
    .top_txt_position{
      bottom: 515px;
    }
      }
  @media screen and (min-height: 700px) and (max-width: 500px)
{
  .top_back_img_sp{
  animation-name:topimgfade;
  animation-delay:1.4s;
  animation-timing-function: ease-out;
  animation-duration: 0.6s;
  opacity: 1;
  animation-fill-mode: forwards;
  bottom: -230px;

}
@keyframes topimgfade{
0% {
   opacity: 1;
   bottom: -230px;

}
100% {
   opacity: 1;
   bottom: -170px;
}
}
}
@media screen and (min-height: 900px) and (max-width: 690px){
    .top_back_img_sp {
       bottom: -250px;
    }
    @keyframes topimgfade{
      0% {
         opacity: 1;
         bottom: -250px;
      
      }
      100% {
         opacity: 1;
         bottom: -300px;
      }
      }
    }
@media screen and (min-width: 768px){
  .top_back_img_sp {
    bottom: -550px;
  }
  @keyframes topimgfade{
    0% {
       opacity: 1;
       bottom: -550px;
    
    }
    100% {
       opacity: 1;
       bottom: -500px;
    }
    }
    .top_txt_position {
      left: 50%;
      bottom: 500px;
  }
}



@media screen and (min-height: 900px) and (max-width: 768px)and (min-width: 500px){
.top_back_img_sp {
   bottom: -250px;
}
@keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -250px;
  
  }
  100% {
     opacity: 1;
     bottom: -200px;
  }
  }
.top_txt_position {
    bottom: 605px;
}
}

@media screen and (min-width: 600px) and (min-height: 900px) and (max-width: 768px){
    .top_back_img_sp {
       bottom: -250px;
    }
    @keyframes topimgfade{
      0% {
         opacity: 1;
         bottom: -250px;
      
      }
      100% {
         opacity: 1;
         bottom: -200px;
      }
      }
      .top_human1{
        width:250px;
        bottom: 28px;
      }
      .top_human2 {
        width: 220px;
        height: auto;
    }
    }
    @media screen and (min-width: 700px) and (min-height: 900px) and (max-width: 768px){
        .top_back_img_sp {
            bottom: -450px;
         }
         @keyframes topimgfade{
           0% {
              opacity: 1;
              bottom: -450px;
           
           }
           100% {
              opacity: 1;
              bottom: -400px;
           }
           }
    }
@media screen and (min-width: 1024px){
.top_back_img_sp {
    width: 1600px;
    bottom: -600px;
}
@keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -600px;
  
  }
  100% {
     opacity: 1;
     bottom: -575px;
  }
  }
  .top_txt_position {
    left: 50%;
    bottom: 501px;
}

.top_back_img_sp {
  width: 1758px;
  bottom: -690px;
}
@keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -690px;
  
  }
  100% {
     opacity: 1;
     bottom: -657px;
  }
  }
}
  @media screen and (min-width: 1200px){
.top_back_img_sp {
    bottom: -820px;
    width: 2030px;
}
@keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -820px;
  }
  100% {
     opacity: 1;
     bottom: -780px;
  }
  }
  .top_txt_position {
    bottom: 551px;
}
  }
  @media screen and (min-width: 1024px) and (min-height: 1300px) and (max-width: 1224px){
.top_back_img_sp {
    bottom: -550px;
    width: 2100px;
}
@keyframes topimgfade{
  0% {
     opacity: 1;
     bottom: -550px;
  }
  100% {
     opacity: 1;
     bottom: -500px;
  }
  }
  .top_txt_position {
   bottom: 890px;
}
  }
  @media screen and (min-width: 1200px) and (min-height: 900px){
    .top_back_img_sp {
        bottom: -820px;
        width: 2100px;
    }
    @keyframes topimgfade{
      0% {
         opacity: 1;
         bottom: -820px;
      }
      100% {
         opacity: 1;
         bottom: -750px;
      }
      }
      .top_txt_position {
        bottom: 626px;
    }
      }
      
      @media screen and (min-width: 1200px) and (min-height: 900px){
        .top_back_img_sp {
            bottom: -700px;
            width: 2100px;
        }
        @keyframes topimgfade{
          0% {
             opacity: 1;
             bottom: -700px;
          }
          100% {
             opacity: 1;
             bottom: -650px;
          }
          }
          .top_txt_position {
            bottom: 726px;
        }
          }
          @media screen and (min-width: 1200px) and (min-height: 1000px){
            .top_back_img_sp {
                bottom: -900px;
                width: 2500px;
            }
            @keyframes topimgfade{
              0% {
                 opacity: 1;
                 bottom: -900px;
              }
              100% {
                 opacity: 1;
                 bottom: -850px;
              }
              }
              .top_txt_position {
               bottom: 806px;
           }

              }   
              @media screen and (min-width: 1200px) and (min-height: 1100px){
               .top_back_img_sp {
                   bottom: -820px;
                   width: 2500px;
               }
               @keyframes topimgfade{
                 0% {
                    opacity: 1;
                    bottom: -820px;
                 }
                 100% {
                    opacity: 1;
                    bottom: -780px;
                 }
                 }
                 .top_human1 {
                  width: 400px;
                  bottom: 190px;
              }
              .top_human2 {
               width: 349px;
           }
           .top_txt_position {
            bottom: 800px;
        }
        .top_txt_position {
         bottom: 856px;
     }
                 }        
  @media screen and (min-width: 1700px) and (min-height: 950px){
    .top_back_img_sp {
      width: 2640px;
      bottom: -1000px;
  }
  @keyframes topimgfade{
    0% {
       opacity: 1;
       bottom: -1000px;
    }
    100% {
       opacity: 1;
       bottom:  -960px;
    }
    }
    .top_txt_position {
      bottom: 800px;
  }
  }