.tool-bar {
	position: fixed;
}

.tool-item-cap {
	background: rgba(0, 0, 0, .45);
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
}

.tool-item-cap .fa {
	line-height: 1;
}

.tool-item-cap.active {
	background: #197a56;
	color: #fff;
}

.tool-bar .back-top {
	cursor: pointer;
}

.tool-qrcode {
	position: absolute;
	background: #fff;
	text-align: center;
}

.tool-tel {
	position: absolute;
	right: 0;
	background: #134074;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

.tool-tel a {
	display: block;
	color: #fff;
}

.tool-item-sub {
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s, visibility .2s
}

.tool-item:hover .tool-item-sub, .tool-item.active .tool-item-sub {
	visibility: visible;
	opacity: 1
}

@media screen and (min-width: 768px) {
	html {
		font-size: 625%;
	}

	.container {
		width: 7.6rem;
		margin: 0 auto;
	}

	/* reset */
	/* tool bar */
	.tool-bar {
		right: 5px;
		bottom: 50px;
		z-index: 9999 !important;
	}

	.tool-item {
		position: relative;
		width: 80px;
		height: 64px;
		margin-bottom: 1px;
	}

	.tool-item-cap {
		border-radius: 4px;
	}

	.tool-item-cap:hover {
		background: #134074;
	}

	.tool-item-cap .fa {
		margin-top: 10px;
		font-size: 24px;
	}

	.tool-item-name {
		font-size: 13px
	}

	.tool-qrcode {
		top: 0;
		right: 80px;
		padding: 10px 10px 1px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
	}

	.tool-qrcode .wechat-qrcode {
		margin-bottom: 10px;
	}

	.tool-qrcode .wechat-qrcode .qrcode {
		height: 128px;
		width: 128px;
		border: 1px solid #eaeaea;
		border-radius: 4px;
		padding: 3px;
		margin-bottom: 4px;
	}

	.tool-qrcode .qrcode img {
		height: 120px;
		width: 120px
	}

	.tool-qrcode .qrcode-name {
		margin-bottom: 10px;
		font-size: 13px;
		color: #666;
	}

	.tool-tel {
		top: 0;
		width: 280px;
		height: 64px;
		border-radius: 4px;
		line-height: 64px;
		font-size: 28px;
	}

	.tool-tel .fa {
		margin-right: 10px;
	}

	/* end tool bar */
	/* header */
	.header {
		padding: 0.3rem 0;
	}

	.logo-tel {
		margin-left: 0.6rem;
	}

	.logo-tel p {
		font-weight: bold;
		font-size: 0.15rem;
	}

	.logo-tel a {
		color: #134074;
		font-weight: bold;
		font-size: 0.3rem;
		line-height: 0.3rem;
	}

	.logo-tel a:hover {
		color: #222;
	}

	/* header */
	/* layout */
	.section {
		padding: 0.8rem 0;
	}

	.ind-case-ul li {
		width: 49%;
	}

	/* ind-case */
	/* ind-blog */
	.ind-blog-ul li {
		width: 49%;
	}

	/* ind-blog */
	/* footer */
	.footer-item {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.foot {
		box-sizing: border-box;
		width: 49%;
	}

	.foot:nth-child(3),
	.foot:nth-child(4) {
		margin: 0.3rem 0;
	}

	/* footer */
	/* layout */
	/* list-solution */
	.list-sol-ul {
		display: flex;
		/* justify-content: space-between; */
		flex-wrap: wrap;
	}

	.list-sol-ul li {
		box-sizing: border-box;
		width: 50%;
		padding: 0.1rem;
	}

	/* list-solution */
	/* list-case */
	.list-case-ul .list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-case-ul .list-item-img {
		width: 30%;
	}

	.list-case-ul .list-item-text {
		width: 70%;
		padding-left: 0.3rem;
	}

	/* list-case */
}

@media screen and (min-width: 1200px) {
	html {
		font-size: 625%;
	}

	.container {
		width: 11.7rem;
	}

	/* reset */
	/* header */
	.navbar {
		display: flex;
		align-items: center;
	}

	.nav-menu {
		display: flex;
	}

	.nav-menu-child-child {
		display: none;
		width: 2rem;
		background: #f6f6f6;
		box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, .1);
		z-index: 99;
	}

	.nav-menu-child-child>li {
		display: block;
	}

	.nav-menu-child-child>li:nth-child(n+2) {
		border-top: 0.01rem solid rgba(0, 0, 0, .1);
	}

	.nav-menu-child-child>li>a {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.1rem 0;
	}

	.nav-menu-child-child>li>a:hover {
		background: #134074;
		color: #fff;
	}

	.nav-menu>li {
		position: relative;
		display: inline-block;
	}

	.nav-menu>li>a {
		font-size: 0.15rem;
		font-weight: 500;
		display: block;
		padding: 0.15rem;
	}

	.nav-menu-child>li {
		position: relative;
	}

	.nav-menu-child>li:nth-child(n+2) {
		border-top: 0.01rem solid rgba(0, 0, 0, .1);
	}

	.nav-menu-child>li:hover .nav-menu-child-child {
		display: block;
		position: absolute;
		left: 100%;
		top: 0;
	}

	.nav-menu-child>li>a {
		display: block;
		text-align: center;
		padding: 0.1rem 0.05rem;
	}

	.nav-menu-child>li>a:hover {
		background: #134074;
		color: #fff;
	}

	.nav-menu>li:hover .nav-menu-child {
		display: block;
		position: absolute;
		z-index: 99;
		width: 120%;
		left: 0;
		background: #f6f6f6;
		box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, .1);
	}

	/* header */
	/* layout */
	/* ind-pro */
	.ind-pro-item {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}

	.ind-pro-list {
		box-sizing: border-box;
		width: 80%;
	}

	.ind-pro-nav {
		box-sizing: border-box;
		width: 20%;
		padding-right: 0.3rem;
	}

	.ind-pro-ul li {
		width: 24%;
	}

	/* ind-pro */
	/* ind-about */
	.ind-about-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ind-about-img {
		box-sizing: border-box;
		width: 40%;
	}

	.ind-about-text {
		box-sizing: border-box;
		width: 60%;
		padding: 0.3rem;
	}

	/* ind-about */
	/* ind-case */
	.ind-case-ul li {
		width: 24%;
	}

	/* ind-case */
	/* footer */
	.foot {
		width: 24%;
	}

	.foot:nth-child(3),
	.foot:nth-child(4) {
		margin: 0;
	}

	/* footer */
	/* layout */
	/* index-product */
	.index-pro-ul li {
		width: 25%;
	}

	/* index-product */
	/* list-product */
	.page-item {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}

	.page-content {
		box-sizing: border-box;
		width: 75%;
	}

	.sidebar {
		box-sizing: border-box;
		width: 25%;
		padding-right: 0.3rem;
		margin-top: 0;
	}

	.list-pro-ul li {
		width: 33.33%;
	}

	/* list-product */
	/* single-pro */
	.toppro {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.toppro-img {
		width: 45%;
	}

	.toppro-text {
		width: 55%;
		padding: 0.3rem 0.3rem 0.6rem 0.3rem;
	}

	/* single-pro */
	/* rel */
	.rel-pro-ul li {
		width: 25%;
	}

	/* rel */
	/* list-solution */
	.list-sol-ul li {
		width: 33.33%;
	}

	/* list-solution */
}

@media screen and (min-width: 1400px) {
	html {
		font-size: 625%;
	}

	.container {
		width: 13.7rem;
		margin: 0 auto;
	}

	/* reset */

}

/* m style */
@media screen and (max-width: 1200px) {
/* tool bar */
	.tool-bar {
		bottom: 0;
		z-index: 10;
		width: 100%;
		font-size: 0.16rem;
	}

	.tool-item {
		float: left;
		width: 25%;
		height: 0.8rem;
	}

	.tool-item-cap .fa {
		margin-top: 0.2rem;
		font-size: 0.3rem;
	}

	.tool-item-name {
		margin-top: 0.1rem;
		font-size: 0.18rem;
	}

	.tool-qrcode {
		bottom: 100%;
		left: 0;
		width: 100%;
		padding: 0.4rem 0 0.2rem;
	}

	.tool-qrcode .wechat-qrcode {
		display: inline-block;
		margin: 0 0.4rem;
	}

	.tool-qrcode .wechat-qrcode .qrcode {
		width: 2.08rem;
		height: 2.08rem;
		padding: 0.04rem;
	}

	.tool-qrcode .qrcode img {
		height: 2rem;
		width: 2rem;
	}

	.tool-tel {
		top: -100%;
		width: 100%;
		height: 1rem;
		line-height: 1rem;

	}

	.tool-tel a {
		font-size: 0.3rem;
		color: #fff;
	}

	/* end tool bar */
}

@media screen and (max-width: 768px) {
    body .tool-bar {
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 3px solid #134074;
        font-size: 14px;
    }
    body .tool-item {
        float: left;
        width: 19%;
        height: 60px;
        margin-bottom: 0;
        position: relative;
    }
    body .tool-item .fa {
        font-size: 20px;
        margin-top: 10px;
        line-height: 1;
    }
    body .tool-item-name {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.2;
    }
    body .tool-qrcode {
        bottom: 100%;
        left: 0;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    body .tool-qrcode .wechat-qrcode .qrcode {
        width: 100px;
        height: 100px;
        padding: 3px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    body .tool-qrcode .qrcode img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    body .tool-qrcode .qrcode-name {
        font-size: 12px;
        color: #666;
    }
    body .tool-tel {
        position: absolute;
        bottom: 60px;           /* 等于按钮高度，使弹出层紧贴按钮上方 */
        left: 0;
        width: 100%;            /* 宽度仍为按钮宽度，用于内容居中 */
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: transparent; /* 背景透明，由伪元素提供 */
        pointer-events: none;    /* 让点击穿透到按钮（但链接仍需可点，下面恢复） */
    }

    /* 链接可点击，并置于背景之上 */
    body .tool-tel a {
        display: block;
        color: #fff;
        font-size: 20px;
        position: relative;      /* 确保在伪元素上方 */
        z-index: 1;
        pointer-events: auto;    /* 允许点击拨号 */
    }

    /* 全屏背景伪元素 */
    body .tool-tel::before {
        content: '';
        position: fixed;
        left: 0;
        bottom: 60px;            /* 与 .tool-tel 的 bottom 一致，确保背景与内容在同一垂直位置 */
        width: 100vw;            /* 铺满整个视口宽度 */
        height: 50px;
        background: #134074;     /* 你的弹出层背景色 */
        z-index: 0;
    }
    body .tool-tel .fa {
        margin-right: 10px;
        font-size: 20px;
        margin-top: 0;
    }
    /* 过渡效果保留原选择器即可（它们没有被覆盖的风险） */
    .tool-item-sub {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s, visibility 0.2s;
    }
    .tool-item:hover .tool-item-sub,
    .tool-item.active .tool-item-sub {
        visibility: visible;
        opacity: 1;
    }
}