.bg{
    animation:myfirst 1s;
      -webkit-animation:myfirst 1s;
  }
  .gameTitle{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .hero{
      position: absolute;
      width: 100%;
      top: 135px;
      left: 0;
      animation:myfirst 2s;
        -webkit-animation:myfirst 2s;
    }
    .infomation{
      position: absolute;
      bottom: 150px;
      left: 50%;
      text-align: center;
      margin-left:-184px;
      animation:myfirst 2s;
        -webkit-animation:myfirst 2s;
      z-index: 100;
    }
    .shareget_information{
      margin-left: -96px;
      bottom: 190px;
    }
    .invite_infomation{
      bottom: 10px;
    }
    .shade{
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .introduce{
      position: absolute;
      bottom: 45px;
      color: rgb(255, 254, 253);
      font-family: 'Microsoft JhengHei';
      font-size: 30px;
      box-sizing: border-box;
      padding: 0 10px;
      line-height: 35px;
      text-align: left;
      animation:myfirst 2.5s;
        -webkit-animation:myfirst 2.5s;
    }
    .invite_introduce{
      bottom: 120px;
    }
    .shareget_introduce{
      bottom: 20px;
      width: 100%;
    }
    .shareget_introduce p{
      text-align: center;
      padding: 2px 10px;
    }
    .shareget_introduce .name, .shareget_introduce .level{
      color: rgb(255, 252, 184)
    }
     .username{
      position: absolute;
      font-family: 'Microsoft JhengHei';
      color: rgb(255, 254, 253);
      font-size: 22px;
      left: 50%;
      top: 10px;
      margin-left: -30px;
      text-shadow:2px 2px 0px #000;
    }
     .server{
      position: absolute;
      font-family: 'Microsoft JhengHei';
      color: rgb(255, 254, 253);
      font-size: 22px;
      left: 50%;
      top: 50px;
      margin-left: -30px;
      text-shadow:2px 2px 0px #000;
    }
    .codes{
      position: absolute;
      display: block;
      width: 440px;
      height: 50px;
      text-align: center;
      font-family: 'Microsoft JhengHei';
      color: rgb(255, 254, 253);
      font-size: 28px;
      left: 153px;
      top: 1045px;
      line-height: 50px;
      text-shadow:2px 2px 0px #000;
    }
    .download{
      cursor: pointer;
    }
    .scaler{
      top: 230px;
    }
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1000;
    }
    .main{
      width: 750px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top:280px;
    }
    .btnGroup{
      width: 85%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }


    @keyframes myfirst
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }