.player {
    position: relative;
    z-index: 5;
    padding-top: 56.25%;
    background-color: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.video-player *:focus {
    outline: 1px dotted #000
}

.no-touchevents .player ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent
}

.no-touchevents .player ::-webkit-scrollbar-thumb {
    position: relative;
    background: rgba(255, 255, 255, 0.25)
}

@media (max-width: 1280px) {
    .vjs-volume-bar {
        display: none !important;
    }
}

#video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0
}

.player .video-player {
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: none
}

.video-player:before {
    content: '' !important;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    min-height: 150px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease .5s
}

.video-player.vjs-flash .vjs-tech {
    position: absolute
}

.vjs-paused:before, .vjs-menu-active:before, .vjs-hover .video-player:before {
    opacity: 1;
    transition: opacity 0.5s ease 0.00s
}

.vjs-big-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    -webkit-animation: keyframes-fadeout .5s linear 1 normal forwards;
    animation: keyframes-fadeout .5s linear 1 normal forwards;
    pointer-events: none
}

.vjs-big-play-button:before, .vjs-big-play-button:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block
}

.vjs-big-play-button:before {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5)
}

.vjs-big-play-button:after {
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 31px;
    height: 39px;
    margin: -19.5px 0 0 -15.5px;
    background-repeat: no-repeat;
    background-position: 100% -100px;
    background-image: url("../images/player/icon_player.png")
}

@-webkit-keyframes keyframes-fadeout {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes keyframes-fadeout {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: scale(2)
    }
}

@-webkit-keyframes keyframes-fadein {
    0% {
        opacity: 0;
        transform: scale(2)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes keyframes-fadein {
    0% {
        opacity: 0;
        transform: scale(2)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.video-player.vjs-paused .vjs-big-play-button {
    display: block !important;
    -webkit-animation: keyframes-fadein .5s linear 1 normal forwards;
    animation: keyframes-fadein .5s linear 1 normal forwards
}

.video-player.vjs-paused .vjs-big-play-button:after {
    width: 38px;
    height: 39px;
    margin: -19.5px 0 0 -19px;
    background-position: 100% 0
}

.video-player embed, .video-player object, .video-player video {
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    max-height: 100%;
    height: 100%;
    transform: translateZ(1px)
}

.player .vjs-fullscreen {
    height: 100%;
    transform: translateZ(2000px) !important
}

.player .vjs-fullscreen embed, .player .vjs-fullscreen object, .player .vjs-fullscreen video {
    transform: translateZ(0)
}

.video-player .align, .video-player video + div {
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.video-player .vjs-hidden {
    display: none
}

:-webkit-full-screen {
    background-color: #000
}

.fake-fullscreen .video-player {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000
}

.fake-fullscreen .video-player video {
    vertical-align: middle !important
}

.fake-fullscreen .video-player video + div {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.fake-fullscreen #container .detail {
    position: relative;
    z-index: 102
}

.video-player:-moz-full-screen {
    position: fixed;
    top: 0
}

.video-player:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important
}

.video-player:-webkit-full-screen video {
    max-height: 100% !important
}

.vjs-control-bar {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    z-index: 10;
    height: 53px;
    padding-top: 3px;
    display: flex;
    opacity: 0;
    transition: opacity 0.5s ease .5s
}

.vjs-paused .vjs-control-bar, .vjs-menu-active .vjs-control-bar, .vjs-hover .vjs-control-bar {
    opacity: 1;
    transition: opacity 0.5s ease 0.00s
}

.vjs-control {
    outline: none;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 40px;
    flex: none
}

.vjs-custom-control-spacer {
    flex: auto
}

.vjs-control-text {
    font: 0/0 a;
    display: none
}

.vjs-button:hover > .vjs-control-text {
    color: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 26px;
    white-space: nowrap;
    position: absolute;
    top: -40px;
    display: block;
    height: 26px;
    margin-left: 20px;
    padding: 0 8px;
    background-color: #000;
    transform: translateX(-50%)
}

.vjs-button:hover > .vjs-control-text:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    display: block;
    width: 0;
    height: 0;
    margin-left: -6px;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #000 transparent transparent transparent
}

.vjs-progress-control {
    position: absolute;
    top: -5px;
    right: 0;
    left: 0;
    z-index: 2;
    width: auto;
    height: 12px;
    font: 0/0 a;
    cursor: pointer
}

.vjs-progress-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px
}

.vjs-progress-holder:before {
    content: '';
    display: block;
    width: 100%;
    background-color: #4e5559
}

.vjs-load-progress, .vjs-play-progress, .vjs-progress-holder:before {
    position: absolute;
    top: 4.5px;
    bottom: 0;
    height: 3px;
    z-index: 11;
    transition: transform ease .3s
}

.vjs-load-progress {
    background-color: #97a9b6
}

.vjs-play-progress {
    background-color: #4eceff;
    z-index: 15
}

.vjs-progress-control .vjs-sliding .vjs-load-progress, .vjs-progress-control .vjs-sliding .vjs-play-progress, .vjs-progress-control .vjs-sliding .vjs-progress-holder:before, .vjs-progress-control:hover .vjs-load-progress, .vjs-progress-control:hover .vjs-play-progress, .vjs-progress-control:hover .vjs-progress-holder:before, .vjs-progress-control:hover .watched-progress .watched-holder {
    transform: scaleY(1.8)
}

.vjs-play-progress .vjs-control-text {
    content: '';
    position: absolute;
    top: -4.5px;
    right: -5px;
    z-index: 5;
    display: block;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 6px;
    background-color: #fff;
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.3s
}

.vjs-progress-control:hover .vjs-play-progress .vjs-control-text, .vjs-progress-control .vjs-sliding .vjs-play-progress .vjs-control-text {
    opacity: 1
}

.vjs-mouse-display {
    position: absolute;
    top: 0;
    z-index: 5;
    display: block;
    width: 1px;
    height: 100%
}

.vjs-play-control:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-play-control.vjs-playing:before {
    background-position: 0 -53px
}

.vjs-ended .vjs-play-control.vjs-paused:before {
    background-position: 0 -106px
}

.vjs-volume-menu-button {
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.4s
}

.vjs-volume-menu-button:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -40px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-vol-0:before {
    background-position: -40px -53px
}

.vjs-vol-1:before, .vjs-vol-2:before {
    background-position: -40px -106px
}

.vjs-volume-menu-button .vjs-menu {
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
    opacity: 0;
    transition: all 0.4s
}

.vjs-menu-content {
    overflow: hidden;
    width: auto;
    height: 100%
}

.vjs-volume-bar {
    width: 52px;
    height: 3px;
    margin: 25px 4.5px;
    background-color: rgba(255, 255, 255, 0.25)
}

.vjs-volume-level {
    position: relative;
    height: 3px;
    background-color: #fff
}

.vjs-volume-level:before {
    content: '';
    position: absolute;
    right: -4.5px;
    top: -3px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #fff
}

.vjs-slider-active, .vjs-volume-menu-button:hover {
    width: 100px
}

.vjs-slider-active .vjs-menu, .vjs-volume-menu-button:hover .vjs-menu {
    opacity: 1
}

.vjs-714-bar {
    height: 3px !important;
    display: block !important;
}

.vjs-volume-level2 {
    height: 50px;
    width: 75px;
    margin-top: -27px;
    margin-left: -15px;
}

.vjs-fullscreen-control {
    cursor: pointer
}

.vjs-fullscreen-control:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -160px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-fullscreen .vjs-fullscreen-control:before {
    background-position: -160px -53px
}

.vjs-share-control {
    display: none
}

.video-player .not-hls dl {
    max-width: 100%;
    border-left: 0
}

.video-player [data-size] button {
    font-weight: 100
}

.video-player [data-size="175"] {
    font-size: 1.938em
}

.video-player [data-size="150"] {
    font-size: 1.688em
}

.video-player [data-size="50"] {
    font-size: 0.813em
}

.vjs-captions-button {
    cursor: pointer
}

.vjs-captions-button:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -200px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-captions-button.active-caption:before, .vjs-captions-button.active:before {
    background-position: -200px -53px
}

.vjs-captions-button div.vjs-menu {
    width: auto;
    background-color: rgba(0, 0, 0, 0.7)
}

.vjs-captions-button .vjs-menu:after {
    content: '';
    display: block;
    clear: both
}

.vjs-captions-button .vjs-menu ul.vjs-menu-content {
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    min-width: 250px;
    height: 100%;
    background-color: transparent
}

.vjs-captions-button .vjs-menu ul.vjs-menu-content:before {
    content: attr(data-title);
    font-size: 20px;
    box-sizing: border-box;
    display: block;
    height: 96px;
    padding: 30px 30px 0;
    border-bottom: 1px solid #242426;
    word-break: break-word
}

.vjs-captions-button .vjs-menu ul.vjs-menu-content ~ .vjs-menu-content {
    border-left: 1px solid #242426
}

.vjs-captions-button .vjs-menu ul.vjs-menu-content li {
    height: auto;
    padding: 0
}

.vjs-captions-button .vjs-menu ul span, .vjs-captions-button .vjs-menu ul button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 20px 30px
}

.vjs-captions-button .vjs-menu ul [data-size="175"] button, .vjs-captions-button .vjs-menu ul [data-size="150"] button {
    padding-top: 10px;
    padding-bottom: 10px
}

.vjs-audio-button {
    cursor: pointer
}

.vjs-audio-button:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -240px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-audio-button.active-caption:before, .vjs-audio-button.active:before {
    background-position: -240px -53px
}

.vjs-audio-button div.vjs-menu {
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7)
}

