* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

::-webkit-input-placeholder {
	color: #ccc;
}
a{ text-decoration: none; color: #333;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type="number"] {
	-moz-appearance: textfield;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #fff;
	scroll-behavior: smooth; /* ?? 新增：全局开启平滑滚动 */
}

img {
	display: block;
	max-width: 100%;
}

#app {
	max-width: 750px;
	margin: auto;
	padding-bottom: 1.3rem;
}

.flex {
	display: flex;
	display: -webkit-flex;
}

.flex.jlr {
	justify-content: space-between;
}

.flex.j-center {
	justify-content: center;
}

.flex.j-end {
	justify-content: flex-end;
}

.flex.a-center {
	align-items: center;
}

.flex.col {
	flex-direction: column;
}

.flex.wrap {
	flex-wrap: wrap;
}

.header {
	width: 100%;
}

.header .logo {
	width: 55%;
	padding: 0.2rem;
}

.banner {
	width: 100%;
	height: 3.75rem;
}

.banner .swiper-container {
	width: 100%;
	height: 100%;
}

.banner .swiper-slide,
.banner .swiper-slide img {
	width: 100%;
	height: 100%;
}

.swiper-pagination-bullet {
	background: #fff !important;
}

.swiper-pagination-bullet-active {
	background: #FFFFFF !important;
}

.menu {
	padding: 0.32rem 0px;
}
.menu a{
	flex: 1;
}
.menu-item {
	flex: 1;
}

.menu-item p {
	font-size: 0.3rem;
	color: #333;
	margin-top: 0.24rem;
}

.menu-item .icon {
	width: 0.88rem;
	height: 0.88rem;
}

/* --- 课程列表 --- */
.kecList {
    padding: 0 0.22rem;
    margin-top: 0.3rem; /* ?? 新增：加大与分类标签的顶部间隔 */
}
.kecList-item { margin-bottom: 0.3rem; }
.kecList-item .image { width: 3.2rem; height: 2.12rem; flex-shrink: 0; } /* 防止图片被挤压 */
.kecList-item .image img { width: 100%; height: 100%; object-fit: cover; }
.kecList-item .info-text { flex: 1; padding-left: 0.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.kecList-item .info-text h2 { font-size: 0.32rem; color: #333; line-height: 1.4; }
.info-text p { font-size: 0.24rem; margin-top: 0.12rem; color: #666; }
.info-text .more { 
    width: 1.2rem; 
    color: #fff; 
    font-size: 0.22rem; 
    height: 0.54rem; 
    background: url(../img/more.png) no-repeat; 
    background-size: 100% 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.videoposter {
	width: 100%;
}

.textInfo {
	padding: 0.22rem;
	font-size: 0.26rem;
	color: #333;
	line-height: 1.8;
}

.prviewImage {
	height: 2.51rem;
	width: 100%;
	margin: 0.3rem auto;
}

.prviewImage .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 5.48rem;
	height: 2.51rem;

}

.prviewImage .swiper-slide img {
	width: 100%;
	height: 100%;
}

.prviewImage-text {
	font-size: 0.28rem;
	text-align: center;
	color: #333;
	padding: 0.2rem;
}

.prviewImage-text1 {
	font-size: 0.22rem;
	text-align: center;
	background: #fafbf6;
	color: #999;
	padding: 0.2rem;
}

/* --- 底部导航 --- */
.footer {
	width: 100%;
	max-width: 750px; /* 统一为 750px */
	left: 50%; 
    transform: translateX(-50%);
	padding: 0 0.34rem;
	height: 1.3rem;
	position: fixed;
	background: #fafbf6;
	bottom: 0;
	z-index: 99;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* 增加顶部阴影提升层次感 */
}
.footer .item { 
    width: 2.18rem; 
    height: 0.68rem; 
    border-radius: 5px;
    background: #000; 
    font-size: 0.24rem; 
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .item i { font-size: 0.34rem; margin-right: 0.15rem; }
.footer .item.on1 { background: #fb8955; }
.footer .item.on2 { background: #fba14b; }
.footer .item.on3 { background: #fe4e4e; }

/* --- 悬浮元素 (修复定位 Bug) --- */
.ewm { 
    width: 200px; 
    height: 200px; 
    position: fixed; 
    top: 20%; 
    right: 0.2rem; /* 改为右侧定位，适应所有屏幕 */
    z-index: 100;
    display: none; /* 默认隐藏，如果需要在PC端显示可通过媒体查询控制 */
}
.ewm img { width: 100%; height: 100%; }
.ewm p { text-align: center; font-size: 16px; color: #999; padding-top: 20px; }

.zixun { 
    width: 0.8rem; 
    height: 0.8rem; 
    z-index: 99; 
    background: url(../img/zixun.png) no-repeat; 
    background-size: 100% 100%; 
    position: fixed; 
    right: 0.2rem; /* 改为右侧定位 */
    bottom: 15%; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 增加阴影 */
}

/* --- 分类导航标签样式 --- */
.category-tabs {
    width: 100%;
    background: #fff;
    padding: 0.28rem 0; /* 稍微增加上下内边距，让标签栏更透气 */
    /* 去掉生硬的 border-bottom，改用轻微阴影，视觉上更高级 */
    border-bottom: none; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); 
    
    position: sticky; 
    top: 0;
    z-index: 50;
}

.tabs-wrapper {
    display: flex;
    overflow-x: auto; /* 允许横向滚动 */
    white-space: nowrap;
    padding: 0 0.22rem;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* 隐藏横向滚动条 */
.tabs-wrapper::-webkit-scrollbar { 
    display: none; 
}

.tab-item {
    display: inline-block;
    padding: 0.14rem 0.32rem;
    font-size: 0.26rem;
    color: #666;
    background: #f5f7fa;
    border-radius: 0.32rem;
    margin-right: 0.2rem;
    flex-shrink: 0; /* 防止被挤压 */
    transition: all 0.3s ease;
}

/* 选中状态（沿用了您底部导航的橙色主题色） */
.tab-item.active {
    background: #fb8955; 
    color: #fff;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(251, 137, 85, 0.3);
}