body {background-color: #141722; display: flex; text-align: center; justify-content: center; flex-direction: column; overflow-x: hidden; align-items: center;  -webkit-user-select:none; -moz-user-select:none;-ms-user-select:none;user-select:none;}
    header {position: fixed; right: 50px; top: 60px; z-index: 9999;}

    .logo {position: absolute; top: 32px; left: 50px;z-index: 99999;}
    .oneday {clear: both; text-align: right;}
    .play {padding-top: 12px;}
    .home {padding-top: 12px;margin-right: 20px;}
    .bg2 {position: absolute; z-index: -9999; margin-top: -30px; opacity: 0.8;}
    .bullet {width: 300px; margin-top: -368px; margin-left: 1257px;}
    .cha1 {position: absolute;margin-top: 99px; top:-993px; right:-1030px;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;}
}


  /*swiper*/


    .swiper {
        width: 900px;
        height: 600px;
        position: absolute;
        z-index: 998;
        margin-left: 712px;
        margin-top: 579px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper .swiper-pagination {
        position: absolute;
        bottom: 15px !important;
      }
      
      .swiper-pagination-bullet {
        width: 12px;
        height: 9px;
        background: transparent;
        border: 1px solid rgb(218, 231, 255); opacity: 1;
    }
      .swiper-pagination-bullet-active {
        width: 40px;
        transition:.5s;
        border-radius: 5px;
        background: rgb(235, 254, 255);
        border: 1px solid transparent;
        opacity: 0.5;
    }

/*swiper end*/

    .title{
        z-index: 9999;
        margin-left: -425px;
        margin-top: -64px;
        display: flex;
        position: absolute;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .testslide{
        z-index: 997;
        display: flex;
        position: absolute;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-left: 712px;
        margin-top: 503px;
    }


    .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: 124px;
        margin-left: -179px;
    }

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

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

    .Medal{
        width: 23px;
        height: 25px;
        margin-top: 525px;
        margin-left: 53px;
        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: 525px;
        margin-left: 345px;
        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: 525px;
        margin-left: 636px;
        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: 1839px;
        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: 2221px;
        margin-left: 447px;
        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: 2577px;
        margin-left: 788px;
        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: 1839px;
        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: 2221px;
        margin-left: 641px;
        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: 2737px;
        margin-left: -567px;
        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: 1965px;
        margin-left: -529px;
        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: 2342px;
        margin-left: -440px;
        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: 2737px;
        margin-left: -356px;
        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: 1965px;
        margin-left: -335px;
        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: 2342px;
        margin-left: -251px;
        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: 2737px;
        margin-left: -154px;
        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: 1965px;
        margin-left: -136px;
        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: 2342px;
        margin-left: -49px;
        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: 2737px;
        margin-left: 56px;
        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: 1965px;
        margin-left: 58px;
        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: 2342px;
        margin-left: 147px;
        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: 2737px;
        margin-left: 265px;
        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;}
    }

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

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