.index-banner-box{
    width: 100%;
    height: 100vh;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #fbe2dd;
}
.index-banner-border{
    width: 100%;
    height: 100vh;
    max-width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    box-sizing: border-box;
    padding-bottom: calc((515 / 1920) * 100vw - 25vh);
    position: relative;
    z-index: 3;
}
.index-banner-bg{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.index-banner-mask{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.index-banner-img-box{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.index-banner-img-1{
    position: absolute;
    top: 0;
    left: 0;
}
.index-banner-img-2{
    position: absolute;
    top: 0;
    right: 0;
}
.index-banner-img-3{
    position: absolute;
    bottom: 0;
    left: 0;
}



@media only screen and (max-width: 1400px){
    .index-banner-border-logo{
        width: 80vw;
    }
    .index-banner-img-1{
        width: 18vw;
    }
    .index-banner-img-2{
        width: 38vw;
    }
}
@media only screen and (max-width: 1000px){
    .index-banner-border-logo{
        width: 60vw;
    }
}
@media only screen and (max-width: 768px){
    .index-banner-border-logo{
        width: 70vw;
    }
    .index-banner-box{
        height: calc((1400 / 1920) * 100vw);
    }
    .index-banner-border{
        height: 100%;
    }
}




@media only screen and (min-width: 769px){
    .index-banner-border-logo{
        animation: fadeInUp 1s ease .6s 1 both;
    }
    
    @keyframes bannerImgAnima_1 {
        from {
            transform: translate3d( -10%, -10%, 0);
            opacity: 0;
        }
    
        to {
            transform: translate3d( 0%, 0%, 0);
            opacity: 1;
        }
    }
    .index-banner-img-1{
        animation: bannerImgAnima_1 1s ease .3s 1 both;
    }
    @keyframes bannerImgAnima_2 {
        from {
            transform: translate3d( 10%, -10%, 0);
            opacity: 0;
        }
    
        to {
            transform: translate3d( 0%, 0%, 0);
            opacity: 1;
        }
    }
    .index-banner-img-2{
        animation: bannerImgAnima_2 1s ease .3s 1 both;
    }
    @keyframes bannerImgAnima_3 {
        from {
            transform: scale(1.2);
            opacity: 0;
        }
    
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    .index-banner-img-3{
        animation: bannerImgAnima_3 1s ease 0s 1 both;
    }
}