div {
    box-sizing: border-box;
}
body {
    background: #F9FAFB;
}
.head {
    width: 75vw;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 3.80208vw 4.58333vw;
    background: linear-gradient( 270deg, #1E4C88 0%, #3E7BBA 100%);
    border-radius: 0.625vw;
}
.head-title {
    font-weight: 600;
    font-size: 1.875vw;
    color: #FFFFFF;
}
.head-tips {
    padding-top: 1.25vw;
    font-weight: 400;
    font-size: 1.04166vw;
    color: #FFFFFF;
}
.nav {
    width: 75vw;
    margin: 0 auto;
    padding: 1.4vw 0 0;
    display: flex;
    align-items: center;
}
.nav-li {
    padding: 1.6vw 3.125vw 1vw;
    width: 23.698vw;
    min-height: 10vw;
    background: #FFFFFF;
    box-shadow: 0.10416vw 0.10416vw 0.52083vw 0.10416vw rgba(68,122,240,0.3);
    border-radius: 0.625vw;
    border: 1px solid #379CFF;
    margin-right: 1.5625vw;
    box-sizing: border-box;
}
.nav-li:nth-child(3){
    margin-right: 0;
}
.nav-li-img {
    width: 1.5625vw;
    height: 1.5625vw;
}
.nav-li-title {
    padding-top: 0.5375vw;
    font-weight: 400;
    font-size: 0.9375vw;
    color: #000000;
}
.nav-li-tips {
    padding-top: 0.31666vw;
    font-weight: 600;
    font-size: 1.25vw;
    color: #1E3D59;
    display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}
.ul {
    width: 75vw;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
.li{
    margin-top: 1.46666vw;
    border-radius: 0.83333vw;
    width: 23.698vw;
    height: 16.6666vw;
    display: block;
    margin-right: 1.5625vw;
    overflow: hidden;
    cursor: pointer;
}
.li img{
    width: 23.698vw;
    height: 16.6666vw;
    display: block;
    border-radius: 0.83333vw;
    transition: transform 0.5s ease;
}
.li:nth-child(3n+3){
    margin-right: 0;
}
.li:hover img{
    transform: scale(1.5); /*鼠标悬停时放大1.2倍*/
}