.videoArea {display:block; position:relative; width:100%; height:100%; background-color:#000000;}
.videoArea video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.videoArea .prevVideoArea {position:absolute; top:0; left:0; z-index:2; display:block; width:100%; height:100%; opacity:1; transition: opacity 0.5s linear;}
.videoArea .mainVideoArea {position:absolute; top:0; left:0; z-index:2; display:block; width:100%; height:100%; opacity:1; transition: opacity 0.5s linear;}

.videoArea .prevVideoArea.off {transition: opacity 0.5s linear; opacity:0; z-index:1;}
.videoArea .mainVideoArea.off {transition: opacity 0.5s linear; opacity:0; z-index:1;}




.smVideoController {position:absolute; bottom:0; left:0; width:100%; height:90px; padding:0 40px; box-sizing: border-box; opacity:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%); transition:opacity 0.3s linear;}
.smVideoController.show {opacity:1; transition:opacity 0.3s linear;}
.smVideoController.showFixed {opacity:1 !important;}

.smVideoController .buttonsLine {display:flex; align-items: center; justify-content: space-between; width:100%;}
.smVideoController .controlButtons {display:flex; align-items: center;}



/*
    *** 썸네일 비디오
*/
.prevVideoArea {position:relative;}
.prevVideoArea .cover {display:flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.35);}
.prevVideoArea .cover .textCell {text-align:center; line-height: 1; color:#ffffff;}
.prevVideoArea .cover .textCell .mainText {font-size:54px; font-family:NotoSansBlk;}
.prevVideoArea .cover .textCell .subText {font-size:34px; font-family:NotoSansB; margin-top:30px;}


/*영상보기 버튼*/
.btnViewVideo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 50px;
    font-size: 22px;
    color: #ffffff;
    font-family: NotoSansB;
    line-height: 1;
    border-radius:40px;
    cursor:pointer;
    margin-top:50px;
    background-color:#00B4F1;
}
.btnViewVideo:hover {background-color:#2177D9;}
.btnViewVideo:after {content: "영상 보기";}





/*
    *** 영상 컨트롤 버튼
*/

/*재생버튼*/
.smVideoController .playToggle {display:flex; justify-content: center; align-items: center; width:16px; height:20px; cursor:pointer;}
.smVideoController .playToggle .btnPlayVideo {width:16px; height:20px; background-image:url('../images/btn_play.png'); background-size:100%;}
.smVideoController .playToggle .btnPauseVideo {display:none; width:14px; height:16px; background-image:url('../images/btn_pause.png'); background-size:100%;}
.smVideoController .playToggle.play .btnPlayVideo {display:none;}
.smVideoController .playToggle.play .btnPauseVideo {display:block;}

/*정지버튼*/
.smVideoController .btnStopVideo {width:16px; height:16px; margin-left:25px; background-image:url('../images/btn_stop.png'); background-size:100%; cursor:pointer;}



/*
    *** 볼륨
*/
.smVideoController .volumeWrap {display:flex; align-items: center;}

/*볼륨버튼*/
.smVideoController .volumeToggle {margin-left:20px; cursor:pointer;}
.smVideoController .volumeToggle .btnVolume {width:24px; height:20px; background-image:url('../images/btn_volume.png'); background-size:22px 20px; background-position:center left; background-repeat: no-repeat;}
.smVideoController .volumeToggle .btnMute {display:none; width:24px; height:20px; background-image:url('../images/btn_volume_off.png'); background-size:100%;}
.smVideoController .volumeToggle.mute .btnVolume {display:none;}
.smVideoController .volumeToggle.mute .btnMute {display:block;}

/*볼륨게이지*/
.smVideoController .volumeControllerWrap {overflow: hidden; width:0; height:18px; margin-left:10px; transition:width 0.2s linear;}

.smVideoController .volumeController {width:80px;  padding:0 9px;}
.smVideoController .volumeController .volumeTrack {position:relative; width:100%; height:4px; border-radius:5px; margin-top:7px; background-color:rgba(255, 255, 255, 0.50);}
.smVideoController .volumeController .trace {width:50%; height:4px; border-radius:5px; background-color:#ffffff;}
.smVideoController .volumeController .volumeBar {position:absolute; top:50%; left:0; transform:translateY(-50%); width:18px; height:18px; margin-left:-9px; border-radius:50%; cursor:pointer; background-color:#00B4F1;}

.smVideoController .volumeWrap.on .volumeControllerWrap {width:98px; transition:width 0.2s linear;}




/*
    *** 진행시간
*/
.smVideoController .timeArea {display:flex; align-items: center; font-size:18px; color:#ffffff; font-family:CenturyGoB; margin-left:25px;}
.smVideoController .timeArea .currentTime,
.smVideoController .timeArea .totalTime {}
.smVideoController .timeArea .vBar {margin:0 7px;}



/*
    *** 탐색바
*/
.smVideoController .seekArea {margin-bottom:25px; margin-top:14px;}
.smVideoController .seekArea .track {position:relative; width:100%; height:4px; border-radius:5px; background-color:rgba(255,255,255,0.5);}
.smVideoController .seekArea .track .trace {width:0; height:100%; border-radius:5px; background-color:#00B4F1;}
.smVideoController .seekArea .track .seekBar {position:absolute; top:50%; left:0; transform:translateY(-50%); width:18px; height:18px; margin-left:-9px; border-radius:50%; cursor:pointer; pointer-events: none; background-color:#00B4F1;}





/*
    *** 재생속도
*/
.smVideoController .playSpeedArea {position:relative; margin-right:25px;}
.smVideoController .playSpeedArea .btnSpeed {position:relative; z-index:10; width:25px; height:25px; cursor: pointer; background-image:url("../images/btn_speed.png"); background-size:100%;}
.smVideoController .playSpeedArea .speedSelector {display:none; position:absolute; bottom:-12px; left:-15px; width:55px; padding:8px; padding-bottom:50px; box-sizing: border-box; border-radius:10px; background-color:rgba(0, 0, 0, 0.55);}
.smVideoController .playSpeedArea .speedSelector > li {font-size:14px; color:#ffffff; margin:5px 0; cursor:pointer;}
/*.smVideoController .playSpeedArea .speedSelector > li:hover,*/
.smVideoController .playSpeedArea .speedSelector > li.on {color:#00B4F1;}

.smVideoController .playSpeedArea.on .speedSelector {display:block;}


/*
    *** 자막 버튼
*/
.smVideoController .btnSubtitle {width:21px; height:20px; margin-right:25px; cursor:pointer;}
.smVideoController .btnSubtitle > div {width:100%; height:100%; background-size:100%;}
.smVideoController .btnSubtitle .offImg {background-image:url("../images/btn_subtitle.png");}
.smVideoController .btnSubtitle .onImg {display:none; background-image:url("../images/btn_subtitle_on.png");}

.smVideoController .btnSubtitle.on .offImg {display:none;}
.smVideoController .btnSubtitle.on .onImg {display:block;}

.smVideoController .btnSubtitle.disabled {opacity:0.3; pointer-events: none;}





/*
    *** 스크린모드
*/
.smVideoController .screenModeToggle {width:20px; height:20px;}
.smVideoController .screenModeToggle .normalScreen {display:none; width:100%; height:100%; cursor:pointer; background-image:url("../images/btn_normalScreen.png"); background-size:100%;}
.smVideoController .screenModeToggle .fullScreen {width:100%; height:100%; cursor:pointer; background-image:url("../images/btn_fullScreen.png"); background-size:100%;}
.smVideoController .screenModeToggle.full .normalScreen {display:block;}
.smVideoController .screenModeToggle.full .fullScreen {display:none;}



/*
    *** 중앙 재생, 일시정지 버튼
*/
.screenPlayToggle {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); cursor:pointer; /*pointer-events: none;*/ opacity:0;}
.screenPlayToggle > div {width:100px; height:100px; background-size:100%;}
.screenPlayToggle .iconPlay {background-image:url("../images/btn_play_screen.png");}
.screenPlayToggle .iconPause {display:none; background-image:url("../images/btn_pause_screen.png");}

.screenPlayToggle.play .iconPlay {display:none;}
.screenPlayToggle.play .iconPause {display:block;}
.screenPlayToggle.show {opacity:1; transition:opacity 0.3s linear;}



/*
    *** 종료버튼
*/
.smPlayerCloseBtn {position: absolute; top: 20px; right: 20px; cursor: pointer;}