@CHARSET "UTF-8";
.screen-back{
	position:fixed;
	top:0;
	left:0;	
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.9);
	color:white;
	white-space:nowrap;
	z-index: 1;
	overflow:auto;
	width:100%;
	height:100%;
	text-align:center
	
} 
.screen-back0{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:rgba(0,0,0,0.9);
}
.closebt {
    z-index: 2;
    width: 35px;
    height: 35px;
    position: fixed;
    right: 100px;
    top: 100px;   
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial,Baskerville,monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    border: 0;
    background: none;
    outline: none;
  
}
.video-con{
	z-index: 2;
   display:inline-block;
    text-align: left;
   vertical-align: middle;
   white-space:normal;

}
.screen-back:after{
	content:'';
	display:inline-block;
	height:100%;
	vertical-align:middle;
}


 div.videoContainer .video-thumb:hover .circle,.video-box .video-thumb:hover .circle
  {
     background-color: #f60; 
 	 color:#fff;  	 
}

.video-thumb  {
    color:#fff; 
    transition: .25s;
}

 .video-thumb {
 	
 	clip:rect(0px,5px,0px,5px);
    width: 250px;
    height: 160px;   
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
 	background-color:gray;
 	background-position:center;
	display: flex;
	align-items: center;
	justify-content: center;
 	margin-left: 3rem;
    border-radius: 1rem;
 	margin:auto;
 	
	
}


.circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid #f60;    
    background-color: rgba(255,102,0,.5);
    position: absolute; 
    text-align: center;  
    transition: background-color .5s;
}
.svg-inline {
    font-size: inherit;
    height: 20px;
	transform:translateY(20px);
    overflow: visible;

}
img.videoPic{
padding-top:10px;
width:250px;
height:160px;
clip:rect(0px,5px,0px,5px);
}
 

 
.videoContainer{
width:285px;
height:300px;
text-align:center;
padding-top:10px;
padding-left: 10px;	
 }
.videoContainer h3,
.videoContainer p{
text-align:left;
padding-left: 30px;	
}
.videoContainer p{
font-family:微软雅黑,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;	
color:gray;	

}
.videoContainer h3{
font-family:"Open Sans Semibold",Arial,"Helvetica Neue",Helvetica,sans-serif;	
color:#fff;	
margin-top:10px;
margin-bottom:5px;			

}


.smallVideoScreen{
	padding-top:0px;
	width:100%;
	  
}    
#videoScreen{
	padding-top:0px;
	padding-bottom:10px;
	width:1160px;
	height:700px;
}
#youtube-content {
    display: table;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
#video-list-cont {
    padding-top: 0;
    padding-left: 2rem;
    text-align: left;
}
.video-list-tab {
    vertical-align: top;
    padding-top: 0rem;
    width: 23%;
    display: table-cell;
    box-sizing: border-box;
    border-right: 1px #ccc solid;
}
.playlist {
    cursor: pointer;
    line-height: 2.0rem;
    border-radius: 0.6rem;
    padding: 0.3rem 0;
	display:inline-block;
}
.playlist:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 4px;
    background-color: #19e3b1;
}
.videos-row{
	display:table-row;
	width:100%;
}
.video-cell{
	display:table-cell;
	width:50%;
}
.video-title{
	text-align:center;
	font-size:1.5rem;
	line-height:2.2;
}
.video-desc{
	padding:1rem;
	margin-bottom:3rem;
	color:rgb(98, 138, 122);
}