/* rem的换算规则 */
/* 
以 16px 为基准，1rem = 16px
用375px的设计稿做参照，比如375px设计稿上宽度是375px，那么375px/16px= 23.4375rem
*/

@keyframes rotate360 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#t_loader {
  font-family: 'Mildy';
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
}
#t_loader .u-main-wrap {
  position: relative;
  z-index: 2;
  max-width: 450px;
  width: 23.4375rem;
  height: 100%;
  margin: 0 auto;
}
#t_loader .u-main-wrap:after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 23.4375rem;
  height: 13.75rem;
  margin: 0 auto;
  z-index: 1;
}

/* 两侧护翼 */
@media screen and (min-width: 450px) {
  #t_loader:before,
  #t_loader:after {
    position: fixed;
    top: 0;
    bottom: 0;
    background: url('./images/bg-pattern-side.webp') no-repeat 0 / 100% 100% !important;
    width: 60rem;
    height: 60rem;
    z-index: 1;
  }
  #t_loader:before {
    left: 0;
    transform: translateX(-65%);
  }
  #t_loader:after {
    left: auto;
    right: 0;
    transform: translateX(60%);
  }
}

#t_loader .u-loading {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  display: flex;
  align-items: center;
  font-size: 14px;
  z-index: 2;
}

#t_loader .u-loading .u-svg-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  animation: rotate360 1s infinite linear;
}

#t_loader .u-bg-main-video {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: 450px;
  margin: 0 auto;
  object-fit: cover;
}

#t_loader .u-bg .u-img-bg {
  display: none;
}
#t_loader .u-bg .u-img-logo {
  display: none;
}

.g-dark #t_loader .u-bg .u-img-bg.s-dark {
  display: block;
}
.g-light #t_loader .u-bg .u-img-bg.s-light {
  display: block;
}
.g-dark #t_loader .u-bg .u-img-logo.s-dark {
  display: block;
}
.g-light #t_loader .u-bg .u-img-logo.s-light {
  display: block;
}

/* 有视频的时候，不显示底部花纹波浪背景 */
#t_loader.s-has-video .u-main-wrap:after {
  opacity: 0;
}
#t_loader.s-has-video .u-img-bg {
  opacity: 0;
}
#t_loader.s-has-video .u-bg .u-img-logo {
  opacity: 0;
}
.g-dark #t_loader.s-has-video .u-loading,
.g-light #t_loader.s-has-video .u-loading,
#t_loader.s-has-video .u-loading {
  color: #fff;
}