/* Full Screen일 경우 스타일 --------------------------------------- */

.wrapper:fullscreen {
	max-width: none;
	width: 100%;
}

.wrapper:-webkit-full-screen {
	max-width: none;
	width: 100%;
}

.player__video {
	width: 100%;
}

.player__button {
	background: none;
	border: 0;
	line-height: 1;
	color: white;
	text-align: center;
	outline: 0;
	padding: 0;
	cursor: pointer;
	max-width: 40px;

}

.player__button:focus {
	border-color: #ffc600;
}

.play__btn {
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_play_off.png");
	margin: 0 15px;
	cursor: pointer;
}
.play__btn:hover {
	background-image: url("../images/video/btn_play_on.png");
}
.pause__btn {
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_pause_off.png");
	margin: 0 15px;
	cursor: pointer;
}
.pause__btn:hover {
	background-image: url("../images/video/btn_pause_on.png");
}


.player__slider {
	max-width: 100px;
	height: 30px;
}

.wrapper:hover .player__controls {
	transform: translateY(0);
}
.wrapper:hover .progress {
	height: 5px;
}
.player__controls > * {
	flex: 1;
}
.player__controls__lock > * {
	flex: 1;
}

.player__controls {
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	transform: translateY(100%) translateY(-5px);
	transition: all .3s;
	flex-wrap: wrap;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	z-index: 20;
}

.wrapper:hover .player__controls {
    transform: translateY(0); /* hover 시 올라옴 */
}

