body {background-color: #141722; 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: 9999;}
    .bg2 {position: absolute; z-index: 999;height: 968px;width: 1535px;margin-left: 882px;}
    .bullet {width: 300px; margin-top: -368px; margin-left: 1257px;}
    .winona_back{position: absolute; width: 100%; margin-top: -313px; opacity: 0.8;}
    .cha1 {position: absolute;margin-top: 116px; top:-947px; right:-1094px;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: 9999;
        margin-left: -425px;
        margin-top: -93px;
        display: flex;
        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;
        margin-top: 47px;
    }

    .cover{
        position: absolute;
        z-index: -30;
        margin-top: 18px;
    }

    /*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: -557px;
        margin-left: 41px;
        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: 429px;
        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: -557px;
        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: 429px;
        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: -557px;
        margin-left: 623px;
        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: 429px;
        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: 746px;
        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: 1123px;
        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: 1480px;
        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: 746px;
        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: 1123px;
        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: 1602px;
        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: 866px;
        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: 1243px;
        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: 1602px;
        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: 866px;
        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: 1243px;
        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: 1602px;
        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: 866px;
        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: 1243px;
        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: 1602px;
        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: 866px;
        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: 1243px;
        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: 1602px;
        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: 88px; width: 1920px; height: 5px; 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%;}
        body {display: flex; text-align: center; justify-content: center; flex-direction: column; overflow-x: hidden; align-items: center;}
        #top_button {right: -10px;}
        #top_button img {width: 70%;}
        .home {float: right; margin-top: 20px; margin-right: 0;}
        .mobile img {width: 100%;}
        .mobile {display: block;}
        #wrap {display: none;}
        header {right: 10px; top: -10px;}
        .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;}

        .play {display: none;}
        .maincon {display: none; image:none;}
        .logo {display: none;}
        .PC {display: none;}
        .bg {display: none;}
        .bg2 {display: none;}
        .winona_back{ 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;
        }
    }