@charset "utf-8";
/* CSS Document */
body{
	padding:0;
	margin:0;
}
*:focus {
    outline: none;
}
.container{
	display:flex;
	justify-content: center;
	align-items: center;
	height:100vh;	
	background: rgb(252, 252, 252);
}
.videoContainer{
	display: flex;
	width:100%;
	position: relative;
	overflow: hidden;
}
.videoContainer:hover .video-controls{
	/* videoContainer 오버시 컨트롤바 영상위에 표시 */
	transform:translateY(0);
}

.videoContainer:hover .videoTitle{
	/* videoContainer 오버시 컨트롤바 영상위에 표시 */
	transform:translateY(0);
}
.video{	
	width:100%;
}
.video-controls{
	display:flex;
	position: absolute;
	height: 50px;
	width:100%;	
	bottom:0;
	left:0;
	flex-wrap: wrap;
	background: linear-gradient(to top,rgba(0,0,0,0.7), rgba(0,0,0,0.0));	
	/*videoContainer 오버시 컨트롤바 영상위에 표시*/
	transform:translateY(100%) translateY(5px);
	transition:all 0.3s;
}

.videoTitle{
	display:flex;
	position: absolute;
	height:70px;
	width:100%;
	left:0;
	flex-wrap: wrap;	
	background:linear-gradient(to bottom,rgba(0,0,0,0.3), rgba(0,0,0,0));
	/*videoContainer 오버시 컨트롤바 영상위에 표시*/
	transform:translateY(100%) translateY(-150px);
	transition:all 0.3s;
}

/*
#disTxt{	
	width:100%;
	text-align: center;
	text-shadow: -1px 0 rgb(200, 200, 200),0 1px rgb(200, 200, 200),1px 0 rgb(200, 200, 200),0 -1px rgb(200, 200, 200);
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: rgb(0, 0, 0);
	margin: 15px 10px 0 10px;
}
*/

.seekBar{
	height: 3px;
	top: 0;
	left: 0;
	margin:0 15px 0 15px;
	width: 100%;
	border-radius: 12px;
	cursor: pointer;
	background:rgba(255,255,255,0.2);
	/* seekBar 마우스 아웃시 원상태로 복귀 */	
	transition: 0.1s;
	transform: scaleY(1);
	
}

.seekBar:hover + .seekBtn{
	transition: 0.2s;
	opacity: 1;
}

.seekBar:hover {
	transform: scaleY(1.5);
} 

.progressBar{
	position: relative;
	height: 3px;
	width:0;
	border-radius: 12px;
	background:rgb(255, 4, 4);
	z-index: 20;	
}
.loadingBar{
	position: relative;
	top:-3px;
	height: 3px;
	width:0;
	border-radius: 12px;
	background:rgba(255,255,255,0.3);
	z-index: 10;
}

.seekBtn{
	position: absolute;
	bottom:40px;
	left:10px;
	cursor: pointer;
	font-size: 14px;
	color: rgb(255, 4, 4);
	opacity: 0;
	transition: 0.2s;
}

.seekBtn:hover{
	opacity: 1;
}

.play{
	position: absolute;
	margin-left:15px;
	bottom:14px;
	cursor: pointer;
	font-size: 16px;
	color: aliceblue;
}
.volumeCtrl{
	display:flex;
	position:absolute;
	height:auto;
	width:30px;
	left: 40px;
	bottom:11px;
	align-items: center;
	overflow: hidden;
	transform:translateX(0);
	transition:all 0.2s;
}
.volumeCtrl:hover{
	width:155px;
}
.volumeCtrl:hover + .displayTime{
	transform:translateX(120px);
}
.volumeBtn{
	margin-left:5px;
	cursor: pointer;
	font-size: 20px;
	/*padding-right: 17px;	*/
	color: aliceblue;	
}
.volumeBar{
	position:absolute;
	height:10px;
	width:100px;
	bottom:6px;
	left:45px;
	/*background: blue;*/
}
.volumeCtrlBar{
	position: absolute;
	height:4px;
	width:50px;
	background: white;
	left:2px;
	bottom:4px;
	border-radius: 8px;
	transition: 0.2s;
}
.volumeBar input[type="range"]{
	position: relative;
	height: 4px;
	width: 100px;
	bottom:11px;	
	background:rgba(255, 255, 255, 0.3);
	cursor: pointer;
	border-radius: 8px;
	-webkit-appearance: none !important;
}
.volumeBar input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none !important;
	position: relative;
	height:13px;
	width:13px;
	border-radius: 50%;
	background: white;
	transition: 0.2s ease-in-out forwards;
	cursor: pointer;
	opacity: 0;
}
.volumeBar input[type="range"]:hover::-webkit-slider-thumb{
	opacity: 1;
	transition: 0.2s;
}
.displayTime{
	position: relative;
	height:20px;
	left: 85px;
	bottom:0;
	font-family: Tahoma, sans-serif;
	font-size: 0.9rem;
	color:rgb(221, 221, 221);
	transition:all 0.3s;
}
.fullscreenBtn{
	position: absolute;
	right: 5px;
	bottom: 12px;
	cursor: pointer;
	font-size: 20px;
	color: aliceblue;
	margin-right: 10px;
}