/*
** 原始創作: 中華民國 / 台灣 / 高雄市 / 王裕文 / Tiger老師
**
** Tiger老師是全世界第一個自動架站引擎的發明者
**
** Line ID : hi6vhivv
**
** 電子信箱: hi6vhivv@gmail.com / hi6vhivv@yahoo.com.tw
**
** Tiger老師 / 網業發展研究工作室: https://Tiger.vvv.tw
**
** 服務項目: 專門研發【自動化 / 超速級】架站引擎丶開站平台；從 Web 1.0 開始己經有二十幾年的經歷。
**
** 專業供應:每年至少都會推出一種全新觀念的架站引擎提供給同業採用,歡迎聯絡。
**
** Tiger老師 / 網業發展研究工作室 http://www.tiger.com6.tw
**
** 五元網站｜五省錢超值建站平台: https://www.nt5.tw/
**
**
** 版權所有，本版本日期: 2022-12-12
**
**
** Tiger老師可能是自1999年起第一個專業「賣平台」的個人
**
** 甲傳勝址: Tiger老師為了解決HTTPS安全鎖網址的問題所研究出來的技術= 馬上讓每個網站都具備自己網站的 HTTPS安全鎖網址。
*/

/* 四個方塊 */

.ms-preload {
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #;
    z-index: 50000;
    height: 100%;
    width: 100%
}

.PreLoadNo10 {
  position: relative;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.PreLoadNo10-item {
  width: 50px;
  height: 50px;
  position: absolute;
}

.PreLoadNo10-item-1 {
  background-color: rgb(222,54,43);
  top: 0;
  left: 0;
  z-index: 1;
  animation: PreLoadNo10-item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.PreLoadNo10-item-2 {
  background-color: rgb(252,198,46);
  top: 0;
  right: 0;
  animation: PreLoadNo10-item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.PreLoadNo10-item-3 {
  background-color: rgb(38,151,69);
  bottom: 0;
  right: 0;
  z-index: 1;
  animation: PreLoadNo10-item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.PreLoadNo10-item-4 {
  background-color: rgb(26,115,233);
  bottom: 0;
  left: 0;
  animation: PreLoadNo10-item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes PreLoadNo10-item-1_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(0, 50px)
  }

  50% {
    transform: translate(50px, 50px)
  }

  75% {
    transform: translate(50px, 0)
  }
}

@keyframes PreLoadNo10-item-2_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(-50px, 0)
  }

  50% {
    transform: translate(-50px, 50px)
  }

  75% {
    transform: translate(0, 50px)
  }
}

@keyframes PreLoadNo10-item-3_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(0, -50px)
  }

  50% {
    transform: translate(-50px, -50px)
  }

  75% {
    transform: translate(-50px, 0)
  }
}

@keyframes PreLoadNo10-item-4_move {
  0%, 100% {
    transform: translate(0, 0)
  }

  25% {
    transform: translate(50px, 0)
  }

  50% {
    transform: translate(50px, -50px)
  }

  75% {
    transform: translate(0, -50px)
  }
}