/* 隐藏复选框 */
    #menu-toggle {
      display: none;
    }

    /* 菜单按钮样式 */
    .menu-button {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: #c733f460;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }

    .menu-button span {
      display: block;
      width: 30px;
      height: 3px;
      background: rgb(242, 255, 0);
      margin: 3px 0;
      transition: 0.4s;
    }

    /* 菜单样式 */
    .nav-menu {
      position: fixed;
      top: -1000px;
      left: 0;
      background: #ffffff4a;
      color: rgba(79, 96, 227, 0.778);
      padding: 20px 0;
      transition: top 0.3s ease-in-out;
      z-index: 99;
      width: 100%;
      overflow: visible;
      overflow-y: auto;
      max-height: 80vh;
    }
    .nav-content{
        max-width: 1200px; 
        margin: 0 auto;
        padding: 0 20px;
    }

    /* 选中状态下显示菜单 */
    #menu-toggle:checked ~ .nav-menu {
      top: 0px;
    }

    /* 选中状态下改变按钮样式 */
    #menu-toggle:checked ~ .menu-button span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }

    #menu-toggle:checked ~ .menu-button span:nth-child(2) {
      opacity: 0;
    }

    #menu-toggle:checked ~ .menu-button span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }
    /* 菜单内容样式 */
    .nav-section {
      margin-bottom: 20px;
    }

    .nav-section h2 {
      margin-bottom: 8px;
      margin-left: 40px;
      font-size: 30px;
    }

    .nav-section p, .nav-section ul {
      margin: 20px;
      padding: 20px;
      font-size: 20px;
      line-height: 1.5;
    }

    .nav-section ul li {
      list-style: none;
      margin-bottom: 6px;
    }


  /* 重置一些基本元素的样式 */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color:#f2e6f5;
}

a {
    color:#290dc973;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
}



.logo img {
    height: 40px; 
}

/* 头部导航栏 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color:#ffffff;
    border-bottom: 1px solid #c0a2b2;
}

/* 搜索框 */
.nav-search-box {
    display: flex;
    align-items: center;
}

.nav-search-box input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 300px; 
}

