/* ================================== 内容 ====================================== */
/* 总 */
*{margin: 0px; padding: 0px;}
body{font-size: 14px; color: #333; font-family: "Helvetica Neue", "Source Sans Pro","Helvetica Neue","Arial,sans-serif";}
body{
	--var-primary-color: #2D8CF0;
}
.s-width{width: 1100px; margin: auto;}
/* 解释性文字 */
.re-text{color: #4e6e8e;}
/* 分割线 */
.s-fenge{width: 80%; margin: auto; border-top: 1px #ddd solid;}

/* .z-div{background-image: url(https://oss.dev33.cn/sa-token/home-bg.jpg); } */
.z-div{min-width: 1100px; position: relative; background-color: #f5f5f5;}
/* .z-div{background: linear-gradient(to left bottom, rgb(222, 222, 222) 0%, rgb(255, 255, 255) 100%)} */

/* 首页海报 背景 */
.index-bg-div{border: 0px #000 solid; width: 100%; height: 40vh; /* position: absolute; */ }
.index-bg-div{ /* background-color: #E9F4FE; */ background-image: url(./img/index-bg.png); background-size: 100% 100%;}

/* 首页 海报部分 */
.s-content{ position: relative; padding-top: 8vh;}
.s-content .s-title{ font-size: 38px; color: #000; margin-bottom: 30px;}
.s-content .sub-title{font-size: 36px; color: #000; display: inline-block; border-bottom: 0px var(--var-primary-color) solid; }
.s-content .sub-title{position: relative; top: 0px; font-weight: 700;}
.s-content .s-intro{ color: #345; margin-top: 30px; font-size: 16px; width: 600px; line-height: 26px; }
.s-content .s-intro .s-zhongdian{ border-bottom: 2px var(--var-primary-color) solid; font-weight: 400; }
.s-content .jr-btn{  width: 180px; height: 45px; background-color: #FFF; border: 1px solid #ddd; color: #000; }
.s-content .jr-btn{ border-radius: 3px; font-size: 16px; margin-top: 40px; cursor: pointer; transition: all 0.3s; }
.s-content .jr-btn:hover{ background-color: rgba(255,255,255,0.5); }
.s-content .jr-btn img{ width: 24px; vertical-align: middle; position: relative; top: -1px; }
.s-content .right-img-box{ position: absolute; right: 50px; top: 0vh; animation: float-img 30s linear infinite; }
.s-content .right-img-box .right-img{width: 500px;}

@keyframes float-img {
	0% { transform: translateY(0); }
	50% { transform: translateY(-50px); }
	100% { transform: translateY(0); }
}

/* 彩色字体 必须 background 在前，background-clip 在后  */
.s-content .caizi{  background: linear-gradient(to right, #44f, #bd34fe ); background-clip: text; color: transparent; }
/* .s-content .caizi{  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-clip: text; color: transparent; } */

/* 小助手二维码 悬浮时展开 */
.dmt-link{display: inline-block; position: relative; z-index: 1;}
.dmt-detail{position: absolute; transform: translate(0px, 0px); background-color: #FFF; overflow: hidden; display: none; transition: all 0.2s;}
.dmt-link:hover .dmt-detail{display: block; }
.dmt-detail{padding: 30px; padding-top: 15px; padding-bottom: 15px; border: 1px #ccc solid;}
.dmt-item-box{display: flex; width: 210px;}
.dmt-detail .dmt-item{width: 200px; flex: 1; text-align: center; cursor: pointer;}
.dmt-item .dmt-qr-img{ max-width: 180px; }
.dmt-item .dmt-logo-img{ max-width: 180px; max-height: 50px; margin-top: 10px;}
.dmt-item-douyin,.dmt-item-wxsph{ margin-top: 15px; }
.dmt-item-bilibili .dmt-logo-img{margin-top: 20px;}
.dmt-item-wxsph .dmt-logo-img{margin-top: 15px;}


/* 首页-正文介绍部分 */
.zwjs-title{text-align: center; font-size: 28px; }

/* -------- 集成案例 --------- */
.feature-z{padding: 0em 1em; padding-top: 0px; padding-bottom: 60px; text-align: center; color: #000;}
.feature-z .s-title{font-size: 30px; font-weight: 400; margin-top: 70px; margin-bottom: 40px;}
.feature-z{color: rgb(128, 128, 128); text-align: center; box-sizing: border-box; line-height: 24px; font-size: 16px;}

.feature-box{margin-top: 10px; margin-bottom: 70px; display: flex; flex-wrap: wrap; justify-content: center; /* justify-content: flex-start; */}
.feature{border: 0px #000 solid; flex: 0 0 33%; text-align: left; padding: 1.8em 1.2em; box-sizing: border-box;}
.feature h2{font-size: 22px; color: #000; font-weight: 400;}
.feature p{margin-top: 14px; font-size: 16px; color: #4e6e8e;}

.s-case{border: 1px #ddd solid; flex: 0 0 45%; margin: 14px; margin-top: 30px; text-align: left; box-sizing: border-box; padding-bottom: 16px; overflow: hidden;}
.s-case{position: relative; transition: all 0.2s; background-color: #FFF;}
.s-case-link{display: block; width: 100%; height: 0px; padding-bottom: 50%; position: relative; overflow: hidden;}
.s-case-link img{width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;}
.s-case-title,.s-case-intro{padding: 0 20px;}
.s-case-title{margin-top: 40px; margin-bottom: 20px; font-size: 18px; font-weight: 400; color: #000; font-family: "microsoft yahei";}
.s-case-intro{margin-top: 8px; font-size: 13px; line-height: 18px; color: #888; word-break:break-all;}
.s-author{color: #ff5722; border: 0px #ff5722 solid; position: absolute; right: 20px; display: inline-block;}
.s-author{padding: 0 5px; font-size: 20px; transform: translate(0, -47px);}
.s-author-tj{ border: 1px #ff5722 solid; position: static; transform: none; font-size: 12px; padding: 2px 5px; font-weight: 700; }

.ljxq-btn-box{position: absolute; bottom: 0px; width: 100%; text-align: center; padding-bottom: 30px; }
.ljxq-btn-box-zhanwei{ height: 100px; }
.s-case .ljxq-btn{ width: 180px; height: 45px; background-color: var(--var-primary-color); color: #FFF; border: 1px var(--var-primary-color) solid; border-radius: 2px; transition: all 0.2s;}
.s-case .ljxq-btn{ border-radius: 2px; font-size: 14px; margin-top: 40px; cursor: pointer; transition: all 0.3s; }
.s-case .ljxq-btn:hover{ background-color: #4DACF0; }

/* 悬浮动画 */
.s-case:hover{box-shadow: 0 0 20px #ccc;}
.s-case:hover img{transform: scale(1.3, 1.3); }
.s-case-link img{transition: transform 0.3s !important;}
.s-case img:hover{cursor: pointer;}
.s-case:hover .s-case-link:after {background-color: rgba(0, 0, 0, .35); color: #FFF;}
.s-case .s-case-link:after { content: "认证中心"; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0);  transition: all .4s; text-align: center; line-height: 18; color: rgba(0,0,0,0); cursor: pointer; }




/* -------- 售卖页 -左右部分 --------- */
.main-box{margin-top: 14px; margin-bottom: 10px;}
.s-left{ float: left; width: 800px; background-color: #FFF;}
.s-right{ float: right; width: 290px; }
.s-right-dw{ position: fixed; width: inherit; }
.content-box{  min-height: 100px; padding: 20px; min-height: 82vh;}

.p-box{padding-top: 5px; padding-bottom: 15px;}
.p-box h2,.p-box h3{margin-bottom: 10px; color: #000; font-size: 20px;}
.p-box p{font-size: 14px; line-height: 26px; margin-bottom: 5px;}
.p-box ul{margin-left: 20px; list-style-type: none; line-height: 26px;  font-size: 14px; margin-bottom: 5px;}
.yanshi-link-box a{color: #1890ff;}
.p-box img{ max-width: 100%; border: 1px #ddd solid; transition: all 0.2s; }
.p-box img:hover{ cursor: pointer; box-shadow: 0 0 20px #eee; }

.p-box a{text-decoration: none; margin-right: 10px; line-height: 20px; display: inline-block; border-bottom: 1px solid #FFF;}
.p-box a:hover{border-bottom: 1px solid blue;}
.pdl{padding-left: 1em;}

.jg{font-size: 20px; color: #ff612f; font-weight: 400;}
.jg-ts{font-size: 12px; color: #999; padding-left: 10px;}
.skm img{width: 180px; margin-right: 5px; margin-top: 5px; cursor: pointer;}
.zd{color: #FF5722;}
.qa t{color: #666; margin-left: 10px;}
.p-box .sub-title{margin-top: 20px;}

/* 效果图预览 */
.xgt-pre-box {margin-top: 20px; margin-left: 14px;}
.xgt-pre-box img{ width: calc(33% - 5px); margin-right: 3px; margin-bottom: 3px; }
.xgt-js{ margin-top: 10px; color: #666; }


/* 表单 */
.pay-box{padding: 1em; margin-bottom: 14px; background-color: #FFF; /* border: 1px #13ce66 solid; */ /* background-color: #f0f9eb; */ /* color: green; */}
.pay-box h3{margin-bottom: 10px;}
.pay-box>p,.pay-box>div{padding: 6px 0px;}
.form-div input{height: 28px; width: calc(100% - 80px); border: 1px #999 solid; outline: 0; padding-left: 0.5em; border-radius: 2px;}
.form-div button{height: 30px; padding: 0 14px; cursor: pointer; vertical-align: middle;}
.form-div button{background-color: var(--var-primary-color); color: #FFF; border: 1px var(--var-primary-color) solid; border-radius: 2px; transition: all 0.2s; }
.form-div button:hover{background-color: #3D9CF0; }
.fo-label{color: #000;}
.dd-intro{ padding-left: 0em; }
.dd-intro>p{ line-height: 18px; color: #999; font-size: 12px; }

.zhuhshou-qr{ width: 160px; height: 160px; cursor: pointer; }

/* ajax转圈圈 */
.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }

/* -------- 自适应 --------- */
/* 媒体查询  --- 小于 800px 小屏 */
@media screen and (max-width: 800px) {
	
	.s-title{padding: 0 16px;}
	.s-width{width: 100%;}
	
	.logo-box,.copyright {display: none;}
	.main-box{ height: auto;}
	.content-box{ padding: 2em 1em;}
	.content-box h1{font-size: 50px;}
	
	/* .s-header{position: static;} */
	footer{position: static; line-height: 40px;}
}

/* 媒体查询  --- 大于 800px 大屏 */
@media screen and (min-width: 800px) {
	.content-box h1{margin-top: 120px;}
}

/* 媒体查询  --- 小于 1100px 窄屏 */
@media screen and (max-width: 1100px) {
	.logo-box{padding-left: 16px;}
	.nav-right{padding-right: 16px;}
	.s-content{padding-left: 16px;}
	/* .main-box-index{margin-top: -300px !important;} */
	/* 
	.s-width{width: 100%;}
	
	.logo-box,.copyright {display: none;}
	.main-box{ height: auto;}
	.content-box{ padding: 2em 1em;}
	.content-box h1{font-size: 50px;} */
	
	/* .s-header{position: static;} */
	/* footer{position: static; line-height: 40px;} */
}



.pre-box{
	background-color: #f5f2f0;
	padding: 1em;
	line-height: 22px;
}
.pre-box pre{ font-size: 14px; font-family: Consolas; overflow: auto;}
.pre-box pre common{ font-size: 14px;color: #708090;}