#myImg{
    cursor:pointer;
/*        transition:0.3s;*/
/*border-radius:10px;*/
}
#myImg:hover{
    
/*        opacity:0.7;*/
}
/*背景样式开始*/
.modal{
    
    display:none; /*默认隐藏*/
    position:fixed; /*固定在原来的位置*/
    z-index:1; /*成为最顶层*/
    padding-top:100px; /*box的位置距上*/
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto; /*有需要时滚动*/
    background-color:rgb(0,0,); /*返回的颜色*/
    background-color:rgba(0,0,0,0.9); /*黑色透明度*/
}
#img01 { width: 80%;}
.modal-content{
    margin:auto;
    display:block;
    width:80%;
    max-width:700px; 
}
#caption{
    
    margin:auto;
    display:block;
    width:80%;
    max-width:700px;
    text-align:center;
    color:#ccc;
    padding:10px 0;
    height:150px;
}
/*添加动画*/
.modal-content,#caption{ /*隐藏图片弹出和文本弹出共同添加动画效果*/
    -webkit-animation-name:zoom;
    -webkit-animation-duration:0.6s;
    animation-name:zoom; /*动画效果名（缩放）*/
    animation-duration:0.6s; /*动画执行时间*/
}
@-webkit-keyframes zoom{
    
    from{-webkit-transform:scale(0)} /*2D变化起始*/
    to{-webkit-transform:scale(1)} /*2D变化结束*/
}
@keyframes zoom{
    
    from{transform:scale(0.1)}/*2D变化起始*/
    to{transform:scale(1)}/*2D变化结束*/
}
/*关闭按钮*/
.close{
    position:absolute; /*绝对定位*/
    top:15px;  /*定位位置*/
    right:35px;
    color:#f1f1f1; /*定义颜色*/
    font-size:40px;
    font-weight:bold;
    transition:0.3s; /*过度效果时间*/
}
.close:hover,.close:focus{ /*关闭按钮鼠标经过和鼠标焦点获取后*/
    color:#bbb; /*改变颜色*/
    text-decoration:none; /*去掉下划线*/
    cursor:pointer; /*鼠标指针样式*/
}
/*100%图像宽度在小型显示屏*/
@media only screen and (max-width:700px){ /*媒体查询，如果小于700px像素执行*/
    
    .modal-content{
        width:100%;
    }
}

/*翻页*/
.fanye { width:80%; background: #ffffff; padding:8px 0; display:table; margin: 30px auto;}
.fanye span { padding: 0 5px; display:table-cell; vertical-align:middle; text-align: center; color: #333333;}
.fanye .sx { color: #999; text-align: center;}