/* 별 정보 및 적립 하단 배너 */
.starBannerLogin {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0;
  padding-bottom: 14%;
  background-image: url('http://image.soribada.com/image/star/wave-login.png');
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 10;
}

.starBannerLoginBtn {
  float: right;
  position: absolute;
  bottom: 18%;
  right: 4%;
  width: 17%;
  height: 44%;
}

.starBanner {
  z-index: 10;
  width: 100%;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0;
  padding-bottom: 14%;
  /*background-image: url('http://image.soribada.com/image/star/wave.png');
  background-repeat: no-repeat;
  background-size: 100%;*/
}
.starBannerImg {
  width: 100%;
}

.bannerHeight {
  height: 52px;
}
.starSaveImg {
  position: absolute;
  bottom: 0;
  width: 23%;
  left: 2%;
  cursor: pointer;
}
.starContent {
  position: absolute;
  bottom: 2.6vw;
  right: 10vw;
  color: white;
  font-size: 3vw;
}
.myStarText {
  font-size: 3vw;
  color: white;
}
.myStar {
  font-size: 7vw;
  color: white;
}
.starInfoBtn {
  position: absolute;
  top: 46%;
  right: 3%;
  width: 5%;
  height: 35%;
}

.starPlusWrapper {
  position: absolute;
  top: -2vh;
  right: 3vh;
}

.starMoveImg {
  position: absolute;
  bottom: 5vw;
  width: 13vw;
  left: 8vw;
}

/* 별 적립 안내 모달 */
.starInfoImg {
  position: absolute;
  width: 100%;
}
.infoImg .content {
  position: relative;
  top: 0;
  left: 0;
}
.infoImg p.title {
  color: #007aff;
  font-weight: 500;
  font-size: 6vw;
  text-align: center;
  margin: 15% 0 7% 0;
}
.infoImg p {
  text-align: left;
  margin: 0 20% 2% 20%;
  font-size: 3.5vw;
}
.infoImg p:last-child {
  margin: 0 0 12% 48%;
  font-size: 1vh;
}
/* 별 적립 안내 모달 */
.infoImg .check {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18%;
  text-align: center;
  color: #e80000;
}
.infoImg .close {
  position: absolute;
  top: 0;
  right: 1%;
  width: 13%;
  height: 15%;
}
.infoImg {
  z-index: 90;
  display: none;
  position: fixed;
  top: 20vw;
  width: 80vw;
  margin: 0 10vw;
  height: 68vw;
  background-image: url(http://image.soribada.com/image/star/popup-frame4.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.remainTimeImg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.remainTimeImg .close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 33% 10% 0 0;
  width: 10%;
  height: 8%;
}
.remainTimeImg .check {
  position: absolute;
  top: 0;
  right: 0;
  margin: 88% 10% 0 0;
  width: 80%;
  height: 10%;
}
.remainStar {
  /*width: 100%;
  height: 100%;
  top: 0%;
  position: absolute;
  text-align: center;
  font-size: 8vw;
  color: #4d4d4f;
  padding-top: 18vw;*/

  width: 80%;
  height: 100%;
  top: 0;
  margin: 28% 10% 0 10%;
  position: absolute;
  text-align: center;
  font-size: 8vw;
  color: #4d4d4f;
}

.remainHour {
  /*width: 100%;
  height: 100%;
  right: 5vw;
  position: absolute;
  color: #007aff;
  padding-top: 43.2vw;
  font-size: 13.5vw;
  text-align: center;*/

  position: absolute;
  right: 0;
  color: #007aff;
  font-size: 300%;
  text-align: center;
  margin: 54% 51% 0 0%;
}
.remainMin {
  /*width: 100%;
  height: 100%;
  padding-left: 9.5vw;
  color: #007aff;
  padding-top: 43.2vw;
  font-size: 13.5vw;
  text-align: center;*/

  position: absolute;
  right: 0;
  color: #007aff;
  font-size: 300%;
  text-align: center;
  margin: 54% 33% 0 0%;
}

/* block */
.star_block {
  display: none;
  position: fixed;
  top: -120px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.6;
  background-color: rgb(0, 0, 0);
  z-index: 1;
}

.starRemainImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  margin: 10% 10% 0 10%;
}

.starWrapper .element-animation {
  /*position: absolute;
  top: -400px;
  left: 40%;
  width: 100%;
  height: 100%;*/

  animation: animationFrames linear 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 1s;
  -o-animation-iteration-count: 1;
  -o-animation-fill-mode: forwards;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-animation-fill-mode: forwards;
  -ms-transform-origin: 50% 50%;
}

.starWrapper .el1 {
}
.starWrapper .el2 {
  animation-delay: -0.06s;
}
.starWrapper .el3 {
  animation-delay: -0.12s;
}
.starWrapper .el4 {
  animation-delay: -0.2s;
}
/*
.starWrapper .element-animation:after {
  별 문자로 사용할 경우
  content: "\2605";
  color: gold;
  font-size: 2em;
}
*/

