/*
    ************************************** 일반 비디오 플레이어 **************************************
*/
.smVpContainer {position:relative; width:100%; height:100%; overflow: hidden; border-radius:30px; text-align:center;}
.smVpContainer.full {border-radius:0;}

.smVpContainer video {height:100%; width:100%; object-fit: fill;}
.smVpContainer video.instVideo {display:none;}

.smVpContainer.inst video {display:none;}
.smVpContainer.inst video.instVideo {display:block;}


/*
    *** 스타트 버튼
*/
.smVpContainer[data-startButton='N'] .startButtonWrap {visibility:hidden;}




/*
    *** 화면위 재생, 일시정지 버튼
*/
.smVpContainer .startButtonWrap {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10;}
.smVpContainer .startButtonWrap .btnPlayVideo {display:block; width:156px; height:156px; cursor:pointer;}
.smVpContainer .startButtonWrap .btnPlayVideo .nStatus {background-image:url("../images/btnPlayVideoL.png");}
.smVpContainer .startButtonWrap .btnPlayVideo .oStatus {background-image:url("../images/btnPlayVideoL_over.png");}

.smVpContainer .startButtonWrap .btnPauseVideo {display:none; width:156px; height:156px; cursor:pointer;}
.smVpContainer .startButtonWrap .btnPauseVideo .nStatus {background-image:url("../images/btnPauseVideoL.png");}
.smVpContainer .startButtonWrap .btnPauseVideo .oStatus {background-image:url("../images/btnPauseVideoL_over.png");}

.smVpContainer .startButtonWrap.on .btnPlayVideo {display:none;}
.smVpContainer .startButtonWrap.on .btnPauseVideo {display:block;}


/*
    *** 비디오 컨트롤러
*/
.smVideoController {
    display:flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88px;
    border: 1px solid rgba(0, 0, 0, 0.80);
    padding:0 60px;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(33, 33, 33, 0.90) 68%, rgba(54, 54, 54, 0.90) 100%);
}



/*
    *** 버튼 오버 설정
*/
.smVpContainer .nStatus,
.smVideoController .nStatus {display:block; width:100%; height:100%;}
.smVpContainer .oStatus,
.smVideoController .oStatus{display:none; width:100%; height:100%;}
.smVpContainer div:hover > .nStatus,
.smVideoController div:hover > .nStatus {display:none;}
.smVpContainer div:hover > .oStatus,
.smVideoController div:hover > .oStatus {display:block;}



/*
    *** 재생, 일시정지 토글
*/
.smVideoController .controlBtnArea {position:relative; display:flex; align-items: center; justify-content: space-between; width:228px;}

.smVideoController .btnPlayVideo {display:block; width:60px; height:60px; cursor:pointer;}
.smVideoController .btnPlayVideo .nStatus {background-image:url("../images/btnPlayVideo.png");}
.smVideoController .btnPlayVideo .oStatus {background-image:url("../images/btnPlayVideo_over.png");}

.smVideoController .btnPauseVideo {display:none; width:60px; height:60px; cursor:pointer;}
.smVideoController .btnPauseVideo .nStatus {background-image:url("../images/btnPauseVideo.png");}
.smVideoController .btnPauseVideo .oStatus {background-image:url("../images/btnPauseVideo_over.png");}

.smVideoController .playPauseToggle.on .btnPlayVideo {display:none;}
.smVideoController .playPauseToggle.on .btnPauseVideo {display:block;}


/*
    *** 정지버튼
*/
.smVideoController .btnStopVideo {width:60px; height:60px; cursor:pointer;}
.smVideoController .btnStopVideo .nStatus {background-image:url("../images/btnStopVideo.png");}
.smVideoController .btnStopVideo .oStatus {background-image:url("../images/btnStopVideo_over.png");}


/*
    *** 볼륨버튼
*/
.smVideoController .btnVideoVolume {width:60px; height:60px; cursor:pointer;}
.smVideoController .btnVideoVolume .nStatus {background-image:url("../images/btnVideoSound.png");}
.smVideoController .btnVideoVolume .oStatus {background-image:url("../images/btnVideoSound_over.png");}


/*
    *** 볼륨컨트롤 바
*/
.smVideoController .cl_volumeController {left:auto; right:-16px; transform:translateX(0);}






/*
    *** 디바이더
*/
.smVideoController .divider {width:1px; height:43px; border-right:solid 1px rgba(24,24,24,0.9); background-color:rgba(255,255,255,0.1);}



