.content{
    width: 1200px;
    margin: 0 auto;
}
.picImg{

}
.picImg li{
    display: inline-block;
    margin-right: 16px;
    width: 380px;
    height: 328px;
    cursor: pointer;
}
.picImg li>span{
    display: block;
    width: 378px;
    height: 270px;
    border: 1px solid #cfcfcf;
    overflow: hidden;
}
.picImg li>span img{
    width: 100%;
    height: 100%;
    transition: 0.5s;
}
.picImg li>span img:hover{
    transform: scale(1.2);
}
.picImg li p{
    text-align: center;
    font-size: 14px;
    margin-top: 18px;
}

.layer{
    display: none;
    width: 700px;
    height: 510px;
    background: #fff;
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -240px;
    margin-left: -350px;    
    padding-top: 50px;
}
.layer .close{
    width: 48px;
    height: 48px;
    position: absolute;
    right: -30px;
    top: -70px;
    background: url('../images/colse.png') no-repeat center;
    cursor: pointer;
}
.layer p{
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
}
.layer img{
    display: block;
    width: 600px;
    height: 428px;
    margin: 0 auto;
}