@charset "utf-8"; .jp-audio :focus, .jp-audio-stream :focus, .jp-video :focus { outline: 0 } .jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner { border: 0 } .jp-audio, .jp-audio-stream, .jp-video { font-size: 16px; font-family: Verdana, Arial, sans-serif; line-height: 1.6; color: #666; border: 1px solid #009be3; background-color: #eee } .jp-audio { width: 420px } .jp-audio-stream { width: 182px } .jp-video-270p { width: 480px } .jp-video-360p { width: 640px } .jp-video-full { width: 480px; height: 270px; position: static !important; position: relative } .jp-video-full div div { z-index: 1000 } .jp-video-full .jp-jplayer { top: 0; left: 0; position: fixed !important; position: relative; overflow: hidden } .jp-video-full .jp-gui { position: fixed !important; bottom: 0; left: 0; width: 100%; z-index: 1001 } .jp-video-full .jp-interface { position: absolute !important; position: relative; bottom: 0; left: 0 } .jp-interface { position: relative; background-color: #eee; width: 100% } .jp-audio .jp-interface, .jp-audio-stream .jp-interface { height: 80px } .jp-video .jp-interface { border-top: 1px solid #009be3 } .jp-controls-holder { clear: both; width: 440px; margin: 0 auto; position: relative; overflow: hidden; top: -8px } .jp-interface .jp-controls { margin: 0; padding: 0; overflow: hidden } .jp-audio .jp-controls { width: 380px; padding: 20px 20px 0 } .jp-audio-stream .jp-controls { position: absolute; top: 20px; left: 20px; width: 142px } .jp-video .jp-type-single .jp-controls { width: 78px; margin-left: 200px } .jp-video .jp-type-playlist .jp-controls { width: 134px; margin-left: 172px } .jp-video .jp-controls { float: left } .jp-controls button { display: block; float: left; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer } .jp-play { width: 40px; height: 40px; background: url(../image/run-sprit.png) no-repeat } .jp-play:focus { background: url(../image/run-sprit.png) -41px 0 no-repeat } .jp-state-playing .jp-play { background: url(../image/run-sprit.png) 0 -42px no-repeat } .jp-state-playing .jp-play:focus { background: url(../image/run-sprit.png) -41px -42px no-repeat } .jp-next, .jp-previous, .jp-stop { width: 28px; height: 28px; margin-top: 6px } .jp-stop { background: url(../image/run-sprit.png) 0 -83px no-repeat; margin-left: 10px } .jp-stop:focus { background: url(../image/run-sprit.png) -29px -83px no-repeat } .jp-previous { background: url(../image/run-sprit.png) 0 -112px no-repeat } .jp-previous:focus { background: url(../image/run-sprit.png) -29px -112px no-repeat } .jp-next { background: url(../image/run-sprit.png) 0 -141px no-repeat } .jp-next:focus { background: url(../image/run-sprit.png) -29px -141px no-repeat } .jp-progress { overflow: hidden; background-color: #ddd } .jp-audio .jp-progress { position: absolute; top: 32px; height: 15px } .jp-audio .jp-type-single .jp-progress { left: 110px; width: 186px } .jp-audio .jp-type-playlist .jp-progress { left: 166px; width: 130px } .jp-video .jp-progress { top: 0; left: 0; width: 100%; height: 10px } .jp-seek-bar { background: url(../image/run-sprit.png) 0 -202px repeat-x; width: 0; height: 100%; cursor: pointer } .jp-play-bar { background: url(../image/run-sprit.png) 0 -218px repeat-x; width: 0; height: 100% } .jp-seeking-bg { background: url(../image/run-sprit.png) } .jp-state-no-volume .jp-volume-controls { display: none } .jp-volume-controls { position: absolute; top: 32px; left: 308px; width: 200px } .jp-audio-stream .jp-volume-controls { left: 70px } .jp-video .jp-volume-controls { top: 12px; left: 50px } .jp-volume-controls button { display: block; position: absolute; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer } .jp-mute, .jp-volume-max { width: 18px; height: 15px } .jp-volume-max { left: 74px } .jp-mute { background: url(../image/run-sprit.png) 0 -170px no-repeat } .jp-mute:focus { background: url(../image/run-sprit.png) -19px -170px no-repeat } .jp-state-muted .jp-mute { background: url(../image/run-sprit.png) -60px -170px no-repeat } .jp-state-muted .jp-mute:focus { background: url(../image/run-sprit.png) -79px -170px no-repeat } .jp-volume-max { background: url(../image/run-sprit.png) 0 -186px no-repeat } .jp-volume-max:focus { background: url(../image/run-sprit.png) -19px -186px no-repeat } .jp-volume-bar { position: absolute; overflow: hidden; background: url(../image/run-sprit.png) 0 -250px repeat-x; top: 5px; left: 22px; width: 46px; height: 5px; cursor: pointer } .jp-volume-bar-value { background: url(../image/run-sprit.png) 0 -256px repeat-x; width: 0; height: 5px } .jp-audio .jp-time-holder { position: absolute; top: 50px } .jp-audio .jp-type-single .jp-time-holder { left: 110px; width: 186px } .jp-audio .jp-type-playlist .jp-time-holder { left: 166px; width: 130px } .jp-current-time, .jp-duration { width: 60px; font-size: .64em; font-style: oblique } .jp-current-time { float: left; display: inline; cursor: default } .jp-duration { float: right; display: inline; text-align: right; cursor: pointer } .jp-video .jp-current-time { margin-left: 20px } .jp-video .jp-duration { margin-right: 20px } .jp-details { font-weight: 700; text-align: center; cursor: default } .jp-details, .jp-playlist { width: 100%; background-color: #ccc; border-top: 1px solid #009be3 } .jp-type-playlist .jp-details, .jp-type-single .jp-details { border-top: none } .jp-details .jp-title { margin: 0; padding: 5px 20px; font-size: .72em; font-weight: 700 } .jp-playlist ul { list-style-type: none; margin: 0; padding: 0 20px; font-size: .72em } .jp-playlist li { padding: 5px 0 4px 20px; border-bottom: 1px solid #eee } .jp-playlist li div { display: inline } div.jp-type-playlist div.jp-playlist li:last-child { padding: 5px 0 5px 20px; border-bottom: none } div.jp-type-playlist div.jp-playlist li.jp-playlist-current { list-style-type: square; list-style-position: inside; padding-left: 7px } div.jp-type-playlist div.jp-playlist a { color: #333; text-decoration: none } div.jp-type-playlist div.jp-playlist a.jp-playlist-current, div.jp-type-playlist div.jp-playlist a:hover { color: #0d88c1 } div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { float: right; display: inline; text-align: right; margin-right: 10px; font-weight: 700; color: #666 } div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { color: #0d88c1 } div.jp-type-playlist div.jp-playlist span.jp-free-media { float: right; display: inline; text-align: right; margin-right: 10px } div.jp-type-playlist div.jp-playlist span.jp-free-media a { color: #666 } div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover { color: #0d88c1 } span.jp-artist { font-size: .8em; color: #666 } .jp-video-play { width: 100%; overflow: hidden; cursor: pointer; background-color: transparent } .jp-video-270p .jp-video-play { } .jp-video-360p .jp-video-play { margin-top: -360px; height: 360px } .jp-video-full .jp-video-play { height: 100% } .jp-video-play-icon { position: relative; display: block; width: 112px; height: 100px; margin-left: -56px; margin-top: -50px; left: 50%; top: 50%; background: url(../image/run-sprit.png) no-repeat; text-indent: -9999px; border: none; cursor: pointer } .jp-video-play-icon:focus { background: url(../image/run-sprit.png) 0 -100px no-repeat } .jp-jplayer, .jp-jplayer audio { width: 0; height: 0 } .jp-jplayer { background-color: #000 } .jp-toggles { padding: 0; margin: 0 auto; overflow: hidden } .jp-audio .jp-type-single .jp-toggles { width: 25px } .jp-audio .jp-type-playlist .jp-toggles { width: 55px; margin: 0; position: absolute; left: 325px; top: 50px } .jp-video .jp-toggles { position: absolute; right: 16px; margin: 10px 0 0; width: 100px } .jp-toggles button { display: block; float: left; width: 25px; height: 18px; text-indent: -9999px; line-height: 100%; border: none; cursor: pointer } .jp-full-screen { background: url(../image/run-sprit.png) 0 -310px no-repeat; margin-left: 20px } .jp-full-screen:focus { background: url(../image/run-sprit.png) -30px -310px no-repeat } .jp-state-full-screen .jp-full-screen { background: url(../image/run-sprit.png) -60px -310px no-repeat } .jp-state-full-screen .jp-full-screen:focus { background: url(../image/run-sprit.png) -50px -100px no-repeat !important } .jp-repeat { background: url(../image/run-sprit.png) 0 -290px no-repeat } .jp-repeat:focus { background: url(../image/run-sprit.png) -30px -290px no-repeat } .jp-state-looped .jp-repeat { background: url(../image/run-sprit.png) -60px -290px no-repeat } .jp-state-looped .jp-repeat:focus { background: url(../image/run-sprit.png) -90px -290px no-repeat } .jp-shuffle { background: url(../image/run-sprit.png) 0 -270px no-repeat; margin-left: 5px } .jp-shuffle:focus { background: url(../image/run-sprit.png) -30px -270px no-repeat } .jp-state-shuffled .jp-shuffle { background: url(../image/run-sprit.png) -60px -270px no-repeat } .jp-state-shuffled .jp-shuffle:focus { background: url(../image/run-sprit.png) -90px -270px no-repeat } .jp-no-solution { padding: 5px; font-size: .8em; background-color: #eee; border: 2px solid #009be3; color: #000; display: none } .jp-no-solution a { color: #000 } .jp-no-solution span { font-size: 1em; display: block; text-align: center; font-weight: 700 } /******************************************** ********瑙嗛 video 鏍峰紡閲嶅啓 ****************** **************************************************/ .jp-play, .jp-state-playing .jp-play, .jp-state-playing .jp-play:focus, .jp-play:focus, .jp-video-play-icon, .jp-video-play-icon:focus, .jp-next, .jp-previous, .jp-stop, .jp-stop:focus, .jp-full-screen, .jp-state-full-screen .jp-full-screen, .jp-full-screen:focus, .jp-close:hover, .jp-state-full-screen .jp-full-screen:focus, .jp-mute, .jp-volume-max, .jp-state-muted .jp-mute, .jp-close, .jp-mute:focus, .jp-state-muted .jp-mute:focus, .jp-volume-max:focus { background: url(../image/run-sprit.png) no-repeat; background-size: auto; } .jp-audio, .jp-audio-stream, .jp-video { border: none; } .jp-volume-controls button, .jp-volume-bar { position: static; float: left; margin-right: 10px; } .jp-controls { float: left; } .jp-mute, .jp-volume-max { width: 25px; height: 25px; } .jp-toggles button { width: 25px; height: 25px; } .jp-controls-holder { padding: 15px 20px 10px 20px; } .jp-video .jp-toggles { width: auto; margin: 0px; position: relative; float: right; right: 0px; } .jp-video-def { position: relative; } .jp-jplayer { background: rgba(0, 0, 0, .8); } .jp-video { border: none; background: none; color: #fff; margin: 0 auto; } .jp-gui { position: relative; left: 0px; width: 100%; } .jp-current-time, .jp-duration { font-style: normal; } .jp-controls-holder { width: 100%; top: 0px; } .jp-video .jp-type-single .jp-controls { float: left; margin-left: 0px; width: auto; } .jp-video .jp-volume-controls { position: relative; left: 15px; top: -3px; width: auto; float: right; padding: 5px 5px 5px 15px; } .jp-video .jp-volume-controls-sel { background: rgba(255, 255, 255, .2); border-radius: 20px; } .jp-volume-bar { margin-top: 10px; margin-right: 15px; width: 90px; display: none; background: #999; visibility: hidden; overflow: visible; } .jp-volumn-dot { display: block; width: 15px; height: 15px; background: #fff; float: right; position: absolute; right: 0px; top: -5px; border-radius: 15px; } .jp-video .jp-interface { border: none; } .jp-video .jp-progress { height: 5px; background: #595959; } .jp-interface { background-color: rgba(0, 0, 0, .8); } .jp-progress { background: #595959; } .jp-play-bar { background: #cc191b; } .jp-stop { margin-top: 1px; } .jp-time-wrap { position: relative; float: left; line-height: 2.5; } .jp-video .jp-duration { color: #999; } .jp-current-time, .jp-duration { width: auto; margin: 0px 10px 0px 0px; } .jp-next, .jp-previous, .jp-stop { width: 24px; height: 24px; margin: 0px; } .jp-play { background-position: -10px 0px; width: 24px; height: 24px; margin: 0px 20px 0px 0px; } .jp-stop { background-position: -100px 2px; } .jp-stop:focus { background-position: -144px 2px; } .jp-state-playing .jp-play { background-position: -10px -33px; } .jp-play:focus, .jp-play:hover { background-position: -54px 0px; } .jp-state-playing .jp-play:focus, .jp-state-playing .jp-play:hover { background-position: -54px -33px; } .jp-video-play { position: absolute; top: 0px; z-index: 100; overflow: visible; height: calc(100% - 65px); } .jp-video-play-icon { width: 65px; height: 65px; margin-left: -33px; margin-top: -50px; background-position: -10px -193px; } .jp-video-play-icon:focus { background-position: -10px -193px; } .jp-full-screen, .jp-full-screen:focus { background-position: -10px -100px; } .jp-state-full-screen .jp-full-screen, .jpstate-full-screen .jp-full-screen:focus { background-position: -50px -100px; } .jp-full-screen, .jp-full-screen:focus { background-position: -10px -100px; } .jp-state-full-screen .jp-full-screen, .jp-state-full-screen .jp-full-screen:focus { background-position: -185px -100px; } .jp-video-play-icon:hover { opacity: .6; } .jp-mute, .jp-state-muted .jp-mute:focus { background-position: -10px -67px; } .jp-volume-max { background-position: -10px -67px; } .jp-state-muted .jp-mute { background-position: -100px -67px; } .jp-mute:focus { background-position: -100px -67px; } .jp-volume-max:focus { background-position: -50px -67px; } .jp-volume-bar-value { background: #f99334; position: relative; } .jp-seek-bar { background: #cccccc; } .jp-mask { background: rgba(0, 0, 0, .5); position: fixed; width: 100%; height: 100%; z-index: 100; left: 0px; top: 0px; } .jp-video-open { width: 800px; position: fixed; left: 50%; top: 50%; z-index: 101; margin-left: -400px; margin-top: -230px; } .jp-close { width: 50px; height: 50px; position: absolute; right: -40px; top: -40px; background-position: -100px -135px; z-index: 120; cursor: pointer; } .jp-close:hover { background-position: -10px -135px; } .jp-video-window { width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 50; } .jp-video-full { width: 100% !important; height: 100% !important; } .jp-video-full-style { left: 0px !important; top: 0px !important; margin-left: 0px !important; margin-top: 0px !important; } .jp-video video { object-fit: contain; } .jp-video-mob { top: 0px; margin-top: 0px; } .jp-video-mob .jp-video-play-icon { width: 32px; height: 32px; background-position: -10px -411px; margin-left: -16px; margin-top: -16px; } .jp-video-mob .jp-video-def { width: 100%; } .jp-video-mob .jp-video-play { top: 0px; height: 100%; } .jp-video-mob .jp-video-open { left: 0px; top: 0rem; margin: 0px; width: 100%; } .jp-video-mob .jp-close { display: none; } /******************************************** ********瑙嗛 video 鏍峰紡閲嶅啓 ****************** **************************************************/ .jp-play, .jp-state-playing .jp-play, .jp-state-playing .jp-play:focus, .jp-play:focus, .jp-video-play-icon, .jp-video-play-icon:focus, .jp-next, .jp-previous, .jp-stop, .jp-stop:focus, .jp-full-screen, .jp-state-full-screen .jp-full-screen, .jp-full-screen:focus, .jp-close:hover, .jp-state-full-screen .jp-full-screen:focus, .jp-mute, .jp-volume-max, .jp-state-muted .jp-mute, .jp-close, .jp-mute:focus, .jp-state-muted .jp-mute:focus, .jp-volume-max:focus { background: url(../image/run-sprit.png) no-repeat; background-size: auto; } .jp-audio, .jp-audio-stream, .jp-video { border: none; } .jp-volume-controls button, .jp-volume-bar { position: static; float: left; margin-right: 10px; } .jp-controls { float: left; } .jp-mute, .jp-volume-max { width: 25px; height: 25px; } .jp-toggles button { width: 25px; height: 25px; } .jp-controls-holder { padding: 15px 20px 10px 20px; } .jp-video .jp-toggles { width: auto; margin: 0px; position: relative; float: right; right: 0px; } .jp-video-def { position: relative; } .jp-jplayer { background: rgba(0, 0, 0, .8); } .jp-video { border: none; background: none; color: #fff; margin: 0 auto; } .jp-gui { position: relative; left: 0px; width: 100%; } .jp-current-time, .jp-duration { font-style: normal; } .jp-controls-holder { width: 100%; top: 0px; } .jp-video .jp-type-single .jp-controls { float: left; margin-left: 0px; width: auto; } .jp-video .jp-volume-controls { position: relative; left: 15px; top: -3px; width: auto; float: right; padding: 5px 5px 5px 15px; } .jp-video .jp-volume-controls-sel { background: rgba(255, 255, 255, .2); border-radius: 20px; } .jp-volume-bar { margin-top: 10px; margin-right: 15px; width: 90px; display: none; background: #999; visibility: hidden; overflow: visible; } .jp-volumn-dot { display: block; width: 15px; height: 15px; background: #fff; float: right; position: absolute; right: 0px; top: -5px; border-radius: 15px; } .jp-video .jp-interface { border: none; } .jp-video .jp-progress { height: 5px; background: #595959; } .jp-interface { background-color: rgba(0, 0, 0, .8); } .jp-progress { background: #595959; } .jp-play-bar { background: #cc191b; } .jp-stop { margin-top: 1px; } .jp-time-wrap { position: relative; float: left; line-height: 2.5; } .jp-video .jp-duration { color: #999; } .jp-current-time, .jp-duration { width: auto; margin: 0px 10px 0px 0px; } .jp-next, .jp-previous, .jp-stop { width: 24px; height: 24px; margin: 0px; } .jp-play { background-position: -10px 0px; width: 24px; height: 24px; margin: 0px 20px 0px 0px; } .jp-stop { background-position: -100px 2px; } .jp-stop:focus { background-position: -144px 2px; } .jp-state-playing .jp-play { background-position: -10px -33px; } .jp-play:focus, .jp-play:hover { background-position: -54px 0px; } .jp-state-playing .jp-play:focus, .jp-state-playing .jp-play:hover { background-position: -54px -33px; } .jp-video-play { position: absolute; top: 0px; z-index: 100; overflow: visible; height: calc(100% - 65px); } .jp-video-play-icon { width: 65px; height: 65px; margin-left: -33px; margin-top: -50px; background-position: -10px -193px; } .jp-video-play-icon:focus { background-position: -10px -193px; } .jp-full-screen, .jp-full-screen:focus { background-position: -10px -100px; } .jp-state-full-screen .jp-full-screen, .jpstate-full-screen .jp-full-screen:focus { background-position: -50px -100px; } .jp-video-play-icon:hover { opacity: .6; } .jp-mute, .jp-state-muted .jp-mute:focus { background-position: -10px -67px; } .jp-volume-max { background-position: -10px -67px; } .jp-state-muted .jp-mute { background-position: -100px -67px; } .jp-mute:focus { background-position: -100px -67px; } .jp-volume-max:focus { background-position: -50px -67px; } .jp-volume-bar-value { background: #f99334; position: relative; } .jp-seek-bar { background: #cccccc; } .jp-mask { background: rgba(0, 0, 0, .5); position: fixed; width: 100%; height: 100%; z-index: 100; left: 0px; top: 0px; } .jp-video-open { width: 800px; position: fixed; left: 50%; top: 50%; z-index: 101; margin-left: -400px; margin-top: -230px; } .jp-close { width: 50px; height: 50px; position: absolute; right: -40px; top: -40px; background-position: -100px -135px; z-index: 120; cursor: pointer; } .jp-close:hover { background-position: -10px -135px; } .jp-video-window { width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 50; } .jp-video-full { width: 100% !important; height: 100% !important; } .jp-video-full-style { left: 0px !important; top: 0px !important; margin-left: 0px !important; margin-top: 0px !important; } .jp-video video { object-fit: fill; } @media screen and (max-width:500px) { .jp-video-800p { width: 100%; } .jp-video-play { top: 0rem; height: 100%; } .jp-video-play-icon { margin-top: -0.8rem; } .jp-video-open { left: 0px; top: 0rem; margin: 0px; } .jp-close { display: none; } }