.vjs-audio-button .vjs-menu ul.vjs-menu-content {
    box-sizing: border-box;
    width: 100%;
    min-width: 200px;
    height: 100%;
    background-color: transparent
}

.vjs-audio-button .vjs-menu ul.vjs-menu-content li {
    height: auto;
    padding: 0
}

.vjs-audio-button .vjs-menu ul span, .vjs-audio-button .vjs-menu ul button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 20px 30px
}

.vjs-audio-button .vjs-menu ul [data-size="175"] button, .vjs-audio-button .vjs-menu ul [data-size="150"] button {
    padding-top: 10px;
    padding-bottom: 10px
}

.video-player.video-streaming .vjs-backward-button, .video-player.video-streaming .vjs-forward-button, .video-player.video-streaming .playback-rate, .video-player.video-live .vjs-backward-button, .video-player.video-live .vjs-forward-button, .video-player.video-live .playback-rate {
    display: none
}

.video-player.video-live .vjs-time-control {
    display: none
}

.video-player.video-live .vjs-play-progress {
    width: 100% !important
}

.watched-progress {
    position: absolute;
    top: 4.5px;
    bottom: 0;
    height: 3px;
    width: 100%;
    cursor: default;
    right: 0;
    text-align: left;
    z-index: 10
}

@media (max-width: 1280px) {
    .watched-progress {
        top: 22.5px
    }
}

.watched-progress .watched-holder {
    display: inline-block;
    width: 5px;
    height: 3px;
    background: #fff;
    transition: transform ease .3s
}

.vjs-live-control {
    width: 80px !important
}

.vjs-live-control .vjs-live-display {
    position: relative;
    font-size: 15px;
    color: #fff;
    line-height: 53px
}

.vjs-live-control .vjs-live-display:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: top;
    margin: 20px 6px 0 0;
    background-color: #ff1d1d
}

@media (max-width: 1280px) {
    .vjs-live-control {
        position: absolute !important;
        bottom: 30px;
        left: 15px;
        width: auto !important;
        height: 12px
    }

    .vjs-live-control .vjs-live-display {
        font-size: 11px;
        line-height: 12px
    }

    .vjs-live-control .vjs-live-display:before {
        width: 9px;
        height: 9px;
        margin: 1px 5px 0 0
    }
}

.vjs-chapters-button {
    cursor: pointer
}

.vjs-chapters-button:before {
    content: '';
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -80px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-chapters-button.active:before {
    background-position: -80px -53px
}

.vjs-menu .header {
    z-index: 0
}

.vjs-menu-button-popup .vjs-menu {
    color: #fff;
    text-align: left;
    position: absolute;
    right: -20px;
    bottom: 57px;
    z-index: 10;
    display: none;
    box-sizing: border-box;
    width: 350px;
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.7)
}

.vjs-menu-button-popup .vjs-menu .header {
    font-size: 22px;
    font-weight: bold;
    box-sizing: border-box;
    height: 80px;
    margin-top: -80px;
    padding: 20px 30px 0;
    border-bottom: 1px solid #242426;
    background-color: rgba(0, 0, 0, 0.7)
}

.vjs-menu-button-popup .vjs-menu .header span {
    display: block
}

.vjs-menu-button-popup .vjs-menu .close {
    font: 0/0 a;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 30px
}

.vjs-menu-button-popup .vjs-menu .close:after {
    content: '\e00e';
    color: #858583;
    font-family: 'atomy-icon-font';
    font-size: 16px;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    overflow: auto;
    width: 100%;
    height: auto
}

