.bangumi_loading { padding: 100px 0px; }
.bangumi_loading_text { text-align: center; padding: 10px 0px; }
.loading-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); transition: background-color 0.2s ease-out 0s; }
.loading-anim { position: relative; width: 200px; height: 200px; margin: auto; perspective: 800px; transform-style: preserve-3d; transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);  transition: all 0.2s ease-out 0s; }
.loading-anim .circle { width: 100%; height: 100%; animation: 5s linear infinite spin; }
.loading-anim .border { position: absolute; border-radius: 50%; border: 3px solid rgb(227, 73, 129); }
.loading-anim .out { top: 15%; left: 15%; width: 70%; height: 70%; border-left-color: transparent; border-right-color: transparent; animation: 2s linear infinite reverse spin; }
.loading-anim .in { top: 18%; left: 18%; width: 64%; height: 64%; border-top-color: transparent; border-bottom-color: transparent; animation: 2s linear infinite spin; }
.loading-anim .mid { top: 40%; left: 40%; width: 20%; height: 20%; border-left-color: transparent; border-right-color: transparent; animation: 1s linear infinite spin; }
.loading-anim { transform: translateZ(0px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); opacity: 1; }
.loading-overlay { background: rgba(255, 255, 255, 0.5); }
.dot { position: absolute; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: rgb(227, 73, 129); animation: 5s ease-in-out infinite jitter, 5s linear infinite fade-in-out; }
.dot:nth-child(1) { top: 90px; left: 180px; animation-delay: 0s; }
.dot:nth-child(2) { top: 135px; left: 168px; animation-delay: 0.41667s; }
.dot:nth-child(3) { top: 168px; left: 135px; animation-delay: 0.83333s; }
.dot:nth-child(4) { top: 180px; left: 90px; animation-delay: 1.25s; }
.dot:nth-child(5) { top: 168px; left: 45px; animation-delay: 1.66667s; }
.dot:nth-child(6) { top: 135px; left: 12px; animation-delay: 2.08333s; }
.dot:nth-child(7) { top: 90px; left: 0px; animation-delay: 2.5s; }
.dot:nth-child(8) { top: 45px; left: 12px; animation-delay: 2.91667s; }
.dot:nth-child(9) { top: 12px; left: 45px; animation-delay: 3.33333s; }
.dot:nth-child(10) { top: 0px; left: 90px; animation-delay: 3.75s; }
.dot:nth-child(11) { top: 12px; left: 135px; animation-delay: 4.16667s; }
.dot:nth-child(12) { top: 45px; left: 168px; animation-delay: 4.58333s; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes jitter { 
  0% { transform: scale(1, 1); }
  25% { transform: scale(0.7, 0.7); }
  50% { transform: scale(1, 1); }
  75% { transform: scale(1.3, 1.3); }
  100% { transform: scale(1, 1); }
}
@keyframes fade-in-out { 
  0% { opacity: 0.8; }
  25% { opacity: 0.2; }
  75% { opacity: 1; }
  100% { opacity: 0.8; }
}
.animated-button-2 { position: relative; padding: 20px 40px; font-size: 1.4rem; background-color: rgb(0, 179, 180); background-size: 46px 26px; border: 1px solid rgb(85, 85, 85); color: white; transition: all 0.3s ease 0s; }
.animated-button-2::after { position: absolute; top: 50%; right: 0.6em; transform: translateY(-50%); content: "»"; font-size: 1.2em; transition: all 0.3s ease 0s;  }
.animated-button-2:hover { padding: 20px 60px 20px 20px; }
.animated-button-2:hover::after { right: 1.2em; opacity: 1; }

@charset "utf-8";
/* CSS Document */

.bangumi_loading{
	padding:100px 0;
}
.bangumi_loading_text{
	text-align:center;
	padding:10px 0;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .2s ease-out;
}

.loading-anim {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
  
  transition: all .2s ease-out;
}
.loading-anim .circle {
  width: 100%;
  height: 100%;
  animation: spin 5s linear infinite;
}
.loading-anim .border {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #e34981;
}
.loading-anim .out {
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 2s linear reverse infinite;
}
.loading-anim .in {
  top: 18%;
  left: 18%;
  width: 64%;
  height: 64%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: spin 2s linear infinite;
}
.loading-anim .mid {
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 1s linear infinite;
}

.loading-anim {
  transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
  opacity: 1;
}

.loading-overlay {
  background: rgba(255, 255, 255, 0.5);
}

.dot {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e34981;
  animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

.dot:nth-child(1) {
  top: 90px;
  left: 180px;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  top: 135px;
  left: 168px;
  animation-delay: 0.41667s;
}

.dot:nth-child(3) {
  top: 168px;
  left: 135px;
  animation-delay: 0.83333s;
}

.dot:nth-child(4) {
  top: 180px;
  left: 90px;
  animation-delay: 1.25s;
}

.dot:nth-child(5) {
  top: 168px;
  left: 45px;
  animation-delay: 1.66667s;
}

.dot:nth-child(6) {
  top: 135px;
  left: 12px;
  animation-delay: 2.08333s;
}

.dot:nth-child(7) {
  top: 90px;
  left: 0px;
  animation-delay: 2.5s;
}

.dot:nth-child(8) {
  top: 45px;
  left: 12px;
  animation-delay: 2.91667s;
}

.dot:nth-child(9) {
  top: 12px;
  left: 45px;
  animation-delay: 3.33333s;
}

.dot:nth-child(10) {
  top: 0px;
  left: 90px;
  animation-delay: 3.75s;
}

.dot:nth-child(11) {
  top: 12px;
  left: 135px;
  animation-delay: 4.16667s;
}

.dot:nth-child(12) {
  top: 45px;
  left: 168px;
  animation-delay: 4.58333s;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes jitter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

.animated-button-2{
  position: relative;
  padding:  20px 40px;
  font-size: 1.4rem;
  background-color: #00b3b4;
  background-size: 46px 26px;
  border: 1px solid #555;  
  color: white;
  transition: all ease 0.3s;
}

.animated-button-2::after{
  position: absolute;
  top: 50%;
  right: 0.6em;
  transform: translateY(-50%);
  content: "»";
  font-size: 1.2em;
  transition: all ease 0.3s;
  
}

.animated-button-2:hover{
  padding: 20px 60px 20px 20px;
}

.animated-button-2:hover::after{
  right: 1.2em;
  opacity: 1;
}