@keyframes animationFrames {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(15vw, -15vw);
  }
  20% {
    transform: translate(25vw, -26vw);
  }
  30% {
    transform: translate(29vw, -29vw);
  }
  50% {
    transform: translate(34vw, -29vw);
  }
  90% {
    transform: translate(72vw, 0);
    opacity: 1;
  }
  100% {
    transform: translate(72vw, 0);
    opacity: 0;
  }
}
@-moz-keyframes animationFrames {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(15vw, -15vw);
  }
  20% {
    transform: translate(25vw, -26vw);
  }
  30% {
    transform: translate(29vw, -29vw);
  }
  50% {
    transform: translate(34vw, -29vw);
  }
  90% {
    transform: translate(72vw, 0);
    opacity: 1;
  }
  100% {
    transform: translate(72vw, 0);
    opacity: 0;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(15vw, -15vw);
  }
  20% {
    transform: translate(25vw, -26vw);
  }
  30% {
    transform: translate(29vw, -29vw);
  }
  50% {
    transform: translate(34vw, -29vw);
  }
  90% {
    transform: translate(72vw, 0);
    opacity: 1;
  }
  100% {
    transform: translate(72vw, 0);
    opacity: 0;
  }
}

@-o-keyframes animationFrames {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(15vw, -15vw);
  }
  20% {
    transform: translate(25vw, -26vw);
  }
  30% {
    transform: translate(29vw, -29vw);
  }
  50% {
    transform: translate(34vw, -29vw);
  }
  90% {
    transform: translate(72vw, 0);
    opacity: 1;
  }
  100% {
    transform: translate(72vw, 0);
    opacity: 0;
  }
}

@-ms-keyframes animationFrames {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(15vw, -15vw);
  }
  20% {
    transform: translate(25vw, -26vw);
  }
  30% {
    transform: translate(29vw, -29vw);
  }
  50% {
    transform: translate(34vw, -29vw);
  }
  90% {
    transform: translate(72vw, 0);
    opacity: 1;
  }
  100% {
    transform: translate(72vw, 0);
    opacity: 0;
  }
}

.starPlus {
  color: #007fff;
  font-size: 8vw;

  animation: starPlus ease 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards; /*when the spec is finished*/
  -webkit-animation: starPlus ease 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: starPlus ease 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards; /*FF 5+*/
  -o-animation: starPlus ease 3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards; /*Not implemented yet*/
  -ms-animation: starPlus ease 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards; /*IE 10+*/
}

@keyframes starPlus {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

@-moz-keyframes starPlus {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

@-webkit-keyframes starPlus {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

@-o-keyframes starPlus {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

@-ms-keyframes starPlus {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

/* 별 흔들기 */
.starWoble {
  animation: starWoble linear 2s;
  animation-iteration-count: infinite;
  transform-origin: 10% 10%;
  -webkit-animation: starWoble linear 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 10% 10%;
  -moz-animation: starWoble linear 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: starWoble linear 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: starWoble linear 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes starWoble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  7.5% {
    transform: translate(0px, -20px) rotate(-5deg);
  }
  15% {
    transform: translate(10px, 0px) rotate(3deg);
  }
  22.5% {
    transform: translate(0px, -15px) rotate(-3deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(2deg);
  }
  37.5% {
    transform: translate(0px, -5px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

/*@keyframes starWoble{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  7.5% {
    transform:  translate(-25px,0px)  rotate(-5deg) ;
  }
  15% {
    transform:  translate(20px,0px)  rotate(3deg) ;
  }
  22.5% {
    transform:  translate(-15px,0px)  rotate(-3deg) ;
  }
  30% {
    transform:  translate(10px,0px)  rotate(2deg) ;
  }
  37.5% {
    transform:  translate(-5px,0px)  rotate(-1deg) ;
  }
  50% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
}*/

@-moz-keyframes starWoble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  7.5% {
    transform: translate(0px, -20px) rotate(-5deg);
  }
  15% {
    transform: translate(10px, 0px) rotate(3deg);
  }
  22.5% {
    transform: translate(0px, -15px) rotate(-3deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(2deg);
  }
  37.5% {
    transform: translate(0px, -5px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes starWoble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  7.5% {
    transform: translate(0px, -20px) rotate(-5deg);
  }
  15% {
    transform: translate(10px, 0px) rotate(3deg);
  }
  22.5% {
    transform: translate(0px, -15px) rotate(-3deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(2deg);
  }
  37.5% {
    transform: translate(0px, -5px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@-o-keyframes starWoble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  7.5% {
    transform: translate(0px, -20px) rotate(-5deg);
  }
  15% {
    transform: translate(10px, 0px) rotate(3deg);
  }
  22.5% {
    transform: translate(0px, -15px) rotate(-3deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(2deg);
  }
  37.5% {
    transform: translate(0px, -5px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@-ms-keyframes starWoble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  7.5% {
    transform: translate(0px, -20px) rotate(-5deg);
  }
  15% {
    transform: translate(10px, 0px) rotate(3deg);
  }
  22.5% {
    transform: translate(0px, -15px) rotate(-3deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(2deg);
  }
  37.5% {
    transform: translate(0px, -5px) rotate(-1deg);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}