@media (max-width: 820px) {
  :root {
    --hsj-mobile-head-height: 13.333333vw;
    --hsj-mobile-tabbar-height: 13.866667vw;
    --hsj-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body {
    padding-bottom: calc(var(--hsj-mobile-tabbar-height) + var(--hsj-mobile-safe-bottom)) !important;
  }

  .mobile-head .mobile-iyf-nav {
    align-items: center !important;
    background: #101012 !important;
    box-sizing: border-box !important;
    display: flex !important;
    gap: 0 !important;
    height: var(--hsj-mobile-head-height) !important;
    max-height: 56px !important;
    min-height: 50px !important;
    overflow: hidden !important;
    padding: 0 0 0 1.6vw !important;
    width: 100% !important;
  }

  .mobile-head .mobile-iyf-logo {
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 12.8vw !important;
    justify-content: center !important;
    max-width: 54px !important;
    min-width: 46px !important;
    overflow: hidden !important;
  }

  .mobile-head .mobile-iyf-logo .mac-logo,
  .mobile-head .mobile-iyf-logo .head_logo,
  .mobile-head .mobile-iyf-logo a.white_logo {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .mobile-head .mobile-iyf-logo a.black_logo {
    display: none !important;
  }

  .mobile-head .mobile-iyf-logo img,
  .mobile-head .mobile-iyf-logo .mac-logo-lottie {
    display: block !important;
    height: 8.8vw !important;
    max-height: 38px !important;
    max-width: 46px !important;
    object-fit: contain !important;
    transform: none !important;
    width: 10.666667vw !important;
  }

  .mobile-head .mobile-iyf-tabs {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-head .mobile-iyf-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-head .mobile-iyf-tab {
    align-items: center !important;
    color: #969699 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 4.8vw !important;
    font-weight: 400 !important;
    height: 100% !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 3.2vw !important;
    position: relative !important;
  }

  .mobile-head .mobile-iyf-tab.active {
    color: #e3e3e5 !important;
    font-size: 4.8vw !important;
    font-weight: 600 !important;
  }

  .mobile-head .mobile-iyf-tab.active::after {
    background: linear-gradient(315deg, #00e0ff, #00b8ff) !important;
    border-radius: 999px !important;
    bottom: 2.533333vw !important;
    content: "" !important;
    height: .533333vw !important;
    left: 50% !important;
    position: absolute !important;
    transform: translateX(-50%) !important;
    width: 3.2vw !important;
  }

  .mobile-head .mobile-iyf-actions {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    justify-content: flex-end !important;
    padding-right: 1.6vw !important;
  }

  .mobile-head .mobile-iyf-action,
  .mobile-head .mobile-iyf-more-btn {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #e3e3e5 !important;
    display: flex !important;
    height: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 2.4vw !important;
    width: 10.666667vw !important;
  }

  .mobile-head .mobile-iyf-action-img,
  .mobile-head .mobile-iyf-more-btn .iconfont {
    color: #e3e3e5 !important;
    display: block !important;
    font-size: 7.2vw !important;
    height: 6.4vw !important;
    line-height: 6.4vw !important;
    max-height: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
    width: 6.4vw !important;
  }

  .mobile-head .mobile-iyf-dropdown {
    right: 2.666667vw !important;
    top: calc(100% + 1.6vw) !important;
  }

  .foot.foot_nav {
    padding: 0 !important;
  }

  #bottomNav {
    align-items: stretch !important;
    background: #25252c !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: calc(var(--hsj-mobile-tabbar-height) + var(--hsj-mobile-safe-bottom)) !important;
    left: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    padding: 0 0 var(--hsj-mobile-safe-bottom) !important;
    position: fixed !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 10000 !important;
  }

  #bottomNav .bottom-nav-item {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #969699 !important;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    font-weight: 400 !important;
    gap: .8vw !important;
    height: var(--hsj-mobile-tabbar-height) !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 1.333333vw 0 1.066667vw !important;
    transform: none !important;
  }

  #bottomNav .bottom-nav-item.active {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #e3e3e5 !important;
  }

  #bottomNav .bottom-nav-icon {
    display: none !important;
    height: 6.4vw !important;
    max-height: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
    width: 6.4vw !important;
  }

  #bottomNav .bottom-nav-icon.nor.dark {
    display: block !important;
  }

  #bottomNav .bottom-nav-item.active .bottom-nav-icon {
    display: none !important;
  }

  #bottomNav .bottom-nav-item.active .bottom-nav-icon.sel.dark {
    display: block !important;
  }

  #bottomNav .bottom-nav-text {
    color: currentColor !important;
    display: block !important;
    font-size: 2.933333vw !important;
    font-weight: 400 !important;
    height: 2.933333vw !important;
    letter-spacing: 0 !important;
    line-height: 2.933333vw !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #bottomNav .bottom-nav-item.active .bottom-nav-text {
    color: #e3e3e5 !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 360px) {
  .mobile-head .mobile-iyf-tab {
    padding-left: 2.4vw !important;
    padding-right: 2.4vw !important;
  }
}

