/* 左右布局容器 - 使用 swiper 的宽高 */
.layout-container {
    width: 666rpx;
    height: 218rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 20rpx;
}

/* 左侧主内容区域 - 占 3/4 宽度 */
.main-content-area {
    width: 75%; /* 3/4 宽度 */
    height: 100%;
    border: 2rpx solid #1ccfd6;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(28, 207, 214, 0.1);
}

/* 小方块容器样式 */
.blocks-container {
    width: 100%;
    height: 100%;
    white-space: nowrap; /* 防止换行 */
}

/* 小方块样式 */
.block-item {
    display: inline-flex; /* 使用 inline-flex 实现横向排列和内部 flex 布局 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: calc(100% - 40rpx); /* 填满剩余高度，减去上下边距 40rpx */
    margin: 20rpx; /* 上下左右边距都是 20rpx */
    margin-right: 0rpx;
    background: #ffffff;
    border: 2rpx solid #1ccfd6; /* 优化边框颜色，使用品牌色 */
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(28, 207, 214, 0.15); /* 优化阴影颜色 */
    vertical-align: top; /* 顶部对齐 */
    transition: all 0.3s ease;
}

.block-item .block-icon {
    width: calc(100% - 20rpx); /* 占满小方块宽度，减去左右内边距 */
    height: 100rpx; /* 固定高度 */
    /* margin-bottom: 15rpx; 增加图标与文字之间的间距 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-item .block-text {
    font-size: 26rpx; /* 增加字体大小 */
    color: #333;
    text-align: center;
    line-height: 1.2;
    max-width: 200rpx; /* 增加文字最大宽度，适应更宽的方块 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto; /* 水平居中 */
    font-weight: 500; /* 增加字体粗细 */
    margin-top: 5rpx;
}

/* 方块描述文字 */
.block-item .block-desc {
    font-size: 20rpx; /* 增加描述文字大小 */
    color: #666;
    text-align: center;
    line-height: 1.2;
    max-width: 200rpx; /* 增加描述文字最大宽度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 6rpx auto 0; /* 增加顶部间距 */
    display: block;
}

.block-item:first-child {
    margin-left: 20rpx;
}

.block-item:last-child {
    margin-right: 20rpx;
}

.block-item:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(28, 207, 214, 0.25); /* 优化点击阴影颜色 */
}

/* 方块图标图片 */
.block-icon image {
    width: 100%; /* 占满图标容器的宽度 */
    height: 100%; /* 占满图标容器的高度 */
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
    border-radius: 8rpx; /* 添加圆角 */
}

/* 右侧功能按钮区域 - 占 1/4 宽度 */
.function-buttons {
    width: 25%; /* 1/4 宽度 */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
    min-width: 0; /* 允许 flex 子元素收缩 */
}

.function-btn {
    width: 100%;
    height: 50%; /* 每个按钮占一半高度 */
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
    overflow: hidden; /* 防止内容溢出 */
}

.function-btn:active {
    transform: scale(0.95);
}

/* 打卡按钮样式 */
.checkin-btn {
    border: 2rpx solid #1ccfd6;
    background: #ffffff;
}

.checkin-btn .btn-icon image {
    width: 24rpx;
    height: 24rpx;
}

/* 直播按钮样式 */
.live-btn {
    border: 2rpx solid #ff6b9d;
    background: #ffffff;
}

.live-btn .btn-icon image {
    width: 24rpx;
    height: 24rpx;
}

/* 按钮内部元素 */
.btn-icon {
    margin-right: 6rpx;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 图标不缩放 */
}

.btn-text {
    flex: 1;
    font-size: 22rpx;
    color: #333;
    font-weight: 500;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 隐藏溢出文字 */
    text-overflow: ellipsis; /* 超出显示省略号 */
}

.btn-arrow {
    font-size: 18rpx;
    color: #999;
    font-weight: bold;
    flex-shrink: 0; /* 箭头不缩放 */
    margin-left: 4rpx;
}

.swiper {
    height: 218rpx;
    width: 666rpx;
    margin: 0 auto;
}

