@charset "utf-8";

/* CSS Document */

    

        /* 通用TAB内容隐藏样式 */

        .tab-content {

            display: none !important;

        }

        .tab-content.active {

            display: flex !important;

        }



        /* 整体容器 - 适配手机端，自适应屏幕 */

        .case-container {

            display: flex;

            flex-direction: column; /* 手机端默认上下布局 */

            width: 100%;

            max-width: 100%;

            margin: 0 auto;

            border: 1px solid #eee;

            overflow: hidden;

        }



        /* 左侧菜单区域 - 手机端隐藏，大屏显示 */

        .case-menu {

            display: none;

            flex-wrap: wrap;

            width: 100%;

        }



        /* 菜单选项样式 */

        .menu-item {

            width: 50%; /* 大屏2列布局 */

            height: 120px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            color: #333;

            text-align: center;

            cursor: pointer;

            transition: all 0.3s ease;

            padding: 5px;

            position: relative; /* 添加相对定位 */

            overflow: hidden; /* 隐藏溢出的伪元素 */

        }



        /* 激活状态 */

        .menu-item.active {

            background-color: #16446F;

            color: #fff;

        }



        /* 图标样式 - 适配Font Awesome图标 */

        .menu-icon {

            width: 36px;

            height: 36px;

            border-radius: 50%;

            background-color: #16446F;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 6px;

            z-index: 2;

        }



        .menu-item.active .menu-icon {

            background-color: #fff;

        }



        /* 图标字体样式调整 */

        .menu-icon i {

            color: #fff;

            font-style: normal;

            font-size: 18px;

            /* 图标居中强化 */

            display: inline-block;

            line-height: 1;

        }



        .menu-item.active .menu-icon i {

            color: #16446F;

        }



        /* 文字样式 */

        .menu-text {

            font-size: 13px;

            margin-bottom: 3px;

            z-index: 2;

        }



        .menu-eng {

            font-size: 9px;

            color: #999;

            z-index: 2;

        }



        .menu-item.active .menu-eng {

            color: #fff;

        }



        /* 菜单交互效果 */

        .menu-item:not(.active):hover {

            background-color: #f5f5f5;

        }

        

        .menu-item:not(.active):active {

            background-color: #e9e9e9;

        }



        /* 新增：菜单选项hover动画效果 */

        .menu-item::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            width: 0;

            height: 0;

            border-radius: 50%;

            background-color: rgba(0, 136, 72, 0.1);

            transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, left 0.6s ease;

            z-index: 1;

        }



        .menu-item:hover::before {

            width: 200px;

            height: 200px;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }



        /* 右侧内容区域 - 适配手机端轮播 */

        .case-content {

            width: 100%;

            position: relative;

            overflow: hidden;

            height: 280px; /* 手机端高度 */

        }



        /* 轮播箭头样式 */

        .carousel-arrow {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            width: 36px;

            height: 36px;

            border-radius: 50%;

            background-color: rgba(0,0,0,0.5);

            color: #fff;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            z-index: 10;

            font-size: 18px;

            transition: background-color 0.3s ease;

            opacity: 0; /* 默认隐藏 */

            visibility: hidden; /* 默认隐藏 */

            transition: all 0.3s ease; /* 过渡效果 */

        }



        /* 鼠标悬停时显示箭头 */

        .case-content:hover .carousel-arrow {

            opacity: 1;

            visibility: visible;

        }



        .carousel-arrow:hover {

            background-color: rgba(0,136,72,0.8);

        }



        .arrow-left {

            left: 10px;

        }



        .arrow-right {

            right: 10px;

        }



        /* 内容项样式 */

        .content-item {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            display: none;

            opacity: 0; /* 初始透明度为0 */

            transition: opacity 0.5s ease; /* 透明度过渡 */

        }



        .content-item.active {

            display: block;

            opacity: 1; /* 激活时透明度为1 */

        }



        /* 背景图片 */

        .content-bg {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.5s ease;

        }



        .content-item:hover .content-bg {

            transform: scale(1.05);

        }



        /* 内容遮罩层 */

        .content-mask {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 15px 12px;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	color: #fff;
	z-index: 2;
	transform: translateY(10px); /* 初始偏移 */
	opacity: 0; /* 初始透明 */
	transition: transform 0.3s ease, opacity 0.3s ease; /* 过渡效果 */
	font-size: 14px;
	line-height: 28px;

        }



        /* 鼠标悬停时显示遮罩层动画 */

        .content-item:hover .content-mask {

            transform: translateY(0);

            opacity: 1;

        }



        /* 内容文字样式 */

        .content-title {

            font-size: 16px;

            margin-bottom: 6px;

            font-weight: bold;

        }



        .content-desc {
	font-size: 14px;
	line-height: 1.6;

        }



        /* 轮播指示器 */

        .carousel-indicators {

            position: absolute;

            bottom: 15px;

            left: 50%;

            transform: translateX(-50%);

            display: flex;

            gap: 8px;

            z-index: 10;

            opacity: 0; /* 默认隐藏 */

            visibility: hidden; /* 默认隐藏 */

            transition: all 0.3s ease; /* 过渡效果 */

        }



        /* 鼠标悬停时显示指示器 */

        .case-content:hover .carousel-indicators {

            opacity: 1;

            visibility: visible;

        }



        .indicator-dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background-color: rgba(255,255,255,0.5);

            cursor: pointer;

            transition: all 0.3s ease; /* 增加过渡效果 */

        }



        .indicator-dot.active {

            background-color: #16446F;

            width: 20px;

            border-radius: 4px;

        }



        /* 指示器hover效果 */

        .indicator-dot:hover {

            background-color: rgba(255,255,255,0.8);

        }



        /* 媒体查询 - 大屏适配 */

        @media (min-width: 768px) {

            .case-container {

                flex-direction: row;

                max-width: 1200px;

            }

            .case-menu {

                display: flex;

                width: 300px;

            }

            .case-content {

                flex: 1;

                height: 360px;

            }

            .carousel-arrow, .carousel-indicators {

                display: none;

            }

            .content-mask {

                padding: 20px;

                transform: translateY(0); /* 大屏下遮罩层默认显示 */

                opacity: 1; /* 大屏下遮罩层默认不透明 */

            }

            .content-title {

                font-size: 18px;

            }

            .content-desc {

                font-size: 14px;

                line-height: 1.5;

            }

        }



        /* 优势区域 */

        .advantage-section {

            background: #f8f8f8;

            padding: 50px 0;

        }

        .advantage-title {

            text-align: center;

            font-size: 24px;

            font-weight: bold;

            color: #333;

            margin-bottom: 10px;

        }

        .advantage-subtitle {

            text-align: center;

            font-size: 14px;

            color: #666;

            margin-bottom: 40px;

        }

        .advantage-tabs {

            display: flex;

            justify-content: center;

            gap: 10px;

            margin-bottom: 30px;

            flex-wrap: wrap;

        }

     .advantage-tab {
	padding: 10px 20px;
	background: #fff;
	border: 1px solid #16446F;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	
	color: #333;
	transition: all 0.3s ease; /* 新增过渡效果 */

        }

    .advantage-tab.active {
	padding: 10px 20px;
	background: #16446F;
	color: #fff;
	border-color: #16446F;
	transform: translateY(-3px); /* 激活时轻微上移 */
	box-shadow: 0 4px 8px rgba(139, 161, 63, 0.2); /* 激活时阴影 */

        }

        /* 优势TAB hover效果 */

        .advantage-tab:hover:not(.active) {

            border-color: #f39c12;

            color: #f39c12;

            transform: translateY(-2px);

            box-shadow: 0 4px 8px rgba(139, 161, 63, 0.1);

        }

        .advantage-tab i {

            font-size: 16px;

        }

        .advantage-content {
	background: #fff;
	border-radius: 4px;
	display: flex;
	gap: 80px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 新增轻微阴影 */
	transition: all 0.5s ease; /* 新增内容切换过渡 */
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	 font-size: 14px;

            color: #666;

            line-height: 1.8;
	

        }

        .advantage-text {
	max-width: 415px;

        }

        .advantage-text h3 {
	font-size: 21px;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #16446F;

        }

        .advantage-text ul {

            list-style: none;

        }

        .advantage-text li {

            font-size: 16px;

            color: #666;

            line-height: 2;

            margin-bottom: 10px;

            padding-left: 20px;

            position: relative;

            transition: all 0.2s ease; /* 列表项hover过渡 */

        }

        .advantage-text li::before {

            content: "▶";

            position: absolute;

            left: 0;
			  line-height: 1.8;

            color: #16446F;

            font-size: 24px;

            transition: transform 0.2s ease; /* 箭头hover动画 */

        }

        /* 列表项hover效果 */

        .advantage-text li:hover {

            color: #229954;

            padding-left: 25px;

        }

        .advantage-text li:hover::before {

            transform: scale(1.2);

            color: #16446F;

        }

        .advantage-img {

            width: 100%;

            max-width: 600px;

            border-radius: 4px;

            transition: transform 0.5s ease; /* 图片hover缩放 */

            box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 图片阴影 */

        }

        /* 图片hover效果 */

        .advantage-img:hover {

            transform: scale(1.02);

        }

        /* 优势容器保证宽度 */

        .advantage-content-container {

            width: 100%;

            display: flex;

            justify-content: center;

        }



        /* 定制流程区域 */

        .process-section {
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 30px;
	padding-left: 0;

        }

        .process-title {

            text-align: center;

            font-size: 24px;

            font-weight: bold;

            color: #333;

            margin-bottom: 10px;

        }

        .process-subtitle {

            text-align: center;

            font-size: 14px;

            color: #666;

            margin-bottom: 40px;

        }

        .process-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

            gap: 20px;

            text-align: center;

        }

        .process-item {

            border-radius: 8px;

            transition: all 0.3s ease; /* 新增过渡效果 */

            padding-top: 30px;

            padding-right: 10px;

            padding-bottom: 30px;

            padding-left: 10px;

        }

        /* 流程项hover效果 */

        .process-item:hover {

            background-color: #f8f8f8;

            transform: translateY(-5px);

            box-shadow: 0 8px 15px rgba(0,136,72,0.1);

        }

        .process-item i {
	font-size: 48px;
	color: #16446F;
	margin-bottom: 10px;
	display: inline-block;
	transition: all 0.3s ease; /* 图标动画 */

        }

        /* 图标hover效果 */

        .process-item:hover i {

            color: #16446F;

            transform: rotate(5deg) scale(1.2);

        }

        .process-item h4 {

            font-size: 18px;

            color: #333;

            margin-bottom: 5px;

        }

        .process-item p {

            font-size: 14px;

            color: #444;

        }





