html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; overflow-x: hidden; background-color: #313131; color: aliceblue; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

/*demo CSS*/
img { max-width: 100%; max-height: 100%; }
.main-content { width: 100%; }
.title { margin: 20px 30px; }
.image-list { width: 80%; padding: 20px; margin-left: auto; margin-right: auto; }
.image-list .cover { position: relative; width: 170px; height: 110px; display: inline-block; margin-left: 10px; margin-bottom: 10px; cursor: pointer; }
.image-list .cover img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }

/*main CSS*/
#pictureViewer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.3); z-index: 10000; }
#pictureViewer > .content { background-color: #fff; position: absolute; width: 590px; height: 420px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
#pictureViewer .menu-bar { width: 100%; }
#pictureViewer .menu-bar .handel { width: 40px; height: 40px; float: right; background-repeat: no-repeat; background-position: 50%; cursor: pointer; }
#pictureViewer .menu-bar .handel:hover { background-color: #ff2e67; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#pictureViewer .menu-bar .handel.maximization { background-image: url(../images/icon/maximization_black.png); background-size: 14px; }
#pictureViewer .menu-bar .handel.maximization:hover { background-image: url(../images/icon/maximization_white.png); }
#pictureViewer .menu-bar .handel.miniaturization { background-size: 16px; background-image: url(../images/icon/miniaturization_black.png); }
#pictureViewer .menu-bar .handel.miniaturization:hover { background-image: url(../images/icon/miniaturization_white.png); }
#pictureViewer .menu-bar .handel.close-view { background-image: url(../images/icon/close_black.png); background-size: 15px; }
#pictureViewer .menu-bar .handel.close-view:hover { background-image: url(../images/icon/close_white.png); }
#pictureViewer .handel-prev,
#pictureViewer .handel-next { display: inline-block; width: 50px; height: 70px; position: relative; top: calc(50% - 80px); background-repeat: no-repeat; background-size: 25px; background-position: 50%; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
#pictureViewer .handel-prev { background-image: url(../images/icon/prev_blank.png); }
#pictureViewer .handel-next { background-image: url(../images/icon/next_blank.png); }
#pictureViewer .handel-prev:hover,
#pictureViewer .handel-next:hover { background-color: #ff2e67; }
#pictureViewer .handel-prev:hover { background-image: url(../images/icon/prev_white.png); }
#pictureViewer .handel-next:hover { background-image: url(../images/icon/next_white.png); }
#pictureViewer .picture-content { display: inline-block; width: 80%; height: calc(100% - 80px); position: absolute; margin: 0 auto; left: 0; right: 0; }
#pictureViewer .picture-content .cover { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
#pictureViewer .counter { position: absolute; bottom: 0; height: 40px; line-height: 40px; width: 100%; text-align: center; color: #808080; font-size: 13px; }
#pictureViewer .hide { display: none; }
#pictureViewer .left { float: left; }
#pictureViewer .right { float: right; }
#pictureViewer .clear-flex { clear: both; }
#pictureViewer img { max-width: 100%; max-height: 100%; }