.video-player-full .video-js.vjs-fluid,
.video-player-full .video-js.vjs-16-9,
.video-player-full .video-js.vjs-4-3,
.video-player-full video.video-js,
.video-player-full video.vjs-tech {
  max-height: calc(100vh);
  position: relative !important;
  width: 100%;
  height: auto !important;
  min-height:100vh;
  max-width: 100% !important;
  padding-top: 0 !important;
  line-height: 0;
  overflow:hidden;
}


#video-player {
    border-style: solid;
    border-width: thin;
    border-color: #D3D3D3;
    overflow:hidden;
}

#video-player-container {
    overflow:hidden;
}

#video-player-container video {
    transition: transform 0.3s;
}


.video-js {
    font-size: 12px;
}

/*커스텀 비디오 타이틀바*/
.video-js .vjs-title-bar {
      background: rgba(0, 0, 0, 0.5);
      color: white;  
      /*기본적으로 화면에 표시 안함*/
      display: none;
      font-size: 1.5em;
      padding: 0.8em;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
       line-height: 1em;
}

/* 컨트롤 바가 화면에 표시될 때에만 타이틀바가 보여야 한다.*/
.video-js.vjs-paused.vjs-has-started .vjs-title-bar,
.video-js.vjs-user-active.vjs-has-started .vjs-title-bar{
  display: block;
}


/*Captions Settings Dialog*/
.vjs-caption-settings {
    position: absolute;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

/*임시로 자막 설정 버튼을 숨긴다.*/
.video-js .vjs-menu-item.vjs-texttrack-settings {
    display: none;
}



/*자막 크기*/
.vjs-text-track-display div {
  font-size: 2rem !important;
}
@media (min-width: 1920px) {
    .vjs-text-track-display div {
      font-size: 2.4rem !important;
    }
}
@media (min-width: 1400px) and (max-width: 1919px) {
    .vjs-text-track-display div {
      font-size: 2.2rem !important;
    }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .vjs-text-track-display div {
      font-size: 2rem !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .vjs-text-track-display div {
      font-size: 1.8rem !important;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .vjs-text-track-display div {
      font-size: 1.8rem !important;
    }
    .video-caption-editor .vjs-text-track-display div {
      font-size: 1.5rem !important;
    }
}
@media (min-width: 0px) and (max-width: 575px) {
    .vjs-text-track-display div {
      font-size: 1.7rem !important;
    }
    .video-caption-editor .vjs-text-track-display div {
      font-size: 1.25rem !important;
    }
}


/*자막 배경*/
.vjs-text-track-display div.vjs-text-track-cue > div {
	background-color: rgba(0, 0, 0, 0.7) !important;
}


/*자막 여백*/
@media (min-width: 768px) and (orientation:landscape) {
    .video-js .vjs-text-track-display {
	    left: 10px;
	    right: 10px;
	    bottom: 4em;
    }
}

.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {	
	bottom: 2em;
}	






/*반응형 UI 처리*/

/*For Smartphone Portrait*/
@media (min-width: 0px) and (max-width: 500px) and (orientation:portrait) {
    .vjs-button > .vjs-icon-placeholder:before {
        width: 80% !important;
    }

    .video-js .vjs-control.vjs-seek-button, 
    .video-js .vjs-control.vjs-fullscreen-control,
    .video-js .vjs-control.vjs-zoom-control,
    .video-js .vjs-control.vjs-mute-control,
    .video-js .vjs-control.vjs-picture-in-picture-control {
        width: 3.3em;
    }

    .video-js .vjs-control.vjs-play-control {
        width: 3.6em;
    }
}


@media (min-width: 0px) and (max-width: 767px) and (orientation:portrait) {
    #video-player-container {
        padding: 0px;
    }

    #video-player {
    border-width: 0px;
    }

    .page-title {
        display: none;
    }

}

@media (min-width: 0px) and (max-width: 767px) and (orientation:landscape) and (min-aspect-ratio: 17/9) {

    #video-player-container {
        margin-left: 32px;
        margin-right: 32px;
    }

    #video-player-container.video-player-full {
        margin-left: 0px;
        margin-right: 0px;
    }


}

@media (min-width: 0px) and (max-width: 767px) and (orientation:landscape) {

    #video-player {
        margin-top: 2px;
    }

    .video-player-full #video-player {
        margin-top: 0px;
    }

    .page-title {
        display: none;
    }

}


@media (min-width: 768px) and (max-width: 991px) and (orientation:portrait) {


}


@media (min-width: 768px) and (max-width: 991px) and (orientation:landscape) {

    #video-player {
        margin-top: 20px;
    }

    .video-player-full #video-player {
        margin-top: 0px;
    }

    .page-title {
        display: none;
    }

}


@media (min-width: 992px) and (max-width: 1199px) and (orientation:portrait) {


}


@media (min-width: 992px) and (max-width: 1199px) and (orientation:landscape) {

    #video-player {
        margin-top: 20px;
    }

    .video-player-full #video-player {
        margin-top: 0px !important;
    }

    .page-title {
        display: none;
    }


}


@media (min-width: 1200px) and (max-height: 680px ) {

    .page-title {
        display: none;
    }


}

@media (min-width: 1200px) {


}



/*Video Player API*/
.dz-video-player-modal.root {
    width: 100%;
    height: 100%;
    position:relative;
}

.dz-video-player-modal.root.center {
text-align:center
}


.dz-video-player-modal .content.center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    display:inline-block;
}



/*VideoJsZoomController*/
.video-js .vjs-zoom-control .vjs-icon-placeholder {
    font-family: FontAwesome;
}

.video-js .vjs-zoom-control .vjs-icon-placeholder:before {
    content: "\f00e";
}

.video-js .vjs-zoom-controlbar {
    position: absolute;
    right: 0px;
    bottom: 3em;
    background-color: rgba(43, 51, 63, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    border-width: 1px;
    /*border-style: solid;*/
    border-radius: 1px;
    padding: 1px;
    padding-bottom: 5px;
}

.video-js .vjs-zoom-controlbar .vjs-icon-placeholder {
    font-family: FontAwesome;
}

.video-js .vjs-zoom-controlbar .vjs-button {
    height: 3em;
}

.video-js .vjs-zoom-controlbar .vjs-button.vjs-zoom-in .vjs-icon-placeholder:before {
    content: "\f00e";
}

.video-js .vjs-zoom-controlbar .vjs-button.vjs-zoom-out .vjs-icon-placeholder:before {
    content: "\f010";
}

.video-js .vjs-zoom-controlbar .vjs-button.vjs-zoom-left .vjs-icon-placeholder:before {
    content: "\f137";
}

.video-js .vjs-zoom-controlbar .vjs-button.vjs-zoom-right .vjs-icon-placeholder:before {
    content: "\f138";
}

.video-js .vjs-zoom-controlbar .vjs-button.vjs-zoom-reset .vjs-icon-placeholder:before {
    content: "\f021";
}

.video-js .vjs-zoom-controlbar .vjs-zoom-scale-text {
    font-size: 1.2em;
    margin-left: 10px;
    margin-right: 3px;
    padding-top: 0.2em;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}