/*
    *** 탐색바
*/
.smVideoController .seekTrack {position:relative; width:686px; height:14px; border-radius:30px; border: 1px solid rgba(0, 0, 0, 0.60); background-color:rgba(217, 217, 217, 0.1);}
.smVideoController .seekTrack .trace {width:20%; height:100%; border-radius:30px; background-color:#38ECFF;}
.smVideoController .seekTrack .seekBar {position:absolute; top:-14px; left:20%; margin-left:-22px;}
.smVideoController .seekTrack .seekBar .nStatus {display:block; width:44px; height:44px; background-image:url("../images/seekBar.png");}
.smVideoController .seekTrack .seekBar .oStatus {display:none; width:44px; height:44px; background-image:url("../images/seekBar_over.png");}
.smVideoController .seekTrack .seekBar:hover .nStatus {display:none;}
.smVideoController .seekTrack .seekBar:hover .oStatus {display:block;}



/*
    *** 시간정보
*/
.smVideoController .timeArea {display:flex; align-items:center; justify-content:space-between; width:190px; font-size:28px; color:#ffffff; font-family:GodoM;}
.smVideoController .timeArea .vBar {width:1px; height:25px; background-color:#ffffff; transform-origin: center center; transform:rotate(30deg);}



/*
    *** 자막, 대본 버튼
*/
.smVideoController .utilBtnArea {display:flex; justify-content: space-between; align-items: center; width:208px;}

/*자막버튼 토글*/
.smVideoController .btnSubtitleOff {display:block; width:96px; height:60px; cursor:pointer;}
.smVideoController .btnSubtitleOff .nStatus {background-image:url("../images/btnSubtitle.png");}
.smVideoController .btnSubtitleOff .oStatus {background-image:url("../images/btnSubtitle_over.png");}

.smVideoController .btnSubtitleOn {display:none; width:96px; height:60px; cursor:pointer;}
.smVideoController .btnSubtitleOn .nStatus {background-image:url("../images/btnSubtitleOn.png");}
.smVideoController .btnSubtitleOn .oStatus {background-image:url("../images/btnSubtitleOn_over.png");}

.smVideoController .subtitleBtn.on .btnSubtitleOff {display:none;}
.smVideoController .subtitleBtn.on .btnSubtitleOn {display:block;}


/*대본버튼*/
.smVideoController .btnScript {width:96px; height:60px; cursor:pointer;}
.smVideoController .btnScript .nStatus {background-image:url("../images/btnScript.png");}
.smVideoController .btnScript .oStatus {background-image:url("../images/btnScript_over.png");}



/*
    *** 풀화면 버튼
*/
.smVideoController .btnFullScreen {display:block; width:98px; height:74px; cursor:pointer;}
.smVideoController .btnFullScreen .nStatus {background-image:url("../images/btnFullScreen.png");}
.smVideoController .btnFullScreen .oStatus {background-image:url("../images/btnFullScreen_over.png");}

.smVideoController .btnNormalScreen {display:none; width:98px; height:74px; cursor:pointer;}
.smVideoController .btnNormalScreen .nStatus {background-image:url("../images/btnNormalScreen.png");}
.smVideoController .btnNormalScreen .oStatus {background-image:url("../images/btnNormalScreen_over.png");}

.smVideoController .screenMode.on .btnFullScreen {display:none;}
.smVideoController .screenMode.on .btnNormalScreen {display:block;}


/*
    *** 자막
*/
.smVideoSubtitle {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    /*bottom: 0;*/
    bottom: 88px;
    left: 0;
    width: 100%;
    min-height:140px;
    font-size: 76px;
    color: #000000;
    font-family: PretendardB;
    line-height:1.3;
    padding:20px;
    box-sizing: border-box;
    text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
    2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff,
    3px 0px 0px #ffffff, 0px 3px 0px #ffffff, -3px 0px 0px #ffffff, 0px -3px 0px #ffffff, 3px 3px 0px #ffffff, -3px 3px 0px #ffffff, -3px -3px 0px #ffffff, 3px -3px 0px #ffffff;
    background-color:rgba(255, 255, 255, 0.30);
}

.smVideoSubtitle.on {display:flex;}
/*.smVideoSubtitle.up {bottom:88px;}*/



/*
    *** 따라말하기 마크
*/
.smVpContainer .repeatWordsMark {
    display:none;
    position:absolute;
    bottom:236px;
    left:50%;
    transform:translateX(-50%);
    width: 300px;
    height: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.40) inset, 0px 4px 3px 3px rgba(0, 0, 0, 0.25);
    border: 10px solid #FFF;
    background: rgba(0, 0, 0, 0.60);
}

.smVpContainer .repeatWordsMark .trace {
    width: 50%;
    height: 100%;
    border-radius: 30px 0px 0px 30px;
    border: 1px solid #E2640E;
    box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.40) inset;
    background: #FF7E27;
}

.smVpContainer .repeatWordsMark .mic {position:absolute; top:-76px; left:50%; transform:translateX(-50%); width:90px; height:165px; background-image:url("../images/icon_followProgress.png")}

.smVpContainer .offEvent {pointer-events: none;}

.smVpContainer .speakSectionList {
    position: absolute;
    bottom: 88px;
    /*bottom: 0;*/
    right: 0;
    z-index:10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 50px 0px 0px 0px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.70);
}
/*.smVpContainer .speakSectionList.up {bottom:88px;}*/

.smVpContainer .speakSectionList2 {
    position: absolute;
    top:0;
    left: 0;
    z-index:10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 30px 0;
    background: rgba(0, 0, 0, 0.10);
}

.smVpContainer .timeMoveList.up {bottom:228px;}



    /* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button {display:none;}

/* 일시정지, 재생 버튼 */
video::-webkit-media-controls-play-button {display:none;}

/* 재생 슬라이드..? */
video::-webkit-media-controls-timeline {display:none;}

/* 현재 진행 시간 */
video::-webkit-media-controls-current-time-display{display:none;}

/* 전체 시간 */
video::-webkit-media-controls-time-remaining-display {display:none;}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button {display:none;}

/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider {display:none;}





/*
    ************************************** simple 비디오 플레이어 **************************************
*/
.smSimpleVpContainer {position:relative; width:100%; height:100%;}
.smSimpleVpContainer .smVideoController { top: 0; right: 0; left: auto; width: 438px; height: 88px; border-radius: 30px; padding: 0 37px; }
.smSimpleVpContainer .smVideoController .controlBtnArea {width:100%; justify-content: space-between;}


.smSimpleVpContainer video {display:block; height:100%; width:100%; object-fit: fill;}

.smSimpleVpContainer .smVideoSubtitle {bottom:0;}









/*
    ************************************* 텍스트 슬라이드 효과 ******************************************
*/
.smVideoSubtitle .progressText {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    text-shadow:none;
}
.smVideoSubtitle .progressText span {
    background: linear-gradient(to right, #1f7aff 0%, #1f7aff 10%, #000 10%, #000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}