#media {position:relative; overflow:hidden; text-align:center; -webkit-user-select:none}
.fullscreen #media {max-width:none}

/* flash */
#fsPlayer {position:relative;}
    #fsPlayer object,
    #fsPlayer embed,
    #fsPlayer iframe {position:absolute; top:0; left:0; right: 0; bottom: 0; width:100% !important; height:100% !important}

#fsPlayer .error    {box-sizing:border-box; margin:25px; padding-bottom:20px; text-align:left; border-bottom:1px solid #888; font-size:19px; text-shadow:0 2px 2px #000; color:#fff}
#fsPlayer .solution {line-height:2; margin:25px; text-align:left; font-size:13px; color:#fff}

#seekholder {position:absolute; top:0; left:0; z-index:999}
/* html5 player */

.fs-player  {text-align:center; background-color:black; /*overflow:hidden;*/ height:100%; /* for mobile */ outline:0}

.fs-player .fs-videoWrap {}
    .fs-player .fs-videoWrap video,
    .fs-player .fs-videoWrap canvas {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto}

    .fs-player .fs-videoWrap video  {max-width:100%; max-height:100%; /*width:100%; height:100%; */z-index:20}
    .fs-player .fs-videoWrap .videoCanvas   {visibility:hidden; display:block; z-index:15}
    .fs-player .fs-videoWrap .seekholder    {position:absolute; top:0; left:0; z-index:15}

