/* 로딩 커버 스타일 */
.progress.container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.progress span{ box-shadow: 1px 2px 3px #999; height: 10px; width: 10px; border-radius: 10px; margin-left: 10px; display: inline-block; transition: all 500ms ease; animation: wave 2s ease infinite;}
/* 지연 시간 설정 */
.progress span:nth-child(1){ animation-delay:     0;}
.progress span:nth-child(2){ animation-delay: 100ms;}
.progress span:nth-child(3){ animation-delay: 200ms;}
.progress span:nth-child(4){ animation-delay: 300ms;}
.progress span:nth-child(5){ animation-delay: 400ms;}
.progress span:nth-child(6){ animation-delay: 500ms;}
.progress span:nth-child(7){ animation-delay: 600ms;}
.progress span:nth-child(8){ animation-delay: 700ms;}
/* 원형 애니메이션 */
@keyframes wave{
    0%, 
    40%, 
    100%{ transform: translate(0, 0); background-color: var(--color-point-02);}
    10% { transform: translate(0, -15px); background-color: var(--color-point-01);}
}
.twitchLoader{ width: 100px; transform: rotate(-45deg);}
.twitchLoader .cube{ height: 20px; width: 20px; margin: 15px; background-color: #C4BECB; float: right; opacity: 0; outline: 1px solid transparent;}
.twitchLoader .cube:nth-child(1){ position: fixed; background-color: var(--color-point); animation: purpleAnim 2s infinite 0.55s;}
.twitchLoader .cube:nth-child(2){ animation: cubeAnim1 2000ms infinite cubic-bezier(0.4, 0, 0.2, 1)  260ms;}
.twitchLoader .cube:nth-child(3){ animation: cubeAnim4 2000ms infinite cubic-bezier(0.4, 0, 0.2, 1) 1755ms;}
.twitchLoader .cube:nth-child(4){ animation: cubeAnim2 2000ms infinite cubic-bezier(0.4, 0, 0.2, 1)  741ms;}
.twitchLoader .cube:nth-child(5){ animation: cubeAnim3 2000ms infinite cubic-bezier(0.4, 0, 0.2, 1) 1235ms;}
@keyframes cubeAnim1{
  0%  { opacity: 0; transform: translate(0, -50px);}
  40% { opacity: 1; transform: translate(0, 0);}
  100%{ opacity: 0;}
}
@keyframes cubeAnim2{
  0%  { opacity: 0; transform: translate(50px, 0);}
  40% { opacity: 1; transform: translate(0, 0);}
  100%{ opacity: 0;}
}
@keyframes cubeAnim3{
  0%  { opacity: 0; transform: translate(0, 50px);}
  40% { opacity: 1; transform: translate(0, 0);}
  100%{ opacity: 0;}
}
@keyframes cubeAnim4{
  0%  { opacity: 0; transform: translate(-50px, 0);}
  40% { opacity: 1; transform: translate(0, 0);}
  100%{ opacity: 0;}
}
@keyframes purpleAnim{
  0%  { transform: translate(50px, 0px); opacity: 1;}
  25% { transform: translate(50px, 50px);}
  50% { transform: translate(0px, 50px);}
  75% { transform: translate(0px, 0px);}
  100%{ transform: translate(50px, 0px); opacity: 1;}
}