* {
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%
            height: 98%;;
            }

            
#d1{
 display:none;
 }
#d1{
width: 100%;
font-size: 18px;
 }       
      #d3{
       width: 100%;
 font-size: 20px;
 
 }             
            
            
        .box {
            width: 100%;
           
            margin: 0 auto;
            position: absolute;
            left: 1px;
            bottom: 10px;
text-align: center;
 float: left;
        }

   
        
        .box .item {
            float: left;
            width: 32.6%;
            height: 35px;
            text-align: center;
            border: 1px solid #fff;
            background: #A6A6A6;
            color: #fff;
            line-height: 35px;
            
        }
        
        .box .item:hover {
            background: lightblue;
            color: #000;
         box-shadow: 0px 0px 18px rgb(110, 40, 100);cc;
        
        }
        
        a:hover{
          box-shadow: 0px 0px 18px #006BFF;cc;

        }
        .box .item ul {
            display: none;
            background: white;
            color: black;
            position: relative;
            top: -240px;
            
        }
        
        .box .item:hover ul {
            display: block;
       box-shadow: 0px 0px 18px rgb(110, 40, 100);cc;
      display: block;
      width:  100%;
            height: 200px;
       background-color: #55585a;
       
       }
        
     
        
        .item li:hover {
            color: aqua;
            cursor: pointer;
            width: 100%;
            height: 40px;    
          box-shadow: 0px 0px 18px rgb(110, 40, 100);cc;
    
        }
        
      
      li a {
            /* 1.把a转换为块级元素 这样就可以让链接竖着表示了*/            
            display: block;
            /* 设置长度与宽度 */
            width: 100%;
            height: 40px;

            /* 设置背景颜色 */
            background-color: #55585a;
            
            /* 设置字体大小 */
            font-size: 14px;

            /* 设置字体颜色 */
            color: #fff;

            /* 链接没有下划线 */
            text-decoration: none;
            
            /* 设置左边的内边距 */
            padding-left: 0px;
            
            /* 设置文本边距 */
            line-height: 40px;
        }

        /* 2.鼠标经过链接变换背景颜色 */
    li a:hover {
            background-color: #ff6700;
        }   
        
  #d4{
      width: 100%;
      position:absolute;
      background-color: #fff;
  float: left;
  }      
  
  
#if1{
width: 100%; 
height:550px; 
overflow: hidden; 
}


        /*最底下的灰色div*/
.alertBelowDiv{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(100, 100, 100, 0.8);

    /*将内容居中*/
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
/*白色确定框*/
.alertContentDiv{
    width: 80%;
    height: 180px;
    background-color: #CBCBCB;
    border-radius: 1%;
    box-shadow: 0px 0px 12px #2EC6FF;cc;

}

input{
width: 80%;
height: 30px;
text-align: center;
}
input:hover{
 box-shadow: 0px 0px 12px #00BCC5;cc;
}   

/*展示文字部分*/
.alertTextDiv{
    width: 100%;
    height: 80px;
    margin: 20px auto;
    text-align: center;
    font-size: 16px;
    font-weight: 600;

}
/*取消按钮*/
.alertCancelDiv:hover{
 box-shadow: 0px 0px 12px #00BCC5;cc;
}   
.alertCancelDiv{
    float: left;
    width: 25%;
    height: 20%;
    background-color: lightslategrey;
    border-radius: 5%;
    font-weight: 600;
    color: #fff;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    margin-left: 15%;
    

}

/*确定按钮*/
.alertSubmitDiv:hover{
 box-shadow: 0px 0px 12px #00BCC5;cc;
}   
.alertSubmitDiv{
    float: right;
    width: 25%;
    height: 20%;
    background-color: lightslategrey;
    border-radius: 5%;
    font-weight: 600;
    color: #fff;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    margin-right: 15%;
  
}
    
 a{
 
 text-decoration:none;
 color: #2A17FF;
 }