@charset "utf-8";

.video2d-hidden { display: none; }
.video2d-container{ position: relative; -webkit-user-select: none; -webkit-touch-callout: none;}
.video2d-video{ display: block; width: 100%; }
.video2d-control { position: absolute; z-index: 1; /* relative absolute*/ bottom: 0; left: 0; right: 0; height: 36px; color:#fff; background-color: rgba(31, 31, 31, .8); }
.video2d-control:after{ content:" "; display:block; height:0; visibility:hidden; clear:both; }
.video2d-control-txt-total-time { margin-right: 10px; }
.video2d-control-scroll-container
{
    position: relative;
    margin: 0 110px 0 50px;
    width: auto;
    height: 100%;
}
.video2d-control-scroll
{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -3px;
    width: 100%;
    height: 6px;
    border-radius: 3px;
}

.video2d-control-scroll-touch
{
    position: absolute;
    z-index: 3;
    bottom: 0;

    width: 100%;
    height: 200%;
}

.video2d-control-scroll-pointer
{
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 0;

    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;

    background-image: url('icons/spointer.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.video2d-control-scroll-bg
{
    width: 100%;
    height: 100%;

    background-color: #878787;
    border-radius: inherit;
}

.video2d-control-scroll-bg1
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background-color: #efefef;
    border-radius: inherit;
}

.video2d-control-scroll-bg2
{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background-color: #3b8bc4;
    border-radius: inherit;
}

.video2d-btn-main,
.video2d-control-btn-play,
.video2d-control-btn-volume,
.video2d-control-btn-swipe,
.video2d-control-btn-view,
.video2d-control-btn-fullscreen
{
    box-sizing: border-box;
    width: 40px;
    height: 100%;

    cursor: pointer;
    -webkit-transition: all;
            transition: all;
    -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
    -webkit-transition-duration: .2s;
            transition-duration: .2s;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    word-break: break-all;

    color: #fff;
    border: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: padding-box;
    background-size: 100%;
    background-size: 32px 32px;

    -webkit-appearance: none;
}
.video2d-control-btn-play:enabled:active, .video2d-control-btn-play.video2d-active:enabled,
.video2d-control-btn-volume:enabled:active,
.video2d-control-btn-volume.video2d-active:enabled,
.video2d-control-btn-swipe:enabled:active,
.video2d-control-btn-swipe.video2d-active:enabled,
.video2d-control-btn-view:enabled:active,
.video2d-control-btn-view.video2d-active:enabled,
.video2d-control-btn-fullscreen:enabled:active,
.video2d-control-btn-fullscreen.video2d-active:enabled
{
    color: #fff;
    background-color: transparent;
}

.video2d-control-btn-play
{
    float: left;

    border-right: 1px solid #3a3a3a;
    background-image: url('icons/vplay.png');
}
.video2d-control-btn-play[pause]
{
    background-image: url('icons/vstop.png');
}

.video2d-control-btn-volume
{
    float: right;

    border-left: 1px solid #3a3a3a;
}

.video2d-control-btn-volume[volume='0']
{
    background-image: url('icons/volume0.png');
}

.video2d-control-btn-volume[volume='1']
{
    background-image: url('icons/volume1.png');
}

.video2d-control-btn-volume[volume='2']
{
    background-image: url('icons/volume2.png');
}

.video2d-control-btn-volume[volume='3']
{
    background-image: url('icons/volume3.png');
}

.video2d-control-btn-swipe
{
    float: right;

    border-left: 1px solid #3a3a3a;
}
.video2d-control-btn-swipe[swipe_type='touch']
{
    background-image: url('icons/vdrag2.png');
}
.video2d-control-btn-swipe[swipe_type='motion']
{
    background-image: url('icons/vdrag1.png');
}

.video2d-control-btn-view
{
    float: right;

    border-left: 1px solid #3a3a3a;
}
.video2d-control-btn-view[view_type='fm']
{
    background-image: url('icons/viewport1.png');
}
.video2d-control-btn-view[view_type='vr']
{
    background-image: url('icons/viewport2.png');
}

.video2d-control-btn-fullscreen
{
    float: right;

    border-left: 1px solid #3a3a3a;
    background-image: url('icons/vfullscreen1.png');
}

.video2d-control-txt-time
{
    line-height: 36px;

    float: left;

    width: auto;
}

.video2d-control-txt-current-time,
.video2d-control-txt-total-time
{
    float: right;
    width: auto;
    line-height: 36px;   
}

.video2d-btn-main {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-size: 100%;
    background-image: url('icons/stop.png');
}
.video2d-btn-main[pause]
{
    background-image: url('icons/play.png');
}

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
.video2d-anim-show, .video2d-anim-hide{
	-webkit-animation-duration: 0.5s; animation-duration: 0.5s;
	-webkit-animation-fill-mode: both; animation-fill-mode: both; 
}
.video2d-anim-show{ -webkit-animation-name: fadeIn; animation-name: fadeIn; }
.video2d-anim-hide{ -webkit-animation-name: fadeOut; animation-name: fadeOut; }