body {
    font-family: 'Alibaba PuHuiTi', 'Source Han Sans', sans-serif;
    line-height: 1.5; /* Adjust this value to make the spacing larger */
    margin: 0;
    padding: 0;
    color: black;
    background-image: url("{% static 'images/bg.jpeg' %}"); /* Background image */

    background-attachment: fixed; /* 背景固定 */
    background-position: center; /* 背景居中对齐 */

    direction: ltr;
}

.title
{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    padding-bottom: 50px !important;
    background-color:#060261;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color:white;

}
.title-desc
{
    font-family: Arial, sans-serif;
    font-weight:normal;
    line-height: 1.5;
    font-size:18px;
    /*    color:#000;*/
    color:#0040C1;
    text-align:left;
}
.platform-top .title-text
{
/*        color:#000;*/
    color:#0040C1;
    font-size: 30px;
    font-weight: bold;
}
 .text-dark-blue
{
     color:#0040C1;
}
.blue-bar {
    width: 180px; /* 蓝线宽度，可根据需要调整 */
    height: 4px; /* 蓝线高度 */
    background-color: var(--bs-primary); /* 蓝色，基于主题变量 */
    margin: 4px auto 0; /* 上下间距，水平居中 */
    border-radius: 2px; /* 可选：让蓝线两端有圆角 */
}
.center
{
    width:77%;
    max-width:77%;
    /*    width: calc(100% - 600px); *//* 总宽度减去两边的 300px */
    margin: 0 auto;
}
.gray
{
    background: linear-gradient(135deg, #DDE1FE, #DAE2FE, #DAEFFE);
}
.companyTypeTitle
{
    font-size:24px;
    font-weight: bold;
    text-align:left;
    /*margin-left:10px*/
}
.introduce
{

    font-style: normal;
    /*    padding:5px;*/
    text-align:center;
    margin:auto;

}

.introduce h2
{
    font-size: 1.5em;
    line-height: 1.125;
    letter-spacing: .004em;
    font-weight: 600;
    padding:10px;
    text-align:center;
    color: black;
}
.course-img{
    width: 100px;
    height: 100px;
    margin-left:10px;

}
/* 固定宽高的样式 */
.product-div {
/*     width: 400px; *//* 固定宽度 */
    height: 150px;  /*  固定高度 */
    overflow: hidden; /* 防止内容溢出 */

}

.course-cell {
    background-color:white;
    height: 100%; /* 确保子元素占满父容器的高度 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直布局 */
    justify-content: space-between; /* 内容均匀分布 */
    align-items: flex-start; /* 左对齐内容 */
    padding: 16px; /* 内边距，避免内容贴边 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    transition: transform 0.2s ease; /* 悬停效果 */
}
/* 限制标题和描述的展示内容 */
.product-title a{
    text-decoration: none;
    color:black;
    font-size:22px;
    font-weight: bold;

}


/* 限制标题和描述的展示内容 */
.product-title ,.video-title{
    font-size:22px;
    font-weight: bold;

}

.product-desc {
    font-size: 14px;
    text-align:left;
    font-weight:normal;
    color:#46484d;
    letter-spacing: 2px; /* 字符间距为 2 像素 */
    line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}

.product-info
{
    text-align:left;
}

.gallery {
    max-width: 77%; /* Limit the width of the gallery */
    margin: 0 auto; /* Center the gallery */
    padding: 20px 0; /* Add some padding on top and bottom */
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 columns grid */
    grid-auto-rows: 150px; /* Adjust row height */
    gap: 10px;
}
/* 全局字体设置 */

.clear_padding
{
    padding:0;
}
.clear_margin
{
    margin:0;
}
.div-platform-container
{
    display: flex;
    flex-direction: column;
    gap: 20px; /* 左右两部分间的间距 */
    align-items: center; /* 垂直居中对齐 */
    padding: 20px;
    background-color: #C4D1F6;  /*背景色*/
    /*            background: linear-gradient(to bottom left, #eeecfd, #f0e4fa, #ecf1fd); *//* 渐变背景 */
    border-radius: 12px; /* 圆角效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
    align-items: stretch;
}
.div-platform-container .logo-img {
    width: 35px;
}
.platform-top {
    width: 100%;
/*    margin-bottom: 20px;*/
}

.platform-top  .icon img {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
}

.platform-top  h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 8px;
}


