@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

.hidden{
    float: left;
    text-indent: -9999px;
}

#wrap {
    min-width: 1280px;
    height: 100vh;
    overflow: hidden;
}

#bgi {
    width: 1920px;
    height: 100vh;
    background-image: url(../img/intro_bg-01.png);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#btn {
    width: 220px;
    height: 250px;
    top: 46%;
    left: 49.2%;
    transform: translate(-50%,-50%);
    position: absolute;
    cursor: pointer;
    animation-name: shake;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 1.5s;
}

  @keyframes shake{
      0%{
          transform: translate(-50%,-50%) rotate(0deg);
        }
        10%{
          transform: translate(-50%,-50%) rotate(5deg);
        }
        20%{
          transform: translate(-50%,-50%) rotate(-5deg);
        }
        30%{
          transform: translate(-50%,-50%) rotate(3deg);
        }
        40%{
          transform: translate(-50%,-50%) rotate(-3deg);
        }
        50%{
          transform: translate(-50%,-50%) rotate(1deg);
        }
        60%{
          transform: translate(-50%,-50%) rotate(-1deg);
        }
        70%{
          transform: translate(-50%,-50%) rotate(0deg);
        }
        100%{
          transform: translate(-50%,-50%) rotate(0deg);
        }
    }

#btn img {
    position: absolute;
    width: 250px;
    height: 250px;
}

#cards {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%)
}

#user_deck {
    position: absolute;
    width: 100%;
    height: 136px;
    bottom: 30px;
    text-align: center;
}

#user_deck img {
    width: 195px;
    height: 136px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 136px;
    bottom: 180px;
    text-align: center;
    overflow: hidden;
}

.slide .fade-wrap {
    transition: 1.5s;
    opacity: 0;
    position: relative;
    bottom: -50px;
}

.slide .fade-wrap.fade-in {
    opacity: 1;
    bottom: 0;
}

#user_card img {
    width: 195px;
    height: 136px;
}