/* =========================================
   1. CSS Reset & Base (现代化精简版)
   ========================================= */
html, body, div, address, blockquote, iframe, 
ul, ol, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, 
p, pre, table, caption, th, td, form, legend, fieldset, 
input, button, select, textarea, a, strong, b, i, em { 
    margin: 0; padding: 0; outline: none; box-sizing: border-box; 
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main { display: block; }
audio[controls], canvas, video { display: inline-block; }
html { overflow-y: scroll; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea { 
    font: 14px/1.5 "微软雅黑", Arial, Helvetica, sans-serif; 
    color: #333; 
}
ul, ol { list-style-type: none; }
img, fieldset { border: 0 none; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
a:hover { color: #c11d1c; text-decoration: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
.hidden { display: none !important; }
.vsh { visibility: hidden; }
em, i { font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; line-height: 1; }

/* Clearfix (现代版) */
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

/* =========================================
   2. Layout & Container (1200px 核心框架)
   ========================================= */
body { background: url(../images/bodybg.png) repeat; }

.mainbody { 
    width: 100%;
    max-width: 1200px; /* 改为 1200px */
    margin: 0 auto; 
    padding: 20px 24px; 
    background: url(../images/index_101.png) repeat-y;
}

#banner2 { margin: -19px 0 20px -24px; width: calc(100% + 48px); }
#banner2 img { width: 100%; height: auto; max-height: 240px; object-fit: cover; }

/* =========================================
   3. Tab Navigation (选项卡)
   ========================================= */
.tab { 
    width: 100%; 
    padding: 0 30px; 
    height: 32px; 
    background: url(../images/neiye_04.png) no-repeat 0 0; 
    margin-left: -30px; 
}
.tabbtn { display: flex; }
.tabbtn li { 
    padding: 0 6px 0 5px; 
    font: 13px/27px "微软雅黑"; 
    background: url(../images/neiye_07.png) no-repeat right center; 
}
.tabbtn li a { color: #fff; white-space: nowrap; }
.tabbtn li.current { 
    padding: 0 8px; 
    height: 30px; 
    line-height: 30px; 
    border: 1px solid #dcdcdc; 
    border-bottom: 1px solid #fff; 
    background: #fff; 
    margin-top: -3px; 
}
.tabbtn li.current a { color: #a40101; }

.tabcon { 
    min-height: 143px; 
    padding: 10px; 
    border: 1px solid #dcdcdc; 
    margin: -4px 0 20px; 
    display: flex;
    flex-wrap: wrap;
}
/* 确保父容器是 flex 且强制不换行 */
.sublist { 
    display: flex !important; 
    flex-direction: row; /* 明确指定横向排列 */
    flex-wrap: nowrap;   /* 关键：禁止换行，防止掉到下面 */
    width: 100%; 
    gap: 15px; 
}
/* 左侧图片：固定宽度，不缩放 */
.tab_pic { 
    flex: 0 0 273px; /* 等同于 width: 273px，但不会被挤压 */
    width: 273px; 
    height: 143px; 
}
.tab_pic img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* 右侧列表：占据剩余所有空间 */
.tab_list { 
    flex: 1; /* 关键：自动撑满剩余宽度 */
    min-width: 0; /* 防止内部文字过长撑破容器导致换行 */
    min-height: 137px; 
    padding: 3px 0; 
    background: url(../images/neiye_13_1.png) no-repeat left center; 
    display: flex;
    flex-direction: row; /* 确保内部的 .list_1 也是左右排列 */
    gap: 5px;
}
/* 推荐课程标题列 */
.list_1.first { 
    flex: 0 0 40px; 
    min-width: auto;
    margin-left: 0; /* 清除可能干扰的边距 */
}

/* 课程列表项 */
.list_1 { 
    flex: 1; 
    min-width: 0; /* 关键：允许内容省略，防止撑破 flex 容器 */
    padding: 7px 0 7px 2px; 
    background: url(../images/neiye_06.png) no-repeat left center; 
}

.first h3 { 
    width: 20px; 
    word-wrap: break-word; 
    word-break: normal; /* 修复了原代码 nomal 的拼写错误 */
    font: 15px/20px "微软雅黑"; 
    color: #8f1413; 
    padding: 20px 0 0 10px; 
}
.list_1 li { 
    line-height: 24px; 
    height: 24px; 
    overflow: hidden; 
    padding-left: 19px; 
    background: url(../images/index_74.png) no-repeat 11px center; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================
   4. Content Sections (双列布局改用 Flex)
   ========================================= */
.kchz { 
    margin-bottom: 20px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
}
.kchz_left { flex: 1; min-width: 700px; }
.kchz_right { flex: 0 0 320px; overflow: hidden; }

/* 标题栏 */
.tab_title { 
    height: 26px; 
    overflow: hidden; 
    line-height: 26px; 
    background: #c11d1c; 
    margin-bottom: 5px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tab_title a { 
    font-family: arial; 
    color: #fff; 
    padding: 0 8px 0 17px; 
    background: url(../images/index_70.png) no-repeat 8px center; 
    font-size: 11px; 
}
.tab_title span { 
    font-size: 15px; 
    color: #fff; 
    font-family: "微软雅黑"; 
    display: block; 
    padding-left: 27px;
}
/* 各种标题图标背景 */
.tab_title span.jpkc { background: url(../images/neiye_18-06.png) no-repeat 9px center; }
.tab_title span.hzly { background: url(../images/neiye_18.png) no-repeat 8px center; padding-left: 33px;}
.tab_title span.hzlc { background: url(../images/neiye_26.png) no-repeat 7px center; }
.tab_title span.lxwm { background: url(../images/neiye_28.png) no-repeat 7px center; padding-left: 33px;}
.tab_title span.dxal { background: url(../images/neiye_44.png) no-repeat 7px center; }

/* 课程列表 */
.list_kc { padding-left: 8px; overflow: hidden; }
.list_kc li { 
    line-height: 36px; 
    border-bottom: 1px dotted #cecece; 
    padding-left: 8px; 
    background: url(../images/index_74.png) no-repeat 1px center; 
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.list_kc li > a { flex: 1; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.list_kc li span { display: block; margin-right: 11px; }
.list_kc li span.school { width: 160px; }
.list_kc li span.price_s { width: 80px; }

/* 新闻动态列表 */
.list1 li { 
    line-height: 41px; 
    background: url(../images/index_74.png) no-repeat 2px center; 
    padding-left: 10px; 
    display: flex;
    justify-content: space-between;
}
.list1 li span { font-family: "宋体"; }
.list1 li a:hover { text-decoration: underline; }

.list li { 
    line-height: 26px; 
    background: url(../images/index_74.png) no-repeat 2px center; 
    padding-left: 10px; 
    display: flex;
    justify-content: space-between;
}
.list li span { font-family: "宋体"; }
.list li a:hover { text-decoration: underline; }

/* 右侧联系方式等 */
.kchz_right .message { padding-left: 10px; position: relative; }
.kchz_right .message .msx_txt4 { height: 62px; }
.kchz_contact { height: 260px; }
.kchz_contact1 { height: 360px; }
.contact_list li { margin-bottom: 11px; color: #fff; }
.weibo { height: 73px; background: url(../images/neiye_33.png) no-repeat; }
.weixin { height: 73px; background: url(../images/neiye_39.png) no-repeat; }
.contact_list li h3 { padding-left: 104px; font: 16px/28px "微软雅黑"; padding-top: 5px; }
.contact_list li h3 em { font-size: 25px; color: #ebb; padding-right: 8px; vertical-align: bottom; }
.contact_list li p { color: #ebb; font: 13px/16px arial; padding-left: 104px; }
.contact_list li span { float: right; width: 98px; text-align: center; line-height: 14px; color: #fff; padding-top: 4px; }
.contact_list li a:hover { color: #FFF; }

.xwdt .title { background: url(../images/index_05.png) no-repeat; }
.xwdt_cont { padding: 5px 0 0; }
.ggplace { margin: 10px 0; text-align: center; }
.ggplace img { max-width: 100%; height: auto; }

/* =========================================
   5. Cases & Carousel (案例与轮播)
   ========================================= */
.case { margin-bottom: 20px; }
.case_content { width: 100%; overflow: hidden; }
.list_case { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    width: 100%; 
}
.list_case li { 
    flex: 1 1 calc(25% - 10px); 
    max-width: calc(25% - 10px);
    height: auto; 
}
.list_case li img { width: 100%; height: 156px; object-fit: cover; }
.list_case li h3 { 
    line-height: 20px; 
    color: #474747; 
    height: 45px; 
    overflow: hidden; 
    padding-top: 5px; 
    text-align: center; 
    font-size: 14px;
}
.list_case li h3 span { display: none; }

/* 友情链接轮播 */
.quicklink { 
    width: 100%; 
    padding: 20px 0; 
    border-top: 1px solid #e6e5e5; 
    border-bottom: 1px solid #e6e5e5; 
    position: relative; 
    z-index: 99; 
    margin-top: 19px; 
}
.quicklink .carousel { 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}
.quicklink .carousel .prev, .quicklink .carousel .next { 
    height: 19px; width: 19px; overflow: hidden; display: block; flex-shrink: 0; 
}
.quicklink .carousel .prev { background: url(../images/index_124.png) no-repeat; margin-right: 10px; }
.quicklink .carousel .next { background: url(../images/index_127.png) no-repeat; margin-left: 10px; }
.quicklink .carousel .prev:hover, .quicklink .carousel .next:hover { opacity: 0.8; }
.quicklink .slide { flex: 1; overflow: hidden; }
.quicklink .jCarouselLite { width: 100%; height: 120px; overflow: hidden; }
.quicklink .jCarouselLite li { 
    height: 120px; 
    border: 1px solid #ddd; 
    text-align: center; 
    margin-right: 17px; 
    float: left; 
}
.quicklink .jCarouselLite li img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* =========================================
   6. Footer (页脚)
   ========================================= */
#footer { 
    width: 100%; 
    text-align: center; 
    color: #999; 
    padding: 10px 0 5px; 
    position: relative; 
    z-index: 99; 
    border-top: 1px solid #e6e5e5; 
}
#footer p { line-height: 30px; }
#ph_footer { display: none; } /* 默认隐藏手机版页脚 */


/* =========================================
   7. Responsive Design (新增响应式模块)
   ========================================= */

/* --- 平板端 (屏幕宽度 ≤ 1200px) --- */
@media screen and (max-width: 1200px) {
    .mainbody {
        max-width: 100%;
        padding: 15px;
        background: none; /* 移除固定背景图防止错位 */
    }
    #banner2 { margin: 0 0 15px 0; width: 100%; }
    .tab { margin-left: 0; padding: 0 15px; background-size: cover; }
    
    .kchz { flex-direction: column; }
    .kchz_left { min-width: 100%; width: 100%; }
    .kchz_right { flex: 0 0 100%; width: 100%; }
    
    .list_case li { flex: 1 1 calc(33.33% - 10px); max-width: calc(33.33% - 10px); }
    
    /* 修改这里：让 tab 区域依然保持左右，只是外层大模块变上下 */
    .sublist { 
        flex-direction: row; /* 改回 row，保持左右 */
        flex-wrap: wrap;     /* 如果屏幕实在太小再换行 */
    }
    .tab_pic { flex: 0 0 200px; width: 200px; } /* 稍微缩小一点图片以适应屏幕 */
}

/* --- 小平板 / 大手机 (屏幕宽度 ≤ 768px) --- */
@media screen and (max-width: 768px) {
    body { font-size: 13px; }
    
    .sublist { flex-direction: column; }
    .tab_pic { width: 100%; height: auto; margin-bottom: 15px; }
    .tab_pic img { height: auto; }
    .tab_list { 
        flex-direction: column; 
        background: none; 
        width: 100%; 
    }
    .list_1 { 
        width: 100%; 
        background: none; 
        border-bottom: 1px dashed #eee;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .list_1.first { flex: 0 0 auto; width: 100%; margin-left: 0; }
    .first h3 { width: auto; padding: 5px 0; font-size: 16px; }
    .list_1 li { white-space: normal; height: auto; line-height: 1.5; padding: 4px 0 4px 19px; }

    /* 列表项在移动端垂直排列 */
    .list_kc li { flex-direction: column; align-items: flex-start; padding-bottom: 8px; }
    .list_kc li span { margin-right: 0; margin-top: 4px; }
    .list_kc li span.school, .list_kc li span.price_s { width: auto; }
    
    .list_case li { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
    
    /* 切换页脚显示 */
    #footer { display: none; }
    #ph_footer { 
        display: block; 
        width: 100%; 
        text-align: center; 
        color: #999; 
        padding: 15px 0; 
        border-top: 1px solid #e6e5e5; 
        font-size: 12px;
    }
    #ph_footer p { line-height: 24px; }
}

/* --- 手机端 (屏幕宽度 ≤ 480px) --- */
@media screen and (max-width: 480px) {
    .mainbody { padding: 10px; }
    .tab { height: auto; padding: 5px; }
    .tabbtn { flex-wrap: wrap; }
    .tabbtn li { margin-bottom: 5px; }
    
    .tab_title { height: auto; padding: 5px 0; flex-direction: row; }
    .tab_title span { font-size: 14px; }
    
    .list_case li { flex: 1 1 100%; max-width: 100%; }
    .list_case li img { height: 160px; }
    
    .list1 li, .list li { flex-direction: column; line-height: 1.6; padding-bottom: 5px; }
    .list1 li span, .list li span { float: none; font-size: 12px; color: #999; }
}