.platform-top  p {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

.platform-bottom {
    width: 100%;
}
.course-cell {
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    z-index: 1; /* 确保内容在伪元素之上 */
}

.course-cell::after {

    content: '';
    position: absolute;
    left: 0; /* 确保动画从中心偏左 */
    bottom:0; /* 确保动画从中心偏下 */
    width: 300%; /* 增大覆盖范围，确保渐变完全覆盖 */
    height: 300%; /* 调整伪元素尺寸以确保覆盖完整 */
    border-radius: 150px;
    border:0px;
    will-change: transform;
    /*        background: radial-gradient(*/
    /*            circle  ,*/
    /*            rgba(20, 90, 241 ), *//* 更深的蓝色 */
    /*            transparent 100%*/
    /*        );*/
    background: radial-gradient(circle, rgba(20, 90, 241, 1) 100%, rgba(20, 90, 241, 1) 100%);
    transform: translate(-50%, 50%) scale(0);
    transition: transform 0.8s ease-out, height 0.8s ease-out;
    pointer-events: none;
    z-index: -1;

}

.course-cell:hover::after {
    border-radius: 150px;
    border:0px;
    transform: translate(-50%, 50%) scale(1);
    transition: transform 0.8s ease;
}

/* 鼠标悬停时文本颜色变为白色 */
.course-cell .product-info .hover-text {
    color: inherit; /* 默认字体颜色 */
    transition: color 0.3s ease; /* 平滑过渡 */
}
/* 鼠标悬停时标题颜色变为白色 */
.course-cell:hover .product-info .product-title a {
    color: white; /* 改变链接颜色 */
    transition: color 0.3s ease; /* 平滑过渡 */
}
/* 鼠标悬停时描述文本颜色变为白色 */
.course-cell:hover .product-info .product-desc {
    color: white;
    transition: color 0.3s ease; /* 平滑过渡 */
}
/* 默认设置 */
.course-cell .product-info .logo-img {
    display: block;
    transition: opacity 0.3s ease; /* 平滑过渡 */
}

.course-cell .product-info .hover-img {
    display: none; /* 默认隐藏悬停图片 */
}

/* 鼠标悬停时切换图片 */
.course-cell:hover .product-info .default-img {
    display: none; /* 隐藏默认图片 */
}

.course-cell:hover .product-info .hover-img {
    display: block; /* 显示悬停图片 */
}

.description-content {

    margin: 0 auto;
    /*    padding: 20px;*/
    font-style: normal;

    text-align:center;

    /* box-shadow: 2px 4px 12px #00000014; */
}

.description-content h2   {
    display: block;
    color: black;
    font-size: 1.5em;
    line-height: 1.125;
    letter-spacing: .004em;
    font-weight: 600;
    text-align: left;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-style: normal;
}
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;

}
video {
    width:100%;
    height: auto;  /* Maintain the video's aspect ratio */
    border-radius: 10px;  /* Rounded corners for the video */
    box-shadow: 2px 2px 10px 3px #00000054;
}
.video-card {
    overflow: hidden; /* 确保内容不超出圆角边界 */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    transition: transform 0.2s ease; /* 鼠标悬停时放大效果 */
}
.video-card:hover {
    transform: scale(1.05); /* 鼠标悬停放大效果 */
}

