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;



	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: 100%;



    padding: 20px;



    margin-left: auto;



    margin-right: auto;



}



.image-list .cover{



    position: relative;



    display: inline-block;



    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,.5);



    z-index: 999999999999999999999;



}



#pictureViewer > .content{



    background-color: #fff;



    position: absolute;



    width: 760px;



    height: 540px;



    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(../img/maximization_black.png);



    background-size: 14px;



}



#pictureViewer .menu-bar .handel.maximization:hover{



    background-image: url(../img/maximization_white.png);



}



#pictureViewer .menu-bar .handel.miniaturization{



    background-size: 16px;



    background-image: url(../img/miniaturization_black.png);



}



#pictureViewer .menu-bar .handel.miniaturization:hover{



    background-image: url(../img/miniaturization_white.png);



}



#pictureViewer .menu-bar .handel.close-view{



    background-image: url(../img/close_black.png);



    background-size: 15px;



}



#pictureViewer .menu-bar .handel.close-view:hover{



    background-image: url(../img/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(../img/prev_blank.png);



}



#pictureViewer .handel-next{



    background-image: url(../img/next_blank.png);



}



#pictureViewer .handel-prev:hover,



#pictureViewer .handel-next:hover{



    background-color: #ff2e67;



}



#pictureViewer .handel-prev:hover{



    background-image: url(../img/prev_white.png);



}



#pictureViewer .handel-next:hover{



    background-image: url(../img/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%;



}