@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html,body {
  padding: 0;
  margin: 0;
  font-family: 'Nanum Gothic', 나눔고딕, '맑은 고딕', 돋움;
  width:100%;
  height:100%;
}
button{
  margin: 4px auto;
  border:1px solid white;
  background:transparent;
  color: white;
  padding:3px 10px;
  -webkit-transition:.3s;
  transition:.3s;
  position:absolute;
  bottom: 1vw;
  left: 50%; 
  transform: translateX(-50%);
  -webkit-transform:translateX(-50%);
}
button:hover{
  background:rgba(0, 0, 0, .3);
}
.message {
clear: both;
float: right;
padding: 6px;
border-radius: 7px;
background: #fff;
/* margin: 4px 0; */
font-size: 12px;
line-height: 1.4;
max-width: 50vw;
/* padding: 40px; */
bottom:83vw;
right: 2vw;
position: absolute;
overflow-wrap: break-word;
/* width: 100%; */
}
.message::before {
content: '';
position: absolute;
bottom: -8px;
border-top: 8px solid #fff;
right: 25vw;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

.loading {
  clear: both;
float: right;
padding: 6px;
border-radius: 7px;
background: #fff;
font-size: 12px;
line-height: 1.4;
max-width: 50vw;
bottom:83vw;
right: 19vw;
position: absolute;
overflow-wrap: break-word;
  width: 10vw;
  height: 5vw;
  margin-right:2vw;
}
.loading::before {
  content: '';
  position: absolute;
  bottom: -8px;
  border-top: 8px solid #fff;
  right: 6vw;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  }
.loading::after {
  content: "";
  border-radius: 50%;
  width: 3px;
  height: 3px;
  background-color: black;
  transform: translate(-50%, -50%);
  animation: ball 1.2s infinite linear;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading span {
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
}

.loading span::before, .loading span::after {
  content: "";
  border-radius: 50%;
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: black;
  animation: ball 1.2s infinite linear;
  top: 50%;
  transform: translate(0%, -50%);
}

.loading span::before {
  left: 3.5vw;
  animation-delay: 0.3s;
}

.loading span::after {
  right: 3.5vw;
  animation-delay: -0.3s;
}
@keyframes ball {
  0% {
    margin-top: 0;
  }
  20% {
    margin-top: 1vw;
  }
  80% {
    margin-top: -1vw;
  }
}
.bg{
  position: absolute;
  top:0;
  left:0;
  background-image:url(../img/tarot/tarot_server.png);
  width:100vw;
  height:150vw;
  background-size:100% 100%;
  z-index:-100;
}
.wrapEveryThing{
  position: relative;
  width: 100%;
  height: 150vw;
  background-color: red;
  background-image: url(../img/tarot/tarot_server.png);
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: 90% 86%;
}

.wrapHearts {
  display:inline-block;
}
.card.ani0 {
  bottom: 85%;
  left:0%;
}
.card.ani1 {
  bottom: 85%;
  left:10%;
}
.card.ani2 {
  bottom: 85%;
  left:20%;
}
.card.ani3 {
  bottom: 85%;
  left:30%;
}
.card.ani4 {
  bottom: 85%;
  left:40%;
}
.card.ani5 {
  bottom: 85%;
  left:50%;
}
.card.ani6 {
  bottom: 85%;
  left:60%;
}
.card.ani7 {
  bottom: 85%;
  left:70%;
}
.card.ani8 {
  bottom: 85%;
  left:80%;
}
.card.ani9 {
  bottom: 85%;
  left:90%;
}
.card.ani10 {
  bottom: 70%;
  left:0%;
}
.card.ani11 {
  bottom: 70%;
  left:10%;
}
.card.ani12 {
  bottom: 70%;
  left:20%;
}

.card.ani13 {
  bottom: 70%;
  left:30%;
}
.card.ani14 {
  bottom: 70%;
  left:40%;
}
.card.ani15 {
  bottom: 70%;
  left:50%;
}
.card.ani16 {
  bottom: 70%;
  left:60%;
}
.card.ani17 {
  bottom: 70%;
  left:70%;
}
.card.ani18 {
  bottom: 70%;
  left:80%;
}
.card.ani19 {
  bottom: 70%;
  left:90%;
}

.card{
  width:9vw;
  height:15.3vw;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  perspective: 1000;
  transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  position: absolute;
  margin : 0 0.5vw;
  left: 67vw;
  bottom: 19vw;
  cursor:pointer;
}

.card2{
  width:18vw;
  height:30.6vw;
  position: absolute;
  margin : 0 5vw;
  bottom: 103vw;
  cursor:pointer;
  transition: 0.5s !important;
  -webkit-transition: 0.5s !important;
  -moz-transition: 0.5s !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  -moz-transform-style: preserve-3d !important;
}

.card2:first-child{
  left: 15vw;
}
.card2:last-child{
  right: 15vw;
}


.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.cardspread {
  transition: 0.5s !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  -moz-transform-style: preserve-3d !important;
}

.front {
  transform: rotateY(0deg);
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  z-index: 2;
}

.front>img, .back>img {
  width:9vw;
  height:15.3vw;
  margin-bottom:-3px;
}

.card2 .front>img, .card2 .back>img {
  width:18vw;
  height:30.6vw;
  margin-bottom:-3px;
}

.back {
  transform: rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
}
.flipping-effect {
  transform: rotateY(-180deg);
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
}