@charset "utf-8";

/*紅 red rgba(244, 67, 54, .85)*/ /*粉 pink rgba(255, 150, 220, .85)*/

/*紫 purple rgba(156, 39, 176, .85)*/ /*深紫 deeppurple rgba(103, 58, 183, .85)*/

/*靛青 indigo rgba(63, 81, 181, .85)*/ /*藍 blue rgba(33, 150, 243, .85)*/ /*淺藍 lightblue rgba(3, 169, 244, .85)*/

/*青色 cyan rgba(0, 188, 212, .85)*/ /*藍綠色 teal rgba(0, 150, 136, .85)*/

/*綠 green rgba(76, 175, 80, .85)*/ /*淺綠 lightgreen rgba(139, 195, 74, .85)*/ /*檸檬綠 lime rgba(205, 220, 57, .85)*/

/*黃色 yellow rgba(255, 235, 59, .85)*/ /*琥珀色 amber rgba(255, 193, 7, .85)*/ /*橙色 orange rgba(255, 152, 0, .85)*/ /*深橙 deeporange rgba(255, 87, 34, .85)*/

/*棕色 brown rgba(121, 85, 72, .85)*/ /*灰色 grey rgba(158, 158, 158, .85)*/ /*灰藍 bluegrey rgba(96, 125, 139, .85)*/

/*============================================================================*/

.pl-antcss { position: fixed; top: calc(100% / 2 - 0px) !important; left: calc(100% / 2 - 0px) !important; }

.pl-antcss .container {
	zoom: 25%;
	margin: auto; width: 105px; height: 100px; text-align: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: preloader-rotate-move 5s cubic-bezier(.5,0,.5,1) infinite;
	animation: preloader-rotate-move 5s cubic-bezier(.5,0,.5,1) infinite;
}

.pl-antcss .elem { display: inline-block; margin: 1px; width: 45px; height: 45px; border-radius: 5px; }

.pl-antcss .elem-1 {
	box-shadow: 0 0 3px 1px rgba(244, 67, 54, .35);
	background-color: rgba(244, 67, 54, .8);
	-webkit-animation: preloader-elem-1-move 5s linear infinite;
	animation: preloader-elem-1-move 5s linear infinite;
}

.pl-antcss .elem-2 {
	box-shadow: 0 0 3px 1px rgba(3, 169, 244, .35);
	background-color: rgba(3, 169, 244, .8);
	-webkit-animation: preloader-elem-2-move 5s linear infinite;
	animation: preloader-elem-2-move 5s linear infinite;
}

.pl-antcss .elem-3 {
	box-shadow: 0 0 3px 1px rgba(139, 195, 74, .35);
	background-color: rgba(139, 195, 74, .8);
	-webkit-animation: preloader-elem-3-move 5s linear infinite;
	animation: preloader-elem-3-move 5s linear infinite;
}

.pl-antcss .elem-4 {
	box-shadow: 0 0 3px 1px rgba(255, 193, 7, .35);
	background-color: rgba(255, 193, 7, .8);
	-webkit-animation: preloader-elem-4-move 5s linear infinite;
	animation: preloader-elem-4-move 5s linear infinite;
}

@-webkit-keyframes preloader-elem-1-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(-27px, 51px);transform: translate(-27px, 51px)}
	44.9%, 59.9% {-webkit-transform: translate(-27px, 51px);transform: translate(-27px, 51px)}
}

@keyframes preloader-elem-1-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(-27px, 51px);transform: translate(-27px, 51px)}
	44.9%, 59.9% {-webkit-transform: translate(-27px, 51px);transform: translate(-27px, 51px)}
}

@-webkit-keyframes preloader-elem-2-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}

@keyframes preloader-elem-2-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(-27px, 0px);transform: translate(-27px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}

@-webkit-keyframes preloader-elem-3-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}

@keyframes preloader-elem-3-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}
@-webkit-keyframes preloader-elem-4-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}

@keyframes preloader-elem-4-move {
	5%, 95% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
	11.6%, 21.6%, 78.2%, 88.2% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	28.3%, 38.3%, 61.6%, 71.6% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
	44.9%, 59.9% {-webkit-transform: translate(25px, 0px);transform: translate(25px, 0px)}
}

@-webkit-keyframes preloader-rotate-move {
	15.6%, 17.6%, 48.9%, 50.9%, 82.2%, 84.2% {-webkit-transform: translate(-50%, -50%) rotate(360deg);transform: translate(-50%, -50%) rotate(360deg)}
	0%, 32.3%, 34.3%, 65.6%, 67.6%, 99% {-webkit-transform: translate(-50%, -50%) rotate(0);transform: translate(-50%, -50%) rotate(0)}
}

@keyframes preloader-rotate-move {
	15.6%, 17.6%, 48.9%, 50.9%, 82.2%, 84.2% {-webkit-transform: translate(-50%, -50%) rotate(360deg);transform: translate(-50%, -50%) rotate(360deg)}
	0%, 32.3%, 34.3%, 65.6%, 67.6%, 99% {-webkit-transform: translate(-50%, -50%) rotate(0);transform: translate(-50%, -50%) rotate(0)}
}

/*----------------------------------------------------------------------------*/

/*不支援 自選顏色*/

/*----------------------------------------------------------------------------*/

/*============================================================================*/