*{ margin:0px; padding:0px;}
body 
{
    line-height:1.5;
    font-family:微软雅黑;
}
a{ text-decoration:none; color:#000; }
ul,li{ list-style:none; }
img{ max-width:100%; vertical-align:middle; }



.gallery{ max-width:1200px; margin:100px auto; display:flex; justify-content: space-between;  }
.gallery li{ width:30%; text-align:center;  }
/* 相册效果 */
.Gallery { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,.9); opacity: 0; z-index: 999999; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.Gallery.show { opacity: 1; }
.g-bottom, .g-left, .g-right, .g-top { z-index: 99; display: block; -webkit-appearance: none; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.g-top { position: absolute; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); height: 45px; text-align: center; line-height: 45px; color: #fff; z-index: 120; }
.g-left.none, .g-right.none { opacity: .3; cursor: not-allowed; }
.g-bottom { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); height: 45px; text-align: center; line-height: 45px; color: #fff; z-index: 120; }
.g-left { position: absolute; top: 43%; left: 0; height: 14%; background: rgba(0, 0, 0, 0.5); width: 55px; cursor: pointer; }
.g-right { position: absolute; top: 43%; right: 0; height: 14%; background: rgba(0, 0, 0, 0.5); width: 55px; cursor: pointer; }
.Gallery img { max-height: 87%; max-width: 99%; }
.Gallery.Gallery-none img { max-height: 100%; max-width: 99%; }
.Gallery-wrap { width: 100%; height: 100%; position: relative; transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
.g-left:after { content: ''; width: 20px; height: 2px; background: #fff; position: absolute; left: 16px; top: 50%; margin-top: -1px; }
.g-left:before { content: ''; width: 10px; height: 10px; border: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); border-top: none; border-right: none; display: block; position: absolute; left: 16px; top: 50%; margin-top: -6px; }
.g-right:after { content: ''; width: 20px; height: 2px; background: #fff; position: absolute; right: 16px; top: 50%; margin-top: -1px; }
.g-right:before { content: ''; width: 10px; height: 10px; border: 2px solid #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); border-left: none; border-bottom: none; display: block; position: absolute; right: 16px; top: 50%; margin-top: -6px; }
.g-list { width: 100%; height: 100%; text-align: center; vertical-align: middle; position: absolute; left: 0; top: 0; }
.g-list span { display: inline-block; vertical-align: middle; height: 100%; }
.g-list img { vertical-align: middle; cursor: -webkit-grab; cursor: grab; transition: all .4s ease; -moz-transition: all .4s ease; -webkit-transition: all .4s ease; }
.Gallery-wrap.grab .g-list img { cursor: -webkit-grabbing; cursor: grabbing; }
.g-top .g-count { width: auto; height: 100%; position: absolute; left: 0; top: 0; padding: 0 18px; }
.g-top button { height: 45px; width: 45px; border: none; position: absolute; right: 0; top: 0; opacity: .8; background: 0 0; -webkit-tap-highlight-color: transparent; }
.g-top span { display: block; width: 100%; height: 100%; line-height: 45px; color: #fff; }
.g-close { cursor: pointer; }
.g-close:after { content: ''; width: 24px; height: 2px; background: #fff; display: block; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; left: 8px; top: 21px; }
.g-close:before { content: ''; width: 24px; height: 2px; background: #fff; display: block; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; left: 8px; top: 21px; }
.g-top button:hover { opacity: 1; }
.loading { width: 100%; height: 100%; background: #111111; position: absolute; left: 0; top: 0; z-index: 1000; }
.loading s { display: block; width: 30px; height: 30px; background: #0ad1a9; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -15px; margin-left: -15px; -moz-animation: load 1.5s linear infinite; -webkit-animation: load 1.5s linear infinite; }
.loading p { text-align: center; font-size: 12px; position: relative; top: 50%; margin-top: 25px; }