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


}