* {
    margin: 0;
    pad: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

header {
    width: 1150px;
    /* height: 100px; */
    height: 10vh;
    margin: 0 auto;
}

header .logo {
    /* margin-left: 40px; */
    margin-top: 10px;
    height: 7vh;
}

header .login {
    cursor: pointer;
    float: right;
    margin-top: 3vh;
    width: 80px;
    height: 40px;
    background: url('../images/DL-1.png');
}
header .login a{
    width: 80px;
    height: 40px;
    display: block;
}
header .login:hover {
    background: url('../images/DL-2.png');
}

#content {
    width: 100%;
    min-width: 1300px;
    /* height: 980px; */
    height: 90vh;
    background: url('../images/BG.png') no-repeat;
    background-size: cover;
    overflow: hidden;
}

.content {
    /* width: 1300px;
    height: 90vh;
    margin: 0 auto;
    position: relative; */
    
    position: relative;
    margin: auto;
    margin-top: 10vh;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1050px;
    height: 510px;
}

.content a {
    position: absolute;
    display: inline-block;
    width: 210px;
    height: 262px;
    background-size: cover;
}

.lessons {
    bottom: 0;
    left: 0;
    background: url('../images/kecheng1.png') no-repeat;
}

.lessons:hover {
    background: url('../images/kecheng2.png') no-repeat;
    background-size: cover;
}

.user {
    position: absolute;
    left: 22%;
    background: url('../images/yonghu1.png') no-repeat;
}

.user:hover {
    background: url('../images/yonghu2.png') no-repeat;
    background-size: cover;
}

.books {

    right: 22%;
    background: url('../images/tushuguan1.png') no-repeat;
}

.books:hover {
    background: url('../images/tushuguan2.png') no-repeat;
    background-size: cover;
}

.training {
    right: 0;
    bottom: 0;
    background: url('../images/shixunzhongxin1.png') no-repeat;
}

.training:hover {
    background: url('../images/shixunzhongxin2.png') no-repeat;
    background-size: cover;
}

.center {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);

}

.center img {
    width: 600px;
    height: 400px;
}