.vjs-menu-button-popup.active .vjs-menu .vjs-menu-content {
    max-height: 100%
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li {
    position: relative;
    display: table;
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    padding: 20px 30px 20px 30px
}

.vjs-chapters-button .vjs-menu .vjs-menu-content li {
    padding-left: 48px
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li:hover, .vjs-menu-button-popup .vjs-menu .vjs-menu-content li.active {
    color: #4eceff
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li:hover:after, .vjs-menu-button-popup .vjs-menu .vjs-menu-content li.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    width: 11px;
    height: 9px;
    margin-top: -4.5px;
    background-repeat: no-repeat;
    background-position: -360px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li span {
    vertical-align: middle;
    display: table-cell
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li .time {
    vertical-align: top;
    width: 68px
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content li .text {
    vertical-align: top
}

.vjs-menu-button-popup.active .vjs-menu {
    display: block
}

.vjs-chapters-button .vjs-menu .vjs-menu-content li:hover:after, .vjs-chapters-button .vjs-menu .vjs-menu-content li.active:after {
    content: '';
    position: absolute;
    top: 33px;
    left: 28px;
    display: block;
    width: 11px;
    height: 14px;
    margin-top: -7px;
    background-repeat: no-repeat;
    background-position: -360px -20px;
    background-image: url("../images/player/icon_player.png")
}

.vjs-time-control {
    color: #fff;
    font-size: 13px;
    width: auto
}

.vjs-current-time-display, .vjs-duration-display {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 40px
}

.vjs-current-time {
    color: #4eceff
}

.vjs-time-control:after, .vjs-current-time:after, .vjs-time-divider:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.vjs-time-divider {
    white-space: nowrap;
    height: 100%
}

.vjs-time-divider > div {
    font: 0/0 a;
    width: 1px;
    height: 10px;
    margin: 2px 5px 0;
    vertical-align: middle;
    display: inline-block;
    background-color: #50636f
}

.vjs-poster {
    display: none;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    background-color: #000000;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%
}

.vjs-has-started .vjs-poster {
    display: none
}

.vjs-audio-type .vjs-poster {
    display: block
}

.vjs-text-track-display {
    font-size: 20px;
    pointer-events: none
}

.vjs-text-track-display div div {
    font-size: 1em !important
}

.vjs-text-track-display[data-opacity="0"] > div div div {
    background-color: rgba(0, 0, 0, 0) !important
}

.vjs-text-track-display[data-opacity="0.25"] > div div div {
    background-color: rgba(0, 0, 0, 0.25) !important
}

.vjs-text-track-display[data-opacity="0.75"] > div div div {
    background-color: rgba(0, 0, 0, 0.75) !important
}

.vjs-text-track-display[data-opacity="1"] > div div div {
    background-color: #000 !important
}

[data-caption-size='175'] .vjs-text-track-display > div {
    font-size: 1.75em !important
}

[data-caption-size='150'] .vjs-text-track-display > div {
    font-size: 1.5em !important
}

[data-caption-size='100'] .vjs-text-track-display > div {
    font-size: 1em !important
}

[data-caption-size='50'] .vjs-text-track-display > div {
    font-size: 0.7em !important
}

.vjs-text-track-display div {
    font-family: inherit !important;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    background-color: transparent !important
}

.vjs-text-track-display > div {
    z-index: 10;
    transition: transform 0.5s ease 0.5s
}

.vjs-text-track-display > div div {
    top: auto !important;
    bottom: 0 !important
}

.vjs-text-track-display > div div div {
    display: inline-block !important;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5) !important
}

.vjs-hover .vjs-text-track-display > div, .vjs-menu-active .vjs-text-track-display > div, .vjs-paused .vjs-text-track-display > div {
    transform: translateY(-63px);
    transition: transform 0.5s ease
}

.vjs-waiting .vjs-control-bar {
    pointer-events: none
}

.vjs-loading-spinner {
    display: none;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: 0.85;
    text-align: left;
    border: 6px solid rgba(43, 51, 63, 0.7);
    box-sizing: border-box;
    background-clip: padding-box;
    width: 50px;
    height: 50px;
    border-radius: 25px
}

.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
    display: block
}

.vjs-loading-spinner:before, .vjs-loading-spinner:after {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: white
}

.vjs-seeking .vjs-loading-spinner:before, .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:after {
    -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite
}

.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before {
    border-top-color: white
}

.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {
    border-top-color: white;
    -webkit-animation-delay: 0.44s;
    animation-delay: 0.44s
}

@-webkit-keyframes vjs-spinner-spin {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes vjs-spinner-spin {
    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes vjs-spinner-fade {
    0% {
        border-top-color: #73859f
    }
    20% {
        border-top-color: #73859f
    }
    35% {
        border-top-color: white
    }
    60% {
        border-top-color: #73859f
    }
    100% {
        border-top-color: #73859f
    }
}

@keyframes vjs-spinner-fade {
    0% {
        border-top-color: #73859f
    }
    20% {
        border-top-color: #73859f
    }
    35% {
        border-top-color: white
    }
    60% {
        border-top-color: #73859f
    }
    100% {
        border-top-color: #73859f
    }
}

.player #video.vjs-fixed {
    position: fixed;
    top: auto;
    bottom: 10px;
    right: 10px;
    left: auto;
    z-index: 100;
    width: 388px;
    height: auto
}

.player #video.vjs-mobile-confirm, .player #video.vjs-unfixed {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important
}

.player .vjs-fixed .video-player {
    white-space: nowrap;
    position: relative;
    height: auto;
    margin: 0;
    padding: 0
}

.player .vjs-fixed .video-player video {
    vertical-align: top
}

.player .vjs-fixed .video-player.vjs-flash {
    position: relative;
    padding-bottom: 56.25%;
    box-shadow: 0 0 0 transparent;
    background-color: #000
}

.player .vjs-fixed .vjs-time-control, .player .vjs-fixed .product-wrap, .player .vjs-fixed .vjs-setting-button, .player .vjs-fixed .vjs-captions-button, .player .vjs-fixed .vjs-chapters-button {
    display: none
}

.fake-fullscreen .player .vjs-fixed .vjs-setting-button {
    display: block
}

.fake-fullscreen .player .vjs-fixed .fullscreen-reference .vjs-setting-button {
    display: none
}

.vjs-fixed .reference-wrap {
    display: none
}

.fake-fullscreen .vjs-fixed .reference-wrap {
    display: block
}

.vjs-fixed h3 {
    cursor: move;
    color: #fff;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block !important;
    height: 40px;
    padding: 0 40px 0 10px;
    background-color: #3f464e
}

.vjs-fixed .close {
    font: 0/0 a;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    display: block !important;
    width: 40px;
    height: 40px
}

.vjs-fixed .close:after {
    content: '\e00e';
    color: #9fa3a7;
    font-family: 'atomy-icon-font';
    font-size: 15px;
    display: block
}

.vjs-fixed .recommend {
    display: none
}

.vjs-fixed .video-player.vjs-playing:after, .vjs-fixed .video-player.vjs-paused:after {
    display: none
}

.vjs-progress-holder .product-wrap {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 5px;
    margin: -2.5px 0 0 -5.5px
}

.vjs-progress-holder .product {
    position: absolute;
    top: 0;
    z-index: 12;
    display: block;
    width: 11px;
    height: 5px;
    background-color: #fff
}

.vjs-progress-holder .product span {
    position: absolute;
    left: 50%;
    bottom: 14px;
    display: none;
    width: 79px;
    height: 68px;
    margin-left: -39.5px;
    border-radius: 2px;
    background-color: #fff
}

.vjs-progress-holder .product span:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 0;
    margin-left: -5px;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #fff transparent transparent transparent
}

.vjs-progress-holder .product span:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.vjs-progress-holder .product span img {
    vertical-align: middle;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px
}

.vjs-progress-holder .product:hover span {
    display: block
}

.current-product {
    position: relative;
    padding: 0 0 50px;
    background-color: #151515;
    overflow: hidden
}

.current-product .item {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /*margin: 0 10px;*/
    border-radius: 2px;
    background-color: #fff;
    opacity: 0.3
}

.current-product .item .thumb {
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    width: 99px;
    height: 99px;
    padding: 10px;
    border-radius: 2px
}

.current-product .item .thumb img {
    vertical-align: top;
    display: inline;
    max-height: 100%
}

.current-product .item .name {
    font-size: 13.5px;
    font-weight: normal;
    vertical-align: middle;
    display: none;
    width: 90px
}

.current-product .item .btns .col {
    float: none;
    box-sizing: border-box
}

.current-product .item .btns {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: none;
    width: 42px
}

.current-product .item .btn {
    color: #585858;
    line-height: 26px;
    display: block;
    width: 100%;
    height: 42px;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    background-color: #fff
}

.current-product .item .btns .col:first-child .btn {
    border-bottom: 0
}

.current-product .item .btn .icon:before {
    font-size: 15px
}

.current-product .item .btn:after {
    content: '';
    display: block;
    clear: both
}

.current-product .item .btn.active .icon-heart-line:before {
    content: '\e019'
}

.current-product .item .icon-cart:before {
    font-size: 22px
}

.current-product .item .btn.bordered {
    color: #24b1e4;
    background-color: #fff
}

.current-product .item .btn.favorite.active .icon {
    color: #24b1e4
}

.current-product .item .time {
    color: #fff;
    font-size: 13px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 0 5px;
    background-color: rgba(16, 24, 32, 0.7)
}

.current-product .slider-wrap {
    overflow: hidden;
    max-height: 0;
    padding: 0 40px;
    transition: max-height 0.3s
}

.current-product.show .slider-wrap {
    max-height: 130px
}

.current-product .slick-slide {
    width: 119px;
    margin: 15px 0
}

.current-product .slick-slide.active {
    width: 279px
}

.current-product .active .item {
    opacity: 1
}

.current-product .active .thumb {
    width: 105px
}

.current-product .active .name {
    display: inline-block
}

.current-product .active .btns {
    display: block
}

.current-product .active .time {
    display: none
}

.current-product .active a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /*border: 3px solid #4eceff*/
}

.current-product .slick-arrow {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%
}

.current-product .slick-arrow:before {
    color: #5c5c5c;
    font-size: 20px
}

.current-product .slick-arrow:hover:before {
    color: #fff
}

.current-product .slick-prev {
    left: -33px
}

.current-product .slick-next {
    right: -33px
}

.current-product .count {
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #222
}

.current-product .count button {
    display: block;
    width: 100%
}

.current-product .count button:before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    background-image: url("../images/player/icon_products.png")
}