.player__controls__lock {
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	flex-wrap: wrap;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	z-index: 20;
}
.progress {
	flex: 10;
	position: relative;
	display: flex;
	flex-basis: 100%;
	height: 5px;
	transition: height 0.3s;

	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.speedWrap {
	max-width: 50px;
	color: #fff;
	margin: auto 0px;
	padding: 0 7px;
	z-index: 100;

}
.speed__btn {
	max-width: 36px;
	font-size: 14px;
	color: white;
	background-color: transparent;
	border: 0;
	margin-left: 30px;
	cursor: pointer;
background-image: url("../images/video/btn_speed_bg.png");
}
.speedRate {
	display: none;
	position: absolute;
	bottom: 35px; left: 320px;
	text-align: center;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 5px 5px 0 0;
	z-index: 100;
}
/* 배속 컬러지정*/
.speed__buttonS {
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	list-style-type : none;
	padding: 2px 20px;
	background-color: transparent;
	border: 0;
}
.speed__button {
	font-size: 12px;
	color: #cccccc;
	list-style-type : none;
	padding: 2px 20px;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}
.speed__button:hover {
	font-weight: bold;
	color: white;
}


.current {
	max-width: 30px;
	font-size: 12px;
	color: #ffffff;
	margin: auto 0px;
	padding: 0 7px;
}
.duration {
	max-width: 30px;
	color: #fff;
	margin: auto 0px;
	padding: 0 7px;
}
.openControlbar-btn {
	width: 18px; height: 23px;
	max-width: 18px;
	background-image: url("../images/video/btn_lock_open_off.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.openControlbar-btn:hover {
	background-image: url("../images/video/btn_lock_open_on.png");
}

.lockControlbar-btn {
	width: 18px; height: 23px;
	max-width: 18px;
	background-image: url("../images/video/btn_lock_close_on.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.lockControlbar-btn:hover {
	background-image: url("../images/video/btn_lock_close_on.png");
}

.fullscreen-btn {
	max-width: 20px;
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_fullScreen_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.fullscreen-btn:hover {
	background-image: url("../images/video/btn_fullScreen_on.png");
}
.reducescreen-btn {
	display: none;
	max-width: 20px;
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_exitScreen_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.reducescreen-btn:hover {
	background-image: url("../images/video/btn_exitScreen_on.png");
}
.pip-btn {
	max-width: 20px;
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_pip_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.pip-btn:hover {
	background-image: url("../images/video/btn_pip_on.png");
}
.subtitle-btn {
	max-width: 20px;
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_subTitle_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
	cursor: pointer;
}
.subtitle-btn:hover {
	background-image: url("../images/video/btn_subTitle_on.png");
}
.subtitleNo-btn {
	max-width: 20px;
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_subTitle_none.png");
	background-color: transparent;
	margin: 4px 10px 0px 10px;
	border: 0;
}

.progress__filled {
	width: 50%;
	background: rgba(247, 55, 90, 0.9);
	flex: 0;
	flex-basis: 0%;
}

.progress__filled .current {
	position: absolute;
	right: 0;
	top: -10px;
}

.timeWrap {
	position: relative;
	max-width: 70px;
	color: #fff;
	font-size: 12px;
	margin: auto 0px;
	padding: 0 0px;
}
.splitBar {
	font-size: 15px;         /* 크기 키우기 */
	color: white;            /* 색상 진하게 */
	font-weight: bold;       /* 굵게 표시 */
}


.index__btn {
	max-width: 71px;
	width: 71px; height: 22px;
	background-image: url("../images/video/btn_index_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 5px;
	border: 0;
	cursor: pointer;
}
.index__btn:hover {
	background-image: url("../images/video/btn_index_on.png");
}
.index__btn__close {
	display: none;
	max-width: 71px;
	width: 71px; height: 22px;
	background-image: url("../images/video/btn_index_off.png");
	background-color: transparent;
	margin: 4px 10px 0px 5px;
	border: 0;
	cursor: pointer;
}
.index__btn__close:hover {
	background-image: url("../images/video/btn_index_off.png");
}


/* input type="range" 스타일 (Volume 부분) --------------------------------------- */
.volumeOn__btn {
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_speakO_off.png");
	margin-left: 20px;
	cursor: pointer;
}
.volumeOn__btn:hover {
	background-image: url("../images/video/btn_speakO_on.png");
}
.volumeOff__btn {
	width: 20px; height: 20px;
	background-image: url("../images/video/btn_speakX_off.png");
	margin-left: 20px;
	cursor: pointer;
}
.volumeOff__btn:hover {
	background-image: url("../images/video/btn_speakX_on.png");
}
.changeVolume {
	cursor: default;
}

.timeReverse {
	max-width: 22px;
	width: 22px; height: 20px;
	background-image: url("../images/video/btn_time-reverse_off.png");
	cursor: pointer;
	margin: auto 0px;
	margin-left: 10px;
}
.timeReverse:hover {
	background-image: url("../images/video/btn_time-reverse_on.png");
}

input[type=range] {
	-webkit-appearance: none;
	background: transparent;
	width: 100%;
	margin: 0 5px;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 3.4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
	background: rgba(255, 255, 255, 0.8);
	border-radius: 1.3px;
	border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
	width: 14px; height: 14px;
	background-image: url("../images/video/img_slider_thumb.png");
	margin-top: -5px;
	cursor: pointer;
	-webkit-appearance: none;
}
input[type=range]:focus::-wefbkit-slider-runnable-track {
	background: rgba(186, 218, 85, 0.8);
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
	background: #ffffff;
	border-radius: 1.3px;
	border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #ffc600;
	cursor: pointer;
}


/* 기능 버튼 --------------------------------------- */
.map__btn {
	max-width: 20px;
	width: 20px; height: 20px;
	background: url("../images/video/btn_map_off.png");
	margin: 5px 5px 0px 0px;
	cursor: pointer;

}
.map__btn:hover {
	background: url("../images/video/btn_map_on.png");
}


/* 페이지 이동 --------------------------------------- */
.prevArrow {
	position: relative;
	max-width: 16px;
	width: 16px; height: 22px;
	background: url("../images/video/btn_prev_off.png");
	margin: 4px 0px 0px 10px;
	cursor: pointer;
}
.prevArrow:hover {
	background: url("../images/video/btn_prev_on.png");
}
.nextArrow {
	position: relative;
	max-width: 16px;
	width: 16px; height: 22px;
	background: url("../images/video/btn_next_off.png");
	margin: 4px 15px 0px 0px;
	cursor: pointer;
}
.nextArrow:hover {
	background: url("../images/video/btn_next_on.png");
}

.pageNumber {
	position: relative;
	max-width: 40px;
	color: white;
	font: 16px 'Noto Sans KR', sans-serif;
	line-height: 28px;
	text-align: center;
}


/* 영상 SKIP --------------------------------------- */
#btnSkip {
	display: none;
	position: absolute;
	bottom: 60px; left: 100px;
	width: 79px; height: 80px;
	background: url("../images/video/btn_skip_off.png");
	cursor: pointer;
	z-index: 10;
}
#btnSkip:hover {
	background: url("../images/video/btn_skip_on.png");
}