/**
  @file       wait-theme-custom.css
  @date       2020-04-22: Ys      + 191001009, Create Copy From APP
*/
/* Waiting */
.waiting {width:100%;height:100%;position:fixed;z-index:100000;}

.sk-fading-circle {/* width:40px;height:40px; */width:45px;height:45px;/* margin:100px auto;position:relative;top:20%;*/position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;}

.sk-fading-circle .sk-circle {width:100%;height:100%;position:absolute;left:0px;top:0px;}

.sk-fading-circle .sk-circle:before {content:'';display:block;margin:0px auto;/* width:15%;height:15%; */width:10%;height:23.5%;/* background-color:#333;border-radius:100%; */border-radius:calc(50px / 10 / 2);
-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;}

@media all and (min-width:768px) {
.sk-fading-circle {width:55px;height:55px;}
.sk-fading-circle .sk-circle:before {width:9.1%;height:26%;border-radius:calc(55px / 10 / 2);}
}

.sk-fading-circle .sk-circle2 {-webkit-transform:rotate(30deg);transform:rotate(30deg);}
.sk-fading-circle .sk-circle3 {-webkit-transform:rotate(60deg);transform:rotate(60deg);}
.sk-fading-circle .sk-circle4 {-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.sk-fading-circle .sk-circle5 {-webkit-transform:rotate(120deg);transform:rotate(120deg);}
.sk-fading-circle .sk-circle6 {-webkit-transform:rotate(150deg);transform:rotate(150deg);}
.sk-fading-circle .sk-circle7 {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.sk-fading-circle .sk-circle8 {-webkit-transform:rotate(210deg);transform:rotate(210deg);}
.sk-fading-circle .sk-circle9 {-webkit-transform:rotate(240deg);transform:rotate(240deg);}
.sk-fading-circle .sk-circle10 {-webkit-transform:rotate(270deg);transform:rotate(270deg);}
.sk-fading-circle .sk-circle11 {-webkit-transform:rotate(300deg);transform:rotate(300deg);}
.sk-fading-circle .sk-circle12 {-webkit-transform:rotate(330deg);transform:rotate(330deg);}

/* Waiting 圓點預設顏色改為七彩 */
.sk-fading-circle .sk-circle1:before {background-color:hsl(0,100%,50%);}
.sk-fading-circle .sk-circle2:before {-webkit-animation-delay:-1.1s;animation-delay:-1.1s;background-color:hsl(30,100%,50%);}
.sk-fading-circle .sk-circle3:before {-webkit-animation-delay:-1s;animation-delay:-1s;background-color:hsl(58,100%,50%);}
.sk-fading-circle .sk-circle4:before {-webkit-animation-delay:-0.9s;animation-delay:-0.9s;background-color:hsl(100,100%,37%);}
.sk-fading-circle .sk-circle5:before {-webkit-animation-delay:-0.8s;animation-delay:-0.8s;background-color:hsl(120,100%,35%);}
.sk-fading-circle .sk-circle6:before {-webkit-animation-delay:-0.7s;animation-delay:-0.7s;background-color:hsl(160,100%,25%);}
.sk-fading-circle .sk-circle7:before {-webkit-animation-delay:-0.6s;animation-delay:-0.6s;background-color:hsl(190,100%,30%);}
.sk-fading-circle .sk-circle8:before {-webkit-animation-delay:-0.5s;animation-delay:-0.5s;background-color:hsl(210,100%,50%);}
.sk-fading-circle .sk-circle9:before {-webkit-animation-delay:-0.4s;animation-delay:-0.4s;background-color:hsl(240,100%,65%);}
.sk-fading-circle .sk-circle10:before {-webkit-animation-delay:-0.3s;animation-delay:-0.3s;background-color:hsl(270,100%,65%);}
.sk-fading-circle .sk-circle11:before {-webkit-animation-delay:-0.2s;animation-delay:-0.2s;background-color:hsl(300,100%,50%);}
.sk-fading-circle .sk-circle12:before {-webkit-animation-delay:-0.1s;animation-delay:-0.1s;background-color:hsl(330,100%,50%);}

@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% {opacity:0;}
40% {opacity:1;}
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100% {opacity:0;}
40% {opacity:1;}
}

/* 加轉圈次數表達
   2018-01-03: Chiuhua # 每一個色塊都要 rotate, 接縫才會準
	 2018-01-05: Chiuhua # 補立案 180100483, 轉速為 1.2s/格 (1s/格 太快, by Ho)
   2019-05-06: Chiuhua # 190401506, CSS inlined SVG Backgrounds 相容性改良 - .progress_pie .pie
*/
.progress_pie {width:43.5%;height:43.5%;position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;border-radius:50%;opacity:0.33;}
.progress_pie .pie {width:100%;height:100%;position:absolute;
background:no-repeat top center / 100% auto;background-image:url(../image/bg_progress_pie_red.svg);
-webkit-animation:pieFadin 7.2s ease-in;animation:pieFadin 7.2s ease-in;}
.progress_pie .pie.pie1 {-webkit-animation-delay:-6s;animation-delay:-6s;-webkit-transform:rotate(30deg);transform:rotate(30deg);}
.progress_pie .pie.pie2 {-webkit-animation-delay:-4.8s;animation-delay:-4.8s;-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.progress_pie .pie.pie3 {-webkit-animation-delay:-3.6s;animation-delay:-3.6s;-webkit-transform:rotate(150deg);transform:rotate(150deg);}
.progress_pie .pie.pie4 {-webkit-animation-delay:-2.4s;animation-delay:-2.4s;-webkit-transform:rotate(210deg);transform:rotate(210deg);}
.progress_pie .pie.pie5 {-webkit-animation-delay:-1.2s;animation-delay:-1.2s;-webkit-transform:rotate(270deg);transform:rotate(270deg);}
.progress_pie .pie.pie6 {-webkit-transform:rotate(330deg);transform:rotate(330deg);}
@-webkit-keyframes pieFadin {
0%, 90% {opacity:0;}
100% {opacity:1;}
}
@keyframes pieFadin {
0%, 90% {opacity:0;}
100% {opacity:1;}
}