.current-product .count button:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 15px;
    height: 8px;
    margin: -2px 0 0 12px;
    background-position: -35px 0;
    background-image: url("../images/player/icon_products.png")
}

.current-product.show .count button:after {
    background-position: -20px 0
}

.current-product .count strong {
    color: #4eceff;
    font-weight: normal
}

.current-product.single {
    padding: 0 30px 50px
}

.current-product.single .slick-slide {
    box-sizing: border-box;
    width: auto;
    margin: 15px 10px;
    border: 3px solid #4eceff;
    border-radius: 0
}

.current-product.single .item {
    margin: 0;
    border-radius: 0;
    opacity: 1
}

.current-product.single .item:after {
    content: '';
    display: block;
    clear: both
}

.current-product.single .item a {
    white-space: nowrap;
    display: block;
    float: left;
    width: calc(100% - 480px)
}

.current-product.single .item .no-cursor {
    cursor: default
}

.current-product.single .thumb {
    vertical-align: middle;
    display: inline-block;
    float: none;
    margin: 0 30px
}

.current-product.single .name {
    color: #101820;
    font-size: 18px;
    vertical-align: middle;
    white-space: normal;
    display: inline-block;
    float: none;
    width: auto;
    max-width: calc(100% - 160px);
    height: auto;
    margin-bottom: 0;
    padding-top: 0
}

.current-product.single .btns {
    position: static;
    display: block;
    box-sizing: border-box;
    float: right;
    width: auto;
    height: 99px;
    padding: 25px 33px
}

.current-product.single .btns .col {
    float: left;
    width: 70px;
    height: 100%;
    margin-left: 8px
}

.current-product.single .btns .btn {
    vertical-align: top;
    height: 100%;
    border-radius: 3px
}

.current-product.single .btns .col:first-child .btn {
    border-bottom: 1px solid #ccc
}

.current-product.single .btns .btn .icon:before {
    font-size: 20px
}

.current-product.single .time {
    display: none
}

.current-product.single .price {
    float: left;
    height: 99px
}

.current-product.single .price:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.current-product.single .price span {
    color: #101820;
    font-size: 18px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 40px
}

.current-product.single .price span em {
    color: #585858
}

.current-product.single .price .pv em {
    color: #06a7e2
}

.references {
    text-align: center;
    white-space: nowrap;
    position: absolute;
    z-index: 5;
    width: 300px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s
}

.references:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.references.show {
    opacity: 1
}

.references.show, .references.hide {
    pointer-events: all
}

.references img {
    width: 100%;
    max-height: 100%;
    vertical-align: middle
}

.references .btn-close {
    color: #999;
    top: 5px;
    right: 5px;
    border: 1px solid #e3e3e3;
    background-color: rgba(255, 255, 255, 0.3)
}

.references .btn-close:before {
    content: '\e00e' !important;
}

.references.close .btn-close {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0.2)
}

.references.close .btn-close:before {
    content: '\e00a' !important;
    color: #fff
}

.references.close {
    top: 20px !important;
    left: 20px !important;
    width: 50px !important;
    height: 45px !important;
    opacity: 1 !important;
    transform: inherit !important
}

.references.hide {
    opacity: 0 !important;
    pointer-events: none
}

.references.close .btn-fullscreen, .references.close img {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    transform-origin: 0 0
}

.references.show.fullscreen {
    top: 0 !important;
    left: 50% !important;
    margin-top: 0 !important;
    transform: translateX(-50%) !important;
}

.references.fullscreen {
    top: 0 !important;
    left: 0 !important;
    z-index: 8;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000;
    transform: inherit !important
}

.references .btn-fullscreen, .references .btn-close {
    font: 0/0 a;
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    transition: background-color .3s, border-color .3s
}

.references .btn-fullscreen:before, .references .btn-close:before {
    content: '';
    font-family: 'atomy-icon-font';
    font-size: 16px;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    transition: color 0.3s
}

.references .btn-fullscreen {
    color: #fff;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.3)
}

.references .btn-fullscreen:before {
    content: '\e015'
}

.references.fullscreen .btn-fullscreen:before {
    content: '\e03e'
}

.references.FF {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    background-color: #000
}

.references.FF .btn-fullscreen {
    display: none
}

.references.TL {
    top: 20px !important;
    left: 20px !important;
    margin-top: 25px !important;
    bottom: auto !important;
}

.references.TM {
    top: 20px !important;
    left: 50% !important;
    transform: translate(-50%) !important;
    margin-top: 25px !important;
    bottom: auto !important;
}

.references.TR {
    top: 20px !important;
    right: 20px !important;
    left : auto !important;
    margin-top: 25px !important;
    bottom: auto !important;
}

.references.BL {
    bottom: 60px !important;
    left: 20px !important;
    top: auto !important;
}

.references.BM {
    bottom: 60px !important;
    left: 50% !important;
    transform: translate(-50%) !important;
    top: auto !important;
}

