.keyAni { 
	width: 27px;
	height: 52.5px;
	animation: lds-heart-logn 2s ease;
	opacity: 0;
}

.keyAni img { 
	width: 100%;
	height: 100%;
	animation: lds-heart 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.iframe_cover .keyAni  { 
	opacity: 1;
	animation: none;
}

.iframe_cover .keyAni img { 
	width: 100%;
	height: 100%;
	animation: lds-heart infinite infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}


/*하트 애니메이션*/
.lds-heart {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	transform: rotate(45deg);
	transform-origin: 32px 32px;
	animation: lds-heart-logn 2s ease;
}

.lds-heart div {
	top: 23px;
	left: 19px;
	position: absolute;
	width: 26px;
	height: 26px;
	background: #cb9f76;
	animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lds-heart div:after,
.lds-heart div:before {
	content: " ";
	position: absolute;
	display: block;
	width: 26px;
	height: 26px;
	background: #cb9f76;
}

.lds-heart div:before {
	left: -17px;
	border-radius: 50% 0 0 50%;
}

.lds-heart div:after {
	top: -17px;
	border-radius: 50% 50% 0 0;
}

@keyframes lds-heart {
	0% {
		transform: scale(0.95);
	}
	5% {
		transform: scale(1.1);
	}
	39% {
		transform: scale(0.85);
	}
	45% {
		transform: scale(1);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(0.9);
	}
}
/*	사용예시
	<div class="lds-heart"><div></div></div>
*/


/*로딩*/
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #ffdf00;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 50px;
    left: 50px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}
/*	사용예시
	<div class="lds-ripple"><div></div><div></div></div>
*/


#pgloader { 
	background-color: rgba(255, 255, 255, 1);
	animation: pg-background 2s ease;
}

@-webkit-keyframes pg-background {
	0%{background-color: rgba(255, 255, 255, 1)}
	50%{background-color: rgba(255, 255, 255, 1)}
	100%{background-color: rgba(255, 255, 255, 0)}
}
@-moz-keyframes pg-background {
	0%{background-color: rgba(255, 255, 255, 1)}
	50%{background-color: rgba(255, 255, 255, 1)}
	100%{background-color: rgba(255, 255, 255, 0)}
}
@-o-keyframes pg-background {
	0%{background-color: rgba(255, 255, 255, 1)}
	50%{background-color: rgba(255, 255, 255, 1)}
	100%{background-color: rgba(255, 255, 255, 0)}
}
@keyframes pg-background { 
	0%{background-color: rgba(255, 255, 255, 1)}
	50%{background-color: rgba(255, 255, 255, 1)}
	100%{background-color: rgba(255, 255, 255, 0)}
}

.ld-point { 
	animation: lds-heart-logn 2s ease;
	opacity: 0;
}

@keyframes lds-heart-logn {  
	0% {opacity: 1;}
	100% {opacity: 0;}
}


/*facebook style 로딩*/
.lds-facebook {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 2.5rem;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 0.5rem;
  background: #cb9f76;
  animation: lds-facebook 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 0;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 1rem;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 2rem;
  animation-delay: 0;
}

@-webkit-keyframes lds-facebook {
  0% {
    top: 0;
    height: 2.45rem;
  }
  50%, 100% {
    top: 1rem;
    height: 0.5rem;
  }
}

@keyframes lds-facebook {
  0%,30% {
    top: 0.1rem;
    height: 2.25rem;
  }
  100% {
    top: 0.9rem;
    height: 0.7rem;
  }
}