/* 全局变量定义 */
:root {
    --primary-color: #FF6600;
    --secondary-color: rgba(255,78,80, 1);
    --text-color: #333;
    --light-text: #666;
    --lighter-text: #999;
    --border-color: #eee;
    --touch-target-size: 44px;
    --header-height: 50px;
    --base-font-size: 16px;
    --small-font-size: 14px;
    --smaller-font-size: 12px;
}

/* 基础样式重置与增强 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* X5内核(微信、QQ浏览器)特定样式 */
@supports (-webkit-overflow-scrolling: touch) {
    input, textarea, select {
        -webkit-appearance: none;
    }
    .sp_nav span {
        -webkit-transform-origin: center;
    }
}

/****手机头部导航***/
/* 移动端头部导航基础样式 */
#divLogo_mobile {
    position: fixed; /* 或者 sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 确保在顶层 */
    background-color: #fff; /* 或者你的背景色 */
    transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
    /* 其他现有样式... */
}
/* 隐藏状态 */
#divLogo_mobile.header-hidden {
    transform: translateY(-100%); /* 将导航栏向上移出视口 */
}
.sp_header{height:var(--header-height);/*overflow:hidden;*/background:#fff;position:fixed;z-index:950;width:100%;top:0px;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color:var(--border-color); transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */}
.sp_header.header-hidden {
    transform: translateY(-100%); /* 向上移动隐藏 */
}
.sp_header ul{height:0px;margin:0;padding:0}
.sp_header ul li{height:var(--header-height);float: left;text-align: center;list-style-type: none;margin: 0px;min-width: var(--touch-target-size);}
.sp_header .sp_logo{padding:3px 0 0 0;width:calc(100% - 120px);position:relative;margin: auto;text-align: center;}
.sp_logo img{margin:auto;max-height: 40px;width: auto;}
.sp_header .sp_nav{width:60px;position:relative;cursor:pointer;}
.sp_nav span{display:block;background:var(--primary-color);height:3px;position:absolute;margin: 12px 0 0 10px;transition:all ease 0.35s;border-radius: 1.5px;}
.sp_nav span:nth-of-type(1){top:0px;width:20px;}
.sp_nav span:nth-of-type(2){top:10px;width:28px;}
.sp_nav span:nth-of-type(3){top:20px;width:14px;}
.sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg);width:25px;}
.sp_nav_se span:nth-of-type(2){width:0}
.sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg);width:25px;}

.sp_header .sp_tel{width:60px;position:relative;cursor:pointer;}
.sp_tel a {font-size: 1.4rem;margin: 10px 20px 0 0;position: relative;display: block;float: right;}
.sp_tel a span{font-size: 16pt;font-weight: 700;color:var(--primary-color);}