.nav-search-box button {
    padding: 8px 16px;
    margin-left: 8px;
    background-color: #ff69b4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 导航链接 */
.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a, .nav-links button {
    margin-left: 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

.nav-links a:hover, .nav-links button:hover {
    text-decoration: underline;
}

/* 注册按钮样式 */
.sign-up-button {
    background-color: #ff69b4;
    color: white;
}

/* 主要内容区域 */
main {
    padding: 20px;
}

.hero-section {
    position: relative;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0 20px;
    background-color:#fd6ccf97;
    color: #ffff0f;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10px;
    height: 60vh;
}

.hero-section h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.title {
        flex: 1;
        text-align: center;
    }

    .title h1 {
        font-size: 2.5em;
        margin-bottom: 1opx;
    }

    /* 登录界面样式 */
    .login-form {
    position: relative; /* 相对于 .hero-section 定位 */
    width: 25%; /* 宽度设置为 .hero-section 宽度的四分之一 */
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    background-color: transparent; /* 背景透明 */
    }

    .login-form h2 {
        margin-bottom: 10px;
    }

    .login-form form {
        display: flex;
        flex-direction: column;
    }


    .login-form input[type="checkbox"] {
        margin-right: 2px;
    }

    .login-form button[type="submit"] {
        width: 100%;
        padding: 10px;
        background-color: #cc35e692;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .login-form button[type="submit"]:hover {
        background-color: #ad00b38d;
    }

    .login-form p {
        margin-top: 10px;
    }

    .login-inputs {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
    }

    .login-inputs input[type="text"] {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
    }

    .login-inputs input[type="text"]:last-child {
        margin-right: 0;
    }

.category-carousel h2 {
    text-align: center;
    margin-bottom: 20px;
}

.carousel-container {
    display: flex;
    overflow-x: auto;
}

.carousel-item {
    flex: 0 0 auto;
    margin-right: 10px;
    width: 200px; 
}

.carousel-item img {
    width: 100%;
    border-radius: 10px;
}

/* 特色课程部分 */
.feature-section {
    color: #00000072; 
    padding: 20px; /* 内边距 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-around; /* 水平分布 */
}

.feature-section h1 {
    font-size: 2.5em; /* 标题字体大小 */
    margin: 0; /* 无外边距 */
}

.feature-section ul {
    list-style: none; /* 移除列表项前的标记 */
    padding: 0; /* 无内边距 */
    display: flex;
    flex-direction: column; /* 垂直排列列表项 */
    align-items: flex-start; /* 列表项靠左对齐 */
}

.feature-section li {
    font-size: 1.2em; /* 列表项字体大小 */
    margin-bottom: 10px; /* 列表项之间的间距 */
    position: relative; /* 相对定位 */
    padding-left: 30px; /* 左侧内边距，为勾号留出空间 */
}

.feature-section li::before {
    content: '✓'; /* 勾号符号 */
    position: absolute;
    left: 0; /* 勾号靠左 */
    color: #c551ec; /* 勾号颜色 */
    font-size: 1.5em; /* 勾号大小 */
}

/* 特色课程列表 */

.course-categories {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 使按钮在容器中居中 */
    gap: 20px; /* 按钮之间的间距 */
    margin: 20px 50px; /* 容器的外边距，让按钮离页面左右边框远一些 */
}

.category-button {
    background-color: #FF69B4; 
    color: #fff; /* 白色文字 */
    border: 2px solid transparent; /* 透明边框，用于选中时显示粉色边框 */
    border-radius: 25px; /* 椭圆形按钮 */
    padding: 10px; /* 内边距 */
    width: 150px; /* 按钮宽度 */
    height: 50px; /* 按钮高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 鼠标悬停时的指针样式 */
    transition: background-color 0.3s, border-color 0.3s; /* 背景颜色和边框颜色变化的过渡效果 */
    text-align: center; /* 文本居中 */
    white-space: nowrap; /* 防止文本换行 */
}

.category-button:hover {
    background-color: #FF1493; /* 鼠标悬停时的背景颜色，稍微深一点的粉色 */
}

/* 为选中的按钮添加粉色边框 */
.category-button.selected {
    border-color: #FF1493; /* 选中时的粉色边框 */
}
.course-section {
    background-color: #7010a986; 
    padding: 20px; /* 内边距 */
    margin: 40px; /* 外边距，增加与页面边框的距离 */
}

.course-section h1 {
    font-size: 1.8em; /* 标题字体大小 */
    margin-bottom: 20px; /* 标题与课程列表的间距 */
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 创建响应式网格布局 */
    gap: 30px; /* 网格项目之间的间距 */
}

.course-item {
    background-color: #fff; /* 白色背景 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 5px rgba(181, 161, 161, 0.1); /* 阴影 */
}


.course-item h3 {
    font-size: 1.2em; /* 标题字体大小 */
    margin: 0 0 10px; /* 标题外边距 */
}

.course-item p {
    font-size: 0.9em; /* 描述字体大小 */
    margin: 20px 0; /* 描述外边距 */
}

.faq-section {
    background-color: #d012a45f; 
    color: #fff; /* 白色文字 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    margin: 40px; /* 外边距，增加与页面边框的距离 */
}

.faq-section h2 {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 标题与问题列表的间距 */
}

.faq-question {
    margin-bottom: 30px; /* 问题之间的间距 */
    border-bottom: 3px solid #f6f0f55f; /* 分隔线 */
    padding-bottom: 15px; /* 分隔线与问题内容的间距 */
    font-size: 22px;
}

.details {
      margin-bottom: 20px;
      padding-bottom: 20px;
}

.faq-answer {
      margin-top: 10px;
      padding: 15px;
      border-radius: 4px;
      line-height: 1.6;
      color:#ffffff;
      font-size: 18px;
}


.details[open] .faq-answer {
      max-height: 500px; /* 足够大以容纳内容 */
      opacity: 1;
}

/* course_items.css */

/* 容器样式 */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 20px; /* 卡片间距 */
  padding: 20px;
}


/* 单个课程项样式 */
.course-item {
    background: #ff69b451; /* 项目背景色 */
    color: rgb(91, 82, 82); /* 文字颜色 */
    padding: 15px 25px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 去除下划线 */
    flex: 0 0 auto; /* 不允许缩小 */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.course-item:hover {
    transform: translateY(-5px); /* 悬停效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
}




/* 容器样式 */
 
.category-container {
    background-color: #c196e4bb;
    }
.category-container h1 {
    color: hsl(0, 0%, 100%);
    margin-left: 50px;
    padding-top: 35px;
    }
.category-links {
    display:flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 水平居中 */
    
    padding: 20px;
}


/* 项目样式 */
.category-item {
    background-color: #B3E5FC; /* 项目背景色 */
    color: rgb(255, 255, 255); /* 文字颜色 */
    padding: 15px 25px; /* 内边距 */
    margin: 5px; /* 外边距 */
    border-radius: 20px; /* 圆角 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 去除下划线 */
    flex: 0 0 auto; /* 不允许缩小 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.category-item:hover {
    transform: translateY(-5px); /* 悬停效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
}
.container {
    
    gap: 150px; /* 网格项目之间的间距 */
    display: flex; /* 使用flexbox布局 */
    justify-content: flex-start; /* 从容器的起始位置开始对齐 */
    align-items: flex-start; /* 顶部对齐 */
    padding: 20px;
    margin-right: 80px; /* 向右移动整个容器 */
    margin-top: -50px;
}

/* 图片容器样式 */
.image-container {
    
    top: 50%; /* 垂直居中 */
    margin-left: 150px; 
    width: 35%; /* 宽度设置为视口宽度的一半 */
    height: auto; /* 高度自动 */
    transform: translateY(-50%); /* 垂直居中 */
    padding: 20px; /* 内边距，与四周保持距离 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */ 
    margin-top: 200px;
    margin-bottom: -200px;
}
/* 图片样式 */
.image-container img {
    margin-top: 60px;
    margin-bottom: -30px;
    
    border-radius: 15%;
    width: 550px; 
    height: 400px;
    display: block; /* 去除图片底部的空白间隙 */
    transition: opacity 0.3s ease; /* 过渡效果 */
}

/* 播放按钮样式 */
.play-button {
    position: absolute;
    top: 53%; 
    left: 45%; 
    
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.942);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 播放按钮内的三角形 */
.play-button:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 15px; /* 尖角朝右的等边三角形 */
    border-color: transparent transparent transparent #ffffff;
}

/* 鼠标悬停时显示播放按钮 */
.image-container:hover .play-button {
    opacity: 1;
}

/* 鼠标悬停时图片变透明 */
.image-container:hover img {
    opacity: 0.5; /* 图片变半透明 */
}
/* 卡片容器样式 */
.card-container {
    width: 450px; 
    height: 500px;
    padding-right: 50px;
    margin-top: 10px;
    overflow: auto;
}

.card-container h2 {
    margin-top: 20px;
    margin-left: 50px;
    color: #ffffff;
}

.card-container p {
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 50px; /* 底部外边距 */
    font-size: 1em; /* 字体大小 */
    color:#ffffff;
    font-family: 'Arial', sans-serif; /* 更换字体 */
    line-height: 1.5; /* 设置行距为1.5倍 */
    text-indent: 2em; /* 设置首行缩进2格 */
    text-align: justify;
}

.image-container:hover .play-button {
    opacity: 1;
}

@media (max-width: 768px) {
    /* 导航栏调整为垂直布局 */
    .header {
        flex-direction: column;
        align-items: center;
    }

    .nav-search-box {
        margin-top: 10px;
        width: 100%; /* 搜索框占满屏幕宽度 */
    }

    .nav-search-box input[type="text"] {
        width: 100%; /* 搜索框占满屏幕宽度 */
    }

    .nav-links {
        margin-top: 10px;
        flex-direction: column;
    }

    .nav-links button {
        width: 100%; /* 按钮占满屏幕宽度 */
    }

    /* 英雄区域调整 */
    .hero-section {
        flex-direction: column;
        text-align: center;
    }

    .login-form {
        width: 100%; /* 全屏宽度 */
        margin-top: 20px;
    }

    .login-form input[type="text"] {
        width: 100%; /* 输入框占满屏幕宽度 */
    }

    /* 类别轮播图调整 */
    .carousel-container {
        overflow-x: scroll; /* 横向滚动 */
    }

    .carousel-item {
        width: 100%; /* 每个轮播项占满屏幕宽度 */
    }

    /* 特色课程部分调整 */
    .feature-section {
        flex-direction: column;
        text-align: center;
    }

    /* FAQ部分调整 */
    .faq-section {
        padding: 10px;
    }
}


/* 底部信息 */
footer {
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
}