:root {
      --global-bodyBgColor: #06336c;
      --global-headerBgColor: #00ddff;
      --global-neckerBgColor: #79b565;
        --global-menuboxBgColor: #ffff00;
      --global-mainerBgColor: #0049B7;
      --global-footerBgColor: #79b565;
      --global-groupBgColor: #79b565;
      --global-studentBgColor: #0049B7;
      --global-frontBgColor: #DAF7A6;
      --global-backBgColor: #FFFFFF;
    }
    
    html {
      width: 100%;
      height: 100%;
    }
    
    body {
      width: 100%;
      height: 100%;
      margin: 0; padding: 0;
      font-size: 12px;
      //background-color: var(--global-bodyBgColor);
      box-sizing: border-box;
      
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none; /* 标准语法 */
      container-type: size;
      overflow: hidden;
    }
    
    
    /* 流星开始 */
    i {
      position: absolute;
      height: 160px;
      background: linear-gradient(transparent, #fff);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      animation: raining 5s linear Infinite;
    }
    @-moz-keyframes raining {
      0% {
        transform: translateY(-160px);
      }
      100% {
        transform: translateY(calc(100vh + 160px));
      }
    }
    @-webkit-keyframes raining {
      0% {
        transform: translateY(-160px);
      }
      100% {
        transform: translateY(calc(100vh + 160px));
      }
    }
    @-o-keyframes raining {
      0% {
        transform: translateY(-160px);
      }
      100% {
        transform: translateY(calc(100vh + 160px));
      }
    }
    @keyframes raining {
      0% {
        transform: translateY(-160px);
      }
      100% {
        transform: translateY(calc(100vh + 160px));
      }
    }
    
    /* 流星结束 */
    
    #container {
      position: relative;
      margin: 0; padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      //background-image: url(img/wallpaper/wallpaper.webp);
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      //background-color: var(--global-bodyBgColor);
      box-sizing: border-box;
      //background: yellow;
      container-type: size;
      overflow: hidden;
    }
    
    #app-runtime {
      display: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      //top: 50%;
      //left: 50%;
      //transform: translateX(-50%);
      width: 100%; height: 100%;
      background-color: #394f8a;
      z-index: 2;
      margin: 0; padding: 0;
      overflow: hidden;
    }
    
    #class-gallery {
      //display: none;
      position: absolute;
      top: calc(3vw + 3vh); right: 3vw;
      width: 30%; height: 30%;
      background-color: #394f8a;
      z-index: 1;
      margin: 0; padding: 0;
      overflow: hidden;
      border: 1vh solid white;
      box-sizing: border-box;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
    }
    
    #class-seatshow {
      position: absolute;
      top: calc(calc(3vw + 3vh) + 30% + 3vh); right: 3vw;
      width: 30%; height: 30%;
      background-color: #394f8a;
      background-color: #c84d6e;
      background-color: #141e37;
      z-index: 1;
      margin: 0; padding: 0;
      overflow: hidden;
      border: 1px solid white;
      border: 0.5vh solid white;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 0.8vh;
      padding: 1vh;
      box-sizing: border-box;
    }
    
    #moni-clock {
      //display: none;
      position: absolute;
      top: calc(calc(3vw + 3vh) + 30% + 30% + 4vh); right: 3vw;
      //top: 50%;
      //left: 50%;
      //transform: translateX(-50%);
      width: calc(40% + 3vh); height: 8%;
      background-color: #394f8a;
      background-color: transparent;
      z-index: 1;
      margin: 0; padding: 0;
      //overflow: hidden;
      border: 0.5vh solid white;
      //box-shadow: 0.2vh 0.2vh 1vh #333;
      //backdrop-filter: blur(0.5vh);
      box-sizing: border-box;
      container-type: size;
      color: white;
      font-size: 2cqh;
      display: flex;
      justify-content: center;
      align-items: center;
      //border-radius: 50%;
      background: #141E37;
      background: linear-gradient(0deg,rgba(20, 30, 55, 1) 0%, rgba(32, 47, 85, 1) 50%, rgba(20, 30, 55, 1) 100%);
      gap: 2vh;
    }
    
    #class-saying {
      position: absolute;
      top: calc(calc(3vw + 3vh) + 30% + 5vh); right: 3vw;
      width: calc(40% + 3vh); height: auto;
      background-color: #394f8a;
      background-color: #c84d6e;
      //background-color: rgba(50,50,50,0.3);
      //background-color: transparent;
      z-index: 1;
      margin: 0; padding: 0;
      //overflow: hidden;
      padding: 0vh 0vh 0vh 0vh;
      box-sizing: border-box;
      container-type: size;
      font-size: 4cqh;
      font-weight: bold;
      color: white;
      //font-family: 'LiSu';
      
    }
    
    #class-dutyshow {
      position: absolute;
      top: calc(calc(3vw + 2vh) + 5% + 3vh);
      right: calc(30% + 3vw + 3vh);
      //transform: translateX(-50%);
      width: 10%; height: 30%;
      background-color: #394f8a;
      background-color: transparent;
      z-index: 1;
      box-sizing: border-box;
      container-type: size;
      color: white;
      font-size: 1.46cqh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #141E37;
      background: linear-gradient(0deg,rgba(20, 30, 55, 1) 0%, rgba(32, 47, 85, 1) 50%, rgba(20, 30, 55, 1) 100%);
      padding: 1vh;
      border: 1vh solid white;
      box-sizing: border-box;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
    }
    
    #class-dutyshow > div:nth-child(1) {
      height: 100%;
      display: grid;
      grid-template-rows: repeat(12,1fr);
      grid-template-columns: repeat(1,1fr);
    }
    
    #class-dutyshow > div:nth-child(1) > div {
      color: orange;
      font-weight: bold;
      padding: 0 0.8vh 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #class-dutyshow > div:nth-child(2) {
      height: 100%;
      display: grid;
      grid-template-rows: repeat(12,1fr);
      grid-template-columns: repeat(1,1fr);
    }
    
    #class-dutyshow > div:nth-child(3) {
      height: 100%;
      display: grid;
      grid-template-rows: repeat(12,1fr);
      grid-template-columns: repeat(1,1fr);
    }
    
    #class-student {
      position: absolute;
      top: calc(calc(3vw + 4vh) + 30% + 5% + 4vh);
      right: calc(30% + 3vw + 3vh);
      width: 10%; height: 30%;
      background-color: #394f8a;
      background-color: transparent;
      z-index: 1;
      box-sizing: border-box;
      container-type: size;
      color: white;
      font-size: 1.6cqh;
      display: grid;
      grid-template-rows: repeat(12,1fr);
      grid-template-columns: repeat(2,1fr);
      grid-gap: 0.5vh;
      background: #141E37;
      background: linear-gradient(0deg,rgba(20, 30, 55, 1) 0%, rgba(32, 47, 85, 1) 50%, rgba(20, 30, 55, 1) 100%);
      padding: 1vh;
      border: 1vh solid white;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
    }
    
    .student-head {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .student-icon {
      width: 28%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 100%;
      //border-radius: 50%;
      //background-color: orange;
      container-type: size;
      font-size: 8cqw;
      font-style: italic;
      font-weight: bold;
      color: orange;
    }
    
    .student-name {
      width: 72%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      container-type: size;
      font-size: 10cqw;
      padding: 6%;
    }
    
    /* 更新位置 */
    
    #class-gallery {
      top: calc(3vw + 3vh);
      top: calc(calc(3vw + 2vh) + 5% + 3vh);
    }
    
    #class-seatshow {
      top: calc(calc(3vw + 3vh) + 30% + 3vh);
      top: calc(calc(3vw + 4vh) + 30% + 5% + 4vh);
    }
    
    #moni-clock {
      top: calc(calc(3vw + 3vh) + 30% + 30% + 4vh);
      top: calc(3vw + 2vh);
      height: 5%;
    }
    
    #class-saying {
      top: calc(calc(3vw + 3vh) + 30% + 3vh);
      top: calc(calc(3vw + 2vh) + 60% + 5% + 8vh);
    }
    
    /* 更新显示 */
    #class-gallery { visibility: hidden; }
    #class-seatshow { visibility: hidden; }
    #class-dutyshow { visibility: hidden; }
    #class-student { visibility: hidden; }
    #moni-clock { visibility: hidden; }
    #header { visibility: hidden; }
    #footer { visibility: hidden; }
    #max-button { visibility: hidden; }
    
    /* 更新位置 */
    
    .team-box {
      position: relative;
      padding: 0;
      border: 0.5vh solid white;
      //border: 0.4vh solid white;
      width: 100%; height: 100%;
      box-sizing: border-box;
      background: red;
      container-type: size;
      background-size: 100% 100%;
    }
    
    .team-box > img {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    .team-rank {
      position: absolute;
      bottom: 0vh; left: 0vh;
      background-color: rgba(0,0,0,0.4);
      color: white;
      font-size: 20cqh;
      font-size: 10cqw;
      box-sizing: border-box;
      width: auto;
      //height: 30cqh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255,0,0,1);
      color: white;
      font-weight: bold;
      padding: 6cqh;
      padding: 1cqh 3cqh;
    }
    
    .team-name {
      position: absolute;
      bottom: 0vh; right: 0vh;
      background-color: rgba(0,0,0,0.4);
      color: white;
      font-size: 10cqw;
      padding: 1cqh;
      box-sizing: border-box;
    }
    
    #header {
      opacity: 0;
      position: absolute;
      top: 0; left: 0; right: 0;
      width: 100%;
      height: 30px;
      height: 3vh;
      background-color: rgba(64,64,64,0.5);
      container-type: size;
    }
    
    #bodyer {
      margin: 0;
      flex-grow: 1;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: repeat(6,1fr);
      grid-template-columns: repeat(14,1fr);
      grid-auto-flow: column;
      padding: calc(3vw + 3vh) 3vw calc(3vw + 6vh) 3vw;
      grid-gap: 1.5vw;
      box-sizing: border-box;
      //background: red;
      container-type: size;
    }
    
    .shortcut_div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%; height: 100%;
      container-type: size;
      padding: 0.4vw;
      box-sizing: border-box;
      visibility: hidden;
    }
    
    .shortcut_icon {
      width: 3vw; height: 3vw;
      width: 60cqh; height: 60cqh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .shortcut_img {
      display: block;
      width: 100%; height: auto;
      filter: drop-shadow(2px 2px 3px #333);
    }
    
    .shortcut_text {
      color: white;
      text-align: center;
      padding: 10px 0px 0px 0px;
      height: 26px;
      flex-grow: 1;
      filter: drop-shadow(4px 4px 4px #333);
      //background-color: red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .shortcut_text > div {
      font-size: min(0.7vw, 3vh);
      font-size: min(0.8vw, 3.3vh);
      font-weight: bold;
    }
    
    .shortcut_clicked {
      background-color: rgba(57,79,138,0.4);
    }
    
    .shortcut_clicked > .shortcut_text {
      //background-color: rgba(57,79,138,0.5);
      color: white;
    }
    
    #grass-field {
      //opacity: 0;
      position: absolute;
      height: 4vh;
      margin: 0 auto;
      width: 100vw;
      background-image: url(img/grass_field.png);
      background-size: 100% 100%;
      //box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
      bottom: 0vh; left: 0; right: 0;
      //border-radius: 0.5vh;
      //display: flex;
      //flex-direction: row;
      //justify-content: center;
      //align-items: flex-start;
      //column-gap: 1.5vh;
      box-sizing: border-box;
      //padding: 1vh 1.5vh;
    }
    
    #animation-container {
      display: none;
      overflow: hidden;
      position: absolute;
      width: 12vh;
      height: 8vh;
      margin: 0 auto;
      //box-shadow: 0.2vh 0.2vh 1vh #333;
      //backdrop-filter: blur(0.5vh);
      bottom: 0.5vh; left: 0.5vh;
    }
    
    #animation-container img {
      width: 100%; height: 100%;
    }
    
    #max-button {
      position: absolute;
      height: 6vh;
      height: 6vh;
      margin: 0 auto;
      width: 6vh;
      //background-color: rgba(255,255,255,0.4);
      background-image: url("img/bg_max_button.png");
      background-size: contain;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(0.5vh);
      bottom: 0.5vh; right: 0.5vh;
      border-radius: 50%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      column-gap: 1.5vh;
      box-sizing: border-box;
      padding: 1vh 1.5vh;
    }
    
    #footer-submenu {
      display: none;
      position: absolute;
      width: 4vh;
      bottom: 6vh;
      z-index: 2;
    }
    
    #footer-message-content {
      display: none;
      position: absolute;
      bottom: 0; width: 56vh;
      height: 6vh;
      z-index: 2; left: 30vh;
      padding:0.5vh;
      box-sizing: border-box;
      background-color: yellow;
    }
    
    #footer-message {
      opacity: 1;
      position: absolute;
      bottom: 0;
      height: 6vh;
      z-index: 2; left: 30vh;
      //background-color: darkblue;
      //display: grid;
      //grid-template-rows: repeat(10,1fr);
      //grid-template-columns: repeat(2,1fr);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding:0.5vh;
      box-sizing: border-box;
      //border: 1px solid #333;
      gap: 0.5vh;
    }
    
    #footer-message > div {
      //container-type: size;
      font-size: 1.5vh;
      font-weight: bold;
      color: white;
      height: 100%; width: 100%; line-height: 110%;
      background-color: #2ad41c;
      box-sizing: border-box;
      padding: 0 1vh;
      border: 1px solid green;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #footer {
      position: absolute;
      margin: 0 auto;
      width: auto;
      background-color: rgba(255,255,255,0.4);
      //border: 1px solid #666;
      box-shadow: 0.2vh 0.2vh 1vh #333;
      backdrop-filter: blur(6px);
      bottom: 0.5vh;
      border-radius: 0.5vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      column-gap: 1.5vh;
      box-sizing: border-box;
      padding: 1vh 1.5vh;
      z-index: 2;
    }
    
    .button_div {
      width: 4vh; height: 4vh;
    }
    
    .button_img {
      width: 100%; height: auto;
    }
    
    .app-closer {
      position: absolute;
      top: 1vh; right: 1vh; 
      width: 5vh; height: 5vh;
      background-color: white;
      //display: none;
      margin: 0; padding: 0;
      z-index: 2;
      border-radius: 50%;
      background-image: url("./img/button_close.svg");
      background-size: 100% 100%;
    }
    
    .full-div {
      z-index: 99;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
    }
    
    @media screen and (max-width:1280px) {
      #bodyer {
        margin: 0;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(6,1fr);
        grid-template-columns: repeat(6,1fr);
        grid-auto-flow: column;
        padding: calc(2vw + 60px) 2vw calc(5vh + 50px) 2vw;
        grid-gap: 2vw;
        box-sizing: border-box;
        //background: red;
      }
      
      .shortcut_icon {
        width: 50cqh;
        height: 50cqh;
      }
      
      .shortcut_text > div {
        font-size: 2.5vw;
      }
      
    }
    
    .swiper-container {
      width: 100%; height: 100%;
      container-type: size;
      background-color: #141e37;
    }
    
    .swiper-wrapper {
      width: 100cqw; height: 100cqh;
    }
    
    .swiper-slide {
      width: 100cqw; height: 100cqh;
    }
    
    .image-container {
      position: relative;
      width: 100%; height: 100%;
      background-size: cover;
      background-position: center;
    }
    
    .image-container > img {
      display: block;
      width: 100cqw; height: 100cqh;
      object-fit: cover;
    }
    
    .image-container > span.image-text {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      display: block;
      width: 100cqw;
      font-size: 6cqh;
      color: white;
      background-color: rgba(0,0,0,0.5);
      box-sizing: border-box;
      padding: 1cqh 2cqh;
    }
    
    @media screen and (max-width:800px) {
      
      #bodyer {
        margin: 0;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(8,1fr);
        grid-template-columns: repeat(6,1fr);
        grid-auto-flow: column;
        padding: calc(2vw + 60px) 2vw calc(5vh + 50px) 2vw;
        grid-gap: 10vw;
        box-sizing: border-box;
        //background: red;
      }
      
      #header {
        height: 60px;
      }
      
      .shortcut_div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //width: calc(calc(85vw - 82px)/14);
        //height: calc(calc(80vh - 62px)/6);
        width: 80%; height: 80%;
        container-type: size;
        padding: 0.4vw;
        box-sizing: border-box;
      }
      
      .shortcut_icon {
        width: 3vw; height: 3vw;
        width: 60cqh; height: 60cqh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .shortcut_img {
        display: block;
        width: 100%; height: auto;
        filter: drop-shadow(2px 2px 3px #333);
      }
      
      .shortcut_text {
        color: white;
        text-align: center;
        padding: 6px 0px 0px 0px;
        height: 26px;
        flex-grow: 1;
        filter: drop-shadow(4px 4px 4px #333);
        //background-color: red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      .shortcut_text > div {
        font-size: max(1.2vw, 1.2vh);
        font-weight: bold;
      }
      
      #footer {
        height: 6vh;
        
      }
      
      #max-button {
        height: 6vh;
        
      }
      
      .button_div {
        width: 5vh;
        height: 5vh;
      }
    
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-100%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .animate {
      animation: slideDown 0.5s forwards; /* forwards保持动画结束状态 */
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    
    .fade-in {
      animation: fadeIn 0.5s forwards; /* forwards保持动画结束状态 */
    }
    
    .fade-out {
      animation: fadeOut 0.5s forwards; /* forwards保持动画结束状态 */
    }
    
    .flip-horizontal {
      transform: scaleX(-1);
    }
    
    #dog-box {
      width: 100%;
      height: 100%;
    }
    
    #dog-word {
      display: none;
    }
    
    @keyframes bigger {
      from {
        width: 15vh;
        height: 10vh;
      }
      to {
        width: 30vh;
        height: 20vh;
      }
    }
    
    @keyframes smaller {
      from {
        width: 30vh;
        height: 20vh;
      }
      to {
        width: 15vh;
        height: 10vh;
      }
    }
    
    .go-bigger {
      animation: bigger 0.5s forwards;
    }
    
    .go-smaller {
      animation: smaller 0.5s forwards;
    }
    
    /* class_gallery 放大缩小动画 */
    
    @keyframes gallerytofullscreen {
      from {
        z-index: 1;
        width: 30%;
        height: 30%;
        top: calc(calc(3vw + 2vh) + 5% + 3vh);
        right: 3w;
      }
      to {
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
      }
    }
    
    @keyframes gallerytonormal {
      from {
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
      }
      to {
        z-index: 1;
        width: 30%;
        height: 30%;
        top: calc(calc(3vw + 2vh) + 5% + 3vh);
        right: 3w;
      }
    }
    
    .galleryToFullscreen {
      animation: gallerytofullscreen 0.2s forwards;
    }
    
    .galleryToNormal {
      animation: gallerytonormal 0.2s forwards;
    }
    
    /* class_seatshow 放大缩小动画 */
    
    @keyframes seatshowtofullscreen {
      from {
        z-index: 1;
        width: 30%;
        height: 30%;
        top: calc(calc(3vw + 4vh) + 30% + 5% + 4vh);
        right: 3w;
      }
      to {
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
      }
    }
    
    @keyframes seatshowtonormal {
      from {
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
      }
      to {
        z-index: 1;
        width: 30%;
        height: 30%;
        top: calc(calc(3vw + 4vh) + 30% + 5% + 4vh);
        right: 3w;
      }
    }
    
    .seatshowToFullscreen {
      animation: seatshowtofullscreen 0.2s forwards;
    }
    
    .seatshowToNormal {
      animation: seatshowtonormal 0.2s forwards;
    }
    
    #container-background {
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      width:100%;
      height:100%;
      z-index:-2;
      overflow:hidden;
      background-image: url(img/wallpaper/wallpaper.webp);
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    #today-monitor {
      height: 100%; width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #today-student {
      height: 100%; width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #today-datetime {
      height: 100%; width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .hide {
      opacity: 0;
    }
    
    .show {
      opacity: 1;
    }
    
    .setting-item {
      position: absolute;
      width: 4vh;
      height: 4vh;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      padding: 0.5vh;
      background-color: white;
    }
    
    .setting-icon {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    @keyframes menuFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @keyframes menuFadeOut {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    .menu-fade-in {
      animation: menuFadeIn 0.5s forwards; /* forwards保持动画结束状态 */
    }
    
    .menu-fade-out {
      animation: menuFadeOut 0.5s forwards; /* forwards保持动画结束状态 */
    }
    
    .fullscreenvideo {
        margin: 0; padding: 0;
        -webkit-transition: 1s opacity;
        transition: 1s opacity;
        width: 100%;
        height: 100%;
        //object-fit: cover;
        object-fit: fill;
        //object-position: center; /* 保持视频在中央 */
    }
     
    #video-container {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -100; 
    }
     
    #video-container:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
        top: 0;
        left: 0;
        background: rgba(25,29,34,.2);
    }