.classes .video-container {

    width: 100%; /* 容器宽度 */
    height: 250px; /* 固定容器高度，确保卡片一致 */
    position: relative; /* 为子元素提供定位参考 */
}
.video-img {
    width: 100%; /* 图片宽度自适应容器 */
    height: 100%; /* 图片高度填满容器 */
    object-fit: cover; /* 确保图片内容适应容器，同时保持比例 */
    border-radius: 8px; /* 可选：与外部容器圆角一致 */
}
.video-title-overlay {
    position: absolute; /* 绝对定位在视频上 */
    top: 50%; /* 垂直居中 */
    left: 0; /* 从左边开始 */
    width: 100%; /* 宽度与视频一致 */
    transform: translateY(-50%); /* 修正垂直居中的偏移 */
    background: rgba(20, 90, 241,0.4); /* 半透明黑色背景，覆盖整个宽度 */
/*    background: rgba(0, 0, 0, 0.6); *//* 半透明黑色背景，覆盖整个宽度 */
    color: white; /* 白色文字 */
    font-size: 16px; /* 标题字体大小 */
    font-weight: bold; /* 标题加粗 */
    text-align: center; /* 标题居中 */
    padding: 20px 0; /* 标题上下内边距 */
    /*    border-radius:  8px; *//* 可选：底部圆角，与视频圆角一致 */
    z-index: 2; /* 确保标题位于视频上方 */
    display: flex; /* 使用 flex 居中内容 */
    align-items: center; /* 垂直居中文字 */
    justify-content: center; /* 水平居中文字 */
}
.video-title-overlay-balck {

    background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景，覆盖整个宽度 */

}
.text-primary-no-underline:hover {
    text-decoration: underline; /* 鼠标悬停显示下划线 */
}
.bottom {
    font-family: Arial, sans-serif;
    font-style: normal;
    font-size: 17px;
    line-height: 1.47;
    color: #333;
    letter-spacing: -0.022em;
    font-weight: 400;
    background-color: #fff;
    padding: 20px 0;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 2px 4px 12px #00000054;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.item1 { grid-column: span 3; grid-row: span 3; } /* Large image */
.item2 { grid-column: span 7; grid-row: span 3; } /* Smaller image */
.item3 { grid-column: span 2; grid-row: span 3; } /* Horizontal image */

.item4 { grid-column: span 6; grid-row: span 3; } /* Wide image */
.item5 { grid-column: span 4; grid-row: span 3; } /* Wide image */
.item6 { grid-column: span 2; grid-row: span 3; } /* Wide image */

.item7 { grid-column: span 4; grid-row: span 4; } /* Square image */
.item8 { grid-column: span 3; grid-row: span 4; } /* Vertical image */
.item9 { grid-column: span 2; grid-row: span 4; } /* Vertical image */
.item10 { grid-column: span 3; grid-row: span 4; } /* Another larger image */

.item11 { grid-column: span 2; grid-row: span 3; } /* Another larger image */
.item12 { grid-column: span 4; grid-row: span 3; } /* Another larger image */
.item13 { grid-column: span 2; grid-row: span 3; } /* Another larger image */
.item14 { grid-column: span 4; grid-row: span 3; } /* Another larger image */

.item15 { grid-column: span 4; grid-row: span 4; } /* Another larger image */
.item16 { grid-column: span 4; grid-row: span 4; } /* Another larger image */
.item17 { grid-column: span 2; grid-row: span 4; } /* Another larger image */
.item18 { grid-column: span 2; grid-row: span 4; } /* Another larger image */

.item19 { grid-column: span 3; grid-row: span 5; } /* Another larger image */
.item20 { grid-column: span 3; grid-row: span 5; } /* Another larger image */
.item21 { grid-column: span 3; grid-row: span 5; } /* Another larger image */
.item22 { grid-column: span 3; grid-row: span 5; } /* Another larger image */

.item23 { grid-column: span 6; grid-row: span 4; } /* Another larger image */
.item24 { grid-column: span 3; grid-row: span 4; } /* Another larger image */
.item25 { grid-column: span 3; grid-row: span 4; } /* Another larger image */

.item26 { grid-column: span 3; grid-row: span 5; } /* Another larger image */
.item27 { grid-column: span 3; grid-row: span 5; } /* Another larger image */
.item28 { grid-column: span 6; grid-row: span 5; } /* Another larger image */

.item29 { grid-column: span 3; grid-row: span 3; } /* Another larger image */
.item30 { grid-column: span 3; grid-row: span 3; } /* Another larger image */
.item31 { grid-column: span 3; grid-row: span 3; } /* Another larger image */
.item32 { grid-column: span 3; grid-row: span 3; } /* Another larger image */



@media (max-width: 4096px) {

    .gallery {
    /*grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); !* Adjust columns for smaller screens *!*/
        grid-auto-columns: 100px; /* Adjust columns for smaller screens */
        grid-auto-rows: 200px; /* Set a fixed height for the grid items */
    }
    .demo iframe {
        width: 800px;
    }
}
@media (max-width: 2048px) {
    .center
    {
        width: calc(100% - 100px); /* 总宽度减去两边的 300px */
        margin: 0 auto;
    }
    .gallery {
    /*grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); !* Adjust columns for smaller screens *!*/
        grid-auto-columns: 60px; /* Adjust columns for smaller screens */
        grid-auto-rows: 90px; /* Set a fixed height for the grid items */
    }
    .demo iframe {
        width: 800px;
    }
}
@media (min-width: 2048px) {

    .citation-content {
        max-width: 728px; /* Limit the width to 80% of the screen */
        padding: 10px; /* Padding inside the border */
    }
    .inserted-image {
        max-width: 1024px; /* Limit the width to 80% of the screen */
        padding: 10px; /* Padding inside the border */
    }
    .inserted-image-noshadow {
        max-width: 384px; /* Limit the width to 80% of the screen */
    }

}
/*屏幕小于1500px*/
@media (max-width: 1500px) {
/* 限制标题和描述的展示内容 */
    .product-title ,.video-title{
        font-size:18px;
        font-weight: bold;

    }
    .platform-left .title-text
    {
        font-size: 28px;
        font-weight: bold;
    }

    .product-title a,.video-title{
        font-size:18px;
        font-weight: bold;

    }
    .product-desc {
        font-size: 1vw;
        text-align:left;
        font-weight:normal;
        color:#98A2B3;
        letter-spacing: 2px; /* 字符间距为 2 像素 */
        line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
    }
}
@media (max-width: 1024px) {

    .center
    {
        width: calc(100% - 0px); /* 总宽度减去两边的 300px */
        margin: 0 auto;
    }
    .gallery {
    /*grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); !* Adjust columns for smaller screens *!*/
        grid-auto-columns: 40px; /* Adjust columns for smaller screens */
        grid-auto-rows: 70px; /* Set a fixed height for the grid items */
    }
    .demo iframe {
        width: 80%;
    }
}
@media (min-width: 1024px) {

    .citation-content {
        max-width: 728px; /* Limit the width to 80% of the screen */
        padding: 10px; /* Padding inside the border */
    }
    .inserted-image {
        max-width: 826px; /* Limit the width to 80% of the screen */
        padding: 5px; /* Padding inside the border */
    }
    .inserted-image-noshadow {
        max-width: 384px; /* Limit the width to 80% of the screen */
    }

}
@media (max-width: 768px) {

    .gallery {
    /*grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); !* Adjust columns for smaller screens *!*/
        grid-auto-columns: 20px; /* Adjust columns for smaller screens */
        grid-auto-rows: 30px; /* Set a fixed height for the grid items */
        gap: 5px;
    }
    .gallery-container {
        max-width: 85%; /* Limit the width of the gallery */
        padding: 10px 0; /* Add some padding on top and bottom */
    }
    .introduce h1 {
        font-size: 3em;
    }
    .introduce h2 {
        font-size: 2em;
    }
    .introduce p {
        font-size: 1em;
    }
    .description-content {
        max-width: 92%; /* Limit the width to 80% of the screen */
        /*        padding: 10px; *//* Padding inside the border */
        margin: 0 auto;
    }
    .citation-content {
        max-width: 92%; /* Limit the width to 80% of the screen */
        padding: 10px; /* Padding inside the border */
    }
    .inserted-image {
        max-width: 95%; /* Limit the width to 80% of the screen */
        padding: 5px; /* Padding inside the border */
    }
    .inserted-image-noshadow {
        max-width: 50%; /* Limit the width to 80% of the screen */
        margin-left: auto; /* Center the image horizontally */
        margin-right: auto;
    }
    .image-comparison-content {
        max-height: 300px; /* Limit the width to 80% of the screen */
        max-width: 92%;
    }

    .logo {
        gap: 10px;
    }
    .demo iframe {
        width: 95%;
    }
}