/* keyframes */
@keyframes rotate_box {
	from	{transform: rotate(0deg);}
	to		{transform: rotate(var(--angle, 0deg));}
}

@keyframes rotate_box_loop {
	from	{transform: rotate(0deg) scaleX(-1);}
	to		{transform: rotate(360deg) scaleX(-1);}
}

@keyframes data_count {
	from	{opacity:0;}
	to		{opacity:1;}
}

@keyframes bar_data {
	from	{height:0;}
	to		{height:var(--bar_data);}
}

@keyframes jump {
	0%	{transform:translateY(-100%);}
	50%	{transform:translateY(0%);}
	100%	{transform:translateY(-100%);}
}

@keyframes chang_data {
	from	{width:0;}
	to		{width:var(--chang_data);}
}

@keyframes chang_data_se {
	from	{height:0;}
	to		{height:var(--chang_data);}
}

@keyframes run {
	from	{transform:translateX(-100%);}
	to		{transform:translateX(100%);}
}

@keyframes warning {
	0% {transform:translateX(-8px);}
	25% {transform:translateX(8px);}
	50% {transform:translateX(-8px);}
	75% {transform:translateX(8px);}
}

@keyframes dot_view {
	from	{opacity:0;}
	to		{opacity:1;}
}

@keyframes safe_box {
	from	{bottom:50%; }
	to		{bottom:var(--safe_box); }
}

@keyframes thunder {
	0%	{color:orange;}
	25%	{color:yellow;}
	50%	{color:#24dfff;}
	75%	{color:#44ff24;}
	100%{color:orange;}
}

@keyframes thunder_stop {
	from	{color:var(--biw_time);}
	to{color:var(--biw_time);}
}

@keyframes logo_ani {
	0%	{transform: translate(-200%, -50% ); background: #ccc; width: 50%; height: 100%;}
	10%	{transform: translate(-100%, -50% ); }
	20%	{transform: translate(-100%, -50% ); }
	30%	{transform: translate(0, -50% ); }
	40%	{transform: translate(0, -50% ); }
	50%	{transform: translate(-200%, -50% ); background: #ccc; width: 50%; height: 100%;}

	60%	{transform: translate(-50%, -50% ); width: 50%; height: 100%; background:#fff896; }
	70%	{transform: translate(-50%, -50% ); width: 100%; height: 100%; background:#fff896; }
	80%	{transform: translate(-50%, -50% ); width: 100%; height: 100%; background:#59e7ff; }
	90%	{transform: translate(-50%, -50% ); width: 100%; height: 100%; background:#fff; }
	100%	{transform: translate(-50%, -50% ); width: 100%; height: 100%; background:#fff; }
}


@keyframes logo_ani1 {
	0%	{transform: translate(-200%, -50% ); background: blue; width: 50%; height: 100%;}
	25%	{transform: translate(-100%, -100% ); width: 50%; height: 100%;}
	50%	{transform: translate(-50%, -100% ); width: 50%; height: 100%; background:#7b9e68;}
	75%	{background:#ddd;}
	100%{transform:translate(-100%, -100% ); background:#fafafa;}
}

@keyframes care_step_ani1 {
	0%	{background:#3cff00;}
	25%	{background:#85ec00;}
	50%	{background:#acf259;}
	75%	{background:#3cff00;}
	100%{background:#85ec00;}
}

@keyframes care_step_ani2 {
	0%	{background:#314659;}
	25%	{background:#0c6abf;}
	50%	{background:#073e71;}
	75%	{background:#314659;}
	100%{background:#0c6abf;}
}

@keyframes care_step_ani3 {
	0%	{background:#633512;}
	25%	{background:#d15a00;}
	50%	{background:#ff9646;}
	75%	{background:#633512;}
	100%{background:#d15a00;}
}

@keyframes care_step_ani4 {
	0%	{background:#a10c0c;}
	25%	{background:#ff0000;}
	50%	{background:#b34242;}
	75%	{background:#a10c0c;}
	100%{background:#ff0000;}
}

@keyframes care_step_ani5 {
	0%	{background:#ff0000;}
	25%	{background:#ff4b22;}
	50%	{background:#c5300e;}
	75%	{background:#ff0000;}
	100%{background:#ff4b22;}
}

@keyframes action {
	0% {transform:translateY(100%); opacity:0;}
	100% {transform:translateY(-100%); opacity: 1;}
}