.fs-player.fullscreen   {width:100%; height:100%; position:fixed !important; top:0; left:0; right:0 !important; bottom:0 !important; padding:0; z-index:9999; background:#000; min-width:none} /* this class very important */
.fs-player.fullscreen .fs-videoWrap video {width:auto; height:auto; max-width:100% !important; max-height:100% !important; margin:auto !important}

.fs-player.listing {}
.fs-player.listing .fs-player-action {display: none;}

.fs-player.listing .fs-player-list-next {display: block;}
.fs-player.listing .fs-player-list {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}

    .fs-playBtn             {opacity:.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; cursor:pointer; background:url(../icon/play.png) no-repeat center center; transition:all .5s; background-size:100px 100px}
    .fs-playBtn:hover       {opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background-size:120px 120px}

.fs-player .fs-video-controls   {position:absolute; bottom:5px; width:100%; height:30px; z-index:100; transition:opacity .2s ease-in}
    .fs-video-controls.inactive {opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}

    .control-hide .fs-video-controls {display:none  !important; opacity:0  !important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
    .control-show .fs-video-controls {display:block !important; opacity:.8 !important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}

    .fs-player .fs-video-controls > .separator  {float:left; width:10px}

.boderRadius {float:left; width:5px; height:30px; background-color:rgba(25, 25, 25, .8)}
    .boderRadius.left   {border-top-left-radius:5px;    border-bottom-left-radius:5px}
    .boderRadius.right  {border-top-right-radius:5px;   border-bottom-right-radius:5px}

.fs-player-list {position: absolute; top: 0; left: 0; right: 0; bottom: 0; white-space: nowrap;z-index: 75; transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);}
.fs-player-list-box {position: relative; width: 100%; height: 100%; white-space: normal; display: inline-block; vertical-align: top;}
.fs-player-list-item {position: relative; display: inline-block; background-size: cover; background-color: #000; box-sizing: border-box; border: 1px solid #000; border-right: 0; vertical-align: top; background-position: center center; background-repeat: no-repeat;}
a.fs-player-list-item { cursor:pointer; }
.fs-player-list-item .text {opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; background-color: rgba(0, 0, 0, 0.7); color: #fff; transition: opacity 0.3s ease;}
.fs-player-list-item:hover {}
.fs-player-list-item:hover .text {opacity: 1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: opacity 0.3s ease;}
.fs-player-list-prev,
.fs-player-list-next {position: absolute; border-radius: 50%; z-index: 105; cursor:pointer;display:none;top; top:0;bottom: 0; height: 60px; width: 60px; margin:auto;background-repeat: no-repeat; background-position: center center;background-color: rgba(0,0,0,.3); }
.fs-player-list-prev:hover,
.fs-player-list-next:hover {background-color: rgba(0,0,0,.7); transition: background-color 0.3s ease;}
.fs-player-list-prev:hover {background-image: url(../icon/prev_hover.png);}
.fs-player-list-next:hover {background-image: url(../icon/next_hover.png);}
.fs-player-list-prev {left: 10px; background-image: url(../icon/prev.png); }
.fs-player-list-next {right: 10px;  background-image: url(../icon/next.png)}
.fs-player-list.c1r1 .fs-player-list-item {width: 100%; height: 100%}
.fs-player-list.c2r2 .fs-player-list-item {width: 50%; height: 50%}
.fs-player-list.c2r2 .fs-player-list-item:nth-child(2n+1) {border-right: 1px; }
.fs-player-list.c3r3 .fs-player-list-item {width: 33.3333%; height: 33.3333%}
.fs-player-list.c3r3 .fs-player-list-item:nth-child(3n+1) {border-right: 1px; }
.fs-player-list.c4r4 .fs-player-list-item {width: 25%; height: 25%}
.fs-player-list.c4r4 .fs-player-list-item:nth-child(4n+1) {border-right: 1px; }


/* bezel */

.fs-center-overlay {position:absolute; top:50%; left:50%; z-index:40; margin-top:-30px}
    .fs-bezel-fade {-webkit-transform:scale(1.8); -ms-transform:scale(1.8); transform:scale(1.8); opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition:all .4s ease-in}
        .fs-bezel-fade .play    {width:0; height:0; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:30px solid #fff}
        .fs-bezel-fade .pause   {width:10px; height:40px; margin-left:-5px; border-right:10px solid #fff; border-left:10px solid #fff; box-sizing: content-box;}

.control-hide .fs-center-overlay{display:none}

/* poster */
.fullscreen .fs-poster {display:none}
.fs-poster {position:absolute; top:0; bottom:0; left:0; right:0; max-width:100%; margin:auto; display:block; z-index:50}

/* play btn start */

.fs-play-wrap       {position:relative; box-sizing:border-box; float:left; width:50px; height:30px; cursor:pointer; border-radius:5px; background-color:rgba(25, 25, 25, 0.8)}
.fs-play-wrap:hover {background-color:#00adee}

    .fs-play-wrap .play         {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto}

    .fs-play-wrap .play.paused  {width:0; height:0; border-left:16px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent}
    .fs-play-wrap .play.playing {width:6px; height:16px; border-left:5px solid #fff; border-right:5px solid #fff; box-sizing: content-box;}

/* play btn end */

.fs-toggleList {display: inline-block; width: 16px; height: 16px; padding: 7px 5px; float: left; background-color: rgba(25, 25, 25, .8); line-height: 30px; cursor: pointer; box-sizing: content-box;}
.fs-toggleList:before {display: inline-block; vertical-align: top; content:""; width: 16px; height: 16px; background-image: url('../icon/list.png'); background-position: 0 0; background-repeat: no-repeat;}
.fs-toggleList:hover:before {  background-position: 0 -16px; }

/* paragraph */

.fs-index-wrap {position:relative; float:left; width:45px; height:30px; background-color:rgba(25, 25, 25, .8); cursor:pointer; text-overflow:ellipsis; white-space:nowrap}
    .fs-index-wrap .paragraph {position:absolute; top:0; bottom:0; height:18px; margin:auto; width:100%; color:#fff; font-size:12px}

    .fs-index-wrap ul   {z-index:10; position:absolute; width:160px; max-height:160px; padding:0; margin:0; overflow:auto; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); box-shadow:0 0 4px #999; list-style:none; text-align:left; z-index:999}

        .fs-index-wrap ul    {display:none;  transition:display .1s}
        .fs-index-wrap ul.in {display:block; transition:display .1s}

        .fs-index-wrap ul li        {padding:0 10px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
        .fs-index-wrap ul li.indent {padding-left:20px}

        .fs-index-wrap ul li.active {background-color:#00adee}
        .fs-index-wrap ul li:hover  {background-color:#666}


/* progress bar start */

.fs-progress-bar            {position:relative; float:left; width:0; height:30px; box-sizing:border-box; background-color:rgba(25, 25, 25, .8)}
    .fs-progress-wrapper    {position:relative; position: absolute; top:0; right:0; bottom:0; left:0; height:10px; margin:auto 10px; padding:1px; border:1px solid #999; cursor:pointer; overflow:hidden}
    .fs-progress-wrapper .fs-progress-play      {position:relative; max-width:100%; width:0; height:10px; box-sizing:border-box; border-right:2px solid #fff; z-index:2; background:#00adee}
    .fs-progress-wrapper .fs-progress-buffer    {position:relative; top:-10px; z-index:1; width:0; height:10px; background:#999}

/* progress bar end */


/* time & indexTime start */

.fs-time-display,
.fs-indexTime-display {float:left; box-sizing:border-box; height:30px; padding:0 5px; color:#FFF; white-space:nowrap; overflow:hidden; text-align:right; background-color:rgba(25, 25, 25, .8); cursor:default}

.fs-time-display.active, .fs-indexTime-display.active   {display:table}
.fs-time-display, .fs-indexTime-display                 {display:none}

    .fs-time-display .separator, .fs-indexTime-display .separator   {width:auto; padding:0 4px}
    .fs-time-display span, .fs-indexTime-display span               {display:table-cell; vertical-align:middle}

.fs-time-display        .current,
.fs-indexTime-display   .current    {}

.fs-time-display        .total,
.fs-indexTime-display   .total      {}

/* time & indexTime end */


/* volume start */

.fs-volume {float:left; background-color:rgba(25, 25, 25, .8); position:relative; height:30px; box-sizing:border-box; padding:7px 5px}

    .fs-volume .fs-volume-button        {background-image:url(../icon/volume.png); background-repeat:no-repeat; text-indent:-9999px; height:16px; width:16px; cursor:pointer}

    .fs-volume .fs-volume-button        {background-position:0 0}
    .fs-volume .fs-volume-button.half   {background-position:0 -16px}
    .fs-volume .fs-volume-button.muted  {background-position:0 -32px}

    .fs-volume .fs-volume-wrapper               {position:relative; width:6px; height:64px; padding-top:1px; margin:10px 0 0 10px; cursor:pointer; border:1px solid #888}
        .fs-volume .fs-volume-position          {width:6px; background:url(../icon/bg_vol.png); position:absolute; bottom:0}
        .fs-volume .fs-volume-position:before   {content:" "; position:relative; top:-2px; left:-5px; display:block; width:16px; height:1px; border-top:4px solid #fff}

    .fs-volume .fs-volume-bar           {position:absolute; bottom:30px; left:-3px; width:30px; height:80px; background-color:rgba(25, 25, 25, .8); border-top-left-radius:5px; border-top-right-radius:5px}
    .fs-volume.inactive .fs-volume-bar  {display:none}

/* volume end */

/* thumbnail start */

.fs-storyboard-wrapper {position:absolute; bottom:45px; visibility:hidden; z-index:60; padding:1px; background-color:rgba(25, 25, 25, .8); color:#fff; overflow:visible}
    .fs-storyboard-wrapper.active {visibility:visible}

    .fs-storyboard-wrapper .fs-thumbnail    {}
    .fs-storyboard-wrapper .fs-timestamp    {font-size:12px}
    .fs-storyboard-wrapper .arrow           {position:absolute; left:50%; bottom:-5px; margin-left:-5px; width:0; height:0; border-top:5px solid rgba(55,55,55, .8); border-left:5px solid transparent; border-right:5px solid transparent}

    .fs-storyboard-wrapper.with-text        {}
        .fs-storyboard-wrapper.with-text .fs-timestamp  {padding:0 5px}

    .fs-storyboard-wrapper.with-text .thumbnail         {display:none}
    .fs-storyboard-wrapper.with-thumbnail .fs-timestamp {margin:-18px auto 0; width:60px; border-radius:4px; background-size:cover; background-color:rgba(25, 25, 25, .8)}

/* thumbnail end */




/* fullscreen start */

.fs-fullscreen {float:left; box-sizing:border-box; height:30px; padding:7px 5px; cursor:pointer; background-color:rgba(25, 25, 25, .8)}
    .fs-fullscreen .tog {width:16px; height:16px; background-image:url(../icon/fullscreen.png); background-position:no-repeat}

    .fs-fullscreen .tog         {background-position:0     0}
    .fs-fullscreen .tog:hover   {background-position:-16px 0}

    .fullscreen .fs-fullscreen .tog         {background-position:0    -16px}
    .fullscreen .fs-fullscreen .tog:hover   {background-position:-16px -16px}

    .fullscreen .fs-video-controls      {position:fixed; bottom:10px}
    .fullscreen .fs-storyboard-wrapper  {position:fixed; bottom:45px}
    .fullscreen .fs-center-overlay      {position:fixed; margin:-20px 0 0 -20px}

/* fullscreen end */



/* strech */

.fs-stretch                 {position:absolute; z-index:60; padding:5px; top:10px; right:10px; border-radius:5px; background-color:#1c1c1c; opacity:.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; cursor:pointer}
    .fs-stretch-btn         {width:25px; height:25px; background-image:url(../icon/stretch.png); background-position:0 -25px; background-repeat:no-repeat}
    .fs-stretch-btn.active  {background-position:0 0}
.fs-stretch:hover           {opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}

.fs-player.stretch video    {width:100% !important; max-width:100% !important; display:block; margin:0 auto}
.fs-player.stretch .fs-poster {object-fit:fill; width:100%}


/* loading */

.fs-video-loading {position:absolute; top:50%; left:50%; z-index:60; width:37px; height:37px; margin-left:-18px; margin-top:-18px; background:url(../icon/loading.gif) no-repeat top center; display:none}

/* canvas */

.fs-player .canvas-container  {z-index:90; position:absolute !important; top:0; left:0}

/* resolution */

.fs-resolution-wrap {float:left; position:relative; background-color:rgba(25, 25, 25, 0.8);}

    .fs-resolution-button {width:30px; height:30px; background:url(../icon/resolution.png) center no-repeat; cursor:pointer}

    .fs-resolution-wrap ul {position:absolute; width:100px; z-index:10; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); box-shadow:0 0 4px #999; text-align:left; list-style:none}
        .fs-resolution-wrap ul li   {padding:0 10px; color:#fff; cursor:pointer}

                .fs-resolution-wrap ul      {display:none;  transition:display .1s}
                .fs-resolution-wrap ul.in   {display:block; transition:display .1s}

                .fs-resolution-wrap ul li.active    {background-color:#00adee}
                .fs-resolution-wrap ul li:hover     {background-color:#666}

/* playback */

.fs-playback {float:left; background-color:rgba(25, 25, 25, .8); position:relative}
    .fs-playback .fs-playback-bar           {position:absolute; bottom:30px; left:-3px; width:30px; height:80px; background-color:rgba(25, 25, 25, .8); border-top-left-radius:5px; border-top-right-radius:5px}
    .fs-playback.inactive .fs-playback-bar  {display:none}

    .fs-playback .fs-playback-button        {width:30px; height:25px; padding-top:5px; font-size:12px; cursor:pointer; color:#ccc; text-align:center}

    .fs-playback .fs-playback-wrapper               {position:relative; width:6px; height:64px; padding-top:1px; margin:10px 0 0 10px; cursor:pointer; background:url(../icon/bg_volw.png); border:1px solid #888}
        .fs-playback .fs-playback-position          {width:6px; background:url(../icon/bg_vol.png); position:absolute; bottom:0}
        .fs-playback .fs-playback-position:before   {content:" "; position:relative; top:0; left:-5px; display:block; width:16px; height:0; border-top:4px solid #fff}

/* msg */
.fs-msg {position:absolute; z-index:90; bottom:40px; right:15px; display:none; font-size:12px; color:#fff; cursor:default; text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}


/* seekerHelper */

.fs-seekerHelper {position:absolute; bottom:60px; left:0; right:0; margin:auto; z-index:9999; color:#999}
    .fs-seekerHelper .storyboard        {display:inline-block; margin-right:15px; opacity:.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; border:1px solid #999; box-shadow:0 0 4px #333}

    .fs-seekerHelper .currentTimeBox    {display:inline-block; opacity:.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; position:relative; top:5px; text-shadow:2px 2px #000; text-align:center}
        .fs-seekerHelper .currentTime   {font-size:50px; font-weight:bold}
        .fs-seekerHelper .offset        {position:relative; top:-10px; font-size:25px}


/* pager */
.fs-prev, .fs-next {visibility:hidden; position:absolute; top:0; bottom:60px; width:15%; z-index:55; background-repeat:no-repeat; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; cursor:pointer}

.fs-prev.active, .fs-next.active {visibility:visible}

    .fs-prev {left:0;  background-position:15%  50%; background-image:url(../icon/prev.png)}
    .fs-next {right:0; background-position:85% 50%; background-image:url(../icon/next.png)}

    .fs-player.hover .fs-prev, .fs-player.hover .fs-next {opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}

/* waterMark */
.fs-waterMark {cursor: default; display: table; opacity:0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; position:absolute; pointer-events: none; top:0; left:0; width:100%; height:100%; z-index:20; transition:all .5s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.fs-returnWaterMark { position:absolute; right:10px; bottom:40px; width:70px; height:70px; background-size:70px 70px; z-index:60; background-repeat:no-repeat; cursor:pointer}

.fs-waterMark.large {font-size: 32px}
    .fs-waterMark .text {display: table-cell; vertical-align: middle; color:#fff; text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;}
/* cog */
.fs-cog-wrap {float:left; box-sizing:border-box; height:30px; padding:7px 5px; background-color:rgba(25, 25, 25, .8);}
    .fs-cog-button {width:16px; height:16px; background-image:url(../icon/cog.png); background-repeat:no-repeat; cursor:pointer}

    .fs-cog-button      {background-position:0 0}
    .fs-cog-button:hover{background-position:0 -16px}

    .fs-cog-wrap ul {width:215px; position:absolute; right:10px; bottom: 40px; padding:0 5px; margin:0; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); list-style:none; text-align:left; z-index:999; cursor:normal}
    .fs-cog-wrap .list li {padding:0; margin:5px 0; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px}
        .fs-cog-wrap .list .title   {float:left; margin-right:10px; width:50px; text-align:right}
        .fs-cog-wrap .list .content {overflow:hidden}

        .fs-cog-wrap ul {display:none;position:absolute; padding:0 5px; margin:0; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); list-style:none; text-align:left; z-index:999; cursor:normal; right: 10px; width: auto; bottom: 30px; }
        .fs-cog-wrap ul.in  {display:block; transition:display .1s}

        .fs-cog-wrap .cog-playback   select,
        .fs-cog-wrap .cog-resolution select {position:relative; z-index:10; width:105px !important; height:auto !important; padding:0 !important; line-height:1 !important; color:initial;}


    .fs-cog-wrap ul .spanLink       {color:#ccc}
    .fs-cog-wrap ul .spanLink:hover {color:#fff; text-decoration:underline}

/* adSkiper */

.fs-adSkiper        {position:absolute; bottom:40px; right:5px; z-index:20; padding:5px 10px; box-sizing:border-box; background-color:rgba(25, 25, 25, .8); text-align:center; color:#fff; font-size:16px}
.fs-adSkiper:hover  {background-color:rgba(25, 25, 25, .9)}

    .fs-adSkiper .before            {display:none; width:250px}
        .fs-adSkiper .before .text  {padding-top:5px; overflow:hidden}
        .fs-adSkiper .before img    {float:right; max-height:60px; margin-left:10px}

    .fs-adSkiper .after  {display:none; font-size:20px; cursor:pointer}