/* 全局设置 */
body {
    background-image: linear-gradient(to bottom, #7ebdc2,#a5abf0, #ffe5f0);
    width: 100vw;
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #000000 !important; }
.bg-hero { 
    /* background-color: #45b06cff;  */
    /* height: 40vh; */
}
.vedio-box{
    display: none;
}
 

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }



/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


/* loader */
.loader{
    position: absolute ;
    background-color: wheat;
    width: 100vw;
    height: 190vh;
    margin: 0;
    padding: 0;
    z-index: 9999;
}


/* 自定义类
.main{
    margin-right: 8%;
    margin-left: 4%;
} */
#header-canvas{
    background-image: linear-gradient(to bottom right, rgba(1, 2, 48, 1) ,rgba(5, 36, 78, 1),rgba(5, 36, 78, 1),rgba(1, 2, 48, 1));
}
.none{
    display: none;
}
.up-border{
    border-top: 1px solid black;
}
.zw-0{
  height: 2vh;
}
.zw-1{
    height: 5vh;
}
.zw-2{
    height: 7.5vh;
}
.zw-3{
    height: 10vh;
}

/* 全局特效CSS */
.fadin {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 文章字体 */
.main-text{
    font-size: medium;
}
.Ref{
    font-size: small;
}


/* 加载界面 */
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
.loader {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #281771;
  vertical-align: middle;
  color: #555;
  overflow: hidden;
  text-align: center;
}
.loader::before {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.wrap-all{
  position: absolute;
  top:45%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 36%;
  height: 34%;
  overflow: hidden;
}
.white-mid {
  height: 92%;
  top:50%;
  left: 0.5%;
  transform: translateY(-50%);
  width: 99%;
  position: absolute;
  background-color: rgb(190, 181, 181);
  z-index: 2;
}
.color-back {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(102.7deg, rgb(15, 218, 255) 8.2%, rgb(20, 50, 202) 19.6%, rgb(173, 13, 252) 36.8%, rgb(240, 200, 13) 73.2%, rgb(240, 18, 13) 85.9%);
  height: 92%;
  width: 92%;
  z-index: 1;
}
.image{
  position: absolute;
  height: 102%;
  width: 100%;
  z-index: 99;
}
.image img{
  width:100%;
  height: 100%;
  z-index: 99;
}
.word-load{
  position: absolute;
  top:55%;
  z-index: 200;
  color: white;
  font-size: 40px;
  width: 100%;
}
.word-load .ele{
  display: inline-block;
}
.word-load :nth-child(2) {animation-duration: 2s;}
.word-load :nth-child(3) {animation-duration: 2s;}
.word-load :nth-child(4) {animation-duration: 2s;}


p{
  font-family: "STXIHEI";
}