.head-box {
    display: inline-block;
    width: 40%;
    /* 减去左右边距的总和 */
    height: auto;
    vertical-align: top;
    /* 对齐元素的顶部 */
    margin: 10px;
    display: flex;
}

.head_content {
    display: inline-block;
    width: 60%;
    /* 减去左右边距的总和 */
    height: 780px;
    vertical-align: top;
    /* 对齐元素的顶部 */
    margin: 10px;
    margin-left: 8%;
    margin-bottom: 80px;
    border: #ccc;
}

.header_boxBody {
    width: 88%;
    margin-left: 10%;
    display: flex;
    justify-content: space-between;
    margin-right: 2%;
}

/* 顶部标题 */
.head-box h1 {
    font-family: 黑体;
    font-size: 5rem;
    font-weight: bolder;
}

.head-box img {
    max-width: 100%;
    /* 图片最大宽度为容器宽度的100% */
    height: 100%;
    object-fit: scale-down;
    /* 自动调整高度以保持原始比例 */
}



/* 顶部logo 文字介绍 */
.title_header {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 25px 0;
    font-size: 2rem;
}

.title_header span {
    font-size: 1.5rem;
}

/* 视频内容 */
.video_title h2 {
    font-size: 2.5rem;
}

.video_header {
    font-size: 1.875rem;
}

.video_ptitle {
    width: 90%;
    margin-top: 10px;
}

.video_ptitle p {
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: justify;
}

.video_content {
    /* margin-bottom: 40px; */
    margin-top: 6%;
}

#box {
    height: 250px;
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: auto;
}

.img-ul {
    list-style: none;
    overflow: hidden;
}

.img-li {
    width: 200px;
    /* height: 250px; */
    float: left;
    margin-left: 1rem;
    text-align: center;
}

.bg2 {
    background-color: #0F0;
}

.bg3 {
    background-color: #00F;
}

/* 视频中心 */
.video-container {
    width: 80%;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    /* 使用flex布局 */
    height: 410px;
    border-top: 2px solid #f0f0f0;
    /* 上边框 */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.video-item-left {
    /* 您可以根据需要添加其他样式 */
    flex: 6;
    /* 让每个元素占用相等的空间 */
    margin: 10px;
    /* 可以添加边距 */
}

.video-item-right {
    height: 100%;
    /* 您可以根据需要添加其他样式 */
    flex: 4;
    /* 让每个元素占用相等的空间 */
    margin: 10px;
    /* 可以添加边距 */
    /* background-color: #f0f0f0; */
    /* 示例背景颜色 */
    background-color: #dedede;
    height: 320px;
    width: 220px;
}

.video-item-right img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.video-containers {
    width: 80%;
    /* margin-top: 6rem; */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    /* 使用flex布局 */
    height: 410px;
    border-top: 2px solid #f0f0f0;
    border-bottom: 2px solid #f0f0f0;
    /* 上边框 */
    padding-top: 3rem;
    padding-bottom: 4rem;
    margin-bottom: 6rem;
    /* margin-top: 6rem; */
}

.video_cont{
    font-size: 1.4rem;
    max-width: 70%;
}




/* 中等屏幕 */
@media only screen and (min-width: 992px)and (max-width: 1200px) {}

/* 小屏幕 */
@media only screen and (min-width: 768px)and (max-width: 991px) {
    .video-container {
        width: 90%;
        margin-top: 6rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        /* 使用flex布局 */
        height: 500px;
        border-top: 2px solid #f0f0f0;
        /* 上边框 */
        padding-top: 3rem;
        padding-bottom: 4rem;
        margin-bottom: 6rem;
    }

    .video-containers {
        width: 90%;
        margin-top: 6rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        /* 使用flex布局 */
        height: 500px;
        border-top: 2px solid #f0f0f0;
        border-bottom: 2px solid #f0f0f0;
        /* 上边框 */
        padding-top: 3rem;
        padding-bottom: 4rem;
        margin-bottom: 6rem;
        margin-top: 6rem;
    }

    .head-box h1 {
        font-size: 3.2rem;
    }

    .title_header {
        font-size: 1.7rem;
    }

    .video_header {
        font-size: 1.7rem;
    }

    .title_header span {
        font-size: 1.25rem;
    }

    .video_title h2 {
        font-size: 1.7rem;
    }
}

/* 手机端显示 */
@media only screen and (max-width: 767px) {
    .video-container {
        width: 90%;
        margin-top: 6rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        /* 使用flex布局 */
        height: 500px;
        border-top: 2px solid #f0f0f0;
        /* 上边框 */
        padding-top: 3rem;
        padding-bottom: 4rem;
        margin-bottom: 6rem;
    }

    .video-containers {
        width: 90%;
        margin-top: 6rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        /* 使用flex布局 */
        height: 500px;
        border-top: 2px solid #f0f0f0;
        border-bottom: 2px solid #f0f0f0;
        /* 上边框 */
        padding-top: 3rem;
        padding-bottom: 4rem;
        margin-bottom: 6rem;
        margin-top: 6rem;
    }

    .head-box h1 {
        font-size: 3.2rem;
    }

    .title_header {
        font-size: 1.7rem;
    }

    .video_header {
        font-size: 1.7rem;
    }

    .title_header span {
        font-size: 1.25rem;
    }

    .video_title h2 {
        font-size: 1.7rem;
    }
}