.references.BR {
    bottom: 60px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
}

.references.mousemove {
    /*bottom: auto !important;*/
    /*right: auto !important*/
}

.fake-fullscreen .fullscreen-reference .vjs-tech, .vjs-nonefixed .fullscreen-reference .vjs-tech {
    position: absolute;
    right: 20px;
    bottom: 60px;
    z-index: 9;
    width: 275px;
    height: auto;
    max-height: 154.6875px
}

.player .recommend {
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 0 0 57px;
    background-color: rgba(0, 0, 0, 0.8)
}

.player .recommend:before {
    display: none
}

.player .recommend:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.player .recommend .lists {
    vertical-align: bottom;
    display: inline-block;
    width: 100%;
    overflow: auto
}

.player .recommend .item {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    display: inline-block;
    max-width: 317px;
    margin: 0 15px
}

.player .recommend .item .thumb {
    text-align: center;
    width: 317px;
    height: 211px
}

.player .recommend .item .thumb:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.player .recommend .item .thumb img {
    vertical-align: middle;
    max-height: 100%;
    height: 180px;
    width: 300px;
}

.player .recommend .item .title {
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 20px 0
}

.vjs-audio-mod {
    display: none
}

.player .vjs-fixed .vjs-button:hover > .vjs-control-text {
    display: none
}

.vjs-error .vjs-error-display {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.9)
}

.vjs-error .vjs-error-display:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.vjs-error .vjs-error-display .vjs-offscreen {
    display: none
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
    vertical-align: middle;
    display: inline-block
}

.next-video {
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 0;
    bottom: 87px;
    z-index: 10;
    display: none;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.56)
}

.vjs-fullscreen.next-play .next-video {
    display: block
}

.next-video:after {
    content: '';
    display: block;
    clear: both
}

.next-video .image {
    position: relative;
    float: left
}

.next-video .image img {
    vertical-align: top;
    max-height: 74px
}

.next-video .image .duration {
    color: #fff;
    font-size: 13px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 5px;
    background-color: rgba(16, 24, 32, 0.7)
}

.next-video .summary {
    -webkit-line-clamp: 3;
    overflow: hidden;
    float: left;
    width: 121px;
    height: 62px;
    box-sizing: border-box;
    margin: 7px 13px
}

.next-video .summary:before {
    content: '[NEXT]';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    letter-spacing: -1px;
    display: table;
    margin-bottom: 5px;
    padding: 0 4px;
    background-color: #07a7e3
}

.mobile-confirm {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
    width: 100%;
    height: 100%
}

.mobile-confirm:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.mobile-confirm .content {
    vertical-align: middle;
    position: relative;
    z-index: 1;
    display: inline-block
}

.mobile-confirm .dim {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5
}

.mobile-confirm .message {
    color: #fff;
    margin-bottom: 15px
}

.mobile-confirm .buttons .btn {
    margin: 0 5px
}

.mobile-confirm.active {
    display: block
}

.fullscreen-reference .btn-hide-video {
    position: absolute;
    right: 20px;
    bottom: 182px;
    z-index: 100;
    width: 36px;
    height: 33px;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../images/player/hide_player.png")
}

.hide-video .btn-hide-video, .btn-hide-video {
    display: none
}

.hide-video video {
    display: none
}

.vjs-reference-control {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../images/player/icon_reference.png")
}

