body, html {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;  
}  
  
.container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100vh;  
    max-width: 1200px;  
    margin: 0 auto;  
}  
  
.video-player {  
    width: 100%;  
    max-width: 800px;  
}  
  
.video-player video {  
    width: 100%;  
    height: auto;  
}  
  
.titles {  
    margin-top: 20px;  
    width: 100%;  
    max-width: 800px;  
    text-align: center;  
}  
  
.titles ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  
  
.titles li {  
    padding: 10px;  
    cursor: pointer;  
    background-color: #f0f0f0;  
    margin: 5px 0;  
    border-radius: 5px;  
}  
  
.titles li:hover {  
    background-color: #e0e0e0;  
}   
  
.video-player video {  
    width: 100%;  
    height: 100%;  
    object-fit: contain; /* 这将确保视频保持其原始比例并适应容器 */  
}  
  
/* 设定视频播放器容器的大小 */  
.video-player {  
    width: 600px; 
    height: 340px;  
    max-width: 100%;
    margin: 0 auto;
    position: relative;  
}  
  
@media (max-width: 767px) {  
    /* 在手机端，你可能想要调整播放器的大小或使其全屏 */  
    .video-player {  
        width: 100%;
        height: auto;
    }  
  
    /* 其他针对手机端的样式调整 */  
}
 
  
/* 响应式设计 */  
@media (min-width: 768px) {  
    .container {  
        flex-direction: row;  
    }  
  
    .video-player {  
        flex: 1;  
    }  
  
    .titles {  
        flex: 0 0 30%;  
        margin-left: 20px;  
        text-align: left;  
    }  
  
    .titles ul {  
        display: flex;  
        flex-direction: column; /* 在电脑端保持纵向排列 */  
    }  
	
	.titles #link , .titles #linkQA{
		margin:3% 5%;
		padding: 3%;
		background-color: white;
		border: 1px dashed gray ;
	}
	
	.txt {
		border: 1px dashed gray ;
		width: 70%;
		margin-top: 4%;
		padding: 1% 15%;
	}
	
}  
  
@media (max-width: 767px) {  
    .container {  
        flex-direction: column; /* 在手机端保持纵向布局 */  
    }  
  
    .video-player {  
        width: 100%;  
        height: auto;
    }  
  
    .titles {  
        width: 100%;  
        margin-top: 10px; 
        text-align: center; 
    }  
  
    .titles ul {  
        display: block; /* 默认为块级元素，但明确写出以防覆盖 */  
        flex-direction: column; /* 在手机端也保持纵向排列（虽然这是默认行为） */  
        padding: 0;  
    }  
  
    .titles li {  
        display: block; /* 确保每个列表项占据一整行 */  
        width: 100%; /* 可选，但有助于明确布局 */  
        margin: 5px 0; 
    }  
	
	.titles #link, .titles #linkQA {
		width: 90% ; 
		margin: 1% 5%; 
		padding: 1% 0 ; 
		background-color: white;
		border: 1px dashed gray ;
	}
	
	.txt {
		padding: 2% 0;
		margin-top: 10%;
		border: 1px dashed gray ;
		width: 99.8%;
	}
	
}