.loading-gif {
    position: absolute;
    display: block;
    margin: 0 auto;
    left: 13%;
    top: 28%;
    text-align: center;
    opacity: 1;
    transition: opacity 2s;
}

.start-img {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 2s;
    opacity: 0;
    left: 0;
    top: 0;
}

.container-1,
.container-2 {
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 2s;
}

.container-1 canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    /* transition: opacity 2s; */
    z-index: 1;
}

.container-1 .intor-bg {
    background-image: url(../textures/scene-back.jpg);
    background-position: 50%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: mymove 22s forwards;
            animation: mymove 22s forwards;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.container-2 canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.PublicLetter {
    position: absolute;
    width: 20%;
    height: 12%;
    top: 11%;
    left: 21%;
}

.ToSend {
    position: absolute;
    width: 20%;
    height: 12%;
    top: 63%;
    left: 13%;
}

.KanghuiLetter {
    position: absolute;
    width: 19%;
    height: 24%;
    top: 50%;
    left: 75%;
}

@keyframes mymove {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(10);
        transform: scale(10);
    }
}

@-webkit-keyframes mymove {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(10);
        transform: scale(10);
    }
}

video {
    display: none;
}