/* CSS Document */

.box{ width:100%; height:2400px;}
ul{ margin:0; padding:0;}
header{ width:100%; height:62px;  top:0; z-index:999999999;position:fixed; display:grid; grid-template-columns:1fr 3fr 1fr; grid-template-rows:62px; box-shadow:0px -10px 10px #CCCCCC; background:rgba(0,0,0,0.5)}
header .logo{  height:62px; display:flex; justify-content:center;align-items:center;}
header .logo img{ width:70%; height:auto}

.slow-color-change {
    color: #fff; /* 初始颜色 */
    transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */
}
.slow-color-change:hover {
    color:#0CF; /* 鼠标悬停时的颜色 */
}
.slow-color-change-b:hover{ color:#09F}

header .menu{ height:62px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; align-items:center;justify-content:center}
header .menu .menu_li{text-shadow: #000 1px 1px 1px; height:62px; line-height:62px;}
.dropdown{ position:relative; display:block; }
        /* 下拉菜单 (二级) 容器 */
.dropdown-menu {
            position: absolute;
            top: 92%;
            left: 0;
            min-width: 220px;
             background:rgba(0,0,0,0.5);
            border-radius: 10px;
            box-shadow: 0 18px 35px -12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05);
            padding: 0.7rem 0;
            list-style: none;
            visibility: hidden;
            opacity: 0;
            transform: translateY(-8px);
            transition: visibility 0.2s, opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            z-index: 1050;
            backdrop-filter: blur(0px);
            border: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown-menu li{ height:32px; line-height:32px; font-size:14px; border-bottom:1px #333 solid; padding-left:10px;}
.dropdown-menu li a{ color:#FFF; transition: color 1s ease; display:block}
.dropdown-menu li a:hover{ color:#0CF}
.dropdown-menu li:last-child {
    border-bottom:none;
}

        /* 普通下拉箭头 (向下) */
.dropdown > a::after {
            content: "⌵";
            font-size: 0.8rem;
            font-weight: 500;
            margin-left: 5px;
            transition: transform 0.2s;
            display: inline-block;
			text-align:center
			
			
						
        }

        .dropdown > a:hover::after {
            transform: rotate(180deg);
        }		
        /* 悬停显示二级菜单 */
.dropdown:hover > .dropdown-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(4px);
        }
				
header a{ font-size:16px; color:#FFF; text-decoration:none; padding:0 30px;}

@media screen and (max-width:1550px){
		header .menu{ height:62px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:space-around; align-items:center;justify-content:space-around}
		header a{ font-size:16px; color:#FFF; text-decoration:none; padding:0;}
		header .logo img{ width:70%; height:auto}
}

@media screen and (max-width:1700px){
		header .menu{ height:62px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:space-around; align-items:center;justify-content:space-around}
		header a{ font-size:16px; color:#FFF; text-decoration:none; padding:0;}

}	
	
header .web_info{  height:62px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; align-items:center;justify-content:center; color:#FFF}
header .web_ico{height:62px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; align-items:center;justify-content:end; color:#FFF; display:none}
.bigimg{ width:100%;}	
.bigimg img{ width:100%;object-fit:cover}	

.bigimg_m{ width:100%; display:none}
.bigimg_m img{ width:100%;object-fit:cover}	






        * {
            margin: 0;
            padding: 0;
            
        }

        /* 让页面足够长，方便滚动 */
        body {
            
            /* 初始背景色 */
            background-color: #ffffff;
            /* 平滑过渡效果，核心代码 */
            transition: background-color 0.8s ease;
        }

        /* 提示文字样式 */
        .tip {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            color: #333;
            background: rgba(255,255,255,0.8);
            padding: 10px 20px;
            border-radius: 8px;
        }
		




.custom-prev-button, .custom-next-button, .custom-pagination {
    color: #fff; /* 修改箭头背景颜色 */
}
.swiper-button-next, .swiper-button-prev ,.swiper-pagination{ color:#fff}

.swiper-slide .top_title{ position:absolute; font-size:52px;top: 40%;
  left: 50%; color:#FFF; font-weight:600;
  transform: translate(-50%, -50%);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index:1049}
.swiper-slide .top_btn{ position:absolute; bottom:20%; width:180px; height:50px; text-align:center; line-height:50px; border:1px #FFFFFF solid; border-radius:5px; z-index:99999999999; font-size:16px;left: 50%;
transform: translate(-50%, -50%); background:url(../images/white.fw.png)}
.swiper-slide .top_btn a{ display:block; color:#FFF; text-decoration:none}
@keyframes colorChange {
    0% {
        color: red; /* 初始颜色 */
    }
    50% {
        color: blue; /* 中间颜色 */
    }
    100% {
        color: green; /* 最终颜色 */
    }
}

.text-animation {
    animation: colorChange 5s infinite; /* 动画名称、持续时间、循环次数 */
}

.rmenu{ width:40%; height:100%; background:#999999; position:fixed; right:-40%; z-index:888;  background:url(../images/mbg.fw.png); z-index:9999999999; top:0}
.rmenu ul{ margin-top:10px; margin-left:15px; }
.rmenu ul li{ width:130px; height:38px; font-size:16px; line-height:38px; border-bottom:1px #999 solid; list-style-type:none}
.rmenu ul li a{ color:#fff; text-decoration:none}
.rmenu .close{ height:40px; margin-top:90px;margin-left:15px;}

.main_index{ width:90%; margin:auto; display:grid; grid-template-columns:2fr 1fr;  }
.main_index .main_left{}
.main_index .main_left img{ width:100%;border-radius:10px;}
.main_index .main_right{ margin:auto; display:grid;grid-template-columns:1fr 4fr; }
.main_index .main_right h3{ font-size:26px; line-height:40px; color:#FFF}
.main_index .main_right .description{ font-size:16px; line-height:30px; color:#FFF; margin-top:30px;}
.main_index .main_right .buttom{ width:40%; height:50px;  text-align:center;  margin:auto; margin-top:50px;}
.main_index .main_right .buttom a{ display:block; color:#FFF; text-decoration:none; line-height:50px; transition: color 1s ease;border:1px #FFFFFF solid; border-radius:5px;}
.main_index .main_right .buttom a:hover{color:#FF0;border:1px #ff0 solid;border-radius:5px;}

.main_index2{ width:90%; margin:auto; display:grid; grid-template-columns:1fr 2fr; }
.main_index2 .main_left_x{margin:auto; display:grid;grid-template-columns:4fr 1fr; }
.main_index2 .main_left_x h3{ font-size:26px; line-height:40px; color:#FFF}
.main_index2 .main_left_x .description{ font-size:16px; line-height:30px; color:#FFF; margin-top:30px;}
.main_index2 .main_left_x .buttom{ width:40%; height:50px;  text-align:center; margin:auto; margin-top:50px;}
.main_index2 .main_left_x .buttom a{ display:block; color:#FFF; text-decoration:none; line-height:50px; border-radius:5px; transition: color 1s ease; ;border:1px #fff solid;}
.main_index2 .main_left_x .buttom a:hover{color:#FF0;border-radius:5px;border:1px #ff0 solid;}
.main_index2 .main_right_x{}
.main_index2 .main_right_x img{ width:100%; border-radius:10px;}

.main_index_m{width:94%; margin:auto; display:none}
.main_index_m .main_img{ width:100%;}
.main_index_m .main_img img{ width:100%;border-radius:10px;}



.main_index_m h3{ font-size:22px; line-height:50px; color:#FFF; text-align:center}
.main_index_m .description{ font-size:16px; line-height:30px; color:#FFF; width:90%; margin:auto; margin-top:10px;}
.main_index_m .buttom{ width:30%; height:40px;  text-align:center; margin:auto; margin-top:30px;}
.main_index_m .buttom a{ display:block; color:#FFF; text-decoration:none; line-height:40px; border-radius:5px; transition: color 1s ease; ;border:1px #fff solid;}
.main_index_m .buttom a:hover{color:#FF0;border-radius:5px;border:1px #ff0 solid;}


.image-brighten {
  transition: filter 0.5s ease; /* 平滑过渡效果 */
}

.image-brighten:hover {
  filter: brightness(0.6); /* 鼠标悬停时图片亮度增加到150% */
}


.i_title_box{ display:grid; grid-template-columns:1fr 3fr 1fr;grid-template-rows:1fr; }
.i_title_box .i_title{ display:grid; grid-auto-flow: column;   align-content: center;     justify-content: center; /* 确保标题在顶部 */}
.i_title_box .i_title img{ width:100%}


.index_content{ width:100%;  background:#FFF; padding:60px 0;font-size:30px; line-height:42px;}
.index_content .i_content{ width:80%; margin:auto; display:grid; grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr); grid-gap:20px;}
.index_content .i_content img{ width:100%;object-fit:cover}
.index_content .i_content .one_img{ position:relative}
.index_content .i_content .one_img .txt{ position:absolute; bottom:13%; right:5%; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index:999999}

.index_content .i_content .two_img{ position:relative}
.index_content .i_content .two_img .txt{ position:absolute; bottom:13%; left:5%; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.index_content .i_content .three_img{ position:relative}
.index_content .i_content .three_img .txt{ position:absolute; bottom:13%; left:5%;  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.index_content .i_content .four_img{ position:relative}
.index_content .i_content .four_img .txt{ position:absolute; bottom:13%; left:5%;  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.index_content .i_content  a{ color:#fff;transition: color 0.9s ease; text-decoration:none; }
.index_content .i_content  a:hover{ color:#FF0}

.index_news{ width:100%; padding:100px 0;}
.index_news .news_box{ width:80%; margin:auto;transition: color 0.5s ease; }
.index_news .news_box .news_tit{ font-size:20px; line-height:50px; text-align:center; color:#FFF}
.index_news .news_box .news_info{ font-size:14px; line-height:20px; text-align:center; color:#FFF}
.index_news .news_box .news_list{ display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr; grid-gap:20px; margin-top:50px; }
.index_news .news_box .news_list .pic{}
.index_news .news_box .news_list .pic img{ width:100%; object-fit:cover}
.index_news .news_box .news_list .pic .n_txt{ height:36px; text-align:center; font-size:16px; line-height:30px;}
.index_news .news_box .news_list .pic a{ color:#FFF; text-decoration:none; transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */}
.index_news .news_box .news_list .pic a:hover{ color:#FF0}


.pc_footer{ width:100%;  background:#F6F7F8; padding:50px 0; padding-bottom:0}
.pc_footer .footer_menu{ display:grid;grid;grid-template-columns:3fr 3fr;grid-template-rows:1fr; width:80%; margin:auto}
.pc_footer .footer_menu .left{display:flex; flex-direction:row; flex-wrap:wrap; align-content:space-around; align-items:center;justify-content:space-around}
.pc_footer .footer_menu .left a{ color:#333; text-decoration:none;transition: color 0.5s ease; }
.pc_footer .footer_menu .left a:hover{ color:#3CF}
.pc_footer .footer_com{ display:grid;grid;grid-template-columns:1fr 2fr 3fr;grid-template-rows:1fr; width:80%; margin:auto; padding:40px 0; color:#aaa}
.pc_footer .footer_com .left_logo{ display:flex; justify-content:center}
.pc_footer .footer_com .left_logo img{ width:70%;}
.pc_footer .footer_com .mid_com{}
.pc_footer .footer_com .right_ico{ display:grid; grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;grid-gap:10px;}
.pc_footer .footer_com .right_ico img{ width:50px;}
.pc_footer .footer_com .right_ico .ico_list{ display:flex;flex-direction:row; flex-wrap:wrap; align-content:space-around; align-items:center;justify-content:space-around;align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-end; gap:10px;}
.pc_footer .footer_com .right_ico .ico_list .wx{ position:relative; cursor:pointer}
.pc_footer .footer_com .right_ico .ico_list .wx .wx_pic{ width:130px; height:130px; position:absolute; top:-130px; left:-40px; display:none;  z-index:9999}
.pc_footer .footer_com .right_ico .ico_list .wx .wx_pic img{ width:100%; height:100%}
.pc_footer .footer_com .right_ico .ico_list .wx:hover .wx_pic{ display:block}
.pc_footer .footer_copyright{ width:75%; border-top:1px #eee solid; font-size:14px; line-height:60px; color:#666; margin:auto}


.m_footer{width:100%;  background:#F6F7F8; padding:40px 0; padding-bottom:0; display:none}

.m_footer .right_ico{ display:grid; grid-template-columns:repeat(6,1fr);grid-template-rows:1fr;grid-gap:10px;}
.m_footer  img{ width:50px;}
.m_footer .ico_list{ display:flex;flex-direction:row; flex-wrap:wrap; align-content:space-around; align-items:center;justify-content:space-around;align-content: flex-start;
    align-items: flex-start; justify-content: center; gap:10px; grid-template-columns:repeat(6,1fr);grid-template-rows:1fr;}
.m_footer .ico_list .wx{ position:relative; cursor:pointer}
.m_footer .ico_list .wx .wx_pic{ width:130px; height:130px; position:absolute; top:-130px; left:-40px; display:none;  z-index:9999}
.m_footer .ico_list .wx .wx_pic img{ width:100%; height:100%}
.m_footer .ico_list .wx:hover .wx_pic{ display:block}
.m_footer .footer_copyright{ width:95%; border-top:1px #eee solid; font-size:14px; line-height:60px; color:#666; margin:auto; text-align:center; margin-top:30px;}


.list_bigimg{ width:100%; position:relative}
.list_bigimg img{ width:100%}
.list_bigimg .big_img_title{ position:absolute; font-size:46px;top: 50%;
  left: 50%; color:#FFF; font-weight:600;
  transform: translate(-50%, -50%);text-shadow: #000 1px 1px 1px; z-index:1049}

.list_box{ width:72%; margin:auto; margin-top:50px; display:grid; grid-template-columns:1fr 380px ;grid-template-rows:1fr;grid-gap:20px; margin-bottom:50px;}
.list_box .list_left{ background:#FFF; border-radius:8px; padding:50px;box-shadow: 0 0 30px rgb(0 0 0 / 7%);}
.list_box .list_left .current{ font-size:14px; line-height:30px; border-bottom:1px #eee solid}
.list_box .list_left .current a{ color:#333; text-decoration:none;transition: color 0.5s ease; }
.list_box .list_left .current a:hover{ color:#0CF}
.list_box .list_left h1{ font-size:24px; line-height:50px;border-bottom:1px #eee solid; }
.list_box .list_left .list_boxs{ display:grid;grid-template-columns: 1fr 1fr 1fr ;grid-gap:20px; margin-top:30px;}
.list_box .list_left .list_boxs img{ width:100%}
.list_box .list_left .list_boxs .pic img{ width:100%; object-fit:cover; border-radius:3px;}
.list_box .list_left .list_boxs .pic .n_txt{ text-align:center; font-size:14px; line-height:26px;}
.list_box .list_left .list_boxs .pic a{ color:#333; text-decoration:none; transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */}
.list_box .list_left .list_boxs .pic a:hover{ color:#0CF}
.list_box .list_left .list_page{ height:50px; border-top:1px #eee solid; margin-top:20px;}


.list_box .list_left .artical_boxs{ font-size:16px; line-height:34px; color:#333; padding:40px 0; }
.list_box .list_left .artical_boxs img{max-width: 100%;
    height: auto; /* 保持图片的原始宽高比 */}

.list_box .list_left .list_pandv{ height:60px; border-top:1px #eee solid; margin-top:30px; padding-top:20px;}
.list_box .list_left .list_pandv li{ font-size:14px; line-height:30px;}
.list_box .list_left .list_pandv li a{ color:#666;text-decoration:none; transition: color 0.5s ease;}
.list_box .list_left .list_pandv li a:hover{ color:#09C}

.list_box .list_right{}
.list_box .list_right .search{margin-bottom: 30px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%); position:relative}
.list_box .list_right .search .ser-txt{background: #f7f7f7 none repeat scroll 0% 0;
    border: 0 none;
    height: 54px;
    position: relative;
	
    width: 100%;}	
	
	.list_box .list_right .search button{background: #0368cf;
    border: 0 none;
    color: #fff;
    font-size: 18px;
    padding: 17px 20px;
    position: absolute;
    right: 20px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    outline: none;}
	
.list_box .list_right .dt_title{
	    border-bottom: 5px double #0368cf;
    display: inline-block;
    line-height: 17px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative; font-size:20px}	
.list_box .list_right .dt_title::before{content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid #0368cf;
    border-radius: 50%;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    margin-top: 17px; }	
.list_box .list_right .dt_title::after{
	content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid #0368cf;
    border-radius: 50%;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    margin-top: 17px;    animation-name: move_title_bg1;}	
	
.list_box .list_right .dt_title::before {
    left: 0;
    animation-name: move_title_bg1;	color:#999999; font-size:14px
}
.list_box .list_right .dt_title::after{
    right: 0;
    animation-name: move_title_bg2;
}
@keyframes move_title_bg1 {
    from {	
		left:0;		
    }
    to {
		left:100%;
    }
}

@keyframes move_title_bg2 {
    from {	
		right:0;		
    }
    to {
		right:100%;
    }
}


	
.list_box .list_right .zx_dt{margin-bottom: 30px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);}
ul{ margin:0; padding:0; list-style-type:none}	
.list_box .list_right .zx_dt li{ font-size:14px; line-height:20px; margin-bottom:10px; padding-bottom:10px; position:relative; padding-left:18px;list-style: none; /* 移除默认的列表样式 */}
.list_box .list_right .zx_dt li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.list_box .list_right .zx_dt li:before{content: "\f105";
    font-family: FontAwesome !important;
    font-size: 18px;
    left: 0;
    position: absolute;color:#999999; font-size:14px
}
.list_box .list_right .zx_dt li a{ color:#333; text-decoration:none; transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */}
.list_box .list_right .zx_dt li a:hover{ color:#0CF}

.list_box .list_right .zx_video{margin-bottom: 30px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);}

/*右边产品推荐*/
.list_box .list_right .zx_video .v_list{ width:100%; display:grid; grid-template-columns:2fr 5fr;  grid-template-rows:1fr; margin-bottom:20px; grid-gap:20px;    grid-auto-flow: column;
    align-content: center;
    justify-content: space-around;
    align-items: stretch;
    justify-items: start;}
.list_box .list_right .zx_video .v_list .pic{}
.list_box .list_right .zx_video .v_list .pic img{ width:100%;border-radius:5px;}
.list_box .list_right .zx_video .v_list .txt{ font-size:14px; line-height:22px;}
.list_box .list_right .zx_video .v_list .txt a{ color:#555; text-decoration:none;transition: color 0.5s ease;}
.list_box .list_right .zx_video .v_list .txt a:hover{ color:#39F}


/*左边手机产品推荐*/
.list_box_m{ width:86%; margin:auto;margin-top: 30px; margin-bottom:30px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);}
	
.list_box_m .list_box_pro{ width:100%; display:grid; grid-template-columns:2fr 5fr;  grid-template-rows:1fr; margin-bottom:20px; grid-gap:20px;    grid-auto-flow: column;
    align-content: center;
    justify-content: space-around;
    align-items: stretch;
    justify-items: start; }
.list_box_m .list_box_pro .pic{}
.list_box_m .list_box_pro .pic img{ width:100%;border-radius:5px;}
.list_box_m .list_box_pro .txt{ font-size:14px; line-height:22px;}
.list_box_m .list_box_pro .txt a{ color:#555; text-decoration:none;transition: color 0.5s ease;}
.list_box_m .list_box_pro .txt a:hover{ color:#39F}



.list_box .list_right .zx_video_list{margin-bottom: 30px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);}
	
.list_box .list_right .zx_video_list .video_list{ width:100%; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:3fr; margin-bottom:20px; grid-gap:20px; }
	
.list_box .list_right .zx_video_list .video_list .vlist{}
.list_box .list_right .zx_video_list .video_list .vlist .pic{}
.list_box .list_right .zx_video_list .video_list .vlist .pic img{ width:100%; border-radius:5px;}
.list_box .list_right .zx_video_list .video_list .vlist .txt{ font-size:14px; line-height:24px;}
.list_box .list_right .zx_video_list .video_list .vlist .txt a{ color:#555; text-decoration:none;transition: color 0.5s ease;}
.list_box .list_right .zx_video_list .video_list .vlist .txt a:hover{ color:#39F}


.s_top_about{ width:100%; 
 background-image:url(../images/about_bg.jpg);
    background-size: cover; /* 或使用 contain */
    background-position: center; /* 确保图片居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
    padding:100px 0;
}

.s_top_about_center{ width:60%; margin:auto; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:1fr; grid-gap:50px;}
.s_top_about_center .com_pic{}
.s_top_about_center .com_pic img{ width:85%; border-radius:8px;}
.s_top_about_center .com_info{}
.s_top_about_center .com_info .com_tit{ font-size:16px; line-height:38px; color:#0368CF}
.s_top_about_center .com_info .com_tits{ font-size:38px; color:#333; line-height:50px; font-weight:600}
.s_top_about_center .com_info .com_txt{ font-size:16px; color:#666; line-height:26px; padding:40px 0;}
.s_top_about_center .com_info .com_linian{display:grid; grid-template-columns:1fr 6fr;  grid-template-rows:1fr; grid-gap:50px; margin-bottom:20px;}
.s_top_about_center .com_info .com_linian .ln_ico{ }
.s_top_about_center .com_info .com_linian .ln_ico img{ width:100%}
.s_top_about_center .com_info .com_linian .ln_txt{font-size:16px; color:#333; line-height:26px;}


.s_top_about_center .com_info .com_lianxi{display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:1fr; grid-gap:50px; margin-bottom:20px; margin-top:50px;}
.s_top_about_center .com_info .com_lianxi .ln_btn{ }
.s_top_about_center .com_info .com_lianxi .ln_btn .lx_btn{ width:130px; height:50px;}
.s_top_about_center .com_info .com_lianxi .ln_btn .lx_btn a{ display:block; text-align:center; line-height:50px; color:#FFF; background:#0368CF; text-decoration:none; border-radius:5px;transition: color 0.5s ease;}
.s_top_about_center .com_info .com_lianxi .ln_btn .lx_btn a:hover{background:#093}
.s_top_about_center .com_info .com_lianxi .lx_txt{font-size:18px; color:#333; line-height:26px; text-align:right; padding-right:20px;}

.factory_mid{width:100%; 
 background-image:url(../images/factory_bg1.jpg);
    background-size: cover; /* 或使用 contain */
    background-position: center; /* 确保图片居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
    padding:130px 0;}
.factory_mid .f_txt{ width:60%; margin:auto; text-align:center}
.factory_mid .f_txt .f_h1{ font-size:36px; line-height:56px; color:#FFF; margin-top:50px; font-weight:600;text-shadow: #000 1px 1px 1px;}
.factory_mid .f_txt .f_h3{font-size:16px; line-height:24px; color:#FFF; margin-top:10px;text-shadow: #000 1px 1px 1px;}
.factory_mid .f_video{background: #0368cf;
    color: #fff;
    width: 75px;
    height: 75px;
    line-height: 73px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    -webkit-animation: witr-shadow 1s linear infinite;
    animation: witr-shadow 1s linear infinite;
    -webkit-transition: 0.5s; font-size:30px; margin-top:20px; cursor:pointer}
.factory_mid .case_btn{ width:130px; height:50px; margin:auto; margin-top:50px;}
.factory_mid .case_btn a{ display:block; text-align:center; line-height:50px; background:#06F; color:#FFF; text-decoration:none; border-radius:5px;}
.factory_mid .case_btn a:hover{ background:#090}

.case_about_mid{ width:100%;  padding:90px 0;}
.case_about_mid .factory_video{ width:80%; margin:auto}
.case_about_mid .factory_video .f_v_h3{font-size:16px; line-height:24px; color:#FFF; margin-top:10px;text-shadow: #000 1px 1px 1px; margin:auto; text-align:center}
.case_about_mid .factory_video .f_v_h1{ font-size:36px; line-height:56px; color:#FFF;  font-weight:600;text-shadow: #000 1px 1px 1px; margin:auto; text-align:center; margin-top:10px;}
.case_about_mid .factory_video_list{display:grid;grid-template-columns:repeat(6,1fr) ;grid-gap:20px; margin-top:60px;}
.case_about_mid .factory_video_list .pic img{ width:100%; object-fit:cover; border-radius:3px;}
.case_about_mid .factory_video_list .pic .n_txt{ text-align:center; font-size:14px; line-height:26px;}
.case_about_mid .factory_video_list .pic a{ color:#fff; text-decoration:none; transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */}
.case_about_mid .factory_video_list .pic a:hover{ color:#0CF}

.factory_video_box{ width:50%; position:fixed;top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);text-shadow: #000 1px 1px 1px; z-index:1055 ; background:#FFF; display:none; padding:20px; border-radius:10px;}
  
.factory_video_box .title{ font-size:16px; line-height:30px; border-bottom:1px solid #eee; height:30px;}
.factory_video_box .title .tit{ float:left}
.factory_video_box .title .closeV{ float:right; width:30px; height:30px; cursor:pointer}
.factory_video_box .title .closeV img{ width:100%; height:100%}
.factory_video_box .v_box{ width:100%; padding-top:30px;}  
.factory_video_box .v_box iframe{ width:100%; height:700px;}
@keyframes witr-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}

	

.about_mid{ width:100%; padding:80px 0; background:#00A3D9}


        /* 统计卡片区域 — 滚动触发区域 */
        .stats-grid {
           
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin: 3rem 0 4rem;
			width:70%; margin:auto; display:grid; grid-template-columns:1fr 1fr 1fr 1fr;  grid-template-rows:1fr; grid-gap:50px;
        }

        /* 卡片样式 */
        .stat-card {
            
            backdrop-filter: blur(6px);
            border-radius: 2rem;
            padding: 2rem 1.8rem;
            min-width: 120px;
            flex: 1 1 140px;
            text-align: center;
            
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.6);
            cursor: default;
			
        }
        .stat-card:hover {
            transform: translateY(-8px);
            background:#0CF;
            box-shadow: 0 30px 45px -15px rgba(0, 0, 0, 0.2);
            border-color: rgba(99, 102, 241, 0.3);
        }

        /* 卡片图标 */
        .stat-icon {
            font-size: 2.8rem;
            margin-bottom: 1rem;
            display: inline-block;
			color:#FFF
        }

        /* 标题 */
        .stat-title {
            font-size: 1.2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            margin-bottom: 1rem;
        }

        /* 数字容器 */
        .stat-number-wrapper {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }
        .stat-number {
            font-size: 3.2rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            transition: all 0.2s;
            letter-spacing: 2px;
        }
        .unit {
            font-size: 1.3rem;
            font-weight: 500;
            color: #fff;
            margin-left: 4px;
        }
        .stat-footnote {
            font-size: 0.85rem;
            color: #fff;
            margin-top: 0.6rem;
            border-top: 1px dashed #e2e8f0;
            padding-top: 0.8rem;
            display: inline-block;
        }

        /* 强调特殊数字风格 */
        .stat-card.highlight .stat-number {
            background: linear-gradient(145deg, #2563eb, #1e40af);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        /* 额外说明区域 + 视觉分隔 
        .info-text {
            background: #ffffff;
            backdrop-filter: blur(4px);
            border-radius: 2rem;
            padding: 2rem;
            margin-top: 2rem;
            text-align: center;
            border: 1px solid #eef2ff;
            box-shadow: 0 8px 20px rgba(0,0,0,0.02);
        }
        .info-text h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e2f5e;
            margin-bottom: 0.75rem;
        }
        .info-text p {
            color:#0CF;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.5;
        }
        .scroll-hint {
            margin-top: 2rem;
            background: #eef2ff;
            border-radius: 40px;
            padding: 0.5rem 1.2rem;
            display: inline-block;
            font-size: 0.9rem;
            color: #2563eb;
            font-weight: 500;
        }*/

        /* 占位内容区域让滚动效果更明显 (首屏留白，计数器在第二屏) */
        .spacer-top {
            height: 15vh;
            min-height: 120px;
        }
        .preview-badge {
            text-align: center;
            font-size: 0.9rem;
            color: #6f7c91;
            margin: 20px auto 0;
        }

        /* 响应式 */
        @media (max-width: 780px) {
            .container {
                padding: 1rem 1rem 3rem;
            }
            .hero h1 {
                font-size: 2rem;
            }
            .stat-number {
                font-size: 2.5rem;
            }
            .stat-card {
                padding: 1.5rem 1rem;
                min-width: 180px;
            }
            .stat-icon {
                font-size: 2.2rem;
            }
            .stat-title {
                font-size: 1rem;
            }
        }
        @media (max-width: 550px) {
            .stats-grid {
                gap: 1rem;
            }
            .stat-number {
                font-size: 2rem;
            }
            .unit {
                font-size: 1rem;
            }
        }

        /* 辅助样式 */
        .comma-number {
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
        }

.connect-all{ width:68%; margin:auto; padding:50px 0;}
        /* 整体容器 */
        .page-wrapper {
            max-width: 1280px;
            margin: 0 auto;
            padding: 2rem 1.5rem 3rem;
        }

        /* 头部区域 */
        .hero-section {
            text-align: center;
            margin-bottom: 3rem;
        }
        .hero-section h1 {
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1f2b3c, #2c3e50);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.5px;
            margin-bottom: 0.75rem;
        }
        .hero-section p {
            font-size: 1.1rem;
            color: #475569;
            max-width: 600px;
            margin: 0 auto;
            border-bottom: 2px solid rgba(100, 116, 139, 0.2);
            display: inline-block;
            padding-bottom: 0.5rem;
        }
/* 两列网格布局 (联系方式 + 地图) */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        /* 左侧联系信息卡片 */
        .info-card {
            background: #ffffff;
            border-radius: 2rem;
            padding: 2rem 1.8rem;
           
            transition: transform 0.2s ease, box-shadow 0.2s ease;
           
            border: 1px solid rgba(203, 213, 225, 0.5);
        }
        .info-card:hover {
            transform: translateY(-4px);
          
        }
        .info-card h3 {
            font-size: 1.6rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #0f172a;
            border-left: 4px solid #3b82f6;
            padding-left: 1rem;
        }
        .info-card h3 i {
            color: #3b82f6;
            font-size: 1.5rem;
        }
        .contact-detail-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.8rem;
        }
        .contact-icon {
            width: 44px;
            height: 44px;
            background: #eef2ff;
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            font-size: 1.3rem;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .contact-detail-item:hover .contact-icon {
            background: #3b82f6;
            color: white;
            transform: scale(1.02);
        }
        .contact-text {
            flex: 1;
        }
        .contact-text h4 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: #0f172a;
        }
        .contact-text p, .contact-text a {
            font-size: 1rem;
            color: #334155;
            text-decoration: none;
            transition: color 0.2s;
            word-break: break-word;
        }
        .contact-text a:hover {
            color: #3b82f6;
            text-decoration: underline;
        }
        .social-links {
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 1.2rem;
        }
        .social-links a {
            background: #f1f5f9;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #1e293b;
            font-size: 1.2rem;
            transition: all 0.2s ease;
        }
        .social-links a:hover {
            background: #3b82f6;
            color: white;
            transform: translateY(-3px);
        }

        /* 右侧地图卡片 */
        .map-card {
            background: #ffffff;
            border-radius: 2rem;
            overflow: hidden;
          
            border: 1px solid rgba(203, 213, 225, 0.5);
            transition: transform 0.2s ease;
            display: flex;
            flex-direction: column;
        }
        .map-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 25px 40px -14px rgba(0, 0, 0, 0.12);
        }
        .map-header {
            padding: 1rem 1.5rem 0.5rem;
            font-weight: 600;
            font-size: 1.2rem;
            color: #0f172a;
            background: white;
            border-bottom: 1px solid #eef2ff;
        }
        .map-header i {
            color: #ef4444;
            margin-right: 6px;
        }
        #map {
            height: 380px;
            width: 100%;
            z-index: 1;
        }
        .map-attribution {
            font-size: 0.7rem;
            text-align: center;
            padding: 0.5rem;
            background: #f8fafc;
            color: #5b6e8c;
            border-top: 1px solid #e2e8f0;
        }

        /* 联系表单区域 */
        .form-section {
            background: white;
            border-radius: 2rem;
            padding: 2rem 2rem 2.5rem;
         
            border: 1px solid rgba(203, 213, 225, 0.5);
            margin-top: 1rem;
        }
        .form-section h3 {
            font-size: 1.6rem;
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #0f172a;
        }
        .form-section h3 i {
            color: #3b82f6;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.2rem;
            margin-bottom: 1.2rem;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .input-group label {
            font-weight: 500;
            font-size: 0.9rem;
            color: #334155;
        }
        .input-group input, .input-group textarea {
            padding: 0.85rem 1rem;
            border-radius: 1.2rem;
            border: 1.5px solid #e2e8f0;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            transition: all 0.2s;
            background: #fefefe;
            outline: none;
        }
        .input-group input:focus, .input-group textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
        }
        .input-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        .btn-submit {
            background: linear-gradient(95deg, #1e293b, #2c3e50);
            border: none;
            padding: 0.9rem 1.8rem;
            border-radius: 2.5rem;
            font-weight: 600;
            font-size: 1rem;
            color: white;
            cursor: pointer;
            transition: all 0.25s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
            margin-top: 0.8rem;
            width: 100%;
            max-width: 220px;
        
        }
        .btn-submit:hover {
            background: linear-gradient(95deg, #0f172a, #1e293b);
            transform: translateY(-2px);
            box-shadow: 0 12px 18px -8px rgba(0, 0, 0, 0.2);
        }
        .btn-submit:active {
            transform: translateY(1px);
        }

        /* 底部简单版权 */
        .footer-note {
            text-align: center;
            margin-top: 3rem;
            font-size: 0.85rem;
            color: #5b6e8c;
            border-top: 1px solid #cbd5e1;
            padding-top: 1.8rem;
        }

        /* 响应式布局 */
        @media (max-width: 900px) {
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }
            .hero-section h1 {
                font-size: 2.2rem;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .btn-submit {
                max-width: 100%;
            }
            .info-card, .map-card {
                border-radius: 1.5rem;
            }
            #map {
                height: 320px;
            }
			.connect-all{ width:88%;}
        }

        @media (max-width: 480px) {
            .page-wrapper {
                padding: 1.2rem 1rem 2rem;
            }
            .info-card {
                padding: 1.5rem;
            }
            .contact-icon {
                width: 38px;
                height: 38px;
                font-size: 1.1rem;
            }
			.connect-all{ width:96%}
        }

        /* leaflet 默认样式微调 */
        .leaflet-popup-content-wrapper {
            border-radius: 1rem;
            font-family: 'Inter', sans-serif;
        }
        .leaflet-popup-content {
            font-size: 0.9rem;
            font-weight: 500;
            color: #1e293b;
        }


/*宽度小于1080，执行以下*/
@media (max-width:1080px){
	header .menu{ display:none}	
	header .web_info{ display:none}
	header .logo img{ width:100%; height:auto}
	header{ width:100%; height:62px;  top:0; z-index:999999999;position:fixed; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:62px; box-shadow:0px -10px 10px #CCCCCC;justify-items: end; }
	header .logo{  height:62px; display:flex; justify-content:center;align-items:center;        justify-content: flex-start;}
    header .logo img{ width:60%; height:auto}
	header .web_ico{ display:block}
	.main_index{ display:none}
	.main_index2{ display:none}
	.main_index_m{ display:block}
	.index_content{ font-size:14px; line-height:24px;}
	.top_title{ position:absolute; top:30%; font-size:36px; z-index:99999999999; color:#FFF; margin:auto;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); left: 50%;
transform: translate(-50%, -50%)}
    .pc_footer{ display:none}
	.m_footer{ display:block}
	.list_box{ width:94%; margin:auto; margin-top:30px; display:grid; grid-template-columns:1fr ;grid-template-rows:2fr;grid-gap:20px; margin-bottom:30px;}
    .list_box .list_left{ background:#FFF; border-radius:8px; padding:25px;box-shadow: 0 0 30px rgb(0 0 0 / 7%);}
	
}

@media (max-width:1024px){
	.list_box{ width:92%; margin:auto; margin-top:30px; display:grid; grid-template-columns:1fr 380px ;grid-template-rows:1fr;grid-gap:20px; margin-bottom:30px;}
.list_bigimg .big_img_title{ position:absolute; font-size:22px;top: 50%;
  left: 50%; color:#FFF; font-weight:600;
  transform: translate(-50%, -50%);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index:1049}
}

@media screen and (max-width:500px){
    header .logo img{ width:98%; height:auto}
}

@media screen and (max-width:700px){
    header .logo img{ width:80%; height:auto}
    .bigimg{ display:none}
	.bigimg_m{ display:block}	
	.i_title_box{ display:grid; grid-template-columns:1fr 8fr 1fr;grid-template-rows:1fr; }
}

/*宽度小于1800，执行以下*/
@media (max-width:1800px){
.index_news .news_box .news_list{ display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr; grid-gap:20px; margin-top:50px; position:relative; }
.index_content .i_content{ width:90%; margin:auto; display:grid; grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr); grid-gap:20px;}	
.index_news .news_box{ width:90%; margin:auto;transition: color 0.5s ease; }
.top_title{ position:absolute; top:25%; font-size:45px; z-index:99999999999; color:#FFF; margin:auto;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); left: 50%;
transform: translate(-50%, -50%)}

.list_box{ width:88%; margin:auto; margin-top:50px; display:grid; grid-template-columns:1fr 380px ;grid-template-rows:1fr;grid-gap:20px; margin-bottom:50px;}
.list_box .list_left .list_boxs{ display:grid;grid-template-columns: 1fr 1fr ;grid-gap:20px; margin-top:30px;}
.list_box .list_left .list_boxs img{ width:100%}
.list_box .list_left .list_boxs .pic img{ width:100%; object-fit:cover; border-radius:3px;}
.list_box .list_left .list_boxs .pic .n_txt{ text-align:center; font-size:14px; line-height:26px;}
.list_box .list_left .list_boxs .pic a{ color:#333; text-decoration:none; transition: color 0.5s ease; /* 颜色变化过渡效果，0.5秒内完成，使用'ease'作为缓动函数 */}
.list_box .list_left .list_boxs .pic a:hover{ color:#0CF}

.list_bigimg .big_img_title{ position:absolute; font-size:26px;top: 50%;
  left: 50%; color:#FFF; font-weight:600;
  transform: translate(-50%, -50%);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index:1049}
  
.s_top_about_center{ width:70%; margin:auto; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:1fr; grid-gap:50px;}
.factory_video_box .v_box iframe{ width:100%; height:500px;}

}

@media (max-width:1300px){
.s_top_about_center{ width:85%; margin:auto; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:1fr; grid-gap:50px;}	
.case_about_mid .factory_video_list{display:grid;grid-template-columns:repeat(3,1fr) ;grid-gap:20px; margin-top:60px;}
.about_mid .about_mid_mid{ width:60%; margin:auto; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:1fr 1fr; grid-gap:50px;}
}

@media (max-width:900px){
.index_news .news_box .news_list{ display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr 1fr; grid-gap:20px; margin-top:50px; position:relative; }
.index_content .i_content{ width:94%; margin:auto; display:grid; grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr); grid-gap:20px;}	
.index_news .news_box{ width:94%; margin:auto;transition: color 0.5s ease; }

.list_box{ width:96%; margin:auto; margin-top:30px; display:grid; grid-template-columns:1fr ;grid-template-rows:2fr;grid-gap:20px; margin-bottom:20px;}
.list_bigimg .big_img_title{ position:absolute; font-size:16px;top: 50%;
  left: 50%; color:#FFF; font-weight:600;
  transform: translate(-50%, -50%);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); z-index:1049}
  
  .case_about_mid .factory_video_list{display:grid;grid-template-columns:repeat(2,1fr) ;grid-gap:20px; margin-top:60px;}
  
  .s_top_about_center{ width:90%; margin:auto; display:grid; grid-template-columns:1fr;  grid-template-rows:1fr; grid-gap:30px;}
  .s_top_about_center .com_pic img{ width:100%; border-radius:8px;}
  .factory_video_box{ width:80%; position:fixed;top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);text-shadow: #000 1px 1px 1px; z-index:1055 ; background:#FFF; display:none; padding:20px; border-radius:10px;}
  .case_about_mid .factory_video{ width:90%; margin:auto}
  
        .stats-grid {
            flex-wrap: wrap;
            justify-content: center;
			width:96%; margin:auto; display:grid; grid-template-columns:1fr 1fr;  grid-template-rows:2fr; grid-gap:20px;
        }
		 .stat-card {
            
            backdrop-filter: blur(6px);
            border-radius: 2rem;
            padding: 1rem 0.8rem;
            min-width: 120px;
            flex: 1 1 140px;
            text-align: center;
            
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.6);
            cursor: default;
			
        }
	.factory_video_box .v_box iframe{ width:100%; height:400px;}	  
}