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

.pl-antcss .hourglass {
	width: 42px; height: 40px;
	animation: preloader-loader 5s cubic-bezier(.8,0,.2,1) infinite;
}

.pl-antcss .hourglass-top {
	height: 0px; width: 1px;
	border-top: 20px solid rgba(0, 0, 0, .85);
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	transform-origin: 50% 100%;
	animation: preloader-top 5s linear infinite;
}

.pl-antcss .hourglass-line {
	border-left: 1px dotted rgba(0, 0, 0, .85);
	position: absolute; top: 20px; left: 20px; width: 0px; height: 0px;
	animation: preloader-line 5s linear infinite;
}

.pl-antcss .hourglass-bottom {
	width: 1px; height: 0px;
	border-right: 20px solid transparent;
	border-bottom: 20px solid rgba(0, 0, 0, .85);
	border-left: 20px solid transparent;
	transform: scale(0);
	transform-origin: 50% 100%;
	animation: preloader-bottom 5s linear infinite;
}

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

/*紅 red rgba(244, 67, 54, .85)*/
.pl-antcss.red .hourglass-top { border-top: 20px solid rgba(244, 67, 54, .85); }
.pl-antcss.red .hourglass-line { border-left: 1px dotted rgba(244, 67, 54, .85); }
.pl-antcss.red .hourglass-bottom { border-bottom: 20px solid rgba(244, 67, 54, .85); }

/*粉 pink rgba(255, 150, 220, .85)*/
.pl-antcss.pink .hourglass-top { border-top: 20px solid rgba(255, 150, 220, .85); }
.pl-antcss.pink .hourglass-line { border-left: 1px dotted rgba(255, 150, 220, .85); }
.pl-antcss.pink .hourglass-bottom { border-bottom: 20px solid rgba(255, 150, 220, .85); }

/*紫 purple rgba(156, 39, 176, .85)*/
.pl-antcss.purple .hourglass-top { border-top: 20px solid rgba(156, 39, 176, .85); }
.pl-antcss.purple .hourglass-line { border-left: 1px dotted rgba(156, 39, 176, .85); }
.pl-antcss.purple .hourglass-bottom { border-bottom: 20px solid rgba(156, 39, 176, .85); }

/*深紫 deeppurple rgba(103, 58, 183, .85)*/
.pl-antcss.deeppurple .hourglass-top { border-top: 20px solid rgba(103, 58, 183, .85); }
.pl-antcss.deeppurple .hourglass-line { border-left: 1px dotted rgba(103, 58, 183, .85); }
.pl-antcss.deeppurple .hourglass-bottom { border-bottom: 20px solid rgba(103, 58, 183, .85); }

/*靛青 indigo rgba(63, 81, 181, .85)*/
.pl-antcss.indigo .hourglass-top { border-top: 20px solid rgba(63, 81, 181, .85); }
.pl-antcss.indigo .hourglass-line { border-left: 1px dotted rgba(63, 81, 181, .85); }
.pl-antcss.indigo .hourglass-bottom { border-bottom: 20px solid rgba(63, 81, 181, .85); }

/*藍 blue rgba(33, 150, 243, .85)*/
.pl-antcss.blue .hourglass-top { border-top: 20px solid rgba(33, 150, 243, .85); }
.pl-antcss.blue .hourglass-line { border-left: 1px dotted rgba(33, 150, 243, .85); }
.pl-antcss.blue .hourglass-bottom { border-bottom: 20px solid rgba(33, 150, 243, .85); }

/*淺藍 lightblue rgba(3, 169, 244, .85)*/
.pl-antcss.lightblue .hourglass-top { border-top: 20px solid rgba(3, 169, 244, .85); }
.pl-antcss.lightblue .hourglass-line { border-left: 1px dotted rgba(3, 169, 244, .85); }
.pl-antcss.lightblue .hourglass-bottom { border-bottom: 20px solid rgba(3, 169, 244, .85); }

/*青色 cyan rgba(0, 188, 212, .85)*/
.pl-antcss.cyan .hourglass-top { border-top: 20px solid rgba(0, 188, 212, .85); }
.pl-antcss.cyan .hourglass-line { border-left: 1px dotted rgba(0, 188, 212, .85); }
.pl-antcss.cyan .hourglass-bottom { border-bottom: 20px solid rgba(0, 188, 212, .85); }

/*藍綠色 teal rgba(0, 150, 136, .85)*/
.pl-antcss.teal .hourglass-top { border-top: 20px solid rgba(0, 150, 136, .85); }
.pl-antcss.teal .hourglass-line { border-left: 1px dotted rgba(0, 150, 136, .85); }
.pl-antcss.teal .hourglass-bottom { border-bottom: 20px solid rgba(0, 150, 136, .85); }

/*綠 green rgba(76, 175, 80, .85)*/
.pl-antcss.green .hourglass-top { border-top: 20px solid rgba(76, 175, 80, .85); }
.pl-antcss.green .hourglass-line { border-left: 1px dotted rgba(76, 175, 80, .85); }
.pl-antcss.green .hourglass-bottom { border-bottom: 20px solid rgba(76, 175, 80, .85); }

