锘?share-box { display: flex; position: absolute; _position: absolute; bottom: 100px; height: 30px; bottom: -52px; left: -57px; z-index: 999; } .share-box > div:first-child { width: 48px; color: white; line-height: 30px; } .share-box > div { width: 30px; height: 30px; float: left; cursor: pointer; border-radius: 4px; background-size: contain; margin: 0 3px; } #share-qrcode, #share-qzone, #share-sina, #share-qq { width: 25px; height: 25px; } #share-qrcode { background: url(/Images/wechat.png) no-repeat; background-position: center center; background-size: 100% 100%; } #share-qzone { background: url(/Images/qqzone.png) no-repeat; background-position: center center; background-size: 100% 100%; } #share-sina { background: url(/Images/weibo.png) no-repeat; background-position: center center; background-size: 100% 100%; } #share-qq { background: url(/Images/qq.png) no-repeat; background-position: center center; background-size: 100% 100%; } .jsmodern-share { position: fixed; top: 50%; left: 50%; width: 300px; height: 335px; z-index: 999999; background: #fff; border: #ddd solid 1px; border-radius: 10px; box-shadow: #ddd 0 0 20px; overflow: hidden; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } .jsmodern-share p { display: block; height: 20px; text-align: center; font-size: 18px; margin: 15px 0 20px 0 } .jsmodern-share div { width: 260px; height: 260px; margin: 0 auto } .jsmodern-share b { position: absolute; width: 20px; height: 20px; background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA/UlEQVQ4T8WU7ZEBQRCGHxFciQARIBJEcGRABFYEZIAIEAkyIAMhqFdtV7WpabuOqptfM9Pdz0x/NvjyalTwesAg0TkAp8guAg6BJdAODC/ADNin8hxwA/zWjIR0J143Bb4DM84T1APl5s69dga6wU9T2cjc90DFpVUCbkATGAPrBCoX9Svp/JQy2Xa0N6CyeQwMPdRguYf6yr4BC2Cecc8DJNbPcjDJFkBRBZSiQbWPYP8H/LPLX0+KYvBJ2VytTV8Vth6IelnDQV7Zyha2lUXdPjbYtsz+4/zpcHiCRUDdq69XrhXTmlfMpnXHlzdWnAT3SzPw7QEbDJnq6ztc3EQVa6MIgAAAAABJRU5ErkJggg==); right: 4px; top: 4px; cursor: pointer; color: #ccc; opacity: .1; transition: .1s } .jsmodern-share b:hover { opacity: .5 } .jsmodern-marquee { overflow: hidden } .jsmodern-marquee-inner { float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important } .jsmodern-marquee-default, .jsmodern-marquee-repeat { float: left; margin: 0 !important; padding: 0 !important; background: transparent !important } .jsmodern-marquee-part { display: block; float: left } .jsmodern-picture-container { display: block; position: relative; overflow: hidden } .jsmodern-picture-container a { display: block; color: #fff; text-decoration: none } .jsmodern-picture-container img { border: 0 } .jsmodern-picture-inner { position: absolute; height: 100%; top: 0; left: 0; overflow: hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .jsmodern-picture-part { overflow: hidden } .jsmodern-picture-fade { width: 100% } .jsmodern-picture-fade .jsmodern-picture-part { position: absolute; display: none } .jsmodern-picture-slide .jsmodern-picture-part { float: left } .jsmodern-picture-slide img { display: block } .jsmodern-picture-dot { position: absolute; bottom: 15px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .jsmodern-picture-dot b { display: block; float: left; width: 10px; height: 10px; background: #777; border-radius: 5px; cursor: pointer; margin: 0 5px; transition: .4s } .jsmodern-picture-dot b.active { background: #fff } .jsmodern-picture-prev, .jsmodern-picture-next { display: block; position: absolute; top: 50%; width: 17px; height: 32px; margin-top: -16px; cursor: pointer; background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAB7klEQVR42s3XbUtaYRzH8euhqUetZC1Dy1q1mLhX0hvxjeyBIIMV1YpuHOkiBmNsc60dvGmNQS/KfR/8ghAOF8frXLIHH5D/+d898fjXjMfj/4JL8XPsIiW7is10kSI+ootAuooVZ7XIIjr4hjKMlBXrKMfrIvP4gB4qk88V6yln3tciBVzgBqtReXp2o9xC0ovkcYZbVG35yrlVTT6pRXI4QYh1xayUG6o257pIgPfo4wVMHKrpq0cw7SJZHGKATcViU+1AvbJxF8lgHyNswzjaVq999bYvosR3uMOOYs7U6069M7ZF0niLe7yCSZJ63mtGOmqRObTwBzUYT2qa0cLc5CIpNPEXdRjP6prV1Gxj9OENHvAaZhY060GzU4/vig5CLM1qEc0KNTt4GvwkPpeJnPf04TI+4xrPfC2h3teatRz19S3hC66gAyc56nmlGSXbC20FX9GFDhx36tVV7xXrm1XK+I5LLLguoR6X6lmO+6NXwQ+0oWsrPtW21asy7Rmwhp84RyHuEqo5V48118Ooil84RR5xrrpT1VaTOhU3EOLYdm1JTrmhao3NNNfWkeXaCpSjq87P34ktDHEQcW1l9WyoXK9/sF5ihL2JAyej2Eg5Jg6Xa+s3WkhJS7GprjrXA6eBrDQUMx4X8e8fwj0L7GH1LqcAAAAASUVORK5CYII=) no-repeat } .jsmodern-picture-prev { margin-left: 15px } .jsmodern-picture-next { right: 0; margin-right: 15px; background-position: -17px 0 } .jsmodern-video { background: #000; position: relative; overflow: hidden; z-index: 10 } .jsmodern-video-panel { position: absolute; bottom: 0; left: 0; z-index: 2147483648; width: 100%; height: 40px; line-height: 40px; color: #fff; background: rgba(0,0,0,.8); -webkit-user-select: none; -moz-user-select: none; user-select: none } .jsmodern-video-panel.jsmodern-video-panelFull { left: 50%; -webkit-transform: translate(-50%,-10px); -ms-transform: translate(-50%,-10px); transform: translate(-50%,-10px); padding: 3px 5px; border-radius: 8px } .jsmodern-video-linebox { height: 6px; background: rgba(255,255,255,.25); border-radius: 3px; width: 460px; width: -webkit-calc(100% - 305px); width: -moz-calc(100% - 305px); width: calc(100% - 305px); float: left; margin: 17px 0 0 15px; position: relative; cursor: pointer } .jsmodern-video-pass { position: absolute; border-radius: 3px; height: 100%; background: #F06000 } .jsmodern-video-linedot { width: 6px; height: 6px; background: #fff; border-radius: 3px; -webkit-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); position: absolute } .jsmodern-video-panel b { cursor: pointer } .jsmodern-video-panel b, .jsmodern-video-panel span { display: block; float: left } .jsmodern-video-panel span { font-size: 12px; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none } .jsmodern-video-start { margin-left: 10px } .jsmodern-video-start + span { width: 14px; height: 12px; text-align: center; line-height: 12px; font-size: 10px; overflow: hidden; margin-top: 13px; -webkit-transform: scale(1,0.9) translateY(1px); -ms-transform: scale(1,0.9) translateY(1px); transform: scale(1,0.9) translateY(1px); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top } .jsmodern-video-start, .jsmodern-video-end { width: 39px; text-align: center } .jsmodern-video-volumebox { width: 80px; height: 6px; background: rgba(255,255,255,.25); border-radius: 3px; float: left; margin: 18px 0 0 7px; position: relative; cursor: pointer } .jsmodern-video-volumeline { width: 40px; height: 6px; background: #F06000; border-radius: 3px; margin-top: 0 } .jsmodern-video-volumedot { width: 6px; height: 6px; background: #fff; border-radius: 3px; margin: -6px 0 0 37px; -webkit-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); position: absolute } .jsmodern-video-play, .jsmodern-video-volume, .jsmodern-video-fullin { width: 18px; height: 18px; margin-top: 11px; background-position: center; background-repeat: no-repeat } .jsmodern-video-play { margin-left: 10px; background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAe0lEQVR42q2UQRGAIBREiWAEIhjhRzCKDbCBRjGCDaQBRqDBdzntgRvLm3nXN6sMhIa7G0xBgqHGC1c9RNKcENeZHiInXLQQKdDUUL9OD3GdGOrXaSGSZ4QuddEDo/KPPrgpx1/hwc8YC90wKlckQ1MubYW79IzwOMf4AZCzZlJ6pNv5AAAAAElFTkSuQmCC) } .jsmodern-video-pause { background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAANUlEQVR42u3MMQoAAAgCwP4/9aR+VjQINtTcoNBicobkTNiS/vEQvSBBggR9hILOD8h5i74A46kzKYwr0EYAAAAASUVORK5CYII=) } .jsmodern-video-volume { margin-left: 15px; background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAqklEQVR42tWT0QmDMBCGHcENXMEBhGaL9rEjZATffKwDZJdmgy7QHZo33zz/0AscBmNaCOIPH3Ke+USTq84ZIrqDdnXPgGuuoAVP4KMi0TddSlCDB5BR3GvEcy/wCYUCF8HNNwFtiBwwQco9jSKKBZQQaa4brt+en0W8eAJGiN2/IusRIiouKv9puA5bP7uXhDfsbP8gtn8GOnUgx8wD6XJHxO6NSNGhPT4LSrtjI5LQNtEAAAAASUVORK5CYII=) } .jsmodern-video-muted { background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAA00lEQVR42s2UsQ3CMBBFqZAokNLQoozgCWJ3NAxAg5QRGIEFEOkpgBFgAbIKC0AoU5nv6CJ9GQI6lIIvPcXxyd93di4D730v9Gf0Xc1mOTA0pTMKi8EFBDm1EQIJ2AKWldiw64wcsMQC3EGsDEzBhLPAM5XBi0r/XjNwBUfKxMimhcYoAzsZ78mkAkZlJBUc5L1uTbSlWbrJWuZOYU5tFJVzbsvUGs3BDTzEkMtsDnsdsQJVR0YbsOTrlzXJpw+yACwnsfGvLVLqWkTftCM2+r//0RPE3HMNwpwYwQAAAABJRU5ErkJggg==) } .jsmodern-video-fullin { margin-left: 15px; background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAKlBMVEVMaXH////////////////////////////////////////////////////m1kuZAAAADXRSTlMAYBAw79DwIM9wgG9/QM+KqQAAAF5JREFUeNqNj0sSwCAIQ6Pit+X+1y2GOs7UTbNA8kYjQE05wpTK7LG8EwcdrwZB7hrcBx1FYfcDCY9UEGdbrFbiBIqpFf90PmGo7NDvtwJt1x7slmN0graWEwIny+sDBBUDznqlFGYAAAAASUVORK5CYII=) } .jsmodern-video-fullout { margin-left: 15px; background-image: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAJ1BMVEVMaXH////////////////////////////////////////////////c+C/6AAAADHRSTlMAgBDQz39QIMBAML9Nf8RqAAAAaElEQVR42r2QQQ7AIAgEV6CIlv+/t3Ap3E2cyyojxIBb7JfqQu/+z+ZCIAU0QtzqEbtMGcCIcCZ0454iIuvFLDHRICkhvUNHsICVqThBnyBHZSqK4+/2Ok9OEdGNOdcSuS1xW2+3jUt8eaUDz3DmFVcAAAAASUVORK5CYII=) } b.jsmodern-video-fullFalse { opacity: .5; cursor: default } .jsmodern-dialog-container { position: fixed; width: 100%; height: 100%; z-index: 2147483649; top: 0; left: 0; background: rgba(0,0,0,.6); opacity: 0 } .jsmodern-dialog { position: fixed; top: -10px; left: 50%; width: 500px; min-width: 500px; height: auto; overflow: hidden; padding: 15px; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); background: #fff; border-radius: 6px; border: #555 solid 1px; box-shadow: 0 0 15px rgba(0,0,0,.4); opacity: 0 } .jsmodern-dialog-title { text-align: left; font-size: 16px; font-weight: bold; color: #000; word-wrap: break-word; word-break: normal } .jsmodern-dialog-content { width: 100%; height: auto; min-height: 60px; overflow: hidden; word-wrap: break-word; word-break: normal; margin-top: 10px; font-size: 14px; color: #333; line-height: 160% } .jsmodern-dialog > span { display: block; float: right; height: 30px; line-height: 30px; font-size: 13px; padding: 0 12px; cursor: pointer; margin: 13px 0 0 10px; border-radius: 4px; border: #ccc solid 1px; transition: .25s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .jsmodern-dialog > span.jsmodern-dialog-sure { background: #2F7CBE; border-color: #2F7CBE; color: #fff } .jsmodern-dialog > span.jsmodern-dialog-sure:hover { background: #1563A6; border-color: #1563A6 } .jsmodern-dialog > span.jsmodern-dialog-cancel:hover { background: #eee } .jsmodern-scrollBar-container { overflow: hidden; position: relative } .jsmodern-scrollBar-inner { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .jsmodern-scrollbar { position: absolute; top: 0; right: 2px; width: 6px; background: rgba(0,0,0,.3); border-radius: 3px; z-index: 10px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .jsmodern-lazyload { display: block; opacity: 0 } .jsmodern-page-content { text-align: center; margin-left: auto; margin-right: auto } .jsmodern-page-target > * { display: none } .jsmodern-page { height: 38px; display: inline-block; overflow: hidden; border-radius: 19px; border: #e8e8e8 solid 1px; margin: 0 auto } .jsmodern-page > div i, .jsmodern-page > i { display: block; float: left; width: 40px; height: 38px; line-height: 38px; font-size: 13px; text-align: center; cursor: pointer; font-style: normal; background: #f5f5f5; transition: .15s; font-weight: bold; color: #333 } .jsmodern-page i { border-right: #e3e3e3 solid 1px; border-left: #fff solid 1px } .jsmodern-page > div { float: left; max-width: 420px; overflow: hidden } .jsmodern-page > div div { height: 38px } .jsmodern-page i.active { background: #E04636; color: #fff; box-shadow: rgba(0,0,0,.2) 0 0 10px inset; border-right-color: #fff } .jsmodern-page i:hover { color: #E04636 } .jsmodern-page i.active:hover { color: #fff } .jsmodern-page > i span { display: inline-block; font-size: 20px } .jsmodern-page > i:first-child { border-radius: 19px 0 0 19px } .jsmodern-page > i:last-child { border-radius: 0 19px 19px 0 } i.jsmodern-page-first, i.jsmodern-page-last, i.jsmodern-page-next, i.jsmodern-page-prev { line-height: 33px }