@CHARSET "UTF-8";

.loader.style1 {
	box-sizing: border-box;
	padding-top: 50px;
	position: relative;
}
.loader.style1:after {
	content: "\30ED\30FC\30C9\4E2D";
	margin: 40px auto 0;
	display: block;
	text-align: center;
	font-size: 12px;
}
.loader.style1 .loader2 {
  height: 20px;
  width: 20px;
  animation: rotate 0.8s infinite linear, color 3.2s infinite linear;
  border: 3px solid transparent;
  transition: border-color 200ms;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}

.loader.style2 {
	position: relative;
	height: 100%;
}
.loader.style2 .loader2 {
    height: 12px;
    width: 12px;
    animation: rotate 0.8s infinite linear, color 3.2s infinite linear;
    border: 2px solid transparent;
    transition: border-color 200ms;
    border-right-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}
@keyframes color {
  0%   {border-color:#54A500;border-right-color:transparent}
  50%   {border-color:#F8B62B;border-right-color:transparent}
  100% {border-color:#54A500;border-right-color:transparent}
}