:root {
    --shadow-large:
    0px 0.6px 2.2px rgba(0, 0, 0, 0.02),
    0px 1.3px 5.3px rgba(0, 0, 0, 0.028),
    0px 2.5px 10px rgba(0, 0, 0, 0.035), 
    0px 4.5px 17.9px rgba(0, 0, 0, 0.042), 
    0px 8.4px 33.4px rgba(0, 0, 0, 0.05), 
    0px 20px 80px rgba(0, 0, 0, 0.07);
}
body{margin: 0px;padding: 0px;}
.wrapper {
        /* position: static; */
        min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        /* background-image: url("https://www.baoyazi.com/static/wrapper.png"); */
        background-attachment: fixed;
        /* background-size: contain; */
        background-position: 50% 50%;
        background-size:2000px 2000px;
        background-repeat: no-repeat;
        display:flex;
}
.app{
    /* background: rgb(233, 55, 55); */
    width: 100vw;
}

.page1{
    display: flex;
    flex-direction: column;
    /*如果开启这个,则手机浏览器safari不会出现隐藏地址栏 */
    height: 100vh;  
    /* height: calc(100vh - env(safe-area-inset-bottom)); */
}
.top{
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 800;
    border-bottom: 1px solid gray;
    position: fixed;
    width:100%;
    top:0px;
    background: white;
}
.menu{
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-top: 1px solid gray;
    position: fixed;
    width:100%;
    bottom:0px;
    background: rgb(255, 255, 255);
    display: flex;
}
.menu div{
        flex-grow:1;
        text-align: center;
}
.menu div img{
        margin-top: 4px;
}
.main{
    flex: 1;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    background: rgba(128, 128, 128, 0.151);
}

.page2{
    display: none;
    flex-direction: column;
    /*如果开启这个,则手机浏览器safari不会出现隐藏地址栏 */
    height: 100vh;  
    /* height: calc(100vh - env(safe-area-inset-bottom)); */
}
.menu2{
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-top: 1px solid gray;
    position: fixed;
    width:100%;
    bottom:0px;
    background: rgb(255, 255, 255);
    display: flex;
}
.menu2 div{
        flex-grow:1;
        text-align: center;
}
.menu2 div img{
        margin-top: 4px;
}
.main2{
    flex: 1;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    background: rgba(249, 249, 249);
}
.box{
    display: flex;
}
.cell{
    border: 1px solid #666;
    border-radius: 8px;
    flex:1;
    height: 100px;
    /* background: #FF7043; */
    margin: 10px 20px 10px 20px;
}
.box2{
    height: 40px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0px 20px 0px 20px;
    cursor: pointer;
}
.cla{
    display: flex;
    flex-wrap: wrap;
}
.cla-title{
    margin: 30px 20px 10px 30px;
    font-size: 20px;
}
.cla-des{
    font-size: 12px;
    color: #666;
    margin-left: 20px;
}
.exam-ing1{
        background-image: url("../static/e1.png");
        width: 100px;
        height: 100px;
}
.exam-ing2{
    background-image: url("../static/e2.png");
    width: 100px;
    height: 100px;
}
.exam-ing3{
    background-image: url("../static/e3.png");
    width: 100px;
    height: 100px;
}
.exam-ing4{
    background-image: url("../static/e4.png");
    width: 100px;
    height: 100px;
}
.exam-ing5{
    background-image: url("../static/e5.png");
    width: 100px;
    height: 100px;
}
.exam{
        text-align:center;
        width: 100px;
        height: 120px;
        margin-left: 18px;
        margin-top: 10px;
        cursor: pointer;
}

.page3{
    display: none;
    flex-direction: column;
    /*如果开启这个,则手机浏览器safari不会出现隐藏地址栏 */
    height: 100vh;  
    /* height: calc(100vh - env(safe-area-inset-bottom)); */
}
.case1-item0,
.case1-item1,
.case1-item2, 
.case1-item3{
height: 48px;border: gray solid 1px;margin: 10px;border-radius: 8px;text-align: center;line-height: 48px;
}
.case1-button0,
.case2-button0,
.case3-button0,
.case4-button0{
height: 48px;border: gray solid 1px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: gray;
}
.case1-button1,
.case2-button1,
.case3-button1,
.case4-button1{
height: 48px;border: gray solid 1px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: white;background: blue;
}
.case1-button2,
.case2-button2,
.case3-button2,
.case4-button2{
height: 48px;border: gray solid 1px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: white;background: green;
}
.case1-button3,
.case2-button3,
.case3-button3,
.case4-button3{
height: 48px;border: gray solid 1px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: white;background: red;
}
.p0{
    margin: 10px 10px;
}
.p1{
    border:solid gray 1px;
    width: 100%;
    height: 32px;
    border-radius: 16px;
}
.p2{
    background: green;
    height: 32px;
    border-radius: 16px;
}
.header{
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    font-size: 20px;
}
.header{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    border-bottom: 1px solid #ddd;
}
.case1-back,
.case2-back,
.case3-back,
.case4-back{
  height: 48px;border: white solid 1px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: white;background: green;
}


.case2-item0,
.case2-item1,
.case2-item2,
.case2-item3,
.case2-item4,
.case2-item5{
  width: 45%;height: 48px;border: gray solid 1px;margin: 20px;border-radius: 8px;text-align: center;line-height: 48px;transition: all 0.3s;
}
.case3-item0,
.case3-item1,
.case3-item2,
.case3-item3,
.case3-item4,
.case3-item5,
.case3-item6,
.case3-item7,
.case3-item8,
.case3-item9{
  width: 45%;height: 48px;border: gray solid 1px;margin: 20px;border-radius: 8px;text-align: center;line-height: 48px;transition: all 0.3s;
}

.case4-item0,
.case4-item1,
.case4-item2{
    width: 140px;height: 180px;border: gray solid 1px;margin: 20px;border-radius: 8px;text-align: center;transition: all 0.3s;
}
.case4-item0 span,
.case4-item1 span,
.case4-item2 span{
    width: 100%;height: 32px;display: inline-block;line-height: 32px;border-top: gray solid 1px;margin-top: 147px;border-radius: 1px 1px 8px 8px;
}

.case4-item{
    display: flex;
    flex-wrap:wrap;
}

/* 二级的CSS数据 */

.mynav{
    background: rgb(227, 227, 227);
    height: 64px;
    width: 100%;
    /* border-top-left-radius:20px; */
    /* border-top-right-radius:20px; */
    display: flex;
    background-image: url("../static/navbg.png");
    background-repeat: no-repeat;
    background-position: -18px 0px;
    transition: all 0.3s;
  }
  .myname{
    width: 80px;
    height: 64px;
  
    line-height: 50px;
    font-size: 18px;
    padding-left: 20px;
  }
  .reset-button0{
    height: 48px;margin: 40px;border-radius: 8px;text-align: center;line-height: 48px;color: white;background: red;
  }