@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
    *{
       font-family: 'Poppins', sans-serif;
       margin:0; padding:0;
       box-sizing: border-box;
       outline: none; border:none;
       text-decoration: none;
       text-transform: capitalize;
    }
    body{
       background: url(../image/视频背景.jpg);
       background-size: cover;
       padding: 20px
    }
    .container{
       max-width: 1500px;
       margin:100px auto;
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       gap:20px;
    }
    .container .main-video-container{
       flex:1 1 1000px;
       border-radius: 5px;
       box-shadow: 0 5px 15px rgba(0,0,0,.1);
       background-color: #fff;
       padding:15px;
    }
    .container .main-video-container .main-video{
       margin-bottom: 7px;
       border-radius: 5px;
       width: 100%;
    }
    .container .main-video-container .main-vid-title{
       font-size: 20px;
       color:#444;
    }
    .container .video-list-container{
       flex:1 1 350px;
       height: 485px;
       overflow-y: scroll;
       border-radius: 5px;
       box-shadow: 0 5px 15px rgba(0,0,0,.1);
       background-color: #fff;
       padding:15px;
    }
    .container .video-list-container::-webkit-scrollbar{
       width: 10px;
    }
    .container .video-list-container::-webkit-scrollbar-track{
       background-color: #fff;
       border-radius: 5px;
    }
    .container .video-list-container::-webkit-scrollbar-thumb{
       background-color: #444;
       border-radius: 5px;
    }
    .container .video-list-container .list{
       display: flex;
       align-items: center;
       gap:15px;
       padding:10px;
       background-color: #eee;
       cursor: pointer;
       border-radius: 5px;
       margin-bottom: 10px;
    }
    .container .video-list-container .list:last-child{
       margin-bottom: 0;
    }
    .container .video-list-container .list.active{
       background-color: #444;
    }
    .container .video-list-container .list.active .list-title{
       color:#fff;
    }
    .container .video-list-container .list .list-video{
       width: 100px;
       border-radius: 5px;
    }
    .container .video-list-container .list .list-title{
       font-size: 17px;
       color:#444;
    }
    @media (max-width:1200px){
       .container{
          margin:0;
       }
    }
    @media (max-width:450px){
       .container .main-video-container .main-vid-title{
          font-size: 15px;
          text-align: center;
       }
       .container .video-list-container .list{
          flex-flow: column;
          gap:10px;
       }
       .container .video-list-container .list .list-video{
          width: 100%;
       }
       .container .video-list-container .list .list-title{
          font-size: 15px;
          text-align: center;
       }
    }