@font-face {
  font-family: "iconfont";
  src: url('https://at.alicdn.com/t/c/font_179247_uja3277echo.woff2?t=1691497434739') format('woff2'),
       url('https://at.alicdn.com/t/c/font_179247_uja3277echo.woff?t=1691497434739') format('woff'),
       url('https://at.alicdn.com/t/c/font_179247_uja3277echo.ttf?t=1691497434739') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouye1:before {
  content: "\e750";
}

.icon-fabu:before {
  content: "\e66f";
}

.icon-wode:before {
  content: "\e656";
}

.icon-zixun:before {
  content: "\e60b";
}

.icon-xiaoxi:before {
  content: "\e614";
}

.icon-xinxi:before {
  content: "\e627";
}

.icon-jiantou:before {
  content: "\e61d";
}

.icon-xueye:before {
  content: "\e613";
}

.icon-cuoti:before {
  content: "\e600";
}

.icon-beikao:before {
  content: "\e601";
}

.icon-109meiyuekaoshi:before {
  content: "\e672";
}

.icon-danyuanceshi-fill:before {
  content: "\e60c";
}

.icon-guoneibeikao:before {
  content: "\e60e";
}

.icon-zhishixuexi:before {
  content: "\e606";
}

.icon-tubiaoquxian:before {
  content: "\e746";
}

.icon-icon50:before {
  content: "\e643";
}

.icon-tongzhi:before {
  content: "\e63c";
}

.icon-chengjiguanli:before {
  content: "\e64b";
}

.icon-zuo:before {
  content: "\e628";
}

.icon-shezhi:before {
  content: "\e612";
}

.icon-xue:before {
  content: "\e621";
}

.icon-shouye:before {
  content: "\e632";
}

.nav{
            width: 375px;
            height: 70px;
            padding: 0 15px;
            border-radius: 5px;
            background-color: #fff;
            position: relative;
            display: flex;
            z-index: 1000;
        }
        .nav dd{
            width: 70px;
            height: 70px;
            position: relative;
            list-style: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .nav dd i{
            display: block;
            position: relative;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 24px;
            transition: all 0.5s;
        }
        .nav dd span{
            position:absolute;
            font-size: 12px;
            letter-spacing: 2px;
            transition: all 0.5s;
            opacity: 0;
            transform: translateY(20px);
        }
        .nav dd.on i{
            transform: translateY(-35px);
            color: #ffffff;
        }
        .nav dd.on span{
            opacity: 1;
            transform: translateY(10px);
        }
        .indicator{
            position:absolute;
            top: -50%;
            width: 70px;
            height: 70px;
            background-color: #ff6a00;
            border-radius: 50%;
            transition: all 0.5s;
            border: 6px solid #333333;
        }
        
        .indicator::before{
            content: '';
            position: absolute;
            top: 50%;
            left: -23px;
            width: 21px;
            height: 21px;
            border-top-right-radius: 20px;
            box-shadow: 1px -10px 0 0 #333333;
        }
        .indicator::after{
            content: '';
            position: absolute;
            top: 50%;
            right: -23px;
            width: 21px;
            height: 21px;
            border-top-left-radius: 20px;
            box-shadow: -1px -10px 0 0 #333333;
        }
        dd:nth-child(1).on~.indicator{
            transform: translateX(calc(70px * 0));
        }
        dd:nth-child(2).on~.indicator{
            transform: translateX(calc(70px * 1));
        }
        dd:nth-child(3).on~.indicator{
            transform: translateX(calc(70px * 2));
        }
        dd:nth-child(4).on~.indicator{
            transform: translateX(calc(70px * 3));
        }
        dd:nth-child(5).on~.indicator{
            transform: translateX(calc(70px * 4));
        }
		
		* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            /*background-color: black;*/
            min-height: 100vh;
			overscroll-behavior: none;
        }

        
		.nav{
            width: 100%;
            height: 7.5%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
						padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧 iOS */
            padding-bottom: env(safe-area-inset-bottom);      /* 标准写法 */
        }
        .nav dd{
            width: 33.333%;
            height: 70px;
            position: relative;
            list-style: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .nav dd i{
            display: block;
            position: relative;
            height: 70px;
            line-height: 43px;
            text-align: center;
            font-size: 24px;
            transition: all 0.5s;
			color: #ff6a00;
        }
        .nav dd span{
            position:absolute;
            font-size: 12px;
            letter-spacing: 2px;
            transition: all 0.5s;
            opacity: 0;
            transform: translateY(20px);
        }
        .nav dd.on i{
            transform: translateY(-25px);
            color: #ffffff;
        }
        .nav dd.on span{
            opacity: 1;
            transform: translateY(1px);
        }
        .indicator{
            position:absolute;
            top: -50%;
            left: 16.666%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: #ff6a00;
            border-radius: 50%;
            transition: all 0.5s;
            border: 6px solid #f5f5f5;
        }
        
        .indicator::before{
            content: '';
            position: absolute;
            top: 50%;
            left: -23px;
            width: 21px;
            height: 0px;
            border-top-right-radius: 20px;
            box-shadow: 1px -10px 0 0 #f5f5f5;
        }
        
        .indicator::after{
            content: '';
            position: absolute;
            top: 50%;
            right: -23px;
            width: 21px;
            height: 0px;
            border-top-left-radius: 20px;
            box-shadow: -1px -10px 0 0 #f5f5f5;
        }
        
        /* 为每个按钮定义凹陷效果的位置 */
        .nav dd:nth-child(1).on ~ .indicator {
            left: 0%;
            transform: translateX(-50%);
        }
        
        .nav dd:nth-child(2).on ~ .indicator {
            left: 0%;
            transform: translateX(-50%);
        }
        
        .nav dd:nth-child(3).on ~ .indicator {
            left: 0%;
            transform: translateX(-50%);
        }
		  /* 去掉a标签默认样式 */
  dd a {
    text-decoration: none; /* 去掉下划线 */
    color: inherit;        /* 继承父级颜色，不改变原有字体色 */
    cursor: pointer;       /* 鼠标悬浮变成小手 */
  }