* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .page_view {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0 auto; 
      max-width: 430px;  
      background: url('../image/img_head.png') no-repeat, url('../image/img_bg.png') no-repeat;
      background-size: auto 2.8rem, cover;
      background-position: top center, center;
      background-repeat: no-repeat;
      transition: background 0.5s ease;
      box-sizing: border-box;
    }
    .content_nav {
      position: fixed;
      width: 100%;
      max-width: 430px;
      box-sizing: border-box;    
      top: calc(60vh - 11.5rem);
      transform: translateY(-50%);
    }
    .welcome_text {
      background:  url('../image/img_middle.png') no-repeat;
      height: 4.1rem;
      width: 100%;
      background-size: contain;
      position: relative;
      top: 16rem;
    }
    .btn_nav {
      position: relative;
      display: flex;
      flex-direction: column;
      /* height: 4rem; */
      height: 0;
      padding: 0 10px;
      gap: 0.6rem;
      width: 100%;
      margin-top: calc(6vh + 13rem);
      box-sizing: border-box;
    }
    .item_btn {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }
    .label_menu {
      flex: 3 0 0;
      background: linear-gradient(180deg, #FFF 0%, #E7EDFD 100%);
      color: #36476C;
      font-size: 0.8rem;
      font-weight: 500;
      border-radius: 7px;
      display: flex;
      align-items: center;
      padding: 0 15px 0;
      box-shadow: 0 1px 1px 0 #B5DCFF;
      position: relative;
    }
    .item_btn a {
      flex: 1.5 0 0;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border-radius: 7px;
      box-shadow: 1px -1px 11px 0 rgba(255, 255, 255, 0.40) inset, -1px -1px 11px 0 rgba(255, 255, 255, 0.40) inset, 0 1px 0px 0 #0096FF;
      background: linear-gradient(0deg, #47B1FF -9.9%, #0096FF 59.21%, #73D0FF 109.9%), linear-gradient(270deg, #67CFFF 0%, #21A1FF 86.57%), linear-gradient(270deg, #FFF 0%, #E7EDFD 86.57%);
    }
    .label_menu img {
      width: 1.6rem;
      height: 1.8rem;
    }
    .item_btn:nth-child(1) .label_menu::after {
      content: '';
      position: absolute;
      right: -1.3px;
      top: -2px;
      width: 2.05rem;
      height: 1.9rem;
      background: url("../image/icon_dot_new.png");
      background-size: cover;
    }
    /* .item_btn:nth-child(2) .label_menu::after {
      content: '';
      position: absolute;
      right: -1.3px;
      top: -2px;
      width: 2.05rem;
      height: 1.9rem;
      background: url("../image/icon_dot_old.png");
      background-size: cover;
    } */
    .lile_btn {
      position: relative;
      top: 85px;
      margin-top: 0;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
    }
    .lile_btn .btn {
      display: flex;
      flex-direction: column;
      border-radius: 7px;
      width: 50%;
      padding: 0.3rem 10px;
      align-items: center;
      color: #fff;
      text-decoration: none;
      box-shadow: 1px -1px 11px 0 rgba(255, 255, 255, 0.40) inset, -1px -1px 11px 0 rgba(255, 255, 255, 0.40) inset, 0 1px 0px 0 #0096FF;
      background: linear-gradient(0deg, #47B1FF -9.9%, #0096FF 59.21%, #73D0FF 109.9%), linear-gradient(270deg, #67CFFF 0%, #21A1FF 86.57%), linear-gradient(270deg, #FFF 0%, #E7EDFD 86.57%);
    }
    .lile_btn .btn img {
      width: auto;
      height: 16px;
    }
    .lile_btn .btn .btn_text {
      font-weight: 800;
      font-size: 14px;
      text-shadow: 0 4px 3px #1E83FF;
    }
    .merito_nav {
      position: relative;
      top: 90px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 10px;
      color: #fff;
    }
    .merito_nav .merito_text {
      background: linear-gradient(180deg, #D3E1FF 0%, #FFF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .game_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 9px;
      gap: 3px;
    } 
    .game_item span {
      background: linear-gradient(180deg, #D3E1FF 0%, #FFF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .merito_nav img {
      width: 45.429px;
      height: 1.8rem;
    }
    .bottom_tips {
      background: url("../image/icon_tips.png");
      background-size: contain;
      width: 100%;
      position: relative;
      top: 100px;
      color: #fff;
      text-align: center;
      height: 1.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bottom_tips img {
      height: 15px;
      width: auto;
    }
    .bottom_text {
      position: relative;
      top: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bottom_text img {
      height: 1.2rem;
      width: auto;
    }
    @media (max-width: 430px) {
    .page_view {
      width: 100vw;
    }
  }