#makarDragon{
  /* position: absolute; 
  top:300px;
  left: 300px;
  width: 300px;
  height: 300px; */
  position: absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  transform: translate(-50%, calc(-50% + 75px) );
  z-index: 1;
}



#mdTail{
  position: absolute;
  left: -20%;
  top: 71%;
  width: 40%;
  height: 32%;
  transform: rotate(-15deg);
  transform-origin: right bottom;
  animation: tailRotate 1.5s infinite;
}

@keyframes tailRotate {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

#mdBody{
  display: block;
  position: absolute;
  width: 100%;
  height: 116%;
}

#leftEye{
  position: absolute;
  left: 33%;
  top: 35%;
  width: 25%;
  height: 25%;
}

#leftOpenEye{
  position: absolute;
  left:0%;
  width: 100%;
  height:100%;
  opacity: 1;
  animation: eyeBlink 1.5s infinite;
}

#leftCloseEye{
  position: absolute;
  bottom:30%;
  left:2%;
  width: 96%;
  height:27%;
  opacity: 1;
}

@keyframes eyeBlink {
  0%   {opacity: 1;}
  40%  {opacity: 1;}
  50%  {opacity: 0;}
  70%  {opacity: 0;}
  75%  {opacity: 1;}
  100% {opacity: 1;}
}

#mdOpenEye2{
  position: absolute;
  left: 66%;
  top: 35%;
  width: 25%;
  height: 25%;
}

#mdCloseEye{
  display: none;
  position: absolute;
  left: 35%;
  top: 35%;
}

#mdRightHand{
  position: absolute;
  left: 23%;
  top: 74%;
  width: 35%;
  height: 24%;
  transform: rotate(-8deg);
}

#mdLeftHand{
  position: absolute;
  left: 60%;
  top: 81%;
  width: 20%;
  height: 20%;
}

#mdSign{
  display: block;
  position: absolute;
  left: 16%;
  top: -85%;
  width: 118%;
  height: 190%;
  transform: rotate(24deg);
}

/* 正確的圓圈 */
.circle{
  position: absolute;
  left: 54%;
  top:  -58%;
  height: 60%;
  width: 60%;

  border-style: solid;
  border-width: 20px;
  border-color: rgba(255,255,255,1);
  background-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  display: block;
}

#imgRight{
  position: absolute;
  left: 58%;
  top: -54%;
  width: 65%;
  height: 65%;
}

/* 錯誤的叉叉 */
#cross {
  position: absolute;
  left: 58%;
  top: -54%;
  width: 65%;
  height: 65%;
  transform:rotate(53deg);
  -ms-transform:rotate(53deg); /* IE 9 */
  -webkit-transform:rotate(53deg); /* Safari and Chrome */
}

#imgWrong{
  position: absolute;
  left: 58%;
  top: -54%;
  width: 65%;
  height: 65%;
}

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d00;
}

#cross:before {
  left: 50%;
  width: 12%;
  margin-left: -6%;
  height: 100%;
}

#cross:after {
  top: 50%;
  height: 12%;
  margin-top: -6%;
  width: 100%;
}