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;margin:0;}
    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;}
    .bullet {width: 300px; margin-top: -368px; margin-left: 1257px;}
    .cha1 {position: absolute;margin-top: 99px; top:-987px; right:-1394px;opacity: 0;filter: drop-shadow(1px 13px 8px black);animation:ch5 3s 1s ease forwards;}
    video#bgvid {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;background-size: cover;}
    #hide {position: absolute; z-index: 99999999;opacity: 1;transition: opacity 3s ease;}

    @keyframes fadein {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes fadein { /* Safari and Chrome */
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @keyframes ch5 {
        0%{transform:translateX(-40px);opacity:0;}
        100%{transform:translateX(0px);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(0, 82, 177); opacity: 0.7;
    }
      .swiper-pagination-bullet-active {
        width: 40px;
        transition:.5s;
        border-radius: 5px;
        background: rgb(0, 82, 177);
        border: 1px solid transparent;
        opacity: 0.8;
    }

/*swiper end*/

    .title{
        z-index: 9999;
        margin-left: -477px;
        margin-top: -50px;
        display: flex;
        position: absolute;
        justify-content: center;
        align-content: center;
        align-items: center;
        opacity: 0;
        animation: ch5 3s 1s ease forwards;
    }

    .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: 17px;
        animation: fadein 10s;
    }

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

    /*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: 656px;
        margin-left: 254px;
        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.webp);
    }

    .Weapon {
        width: 23px;
        height: 25px;
        margin-top: 656px;
        margin-left: 546px;
        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.webp);
    }

    .Artifact {
        width: 23px;
        height: 25px;
        margin-top: 656px;
        margin-left: 834px;
        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.webp);
    }

    .Baron {
        width: 23px;
        height: 25px;
        margin-top: 1915px;
        margin-left: 639px;
        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: 2299px;
        margin-left: 650px;
        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: 2654px;
        margin-left: 943px;
        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.webp);
    }

    .Talongo {
        width: 23px;
        height: 25px;
        margin-top: 1915px;
        margin-left: 835px;
        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: 2299px;
        margin-left: 844px;
        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: 2812px;
        margin-left: -326px;
        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.webp);
    }

    .Bub {
        width: 23px;
        height: 25px;
        margin-top: 2042px;
        margin-left: -330px;
        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: 2426px;
        margin-left: -234px;
        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: 2812px;
        margin-left: -124px;
        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.webp);
    }


    .Foxy {
        width: 23px;
        height: 25px;
        margin-top: 2042px;
        margin-left: 63px;
        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: 2426px;
        margin-left: -46px;
        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: 2812px;
        margin-left: 70px;
        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.webp);
    }

    .Bible {
        width: 23px;
        height: 25px;
        margin-top: 2042px;
        margin-left: -133px;
        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: 2426px;
        margin-left: 155px;
        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: 2812px;
        margin-left: 260px;
        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.webp);
    }


    .Lioyd {
        width: 23px;
        height: 25px;
        margin-top: 2042px;
        margin-left: 253px;
        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: 2426px;
        margin-left: 348px;
        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: 2812px;
        margin-left: 453px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 979;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal10_id:hover{
        width: 561px;
        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.webp);
    }

    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 {width: 100vw;height: 100vh;margin:0}
        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;}
    }

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

        .PC {
            position: absolute;
            z-index: 999;
            margin-top: 6110px;
            height: 5500px;
            display: flex;
            justify-content: center;
        }
    }
	
	.display-none {
		display: none !important;
	}