@media (max-width: 820px) {
  .mobile-head .mobile-iyf-more {
    position: relative !important;
  }

  .mobile-head .mobile-iyf-more-btn {
    cursor: pointer !important;
    outline: none !important;
  }

  .mobile-head .mobile-iyf-more.is-open .mobile-iyf-dropdown {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
}

@media (max-width: 820px) {
  .head_box.show-mobile.mobile-head,
  .mobile-head,
  .mobile-head .mobile-iyf-nav,
  .mobile-head .mobile-iyf-actions,
  .mobile-head .mobile-iyf-more {
    overflow: visible !important;
  }

  .mobile-head .mobile-iyf-more {
    z-index: 10040 !important;
  }

  .mobile-head .mobile-iyf-dropdown {
    background: #25252c !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 2.133333vw !important;
    box-shadow: 0 3.2vw 8vw rgba(0,0,0,.45) !important;
    min-width: 26.666667vw !important;
    padding: 1.333333vw 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 1.6vw) !important;
    z-index: 10050 !important;
  }

  .mobile-head .mobile-iyf-drop-link {
    color: #e3e3e5 !important;
    display: block !important;
    font-size: 3.733333vw !important;
    line-height: 5.333333vw !important;
    padding: 2.133333vw 4vw !important;
    white-space: nowrap !important;
  }

  .member-wrap.member-wrap-bg #member > #left > .m-nav,
  .member-wrap.member-wrap-bg #member > #right > .m-nav {
    display: none !important;
  }

  body:not(#uindex) .member-wrap.member-wrap-bg #member > #left {
    display: none !important;
  }

  body:not(#uindex) .member-wrap.member-wrap-bg #member,
  body:not(#uindex) .member-wrap.member-wrap-bg #member > #right {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  #topnav .head_box.show-mobile.mobile-head {
    background: #101012 !important;
    box-shadow: none !important;
    display: block !important;
    height: var(--hsj-mobile-head-height) !important;
    left: auto !important;
    min-height: 50px !important;
    overflow: hidden !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    z-index: 10020 !important;
  }

  #topnav .mobile-head .mobile-iyf-nav.header {
    align-items: center !important;
    background: #101012 !important;
    box-sizing: border-box !important;
    clear: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    height: var(--hsj-mobile-head-height) !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    max-height: 56px !important;
    max-width: none !important;
    min-height: 50px !important;
    overflow: hidden !important;
    padding: 0 0 0 1.6vw !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  #topnav .mobile-head .mobile-iyf-logo,
  #topnav .mobile-head .mobile-iyf-tabs,
  #topnav .mobile-head .mobile-iyf-actions,
  #topnav .mobile-head .mobile-iyf-more {
    position: static !important;
    transform: none !important;
  }

  #topnav .mobile-head .mobile-iyf-tabs {
    flex: 1 1 auto !important;
    margin: 0 !important;
    width: auto !important;
  }

  #topnav .mobile-head .mobile-iyf-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  #topnav .mobile-head .mobile-iyf-dropdown {
    position: absolute !important;
  }
}