@media (max-width: 1280px) {
    .video-player, .video-player button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .video-player:before {
        display: none
    }

    .video-player *:focus {
        outline: none
    }

    .player .video-player {
        position: relative
    }

    .vjs-scrubbing .vjs-control-bar {
        z-index: 12
    }

    .video-player.vjs-scrubbing:before {
        z-index: 11
    }

    .vjs-button:hover > .vjs-control-text {
        display: none
    }

    .vjs-control-bar {
        position: static;
        height: 48px;
        margin: -48px 15px 0;
        padding: 0;
        transition: none
    }

    .vjs-control-bar:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 14;
        height: 60px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.25) 100%);
        pointer-events: none
    }

    .vjs-playing.vjs-menu-active .vjs-control-bar, .vjs-user-active .vjs-control-bar {
        opacity: 1
    }

    .vjs-control {
        position: relative;
        z-index: 15;
        width: 28px
    }

    .vjs-control:before {
        width: 25px;
        height: 25px;
        margin: 0 auto
    }

    .vjs-play-control {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        width: 33.3334%;
        height: 100%;
        transform: translateX(-50%)
    }

    .vjs-play-control:before {
        width: 100%;
        height: 100%;
        background-size: 250px auto;
        background-image: url("../images/player/icon_m_player.png");
        background-position: -100px 0;
        display: none
    }

    .vjs-play-control.vjs-playing:before {
        background-position: -150px 0
    }

    .vjs-ended .vjs-play-control.vjs-paused:before {
        background-position: -200px 0
    }

    .vjs-ended .vjs-setting-button .vjs-menu-button, .vjs-menu-active .vjs-setting-button .vjs-menu-button, .vjs-ended .vjs-control-bar:after, .vjs-menu-active .vjs-control-bar:after, .vjs-ended .vjs-time-divider, .vjs-menu-active .vjs-time-divider, .vjs-ended .vjs-control-bar .vjs-control, .vjs-menu-active .vjs-control-bar .vjs-control {
        display: none
    }

    .vjs-ended .vjs-control-bar .vjs-play-control {
        top: 50%;
        margin-top: 0;
        display: block;
        transform: translateY(-150%)
    }

    .vjs-custom-control-spacer {
        display: none
    }

    .vjs-progress-control {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        height: 48px;
        margin-right: 15px;
        flex: auto
    }

    .vjs-progress-holder {
        height: 100%
    }

    .vjs-load-progress, .vjs-play-progress, .vjs-progress-holder:before {
        top: 50%;
        margin-top: -1.5px
    }

    .vjs-setting .font-size, .vjs-setting .head, .vjs-volume-menu-button, .vjs-chapters-button {
        display: none
    }

    .vjs-menu-button-popup .vjs-menu {
        right: -15px;
        bottom: 40px;
        padding-top: 40px;
        width: 50%
    }

    .vjs-menu-button-popup .vjs-menu .header {
        font-size: 13.5px;
        line-height: 40px;
        height: 40px;
        margin-top: -40px;
        padding: 0 15px
    }

    .vjs-menu-button-popup .vjs-menu .close {
        padding: 15px
    }

    .vjs-menu-button-popup .vjs-menu .close:after {
        font-size: 10px
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        box-sizing: border-box;
        top: 40px
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content li {
        height: 40px;
        padding: 10px 15px 10px 24px
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content li:hover {
        color: inherit
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content li:hover:after {
        display: none
    }

    .vjs-menu-active .vjs-control-bar .vjs-setting-button {
        display: block
    }

    @media (orientation: portrait) {
        .vjs-menu-active:not(.vjs-fullscreen):not(.fake-fullscreen) .vjs-control-bar .vjs-setting-button {
            position: fixed;
            top: 51px
        }
    }

    @media (orientation: landscape) {
        .vjs-menu-active:not(.vjs-fullscreen):not(.fake-fullscreen) .vjs-control-bar .vjs-setting-button {
            position: fixed;
            top: 120px
        }
    }

    .video-player .vjs-setting .content .active dd {
        display: block;
        flex: 1 0 auto
    }

    .video-player .vjs-setting dd .auto button:after, .video-player .vjs-setting dd button.active:after, .player .vjs-setting dd .active:after {
        left: 10px
    }

    .player .vjs-setting dd .active:after, .vjs-menu-button-popup .vjs-menu .vjs-menu-content li:hover:after, .vjs-menu-button-popup .vjs-menu .vjs-menu-content li.active:after {
        left: 10px
    }

    .video-player .vjs-setting .content .caption-list, .video-player .vjs-setting .content .font-size, .video-player .vjs-setting .content .audio-track, .video-player .vjs-setting .content .caption-opacity {
        display: block
    }

    .video-player dd li[data-size] {
        font-size: 17px
    }

    .video-player dd [data-size="175"] button {
        font-size: 1.75em
    }

    .video-player dd [data-size="150"] button {
        font-size: 1.5em
    }

    .video-player dd [data-size="100"] button {
        font-size: 1em
    }

    .video-player dd [data-size="50"] button {
        font-size: 0.7em
    }

    .vjs-captions-button, .vjs-audio-button {
        display: none
    }

    .vjs-fullscreen .vjs-share-control {
        display: block
    }

    .vjs-share-control {
        position: absolute;
        right: 55px;
        top: 15px;
        z-index: 6;
        height: auto;
        padding-top: 0
    }

    .vjs-share-control:before {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background-size: 250px auto;
        background-image: url("../images/player/icon_m_player.png");
        background-position: 0 -25px
    }

    .vjs-share-layer {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 11;
        min-width: 200px;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        transform: translate(-50%, -50%)
    }

    .vjs-share-layer .close {
        font: 0/0 a;
        position: absolute;
        top: 10px;
        right: 10px
    }

    .vjs-share-layer .title {
        font-size: 16px;
        text-align: center;
        margin-bottom: 5px
    }

    .vjs-share-layer .close:before {
        content: '\e00e';
        color: #fff;
        font-family: 'atomy-icon-font';
        font-size: 13px;
        line-height: 1;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .vjs-share-layer .btn {
        display: inline-block;
        line-height: 40px;
        width: 40px;
        min-width: 0;
        height: 40px;
        min-height: 0;
        margin: 5px;
        border: 0;
        border-radius: 50%
    }

    .vjs-share-layer .btn.band .icon:focus, .vjs-share-layer .btn.band .icon:before {
        font-size: 25px
    }

    .vjs-progress-control .vjs-play-progress .vjs-control-text {
        opacity: 1;
        transform: scaleY(1)
    }

    .vjs-progress-control:hover .vjs-play-progress .vjs-control-text, .vjs-progress-control .vjs-sliding .vjs-play-progress .vjs-control-text {
        transform: scaleY(0.6);
        top: -5px
    }

    .vjs-text-track-display {
        transform: translateZ(1px);
        position: relative;
        bottom: 20px;
    }

    .vjs-hover .vjs-text-track-display {
        font-size: 16px
    }

    .vjs-hover .vjs-text-track-display > div {
        transition: none;
        transform: none
    }

    .vjs-fullscreen-control:before {
        background-size: 250px auto;
        background-image: url("../images/player/icon_m_player.png");
        background-position: -50px 0
    }

    .vjs-fullscreen .vjs-fullscreen-control:before {
        background-position: -75px 0
    }

    .vjs-portrait {
        position: absolute;
        bottom: 0;
        right: 15px;
        width: 28px;
        height: 48px
    }

    .vjs-portrait:before {
        background-position: -50px 0
    }

    .current-product {
        overflow: hidden;
        padding-bottom: 50px
    }

    .current-product .item.active {
        padding: 0
    }

    .current-product .item:after {
        content: '';
        display: block;
        clear: both
    }

    .current-product .item .name {
        padding-top: 14px
    }

    .current-product .item .thumb {
        box-sizing: border-box;
        float: left;
        width: 90px;
        height: 90px;
        margin-right: 10px;
        padding: 5px
    }

    .current-product .item .thumb:after {
        content: '';
        vertical-align: middle;
        display: inline-block;
        height: 100%
    }

    .current-product .item .thumb img {
        vertical-align: middle;
        height: auto
    }

    .current-product .item .name {
        word-break: break-all;
        width: 100px
    }

    .current-product .item .btns {
        top: 50%;
        right: 5px;
        bottom: auto;
        width: 40px;
        height: 80px;
        margin-top: -40px;
        text-align: right
    }

    .current-product .item .btns .col {
        width: auto
    }

    .current-product .btn.pic {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        line-height: 40px
    }

    .current-product .btn.pic .icon:before {
        font-size: 16px
    }

    .current-product .count {
        color: #fff;
        font-size: 13.5px;
        text-align: center;
        line-height: 50px;
        height: 50px
    }

    .current-product.show .slider-wrap {
        max-height: 170px
    }

    .current-product .slick-list {
        overflow: visible
    }

    .current-product.single {
        padding: 0 0 50px
    }

    .current-product .slider-wrap {
        padding: 0 15px
    }

    .current-product.single .slider-list {
        margin: 15px 0
    }

    .current-product.single .slick-list {
        overflow: hidden
    }

    .current-product.single .slick-slide {
        margin: 0
    }

    .current-product.single .thumb {
        margin: 0
    }

    .current-product.single .item a {
        width: calc(100% - 60px);
        float: none
    }

    .current-product.single .item .name {
        font-size: 13px;
        width: calc(100% - 115px);
        height: 40px
    }

    .current-product.single .price {
        height: auto;
        width: calc(100% - 170px)
    }

    .current-product.single .price span {
        font-size: 13px;
        margin-right: 10px;
        margin-left: 0
    }

    .current-product.single .btns {
        position: absolute;
        width: 40px;
        padding: 0
    }

    .current-product.single .btns .col {
        width: 100%;
        height: 50%;
        margin-left: 0
    }

    .current-product.single .btns .btn {
        line-height: 1.2;
        width: 100%;
        min-width: 0;
        height: 100%;
        border-radius: 0
    }

    .current-product.single .btns .btn.favorite {
        border-bottom: 0
    }

    .current-product.single .slick-dots {
        text-align: center;
        display: block;
        margin-top: 10px
    }

    .current-product.single .slick-dots button {
        width: 8px;
        height: 8px;
        margin: 0 2.5px;
        border-color: #fff;
        border-width: 2px
    }

    .current-product.single .slick-dots .slick-active button {
        border-color: #fff;
        background-color: #fff
    }

    .vod-download strong {
        font-size: 17.5px
    }

    .vod-download select {
        height: 30px
    }

    .player .recommend {
        padding: 0
    }

    .player .recommend:after {
        vertical-align: bottom
    }

    .player .recommend .item {
        font-size: 11px
    }

    .player .recommend .item .thumb {
        width: 145px;
        height: 100px
    }

    .player .recommend .item .thumb img {
        max-height: 100%
    }

    .player .recommend .item .title {
        margin: 6px 0
    }

    .vjs-progress-holder .product {
        width: 7px
    }

    .vjs-poster {
        pointer-events: none
    }

    .vjs-user-active .vjs-text-track-display > div, .vjs-menu-active .vjs-text-track-display > div, .vjs-paused .vjs-text-track-display > div {
        transition: transform 0.5s ease;
        transform: translateY(-45px) !important
    }

    .player #video.vjs-fixed {
        right: 10px;
        left: auto;
        width: 180px
    }

    .player #video.vjs-fixed video {
        max-height: 101.25px
    }

    .fake-fullscreen .player #video.vjs-fixed video {
        max-height: none
    }

    .vjs-audio-mod {
        color: #fff;
        white-space: nowrap;
        cursor: pointer;
        position: absolute;
        bottom: 45px;
        right: 15px;
        display: block;
        width: auto;
        height: 26px
    }

    .vjs-audio-mod:hover > .vjs-control-text, .vjs-audio-mod .vjs-control-text {
        font: inherit;
        position: static;
        line-height: 26px;
        text-shadow: 0 0 5px #000;
        display: block;
        margin: 0;
        padding: 0;
        background-color: transparent;
        transform: none
    }

    .vjs-audio-mod:hover > .vjs-control-text:after, .vjs-audio-mod .vjs-control-text:after {
        content: '';
        vertical-align: middle;
        position: static;
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-left: 5px;
        border-radius: 3px;
        border: 0;
        background-color: rgba(0, 0, 0, 0.9);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 100% auto;
        background-image: url("../images/player/audio_mode.png")
    }

    .vjs-ended .vjs-audio-mod {
        display: none
    }

    .vjs-audio-mod, .vjs-progress-control, .vjs-time-control {
        position: relative;
        width: auto
    }

    .vjs-audio-mod {
        right: 0
    }

    .next-video {
        bottom: 73px
    }

    .next-video .summary {
        height: 63px
    }

    .no-flex .vjs-loading-spinner, .no-flex .vjs-control-bar, .no-flex .vjs-big-play-button {
        display: none !important
    }

    .references {
        width: auto;
        height: 100%
    }

    .references img {
        max-height: 100%;
        width: auto;
        height: auto
    }

    .references.close {
        width: 30px !important;
        height: 30px !important;
        top: 10px !important;
        left: 10px !important
    }

    .references .btn-fullscreen, .references .btn-close {
        top: 10px;
        width: 30px;
        height: 30px
    }

    .references .btn-fullscreen {
        left: 10px
    }

    .references .btn-close {
        right: 10px
    }

    .references.close .btn-close {
        top: 0;
        right: 0
    }

    .fake-fullscreen .fullscreen-reference .vjs-tech, .vjs-nonefixed .fullscreen-reference .vjs-tech {
        right: 10px;
        bottom: 10px;
        width: 150px
    }

    .fullscreen-reference .vjs-setting-button {
        display: none
    }

    .fullscreen-reference .btn-hide-video {
        bottom: 71px;
        right: 10px;
        width: 22px;
        height: 23px;
        background-size: 15px auto;
        background-image: url("../images/player/m_hide_player.png")
    }

    .vjs-reference-control {
        width: 29px;
        padding: 0 6px;
        background-size: 17px auto;
        background-image: url("../images/player/icon_reference.png")
    }
}

