/* BASIC css start */
/* ȸ¿ø°¡ÀÔ ¾ÆÀÌÄÜ */
.logline .joinAnimation {
position:absolute;
display:inline-block;
z-index:3;
bottom:-16px;
left:50%;
width:60px;
height:18px;
line-height:18px;
font-size:10px;
color:#fff;
margin:0 0 0 -35px; 
background:#62c5bf;
border:1px solid #62c5bf;
}

.logline .joinAnimation p {
position:relative;
display:block;
width:60px;
height:18px;
line-height:19px;
top:auto;
left:auto;
color:#fff;
font-size:10px;
text-align:center;
border:none;
border-radius:0;
background:none;
margin:0;
box-shadow:none;
-webkit-box-shadow:none;
text-shadow:none;
}

.logline .joinAnimation:before {
content: "";
position: absolute;
top: -5px;
left: 50%;
margin: 0 0 0 -3px;
border-style: solid;
border-width: 5px 4px 0;
border-color: #62c5bf transparent;
display: block;
width: 0;
z-index: 1;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

/* join animation */
@-webkit-keyframes joinAnimation{
  0% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
  5%{
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
  }
  10%{
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
  15%{
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
  }
  20%{
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
  100%{
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
}

.joinAnimation {
display:inline-block;
-webkit-animation:joinAnimation 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
/* //ȸ¿ø°¡ÀÔ ¾ÆÀÌÄÜ */

/* BASIC css end */