.index-banner-box{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 93px;
}
.index-banner-bg{
    width: 100%;
    height: calc(100vh - 93px);
    display: block;
    font-size: 0;
}
.index-banner-img-box{
    width: 300px;
    max-width: 100%;
    display: block;
    font-size: 0;
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.index-banner-img-hand{
    position: absolute;
    top: 180px;
    right: 29px;
    width: 86px;
    transform-origin: left bottom;
    animation: banner-hand 1.5s linear 0s infinite alternate;
}


@-webkit-keyframes banner-hand {
    from {
        transform: rotateZ(0deg);
    }
  
    to {
        transform: rotateZ(-8deg);
  
    }
  }
  @keyframes fade-out {
   from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(-8deg);
    }
}


@media only screen and (max-width: 1200px){
    .index-banner-box{
        margin-top: 65px;
    }
    .index-banner-bg{
        height: calc(100vh - 65px);
    }
}
@media only screen and (max-width: 1000px){
    .index-banner-bg{
        height: calc((960 / 1920) * 100vw);
    }
    .index-banner-img-box{
        transform: scale(0.6);
        transform-origin: bottom right;
    }
}
@media only screen and (max-width: 750px){
    .index-banner-img-box{
        transform: scale(0.35);
    }
}
@media only screen and (max-width: 550px){
    .index-banner-img-box{
        width: 80px;
        transform: scale(1);
        bottom: 5px;
        right: 5px;
    }
    .index-banner-img-hand {
        top: 48px;
        right: 8px;
        width: 22px;
    } 
}
@media only screen and (max-height: 800px){
    .index-banner-img-box{
        width: 220px;
    }
    .index-banner-img-hand{
        top: 135px;
        right: 23px;
        width: 60px;
    }
}
@media only screen and (max-width: 400px){
    .index-banner-img-box{
        transform: scale(0.8);
    }
}