html,
body {
  padding-top: 22px; /* 根据导航窗口高度调整 */
}


.navbox-tiles:after {
  content: '';
  display: table;
  clear: both;
}

/* Core Styles */
.top-bar {
  height: 40px;
  position: fixed; /* 修改为fixed */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.top-bar .navbox {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-200px);
      -ms-transform: translateY(-200px);
          transform: translateY(-200px);
  -webkit-transition: all .2s;
          transition: all .2s;
}
.top-bar .navbox-tiles {
  -webkit-transform: translateY(-200px);
      -ms-transform: translateY(-200px);
          transform: translateY(-200px);
}
/*导航页下拉后左上角背景*/
.top-bar.navbox-open .navbox-trigger {
  background-color: #7EA6ED;
}
.top-bar.navbox-open .navbox {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity .3s, -webkit-transform .3s;
          transition: opacity .3s, transform .3s;
}
.top-bar.navbox-open .navbox-tiles {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.navbox-trigger {
  background-color: transparent;
  width: 35px;
  height: 45px;
  line-height: 40px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
		  border-radius:15px 15px 0 0 ;
}
.navbox-trigger .fa {
  font-size: 20px;
  color: #fff;
}
/*导航页下拉前左上角背景*/
.navbox-trigger:hover {
  background-color: #7EA6ED;
}
/*导航页*/
.navbox {
  background-color: #7EA6ED;
  width: 100%;
  max-width: 380px;
  -webkit-backface-visibility: initial;
          backface-visibility: initial;
		  border-radius: 0 0 20px 20px;
}

.navbox-tiles {
    display: flex;
    flex-wrap: nowrap; /* 确保子元素在一行内 */
    justify-content: space-around; /* 均匀分布元素 */
    padding: 20px;
    gap: 20px; /* 增加元素之间的间距 */
}

.tile-container {
    width: 100px; /* 设置固定宽度 */
    text-align: center;
    position: relative;
}

.tile-container .tile {
    background-color: #fafafa;
    width: 60px; /* 与父容器宽度一致 */
    height: 0;
    padding-bottom: 60px; /* 保持正方形 */
    border-radius: 20px; /* 调整圆角大小 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.tile-container .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute; /* 确保图标在颜色块内居中 */
    top: 0;
    left: 0;
}

.tile-container .icon-container .fa {
    font-size: 35px;
    color: #fff;
}

.tile-container .title {
    display: block;
    font-size: 13px; /* 调整字体大小 */
    color: #fafafa;
    margin-top: 6px; /* 增加与图标的间距 */
    white-space: nowrap;
}
.navbox-tiles .tile:hover {
  border-color: #fff;
  text-decoration: none;
}
.navbox-tiles .tile:not(:nth-child(3n+3)) {
  margin-right: 4.54545454545455%;
}
.navbox-tiles .tile:nth-child(n+4) {
  margin-top: 15px;
}

@media screen and (max-width: 370px) {
  .navbox-tiles .tile .icon .fa {
    font-size: 25px;
  }
  .navbox-tiles .tile .title {
    padding: 3px;
    font-size: 11px;
  }
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(220, 220, 220, 0.5); /* 淡灰色透明，简洁大气 */
  z-index: 999; /* 确保遮罩在导航窗口和头部之下 */
}