*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:sans-serif;
}

/* ========================= */
/* Background Video */
/* ========================= */

#video{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;
}

/* ========================= */
/* Overlay */
/* ========================= */

#overlay{

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:10;

}

/* Bottom Background */

#bottombg{

    position:absolute;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

    width:100%;

    z-index:20;

}

/* Characters */

#char{
    position:absolute;

    left:50%;
    bottom:12%;

    transform:translateX(-50%);

    height:75%;

    z-index:30;
}


/* DXKuma */

#dxkuma{
    position:absolute;

    left:50%;
    bottom:23%;

    transform:translateX(-50%);

    height:35%;

    z-index:40;

    pointer-events:none;
}


/* Logo */

#logo{
    position:absolute;

    left:50%;
    bottom:2%;

    transform:translateX(-50%);

    height:30%;

    z-index:50;

    cursor:pointer;

    pointer-events:auto;

    transition:transform .2s;
}

#logo:hover{
    transform:translateX(-50%) scale(1.03);
}

#logo:active{
    transform:translateX(-50%) scale(.98);
}

/* ========================= */
/* Mobile */
/* ========================= */

@media (max-width: 768px){

    /* 背景视频优先铺满页面，裁剪左右 */

    #video{

        object-fit:cover;
        object-position:center center;

    }

    /* 底部背景 */

    #bottombg{

        width:180%;

    }

    /* 移动端立绘 */

    #char{

        content:url("assets/char_m.png");

        height:50%;
        bottom:26%;

    }

    /* 移动端迪拉熊 */

    #dxkuma{

        content:url("assets/dxkuma_m.png");

        height:30%;
        bottom:23%;

    }

    /* Logo */

    #logo{

        width:90%;
        height:auto;

        bottom:6%;

    }

}