@charset "utf-8";

:root {
            --primary-color: #ae0b2a;
            --primary-light: #fdf1f3;
            --text-main: #333333;
            --text-sub: #666666;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
            --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
            --transition-fast: 0.25s ease;
            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
html, body{overflow-y: auto; overflow-x: hidden;}

::-webkit-scrollbar-track-piece{width: 10px; background-color: #fff;}
::-webkit-scrollbar{width: 5px; height: 6px;}
::-webkit-scrollbar-thumb{height: 50px; background-color: #ae0b2a;}

.red_color{color: #ae0b2a;}

.bg_gr{background-repeat: no-repeat; background-position: center center; background-size: cover;}

.tops{width: 100%; padding: 9px 0; background-color: #f1f1f1;}
.tops_main{display: flex; justify-content: flex-end; align-items: center;}
.tops_main img{margin-right: 15px;}

.gauge{padding: 50px 0;}

.header { width: 100%; 
            height: 90px; 
            background-color: #fff; 
            box-shadow: var(--shadow-sm); 
            position: sticky; 
            top: 0;
            z-index: 100; }
.header_main {
    height: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.header .logo img {
    height: 65px;
    display: block; /* 消除图片底部间隙 */
}
/* =========================================
           3. 主导航一级菜单 (Main Nav - Level 1)
           ========================================= */
        .nav ul {
            display: flex;
            align-items: center;
            gap: 6px; 
        }

        .nav .nLi { 
            position: relative; 
        }

        /* 严格使用 > a 只控制一级菜单，避免污染子菜单 */
        .nav .nLi > a { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-width: 90px; 
            height: 40px; 
            padding: 0 16px;
            color: var(--text-main); 
            font-size: 15px; 
            font-weight: 500;
            border-radius: 6px; 
            transition: all var(--transition-fast); 
        }

        .nav .nLi > a:hover,
        .nav .nLi.on > a { 
            background-color: var(--primary-color); 
            color: #fff; 
        }

        /* =========================================
           4. Mega Menu 大型下拉面板 (Mega Menu)
           ========================================= */
        .mega-menu {
            position: absolute;
            top: calc(100% + 12px); /* 留出 12px 距离给小三角 */
            left: 50%;
            width: 820px;
            max-width: 90vw;
            background-color: #fff;
            border-radius: 12px;
            border-top: 3px solid var(--primary-color);
            box-shadow: var(--shadow-lg);
            padding: 28px 32px;
            
            /* 隐藏与动画 */
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(15px);
            transition: all var(--transition-normal);
            z-index: 999;
        }

        /* 小三角箭头 (指向父级) */
        .mega-menu::before {
            content: '';
            position: absolute;
            top: -11px; 
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--primary-color);
        }
        
        /* 小三角内部白色填充 */
        .mega-menu::after {
            content: '';
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
        }

        /* 缝隙修复：防止鼠标移向菜单时消失 */
        .nLi.has-mega::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 20px; 
            display: none;
        }
        .nLi.has-mega:hover::before { display: block; }

        /* 悬停显示 Mega Menu */
        .nLi.has-mega:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        /* =========================================
           5. Mega Menu 内部布局 (Mega Menu Inner)
           ========================================= */
        .mega-header {
            font-size: 16px;
            color: var(--primary-color);
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px dashed #eee;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mega-header::before {
            content: '';
            width: 4px;
            height: 16px;
            background: var(--primary-color);
            border-radius: 2px;
        }

        .mega-body {
            display: flex;
            gap: 32px;
        }

        .mega-left {
            flex: 1;
            border-right: 1px dashed #eee;
            padding-right: 32px;
        }

        .mega-right {
            width: 200px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 分类行 */
        .content-row {
            display: flex;
            margin-bottom: 18px;
            align-items: flex-start;
        }
        .content-row:last-child { margin-bottom: 0; }

        .row-title {
            width: 80px;
            flex-shrink: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: var(--primary-color);
            background-color: var(--primary-light);
            border-radius: 4px;
            font-size: 13px;
            margin-right: 20px;
            font-weight: 600;
        }

        .row-links {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 0;
            flex: 1;
        }

        .row-links a {
            padding: 0 14px;
            font-size: 14px;
            color: var(--text-sub);
            border-right: 1px solid #e8e8e8;
            line-height: 30px;
            transition: color var(--transition-fast);
        }
        .row-links a:last-child { border-right: none; }
        .row-links a:hover { color: var(--primary-color); font-weight: 500; }

        /* 右侧推荐卡片 */
        .right-item {
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 14px;
            color: var(--text-main);
            transition: all var(--transition-fast);
            text-align: center;
            border: 1px solid transparent;
        }
        .right-item:hover {
            background: #fff;
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(174, 11, 42, 0.1);
        }

        /* =========================================
           6. 普通下拉菜单 (Simple Dropdown - 培训专题)
           ========================================= */
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(10px); 
            min-width: 140px;
            background-color: #fff;
            box-shadow: var(--shadow-lg);
            border-radius: 8px;
            padding: 8px 0;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-normal);
            z-index: 999;
            display: flex;
            flex-direction: column;
        }
        
        .nLi.has-dropdown::before {
            content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 15px; display: none;
        }
        .nLi.has-dropdown:hover::before { display: block; }
        
        .nLi.has-dropdown:hover .dropdown-menu {
            opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
        }

        .dropdown-menu li a {
            display: block;
            padding: 10px 24px;
            font-size: 14px;
            color: #444;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .dropdown-menu li a:hover {
            background-color: var(--primary-light); 
            color: var(--primary-color); 
        }

.banner {
  width: 100%;
  min-width: 1000px;      /* 保留你原有的最小宽度限制 */
  height: 240px;
  margin: -4px 0 0 0;
  position: relative;
  overflow: hidden;
  padding-top: 4px;
  box-sizing: border-box; /* 🔑 防止 padding 撑破 100% 宽度 */
  
  /* 🔑 关键：Flex 居中布局 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

.banner img {
  max-width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* 保持比例填充，不变形 */
  object-position: center; /* 🔑 图片视觉焦点居中 */
}

/* 手机端 */
.headerSJ {
	display: none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	z-index:70;
	background-color:#fff;
	box-shadow:0 0 9px rgba(0,0,0,0.25);
}
.headerSJ .headerSC {
	width: 95%;
	height:60px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headerSJ .logo img {
	display:block;
	height: 40px;
}

.headerSJ .navbar0 {
	position:relative;
	cursor:pointer;
	background-color:transparent;
	background-image:none;
}
.headerSJ .navbar0 .icon-bar {
	display:block;
	width:18px;
	height:2px;
	border-radius:1px;
	background-color:#333;
}
.headerSJ .navbar0 .icon-bar + .icon-bar {
	margin-top:4px;
}

.headerSJ .navbg0 {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:71;
	background-color:rgba(0,0,0,0.7);
}
.headerSJ .navbg0 .closeSJ {
	position:absolute;
	right:24px;
	top:18px;
	cursor:pointer;
}
.headerSJ .navwrap0 {
	position:fixed;
	top:0px;
	left:-50%;
	width:60%;
	height:100%;
	opacity:0;
	visibility: hidden;
	z-index:72;
    background-color: #2c3e50;
}
.headerSJ .navwrap0 .nav0 {
	height:100%;
	padding:10px 5% 0px 5%;
	overflow-y:auto;
}

.headerSJ .navwrap0 .nav0 li {
	line-height:40px;
	padding:0 3%;
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.headerSJ .navwrap0 .nav0 li a {
	display:block;
	color:#fff;
	font-size:14px;
}
.headerSJ .navwrap0 .nav0 li a span {
	font-size: 15px;
}

.headerSJ .navwrap0 .nav0 .SJbod {
	display:none;
}
.headerSJ .navwrap0 .nav0 .SJbod dd a {
	line-height:33px;
	font-size:12px;
}
.headerSJ .navwrap0 .nav0 .plus a {
	background:url("https://www.knightandbutler.com/images1/plus.png") right center no-repeat;
}
.headerSJ .navwrap0 .nav0 .minus a {
	background:url("https://www.knightandbutler.com/images1/minus.jpg") right center no-repeat;
}
.headerSJ .navwrap0 .nav0  .SJtit a {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.headerSJ .navwrap0 .nav0  .SJtit a i{
	font-size: 15px;
}

.index_swiper{position: relative; width: 100%;}
.index_swiper .bg{width: 100%; height: 100%;}
.index_swiper .bg img{ display: none;}
.index_swiper .banner_pagination .swiper-pagination-bullet{width: 12px; height: 12px; margin: 0 8px; opacity: 1; background-color: #fff;}
.index_swiper .banner_pagination .swiper-pagination-bullet-active{background-color: #ae0b2a;}

.index_title{text-align: center; margin-bottom: 50px;}
.index_title h2{margin-bottom: 10px; font-size: 30px; font-weight: bold; color: #2c3e50;}
.index_title h3{font-size: 18px; color: #a1b1bc; font-family: Arial, Helvetica, sans-serif;}

/* 合并 .title 样式 */
.title {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 30px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #ddd;
}
/* === 新增：左侧文字标题样式 === */
.title .title-text {
    font-size: 28px;       /* 标题字号，可根据原图大小微调（建议 22px - 28px） */
    font-weight: bold;     /* 字体加粗 */
    color: #222;           /* 标题颜色 */
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: 15px;    /* 为左侧装饰线留出空间 */
    letter-spacing: 1px;   /* 字间距微调，显得更大气 */
}

/* 新增：左侧红色装饰竖线（呼应右侧的红色圆点） */
.title .title-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background-color: #f33436; /* 使用与右侧圆点相同的主题红 */
    border-radius: 2px;
}
.title .more { font-size: 14px; display: block; color: #333; text-decoration: none; }
.title .more span { display: inline-block; position: relative; margin-left: 15px; }
.title .more em { position: absolute; left: -5px; top: 35%; display: inline-block; width: 8px; height: 8px; border-radius: 50%; font-style: normal; background-color: #f33436; z-index: 0; }
.title .more i { font-size: 20px; color: #000; position: relative; z-index: 2; }
.title:hover a { color: #f33436; }
/* === 新增：Tab 导航标签样式 === */
.tab-nav {
    display: flex;
    flex-wrap: wrap; /* 允许换行，防止小屏幕挤压 */
    gap: 15px 10px;  /* 标签之间的间距 */
    margin-bottom: 40px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.tab-item {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    color: #555;
    background-color: #f4f4f4;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.tab-item:hover {
    color: #f33436;
    background-color: #fff;
    border-color: #f33436;
}
.tab-item.active {
    color: #fff;
    background-color: #f33436; /* 激活状态使用主题红 */
    border-color: #f33436;
    font-weight: bold;
}
/* === 新增：Loading 遮罩样式 === */
.loading-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #f33436;
    z-index: 10;
}
.part3 { position: relative; min-height: 300px; } /* 防止 loading 时高度塌陷 */
/* === 新增：底部长条“更多”按钮样式 === */
.bottom-more {
    text-align: center;
    margin-top: 50px;
}
.more-btn {
    display: inline-block;
    width: 240px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 25px; /* 胶囊圆角 */
    text-decoration: none;
    transition: all 0.4s ease;
    letter-spacing: 1px;
}
.more-btn i {
    margin-left: 8px;
    font-size: 20px;
    transition: transform 0.3s ease;
}
.more-btn:hover {
    background-color: #f33436;
    border-color: #f33436;
    color: #fff;
    box-shadow: 0 5px 15px rgba(243, 52, 54, 0.3);
}
.more-btn:hover i {
    transform: translateX(5px); /* 悬浮时箭头向右移动 */
}

.index1_main .nr p{font-size: 20px; line-height: 40px; color: #526377;}

.index_line0{width: 1500px; height: 1px; background-color: #ccc; margin: 0 auto 42px auto;}
.index_line0 span{float: right;}

.index2{width: 100%; padding: 50px 0 5px 0; background-image: url("https://www.knightandbutler.com/images1/index2-bg.jpg"); background-position: top center;}
.index2 .index_title h3{color: #9494ac;}
.index2_main ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.index2_main ul li{width: 43%; text-align: center; margin-bottom: 45px; padding: 0 20px;}
.index2_main ul li strong{display: block; font-size: 20px; margin-bottom: 18px;}
.index2_main ul li p{font-size: 17px; line-height: 30px;  color: #000;}

.index3{padding: 50px 0 15px 0;}
.index3_main ul li{float: left; width: 285px; margin-bottom: 35px; margin-right: 20px;}
.index3_main ul li:nth-child(4n){margin-right: 0;}
.index3_main ul li .img_box{overflow: hidden;}
.index3_main ul li .img{width: 100%; height: 190px; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index3_main ul li .img img{display: block; width: 100%; height: 100%;}
.index3_main ul li .txt{border: 1px solid #ccc; border-top: none;}
.index3_main ul li .txt .wz{padding: 26px; font-size: 14px; color: #666;}
.index3_main ul li .txt .wz h2{margin-bottom: 17px; color: #333; font-size: 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index3_main ul li .txt .wz p{margin-bottom: 5px; line-height: 25px; height: 75px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.index3_main ul li .txt .wz span{display: block; line-height: 30px;}
.index3_main ul li .txt .detal{width: 100%; padding: 20px 0; display: flex; justify-content: center; align-items: center; font-size: 18px; background-color: #ddd;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index3_main ul li .txt .detal i{display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; margin-right: 10px; background-color: #c50000;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index3_main ul li .txt .detal i em{display: inline-block; width: 10px; height: 12px; background: url("https://www.knightandbutler.com/images1/arrow_W.png") no-repeat center center;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index3_main ul li:hover .img{transform: scale(1.1); -webkit-transform: scale(1.1);}
.index3_main ul li:hover .txt .wz h2{color: #ae0b2a;}
.index3_main ul li:hover .txt .detal{background-color: #c50000; color: #fff;}
.index3_main ul li:hover .txt .detal i{background-color: #fff;}
.index3_main ul li:hover .txt .detal i em{background-image: url("https://www.knightandbutler.com/images1/arrow_H.png");}

.index4 .index_title{text-align: left; margin-bottom: 35px;}
.index4 .index_title h2{font-size: 24px;}
.index4 .index_title h3{display: flex; justify-content: space-between; align-items: center;}
.index4 .index_title h3 a{font-size: 12px;}
.index4 .index_title h3 a:hover{color: #ae0b2a;}
.index4_main{display: flex; justify-content: space-between; flex-wrap: wrap;}
.index4_main .more{display: flex; justify-content: flex-end;}
.index4_main .more a{display: inline-block; width: 66px; height: 20px; line-height: 20px; color: #fff; text-align: center; background-color: #cc3333;}
.index4_main .more a:hover{background-color: #fff; color: #cc3333; box-shadow: 0 0 9px rgba(0,0,0,0.25);}
.index4_main .lis ul li:last-child{margin-bottom: 0;}
.index4_main .lis1{width: 360px;}
.index4_main .lis1 ul li{margin-bottom: 25px;}
.index4_main .lis1 ul li .mod{height: 137px; overflow: hidden; display: flex; justify-content: space-between;}
.index4_main .lis1 ul li .mod .times{width: 85px; height: 100%; text-align: center;}
.index4_main .lis1 ul li .mod .times .red_ti{width: 100%; color: #fff;  padding: 7px 0; font-size: 14px; background-color: #cc3333;}
.index4_main .lis1 ul li .mod .times .red_ci{width: 100%; padding: 20px 0; font-size: 14px; background-color: #e8e7e7;}
.index4_main .lis1 ul li .mod .times .red_ci strong{display: block; margin-bottom: 10px; color: #999; font-size: 26px; color: #8f8f8f;}
.index4_main .lis1 ul li .mod .txt{width: 275px; height: 100%; padding: 20px; background-color: #f3f3f3;}
.index4_main .lis1 ul li .mod .txt h3{font-size: 15px; margin-bottom: 15px; font-weight: bold; color: #333;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index4_main .lis1 ul li .mod .txt h4 span{display: block; margin-bottom: 5px; line-height: 25px; color: #898989;}
.index4_main .lis1 ul li:hover .mod .txt h3{color: #ae0b2a;}
.index4_main .lis2{width: 400px;}
.index4_swiper{width: 100%; padding-bottom: 10px;}
.index4_swiper .lis_box .img_box{overflow: hidden; margin-bottom: 25px;}
.index4_swiper .lis_box .img{width: 100%; height: 250px; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index4_swiper .lis_box .img img{display: block; width: 100%; height: 100%;}
.index4_swiper .lis_box .txt .sj{display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px;  border-bottom: 1px solid #ccc; font-size: 14px;}
.index4_swiper .lis_box .txt .sj i{display: inline-block; width: 8px; height: 10px; margin-right: 8px; background: url("https://www.knightandbutler.com/images1/triangle.png") no-repeat top center;}
.index4_swiper .lis_box .txt h2{font-size: 15px; font-weight: bold; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index4_swiper .lis_box .txt p{font-size: 12px; line-height: 25px; height: 50px; margin-bottom: 20px; color: #898989; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.index4_swiper .lis_box:hover .img{transform: scale(1.1); -webkit-transform: scale(1.1);}
.index4_swiper .lis_box:hover .txt h2{color: #cc3333;}
.index4_swiper .index4_pagination{bottom: 48%;}
.index4_swiper .index4_pagination .swiper-pagination-bullet{width: 12px; height: 12px; margin: 0 6px; border: 2px solid #fff; background-color: transparent; opacity: 1;}
.index4_swiper .index4_pagination .swiper-pagination-bullet-active{background-color: #fff;}
.index4_main .lis3{width: 330px;}
.index4_main .lis3 ul {padding-top: 20px; margin-bottom: 20px; border-top: 1px solid #cc3333;}
.index4_main .lis3 ul li{margin-bottom: 17px;}
.index4_main .lis3 ul li h2{position: relative; font-weight: bold; font-size: 14px; margin-bottom: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;}
.index4_main .lis3 ul li h2::before{content: "·"; display: inline-block; vertical-align: middle; margin-right: 2px;}
.index4_main .lis3 ul li p{font-size: 12px; line-height: 25px; height: 50px; color: #898989; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.index4_main .lis3 ul li:hover h2{color: #cc3333;}

.index6{width: 100%; padding: 80px 0; background: url("https://www.knightandbutler.com/images1/index5-bg.jpg") no-repeat top center; background-size: cover;}
.index6 .container{width: 90%; max-width: 1300px;}
.index6_bt{text-align: center; margin-bottom: 80px;}
.index6_bt h1{color: #fff; font-size: 32px; margin-bottom: 23px;}
.index6_bt h2{padding: 8px 10px; display: inline-block; font-size: 22px; background-color: #c43032; color: #d3d3d3;}
.index6_item{margin-bottom: 60px;}
.index6_item .hd ul li{box-sizing: border-box; float: left; width: 15%; margin: 0 0.8%; padding: 1% 0; margin-bottom: 15px; border: 1px solid #b7b7b7; cursor: pointer; text-align: center; color: #fff;}
.index6_item .hd ul li img{display: block; max-width: 100%; margin: 0 auto; margin-bottom: 10px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
.index6_item .hd ul li .img1{display: block;}
.index6_item .hd ul li .img2{display: none;}
.index6_item .hd ul li p{font-size: 20px; font-weight: 100;	transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.index6_item .hd ul li.on .img1{display: none;}
.index6_item .hd ul li.on .img2{display: block;}
.index6_item .hd ul li.on p{color: #fe0002;}
.index6_item .bd .txt{box-sizing: border-box; margin-top: 50px; padding: 0 0.5%; color: #fff; font-size: 20px; line-height: 25px;}
.index6 .index_more{text-align: center;}
.index6 .index_more a{display: inline-block; width: 170px; height: 50px; line-height: 50px; color: #fff; font-size: 18px; text-align: center;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); background-color: #c43032;}

.index7{width: 100%; padding: 60px 0  30px 0; background-color: #f8f8fa;}
.index7 ul{display: flex; justify-content: space-between; flex-wrap:wrap;}
.index7 ul li{width: 285px; margin-bottom: 35px;}
.index7 ul li .img { width: 100%; height: 235px; overflow: hidden; position: relative; border-radius: 5px; }
.index7 ul li .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.index7 ul li:hover .img img { transform: scale(1.1); }
.index7 ul li .txt{box-sizing: border-box; position: relative; width: 92%; margin: 0 auto; margin-top: -50px; padding: 20px 15px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 9px rgba(0,0,0,0.12); text-align: center; z-index: 1; /* 确保文本在伪元素之上 */}
.index7 ul li .txt h1 {
    margin: 0 0 15px 0; 
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index7 ul li .txt h1 a { color: #333; text-decoration: none; }

/* 修复：将 p 改为 span.date */
.index7 ul li .txt span.date { 
    font-size: 14px; 
    color: #666; 
    display: block;
}
.index7 ul li .txt::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("https://www.knightandbutler.com/images1/index3-bg1.jpg") no-repeat top center; 
    background-size: cover;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}
/* 悬浮交互状态 */
.index7 ul li:hover .txt::before { opacity: 1; }
.index7 ul li:hover .txt { background-color: transparent; } /* 背景变透明，透出伪元素的图片 */
.index7 ul li:hover .txt h1 a { color: #fff; transition: color 0.5s ease; }
.index7 ul li:hover .txt span.date { color: #fff; transition: color 0.5s ease; }

.index9{width: 100%; padding: 60px 0;}
.index9 .title .button a{display: inline-block; font-size: 45px; color: #333; font-family: 宋体;}
.index9 .title .button .swiper-button-prev3{margin-right: 25px;}
.index9swiper .img img{display: block; width: 100%; height: 270px;}

.slider_big{margin-bottom: 20px;}
.slider-for{padding: 15px; background-color: #f4f6f8;}
.slider-for .slick-list{background-color: #fff; box-shadow: 0 0 9px rgba(0,0,0,0.15);}
.slider-for .lis{width: 80%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.slider-for .lis .img{width: 113px;}
.slider-for .lis .img img{width: 113px; height: 113px; border-radius: 50%;}
.slider-for .lis .txt{width: calc(100% - 158px);}
.slider-for .lis .txt h2{margin-bottom: 10px; font-size: 14px;}
.slider-for .lis .txt h2 b{font-size: 18px; font-weight: bold; margin-right: 17px;}
.slider-for .lis .txt .line0{width: 28px; height: 4px; margin-bottom: 10px; background-color: #ae0b2a;}
.slider-for .lis .txt p{font-size: 14px; line-height: 25px; color: #333;}
.slider-nav .img img{display: block; width: 110px; height: 110px; border: 3px solid transparent; cursor: pointer; border-radius: 50%;}
.slider-nav .slick-current .img img{border-color: #cc3333;}

.footer{width: 100%; padding: 60px 0; color: #fff; background-color: #222533;}
.footer .container0{width: 100%; max-width: 1200px;}
.footer .item{display: flex; justify-content: space-between; flex-wrap: wrap;margin-bottom: 10px;}
.footer .item .lis h1{font-size: 16px; letter-spacing:3px; margin-bottom: 20px;}
.footer .item .lis ul li{margin-bottom: 10px;}
.footer .item .lis ul li a{font-size: 12px;}
.footer .item .lis ul li h1{font-size: 18px; color: #fff;}
.footer .item .lis ul li h1 a:hover{color: #c43032!important;}
.footer .item .lis ul li a:hover{color: #c43032!important;}

.footer_bottom{width: 100%; padding: 5px 0; background-color:#171d22; color: #fff;}
.footer_bottom a:hover{color: #c43032;}
.footer_bottom .container0{height: 100%; width: 100%; max-width: 1400px; display: flex; justify-content: space-between; align-items: center;flex-direction: column;border-bottom: 1px solid #a1a1a1;padding: 12px 0;}
.footer_bottom .p2{position: relative;display: block;}
.footer_bottom .p2 a{margin-right: 15px;}
.footer_bottom .p2 i{font-size: 16px; color: #a1b1bc;}
.footer_bottom .p2 i:hover{color: #fff;}
.footer_bottom .p2 .a3 img{display: none; position: absolute; right:0px;  top: -105px; width: 100px; height: 100px;}
.footer_bottom .p2 .a3:hover img{display: block;}
.footer_bottom .p3{position: relative;display: block;}
.footer_bottom .p3 a{margin-right: 15px;}
.footer_bottom .p3 i{font-size: 16px; color: #a1b1bc;}
.footer_bottom .p3 i:hover{color: #fff;}
.footer_bottom .p3 .a3 img{display: none; position: absolute; right:0px;  top: -105px; width: 100px; height: 100px;}
.footer_bottom .p3 .a3:hover img{display: block;}

.footer_bottom .fllj{padding: 15px 0 5px 5px;}
.footer_bottom .flljbox{overflow: hidden;}
.footer_bottom .flljbox p{color: #fff; float: left; line-height: 1.5;}
.footer_bottom .flljbox p a{color: #fff; }
.footer_bottom .flljbox ul{overflow: hidden;float: right; width: calc(100% - 70px);}
.footer_bottom .flljbox li{float: left; line-height: 1.5; padding-left: 20px; display: inline-block;}
.footer_bottom .flljbox li a{color: #fff;}
.footer_bottom .flljbox li a:hover{opacity: .7;}

.dblj{width: 1400px; margin: 0 auto;}
.dblj ul{overflow: hidden;}
.dblj li{float: left;font-size: 12px;line-height: 20px;color: #999;}
.dblj a{color: #999;}
.dblj a:hover{color: #fff;}
.dblj span{padding: 0 10px; color: #171d22;}

.hr_banner .swiper-slide{ height: 560px; display: flex;}
.hr_banner .swiper-slide .img{ width: 60%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat;}
.hr_banner .swiper-slide .nr{ width: 40%; height: 100%; background: #ba3131; display: flex; align-items:baseline; padding: 3%; color: #fff; flex-direction:column; justify-content: flex-end;}
.hr_banner .swiper-slide .nr h2{ font-size: 45px; line-height: 70px; border-bottom: 2px solid #ddd; padding-bottom: 15px; margin-bottom: 15px;}
.hr_banner .swiper-slide .nr p{ font-size: 22px;}
.hr_banner .banner_pagination .swiper-pagination-bullet{width: 12px; height: 12px; margin: 0 8px; opacity: 1; background-color: #fff;}
.hr_banner .banner_pagination .swiper-pagination-bullet-active{background-color: #ae0b2a;}


.hr_title{ color: #ba3131;}
.hr_title h2{ font-size: 28px; font-weight: bold;}
.hr_title b{ width: 65px; height: 5px; background: #ba3131; margin: 10px 0px 3px 0px; display: block;}
.hr_title h3{ font-size: 18px;}

.hr_box{ background: #f2f2f2; padding: 50px 0px;}
.hr_box .nr{ font-size: 20px; line-height: 40px; color: #333; padding: 30px 0px;}

.hr_box1{ background: #fff; padding: 30px 0px;}
.hr_box1 .nr{ padding: 20px 0px;}
.hr_box1 .nr ul{ display: flex;}
.hr_box1 .nr ul li{ width: 33.3%;  border-right: 1px dashed #939393; padding: 15px 5%; font-size: 18px; line-height: 35px;}
.hr_box1 .nr ul li:nth-last-child(1){ border: 0px;}
.hr_box1 .nr ul li p{ display: block; position: relative;}
.hr_box1 .nr ul li p::after{ content: ''; position: absolute; width: 12px; height: 12px; background: #333; left: -20px; top: 10px;}

.hr_box2{ padding: 30px 0px;}
.hr_box2 .nr{ background: #ba3131; color: #fff;}
.hr_box2 .nr ul{ display: flex;}
.hr_box2 .nr ul li{ width: 25%; padding:5% 3%; display: flex; align-items: center;}
.hr_box2 .nr ul li .img{ margin-right: 5px;}
.hr_box2 .nr ul li .nr h2{ font-size: 25px; padding-bottom: 5px;}
.hr_box2 .nr ul li .nr h2 span{ font-size: 30px; padding-right: 2px;}
.hr_box2 .nr ul li .nr h3{ font-size: 18px; color: #dfe3e7; line-height: 26px;}

.hr_box3{ padding: 30px 0px;}
.hr_box3 .nr{ padding-top: 30px;}
.hr_box3 ul{ display: flex;}
.hr_box3 ul li{ margin: 0px 30px;}
.hr_box3 ul li .img{ width: 90%; height: auto; position: relative; margin-bottom: 30px;}
.hr_box3 ul li .img img{ width: 100%; height: 100%;}
.hr_box3 ul li .img::after{ content: ''; position: absolute; width: 100%; height: 100%; background: #ba3131; right: -15px; bottom: -15px; z-index: -1;}
.hr_box3 ul li h2{ font-size: 30px; font-weight: bold; padding-bottom: 15px; color: #ba3131;}
.hr_box3 ul li p{ font-size: 18px; line-height: 32px;}
.hr_box3 ul li .img1{ margin-top: 30px; position: relative;}
.hr_box3 ul li .img1 img{ width: 100%; height: auto;}

.hr_box3 ul li .jinj{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; padding: 5%; color: #fff; font-weight: bold;}


.hr_box4{ padding: 30px 0px;}
.hr_box4 .nr{ padding-top: 30px;}
.hr_box4 ul{ margin: 0px -80px;}
.hr_box4 ul li{ width: 50%; float: left; padding: 0px 80px; margin-bottom: 30px;}
.hr_box4 ul li h2{ background: #f9f7f7; display: flex; align-items: center;}
.hr_box4 ul li h2 img{ width: 130px; height: 120px;}
.hr_box4 ul li h2 span{ font-size: 18px; color: #333; line-height: 28px; padding-left: 20px;}
.hr_box4 ul li h3{ height: 50px; line-height: 50px; padding-left: 20px; color: #fff; font-weight: bold; font-size: 24px; background-image: linear-gradient(to right, #b51818 , #fff);}

.hr_box4 dl dd{ float: left; width: 33.3%; border-left: 2px dashed #ccc; padding:0px 20px;}
.hr_box4 dl dd h2{ font-size: 20px; font-weight: bold; margin-bottom: 35px;}
.hr_box4 dl dd h2:nth-last-child(1){ margin-bottom: 0px;}
.hr_box4 dl dd p{ font-weight: normal; font-size: 16px; padding-top: 10px;}

.hr_box5{ padding: 30px 0px;}
.hr_box5 .nr{ padding-top: 30px;}
.hr_box5 ul li{ display: flex; align-items: center; font-size: 22px; margin-bottom: 15px;}
.hr_box5 ul li img{ margin-right: 20px;}
.hr_box5 ul li h2{ font-weight: bold; padding-right: 30px;}

.hr_box6{ padding: 30px 0px;}
.hr_box6 .nr{ padding-top: 30px;}
.hr_box6 .nr ul{ display: flex;}
.hr_box6 .nr ul li{ width: 160px; margin-right: 120px; box-sizing: border-box; position: relative; text-align: center; font-size: 16px; color: #333;}
.hr_box6 .nr ul li::after{ position: absolute; background: url("https://www.knightandbutler.com/images1/zsjz_55.jpg") no-repeat; width: 47px; height: 27px; content: ''; top: 10px; right: -80px;}
.hr_box6 .nr ul li:nth-last-child(1){ margin-right: 0px;}
.hr_box6 .nr ul li:nth-last-child(1)::after{ display: none;}
.hr_box6 .nr ul li h2{ width: 100%; height: 50px; line-height: 50px; background: #bb3132; text-align: center; color: #fff; font-size: 18px; font-weight: bold; border-radius: 10px; margin-bottom: 15px;}


.zxbm1{ background: url("https://www.knightandbutler.com/images1/20190910_05.png") no-repeat; background-size: cover; max-width: 1200px; margin: 10px auto 50px auto; padding:35px 25px; font-family: "微软雅黑";}
.zxbm1 .bt{ text-align: center;}
.zxbm1 .bt h2{ font-size: 18px; color: #fff; line-height: 24px;}
.zxbm1 .bt b{ display: block; max-width: 480px; width: 60%; border-bottom: 1px solid #fff; margin: 0px auto; position: relative; padding-top: 12px;}
.zxbm1 .bt b::after{ position: absolute; content: ''; top: 8px; left: 50%; margin-left: -10px; width: 10px; height: 10px; background: #0066cc;}
.zxbm1 ul{ padding-top: 25px; text-align: center;}
.zxbm1 ul li{ margin-bottom: 10px;}
.zxbm1 ul li .tb_txt{ width: 100%; max-width: 260px; border: 1px solid #ddd; height: 35px; line-height: 35px; padding: 0px 10px; font-size: 14px; box-sizing: border-box;}
.zxbm1 ul li .tb_txt2{ width:174px; max-width: 260px; border: 1px solid #ddd; height: 35px; line-height: 35px; padding: 0px 10px; font-size: 14px; box-sizing: border-box;}
.zxbm1 ul li .tb_btn{ width: 100%; max-width: 260px; border: 1px solid #ddd; height: 35px; line-height: 35px; background: #ab0101; font-size: 14px; border: 0px; color: #fff;}
.zxbm1 ul li img{ vertical-align: middle; height: 35px;}