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



/*
    *** 오디오 컨트롤러
*/
.smAudioController {
    display:flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 88px;
    border: 1px solid rgba(0, 0, 0, 0.80);
    padding:0 25px;
    box-sizing: border-box;
    border-radius:30px;
    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%);
}



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



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

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

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

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


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


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


/*
    *** 볼륨조절바
*/
.smAudioController .volumeController {display:flex; justify-content:center; align-items:center; position:absolute; top:-205px; right:-16px; width:93px; height:189px; background-image:url("../images/volumeBg.png");}
.smAudioController .volumeController .volumeTrack {position:relative; width:19px; height:114px; border-radius:15px; margin-bottom:15px; margin-left:3px; background-color:#000000;}
.smAudioController .volumeController .volumeTrack .trace {position:absolute; left:0; bottom:0; width:100%; height:50%; border-radius:20px; background-color:#FF7E27;}
.smAudioController .volumeController .volumeTrack .volumeBar {
    position:absolute;
    left:-12px;
    bottom:50%;
    margin-bottom:-12px;
    width: 39px;
    height: 20px;
    border-radius: 60px;
    border: 2px solid #000;
    background: linear-gradient(180deg, #FFF 0%, #F2F2F2 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    cursor:pointer;
}




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



/*
    *** 탐색바
*/
.smAudioController .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);}
.smAudioController .seekTrack .trace {width:20%; height:100%; border-radius:30px; background-color:#38ECFF;}
.smAudioController .seekTrack .seekBar {position:absolute; top:-14px; left:20%; margin-left:-22px;}
.smAudioController .seekTrack .seekBar .nStatus {display:block; width:44px; height:44px; background-image:url("../images/seekBar.png");}
.smAudioController .seekTrack .seekBar .oStatus {display:none; width:44px; height:44px; background-image:url("../images/seekBar_over.png");}
.smAudioController .seekTrack .seekBar:hover .nStatus {display:none;}
.smAudioController .seekTrack .seekBar:hover .oStatus {display:block;}



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



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

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

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

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


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






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


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

.smSimpleVpContainer .smVideoSubtitle {bottom:0;}