@charset "utf-8";

/* ${
  box-sizing: border-box;
} */

::selection{
  background-color: rgba(255, 255, 255, 0);
}



html{
  font-size: 10px;
}

body{

  height: 600px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flexboxbox{

  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  align-items: center;
  margin-left: 70px;
}

/* .flexboxbox.is-1{
  margin-bottom: 10px;
} */


.box{
  border-radius: 8px;
  cursor: pointer;
  width: 20rem;
  height: 276px;
  margin: 10px;
  /*position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;*/
  border: 1px solid #ffffff;
}

.new {
  margin: 0;
  padding-left: 22px;
  line-height: 11px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: #00A8FF;
  text-transform: uppercase;
  letter-spacing: -0em;
}

.new.is {
  text-indent: -100000px;
}


.title {
  padding-top: 3px;
  /*padding-left: 22px;*/
  margin: 0 22px 1px;
  /*padding-bottom: 1px;*/
  line-height: 20px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.04em;
  color: #333333;
}

.artist {
  margin: 0;
  padding-left: 22px;
  line-height: 18px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 12px;
  /*letter-spacing: -0.04em;*/
  color: #999999;
}

.emoticon {
  width: 120px;
  height: 120px;
  padding: 4rem;
  padding-bottom: 3rem;
}

.zzim{
  width: 40px;
  height: 40px;
  position: relative;
  right: -142px;
  bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 100px;
  /* box-shadow: 0px 3px 2px rgba(0,0,0,0.02); */
  visibility: hidden;
}
.zzim.is-1{
  visibility: visible;
}

.box, .title {
  transition: border 0.4s ease-out, box-shadow 0.2s ease-out, background-color 1s ease-out;
  /*transition: box-shadow 0.8s ease-out;*/
}

.zzim {
  transition: border 0.2s ease-out, box-shadow 0.1s ease-out, background-color 0.4s ease-out;}

.box:hover {

  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.box:hover .zzim{
  visibility: visible;
}


.box:hover .title {
  font-weight: 500;
  display: inline-block;
  border-bottom: 1px solid #999999;
  margin: 0 22px 0px;
  transition: border 0s ease-out;
}

.zzim:hover {
  border: 1px solid rgba(228,89,89,0.3);
  box-shadow: 0px 2px 10px rgba(228,89,89,0.2);
  background-color: rgba(228,89,89,0.02);
}




.hi {
  display: block;
  pointer-events: none;
    /*content: "";*/
  position: relative;
  top: -116px;
  left: 114px;
  width: 100px;
  height: 100px;
  background-image: url("../img/zzim_on_str.png");
  animation: on 1.06s steps(67);
}

/*@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}*/

@keyframes on {
   from { background-position:    0px; }
     to { background-position: -6700px; }
}


.bye{
  display: block;
  pointer-events: none;
    /*content: "";*/
  position: relative;
  top: -116px;
  left: 114px;
  width: 100px;
  height: 100px;
  background-image: url("../img/zzim_off_str.png");
  animation: off 1.06s steps(66);
}

/*@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}*/

@keyframes off {
   from { background-position:    0px; }
     to { background-position: -6600px; }
}

.h{
  background-image: url(../img/heart_on.png);
  width: 16px;
  height: 14px;
}
.h.on{
  background-image: url(../img/heart.png);
  width: 16px;
  height: 14px;
}