body {
        background-color: #2a5b27;
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        overflow-x: hidden;
        align-items: center;
    }

    header {
        position: fixed;
        right: 50px;
        top: 60px;
        z-index: 9999;
    }

    .logo {
        position: absolute;
        top: 32px;
        left: 50px;
    }
    
    .oneday {
        clear: both;
        text-align: right;
}

    .play {
        padding-top: 12px;
}

    .home {
        padding-top: 12px;
        margin-right: 20px;
}

    .bg {
        position: absolute;
        z-index: -1;
        height: 1080px;
        width: 1920px;
        filter: opacity(0.8);
}

    .back2 {
        z-index: -3;
        align-content: center;
        position: absolute;
        margin-top: -22px;
    }

    .cha1 {
        animation: fadein 5s;
        position: absolute;
        z-index: -2;
        top: -934px;
        margin-left: 666px;
        right: -253px;
        filter: drop-shadow(1px 13px 8px black);
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


    .title{
        z-index: 994;
        margin: 100p;
        max-height: 1900px;
        width: 100%;
        margin-left: -425px;
        margin-top: -108px;
        display: flex;
        height: 486px;
        position: absolute;
        justify-content: center;
        align-content: center;
        align-items: center;
    }


    .maincon{
        display: flex;
        width: 1900px;
        height: 1080px;
        max-height: 1080px;
        min-width: 1900px;
        max-width: 1080px;
        justify-content: center;
        align-content: center;
    }

    .maincontain{
        display: flex;
        width: 100%;
        max-height: 1080px;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    .list{
        position: absolute;
        z-index: 5;
    }

    /*modal*/
    button:focus, button:active {
        outline: none;
    }
    .modal{
        width: 40px;
        height: 40px;
        position: absolute;
        border-radius: 3px;
        opacity: 0;
    }

    .Medal{
        width: 23px;
        height: 25px;
        margin-top: -660px;
        margin-left: 50px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 999;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal_id:hover{
        width: 600px;
        height: 470px;
        opacity: 1;
        box-shadow: 0 50px 80px rgba(255, 255, 255, 0.15), 0 15px 100px rgba(255, 255, 255, 0.15), 0 5px 100px rgba(255, 254, 254, 0.1);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/medal.png);
    }

    .Weapon {
        width: 23px;
        height: 25px;
        margin-top: -660px;
        margin-left: 336px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 998;
        background-image: url(../img/det.png);
        pointer-events: all;
    }

    #modal2_id:hover{
        width: 600px;
        height: 423px;
        opacity: 1;
        box-shadow: 0 50px 80px rgba(255, 255, 255, 0.15), 0 15px 100px rgba(255, 255, 255, 0.15), 0 5px 100px rgba(255, 254, 254, 0.1);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/wepon.png);
    }

    .Artifact {
        width: 23px;
        height: 25px;
        margin-top: -660px;
        margin-left: 631px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 997;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal3_id:hover{
        width: 600px;
        height: 470px;
        opacity: 1;
        box-shadow: 0 50px 80px rgba(255, 255, 255, 0.15), 0 15px 100px rgba(255, 255, 255, 0.15), 0 5px 100px rgba(255, 254, 254, 0.1);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/artifact.png);
    }

    .Baron {
        width: 23px;
        height: 25px;
        margin-top: 641px;
        margin-left: 441px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 999;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Baron2 {
        width: 23px;
        height: 25px;
        margin-top: 956px;
        margin-left: 441px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 992;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Baron3 {
        width: 23px;
        height: 25px;
        margin-top: 1375px;
        margin-left: 638px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 984;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal5_id:hover{
        width: 586px;
        height: 347px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/Baron.png);
    }

    .Talongo {
        width: 23px;
        height: 25px;
        margin-top: 642px;
        margin-left: 634px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 998;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Talongo2 {
        width: 23px;
        height: 25px;
        margin-top: 956px;
        margin-left: 631px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 991;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Talongo3 {
        width: 23px;
        height: 25px;
        margin-top: 1497px;
        margin-left: -530px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 983;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal6_id:hover{
        width: 566px;
        height: 344px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/Talongo.png);
    }

    .Bub {
        width: 23px;
        height: 25px;
        margin-top: 761px;
        margin-left: -541px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 999;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Bub2 {
        width: 23px;
        height: 25px;
        margin-top: 1076px;
        margin-left: -446px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 990;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Bub3 {
        width: 23px;
        height: 25px;
        margin-top: 1497px;
        margin-left: -345px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 982;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal7_id:hover{
        margin-left: -70px;
        margin-top: -15px;
        width: 562px;
        height: 370px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/Bub.png);
    }


    .Foxy {
        width: 23px;
        height: 25px;
        margin-top: 761px;
        margin-left: -348px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 997;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Foxy2 {
        width: 23px;
        height: 25px;
        margin-top: 1076px;
        margin-left: -257px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 989;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Foxy3 {
        width: 23px;
        height: 25px;
        margin-top: 1497px;
        margin-left: -149px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 981;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal8_id:hover{
        margin-left: -50px;
        margin-top: -30px;
        width: 538px;
        height: 376px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/foxy.png);
    }

    .Bible {
        width: 23px;
        height: 25px;
        margin-top: 761px;
        margin-left: -148px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 996;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Bible2 {
        width: 23px;
        height: 25px;
        margin-top: 1076px;
        margin-left: -55px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 988;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Bible3 {
        width: 23px;
        height: 25px;
        margin-top: 1497px;
        margin-left: 49px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 980;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal9_id:hover{
        width: 561px;
        height: 347px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/Bible.png);
    }


    .Lioyd {
        width: 23px;
        height: 25px;
        margin-top: 761px;
        margin-left: 44px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 995;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Lioyd2 {
        width: 23px;
        height: 25px;
        margin-top: 1076px;
        margin-left: 141px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 987;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    .Lioyd3 {
        width: 23px;
        height: 25px;
        margin-top: 1497px;
        margin-left: 241px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 979;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal10_id:hover{
        margin-top: -33px;
        margin-left: -15px;
        width: 538px;
        height: 376px;
        opacity: 1;
        transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        transition: 0.3s ease;
        background-image: url(../img/Lioyd.png);
    }


    footer{
        position: absolute;
        bottom: 112px;
        width: 100%;
        height: 31px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
    }
    
    footer img{
        vertical-align:-6px;}
    


    @media screen and (max-width: 772px) {
        body,
        html {
            height: 100%;
            max-width: 100%;
        }
        #top_button {
            right: -10px;
        }

        #top_button img {
            width: 70%;
        }

        .play {
            display: none;
        }

        .home {
            float: right;
            margin-top: 20px;
            margin-right: 0;
        }

        .mobile img {
            width: 100%;
        }

        .mobile {
            display: block;
        }

        #wrap {
            display: none;
        }

        header {
            right: 10px;
            top: -10px;
        }
        .maincon {
            display: none;
            image:none;
        }
        .logo {
            display: none;
        }
        .PC {
            display: none;
        }

        .bg {
            display: none;
        }

        .moblogo{
            position: absolute;
            left: 20px;
            top: 35px;
        }

        .mob {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            text-align: center;
            justify-content: flex-start;
        }

        .mobimg {margin-top: 500px;}

        video{
            display: none;
        }
    }

    @media screen and (min-width: 772px) {
        .mob {
            display: none;
        }
        .mobimg {
            display: none;
        }
        .mobbg {
            display: none;
        }

        .PC {
            position: absolute;
            z-index: 999;
            margin-top: 4543px;
            height: 3800px;
            display: flex;
            justify-content: center;
        }
    }

    video {
        width: 100%;
        margin-top: -50px;
    }