/* ===== 联系客服弹窗 =====
   独立命名 kf-* ，只作用于弹窗本身，
   不对 #header / .smfoot / 全局标签做任何设置，避免影响顶栏与页脚布局。
   配色：青蓝白主题，与三内容页一致（主色青 #4fd6ff / 蓝白字 #cdeeff / 深蓝黑底）。 */

.kf-mask{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 999999;
	display: none;
	background: rgba(2,8,16,.82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.kf-mask.kf-show{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-animation: kfFade .18s ease-out;
	animation: kfFade .18s ease-out;
}
@-webkit-keyframes kfFade{ from{opacity:0} to{opacity:1} }
@keyframes kfFade{ from{opacity:0} to{opacity:1} }

.kf-box{
	position: relative;
	width: 360px;
	max-width: 90vw;
	padding: 0 0 22px;
	border-radius: 10px;
	background: -webkit-linear-gradient(top,#0d1b2c 0%,#060b12 100%);
	background: linear-gradient(180deg,#0d1b2c 0%,#060b12 100%);
	border: 1px solid #2f8fb3;
	box-shadow: 0 0 0 1px rgba(79,214,255,.22) inset,
	            0 18px 50px rgba(0,0,0,.75),
	            0 0 40px rgba(79,214,255,.14);
	color: #cdeeff;
	font-family: "Microsoft YaHei","微软雅黑",Tahoma,Arial,sans-serif;
	-webkit-animation: kfPop .22s cubic-bezier(.2,.8,.3,1.1);
	animation: kfPop .22s cubic-bezier(.2,.8,.3,1.1);
}
@-webkit-keyframes kfPop{ from{opacity:0;-webkit-transform:translateY(14px) scale(.96)} to{opacity:1;-webkit-transform:none} }
@keyframes kfPop{ from{opacity:0;transform:translateY(14px) scale(.96)} to{opacity:1;transform:none} }

.kf-box .kf-hd{
	position: relative;
	height: 46px;
	line-height: 46px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #cdeeff;
	background: -webkit-linear-gradient(top,#12354a,#0c2233);
	background: linear-gradient(180deg,#12354a,#0c2233);
	border-bottom: 1px solid #2f8fb3;
	border-radius: 10px 10px 0 0;
	text-shadow: 0 0 8px rgba(79,214,255,.45);
}
.kf-box .kf-close{
	position: absolute;
	top: 0; right: 0;
	width: 46px; height: 46px;
	line-height: 44px;
	text-align: center;
	font-size: 22px;
	color: #6fd6f0;
	cursor: pointer;
	font-family: Arial,sans-serif;
	-webkit-transition: color .2s, background .2s;
	transition: color .2s, background .2s;
}
.kf-box .kf-close:hover{
	color: #fff;
	background: rgba(79,214,255,.16);
}

.kf-box .kf-qrwrap{
	width: 240px; height: 240px;
	margin: 22px auto 10px;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 0 0 1px #2f8fb3, 0 0 18px rgba(79,214,255,.25), 0 6px 20px rgba(0,0,0,.5);
}
.kf-box .kf-qrwrap img{
	width: 100%; height: 100%;
	display: block;
	border: 0;
	-o-object-fit: contain;
	object-fit: contain;
}

.kf-box .kf-tip{
	text-align: center;
	font-size: 13px;
	color: #9fd4e8;
	letter-spacing: .5px;
}
.kf-box .kf-tip b{
	color: #5fd8ff;
	font-weight: 700;
}

.kf-box .kf-line{
	height: 1px;
	margin: 18px 24px 16px;
	background: -webkit-linear-gradient(left,rgba(47,143,179,0),#2f8fb3,rgba(47,143,179,0));
	background: linear-gradient(90deg,transparent,#2f8fb3,transparent);
}

.kf-box .kf-contact{ padding: 0 26px; }
.kf-box .kf-contact .row{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 9px 12px;
	margin-bottom: 10px;
	background: rgba(79,214,255,.06);
	border: 1px solid rgba(79,214,255,.24);
	border-radius: 6px;
}
.kf-box .kf-contact .row:last-child{ margin-bottom: 0; }
.kf-box .kf-contact .lb{
	-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
	width: 62px;
	font-size: 13px;
	color: #9fd4e8;
	letter-spacing: 1px;
}
.kf-box .kf-contact .vl{
	-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
	text-align: right;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #5fd8ff;
	font-family: Consolas,"Courier New",monospace;
}

@media (max-width: 420px){
	.kf-box{ width: 320px; }
	.kf-box .kf-qrwrap{ width: 200px; height: 200px; margin-top: 18px; }
	.kf-box .kf-contact{ padding: 0 18px; }
}