*{margin:0;padding:0;border:0;}
html,body{background: #efefef;width: 100%;height: 100%;}
#canvas{width: 100%;height: 100%;}
a{text-decoration:none;}
ul,li{list-style: none;}
.flipbook-viewport{margin:0 auto;overflow:hidden;display: flex;justify-content: center;align-items: center;width: 100% !important;height: 100% !important;position: relative;}
.flipbook-viewport .container{left:50%;top:50%;position: absolute;}
.flipbook{box-shadow: 0 0 15px rgb(40 40 40);margin: 0 auto 0 auto !important}
.flipbook img{width:100%;height:100%;}
.toolBar{position: fixed;width:100%;height:40px;bottom:0;left:0;background-color: rgb(244, 249, 251);box-shadow: 0 0 15px rgb(40 40 40);z-index: 9999;}
.buttonBar{display: flex;height:100%;justify-content: center;align-items: center;}
.button{display: flex;padding:8px;align-items: center;cursor: pointer;}
.dialog{background-color: rgb(36, 101, 122);color:#fff;width:250px;position: absolute;left:10px;top:10px;display: none;z-index: 99;}
.in{-webkit-animation: moveFromLeftFade 1s ease 0s 1 normal both;animation: moveFromLeftFade 1s ease 0s 1 normal both;}
.out{-webkit-animation: moveToLeftFade 1s ease 0s 1 normal both;animation: moveToLeftFade 1s ease 0s 1 normal both;}
.dialog a{color:#fff;}
.dialog .tit,.dialog .search{padding: 10px;position: relative;}
.dialog .tit span{margin-left: 20px;position: relative;}
.dialog .tit span::before{content: '';display: block;position: absolute;width:18px;height: 18px;top:3px;left:-20px;background: url(/cms/templates/30662798690640000/images/ml2.png) center no-repeat;background-size: cover;}
.dialog .tit{display: flex;justify-content: space-between;}
.dialog .close{width:18px;height:18px;}
.dialog .input_search{width:220px;height: 26px;}
.dialog .searchButton{position: absolute;top:15px;right: 15px;}

.st_tree{padding:0;width:100%;height:86%;margin:0 auto;overflow-y:auto;}
.st_tree a{text-decoration:none;}
/*.st_tree a:hover{color:#f33;text-decoration:underline;}*/
.st_tree ul.txtlist{padding:0;margin:0;}
.st_tree ul.txtlist li{font-size:15px;color:#222;line-height:18px;cursor:pointer;list-style:none;padding:5px 5px 5px 15px;position: relative;}
.st_tree ul.txtlist li.sel,.st_tree ul li:hover{background: rgba(255,255,255,0.1);}
.st_tree .folder::before{content: '';display: block;position: absolute;width: 4px;height: 9px;top: 10px;left: 5px; background:url(/cms/templates/30662798690640000/images/st_icon.png) center no-repeat;background-size: cover;}
.st_tree .open::before{content: '';display: block;position: absolute;width: 7px;height: 9px;top: 10px;left: 5px; background:url(/cms/templates/30662798690640000/images/st_icon_open.png) center no-repeat;background-size: cover;}

.st_tree ul.imglist{padding:0;margin:0;display: flex;flex-wrap: wrap;padding:5px;}
.st_tree ul.imglist li{width: 5vw;height: 6.7vw;margin: 5px;position: relative;cursor: pointer;}
.st_tree ul.imglist img{width: 100%;height: 100%;}
.st_tree ul.imglist li:hover:before{content: attr(data-page);position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);display: flex;align-items: center;justify-content: center;z-index: 2;}
.st_tree ul.imglist li.act:after{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);display: flex;align-items: center;justify-content: center;}

.share{display: none;}

@-webkit-keyframes moveFromLeftFade {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
}

@keyframes moveFromLeftFade {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@-webkit-keyframes moveToLeftFade {
    from {
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
}

@keyframes moveToLeftFade {
    from {
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media screen and (max-width: 1080px) {
    .toolBar{height: 10vw;}
    .button img{width: 5vw;height: 5vw;}
    .toolBar input{width: 9vw;height: 5vw;font-size: 3vw;}
    .dialog{width: 100vw;left: 0;top: 0;}
    .dialog .tit span{font-size: 3vw;margin-left: 3vw;}
    .dialog .tit span::before{width:3vw;height: 3vw;top:.5vw;left:-3vw;}
    .dialog .close{width:3vw;height:3vw;}
    .dialog .input_search{width:97vw;height: 5vw;font-size: 3vw;}
    .dialog .searchButton{width:4vw;height: 4vw;top:2vw;right: 2vw;}
    .st_tree ul.txtlist li{font-size: 3vw;line-height:5vw;padding:.5vw .5vw .5vw 3vw;}
    .st_tree .folder::before{width: 1vw;height: 2vw;top: 2.5vw;left: 1vw;}
    .st_tree .open::before{width: 2vw;height: 2.5vw;top: 2.5vw;left: .5vw;}
    .st_tree ul.imglist li{width: 25vw;height: 33.5vw;margin: 3vw 2vw;}
    .st_tree ul.imglist li:before{content: attr(data-page);position: absolute;left: 0;bottom: -4vw;font-size: 1vw;width: 100%;display: flex;align-items: center;justify-content: center;}			
    .share{width: 100%;height: 100%;position: fixed;left: 0;top: 0;display: none;z-index: 999;background: #232323;opacity: 0.9;}
    .mask{width: 100%;height: 100%;background: #000000;opacity: 0.5;}
    .share img{position: absolute;width: 92vw;height: 96vw;margin-left: 4vw;margin-top: 0;left: 0;top: 0;}
}