/*------------usermanuals.html  start----------------*/	
/* 容器背景样式 */
.cont_bg{
	width: 100%;  /* 宽度100% */
	background: #f0f3f8;  /* 初始背景色 */
	padding: 0 0 1rem;  /* 下内边距1rem */
	background: #faf8fd url(   ) no-repeat 0px top;  /* 覆盖背景设置：颜色+背景图 "../images/cont_bg.png"*/
	background-size: 100% auto;  /* 背景图尺寸：宽度100% 高度自适应 */
}

/* 页面标题区域样式 */
.page_title {
    text-align: center;  /* 居中对齐 */
    padding: 1.4rem 0 .4rem;  /* 上下内边距 */
}
.page_title h1 {
    font-size: .48rem;  /* 字体大小 */
    font-weight: 600;  /* 字体粗细 */
    color: #0e0c36;  /* 字体颜色 */
}
.page_title p {
    font-size: .3rem;  /* 字体大小 */
	line-height: .45rem;  /* 行高 */
	margin: 0 .6rem;  /* 左右外边距 */
    font-weight: 100;  /* 字体粗细 */
    color: #646c74;  /* 字体颜色 */
}
.page_title .bg_gradient::after{
	background: linear-gradient(to right, #4091ff, #d94de2);  /* 渐变背景色 */
}

/* 通用标题样式 */
.title{
	text-align: center;  /* 居中对齐 */
}
.title h1{
	font-size: .36rem;  /* 字体大小 */
    font-weight: 600;  /* 字体粗细 */
    color: #0e0c36;  /* 字体颜色 */
}
.title p{
	font-size: .2rem;  /* 字体大小 */
    font-weight: 300;  /* 字体粗细 */
    color: #646c74;  /* 字体颜色 */
}

/* 按钮盒子内小按钮样式 */
.page_title .btn_box .btn_xs{
	margin-left: .2rem;  /* 左外边距 */
}




/* 横幅区域样式 */
.bangg{
	text-align: center;  /* 居中对齐 */
	padding: .8rem 0;  /* 上下内边距 */
	border-radius: 30px;  /* 圆角 */
	background: url("../images/  ") no-repeat 0px 0px;  /* 背景图 */
	background-size: cover;  /* 背景图覆盖 */
}
.bangg h1{
	color: #0e0c36;  /* 字体颜色 */
	font-size: .46rem;  /* 字体大小 */
	font-weight: 800;  /* 字体粗细 */
	margin-bottom: .3rem;  /* 下外边距 */
	letter-spacing: -1px;  /* 字母间距 */
}
.bangg h1 span{
	color: #D20000;  /* span特殊颜色 */
}

/* 横幅内按钮样式 */
.bangg .btn_box .btn_xs{
	margin-left: .2rem;  /* 左外边距 */
}
/*------------usermanuals.html  end----------------*/





@media (max-width: 639px){
	/*------------usermanuals.html  start----------------*/
    .page_title {
        padding: .6rem 0;
    }
    .page_title p {
        font-size: .36rem;
        margin: 0 .5rem;
		line-height: .5rem;
    }
	
	
    .title h1{
        font-size: .48rem;
    }
    .title p{
        font-size: .28rem;
    }
	
	
	
	.tutorialBox ul{
    }
    .tutorialBox ul li {
        width: 90%;
        margin: 5%;
        padding: .12rem;
    }
    .tutorialBox ul h2 {
        font-size: .36rem;
    }
    .tutorialBox ul h2 i {
        line-height: .4rem;
        margin-top: 0;
        font-size: .24rem;
        padding: 0 6px;
    }



    .bangg{
		margin: 0 5%;
        padding: .6rem 0 .4rem;
    }
    .bangg h1{
		line-height: .6rem;
    }
    .bangg h1 span{
		display: block;
    }


    .bangg .btn_box {
		text-align: center;
    }
    .bangg .btn_box .btn_xs{
        margin-left: 0;
    }
    /*------------usermanuals.html  end----------------*/

}










/* 视频主容器样式 */
.video-container {
  
    max-width: 1650px; /* 最大宽度限制 */*/
    width: 100%; /* 宽度100% */
    padding: 0 20px; /* 左右内边距 */
    margin: 0 auto; /* 上下外边距0，左右自动(居中) */
    display: flex; /* 弹性布局 */
    gap: 40px; /* 子元素间距 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 内容居中 */
    
}



/* 单个视频项样式 */
.video-item {
    
    width: calc(30% - 20px); /* 宽度计算(考虑间距) */
    min-width: 300px; /* 最小宽度 */
    margin-bottom: 0px; /* 下边距 */
      
      backdrop-filter: blur(8px); /* 8px背景模糊效果 */
    border-radius: 10px; /* 圆角 */
  
   
    
}

/* 视频包装容器样式 */
.video-wrapper {
    
    padding: 20px; /* 内边距 */
    background: url("../images/video_bg.png") no-repeat 20% 30%;
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡动画 */
     border: 2px solid rgba(255, 255, 255, 1); /* 白色边框 */ 
     
     
}

/* 视频包装容器悬停效果 */
.video-wrapper:hover {
    transform: translateY(-6px); /* 上移效果 */
  background: url("../images/video_bg.png") no-repeat 20% 30%;
   box-shadow: 0 20px 60px rgba(14,12,54,0.1); /* 阴影增强 */
  border: 1px solid #f0eeee;/*边框线条颜色*/  
}

/* 视频元素样式 */
.video-wrapper iframe {
    width: 100%; /* 宽度100% 大概420px  */
    height: 236px; /* 自动高度 */
    object-fit: contain;
    background: #ffffff; /* 背景色 */
    display: block; /* 块级元素 */
    border-radius: 10px; /* 圆角 */
  
}


/* 视频标题样式 */
.video-title {
    margin-top: 25px; /* 上边距 */
    font-size: 20px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    text-align: left; /* 居中 */
    color: #9708aa; /* 文字颜色 */
    padding: 0 10px; /* 左右内边距 */
    margin-bottom: .05rem
}

/* 响应式设计 - 小屏幕适配 */
@media (max-width: 768px) {
    .video-item {
        width: 100%; /* 宽度100% */
    }
    
    .page-title h1 {
        font-size: 26px; /* 字体缩小 */
    }
}