/* home project */





    .hp-partner-section {

      width: 100%;

      padding: 20px 0;

    }

    .hp-partner-wrap {

      max-width: 1200px;

      margin: 0 auto;

    }

    .hp-partner-title {

      font-size: 24px;

      color: #333;

      margin-bottom: 30px;

      font-weight: 600;

      text-align: center;

    }

    /* 轮播外层容器（独立命名） */

    .hp-swiper-outer {

      position: relative;

      width: 100%;

      padding: 0 30px; /* 给箭头留空间 */

      margin: 0 auto;

    }

    /* 轮播核心容器（独立样式） */

    .hp-swiper-container {

      position: relative;

      width: 100%;

      overflow: hidden;

      padding: 20px 0;

    }

    .hp-swiper-wrapper {

      display: flex;

      transition: transform 0.3s ease;

    }

    .hp-swiper-slide {

      flex-shrink: 0;

      width: 189px !important;

      height: 113px;

      margin-right: 20px;

    }

    /* 图片容器（独立样式） */

    .hp-lazy-wrap {

      display: block;

      width: 100%;

      height: 100%;

      position: relative;

      background-color: #f5f5f5;

      border-radius: 4px;

    }

    .hp-lazy-wrap img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      display: block;

      border: none;

      outline: none;

      opacity: 0;

      transition: opacity 0.3s ease;

    }

    .hp-lazy-wrap img.hp-loaded {

      opacity: 1;

    }

    /* 箭头按钮（完全独立的类名和样式） */

    .hp-swiper-next,

    .hp-swiper-prev {

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      width: 40px;

      height: 40px;

      background-color: rgba(0, 0, 0, 0.1);

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      z-index: 9999; /* 高z-index确保显示，且不影响其他元素 */

      transition: background-color 0.3s;

      margin-top: -10px;

      border: none;

      outline: none;

    }

    .hp-swiper-next:hover,

    .hp-swiper-prev:hover {

      background-color: rgba(0, 0, 0, 0.3);

    }

    .hp-swiper-prev {

      left: 0;

    }

    .hp-swiper-next {

      right: 0;

    }

    .hp-icon {

      color: #333;

      font-size: 18px;

    }

    /* 响应式适配（仅作用于当前轮播） */

    @media (max-width: 768px) {

      .hp-swiper-slide {

        width: 150px !important;

        height: 90px;

      }

      .hp-swiper-outer {

        padding: 0 20px;

      }

      .hp-swiper-prev {

        left: 0;

      }

      .hp-swiper-next {

        right: 0;

      }

    }









    /* 响应式适配 */

    @media (max-width: 768px) {

     

      .project-button-prev {

        left: 0;

      }

      .project-button-next {

        right: 0;

      }

    }





        /* 响应式适配 - 仅在小屏幕才改为上下 */

        @media (max-width: 768px) {

            .case-display.active, .advantage-content.active {

                flex-direction: column;

            }

            .case-title, .advantage-title, .process-title {

                font-size: 20px;

            }

            

            .process-item {

                border-radius: 8px;

                transition: all 0.3s ease; /* 新增过渡效果 */

                padding-top: 20px;

                padding-right: 10px;

                padding-bottom:20px;

                padding-left: 10px;

            }



            /* 四大优势手机端样式修改 */

            .advantage-tabs {

                flex-wrap: nowrap; /* 取消换行，强制一行显示 */

                width: 100%; /* 占满容器宽度 */

                gap: 2px; /* 缩小间距适配手机 */

                overflow-x: auto; /* 防止极端情况溢出（可选） */

                padding: 0 5px;

            }

            .advantage-tab {

                flex: 1; /* 四个选项等分宽度 */

                padding: 10px 5px; /* 缩小内边距 */

                justify-content: center; /* 内容居中 */

                gap: 5px; /* 缩小图标和文字间距 */

                font-size: 12px; /* 适配手机字体大小 */

            }

            .advantage-tab small {

                display: none !important; /* 隐藏英文标题 */

            }
			
			
			.in-about-con {

                display: none !important; /* 隐藏英文标题 */

            }
			

        }


.case-menu .no-click {
    pointer-events: none; /* 核心属性：禁止元素接收任何鼠标/触摸点击事件 */
    cursor: default; /* 鼠标悬浮显示默认箭头，而非手型，提示用户该元素不可点击 */
    /* 保留原有样式，确保与其他TAB项一致 */
    opacity: 1; /* 可选：如需淡化展示，可设置 opacity: 0.8; */
}