* {
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vmax;
}

header {
    height: 25vmax;

    background:  url('../images/logo.png') 5% 10% no-repeat
    ,linear-gradient(rgba(187, 114, 11, 0.3), rgba(250, 149, 8, 0.8), rgba(226, 174, 76, 0.7))
    , url('../images/backgroundImg.png') 110% top no-repeat;
    background-size: 35% 15%,100% 100%, 50%, 50%;
    display: flex;
    align-items: center;

}

.userheadimg {
    width: 6rem;
    height: 6rem;
    margin-left: 8%;
    margin-top: 8%;
    /* border: 1px solid rgb(240, 166, 8); */
    border-radius: 100%;
    display: inline-block;
    /* margin-left: 20px; */
}
.userinfo{
    margin-left: 5%;
    margin-top: 5%;
    list-style: none;
    color:rgb(250, 248, 243);
}
.info{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
}
.info1{
    font-size: 1.2rem;
    font-weight: bold;
}

section {
    flex: 1;
   
}

section .contener {
    height: 89%;

}

.listItem {
    height: 10%;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: #696969;
    font-weight: bold;
}
section hr
{
  
    position: relative;
    border: 1px solid #EEEFF3;
    top: -11px;
    z-index: -100;
}
.listItem::before {
    content: "";
    background: url("../images/fw.png") no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    width: 40px;
    height: 70%;
    margin-left: 7%;
    margin-right: 1%;
    display: inline-block;
    /* border: 1px solid red; */
}

.contener {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.item {
    /* border: 1px solid #d1b912; */
    width: 28vw;
    margin: 0 5px 0 5px;
    border-radius: 15px;
    box-shadow: 5px 5px 2px #ccc;
    height: 30%;
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: center 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: #F7F7F7;
    text-decoration: none;
}

.item::after {
    margin-bottom: 10px;
    color:#696969;
}

.item1 {
    background-image: url(../images/查询.png);

}

.item2 {
    background-image: url(../images/个人中心2.png);

}

.item3 {
    background-image: url(../images/投诉建议.png);

}

.item4 {
    background-image: url(../images/考试交费1.png);

}

.item5 {
    background-image: url(../images/金牌E驾考2.png);

}

.item6 {
    background-image: url(../images/stopcar.jpg);
}

.item7 {
    background-image: url(../images/理论培训.png);

}

.item8 {
    background-image: url(../images/餐补服务2.png);

}

.item9 {
    background-image: url(../images/考试预约.png);

}

.item1::after {
    content: '学员查询';

}

.item2::after {
    content: '个人中心';

}

.item3::after {
    content: '投诉建议';

}

.item4::after {
    content: '考试交费';

}

.item5::after {
    content: '金牌E驾考';

}

.item6::after {
    content: '停车服务';

}

.item7::after {
    content: '考试排队';

}

.item8::after {
    content: '餐补服务';

}

.item9::after {
    content: '考试预约';

}

footer {
    text-align: center;
    background: rgb(37, 37, 37);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 6vmax;
}

footer a:nth-child(1)::before {
    content: url("../images/beian.png");
}


footer div {
    width: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
}