@import '~antd/es/style/themes/default.less';

.bootPage {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: url("https://panda-water.cn/web4/assets/images/bootPage/背景.jpg") no-repeat top center;
    background-size: cover;
    .bootPageMain {
       display: flex;
       align-items: center;
       flex-direction: column;
       height: 100%;
       width: 100%;
         .bootPageHead {
             height: 150px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #ffffff;
             flex:none;
             padding-top: 50px;
             .bootPageTitle {
                 display: flex;
                 flex-direction: column;
                 margin-left: 20px;
                 .bootPageZh, .bootPageEn {
                     font-weight: 500;
                 }
                 .bootPageZh {
                     font-size: 34px;
                     letter-spacing: 5px;
                 }
                 .bootPageEn {
                     font-size: 16px;
                     font-family: -webkit-body;
                     letter-spacing: 1px;
                 }
             }
         }
         .bootPageSection {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                height: calc(100% - 160px);
                margin: 20px 0;
                overflow: auto;
             &::-webkit-scrollbar {
                 width: 2px;
             }
             .bootPageUl {
                 display: flex;
                 width: 1080px;
                 flex-wrap: wrap;
                 list-style: none;
                 justify-content: center;
                 transition: all .5s ease-out;
                 .bootPageLi {
                     width: 345px;
                     height: 315px;
                     padding: 10px;
                     .bootPageList {
                          width: 100%;
                          height: 100%;
                          background: linear-gradient(to top, rgba(37, 102, 164, 0.35) 0%, rgba(16, 64, 110, 0.35) 100%);
                          border-radius: 4px;
                          transition: all .2s ease-out;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          flex-direction: column;
                          font-size: 24px;
                          cursor: pointer;
                          &:hover {
                              background: linear-gradient(to top, rgba(41, 108, 172, 0.6) 0%, rgba(16, 64, 110, 0.6) 100%);
                              .listMain {
                                   transform: scale(1.1);
                              }  
                          }
                          span {
                               margin-top: 20px;
                               font-weight: 500;
                               color: #fff;
                          }
                          .listMain {
                               transition: all .2s ease-out;
                               display: flex;
                               align-items: center;
                               flex-direction: column;
                          }
                     }
                 }
             }

         }
    }

    .abs {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
   
}


@media screen and (max-width:1440px) {
  .bootPage {
      .bootPageHead {
          .bootPageZh {
              font-size: 26px;
          }
          .bootPageEn {
              font-size: 12px;
          }
      }
  }
}

@media screen and (min-width:1440px) and (max-width:1600px) {
  .bootPage {
      .bootPageHead {
          .bootPageZh {
              font-size: 30px;
          }
          .bootPageEn {
              font-size: 14px;
          }
      }
  }
}