* {padding: 0;margin: 0;}
html,body{height: 100%;width: 100%;position: relative;overflow: hidden;}
/* 未登录 */
.loading-box{display: none;background: url('/jz.jpg') no-repeat;background-size: cover;width: 100%;height: 100%; position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: 99999999;}
.loading-center-absolute{position: absolute;left: 50%;top: 50%;height: 50px;width: 50px;margin-top: -25px;margin-left: -25px;transform: rotate(45deg);animation: loading-center-absolute 1.5s infinite;}
.object{width: 25px;height: 25px;background-color: #FFF;float: left;}
.object_one{animation: object_one 1.5s infinite;}
.object_two{animation: object_two 1.5s infinite;}
.object_three{animation: object_three 1.5s infinite;}
.object_four{animation: object_four 1.5s infinite;}
@keyframes loading-center-absolute{100%{transform: rotate(-45deg)}}
@keyframes object_one{25%{transform: translate(0, -50px) rotate(-180deg)}100% {transform: translate(0, 0) rotate(-180deg)}}
@keyframes object_two {25%{transform: translate(50px, 0) rotate(-180deg)}100%{transform: translate(0, 0) rotate(-180deg)}}
@keyframes object_three {25% {transform: translate(-50px, 0) rotate(-180deg)}100% {transform: translate(0, 0) rotate(-180deg)}}
@keyframes object_four {25% {transform: translate(0, 50px) rotate(-180deg)}100% {transform: translate(0, 0) rotate(-180deg)}}
/* 已登录 */
.loading-main {overflow: hidden;background-color: #c4c4c4;display: none;flex: 1 1 auto;flex-direction: column;width: 100%;height: 100%;position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: 99999999;}
.loading-main .top {height: 98px;background: #16151A;display: flex;align-items: center;}
.loading-main .top .left {height: 100%;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.loading-main .top .left .ssc-square.one {display: block;background-color: rgba(0, 0, 0, 0.17);position: relative;overflow: hidden;border-radius: 5px;margin-bottom: 5px;}
.loading-main .top .right {height: 100%;display: flex;justify-content: space-between;flex-direction: column;}
.loading-main .top .right .top {height: 60px;display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 0 30px 0 3px;}
.loading-main .top .right .top .same {display: flex;align-items: center;height: 100%;}
.loading-main .top .right .top .same .ssc-square {background-color: rgba(0, 0, 0, 0.17);position: relative;overflow: hidden;border-radius: 5px;}
.loading-main .top .right .top .l .ssc-square.one {height: 22px;width: 22px;}
.loading-main .top .right .top .l .ssc-square.two {height: 22px;width: 22px;margin-left: 20px;}
.loading-main .top .right .top .l .ssc-square.three {height: 20px;width: 213px;margin-left: 20px;}
.loading-main .top .right .top .r .ssc-square.one {height: 22px;width: 22px;margin-right: 15px;}
.loading-main .top .right .top .r .ssc-square.two {height: 22px;width: 22px;margin-right: 15px;}
.loading-main .top .right .top .r .ssc-square.three {height: 22px;width: 22px;margin-right: 15px;}
.loading-main .top .right .top .r .ssc-square.four {height: 22px;width: 22px;margin-right: 15px;}
.loading-main .top .right .top .r .ssc-square.five {height: 32px;width: 125px;}
.loading-main .top .right .bt {display: flex;height: calc(100% - 60px);align-items: center;width: 100%;}
.loading-main .top .right .bt .ssc-square {background-color: rgba(0, 0, 0, 0.17);position: relative;overflow: hidden;height: 100%;}
.loading-main .top .right .bt .ssc-square.o {width: 30px;}
.loading-main .top .right .bt .ssc-square.t {width: calc(100% - 80px); height: 80%;border-radius: 5px;margin-left: 10px;}
.loading-main .top .right .bt .ssc-square.f {width: 30px;}
.loading-main .bottom {flex: 1;display: flex;height: calc(100% - 98px);}
.loading-main .bottom .left {background: #16151A;display: flex;align-items: center;flex-direction: column;}
.loading-main .bottom .right {flex: 1;position: relative;overflow: hidden;}
.loading-main .bottom .left .ssc-square {border-radius: 5px;height: 34px;width: 80%;margin-bottom: 20px;display: block;background-color: rgba(0, 0, 0, 0.17);position: relative;overflow: hidden;}
.ssc-square::after, .loading-main .bottom .right::after {content: "";-webkit-animation: ssc-loading 1.3s infinite;animation: ssc-loading 1.3s infinite;height: 100%;left: 0;right: 0;top: 0;position: absolute;-webkit-transform: translateX(-100%);transform: translateX(-100%);z-index: 1;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);}
@-webkit-keyframes ssc-loading {from {-webkit-transform: translateX(-100%);transform: translateX(-100%);}to {-webkit-transform: translateX(100%);transform: translateX(100%);}}
@keyframes ssc-loading {from {-webkit-transform: translateX(-100%);transform: translateX(-100%);}to {-webkit-transform: translateX(100%);transform: translateX(100%);}}

@media only screen and (max-width: 770px) {
  .loading-main .top .right .top .l .ssc-square.three {
      display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .loading-main .bottom .left, .loading-main .top .left {
    width: 64px;
  }
  .loading-main .top .right {
    width: calc(100% - 64px);
  }
  .loading-main .top .left .ssc-square.two {
    display: none;
  }
  .loading-main .top .left .ssc-square.one {
    height: 20px;
    width: 44px;
  }
}
@media only screen and (min-width: 1025px) {
  .loading-main .bottom .left, .loading-main .top .left {
    width: 200px;
  }
  .loading-main .top .right {
    width: calc(100% - 200px);
  }
  .loading-main .top .left .ssc-square.one {
    height: 20px;
    width: 140px;
  }
}