.swiper image {
    height: 100%;
    width: 100%;
}
.cardgongneng{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content:space-between;
    height: 170rpx;
    width: 666rpx;
    margin: 25rpx auto;
    border: 1rpx solid #e7d1d1;
    border-radius: 2%;
    box-shadow:1px 1px 1px 1px rgb(236, 234, 234);
}
.cardgongneng2{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content:space-between;
    height: 170rpx;
    width: 570rpx;
    margin: 0 auto;
}
.cardgongneng2 image{
     width: 85rpx;
     height: 100rpx;

}
.zhibocss {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 180rpx;
    width: 666rpx;
    margin: 50rpx auto;
    background: url(https://ndnd.duiduiedu.com/uploads/pics/line.png);
    background-repeat: no-repeat;
    background-size: 666rpx 180rpx;
    display: none;
}

.item1 {

    width: 50rpx;
    height: 150rpx;
    box-sizing: border-box;
    margin: 15rpx 16rpx;
}

.itemhead {
    margin-top: 20rpx;
    margin-left: 20rpx;
}

.itemhead h2 {

    font-weight: 600;
    font-family: 'Arial Narrow', Arial;
    font-size: large;
}

.item1 image {
    width: 50rpx;
    height: 150rpx;
}

.item2 {
    width: 160rpx;
    height: 160rpx;
}

.item2 image {
    margin-left: 10rpx;
    width: 150rpx;
    height: 160rpx;
}

.item3 {
    width: 334rpx;
    height: 170rpx;
}

.item4 {
    padding-top: 10rpx;
    padding-left: 15rpx;
    width: 75rpx;
    height: 164rpx;
}

.item4 image {

    width: 75rpx;
    height: 164rpx;
}

.itemmiddle {
    display: flex;
    margin-left: 15rpx;
    width: 334rpx;
    height: 50rpx;
}

.itemmiddleleft {
    display: flex;
    margin-top: 10rpx;
    flex-direction: row;
}

.itemmiddleleft text {
    color: #AEAEAE;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
}

.itemmiddleleft image {

    width: 30rpx;
    height: 30rpx;
    padding-right: 10rpx;
}

.itemmiddleright {
    display: flex;
    margin-top: 10rpx;
    margin-left: 10rpx;
    flex-direction: row;
}

.itemmiddleright text {
    color: #AEAEAE;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
}

.itemmiddleright image {

    width: 30rpx;
    height: 30rpx;
    padding-right: 10rpx;
}

.itemend {
    width: 300rpx;
    overflow: hidden;
    color: #AEAEAE;
    line-height: 28rpx;
    margin-bottom: 10rpx;
    margin-left: 20rpx;
    font-size: 18rpx;
}

.curriculum {

    margin: 0 auto;
    /* margin-top: 20rpx; */
    width: 686rpx;
    /* height: 350rpx; */
    /* margin-bottom: 80rpx; */
}

.curriculumup {

    width: 750rpx;
    height: 55rpx;
}

.curriculumupstart {
    float: left;
    width: 660rpx;
    height: 55rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
}

.curriculumupend {
    float: left;
    width: 50rpx;
    height: 50rpx;
}

.scroll-box {
    white-space: nowrap;
    height: 100%;
}

.card-box {
    display: inline-block;
}

.card image {
    height: 55rpx;
    line-height: 55rpx;
    width: 211rpx;
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 55rpx;
    line-height: 55rpx;
    /* margin: 100rpx 200rpx; */
    font-size: 20px;
    /* padding-left: 20rpx;
  padding-right: 30rpx; */
    margin-left: 10rpx;
    border-radius: 4px;
}
.curriculumdown {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    width: 666rpx;
    /* height: 295rpx; */
}

.curriculumitem {
    display: flex;
    flex-direction: column;
    /* width: 33%; */
    width: 33%;
    height: 150rpx;
    align-items: center;
    margin-top: 20rpx;
    /* margin-bottom: 20rpx; */
}

.downup {
    width: 90rpx;
    height: 80rpx;
    text-align: center;
}

.downup image {
    width: 80rpx;
    height: 90rpx;
    text-align: center;
}

.downdown {
    margin-top: 15rpx;
    text-align: center;
    width: 180rpx;
    height: 30rpx;
}

.downdown text {
    font-size: 20rpx;

}



.curriculumupend image {
    width: 50rpx;
    height: 50rpx;
}

.challenge {
    width: 666rpx;
    margin: 0 auto;
    height: 83rpx;
}

.challengeleft {

    float: left;
    width: 429rpx;
    height: 80rpx;

}

.challengeleft image {

    width: 440rpx;
    height: 80rpx;
}

.challengeright {
    float: left;
    width: 238rpx;
    height: 80rpx;
}

.challengeright image {

    width: 240rpx;
    height: 80rpx;
}


.challenge2 {
    width: 666rpx;
    margin: 0 auto;
    height: 83rpx;
}

.challenge2left {

    float: left;

    width: 238rpx;
    height: 80rpx;

}

.challenge2left image {


    width: 253rpx;
    height: 80rpx;
}

.challenge2right {
    float: left;
    width: 429rpx;
    height: 80rpx;
}

.challenge2right image {

    width: 432rpx;
    height: 80rpx;
}

.van-tabbar-item {
    height: 298rpx;
    width: 130rpx;
}

/***parent**/
.parentclass {
    margin: 0 auto;
    width: 666rpx;
}
.parentimage{
     width: 200rpx;
     height: 30rpx;
     margin-top: 10rpx;
     
}
.parentimage image{
    width: 200rpx;
    height: 30rpx;
}