@media (max-width: 320px) {
    .current-product .btn.pic {
        min-width: 40px
    }
}

.no-flexbox .vjs-control-bar {
    vertical-align: middle;
    right: 0;
    left: 0;
    display: table;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    opacity: 1;
    table-layout: fixed
}

.no-flexbox .vjs-control {
    vertical-align: middle;
    display: table-cell
}

.no-flexbox .vjs-time-control {
    width: 40px
}

.no-flexbox .vjs-time-divider {
    vertical-align: middle;
    display: table-cell;
    width: 11px
}

.no-flexbox .vjs-progress-control {
    display: block
}

.no-flexbox .vjs-custom-control-spacer {
    display: table-cell;
    width: 100%
}

.no-flexbox .vjs-setting {
    right: 0
}

.no-flexbox .vjs-progress-control {
    right: 20px;
    left: 20px
}

.fake-fullscreen .sticky-header.active {
    display: none
}

.mode-portrait button {
    display: block;
    width: 100%;
    height: 47px;
    background: #02b9f3;
    text-align: center;
    color: #fff;
    font-size: 15px
}

#video.vjs-fixed .vjs-custom-chapter {
    display: none
}

.vjs-custom-chapter {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 16
}

.vjs-custom-chapter .hover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.vjs-custom-chapter .title {
    display: none;
    position: absolute;
    top: -40px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    line-height: 1;
    padding: 8px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px
}

.vjs-custom-chapter:hover .title {
    display: block
}

.vjs-custom-chapter .item span {
    position: absolute;
    width: 10px;
    height: 5px;
    background: #fff;
    font-size: 0;
    top: 50%;
    transform: translateY(-50%)
}

.vjs-timestamp-enabled .vjs-progress-holder .product-wrap {
    display: none
}

@media (max-width: 1280px) {
    .video-player.vjs-paused .vjs-control-bar:after {
        height: 100%
    }
}

.video-player.video-streaming .vjs-backward-button, .video-player.video-streaming .vjs-forward-button, .video-player.video-streaming .playback-rate {
    display: none
}

.video-player.video-live .vjs-backward-button, .video-player.video-live .vjs-forward-button, .video-player.video-live .playback-rate, .video-player.video-live .vjs-time-control {
    display: none
}

.video-player.video-live .vjs-play-progress {
    width: 100% !important
}

@media screen and (min-width: 769px) and (max-width: 1280px){
    .vjs-backward-button, .vjs-forward-button {
        position: absolute;
        top: 0;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.3334%;
        height: 100%;
    }
}

@media screen and (min-width: 769px) {
    .vjs-backward-button, .vjs-forward-button {
        background-repeat: no-repeat;
        background-position: 50% 50%
    }
}

@media screen and (max-width: 768px) {
    .vjs-backward-button, .vjs-forward-button {
        position: absolute;
        top: 0;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.3334%;
        height: 100%
    }

    .vjs-backward-button:after, .vjs-forward-button:after {
        content: '';
        display: block;
        width: 29px;
        height: 33px;
        background-size: cover
    }
}

.vjs-fixed .vjs-backward-button, .vjs-fixed .vjs-forward-button {
    display: none
}

