@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 - 40px) !important; left: calc(100% / 2 - 40px) !important; }

.pl-antcss .wloader { position: relative; margin: auto; width: 80px; height: 80px; }

.pl-antcss .wloader .dot {
	position: absolute; top: 0; left: 0; width: 80px; height: 80px;
	animation: 1.7s preloader-dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
}

.pl-antcss .wloader .dot:nth-child(1) { animation-delay: 0.2s; }
.pl-antcss .wloader .dot:nth-child(2) { animation-delay: 0.35s; }
.pl-antcss .wloader .dot:nth-child(3) { animation-delay: 0.45s; }
.pl-antcss .wloader .dot:nth-child(4) { animation-delay: 0.55s; }
.pl-antcss .wloader .dot:nth-child(5) { animation-delay: 0.7s; }
.pl-antcss .wloader .dot:nth-child(6) { animation-delay: 0.85s; }

.pl-antcss .wloader .dot:after,
.pl-antcss .wloader .dot .first {
	content: ""; position: absolute; left: 50%; margin-left: -4px; width: 8px; height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .15),  0 0 8px 0 rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .85);
}

.pl-antcss .wloader .dot .first {
	margin-top: -4px;
	animation: 1.7s preloader-dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
	animation-delay: 0.2s;
}

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

/*紅 red rgba(244, 67, 54, .85)*/
.pl-antcss.red .wloader .dot:after,
.pl-antcss.red .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(244, 67, 54, .15),  0 0 8px 0 rgba(244, 67, 54, .15); background: rgba(244, 67, 54, .85); }

/*粉 pink rgba(255, 150, 220, .85)*/
.pl-antcss.pink .wloader .dot:after,
.pl-antcss.pink .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 150, 220, .15),  0 0 8px 0 rgba(255, 150, 220, .15); background: rgba(255, 150, 220, .85); }

/*紫 purple rgba(156, 39, 176, .85)*/
.pl-antcss.purple .wloader .dot:after,
.pl-antcss.purple .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(156, 39, 176, .15),  0 0 8px 0 rgba(156, 39, 176, .15); background: rgba(156, 39, 176, .85); }

/*深紫 deeppurple rgba(103, 58, 183, .85)*/
.pl-antcss.deeppurple .wloader .dot:after,
.pl-antcss.deeppurple .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(103, 58, 183, .15),  0 0 8px 0 rgba(103, 58, 183, .15); background: rgba(103, 58, 183, .85); }

/*靛青 indigo rgba(63, 81, 181, .85)*/
.pl-antcss.indigo .wloader .dot:after,
.pl-antcss.indigo .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(63, 81, 181, .15),  0 0 8px 0 rgba(63, 81, 181, .15); background: rgba(63, 81, 181, .85); }

/*藍 blue rgba(33, 150, 243, .85)*/
.pl-antcss.blue .wloader .dot:after,
.pl-antcss.blue .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(33, 150, 243, .15),  0 0 8px 0 rgba(33, 150, 243, .15); background: rgba(33, 150, 243, .85); }

/*淺藍 lightblue rgba(3, 169, 244, .85)*/
.pl-antcss.lightblue .wloader .dot:after,
.pl-antcss.lightblue .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(3, 169, 244, .15),  0 0 8px 0 rgba(3, 169, 244, .15); background: rgba(3, 169, 244, .85); }

/*青色 cyan rgba(0, 188, 212, .85)*/
.pl-antcss.cyan .wloader .dot:after,
.pl-antcss.cyan .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(0, 188, 212, .15),  0 0 8px 0 rgba(0, 188, 212, .15); background: rgba(0, 188, 212, .85); }

/*藍綠色 teal rgba(0, 150, 136, .85)*/
.pl-antcss.teal .wloader .dot:after,
.pl-antcss.teal .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(0, 150, 136, .15),  0 0 8px 0 rgba(0, 150, 136, .15); background: rgba(0, 150, 136, .85); }

/*綠 green rgba(76, 175, 80, .85)*/
.pl-antcss.green .wloader .dot:after,
.pl-antcss.green .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(76, 175, 80, .15),  0 0 8px 0 rgba(76, 175, 80, .15); background: rgba(76, 175, 80, .85); }

/*淺綠 lightgreen rgba(139, 195, 74, .85)*/
.pl-antcss.lightgreen .wloader .dot:after,
.pl-antcss.lightgreen .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(139, 195, 74, .15),  0 0 8px 0 rgba(139, 195, 74, .15); background: rgba(139, 195, 74, .85); }

/*檸檬綠 lime rgba(205, 220, 57, .85)*/
.pl-antcss.lime .wloader .dot:after,
.pl-antcss.lime .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(205, 220, 57, .15),  0 0 8px 0 rgba(205, 220, 57, .15); background: rgba(205, 220, 57, .85); }

/*黃色 yellow rgba(255, 235, 59, .85)*/
.pl-antcss.yellow .wloader .dot:after,
.pl-antcss.yellow .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 235, 59, .15),  0 0 8px 0 rgba(255, 235, 59, .15); background: rgba(255, 235, 59, .85); }

/*琥珀色 amber rgba(255, 193, 7, .85)*/
.pl-antcss.amber .wloader .dot:after,
.pl-antcss.amber .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 193, 7, .15),  0 0 8px 0 rgba(255, 193, 7, .15); background: rgba(255, 193, 7, .85); }

/*橙色 orange rgba(255, 152, 0, .85)*/
.pl-antcss.orange .wloader .dot:after,
.pl-antcss.orange .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 152, 0, .15),  0 0 8px 0 rgba(255, 152, 0, .15); background: rgba(255, 152, 0, .85); }

/*深橙 deeporange rgba(255, 87, 34, .85)*/
.pl-antcss.deeporange .wloader .dot:after,
.pl-antcss.deeporange .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 87, 34, .15),  0 0 8px 0 rgba(255, 87, 34, .15); background: rgba(255, 87, 34, .85); }

/*棕色 brown rgba(121, 85, 72, .85)*/
.pl-antcss.brown .wloader .dot:after,
.pl-antcss.brown .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(121, 85, 72, .15),  0 0 8px 0 rgba(121, 85, 72, .15); background: rgba(121, 85, 72, .85); }

/*灰色 grey rgba(158, 158, 158, .85)*/
.pl-antcss.grey .wloader .dot:after,
.pl-antcss.grey .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(158, 158, 158, .15),  0 0 8px 0 rgba(158, 158, 158, .15); background: rgba(158, 158, 158, .85); }

/*灰藍 bluegrey rgba(96, 125, 139, .85)*/
.pl-antcss.bluegrey .wloader .dot:after,
.pl-antcss.bluegrey .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(96, 125, 139, .15),  0 0 8px 0 rgba(96, 125, 139, .15); background: rgba(96, 125, 139, .85); }


.pl-antcss.white .wloader .dot:after,
.pl-antcss.white .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(255, 255, 255, .15),  0 0 8px 0 rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .85); }


.pl-antcss.black .wloader .dot:after,
.pl-antcss.black .wloader .dot .first { box-shadow: 0 0 2px 2px rgba(0, 0, 0, .15),  0 0 8px 0 rgba(0, 0, 0, .15); background: rgba(0, 0, 0, .85); }


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

@keyframes preloader-dotrotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes preloader-dotscale {
	0%, 10% { width: 16px; height: 16px; margin-left: -8px;  margin-top: -4px; }
	50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; }
	90%, 100% { width: 16px; height: 16px;  margin-left: -8px;  margin-top: -4px; }
}

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

/*不支援 自選顏色*/

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

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