@font-face{font-family:Main;src:url(../fonts/main.woff2)  format("woff2"),url(../fonts/main.woff)  format("woff")
    }*{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0
    }img{width:100%;display:block
    }.app{width:100%;height:100vh;position:relative;background-image:url(../image/bg.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden
    }.bg2{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../image/bg2.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0
    }.bg2_after{-webkit-animation:light 1s ease-in-out;animation:light 1s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards
    }@-webkit-keyframes light{from{opacity:0
    }5%{opacity:0
    }10%{opacity:1
    }15%{opacity:0
    }20%{opacity:1
    }25%{opacity:0
    }100%{opacity:0
}
}@keyframes light{from{opacity:0
    }5%{opacity:0
    }10%{opacity:1
    }15%{opacity:0
    }20%{opacity:1
    }25%{opacity:0
    }100%{opacity:0
}
}.phone{position:absolute;top:30%;left:20%;width:60%;z-index:5
    }.phone .phone-wrapper{position:relative;width:100%;height:100%
    }.phone .phone-wrapper .phone-display{position:absolute;top:1.3%;left:15.5%;width:65.5%;height:97.5%;background-image:url(../image/bg2.jpg);background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat
    }.phone .phone-wrapper .phone-display_after{background-image:none;background:#000
    }.phone .phone-wrapper .phone-display_after2{background:#000;background-image:url(../image/bg2.jpg);background-attachment:none;background-position:center;background-size:cover;background-repeat:no-repeat
    }.phone .phone-wrapper .phone-focus{position:absolute;top:24%;left:35%;width:30%
    }.phone_after{-webkit-transition:all ease 1s;transition:all ease 1s;left:20%;top:20%
    }.logo{position:absolute;top:2%;left:2%;z-index:100
    }.notice{position:absolute;top:-20%;left:65%;width:30%;z-index:100;-webkit-transition:all ease .5s;transition:all ease .5s
    }.notice_off{opacity:0
    }.notice2{position:absolute;width:40%;left:30%;top:10%;opacity:0
    }.button2{width:18%;left:41%;top:84%;position:absolute;opacity:1;z-index:100
    }.btn_after{-webkit-animation:btn 1s ease;animation:btn 1s ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite
    }.last-elem{-webkit-animation:scr2 1s ease;animation:scr2 1s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.5s;animation-delay:.5s
    }
    @-webkit-keyframes scr2{from{opacity:0;-webkit-transform:translateY(-15%);transform:translateY(-15%)
    }to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)
}
}@keyframes scr2{from{opacity:0;-webkit-transform:translateY(-15%);transform:translateY(-15%)
    }to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)
}
}@-webkit-keyframes btn{from{-webkit-transform:scale(1);transform:scale(1)
    }50%{-webkit-transform:scale(1.1);transform:scale(1.1)
    }to{-webkit-transform:scale(1);transform:scale(1)
}
}@keyframes btn{from{-webkit-transform:scale(1);transform:scale(1)
    }50%{-webkit-transform:scale(1.1);transform:scale(1.1)
    }to{-webkit-transform:scale(1);transform:scale(1)
}
}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:999;display:none
    }

    img {
        width: 100%;
        display: block;
      }
      
      html, body {
        width: 100%;
      }
      
      .block-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }
      
      .m_app {
        width: 100%;
        font-family: 'main';
        overflow: hidden;
        position: relative;
        background: #928685;
        display: block;
        display: none;
        height: 100vh;
        /* Fallback for browsers that do not support Custom Properties */
        font-family: 'main';
        text-decoration: none;
        background-image: url(../image/m/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100vh;
        /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 100);
      }
      
      .m_app .overlay_d {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: .7;
      }
      
      .m_app .overlay_active {
        -webkit-animation: light 1s ease;
                animation: light 1s ease;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
      }
      
      .m_app .girl {
        position: absolute;
        top: 8vh;
        left: 10%;
        width: 80%;
      }
      
      .m_app .girl_active {
        -webkit-animation: girl 0.5s ease;
                animation: girl 0.5s ease;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s;
      }
      
      .m_app .top-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4vh;
        background: #000;
      }
      
      .m_app .buttons {
        position: absolute;
        top: 4vh;
        left: 0;
        width: 100%;
      }
      
      .m_app .buttons_v {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        overflow: hidden;
        display: none;
        width: 10%;
        background: #1c1c1c;
      }
      
      .m_app .buttons_v img {
        height: 100%;
        width: auto;
        margin: 0 auto;
      }
      
      .m_app .target {
        position: absolute;
        top: 35%;
        width: 60%;
        left: 20%;
        -webkit-transition: all ease .2s;
        transition: all ease .2s;
      }
      
      .m_app .target_off {
        opacity: 0;
      }
      
      .m_app .bottom-line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
      
      .m_app .bottom-top {
        background: #1c1c1c;
      }
      
      .m_app .bottom-top img {
        width: 20%;
        margin: 0 auto;
      }
      
      .m_app .bottom-aside {
        background: black;
        padding: 10px;
      }
      
      .m_app .notice-click {
        position: absolute;
        top: -50%;
        left: 25%;
        width: 50%;
        -webkit-animation: notice-click 1.5s ease;
                animation: notice-click 1.5s ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-transition: all ease .3s;
        transition: all ease .3s;
      }
      
      .m_app .notice-click_off {
        opacity: 0;
      }
      
      .m_app .bottom-line_v {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 10%;
        height: 100%;
        background: #1c1c1c;
      }
      
      .m_app .bottom-line_v .bottom-top {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }
      
      .m_app .bottom-line_v .bottom-top img {
        width: 100%;
      }
      
      .m_app .bottom-line_v .notice-click2 {
        position: absolute;
        top: 20%;
        right: 0;
        width: 200%;
        -webkit-animation: notice-click2 1.5s ease;
                animation: notice-click2 1.5s ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-transition: all ease .3s;
        transition: all ease .3s;
        z-index: 10;
      }
      
      .m_app .bottom-line_v .notice-click2 img {
        width: 100%;
      }
      
      .m_app .notice-l {
        position: absolute;
        top: 0;
        left: 30%;
        width: 40%;
        display: none;
      }
      
      @-webkit-keyframes notice-click {
        from {
          top: -50%;
        }
        50% {
          top: -60%;
        }
        100% {
          top: -50%;
        }
      }
      
      @keyframes notice-click {
        from {
          top: -50%;
        }
        50% {
          top: -60%;
        }
        100% {
          top: -50%;
        }
      }
      
      @-webkit-keyframes notice-click2 {
        from {
          top: 20%;
        }
        50% {
          top: 23%;
        }
        100% {
          top: 20%;
        }
      }
      
      @keyframes notice-click2 {
        from {
          top: 20%;
        }
        50% {
          top: 23%;
        }
        100% {
          top: 20%;
        }
      }
      
      @-webkit-keyframes girl {
        from {
          -webkit-transform: scale(1);
                  transform: scale(1);
        }
        to {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
        }
      }
      
      @keyframes girl {
        from {
          -webkit-transform: scale(1);
                  transform: scale(1);
        }
        to {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
        }
      }
      
      @-webkit-keyframes light {
        from {
          opacity: .7;
        }
        5% {
          opacity: 0;
        }
        10% {
          opacity: .7;
        }
        15% {
          opacity: 0;
        }
        20% {
          opacity: .7;
        }
        25% {
          opacity: 0;
        }
        30% {
          opacity: .7;
        }
        35% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
      
      @keyframes light {
        from {
          opacity: .7;
        }
        5% {
          opacity: 0;
        }
        10% {
          opacity: .7;
        }
        15% {
          opacity: 0;
        }
        20% {
          opacity: .7;
        }
        25% {
          opacity: 0;
        }
        30% {
          opacity: .7;
        }
        35% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
      
      @media screen and (orientation: landscape) {
        .m_app .girl {
          top: 0;
          left: 36%;
          width: 30%;
        }
        .m_app .top-line {
          display: none;
        }
        .m_app .buttons {
          display: none;
        }
        .m_app .buttons_v {
          display: block;
        }
        .m_app .target {
          width: 30%;
          top: 30%;
          left: 35%;
        }
        .m_app .bottom-line {
          display: none;
        }
        .m_app .notice-l {
          display: block;
        }
        .m_app .bottom-line_v {
          display: block;
        }
      }