.photo-index{max-width:1000px;margin-left:auto;margin-right:auto;padding:20px 0}.photo-index .list-body{padding:10px;width:100%}.photo-index .list-body>.title{padding:10px 15px;font-size:18px;background-color:#dcdcdc}.photo-index .list-body>.list-item{position:relative;float:left;width:25%;padding:5px;background-color:#eee;border:2px solid #fff;transition:all 300ms}.photo-index .list-body>.list-item:hover{transition:all 300ms;background-color:rgba(0,66,185,.5)}.photo-index .list-body>.list-item>.item-body{width:100%;height:150px;width:100%;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;display:table;border:5px solid #fff}.photo-index .list-body>.list-item>.item-body .layer{height:0;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;overflow:hidden;display:table-cell;transition:all 300ms;vertical-align:middle;text-align:center;color:transparent;cursor:pointer;padding:10px;padding-top:40px;font-size:20px}.photo-index .list-body>.list-item>.item-body:hover .layer{transition:all 300ms;color:#fff;height:100%;background-color:rgba(0,66,185,.5)}.photo-index .list-body>.list-item>.item-body .video-layer{position:absolute;top:0;left:0;right:0;bottom:0;height:0%;width:100%;display:table-cell;transition:all 300ms;vertical-align:middle;text-align:center;color:transparent;cursor:pointer;padding:10px;position:absolute;background-color:transparent;z-index:10}.photo-index .list-body>.list-item>.item-body:hover .video-layer{transition:all 300ms;background-color:rgba(0,66,185,.5);color:#fff;height:100%}.photo-index .list-body>.list-item>.item-body iframe{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.photo-index .list-body>.list-item>.item-body>.layer>.button-context{position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.5);color:#fff;opacity:0}.photo-index .list-body>.list-item>.item-body:hover .button-context{opacity:1}.photo-index .list-body>.list-item>.item-body>.layer>.button-context>.btn-option{width:50%;position:relative;float:left;padding:5px 15px;border-style:none;font-size:12px;text-align:center;transition:all 300ms;cursor:pointer}.photo-index .list-body>.list-item>.item-body>.layer>.button-context>.btn-option:hover{background-color:#1aa40a;transition:all 300ms;text-shadow:0 3px 4px rgba(0,0,0,.3)}.photo-index .list-body>.list-item>.item-body>.layer>.button-context>.btn-red:hover{background-color:#ed0a0a;transition:all 300ms}@media(max-width:767px){.photo-index .list-body>.list-item{width:33.33%;padding:10px}}@media(max-width:550px){.photo-index .list-body>.list-item{width:50%;padding:5px}.photo-index .list-body{padding:5px;width:100%}.photo-index .list-body>.list-item>.item-body>.layer>.button-context>.btn-option{padding:5px 5px}}@media(max-width:350px){.photo-index .list-body>.list-item>.item-body{height:100px}.photo-index .list-body>.list-item>.item-body>.layer>.button-context>.btn-option{font-size:11px}}.button-next-pre{background-color:#ddd;color:#888;height:25px;width:25px;border:none;border-radius:50%;border:1px solid #d8d8d8;outline:none}.button-next-pre:hover{color:#444;box-shadow:0 0 3px rgba(0,0,0,.3)}