/*淺綠 lightgreen rgba(139, 195, 74, .85)*/
.pl-antcss.lightgreen .hourglass-top { border-top: 20px solid rgba(139, 195, 74, .85); }
.pl-antcss.lightgreen .hourglass-line { border-left: 1px dotted rgba(139, 195, 74, .85); }
.pl-antcss.lightgreen .hourglass-bottom { border-bottom: 20px solid rgba(139, 195, 74, .85); }

/*檸檬綠 lime rgba(205, 220, 57, .85)*/
.pl-antcss.lime .hourglass-top { border-top: 20px solid rgba(205, 220, 57, .85); }
.pl-antcss.lime .hourglass-line { border-left: 1px dotted rgba(205, 220, 57, .85); }
.pl-antcss.lime .hourglass-bottom { border-bottom: 20px solid rgba(205, 220, 57, .85); }

/*黃色 yellow rgba(255, 235, 59, .85)*/
.pl-antcss.yellow .hourglass-top { border-top: 20px solid rgba(255, 235, 59, .85); }
.pl-antcss.yellow .hourglass-line { border-left: 1px dotted rgba(255, 235, 59, .85); }
.pl-antcss.yellow .hourglass-bottom { border-bottom: 20px solid rgba(255, 235, 59, .85); }

/*琥珀色 amber rgba(255, 193, 7, .85)*/
.pl-antcss.amber .hourglass-top { border-top: 20px solid rgba(255, 193, 7, .85); }
.pl-antcss.amber .hourglass-line { border-left: 1px dotted rgba(255, 193, 7, .85); }
.pl-antcss.amber .hourglass-bottom { border-bottom: 20px solid rgba(255, 193, 7, .85); }

/*橙色 orange rgba(255, 152, 0, .85)*/
.pl-antcss.orange .hourglass-top { border-top: 20px solid rgba(255, 152, 0, .85); }
.pl-antcss.orange .hourglass-line { border-left: 1px dotted rgba(255, 152, 0, .85); }
.pl-antcss.orange .hourglass-bottom { border-bottom: 20px solid rgba(255, 152, 0, .85); }

/*深橙 deeporange rgba(255, 87, 34, .85)*/
.pl-antcss.deeporange .hourglass-top { border-top: 20px solid rgba(255, 87, 34, .85); }
.pl-antcss.deeporange .hourglass-line { border-left: 1px dotted rgba(255, 87, 34, .85); }
.pl-antcss.deeporange .hourglass-bottom { border-bottom: 20px solid rgba(255, 87, 34, .85); }

/*棕色 brown rgba(121, 85, 72, .85)*/
.pl-antcss.brown .hourglass-top { border-top: 20px solid rgba(121, 85, 72, .85); }
.pl-antcss.brown .hourglass-line { border-left: 1px dotted rgba(121, 85, 72, .85); }
.pl-antcss.brown .hourglass-bottom { border-bottom: 20px solid rgba(121, 85, 72, .85); }

/*灰色 grey rgba(158, 158, 158, .85)*/
.pl-antcss.grey .hourglass-top { border-top: 20px solid rgba(158, 158, 158, .85); }
.pl-antcss.grey .hourglass-line { border-left: 1px dotted rgba(158, 158, 158, .85); }
.pl-antcss.grey .hourglass-bottom { border-bottom: 20px solid rgba(158, 158, 158, .85); }

/*灰藍 bluegrey rgba(96, 125, 139, .85)*/
.pl-antcss.bluegrey .hourglass-top { border-top: 20px solid rgba(96, 125, 139, .85); }
.pl-antcss.bluegrey .hourglass-line { border-left: 1px dotted rgba(96, 125, 139, .85); }
.pl-antcss.bluegrey .hourglass-bottom { border-bottom: 20px solid rgba(96, 125, 139, .85); }


.pl-antcss.white .hourglass-top { border-top: 20px solid rgba(255, 255, 255, .85); }
.pl-antcss.white .hourglass-line { border-left: 1px dotted rgba(255, 255, 255, .85); }
.pl-antcss.white .hourglass-bottom { border-bottom: 20px solid rgba(255, 255, 255, .85); }


.pl-antcss.black .hourglass-top { border-top: 20px solid rgba(0, 0, 0, .85); }
.pl-antcss.black .hourglass-line { border-left: 1px dotted rgba(0, 0, 0, .85); }
.pl-antcss.black .hourglass-bottom { border-bottom: 20px solid rgba(0, 0, 0, .85); }


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

@keyframes preloader-loader {
	90% { transform: rotate(0deg); }
	100% { transform: rotate(180deg); }
}

@keyframes preloader-top {
	90% { transform: scale(0); }
	100% { transform: scale(0);}
}

@keyframes preloader-bottom {
	10% { transform: scale(0); }
	90% { transform: scale(1); }
	100% { transform: scale(1); }
}

@keyframes preloader-line {
	10% { height: 20px; }
	100% { height: 20px; }
}

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

/*不支援 自選顏色*/

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

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