.banner {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #0f2c41;
}

/* .banner .swiper-slide{
    width: 100%;
    height: 100vh;
    position: relative;
}

.banner .swiper-slide .innerImg{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
} */

.banner .videoArea {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}


.videoArea video {
    min-width: 100%;
    min-height: 100%;
    width: 106%;
    height: 100%;
    object-fit: cover;
}

.banner .logo {
    position: absolute;
    bottom: 5%;
    right: 6%;
    width: 15vw;
    z-index: 1001;
}

.banner .bannerMask {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-image: url(../images/image/index/banner_Mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 999;
}

.bannerplate {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 1000;
    transition: all 1s ease-in-out;
}

.plate01 {
    background-image: url(../images/image/index/plate01.png);
    background-position: right;
    top: 0%;
    right: -30%;
}

.plate02 {
    background-image: url(../images/image/index/plate02.png);
    background-position: top;
    top: -100%;
}

.plate03 {
    background-image: url(../images/image/index/plate03.png);
    background-position: bottom;
    top: 0%;
    left: -100%;
}

.plate01.move {
    right: -13.2%;
}

.plate02.move {
    top: -41.7%;
}

.plate03.move {
    left: 0%;
}


@media screen and (max-width: 768px) {
    .banner .bannerMask {
        background-image: url(../images/image/index/video_mask.svg);
        position: absolute;
        top: unset;
        bottom: 0%;
        width: 100%;
        height: 38vh;
    }

    .banner .logo {
        right: unset;
        left: 10%;
        width: 44.9vw;
    }

    .plate01 {
        width: 85.5vw;
        height: 46.7vh;
        background-image: url(../images/image/index/plate01_m.svg);
        background-position: center;
        top: unset;
        bottom: 30.5%;
        right: -100%;
    }

    .plate02 {
        width: 129vw;
        height: 42.7vh;
        background-image: url(../images/image/index/plate02_m.svg);
        background-position: center;
        top: -5%;
        left: -120%;
    }

    .plate03 {
        width: 55.4vw;
        height: 13.4vh;
        background-image: url(../images/image/index/plate03_m.svg);
        background-position: center;
        top: unset;
        bottom: 19%;
        left: unset;
        right: 0%;
    }

    .plate01.move {
        right: -46.1%;
    }

    .plate02.move {
        top: -5%;
        left: -9%;
    }

    .plate03.move {
        left: unset;
    }
}