body {background-color: rgb(7, 4, 6);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;z-index: 9999;}
    .oneday {clear: both;text-align: right;}
    .play {padding-top: 12px;}
    .home {text-decoration: none;}
    .bg {width: 100%;height: 100%;position: absolute;z-index: -999;min-height: 1080px;min-width: 1920px;}
    video {opacity: 80%;}


.title{animation: fadein 7s;z-index: 994;margin: 100px;width: 100%;margin-left: -428px; 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;margin-top: -30px;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;}
.cha1 {position: relative;z-index: 8;top: 153px;margin-left: -1489px;margin-top: 93px;}
.morebtn {width: 379px;display: inline-block;padding-top: 0px;position: absolute;z-index: 9970;margin-top: 367px;}
.btncontain {width: 100%;height: 100%;text-align: center;z-index: 850;position: absolute;display: flex;justify-content: center;}
    
    /*modal*/
    button:focus, button:active {outline: none;}
    .modal{width: 40px;height: 40px;position: absolute;border-radius: 3px;opacity: 0;}
    .popo{
        width: 27px;
        height: 26px;
        margin-top: -353px;
        margin-left: 651px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 999;
        background-image: url(../img/det.png);pointer-events: all;
    }
    
    #modal_id:hover{
        margin-left: -30px;
        width: 533px;
        height: 470px;
        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/popo.png);
    }

    .sasha{
        width: 27px;
        height: 26px;
        margin-top: -353px;
        margin-left: 776px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 998;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal2_id:hover{
        margin-top: -25px;
        width: 527px;
        height: 624px;
        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/sasha.png);
    }

    .bible{
        width: 27px;
        height: 26px;
        margin-top: -353px;
        margin-left: 897px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 997;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal3_id:hover{
        margin-top: -7px;
        width: 545px;
        height: 644px;
        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);
    }

    .victor{
        width: 27px;
        height: 26px;
        margin-top: -249px;
        margin-left: 292px;
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 996;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal4_id:hover{
        margin-top: -20px;
        margin-left: -60px;
        width: 609px;
        height: 675px;
        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/victor.png);
    }

    .lioyd{
        width: 27px;
        height: 26px;
        margin-top: -249px;
        margin-left: 412px;    
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 995;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal5_id:hover{
        margin-top: -15px;
        margin-left: -60px;
        width: 564px;
        height: 698px;
        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/loyd.png);
    }

    .foxy{
        width: 27px;
        height: 26px;
        margin-top: -249px;
        margin-left: 531px;    
        position: absolute;
        left: calc(50%-100px);
        top: 30%;
        z-index: 994;
        background-image: url(../img/det.png);
        pointer-events: all;
    }
    #modal6_id:hover{
        margin-top: -40px;
        margin-left: -60px;
        width: 565px;
        height: 641px;
        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);
    }


    @media screen and (max-width: 772px) {

        .play {display: none;}
        .mobile {display: block;}
        #wrap {display: none;}
        .bg {display: none;}
        .maincon {display: none;image:none;}
        .logo {display: none;}
        .PC {display: none;}


        body,html {height: 100%;max-width: 100%;}
        #top_button {right: -10px;}
        #top_button img {width: 70%;}
        .home {top: 32px;float: right;margin-top: 20px;margin-right: 0;}
        .mobile img {width: 100%;}
        header {right: 10px;top: -10px;}
        .mob {display: flex;width: 100%;height: 100%;align-items: center;text-align: center;justify-content: flex-start;}
        .mobimg {margin-top: 500px;}
        .moblogo {position: absolute;top: 32px;left: 50px;z-index: 9999;}
        .mobbg {position: absolute;z-index: -1;height: 1348px;width: 636px;}
    }

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

        .PC {position: absolute;z-index: 9;margin-top: 4607px;height: 3900px;}
    }




    .box {
        position: relative;
        width: 215px;
        height: 300px;
        transform-style: preserve-3d;
      }
      
      .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateX(calc(var(--i) * 45deg)) translateZ(349px);
        rotate:calc(45deg);
        margin-left: -448px;
        margin-top: 484px;
      }
      
      @keyframes animate {
        0% {
          transform: perspective(1000px) rotateX(0deg) rotateY(35deg);
        }
        100% {
          transform: perspective(1000px) rotateX(360deg) rotateY(35deg);
        }
      }
      
      @keyframes animate-y {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      
      @keyframes animate-rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      
      /* .testimg 클래스 내부의 이미지에 대한 스타일 제어 */
      .testimg img {
        animation: none !important;
        transform: none !important;
        rotate: none !important;
        margin-left:373px;
        margin-top: -132px;
      }
      
      /* .testimg 클래스 내부의 이미지 중에서 .testimg 클래스에 속하지 않는 이미지에 대한 스타일 조정 */
      .box span.testimg img:not(.testimg) {
        animation: animate 20s linear infinite;
      }