*{
	margin: 0 ;
	border: none;
	padding: 0;
}

/* 设置滚动条样式 */

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #1f2430;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #1f2430;
  -webkit-box-shadow: inset 0 0 6px #1f2430;
  border-radius: 10px;
  background-color: #1f2430;
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.2);
}

/* //Ie下滚动条样式 */

/* HTML {
  scrollbar-base-color: rgba(0,0,0,0.2);
  scrollbar-3dlight-color:rgba(0,0,0,0.2);
  scrollbar-highlight-color: rgba(0,0,0,0.2);
  scrollbar-track-color: rgba(255,255,255,0.2);
  scrollbar-arrow-color:rgba(255,255,255,0.2);
  scrollbar-shadow-color:rgba(255,255,255,0.2);
  scrollbar-darkshadow-color: rgba(0,0,0,0.2); 
} */

html,body{
  width:100%;height:100%;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  background: #0f0f1e;
  font-family: PingFangSC-light, "Source Sans Pro", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
body{
	background:#0f141d;
}
header{
    font-size: 1rem;
    height: 74px;
    line-height: 74px;
    padding: 0 20px;
    border-bottom: 1px solid #353a45;
    color:#fff;
    font-weight:700;
}
#cans{
	display:flex;
	position: relative;
	margin: 0 auto;
	height: 100%;
	width: 100%;
}

#CuPlayer{width:82%;flex-grow: 1;}
#playList{width:18%;flex-grow: 1;overflow-x:hidden;overflow-y:auto;height:100%;}

#video{
	/*height: 80vh;*/
	float: right;
	position: relative;   /*去掉这句将会使得video优先级失效*/
	z-index: 99;
	background:#0f0f1e;
}

aside{
	background:#1c1d30;
	opacity: 0.9;
	position: relative;
}
aside ul{
  padding:10px;
	list-style: none;
	text-align: center;
}
aside ul li{
  margin:10px 0;
  font-size: 0px;
	cursor:pointer;
}

aside ul li img{width:100%;}

aside ul li:hover{
	
}

aside #playList-hidden {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	right: 0;
	width:28px ;
	height: 52px;
  background: linear-gradient(90deg, #0DCCFF 0%, #4760FF 100%);
	font-size: 16px;
	font-weight: bold;
	border-top-left-radius:5px ;
	border-bottom-left-radius:5px ;
	opacity: 1;
	z-index: 10000;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

#cans #playList-show1{
	position: absolute;
	right:0;
	top: 50%;
  transform: translateY(-50%);
	width:28px ;
	height: 52px;
  background: linear-gradient(90deg, #0DCCFF 0%, #4760FF 100%);
	font-size: 16px;
	font-weight: bold;
	border-top-left-radius:5px ;
	border-bottom-left-radius:5px ;
	opacity: 0.5;
	visibility: hidden;
	z-index: 10000;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

#cans #playList-show1:hover,aside #playList-hidden:hover{
	opacity: 0.9;
}
.select{
	padding:5px;
  background:#2081eb;
}

/*aside #playList-show{
	position: absolute;
	bottom: 250px;
	left: 0;
	width:20px ;
	height: 32px;
	background: lightgoldenrodyellow;
	font-size: 16px;
	font-weight: bold;
	border-top-left-radius:10px ;
	border-bottom-left-radius:10px ;
	opacity: 0.5;
	z-index: 1000;/*这里是第一优先级，为什么没显示在视频上方
	transform:translateX(-20px) ;
	display: block;
}*/