@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 - 24px) !important; }
.pl-antcss .holder { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; min-height: 100px; background-color: rgba(255, 193, 7, .85); }
.pl-antcss .flip-preloader {
	position: absolute; left: 50%; top: 50%; width: 160px; height: 8px;
	perspective: 300px;
	transform: translateX(-50%) translateY(-50%);
	perspective-origin: 50% 50%;
}
.pl-antcss .flip-preloader div {
	position: absolute; left: 0%; width: 20%; height: 100%;
	box-shadow: 0 0 30px 2px rgba(255, 255, 255, .15),  0 0 12px 0 rgba(255, 255, 255, .85);
	background-color: rgba(198, 40, 40, .85);
	box-sizing: border-box;
	transform-origin: 0% 50%;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.flip-preloader div:nth-child(1) {
	z-index: 1; left: 0%;
	background-color: rgba(3, 169, 244, .85);
	animation-name: preloader-flipPreloader1;
}
.flip-preloader div:nth-child(2) {
	z-index: 2; left: 20%;
	background-color: rgba(255, 152, 0, .85);
	animation-name: preloader-flipPreloader2;
}
.flip-preloader div:nth-child(3) {
	z-index: 3; left: 40%;
	background-color: rgba(205, 220, 57, .85);
	animation-name: preloader-flipPreloader3;
}
.flip-preloader div:nth-child(4) {
	z-index: 4; left: 60%;
	background-color: rgba(171, 71, 188, .85);
	animation-name: preloader-flipPreloader4;
}
.flip-preloader div:nth-child(5) {
	z-index: 5; left: 80%;
	background-color: rgba(0, 150, 136, .85);
	animation-name: preloader-flipPreloader5;
}

@keyframes preloader-flipPreloader1 {
	0% { transform: rotateY(-180deg); opacity: 0; transform-origin: 0% 50%; background-color: rgba(3, 169, 244, .85); }
	4% { background-color: rgba(3, 169, 244, .85); }
	5% { background-color: rgba(0, 150, 136, .85); }
	10% { transform: rotateY(0deg); opacity: 1; background-color: rgba(0, 150, 136, .85); transform-origin: 0% 50%; }
	11% { transform-origin: 100% 50%; background-color: rgba(3, 169, 244, .85); }
	48% { z-index: 1; }
	49% { z-index: 10; }
	50% { transform: rotateY(0deg); }
	51% { transform-origin: 100% 50%; }
	60% { transform: rotateY(180deg); opacity: 1; background-color: rgba(3, 169, 244, .85); }
	61% { opacity: 0; }
	100% { z-index: 10; transform: rotateY(180deg); opacity: 0; transform-origin: 100% 50%; background-color: rgba(3, 169, 244, .85); }
}
@keyframes preloader-flipPreloader2 {
	0% { transform: rotateY(-180deg); background-color: rgba(0, 150, 136, .85); opacity: 0; transform-origin: 0% 50%; }
	9% { opacity: 0; }
	10% { transform: rotateY(-180deg); opacity: 1; }
	15% { background-color: rgba(0, 150, 136, .85); }
	20% { background-color: rgba(0, 150, 136, .85); transform: rotateY(0deg); transform-origin: 0% 50%; }
	21% { transform-origin: 100% 50%; background-color: rgba(255, 152, 0, .85); }
	48% { z-index: 2; }
	49% { z-index: 9; }
	60% { opacity: 1; transform: rotateY(0deg); background-color: rgba(255, 152, 0, .85); }
	61% { background-color: rgba(3, 169, 244, .85); transform-origin: 100% 50%; }
	64% { background-color: rgba(3, 169, 244, .85); }
	65% { background-color: rgba(255, 152, 0, .85); }
	70% { transform: rotateY(180deg); opacity: 1; }
	71% { opacity: 0; }
	100% { z-index: 9; background-color: rgba(255, 152, 0, .85); transform: rotateY(180deg); opacity: 0; transform-origin: 100% 50%; }
}
@keyframes preloader-flipPreloader3 {
	0% { transform: rotateY(-180deg); background-color: rgba(0, 150, 136, .85); opacity: 0; transform-origin: 0% 50%; }
	19% { opacity: 0; }
	20% { transform: rotateY(-180deg); opacity: 1; }
	25% { background-color: rgba(0, 150, 136, .85); }
	30% { background-color: rgba(0, 150, 136, .85); transform: rotateY(0deg); transform-origin: 0% 50%; }
	31% { transform-origin: 100% 50%; background-color: rgba(205, 220, 57, .85); }
	48% { z-index: 3; }
	49% { z-index: 8; }
	70% { transform: rotateY(0deg); opactiy: 1; background-color: rgba(205, 220, 57, .85); }
	71% { background-color: rgba(255, 152, 0, .85); transform-origin: 100% 50%; }
	74% { background-color: rgba(255, 152, 0, .85); }
	75% { background-color: rgba(205, 220, 57, .85); }
	80% { transform: rotateY(180deg); opacity: 1; }
	81% { opacity: 0; }
	100% { z-index: 8; background-color: rgba(205, 220, 57, .85); transform: rotateY(180deg); opacity: 0; transform-origin: 100% 50%; }
}
@keyframes preloader-flipPreloader4 {
	0% { transform: rotateY(-180deg); background-color: rgba(0, 150, 136, .85); opacity: 0; transform-origin: 0% 50%; }
	29% { opacity: 0; }
	30% { transform: rotateY(-180deg); opacity: 1; }
	35% { background-color: rgba(0, 150, 136, .85); }
	40% { background-color: rgba(0, 150, 136, .85); transform: rotateY(0deg); transform-origin: 0% 50%; }
	41% { transform-origin: 100% 50%; background-color: rgba(171, 71, 188, .85); }
	48% { z-index: 4; }
	49% { z-index: 7; }
	80% { transform: rotateY(0deg); opacity: 1; background-color: rgba(171, 71, 188, .85); }
	81% { background-color: rgba(205, 220, 57, .85); transform-origin: 100% 50%; }
	84% { background-color: rgba(205, 220, 57, .85); }
	85% { background-color: rgba(171, 71, 188, .85); }
	90% { transform: rotateY(180deg); opacity: 1; }
	91% { opacity: 0; }
	100% { z-index: 7; background-color: rgba(171, 71, 188, .85); transform: rotateY(180deg); opacity: 0; transform-origin: 100% 50%; }
}
@keyframes preloader-flipPreloader5 {
	0% { transform: rotateY(-180deg); background-color: rgba(0, 150, 136, .85); opacity: 0; transform-origin: 0% 50%; }
	39% { opacity: 0; }
	40% { transform: rotateY(-180deg); opacity: 1; }
	45% { background-color: rgba(0, 150, 136, .85); }
	48% { z-index: 5; }
	49% { z-index: 6; }
	50% { background-color: rgba(0, 150, 136, .85); transform: rotateY(0deg); transform-origin: 0% 50%; }
	51% { transform-origin: 100% 50%; background-color: rgba(0, 150, 136, .85); }
	90% { transform: rotateY(0deg); opacity: 1; background-color: rgba(0, 150, 136, .85); }
	91% { background-color: rgba(171, 71, 188, .85); transform-origin: 100% 50%; }
	94% { background-color: rgba(171, 71, 188, .85); }
	95% { background-color: rgba(0, 150, 136, .85); }
	100% { z-index: 6; background-color: rgba(0, 150, 136, .85); transform: rotateY(180deg); opacity: 0; transform-origin: 100% 50%; }
}

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

/*不支援 自選顏色*/

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

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