@media screen and (min-width: 769px) {
    .vjs-backward-button {
        left: 0;
        background-image: url("../images/player/sprite/pc/backward.png");
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 768px) {
    .vjs-backward-button {
        left: 0
    }

    .vjs-backward-button:after {
        background-image: url("../images/player/sprite/m/backward.png")
    }
}

@media screen and (min-width: 769px) {
    .vjs-forward-button {
        right: 0;
        background-image: url("../images/player/sprite/pc/forward.png");
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 768px) {
    .vjs-forward-button {
        right: 0
    }

    .vjs-forward-button:after {
        background-image: url("../images/player/sprite/m/forward.png")
    }
}

.vjs-setting {
    color: #fff;
    position: absolute;
    right: -20px;
    bottom: 56px;
    z-index: 10;
    display: none;
    box-sizing: border-box;
    max-width: 100%;
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translateZ(1px);
    min-width: 200px
}

@media (max-width: 1280px) {
    .vjs-setting {
        top: 0;
        right: 0;
        bottom: 0;
        height: auto !important;
        padding-top: 0
    }

    .vjs-setting .font-size, .vjs-setting .head {
        display: none
    }
}

.vjs-setting-button.active .vjs-setting {
    display: block
}

.vjs-setting dl {
    text-align: left;
    vertical-align: top;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    max-width: 290px;
    min-width: 200px;
    height: 100%;
    padding: 96px 0 0;
    border-left: 1px solid #242426
}

@media (max-width: 1280px) {
    .vjs-setting dl {
        display: block;
        max-width: none;
        height: auto;
        width: 100%;
        padding-top: 0
    }
}

.vjs-setting dt {
    white-space: normal;
    word-break: keep-all;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 10px 15px;
    border-bottom: 1px solid #242426
}

@media (max-width: 1280px) {
    .vjs-setting dt {
        position: static;
        font-size: 13.5px;
        font-weight: bold;
        width: 100%;
        height: auto;
        min-height: 40px;
        padding: 10px 15px
    }
}

.vjs-setting dd {
    color: #a7a7a7;
    overflow: auto;
    height: 100%
}

@media (min-width: 847px) {
    .vjs-setting dd {
        max-height: 100% !important
    }
}

@media (max-width: 1280px) {
    .vjs-setting dd {
        display: none;
        height: auto;
        overflow: auto;
        flex: 1 0 auto
    }
}

.vjs-setting dd button {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 75px;
    padding: 0 0 0 30px
}

@media (max-width: 1280px) {
    .vjs-setting dd button {
        min-height: 40px;
        height: auto;
        padding: 0 15px 0 24px;
        white-space: normal;
        word-break: break-all;
        line-height: 1;
    }
}

.vjs-setting dd button:hover {
    color: inherit
}

.vjs-setting dd button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    display: none;
    width: 11px;
    height: 9px;
    margin-top: -4.5px;
    background-repeat: no-repeat;
    background-position: -360px 0;
    background-image: url("../images/player/icon_player.png")
}

.vjs-setting dd button.active {
    color: #4eceff
}

.vjs-setting dd .auto small {
    font-size: 0.8em;
    display: none;
    margin-left: 5px;
    opacity: 0.8
}

.auto-level .vjs-setting dd .auto small {
    display: inline-block
}

.vjs-setting dd .auto-level button.active {
    color: inherit
}

.vjs-setting dd .auto-level button.active:after {
    display: none
}

.vjs-setting dd .auto-level .auto {
    color: #4eceff
}

.vjs-setting dd .auto-level .auto button:after {
    display: block
}

.vjs-setting dd .active:after {
    display: block
}

.vjs-setting ul {
    padding: 0
}

.vjs-setting li {
    position: relative
}

.vjs-setting .header {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    padding: 20px 30px 0;
    border-bottom: 1px solid #242426;
    background-color: rgba(0, 0, 0, 0.7)
}

.vjs-setting .header span {
    display: block /*노출*/
}

@media (max-width: 1280px) {
    .vjs-setting .header {
        display: none
    }
}

.vjs-setting .close {
    font: 0/0 a;
    position: absolute;
    top: 0;
    right: 0;
    padding: 30px
}

.vjs-setting .close:after {
    content: '\e00e';
    color: #858583;
    font-family: 'atomy-icon-font';
    font-size: 16px;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media (max-width: 1280px) {
    .vjs-setting .close {
        padding: 15px
    }

    .vjs-setting .close:after {
        font-size: 10px
    }
}

.vjs-setting .content {
    white-space: nowrap;
    height: 100%;
    padding-top: 0
}

@media (max-width: 1280px) {
    .vjs-setting .content {
        top: 0;         /*0*/
        width: 190px;
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column
    }
}

.vjs-setting .content .caption-list, .vjs-setting .content .font-size, .vjs-setting .content .audio-track, .vjs-setting .content .caption-opacity {
    display: none
}

@media (max-width: 1280px) {
    .vjs-setting-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 55px;
        height: 55px;
        background-image: none
    }
}

.vjs-setting-button .vjs-menu-button {
    display: block;
    width: 40px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../images/player/sprite/pc/setting.png")
}

@media (max-width: 1280px) {
    .vjs-setting-button .vjs-menu-button {
        margin: 0 auto;
        box-sizing: content-box;
        width: 25px;
        height: 25px;
        padding: 15px;
        background-size: 50% auto;
        background-image: url("../images/player/sprite/m/setting.png")
    }
}

@media (max-width: 1280px) {
    .vjs-setting-button.active {
        width: 190px;
        height: 100%;
        padding: 0
    }
}

.vjs-setting-button.active .vjs-menu-button {
    background-image: url("../images/player/sprite/pc/setting-active.png")
}

.vjs-setting-button.active .vjs-setting dd {
    height: 100%
}

.vjs-play-ad-head .vjs-text-track-display, .vjs-play-ad-tail .vjs-text-track-display {
    display: none !important
}

.vjs-play-ad-head .vjs-setting-button, .vjs-play-ad-head .vjs-forward-button, .vjs-play-ad-head .vjs-backward-button, .vjs-play-ad-head .vjs-capters-button, .vjs-play-ad-head .vjs-captions-button, .vjs-play-ad-tail .vjs-setting-button, .vjs-play-ad-tail .vjs-forward-button, .vjs-play-ad-tail .vjs-backward-button, .vjs-play-ad-tail .vjs-capters-button, .vjs-play-ad-tail .vjs-captions-button {
    display: none !important
}

.vjs-play-ad-head .vjs-play-progress, .vjs-play-ad-tail .vjs-play-progress {
    background-color: #ffcc00
}

.vjs-skip {
    color: #fff;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 9;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    transition: bottom 0.5s ease 0.5s
}

.vjs-skip img {
    max-width: 100px
}

.vjs-skip .skip {
    cursor: pointer
}

.vjs-skip .skip, .vjs-skip .skip-timer {
    display: flex;
    align-items: center;
    padding: 5px 10px
}

.vjs-paused .vjs-skip, .vjs-hover .vjs-skip {
    bottom: 73px;
    transition: bottom 0.5s ease 0s
}

@media (max-width: 1280px) {
    .vjs-user-active .vjs-skip, .vjs-paused .vjs-skip, .vjs-hover .vjs-skip {
        bottom: 48px;
        transition: bottom 0.5s ease 0s
    }
}

@media screen and (max-width: 1280px) {
    .references {
        width:350px;
        height:auto;
    }
    .references.BR {
        bottom: 40px !important;
    }
    .references.BM {
        bottom: 40px !important;
    }
    .references.BL {
        bottom: 40px !important;
    }
}

@media screen and (max-width: 768px) {
    .references {
        width:200px;
        height:auto;
    }
    .references.BR {
        bottom: 40px !important;
    }
    .references.BM {
        bottom: 40px !important;
    }
    .references.BL {
        bottom: 40px !important;
    }
}

.vjs-lock {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("../images/common/secret.png")
}
/*# sourceMappingURL=maps/player.css.map */