*{
        padding: 0;
        margin: 0;
        scrollbar-width: none;/* 兼容火狐浏览器滚动条 */
        
       }
       :root{
        --theme:#317ef3;
       }
       .light-theme{
        --bg:#fff;
        --bg-hover:#e5e5e5;
        --text:#333;
        --border:#ccc;
        --btn-hover:rgba(0,0,0,.1);
       }
       .dark-theme{
        --bg:#282a2d;
        --bg-hover:#40464e;
        --text:#fff;
        --border:#333;
        --btn-hover:rgba(255,255,255,.05);
       }
       .light-theme #toggle-theme-button>.fa-sun-o{
        display: block!important;
       }
       .dark-theme #toggle-theme-button>.fa-moon-o{
        transform: scaleX(-1)!important;
        display: block!important;
       }
       body,div,ul,input,.main li,.main a{
        transition:  background-color .3s,color .3s;
       }
       li{
        list-style: none;
       }
       a{
        text-decoration: none;
        color: var(--text);
       }
       a:hover{
        color: var(--theme);
       }
       body{
        position: relative;
        /* position: absolute; */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow-x: auto;
        /* overflow-y: hidden; */
        background-position:center;
        background-size: cover;
        background-attachment:fixed;
        background-repeat: no-repeat;
        /* transition: background-image 0.3s ease; */
        z-index: -99;
        transition: all 1s ease;
       }
       ::-webkit-scrollbar{
        width: 0px;
        height: 0px;
       }
       ::-webkit-scrollbar-thumb{
        border-radius: 10px;
        background-color:  var(--theme);
       }


       body .bdSug_wpr,body .bdSug_wpr table{
        position: absolute;
        z-index: 999;
        width: 100%;
        margin: 3px 0!important;
        border-radius: 10px;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        background-color: var(--bg);
        color: var(--text);
       }
       body .bdSug_wpr td:hover{
        background-color: var(--bg-hover);
        color: var(--text);

       }
       body .bdSug_wpr tr,body .bdSug_wpr td{
        cursor: pointer;
        position: relative;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        font-size: 18px!important;
        /* font-weight: 600!important; */
        padding: 3px;
        padding-left: 40px;
        box-sizing: border-box;
        border-radius: 10px;
        
       } 
       .bdsug_copy{
        display:none;
        }


       .nav{
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.12));
            z-index: 1;
        }
        .logo{
            /* float: left; */
            display: inline-block;
        }
        .logoimg{
            float: left;
            margin:2px 5px;
            width: 42px;
        }
        .logoimg img{
            width: 40px;
            padding: 2px;
        }
        /* .logo span{
            display: inline-block;
            font-size: 24px;
            color: #fff;
            line-height: 50px;
            font-weight: 400;
        } */
        .logoname{
            height: 36px;
            margin: 7px 0;
        }
        /* 时间 */
        #timeDisplay {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-content: center;
            font-size: 2em;
            color: #fff;
            z-index: -1;
        }
        #toggle-theme-button{
            position: absolute;
            top: 0;
            right: 300px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            font-size: 2em;
            color: orange;
        }
        #toggle-theme-button:hover{
            background-color: rgba(0,0,0,.2);
        }

        .switch-container {
            cursor: pointer;
            /* display: flex; */
            padding-top: 13px;
            /* justify-content: center; */
            /* align-content: center; */
            position: absolute;
            top: 0;
            right: 10px;
            display: inline-block;
            width: 140px;
            height: 50px;
            box-sizing: border-box;
            /* background-color: skyblue; */
        }
        
        .switch {
            /* position: absolute; */
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .switch-label {
            display: inline-block;
            cursor: pointer;
            width: 65px;
            height: 25px;
            /* background-color: #4caf50; */
            background-color:  var(--theme);
            border-radius: 12.5px;
            transition: background-color 0.3s ease;
            position: relative;
            vertical-align: middle;
        }
        
        .switch-label::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 42px;
            width: 21px; /* 稍微调整宽度以匹配iOS风格 */
            height: 21px; /* 稍微调整高度以匹配iOS风格 */
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影以增强立体感 */
            transition: transform 0.3s ease;
        }
        
        .switch:checked + .switch-label {
            background-color: #ccc;
        }
        
        .switch:checked + .switch-label::after {
            transform: translateX(-39px); /* 根据宽度调整位移 */
        }

        .help{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 360px;
            width: 48px;
            height: 50px;
            font-size: 38px;
            /* background-color: skyblue; */
            /* text-align: center; */
            /* border-radius: 50%; */
            color: #fff;
        }
        .help:hover{
            background-color: rgba(0,0,0,.2);
            /* color: #fff; */

        }
           /* 背景设置模块 */
           .bgimg-mod{
            float: right;
            /* margin-top: 80px; */
            margin-right: 240px;
            padding-top: 10px;
            width: 48px;
            height: 50px;
            /* position: absolute; */
            /* top: 0; */
            /* right: 150px; */
            cursor: pointer;
            /* background-color: skyblue; */
            text-align: center;
            box-sizing: border-box;
            /* border-radius: 50%; */

           }
           .bgimg-mod .fa{
            font-size: 32px; 
            color: #fff;
           }
           .bgimg-mod:hover{
            background-color: rgba(0,0,0,.2);
           }
           .bgimg{
            display: none;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            /* height: 94vh; */
            /* height: 100vh; */
            z-index: 9999;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
            box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
            /* border-top: 3px solid #555; */
            /* border-bottom: 3px solid #555; */
            padding: 5vh 10vw;
            box-sizing: border-box;
            overflow: auto;
            backdrop-filter: blur(10px);

           }
           .bgimg>ul{
            width: 80vw;
            height: 85vh;
            background-color: var(--bg);
            /* margin: 0 auto; */
            overflow-x: hidden;
            overflow-y: auto;
            border-radius: 8px;
            /* border-top-right-radius: 0; */
            box-sizing: border-box;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
           }
           .bgimg>ul::-webkit-scrollbar{
            width: 0!important;
            height: 0;
           }

           h3{
            position: fixed;
            width: 80vw;
            height: 52px;
            text-align: center;
            padding: 10px 0;
            font-size: 24px;
            border-top-left-radius:18px ;
            border-top-right-radius: 18px;
            box-sizing: border-box;
            background-color: var(--bg);
            border-bottom: 1px solid var(--border);
            color: var(--text);
           }
           .imgnone{
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 5vh;
            right: 10vw;
            width: 50px;
            height: 46px;
            margin: 3px 3px;
            /* border-top-right-radius: 18px; */
            border-radius: 5px;
            /* transition: all .1s; */
            z-index: 9999;
           }
           .imgnone:hover{
            background-color: var(--btn-hover);
           }
           .imgnone>svg{
            fill: var(--text);
           }
           .line {
            position: absolute;
            left: 12px;
            width: 50%;
            height: 2px;
            background: #333; /* 浅色主题默认 */
          }

          /* X的初始位置 */

          .line:nth-child(1) {
            transform: translateY(0px) rotate(46deg);
            top: 50%;
            }
            .line:nth-child(2) {
            transform: translateY(0px) rotate(-46deg);
            bottom: 45%;
            }    


        #changeBgBtn,#clearAllBackgroundImagesBtn{
            position: fixed;
            bottom: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            color: var(--text);
            border: none;
            border-radius: 5px;
            background-color: var(--bg);
        }
        #changeBgBtn{
            right: 20px;

        }
        #clearAllBackgroundImagesBtn{
            left: 20px;
        }
        #changeBgBtn:hover,#clearAllBackgroundImagesBtn:hover{
            background-color: var(--bg-hover);
        }
           .img-tab_content ul{
            display: flex;
            flex-wrap: wrap;
            
           }

           .img-tab_content li{
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
            margin: 1%;
            cursor: pointer;
            width: 18%;
            aspect-ratio: 16/9;
            overflow: hidden;
            border-radius: 10px;
            box-sizing: border-box;
           }
           .img-tab_content li:hover{
            /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
           }
           .img-tab_content li img{
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            transition: all .3s;
           }
           .img-tab_content li img:hover{
            width: 120%;
            height: 120%;
            
           }
           .img-top_title{
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed; 
            margin-top: 52px; 
            width: 80vw; 
            height: 62px;
            /* padding: 10px 2vw; */
            /* text-align: center; */
            box-sizing: border-box;
            background-color: var(--bg);

        }
           .img-top_title>li{
            float: left;
            width: 8vw;
            height: 41px;
            /* margin: 0 20px; */
            /* background-color: rgb(12, 12, 12); */
            text-align: center;
            line-height: 41px;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 10px;
            color: var(--text);
            background-color: var(--bg-hover);
            margin: 0 10px;
            font-weight: 600;
        }
        .img-top_title>li:hover{
            color: #fff;
            background-color:  var(--theme);

        }
        .img-top_title .first-img{
            color: #fff;
            /* border-color: black; */
            background-color:  var(--theme);
            /* opacity: 0.5; */
            transition: background-color .3s;
        }

           /* 背景设置模块 */

        /* 搜索 */
        .search-mod{
            width: 48px;
            height: 50px;
            /* float: right; */
            position: fixed;
            top: 0;
            right: 175px;
            /* font-size: 36px; */
            text-align: center;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
            padding-top: 8px;
            box-sizing: border-box;
            /* background-color: skyblue; */

        }

        .search-mod>ul{
            position: absolute;
            top: 50px;
            left: -50px;
            display: none;
            transition: all .5s;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }
        .search-mod:hover ul{
            display: block;
            background:#282a2d;
            border-radius: 10px;
        }

        .search-mod svg{
            position: relative;
            top: 2px;
        }
        button {
            cursor: pointer;
            width: 145px;
            height: 54px;
            line-height: 50px;
            background-color: #282a2d;
            border-radius: 10px;
            border: none;
            font-size: 18px;
            margin: 0;
            padding: 0;
            color: #fff;
        }

        h2 {
            padding-top: 100px;
            box-sizing: border-box;
            /* height: 290px; */
            display: none;
           }

        .title{
            /* height: 120px; */
            /* background-color: red; */
            text-align: center;
            margin-bottom: 40px;
        }
        .title>img{
            /* width: 80px; */
            height: 80px;
        }
        .container {
                width: 500px;
                /* height: 50px; */
                margin: 0 auto;
            }

            .parent {
                width: 100%;
                height: 42px;
                /* top: 4px; */
                position: relative;
                
            }
            .parent>input:first-of-type {
                /*输入框高度设置为40px, border占据2px，总高度为42px*/
                width: 500px;
                height: 50px;
                /* border: 1px solid #ccc; */
                font-size: 18px;
                /* font-weight: 600; */
                outline: none;
                box-sizing: border-box;
                /* text-align: center; */
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                padding-left: 40px;
                background-color: var(--bg);
                color: var(--text);
                border: 1px solid var(--border);
            

            }
            .parent>input:first-of-type:hover{
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

            }
            .parent>input:first-of-type:focus {
                /* border: 1px solid  var(--theme); */
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            }
            .parent>input:last-of-type {
                /*button按钮border并不占据外围大小，设置高度*/
                width: 100px;
                height: 50px;
                position: absolute;
                background:  var(--theme);
                border: 1px solid  var(--theme);
                color: #fff;
                font-size: 16px;
                outline: none;
                /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
                border-top-right-radius:10px ;
                border-bottom-right-radius: 10px;
                cursor: pointer;

            }
            .parent .fa{
                position: absolute;
                top: 15px;
                left: 12px;
                /* float: left; */
                font-size: 18px;
                color:  var(--theme);
            }

            /* bing下拉词列表 */
            .suggest {
                width: 500px;
                /* border: 1px solid #999; */
                border-radius: 10px;
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                z-index: 2;
                background: var(--bg);
                color: var(--text);
            
            }
     
            .suggest ul {
                /* list-style: none; */
                margin: 0;
                padding: 0;
            }
     
            .suggest ul li {
                padding: 3px;
                padding-left: 40px;
                font-size: 18px;
                line-height: 30px;
                cursor: pointer;
                font-weight: 400;
            }
            .suggest ul li:nth-child(1){
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
            .suggest ul li:last-child{
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            .suggest ul li:hover {
                background-color: var(--bg-hover);
            }
    

            /* 导航栏内容 */
            .main{
                position: relative;
                top: 50px;
                width: 66vw;
                height: 565px;
                background-color: var(--bg);
                margin: 0 auto;
                /* margin-top: 50px; */
                border-radius: 10px;
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                z-index: -1;
            }
            .top_title{
                display: flex;
                justify-content: center;
                align-items: center;
                /* width: 50vw; */
                height: 55px;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                /* border: 1px solid #ccc; */
                /* margin: 0 auto; */
                border-radius: 10px;
                box-sizing: border-box;
                /* padding: 0 15%; */
            }
            .top_title>li{
                width: 7vw;
                height: 41px;
                text-align: center;
                line-height: 41px;
                cursor: pointer;
                box-sizing: border-box;
                border-radius: 10px;
                color: var(--text);
                /* background-color: rgba(0,0,0,.08); */
                background-color: var(--bg-hover);
                margin: 0 10px;
                font-weight: 600;
            }
            .top_title>li:hover{
                color: #fff;
                background-color:  var(--theme);

            }
            .top_title>li:hover svg{
                fill: #fff;
            }
            .top_title .fa{
                position: relative;
                left: -5px;
            }
            .top_title>li>svg{
                width: 18px;
                margin: 0;
                fill: #fff;
            }

            .top_title .first{
                color: #fff;
                /* border-color: black; */
                background-color:  var(--theme);
                /* opacity: 0.5; */
                transition: background-color .3s;
            }
            .top_title .first>svg{
                fill: #fff!important;

            }
            .tab_content{
                width: 66vw;
            }
            .tab_content .tab{
                display: none;
            }

            .tab_content .tab:first-child{
                display: block;
                /* background-color: lightblue; */
            }
        

            .box-left{
                float: left;
                width: 6vw;
                border-right: 1px solid var(--border);
                box-sizing: border-box;
                height: 510px;
                text-align: center;
                color: var(--text);
            }
            .box-left>li:nth-child(2n-1),.box-right>ul:nth-child(2n-1){
                background-color: var(--bg-hover);
            }
            .box-left>li{
                /* width: 10vw; */
                height: 51px;
                /* background-color: yellow; */
                line-height: 51px;
                /* border-bottom: 1px solid #ccc; */
                box-sizing: border-box;
            }
            .box-right{
                float: right;
                width: 60vw;
                /* height: 0; */
                text-align: center;
            }
            .box-right>ul{
                height: 51px;
            }
            .box-right>ul>li{
                /* position: relative; */
                float: left;
                width: 10vw;
                height: 51px;
                box-sizing: border-box;
                line-height: 51px;
                /* background-color: #888; */
                /* border-bottom: 1px solid #ccc; */
                /* border-radius: 10px; */
            }

            .ico{
                position: relative;
                top: 5px;
                left: -5px;
                width: 20px;
                height: 20px;
                /* margin: 0 5px; */
                border-radius: 5px;
            }
            .box-right>ul>li>a{
                display: inline-block;
                width: 10vw;
            }



            /* 测试 */
            .tab-type {
                display: flex;
                justify-content: center;
                padding-top: 30px;
            }
            .tab-type > li {
                cursor: pointer;
                color: #fff;
                background-color: lightsalmon;
                border-radius: 12px;
                padding: 5px;
                margin: 0px 20px;
                max-width: 300px;
                list-style: none;
            }
            
            .footer{
                width: 100%;
                /* height: 20px; */
                position: fixed;
                bottom: 0;
                text-align: center;
                /* font-size: 18px; */
                /* background-color: #fff; */
                /* opacity: 0.5; */
                background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.12));
                /* border-radius: 5px; */
                z-index: -2;
                padding: 10px 0;
                color: #fff;
            }
            .footer a{
                color: #fff;
            }
            .footer a:hover{
                color: var(--theme)!important;
                text-decoration: underline;
            }

        @media(min-width:2000px){
            html,body,.parent .fa{
                font-size: 1.25rem!important;
            }
            .nav{
                font-size: 16px!important;
            }
            .parent .fa{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 3vw;
                height: 7vh;
                top: 0;
                left: 0;
            }
            .main{
                width: 80vw;
                height: 80vh;
            }
            .tab_content{
                width: 80vw;
            }
            .top_title{
                height: 10vh;
            }
            .box-left{
                width: 8vw;
                height: 70vh;
            }
            .box-right{
                width: 72vw;
            }
            .box-left>li,.box-right>ul,.top_title>li{
                height: 7vh;
                line-height: 7vh;
            }
            .box-right>ul>li,.box-right>ul>li>a{
                width: 12vw;
                height: 7vh;
                line-height: 7vh;

            }
            .ico{
                width: 1.25rem;
                height: 1.25rem;
                top: 3px;
                left: -8px;
            }
            .container,.parent>input:first-of-type,.suggest{
                width: 30vw;
            }
            .parent,.parent>input:first-of-type,.parent>input:last-of-type{
                height: 7vh;
                font-size: 1.25rem;
            }
            .suggest ul li,body .bdSug_wpr tr,body .bdSug_wpr td{
                height: 5vh;
                line-height: 5vh;
                font-size: 1.25rem!important;
                padding-left: 3rem;

            }
            .parent>input:first-of-type{
                padding-left: 3rem;
            }
            .parent>input:last-of-type{
                width: 7vw;
            }
        }

        @media(min-width:3000px){
            html,body{
                font-size: 1.5rem;
            }
        }



        @media(max-width:900px){
            body{
                z-index: 0;
            }
            a{
                color: #fff;
            }
            /* 兼容safari的input圆角问题 */
            input[type="submit"],
            input[type="reset"],
            input[type="button"],
            input[type="search"],
            button {
            -webkit-appearance: none;
            }
            .nav{
                backdrop-filter: blur(10px)
            }
            .container{
                width: 90vw;
            }
            .parent>input:first-of-type{
                width: 66vw;
                /* 解决safari浏览器圆角兼容性问题 */
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            .parent>input:last-of-type{
                width: 24vw;
                /* 解决safari浏览器圆角兼容性问题 */
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            .suggest{
                width: 90vw;
            }
            .main{
                display: none;
                /* width: 90vw; */
            }
            
            h2{
                padding-top: 70px;
            }
            #pc-baidu{
                display: none!important;
            }
            #m-baidu{
                display: block!important;
            }
            .m-box{
                display: block!important;
                width: 90vw;
                margin: 60px auto;
                /* backdrop-filter: blur(3px); */
                padding: 5vh 0;
                border-radius: 15px;
            }
            .m-box>ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: start;
                align-items: center;
                row-gap: 5vh;
                column-gap: 2vw;
                
            }
            #toggle-theme-button{
                right: 0;

            }
            h3{
                width: 90vw;
            }
            .pc-img{
                display: none!important;
            }
            .m-img{
                display: flex!important;
            }
            .bgimg-mod{
                margin-right: 50px;

            }
            .bgimg{
            /* Safari背景模糊兼容解决方案 */
            -webkit-backdrop-filter: blur(8px); /* 添加-webkit前缀 */
            backdrop-filter: blur(8px); /* 标准属性 */
            
            /* 启用硬件加速 */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            
            padding: 6vh 5vw;
            }
            .imgnone{
                z-index: 999;
                top: 6vh;
                right: 5vw;
            }
            .bgimg>ul{
                width: 90vw;
                height: 74vh;
            }
            .img-top_title{
                width: 90vw;
            }

            .img-top_title>li{
                width: 13vw;
                margin: 0 5px;
            }
            .img-tab_content li{
                margin: 3%;
                width: 44%;
                aspect-ratio: 0;
            }
            .img-tab_content li img{
                aspect-ratio: 0;

            }
            
            .img-btn{
                margin-top: 10px;
                /* width: 85vw; */
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                gap: 10px;
            }
            
            #clearAllBackgroundImagesBtn,#changeBgBtn{
                width: 85vw;
                position: relative;
                padding: 1.5vh 2.5vw;
                bottom: 0;
                left: 0;
                border-radius: 3vh;
            }
            
            .switch-container{
                display: none;
            }
            .search-mod{
                right: 100px;
            }
            #timeDisplay{
                display: none;
            }
            .help{
                font-size: 36px;
                line-height: 50px;
                right: 150px;
            }
            body .bdSug_wpr,body .bdSug_wpr table{
                width: 90vw!important;
                color: var(--text);
            }
            .menu-link{
                width: 21vw;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 5px;
                font-size: 0.8em;
                color: #fff;
            }
            .menu-link>.svg{
                width: 60px;
                height: 60px;
                border-radius: 15px;
                /* background: #fff; */
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--bg);
            }

            .submenu{
                
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;
                backdrop-filter: blur(10px);
                padding:15vh 10vw;

            }
            .submenu.active{
                display: block!important;
            }

            .submenu-box{
                position: relative;
                width: 80vw;
                height: 60vh;
                border-radius: 15px;
                box-sizing: border-box;
                box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
                /* opacity: 0.8; */
                overflow: auto;
                background-color: var(--bg);
            }
            .submenu-h1{
                width: 80vw;
                height: 10vh;
                font-size: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text);

            }
            
            .submenu-box-main{
                width: 80vw;
                /* height: 50vh; */
                display: flex;
                flex-wrap: wrap;
                gap: 3vw;
                align-items: center;
                justify-content: flex-start;
                padding: 0 7vw;
                box-sizing: border-box;
            }
            .submenu-box-main>li>a{
                width: 20vw;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 5px;
                font-size: 0.8em;
                color: var(--text);
            }
            .submenu-box-main>li>a>img{
                width: 60px;
                height: 60px;
                border-radius: 15px;
                /* background: #fff; */
            }
            .close-all-btn{
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                width: 50px;
                height: 46px;
                margin: 3px 3px;
                /* border-top-right-radius: 18px; */
                border-radius: 5px;
                /* transition: all .1s; */
                z-index: 9999;
                fill: var(--text);
               }
            .submenu,.nav{
            /* Safari背景模糊兼容解决方案 */
            -webkit-backdrop-filter: blur(8px); /* 添加-webkit前缀 */
            backdrop-filter: blur(8px); /* 标准属性 */
            
            /* 启用硬件加速 */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);

               }
        }