@charset "utf-8";
html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, frameset, table, th, tr, td, fieldset {
    margin: 0;
    padding: 0;
}

/* IE5.xIE6斜bug */
* html body {
    overflow: visible;
}

* html iframe, * html frame {
    overflow: auto;
}

* html frameset {
    overflow: hidden;
}

/* body */
body {
    color: #000;
    font-size: 12px;
    background-color:#FFFFFF;
}

i, em, cite {
    font-style: normal;
}

/* a */
a, a:link {
    color: #222;
    text-decoration: none;
}

a:visited {
}

a:active, a:hover {
    text-decoration: none;
    color: #5f5b5a;
}

a:focus {
    outline: none;
}

/* form */
textarea, input {
    word-wrap: break-word;
    word-break: break-all;
}

input {
    vertical-align: middle;
    font-size: 12px
}

.button {
    vertical-align: middle;
    font-size: 12px
}

.button {
    cursor: pointer;
}

/* li */
ul, li {
    list-style-type: none;
}

/* img */
img {
    border: 0 none;
    vertical-align: middle;
}

.clearboth {
    clear: both;
    display: block;
    height: 0;
    font-size: 0;
    overflow: hidden;
}


.kczx{ width:100%; background-color:#FFF; margin:0 auto;margin-bottom: 30px ; }
.kczxleft{ width:78%; float:left; padding-left:2%;  }
.kczxright{ width:16%;  float: right ;padding-right:2%;margin-top:20PX;   }
.kczxleft1{ width:100%;height:50PX; line-height:50PX; font-size:16PX; color:#323232; border-bottom:1PX solid #DEDEDE;margin-top:10PX;  }
.kczxleft2{width:100%; border-bottom:1PX solid #DEDEDE;z-index:99999;font-size:12PX; }
.kczxleft2-1{width:100%;}
.kczxleft2-1-1{width:100%;padding-bottom: 10px }
.kczxleft2-1-1top{width: 100%;margin-top: 5px;padding-bottom: 5px;padding-top: 10px; }
.kczxleft2-1-1topspan{border-radius:3PX;font-size:14PX; float: left; height: 60px;line-height:60px;text-align:left; display: block;}
.kczxleft2-1-1topspan A{background-color:#f2f3f3;border-radius:3PX;font-size:14PX;margin-left: 15px;float: left; height: 60px;line-height: 60px ;text-align:left; display: block;padding-left: 20px;padding-right: 20px}

.kczxleft2-1-1topspanhover{ border-radius:3PX;font-size:14PX; color:#FFF;float: left; height: 60px;line-height: 60px;}
.kczxleft2-1-1topspanhover  A{ display: block ; background-color:#650717;border-radius:3PX;font-size:14PX; color:#FFF;margin-left: 15px;float: left; height: 60px;line-height: 60px;padding-left: 20px;padding-right: 20px }

/* 一级分类：每个按钮不同配色 + 淡白柔和斑点图案（“全部”单独配色） */
.kczxleft2-1-1top .kczxleft2-1-1topspan A,
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A{
    position:relative;
    z-index:0;
    min-width:130px;
    box-sizing:border-box;
    color:#FFF;
    font-weight:700;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
    background-color:transparent;
    background-image:linear-gradient(135deg,#5B8DEF 0%,#2F5FD0 100%);
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
    transition:filter 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* 淡白不规则斑点：多层椭圆径向渐变，边缘柔和 */
.kczxleft2-1-1top .kczxleft2-1-1topspan A::after,
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    border-radius:inherit;
    background-image:
        radial-gradient(ellipse 70% 90% at 18% 22%,rgba(255,255,255,0.20),rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 55% 75% at 84% 78%,rgba(255,255,255,0.16),rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 40% 60% at 58% 6%,rgba(255,255,255,0.12),rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 35% 45% at 42% 62%,rgba(255,255,255,0.07),rgba(255,255,255,0) 75%);
    pointer-events:none;
    z-index:-1;
}
/* 第 1 个子元素是“全部”，配色从第 2 个开始逐个区分 */
.kczxleft2-1-1top > div:nth-child(2) A{ background-image:linear-gradient(135deg,#5B8DEF 0%,#2F5FD0 100%); }
.kczxleft2-1-1top > div:nth-child(3) A{ background-image:linear-gradient(135deg,#45C6A0 0%,#1F9E7A 100%); }
.kczxleft2-1-1top > div:nth-child(4) A{ background-image:linear-gradient(135deg,#F2A03D 0%,#D97B12 100%); }
.kczxleft2-1-1top > div:nth-child(5) A{ background-image:linear-gradient(135deg,#9A7BFF 0%,#6A4BDC 100%); }
.kczxleft2-1-1top > div:nth-child(6) A{ background-image:linear-gradient(135deg,#FF7A9A 0%,#E0476B 100%); }
.kczxleft2-1-1top > div:nth-child(7) A{ background-image:linear-gradient(135deg,#35B4D6 0%,#1189AD 100%); }
.kczxleft2-1-1top > div:nth-child(8) A{ background-image:linear-gradient(135deg,#7D8BA1 0%,#4C5A70 100%); }
.kczxleft2-1-1top > div:nth-child(9) A{ background-image:linear-gradient(135deg,#F2683C 0%,#C2431B 100%); }
/* 鼠标经过：整体提亮 */
.kczxleft2-1-1top .kczxleft2-1-1topspan A:hover,
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A:hover{ filter:brightness(1.12); }
/* 点击选中：保持原有配色，仅加描边/阴影/放大 */
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A{
    box-shadow:inset 0 0 0 3px rgba(255,255,255,0.8),0 4px 12px rgba(0,0,0,0.28);
    border-radius:8PX;
    transform:scale(1.06);
    z-index:2;
}
/* 选中的一级菜单：背景光粒子流动 + 呼吸闪烁 */
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A::after{
    background-image:
        radial-gradient(circle 1.6px at 22% 28%,rgba(255,255,255,0.95),rgba(255,255,255,0) 100%),
        radial-gradient(circle 1.2px at 68% 64%,rgba(255,255,255,0.85),rgba(255,255,255,0) 100%),
        radial-gradient(circle 1.4px at 46% 82%,rgba(255,255,255,0.9),rgba(255,255,255,0) 100%),
        radial-gradient(ellipse 70% 90% at 18% 22%,rgba(255,255,255,0.18),rgba(255,255,255,0) 70%);
    background-size:48px 48px,64px 64px,80px 80px,100% 100%;
    background-repeat:repeat,repeat,repeat,no-repeat;
    animation:kczxParticleMove 7s linear infinite,kczxParticleGlow 3s ease-in-out infinite alternate;
}
@keyframes kczxParticleMove{
    from{ background-position:0 0,0 0,0 0,0 0; }
    to{ background-position:48px -48px,-64px 64px,36px -80px,0 0; }
}
@keyframes kczxParticleGlow{
    from{ opacity:0.55; }
    to{ opacity:1; }
}
/* 选中的一级菜单：文字下方居中的向下小三角箭头 */
.kczxleft2-1-1top .kczxleft2-1-1topspanhover A::before{
    content:"";
    position:absolute;
    left:50%;
    margin-left:-6px;
    bottom:8px;
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:7px solid rgba(255,255,255,0.95);
    pointer-events:none;
    z-index:1;
}
/* “全部”点击选中：同样 3px 白色描边（80%）+ 加深阴影 + 略微放大 + 圆角 */
#kcflquanbu.kczxleft2-1-1topspanhover A{
    box-shadow:inset 0 0 0 3px rgba(255,255,255,0.8),0 4px 12px rgba(0,0,0,0.28);
    border-radius:8PX;
    transform:scale(1.06);
    z-index:2;
}

/* “全部”按钮：青蓝渐变，与其他一级菜单质感一致 */
#kcflquanbu A{
    background-color:#1B7C9E;
    background-image:linear-gradient(135deg,#3E9FC4 0%,#1B7C9E 100%);
    color:#FFF;
    font-weight:700;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
    position:relative;
    z-index:0;
    min-width:80px;
    box-sizing:border-box;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
    transition:filter 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* 鼠标经过：整体提亮，与其他一级菜单一致 */
#kcflquanbu A:hover{
    background-color:#1B7C9E;
    background-image:linear-gradient(135deg,#3E9FC4 0%,#1B7C9E 100%);
    color:#FFF;
    filter:brightness(1.12);
}


.kczxleft2-1-1bottom{width:100%;border-top: 1px dashed  #dedede;border-bottom:none;padding-top: 15px;margin-top: 10px}
.kczxleft2-1-1bottom-1{margin-left: 10px;background-color:#f8f6f6;background-image:none;border-radius:4PX;font-size:13PX;padding-right: 12px;padding-left: 12px;margin-bottom: 10px;height: 50px;min-width:85px;box-sizing:border-box;text-align:center;float: left;display: block;line-height: 50px;color:#333;font-weight:normal;text-shadow:none;box-shadow:none;position:relative;transition:background-color 0.2s ease}
.kczxleft2-1-1bottom-1 a{color:#333;display:block;text-decoration:none}
.kczxleft2-1-1bottom-1:hover{background-color:#ececec}
/* 二级菜单选中：蓝色底 + 白色文字 */
.kczxleft2-1-1bottom-1click{margin-left: 10px;background-color:#24b8ff;background-image:none;border-radius:4PX;font-size:13PX;padding-right: 12px;padding-left: 12px;margin-bottom: 10px;height: 50px;min-width:85px;box-sizing:border-box;text-align:center;float: left;display: block;line-height: 50px;color: #ffffff;font-weight:normal;text-shadow:none;box-shadow:0 4px 12px rgba(36,184,255,0.45);position:relative;z-index:1;overflow:hidden;transition:background-color 0.2s ease, box-shadow 0.2s ease}
/* 二级菜单选中：流光扫过效果 */
.kczxleft2-1-1bottom-1click::after{
    content:"";
    position:absolute;
    top:-50%;
    left:-70%;
    width:45%;
    height:200%;
    background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    pointer-events:none;
    z-index:-1;
    animation:kczxShine 30s linear infinite;
}
@keyframes kczxShine{
    0%{ left:-70%; }
    5%{ left:130%; }
    100%{ left:130%; }
}
/* 鼠标经过选中项：额外扫一次流光 */
.kczxleft2-1-1bottom-1click::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-70%;
    width:45%;
    height:200%;
    background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    pointer-events:none;
    z-index:-1;
}
.kczxleft2-1-1bottom-1click:hover::before{
    animation:kczxShineHover 1.2s ease-in-out;
}
@keyframes kczxShineHover{
    from{ left:-70%; }
    to{ left:130%; }
}
.kczxleft2-1-1bottom-1click a{color: #ffffff}
/* 选中项悬停时保持蓝色（否则会被 .kczxleft2-1-1bottom-1:hover 的灰底覆盖） */
.kczxleft2-1-1bottom-1click:hover{background-color:#1FA6E8;background-image:none;color:#ffffff}

.kczxleft2-2{width:100%;height:40PX;line-height: 25px;text-align: center;padding-bottom: 10px;padding-top:5px}
/* 二级菜单未展示（该行没有实际元素）时不占位置 */
.kczxleft2-2:not(:has(div)){display:none;height:0;padding:0;margin:0;border:none}
.kczxleft2-2-1{height:25PX; float:left; color:#24b8ff; padding-right:20PX;padding-top:3px;margin-left:10px }
.kczxleft2-2-1x1{height:25PX;float:left; padding-left:10PX;cursor: pointer;width: 60px;padding-top:3px }
.kczxleft2-2-1x2{height:25PX;float:left; padding-left:10PX;cursor: pointer;width: 60px;padding-top:3px }
.kczxleft2-2-2{height:25PX;float:left;  padding-left:10PX;cursor: pointer;width: 65px;margin-right: 10px;padding-top:3px }
.kczxleft2-2-3{height:25PX;float:left;  padding-left:10PX;cursor: pointer;width: 65px;padding-top:3px }
.kczxleft2-2-5{height:30PX; float:left;padding-left:10PX;cursor: pointer;width: 120px;padding-top:3px }
.kczxleft2-2-6{height:25PX; float:left;padding-left:10PX;cursor: pointer;width: 60px;padding-top:3px }
.kczxleft2-2-5-1{ width:100PX; background-color:#fff;border:1PX solid #DEDEDE;  font-size:12PX; margin-left:10PX; z-index:99999; position:absolute;display: none;margin-top: 10px;background-color: rgba(255,255,255,0.1);}
@media \0screen\,screen\9 {
    .kczxleft2-2-5-1{
        background-color:#FFFFFF;
        filter:Alpha(opacity=10);
        *zoom:1;
    }
}
.kczxleft2-2-5-1 LI{height:40PX; width:100PX; line-height:40PX; border-bottom:1PX solid #DEDEDE; text-align:center;}
.kczxleft2-1ss{width:305PX;height:40PX;float:right;padding-left: 10px;margin-top: 20px;position:relative;}
.kczxleft2-1ss-1{width:100%; height: 40PX;}
.kczxleft2-1ss-2{position:absolute; right:10PX; top:0; width:28PX; height:40PX; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.kczxleft2-1ss-1 input{width:100%; height: 40PX; padding-left:14PX; padding-right:42PX; line-height:normal; font-size:14PX; color:#333; outline:none;border: 1px solid #dedede;border-radius:20PX;background-color: #f5f6f8; box-sizing:border-box;}
.kczxleft2-1ss-1 input::placeholder{color:#9aa0a6; font-size:14PX;}
.kczxleft2-1ss-2 input{display:none;}
.kczxleft2-1ss-2 img{height:20PX; width:auto; display:block;}

.kczxwzong{width: 65px;padding-left: 10px}
.kczxwz{float: left;width: 40px;text-align: center}
.kczxbs{float: left;margin-top: 1px ;width: 20px;}
.kczxwz1{float: left;width: 30px;text-align: center;padding-left: 10px}
.kczxbs1{float: left;margin-top: 1px ;width: 20px;}
.bjlan{ background-color:#f2f0f0; height:25PX;border-radius: 5px;color: #3f3f3f;text-align: center;width: 60px}
.bjlan1{ background-color:#f2f0f0; height:25PX;border-radius: 5px;color: #3f3f3f;text-align: center;}



.kczxleft3{width:100%; padding-top:20PX;z-index:888; }
.kczxleft3 LI{width:20%;  float:left; margin-bottom:20PX; }
.kczxleft3-1{width:83%; float:left; height:212PX;border:1PX solid #DEDEDE;  padding:5%; background-color:#FFF;border-radius: 5px; overflow:hidden;}
.kczxleft3-1:hover{width:83%; float:left; height:212PX;border:1PX solid #DEDEDE;  padding:5%; background-color:#FFF;border-radius: 5px; overflow:hidden;box-shadow: 3px 3px 3px #e2e3e5;}
/* 封面容器：加 overflow:hidden，图片放大时裁剪在封面区域内，不会盖住下方标题 */
.kczxleft3-1-1{width:100%; height:160PX; overflow:hidden;}
.kczxleft3-1-1 IMG{width:100%; height:160PX;}

/* 鼠标经过课程卡片：封面放大动画（有封面图、无图渐变封面都生效） */
.kczxleft3-1-1 IMG,
.kczxleft3-1-1 .kczx-noimg{
    -webkit-transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
}

.kczxleft3-1:hover .kczxleft3-1-1 IMG,
.kczxleft3-1:hover .kczxleft3-1-1 .kczx-noimg{
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
.kczxleft3-1-2{width:99%; height:25PX; font-size:14PX; overflow:hidden; line-height:25PX; padding-left:1%;}
.kczxleft3-1-2 A{ font-size:14PX; color:#333132;   }
.kczxleft3-1-2 A:hover{ font-size:14PX; color:#4d4b4c;}

.kczxleft3-1-3{ width:100%; height:30PX; line-height:30PX;}
.kczxleft3-1-3 span{ padding-left:10PX; padding-right:10PX; background-color:#f5f6f9; margin-right:10PX;border-radius: 10px; height:25PX; line-height:25PX;padding-top: 2px;padding-bottom: 2px}
.kczxleft3-1-3-1{width:40%; float:left;}
.kczxleft3-1-3-2{width:60%; float: right;}
.kczxleft3-1-3-1-1{ background-color:#f5f6fa; margin-right:10PX; width:90%; float:left;height:30PX; text-align:center;border-radius: 10px;}
.kczxleft3-1-3-2-1{ background-color:#f5f6fa; margin-right:10PX; width:90%; float: right;height:30PX;text-align:center;border-radius:10px;}
.kczxleft3-1-4{width:99%; height:30PX; padding-left:1%;margin-top: 5px}

.kczxrightZ{ width:100%;background-color:#f5f6f8; }
.kczxright1{ width:95%; height:50PX; border-bottom:1px solid #dedede; line-height:50PX; padding-left:5%; font-size:16PX; color:#545255;}
.kczxright2{width:100%; padding-top:20PX; }
.kczxright2 LI{width:80%;float:left; margin-bottom:20PX; padding-left:10%; padding-right:10%;}
.kczxright2-1{width:90%; height:200PX;border:1PX solid #DEDEDE; border-radius: 5px; overflow:hidden; background-color:#FFF; padding:5%;}
.kczxright2-1:hover{ box-shadow: 3px 3px 3px #e2e3e5;}

.kczxright2-1-1{width:100%; height:140PX;}
.kczxright2-1-1 IMG{width:100%; height:140PX;}
.kczxright2-1-2{width:99%; height:30PX; font-size:14PX; overflow:hidden; line-height:30PX; padding-left:1%;}
.kczxright2-1-2 A{ font-size:14PX; color:#333132;   }
.kczxright2-1-2 A:hover{ font-size:14PX; color:#4d4b4c;}

.kczxright2-1-3{ width:100%; height:30PX; line-height:30PX;font-size:12PX;}
.kczxright2-1-3 span{ padding-left:10PX; padding-right:10PX; background-color:#f5f6f9; margin-right:10PX;border-radius: 10px; height:25PX; line-height:25PX;padding-top: 2px;padding-bottom: 2px}
.kczxright2-1-4{width:99%; height:30PX; padding-left:1%;}
.pageNavi1{width:100%; height:30PX;text-align: center;margin-bottom: 20px; }

/* ------------------------------------------------------------------
 * 课程封面没有图片时：彩色渐变背景 + 白色带阴影课程名
 * 仅用于 course_center.html
 * ------------------------------------------------------------------ */
.kczx-noimg{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:160PX;
    box-sizing:border-box;
    padding:0 8%;
    overflow:hidden;
}
.kczx-noimg span{
    color:#FFFFFF;
    font-size:15PX;
    font-weight:700;
    line-height:1.4;
    text-align:center;
    text-shadow:0 1px 3px rgba(0,0,0,0.45), 0 0 10px rgba(0,0,0,0.25);
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}
.kczx-noimg1{background-image:linear-gradient(135deg,#4E8CFF 0%,#2F5FD0 100%);}
.kczx-noimg2{background-image:linear-gradient(135deg,#FF9A5A 0%,#F2683C 100%);}
.kczx-noimg3{background-image:linear-gradient(135deg,#45C6A0 0%,#1F9E7A 100%);}
.kczx-noimg4{background-image:linear-gradient(135deg,#9A7BFF 0%,#6A4BDC 100%);}
.kczx-noimg5{background-image:linear-gradient(135deg,#F2B13C 0%,#D98B12 100%);}
.kczx-noimg6{background-image:linear-gradient(135deg,#FF7A9A 0%,#E0476B 100%);}
.kczx-noimg7{background-image:linear-gradient(135deg,#35B4D6 0%,#1189AD 100%);}
.kczx-noimg8{background-image:linear-gradient(135deg,#7D8BA1 0%,#4C5A70 100%);}

/* 右侧推荐课程的封面区高度是 140，字号和留白相应缩小 */
.kczxright2-1-1 .kczx-noimg{height:140PX; padding:0 6%;}
.kczxright2-1-1 .kczx-noimg span{font-size:13PX; -webkit-line-clamp:2;}