.sjj_nav{position:fixed;z-index:991;background:#fff;width:70%;height:calc(100% - 95px);font-size:var(--small-font-size);line-height:40px;overflow:auto;overflow-x:hidden;top:var(--header-height);left:-70%;transition:left ease-in-out 300ms;-webkit-overflow-scrolling: touch;}
.nav_show{/*top:50px*/left:0;}
.sjj_nav>ul>li:first-child{overflow:hidden;border-top:0}
.sjj_nav>ul>li:first-child>a{float:left;width:calc(100% - 70px);   }
.sjj_nav>ul>li:first-child .language{float:right;width:70px;overflow:hidden;line-height:30px;margin-top:5px;box-sizing: border-box;}
.sjj_nav>ul>li:first-child .language a{width:35px;float:left;border-left:1px #ddd solid;text-align:center;color:#999;}
.sjj_nav ul li i{position:absolute;top:5px;right:0px;border-left:1px #ddd solid;height:30px;padding:0px 7px 0 7px;}
.sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s}
.sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
.sjj_nav ul li{border-top:1px #ddd solid;margin-left:20px;position:relative;line-height:40px;font-size:1.125rem;}
.sjj_nav>ul >li:last-child{border-bottom:1px #ddd solid;}
.sjj_nav ul li ul{display:none}
.sjj_nav ul li a{color:#666;width:80%}
.sjj_nav ul li ul li a{color:#999;display:block;text-align:left;}
.sjj_nav ul li i svg{width:20px;height:20px;fill:#555;}
.sjj_nav ul li .sjj_nav_i_se svg{fill:var(--primary-color)}
.sjj_nav ul li ul li>ul{margin-left:10px}
/*手机底部固定栏*/
.ft{padding:10px 0 0 0;width:100%;position:fixed;left:0;bottom:0;z-index:99}
.ft ul{height:0px;margin:0;padding:0}
.ft ul li{float:left;width:33.33%;height:3.125rem;text-align:center;list-style-type:none;margin:0px;padding:0px;border-top: 1px dashed var(--border-color);}
.ft ul li a{min-height: var(--touch-target-size);display: flex;flex-direction: column;align-items: center;justify-content: center;}
.ft ul li span{display:block;color:#333;font-size:0.75em;font-family:"微软雅黑";line-height:15px}
.ft .iconfont{font-size:1.4rem;padding:2% 0 2% 0;position:relative;display:block;line-height:2rem;height:2rem;width:2rem;margin:0 auto;color: var(--primary-color);}
.ft a{text-decoration:none}

/*自适应移动端 底部固定栏渐变色 
.Bjstosbox {
    display: flex !important;
    align-items: center;
    border-radius: 20px;
    height: var(--touch-target-size) !important;
    justify-content: center;
    margin: 5px 0 3px 0;
    padding: 4px;
    text-align: left;
	background-image: linear-gradient(90deg, var(--secondary-color) 8%, var(--primary-color) 100%);
    box-shadow: 0 2px 8px rgba(255,78,80,0.2);
}
.BjstosAnimation{
	animation:Bjstosscale 4s linear infinite !important;
	-webkit-animation:Bjstosscale 4s linear infinite !important;
	-o-animation:Bjstosscale 4s linear infinite !important;
	-moz-animation:Bjstosscale 4s linear infinite !important;
}
@keyframes Bjstosscale { 0% { transform: scale(1); } 12.5% { transform: scale(1.05); } 25% { transform: scale(1); } 37.5% { transform: scale(1.05); } 50% { transform: scale(1); } 100% { transform: scale(1); } }
@-webkit-keyframes Bjstosscale { 0% { -webkit-transform: scale(1); } 12.5% { -webkit-transform: scale(1.05); } 25% { -webkit-transform: scale(1); } 37.5% { -webkit-transform: scale(1.05); } 50% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } }
@-o-keyframes Bjstosscale { 0% { -o-transform: scale(1); } 12.5% { -o-transform: scale(1.05); } 25% { -o-transform: scale(1); } 37.5% { -o-transform: scale(1.05); } 50% { -o-transform: scale(1); } 100% { -o-transform: scale(1); } }
@-moz-keyframes Bjstosscale { 0% { -moz-transform: scale(1); } 12.5% { -moz-transform: scale(1.05); } 25% { -moz-transform: scale(1); } 37.5% { -moz-transform: scale(1.05); } 50% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); } }
*/

/**底部固定栏-弹出复制微信号弹窗**/
.wxpupop{width:250px;height:280px;background-color:#fff;position:fixed;left:50%;top:50%;display:none;z-index:200;border: 1px solid #eee;border-radius:20px;/*overflow-y:auto;*/padding:30px 0;transform:translate(-50%,-50%)}
.wxpupoptext{text-align:center;font-size:0.875em;margin-bottom:5px;color: black;}
.wxpupoptext .wxsuccessimg{width:46px;height:46px}
.wxpupoptext .wxcopy{    /* font-size: 20px; */
    color: #333;
    /* font-weight: 700; */
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ccc;
    padding: 5px 10px 5px 10px;
    border-radius: 6px;}
.wxpupoptext img.wximg{position:initial;width:150px;max-width:none;height:150px;margin-top: 20px;transform:scale(1);transform-origin:top right;opacity:1;border:1px solid #eee;border-radius:.25rem;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.wxid{color:red;font-weight:800}
.wxpupop p{background-color:#3fcb40;width:144px;height:48px;line-height:48px;text-align:center;color:#fff !important;margin:0 auto;border-radius:28px}
.wxpupop p a{color:white}
.wxpupopclose{position:fixed;right:16px;top:10px;color:#BABABA;cursor:pointer}
/****手机首页图片、文字 ***/
.banner-slide {position:relative;}
.banner-slide .banner-main {position:absolute;display:flex;align-items:center;width:80%; margin: 17% 10% 5% 5%; z-index: 98;}
.banner-slide .img_text {vertical-align:middle;color:#fff;}
.banner-slide .img_text .img_tit {font-size:2em;line-height:200%;}
.banner-slide .img_text p {font-size:0.87em;line-height:150%;}
.banner-slide .img_text a {font-size:0.9em;line-height:200%;color:#fff;}
.banner-slide img {position:relative;width:100%;height:100%;padding: 50px 0 0 0;}

/*PC站不显示手机样式*/
#divLogo_mobile{display:none}
#divhd_mobile{display:none}
#divindex_mobile_lmg{display:none}
#divservice_mobile{display:none}
#divnews_mobile{display:none}
#divcontact_mobile{display:none}
#divsp_top{display:none}
#divft_mobile{display:none}
/****m首页图片、文字 ***/
/* 更精细的媒体查询断点 */
/* 小型手机设备 - 320px */
@media screen and (min-width: 320px) and (max-width: 374px) {
    :root {
        --base-font-size: 14px;
        --small-font-size: 12px;
    }
    .banner-slide .img_text .img_tit {
        font-size: 1.5em;
    }
    .banner-slide .img_text p {
        font-size: 0.8em;
    }
    .box1 img {
        height: 140px;
    }
}

/* 中型手机设备 - 375px */
@media screen and (min-width: 375px) and (max-width: 413px) {
    :root {
        --base-font-size: 15px;
    }
    .banner-slide .img_text .img_tit {
        font-size: 1.7em;
    }
    .box1 img {
        height: 160px;
    }
}

/* 大型手机设备 - 414px+ */
@media screen and (min-width: 414px) and (max-width: 660px) {
    .banner-slide .banner-main {margin: 18% 10% 8% 8%; }
    .banner-slide .img_text .img_tit {
        font-size: 1.8em;
    }
}

/* 平板设备 */
@media (min-width:661px) and (max-width:1023px)
{
*{margin:0;padding:0;box-sizing:border-box;}
body{width:100%;} 
#divhd{display:none;}
#divhdImg{display:none;}
#divliucheng{display:none;}
#divnum{display:none;}
/*
#divabout{display:none;}
*/
#divkh{display:none;}
#divhz{display:none;}
#divnews{display:none;}
#divnews_hot{display: none;}
#divcol-l{display:none;}
#divshare{display:none;}
#divlink{display:none;}

/****m首页图片、文字 ***/
.banner-slide .banner-main {margin: 20% 10% 10% 10%; }
.banner-slide .img_text{font-size: 150%;}

section{min-width: 100%;}
.wp{width: 100%;padding: 0 2% 0 2%;}
.fix{padding-top: 5%;}

.page-container {width: 100%;margin: 0 auto;}

.index_pro{width:100%;overflow:hidden;}
.index_pro img{width:100%;}

.us_right_content{display: none;}
.us_left_content{width: 100%;}

.right_title {background:url(../images/pro_title_404.png) no-repeat center;}

.box1{width:48%;margin: 0 3px 10px 3px;padding: 0px 0px 0px 0px;height: 100%;}
.box1 img{height: 240px;object-fit: cover;}
.box1 h3{width:100%;}

.box2{width:48%;margin: 0 3px 30px 3px;padding: 0px 0px 0px 0px;}
.box2 img{width: 40%;height: 40%;margin-right:0}

.index_list_content ul img{height:400px;}
.index_list_content ul li{width:97%;}

.left_con ul {overflow: hidden;padding: 0px;}
.left_con ul li{width:48%;margin: 0 3px 15px 3px;}
.left_con ul li a{height:240px;width:100%;font-size: 150%;}
.left_con ul li h3{line-height: 240px;margin: auto;}
.left_con ul li img{display:none}

.index_list_content .leftvideo{display:none;}
.index_list_content .rightfont{float: left;width: 100%;}

.topbanner{display:none;}
.topbanner img{object-fit: cover;width: 100%;
    margin: 0 -50%;}


.col-r{float: right;width:100%;}

.menu_wrap {display:none}

.page{display:none}

.news_list{height: 100%;}

.pro-show{width:100%;padding: 10% 2% 0 2%;}
.pro{display:none}

ul#zxjm{padding-left: 10px;}
.sinp01{width:50%;}
.area{width:70%;}

.col-l-l{width:100%;padding-top: 5%;}
.col-r-r{display:none}

/*#wp-index .main{width:100%}*/

footer{background: #fff;color: #0e0e0e;min-width: 100%;}
footer .w1200{width: 100%;margin-top:0} 
.footer-text{display:none}
.right ul{width:30%;}
.right ul img{height: 80%; width: 80%;}

#nav{display:none;}
.izl-rmenu{display:none;}

#divBottom .menu5{display:none;}
#divBottom .right {display:none;float: left;width: 100%;height: 100%;padding-left: 5px;margin: 20px 0 0;text-align: left;color: #0e0e0e;}
#divBottom .copyright{margin-top: 0px;border-top: 1px solid #eee;color: #0e0e0e;}
#divBottom .copyright span{display:none;}

#divsp_top{height: 3.125rem;}
#divft_bottom{height: 3.125rem;}


#divLogo_mobile{display:block}
#divhd_mobile{display:block}
#divindex_mobile_lmg{display:block;}
#divservice_mobile{display:block}
#divnews_mobile{display:block}
#divcontact_mobile{display:block}
#divft_mobile{display:block}
#divsp_top{display:none}
}



/*
@media (max-width:342px)
{

}

@media screen and (min-width:343px) and (max-width:660px)
{
	
}
*/
/* 通用移动设备样式 */
@media (max-width:660px)
{
*{margin:0;padding:0;box-sizing:border-box;}
body{width:100%;} 
#divhd{display:none;}
#divhdImg{display:none;}
#divnum{display:none;}
#divliucheng{display:none;}
/*
#divabout{display:none;}
*/
#divkh{display:none;}
#divhz{display:none;}
#divnews{display:none;}
#divnews_hot{display: none;}
#divcol-l{display:none;}
#divshare{display:none;}
#divlink{display:none;}

section{min-width: 100%;}
.wp{width: 100%;padding: 0 2% 0 2%;}
.fix{padding-top: 10%;}
.page-container {width: 100%;margin: 0 auto;}

.index_pro{width:100%;overflow:hidden; }
.index_pro img{width:100%;}

.us_right_content{display: none;}
.us_left_content{width: 100%;}

.right_title {background:url() no-repeat center;}

.box1{width:48%;margin: 0 3px 10px 3px;padding: 0px 0px 0px 0px;height: 100%}
.box1 img{height: 170px;object-fit: cover;}
.box1 h3{width:100%;}
.box2{width:48%;margin: 0 3px 30px 3px;padding: 0px 0px 0px 0px;}
.box2 img{width: 50%;height: 50%;margin-right:0}

.index_list_content ul img{height:200px;object-fit: cover;}
.index_list_content ul li{width:97%;}

.left_con ul {overflow: hidden;padding: 0px;}
.left_con ul li{width:48%;margin: 0 3px 15px 3px;}
.left_con ul li a{height:200px;width:100%;font-size: 20px;}
.left_con ul li h3{line-height: 200px;margin: auto;}
.left_con ul li img{display:none}

.index_list_content .leftvideo{display: none;}
.index_list_content .rightfont{float: left;width: 100%;}

.topbanner{display:none;}
.topbanner img{object-fit: cover;width: 100%;margin: 0 -50%;display:none;}

.col-r{float: right;width:100%;}

.menu_wrap {display:none}

.page{display:none}

.news_list{height: 100%;}
.news_list .n-img {margin-right: 10%;}
.pro-show{width:100%;padding: 12% 2% 0 2%;}

.pro{display:none}

ul#zxjm{padding-left: 10px;}
.sinp01{width:50%;}
.area{width:70%;}

.col-l-l{width:100%;padding-top: 5%;}
.col-r-r{display:none}

/*#wp-index .main{width:100%}*/

footer{background: #fff;color: #0e0e0e;min-width: 100%;}
footer .w1200{width: 100%;margin-top:0} 

.footer-text{display:none}

.right ul{width:30%;display:none;}
.right ul img{height: 90%; width: 90%;}

#nav{display:none;}
.izl-rmenu{display:none;}

#divBottom .menu5{display:none;}
#divBottom .right {display:none;float: left;width: 100%;height: 100%;padding-left: 5px;margin: 20px 0 0;text-align: left;color: #0e0e0e;}
#divBottom .copyright{margin-top: 0px;border-top: 1px solid #eee;color: #0e0e0e;}
#divBottom .copyright span{display:none;}


#divsp_top{height: 3.125rem;}
#divft_bottom{height: 3.125rem;}

#divLogo_mobile{display:block}
#divhd_mobile{display:block}
#divindex_mobile_lmg{display:block;}
#divservice_mobile{display:block}
#divnews_mobile{display:block}
#divcontact_mobile{display:block}
#divft_mobile{display:block}
#divsp_top{display:none}

}

/* 性能优化与响应式图片加载 */
.responsive-img {
    max-width: 100%;
    height: auto;
}

/* 支持srcset的浏览器将使用这个属性加载最适合的图片 */
@supports (object-fit: cover) {
    .responsive-img {
        object-fit: cover;
        width: 100%;
    }
}

/* 触摸友好的交互元素 */
.touch-target {
    min-height: var(--touch-target-size);
    min-width: var(--touch-target-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 表单元素优化 */
input[type="text"], 
input[type="tel"], 
input[type="email"], 
textarea, 
select {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    width: auto;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #f0f0f0;
        --light-text: #d0d0d0;
        --lighter-text: #a0a0a0;
        --border-color: #444;
    }
    
    /* 这里只添加基本支持，完整实现需要更多样式 */
    .dark-mode-supported {
        background-color: #222;
        color: var(--text-color);
    }
}


/* 解决方案列表、精选测评方案列表公用 自适应*/
@media screen and (min-width: 1921px) {
    .scheme-item {
        flex: 0 0 calc(20% - 16px);
        min-width: 280px;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1552px) {
    .scheme-item {
        flex: 0 0 calc(25% - 15px);
        min-width: 250px;
    }
}
/*为保证条个随机测评方案布局的视觉效果，每行显示2条或4条，小屏幕上显示1条*/
@media screen and (max-width: 1551px) and (min-width: 1024px) {
    .scheme-item {
        flex: 0 0 calc(25% - 14px);
        min-width: 200px;
    }
}

@media screen and (max-width: 1023px) and (min-width: 769px) {
    .scheme-item {
        flex: 0 0 calc(50% - 10px);
        min-width: 260px;
    }
}

@media screen and (max-width: 768px) and (min-width: 481px) {
    .scheme-item {
        flex: 0 0 calc(49.5% - 8px);
        min-width: 220px;
    }
}

@media screen and (max-width: 480px) {
    .scheme-item {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .scheme-item__title {
        font-size: 16px;
    }
}

/* 解决方案列表页和内容页共用的相关方案样式 */
.related-posts {
    margin: 20px 0;
}

.related-posts h2 {
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: 1.375rem;
    color: var(--text-color);
    position: relative;
    padding-bottom: 10px;
}

.related-posts h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-image: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}

.scheme-grid, 
.related-posts .scheme-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    justify-content: space-around;
}

.scheme-item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scheme-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 确保内容页中的相关方案与列表页样式一致 */
.related-posts .scheme-item {
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.related-posts .scheme-item a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: var(--text-color);
}

.related-posts .scheme-item figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.related-posts .scheme-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.related-posts .scheme-item figcaption {
    padding: 12px;
    background: #fff;
}

.related-posts .scheme-item h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 响应式调整 */
@media (max-width: 660px) {
    .related-posts h2 {
        font-size: 1.25rem;
    }
    
    .related-posts .scheme-item figcaption {
        padding: 8px;
    }
    
    .related-posts .scheme-item h3 {
        font-size: 14px;
    }
}