/*************************************************rest start*************************************************/
body{font:14px/1.5 "microsoft yahei","\5fae\8f6f\96c5\9ed1,\9ed1\4f53","\5b8b\4f53",arial,helvetica,tahoma,sans-serif;margin:0 auto;color:#333;}
p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe{margin:0;padding:0;}
img{border:0 none;vertical-align:top;}
ul,li,ol{list-style-type:none;}
table{border-collapse:collapse;border-spacing:0;}
i,em,address,caption,cite,code,dfn,var{font-style:normal;font-weight:normal;}
a{color:#333;text-decoration:none; }
a:hover{color:#777;}
a,a:hover{outline:0;}
input,button,textarea,select,optgroup,option{font-family:"microsoft yahei","\5fae\8f6f\96c5\9ed1,\9ed1\4f53","\5b8b\4f53",arial,helvetica,tahoma,sans-serif; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}

.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cl,.clearfix{zoom:1}
@font-face {font-family: "picicon";
    src: ; /* ie9*/
    src:  format('embedded-opentype'), /* ie6-ie8 */
     format('woff'),
     format('truetype'), /* chrome, firefox, opera, safari, android, ios 4.2 */
     format('svg'); /* ios 4.1- */
}
.picview-magnify-list{}
.picview-magnify-list li{display:inline-block;margin-right:10px;width: 32.5%;float: left;margin-bottom: 20px;overflow: hidden;}
.picview-magnify-list li a{display:block;overflow:hidden;margin-bottom: 20px;}
.picview-magnify-list li a img{max-height: 100%;}

.magnify-toolbar .magnify-btn,.magnify-btn-close,.magnify-loader{
    font-family: "picicon" !important;
    font-size: 25px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@-webkit-keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.magnify-modal {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #333;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    cursor: default;
}

@media (max-width:768px){
.magnify-modal {
    position: fixed;
    z-index: 9999;
    margin: 5%;
    width: 90% ! important;
    height: 340px ! important;
    background-color: #333;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    cursor: default;
    left: 0px ! important;
    top: 200px ! important;
}
.picview-magnify-list li{display:inline-block;margin-right:10px;width: 47%;float: left;margin-bottom: 20px;overflow: hidden;}
.picview-magnify-list li a{display:block;overflow:hidden;margin-bottom: 20px;}
.picview-magnify-list li a img{max-height: 100%;}

.magnify-image{/* display:none; */position:relative;padding: 45px 0 0 3%;width: 94%! important;    left: 0px! important;
    top: 0px! important;}
.magnify-stage{position:absolute;left:0;right:0;bottom:0;top:0;border:none;overflow:hidden;}

}

.magnify-header {
    position: relative;
    height: 40px;
    z-index:9;
}

.magnify-footer {
    height: 50px;
    bottom: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index:9;
}

.magnify-toolbar{
    display: inline-block;
    height: 50px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.magnify-toolbar .magnify-btn{display:inline-block;width:50px;height:50px;margin:0;color:#999;line-height:50px;}
.magnify-btn-close{width:40px;height:40px;margin:0;color:#999;line-height:40px;position: absolute;right:0;top:0;font-size:15px;text-align:center;}
.magnify-toolbar .magnify-btn:hover,.magnify-btn-close:hover{color:#fff;}


.magnify-btn-close:before{content: "\ea4f"}
.magnify-btn-zoomin:before{content: "\e7dd"}
.magnify-btn-zoomout:before{content:'\e7dc'}
.magnify-btn-prev:before{content:'\e624'}
.magnify-btn-next:before{content:'\e9ce'}
.magnify-btn-fullscreen:before{content:'\e63f'}
.magnify-btn-actualsize:before{content:'\e615'}
.magnify-btn-rotateleft:before{content:'\ece3'}
.magnify-btn-rotateright:before{content:'\ece4'}
.magnify-loader:before{content:'\e600'}
.magnify-loader{
    -webkit-animation: icon-spin 1s infinite steps(8);
    -o-animation: icon-spin 1s infinite steps(8);
    animation: icon-spin 1s infinite steps(8);
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    color:#999;
    font-size:35px;
    position:absolute;
    left:50%;
    margin-left:-25px;
    top:40%;
}

.magnify-title{font-size:14px;white-space: nowrap;text-overflow: ellipsis;user-select: none;overflow:hidden;color:#fff;padding:0 40px 0 15px;line-height:40px;}

.magnify-image{/* display:none; */position:relative;padding: 45px 0 0 3%;width: 750px;/* height: 600px; */}
.magnify-stage{position:absolute;left:0;right:0;bottom:0;top:0;border:none;overflow:hidden;}

.is-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.is-grabbing {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}