@charset "utf-8";
/*CSS Info ======================================================================
File Name: Loading.css
Creator: Eliam
CreateDate:2019/05/02
Editer: Eliam 
LastEditDate:2019/05/03
Version: 1
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Mask animate style
【 Responsive Web Design 】
    寬度1024以上
=================================================================================*/

/*===============================================================================
                               Loading Animate 
=================================================================================*/
.MyLoading {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    display:none;
}

.active {
    display:block;
}

.MyLoading.white {
    background:#fff;
}

.MyLoading.white_opacity {
    background: rgba(255, 255, 255, 0.8);
}
.MyLoading.black {
    background:#000;
}

.MyLoading.black_opacity {
    background: rgba(0, 0, 0, 0.8);
}

.loadbox {
    text-align: center;
    width: 100%;
    height: 100px;
    position: absolute;
    top: calc(50% - 40px);
    color: #fff;
}

.loadbox p {
    font-size:1.125em;
    padding-top:10px;
}

.black .loadbox p, .black_opacity .loadbox p {
    color:#fff;
    margin-top:1rem;
}

.white .loadbox p, .white_opacity .loadbox p {
    color:#767676;
}

.black .loadbox svg, .black_opacity .loadbox svg {
    color:#fff;
}

.white .loadbox svg, .white_opacity .loadbox svg {
    color:#767676;
}

.gt.whirl, .gt.spin, .gt.deform, .gt.around {
    display:block;
    width:64px;
    height:64px;
    margin:auto;
}

.gt.whirl {
    border-radius: 50%;
    box-sizing: border-box;
    border: 40px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: whirl 1.2s infinite;
}

@-webkit-keyframes whirl {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

@keyframes whirl {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

.gt.spin {
    border: 16px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-top: 16px solid #d78ff5;
    border-bottom: 16px solid #d78ff5;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gt.around {
    border-radius: 50%;
    background: #91d4fd;
    animation: around 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@-webkit-keyframes around {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }

    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    100% {
        transform: rotateY(3600deg);
    }
}

@keyframes around {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }

    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    100% {
        transform: rotateY(3600deg);
    }
}

.gt.bounceball {
  position: relative;
}
.gt.bounceball:before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left:30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffca36;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: bounce 500ms alternate infinite ease;
          animation: bounce 500ms alternate infinite ease;
}

@-webkit-keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 75px 75px 25px 25px;
    -webkit-transform: scaleX(2);
            transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 75px 75px 25px 25px;
    -webkit-transform: scaleX(2);
            transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

.gt.deform {
  background: #3ade70;
  border-radius: 50%;
  -webkit-animation: deform 2.4s cubic-bezier(0, -0.26, 0.32, 1.22) 0s infinite;
          animation: deform 2.4s cubic-bezier(0, -0.26, 0.32, 1.22) 0s infinite;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

@-webkit-keyframes deform {
  0% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  12.5% {
    border-top-left-radius: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  25% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.5% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  50% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.5% {
    border-top-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  75% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.5% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
  }
  100% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes deform {
  0% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  12.5% {
    border-top-left-radius: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  25% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.5% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  50% {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.5% {
    border-top-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  75% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.5% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 0;
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
  }
  100% {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}