@charset "utf-8";

html,
body,
div,
p,
ul,
li,
ol,
dl,
dt,
dd,
form,
input,
textarea,
table,
tr,
td,
img,
a,
span,
em,
h1,
h2,
h3,
h4,
h5,
h6,
section {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-style: normal;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

html,
body {
	width: 100%;
	min-height: 100%;
}

body {
	font-family: "微软雅黑", arial, Helvetica, sans-serif;
	font-size: 14px;
	overflow-x: hidden;
	color: rgba(0, 0, 0, 0.9);
	background: #FAF9FB;
}

input,
select,
option,
textarea {
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	font-family: "微软雅黑", arial, Helvetica, sans-serif;
}

input[type=checkbox] {
	-webkit-appearance: checkbox;
}

img {
	border: none;
}

a,
a:hover,
a:active,
a:visited,
a:link {
	text-decoration: none !important;
	outline: 0;
}

ul li {
	margin: 0;
}

ul,
li {
	list-style: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}



.none {
	display: none;
}

.block {
	display: block;
}





.pc-reveal {
	display: flex !important;
}

.mobile-reveal {
	display: none !important;
}

.align-center {
	display: flex;
	align-items: center;
}

/*导航*/
.index-header-comp {
	position: fixed;
	width: 100vw;
	z-index: 999;
	top: 0;
}

.header-content {
	width: 1280px;
	margin: 0 auto;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo-wrap {
	display: flex;
	align-items: center;
}

.logo-wrap .logo {
	width: 91px;
	margin-right: 10px;
	flex-shrink: 0;
}

.nav-right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1007px;
}

.nav-wrap {
	display: flex;
	align-items: center;
}

.nav-wrap ul {
	padding: 0;
	margin: 0;
}

.nav-wrap ul li {
	height: 80px;
	display: flex;
	align-items: center;
	float: left;
	position: relative;
}

.nav-wrap ul li .nav-a {
	list-style: none;
	display: flex;
	align-items: center;
	margin-right: 40px;
	color: rgba(0, 0, 0, 0.9);
	white-space: nowrap;
	border-radius: 5px;
	font-size: 16px;
	float: left;
	cursor: pointer;

}

.nav-wrap ul li .nav-a .tn-icon {
	margin-left: 8px;
	font-size: 16px;
}

.nav-wrap ul li:hover .nav-a {
	/* background: #f4f8ff; */
	color: #165DFF;
}

.nav-wrap ul li:hover .nav-a .tn-icon {
	transform: rotate(180deg);
}

.nav-wrap ul li .nav-active {
	/* background: #f4f8ff; */
	color: #165DFF;
}

/*二级导航*/
.sub-nav-block {
	position: fixed;
	left: 0;
	top: 78px;
	width: 100vw;
	background: #FAF9FB;
	display: none;
	box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.1);
}

.sub-nav-content {
	width: 1280px;
	margin: 0 auto;
	padding: 24px 0 40px 273px;
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
}

.sub-nav-line {
	width: 1px;
	background: rgba(238, 238, 238, 1);
	margin-right: 100px;
}

.sub-nav-list {
	display: flex;
	flex-direction: column;
	margin-right: 100px;
}

.nav-list-title {
	font-size: 14px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.4);
	height: 22px;
}

.sub-nav-list-block {
	display: flex;
	flex-direction: column;
}

.sub-nav-item {
	margin-top: 32px;
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
}

.sub-nav-item .tn-icon {
	color: rgba(0, 0, 0, 0.6);
	font-size: 24px;
	margin-right: 12px;
}

.nav-wrap ul li:hover .sub-nav-block {
	display: block;
	transition: all 0.5s ease;
	/* 定义过渡效果 */
}




.code-block {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.nav-qrcode {
	font-size: 16px;
	color: #07C160;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.nav-qrcode .tn-icon {
	font-size: 20px;
	margin-right: 8px;
}

.nav-qrcode-hover {
	position: absolute;
	top: 30px;
	left: -30px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 9px 28px 8px #0000000d, 0 6px 16px #00000014, 0 3px 6px -4px #0000001f;
	border-radius: 4px;
	display: none;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.9);
}

.nav-qrcode-hover img {
	width: 120px;
	margin-bottom: 8px;
}

.nav-qrcode:hover .nav-qrcode-hover {
	display: flex;
}


.code-btn {
	border-radius: 8px;
	margin-left: 40px;
	color: #165DFF;
	background: transparent;
	border: 1px solid #165DFF;
	outline: none;
	text-shadow: none;
	height: 40px;
	padding: 0 24px;
	font-size: 16px;
	cursor: pointer;
}

.code-btn .iconfont {
	margin-right: 8px;
}

.enter-code-btn {
	border-radius: 8px;
	margin-left: 40px;
	color: #ffffff;
	background: #165DFF;
	border: 1px solid #165DFF;
	outline: none;
	text-shadow: none;
	height: 40px;
	padding: 0 24px;
	font-size: 16px;
	cursor: pointer;
}

/*首页*/


.banner {
	width: 100vw;
	height: 640px;
	padding: 80px 0 0;
	box-sizing: border-box;
	background: url(https://resoure-cos.jielong.com/team/web/official/image/index-bg.png);
	background-size: 100% 100%;
}

.banner-content {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.banner-title {
	font-size: 56px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	margin-top: 104px;
}

.banner-text {
	margin-top: 32px;
	line-height: 40px;
	text-align: center;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.6);
}

.banner-btn-block {
	margin-top: 68px;
	display: flex;
	align-items: center;
	justify-content: center;

}

.banner-btn {
	width: 156px;
	height: 48px;
	border-radius: 24px;
	margin: 0 8px;
	background: #165DFF;
	color: #ffffff;
	border: 1px solid #165DFF;
	font-size: 20px;
	cursor: pointer;
}

.banner-btn .tn-icon {
	font-size: 20px;
	margin-left: 8px;
}

.banner-btn-border {
	background: #ffffff;
	color: rgba(0, 0, 0, 0.9);
	border: 1px solid #DDDDDD;
}

/*首页tab*/
.index-tab-block {
	width: 100%;
	height: 1052px;
	flex-shrink: 0;
	background: linear-gradient(180deg, rgba(250, 249, 251, 0) 0%, #ECEFFC 13.89%);
	box-sizing: border-box;
	padding: 80px 0 0;
}

.index-tab-content {
	width: 1280px;
	margin: 0 auto;
}

.index-tab-tips {
	font-size: 20px;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
	margin-bottom: 32px;
}

.index-tab {
	width: 100%;
	background-image: url(https://resoure-cos.jielong.com/team/web/official/image/tab-bg1.png);
	background-size: cover;
	background-position: center;
	/* 确保图片居中 */
}

.index-tab-nav-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.index-tab-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 80px;
	font-size: 24px;
	color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.index-tab-nav:hover {
	font-weight: bold;
}

.tab-nav-active {
	font-weight: bold;
}

.index-tab-nav .tab-icon {
	width: 32px;
	margin-right: 16px;
}

.index-tab-content-block {
	width: 100%;
	padding: 56px 48px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.tab-content-left {
	display: flex;
	flex-direction: column;

}

.tab-content-left-text {
	display: flex;
	align-items: center;
	padding: 24px 0;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.9);
}

.point-border {
	width: 16px;
	height: 16px;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

.point {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.point-color1 {
	background: rgba(22, 93, 255, 0.1);
}

.point-color1 .point {
	background: #165DFF;
}

.point-color2 {
	background: rgba(39, 195, 114, 0.1);
}

.point-color2 .point {
	background: #27C372;
}

.point-color3 {
	background: rgba(150, 106, 247, 0.1);
}

.point-color3 .point {
	background: #966AF7;
}

.point-color4 {
	background: rgba(255, 144, 7, 0.1);
}

.point-color4 .point {
	background: #FF9007;
}

.tab-content-img {
	width: 650px;
}

.tab-content-img img {
	width: 100%;

}


.index-column-tab-block {
	width: 100%;
	padding: 20px 0;
}

.index-column-tab-content {
	width: 1280px;
	height: 800px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.index-column-tab-content-flip {
	flex-direction: row-reverse;
}

.index-column-tab {
	display: flex;
	flex-direction: column;

}

.column-ta-h1 {
	font-size: 32px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	margin-bottom: 40px;
}

.column-tab {
	width: 500px;
	padding: 24px;
	box-sizing: border-box;
	border-radius: 12px;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 8px;
	cursor: pointer;
}

.column-tab:hover {
	background: #ffffff;
	color: rgba(0, 0, 0, 0.9);
}

.column-tab-active {
	background: #ffffff;
	color: rgba(0, 0, 0, 0.9);
}

.index-column-img {
	width: 600px;
}

.index-column-img img {
	width: 100%;
}


.scene-block {
	width: 1280px;
	margin: 0 auto;
	padding: 100px 0;

}

.scene-block-title {
	font-size: 40px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	text-align: center;
}

.scene-item-block {
	gap: 24px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 80px;
}

.scene-item {
	width: 236px;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid #EEEEEE;
	background: #ffffff;
}
.scene-item:hover{
	box-shadow: 0 4px 22px 0 #0000000f;
}

.scene-item-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #EFF3FF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scene-item-icon .tn-icon {
	font-size: 24px;
	color: #165DFF;
}

.scene-item-title {
	font-size: 20px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	margin-top: 24px;
}

.scene-item-text {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 8px;
}

.scene-item-btn {
	width: 100%;
	height: 40px;
	border-radius: 8px;
	border: 1px solid #eeeeee;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	background: transparent;
	margin-top: 40px;
	cursor: pointer;
}


.use-brand {
	width: 100%;
	background: #ECEFFC;
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0 0 40px 40px;
}

.use-brand-title {
	font-size: 40px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	text-align: center;
}


.use-brand-content {
	width: 1280px;
	margin: 80px auto 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

.brand-block {
	width: 100%;
	height: 96px;
	overflow: hidden;
}

.brand-overflow1 {
	animation: scrollL 24s linear infinite;
}

.brand-overflow1 .brand-img {
	height: 80px;
	display: inline;
	/* 根据需要调整间距 */
}

@keyframes scrollL {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
		/* 假设每张图片宽度为100px，根据实际宽度调整 */
	}
}

.brand-overflow2 {
	animation: scrollO 28s linear infinite;
}

@keyframes scrollO {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
		/* 假设每张图片宽度为100px，根据实际宽度调整 */
	}
}


.brand-overflow2 .brand-img {
	height: 80px;
	display: inline;
	margin-right: 10px;
	/* 根据需要调整间距 */
}

.overlay-left {
	position: absolute;
	top: 0;
	left: -140px;
	width: 193px;
	height: 500px;
	flex-shrink: 0;
	background: linear-gradient(271deg, rgba(238, 241, 251, 0) 1.23%, #ECEFFC 25.24%);
}

.overlay-right {
	position: absolute;
	top: 0;
	right: -140px;
	width: 193px;
	height: 500px;
	flex-shrink: 0;
	background: linear-gradient(90deg, rgba(238, 241, 251, 0) 1.23%, #ECEFFC 25.24%);
}

.use-block {
	background: #111111;
}

.use-floating-block {
	width: 1280px;
	padding: 56px 72px;
	border-radius: 32px;
	background-image: url(https://resoure-cos.jielong.com/team/web/official/image/use-bg.png);
	background-size: cover;
	background-position: center;
	/* 确保图片居中 */
	margin: -56px auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.use-floating-title {
	font-size: 32px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
}

.floating-btn-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.floating-btn {
	padding: 0 24px;
	height: 48px;
	border-radius: 24px;
	border: none;
	background: #ffffff;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.9);
	margin-left: 16px;
	cursor: pointer;
}

.floating-btn-bg {
	background: #165DFF;
	color: #ffffff;
}

.floating-btn-bg .tn-icon {
	font-size: 20px;
	margin-left: 8px;
}

.footer-page {
	width: 100%;
	padding: 140px 0 0;
	margin-top: -40px;
	background: #111111;

}

.footer-content {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding-bottom: 24px;
}

.footer-content-left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer-logo {
	display: flex;
	flex-direction: column;
}

.footer-logo img {
	width: 91px;
}

.footer-logo-tips {
	margin-top: 24px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.footer-code {
	display: flex;
	align-items: center;
}

.footer-code-btn {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	margin-right: 32px;
	position: relative;
	cursor: pointer;
}

.footer-code-btn .tn-icon {
	font-size: 20px;
	margin-right: 8px;
}


.footer-code-hover {
	position: absolute;
	bottom: 30px;
	left: -30px;
	padding:8px;
	background: #fff;
	box-shadow: 0 9px 28px 8px #0000000d, 0 6px 16px #00000014, 0 3px 6px -4px #0000001f;
	border-radius: 4px;
	display: none;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.9);
}

.footer-code-hover img {
	width: 120px;
	margin-bottom: 8px;
}

.footer-code-btn:hover .footer-code-hover {
	display: flex;
}


.footer-content-right {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}

.footer-a-block {
	display: flex;
	flex-direction: column;
	margin-right: 180px;

}

.footer-a-block:last-child {
	margin-right: 0;
}

.footer-a-blcok-title {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.6);
}

.footer-a-wrap {
	gap: 32px;
	margin-top: 32px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	max-width: 60px;
}

.footer-a-wrap-width {
	max-width: 174px;
}

.footer-a-wrap a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

.icp {
	padding: 32px 0;
	text-align: center;

}

.icp a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}


/*产品功能*/

.function-layout-block {
	padding: 20px 0;
	border-radius: 0 0 40px 40px;
	background: #FAF9FB;
	position: relative;
	z-index: 2;

}

.function-layout {
	width: 1280px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
}

.function-layout-col {
	width: 1280px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.function-layout-col h1 {
	font-size: 32px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
}

.function-layout-col img {
	width: 100%;
	margin-top: 64px;
}

.function-layout-flip {
	flex-direction: row-reverse;
}

.function-layout-text {
	display: flex;
	flex-direction: column;
}

.function-layout-text h1 {
	width: 460px;
	font-size: 32px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	padding: 24px 0 40px;
}

.function-layout-text h3 {
	width: 460px;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.9);
	padding: 24px 0;
	margin-bottom: 16px;
}

.function-layout-img img {
	height: 600px;
}

/*产品结束*/

/*解决方案*/
.solution-page {
	width: 100%;
}

.solution-banner {
	width: 100vw;
	height: 640px;
	padding: 80px 0 0;
	box-sizing: border-box;
	background: url(https://resoure-cos.jielong.com/team/web/official/image/index-bg.png);
	background-size: 100% 100%;
}

.solution-banner-content {
	width: 1280px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.solution-banner-left {
	display: flex;
	flex-direction: column;
}

.solution-banner-title {
	font-size: 56px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
}

.solution-banner-text {
	margin-top: 24px;
	line-height: 40px;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.6);
}

.solution-banner-right img {
	height: 493px;
}

.solution-layout-block {
	padding: 96px 0 100px;
	border-radius: 0 0 40px 40px;
	background: #FAF9FB;
	position: relative;
	z-index: 2;
}

.solution-layout-tab-block {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

}

.solution-layout-tab-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	border-bottom: 1px solid #DDDDDD;
}

.solution-layout-tab {
	padding: 24px 0;
	font-size: 28px;
	color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
}

.solution-layout-tab:hover {
	color: #165DFF;
	font-weight: bold;

}

.solution-layout-tab-active {
	color: #165DFF;
	font-weight: bold;
	border-bottom: 2px solid #165DFF;
	margin-bottom: -1px;
}


.solution-layout-content {
	width: 1280px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
}

.solution-layout-content-filp {
	flex-direction: row-reverse;
}

.solution-layout-left img {
	height: 600px;
}

.solution-layout-right {
	display: flex;
	flex-direction: column;
	width: 533px;
}

.solution-layout-right h1 {

	font-size: 32px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	padding: 24px 0 40px;
}

.solution-layout-right-text {
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
}

.solution-layout-right-text-title {
	font-size: 20px;
}

.solution-layout-right-text-title .tn-icon {
	font-size: 20px;
	margin-right: 12px;

}

.solution-layout-right-text-text {
	display: flex;
	align-items: flex-start;
	font-size: 20px;
	margin-top: 16px;
	padding-left: 32px;
	word-wrap: break-word;
	word-break: break-all;
}

.solution-layout-right-text-text .dian {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	flex-shrink: 0;
	margin: 10px 8px 0 8px;
}

.layout-text-error .solution-layout-right-text-title .tn-icon {
	color: #F53F3F;
}

.layout-text-error .solution-layout-right-text-title,
.layout-text-error .solution-layout-right-text-text {
	color: rgba(0, 0, 0, 0.6);
}

.layout-text-error .solution-layout-right-text-text .dian {
	background: rgba(0, 0, 0, 0.6);
}

.layout-text-success .solution-layout-right-text-title .tn-icon {
	color: #07C160;
}

.layout-text-success .solution-layout-right-text-text,
.layout-text-success .solution-layout-right-text-title {
	color: rgba(0, 0, 0, 0.9);
}

.layout-text-success .solution-layout-right-text-text .dian {
	background: rgba(0, 0, 0, 0.9);
}

.solution-layout-a a {
	margin-left: 32px;
	font-size: 20px;
	color: #165DFF;
	cursor: pointer;
	display: inline-block;
}

.solution-layout-a a .tn-icon {
	margin-left: 12px;
	font-size: 20px;
}

/*解决方案结束*/

/*使用模板*/
.solution-template-block {
	width: 100%;
	background: #ECEFFC;
	padding: 80px 0;
	border-radius: 0 0 40px 40px;
	position: relative;
	z-index: 2;
}

.solution-template-title {
	font-size: 40px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	text-align: center;
	margin-bottom: 45px;
}

.solution-template-content {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

/*使用模板结束*/

/*单个模板*/
.template-list-comp {
	width: 236px;
	height: 386px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #dddddd;
	background: #ffffff;
	position: relative;
}
.hover-operation {
	width: 100%;
	height: 58px;
	background: #0009;
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	align-items: center;
	justify-content: center;
	transition: top .2s;
	z-index: 3;
}

.hover-operation .btn {
	margin: 0 8px;
	border-radius: 4px;
	height: 32px;
	line-height: 32px;
	padding: 0 15px;
	font-size: 14px;
	color: #333;
	background: #fff;
	border-color: #d9d9d9;
	border: 1px solid transparent;
	box-sizing: border-box;
}

.hover-operation .btn-use {
	margin: 0 8px;
	border-radius: 4px;
	height: 32px;
	line-height: 32px;
	padding: 0 15px;
	font-size: 14px;
	color: #fff;
	background: #165DFF;
	border-color: #165DFF;
	border: 1px solid transparent;
	box-sizing: border-box;
}

.template-list-comp:hover {
	transform: scale(1.1);
}

.template-list-comp:hover .hover-operation {
	display: flex;
}

.template-list-comp:hover .template-title {
	display: none;
}


.template-list-comp .template-list-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.template-list-comp .template-list-img img {
	position: absolute;
	top: 0;
	width: 100%;
	/* 移除固定的过渡时间，由JavaScript控制 */
}

.template-tag {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 0 16px;
	height: 24px;
	white-space: nowrap;
	border-radius: 12px;
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	font-size: 12px;
	color: #ffffff;
	z-index: 2;
}

.template-title {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.1));
	background: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

/*单个模板结束*/



/*价格*/
.price-mobile-reveal {
	display: none;
}



.price-page .pricebanner {
	width: 100%;
	box-sizing: border-box;
	padding-top: 80px;
	background: url(https://resoure-cos.jielong.com/team/web/official/image/index-bg.png);
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.price-page .pricebanner .price-title {
	font-size: 56px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	margin: 120px 0;

}


.price-page .pricebanner .price-buy {
	display: flex;
	align-items: center;
	justify-content: center;
}

.price-page .pricebanner .price-buy .buy-list {
	width: 320px;
	height: 406px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	padding: 56px 0;
	margin: 0 20px;
	box-sizing: border-box;
	border-radius: 16px;
	border: 1px solid #eeeeee;
	background: #ffffff;
	box-shadow: 0 4px 22px 0 #0000000f;

}

.price-page .pricebanner .price-buy .buy-list:hover {
	margin-top: -32px;
	
}

.buy-list-top {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.price-page .pricebanner .price-buy .buy-list .title {
	font-size: 30px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
}

.price-page .pricebanner .price-buy .buy-list .text {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 16px;
}

.price-page .pricebanner .price-buy .buy-list .price {
	font-size: 30px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
	margin-top: 32px;

}

.price-page .pricebanner .price-buy .buy-list .price span {
	font-size: 16px;
	font-weight: 400;
}

.price-page .pricebanner .price-buy .buy-list .month-price {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 8px;
}

.price-page .pricebanner .price-buy .buy-list .btn {
	border-radius: 8px;
	padding: 10px 24px;
	color: rgba(0, 0, 0, 0.9);
	background-color: transparent;
	border: #DDDDDD 1px solid;
	box-sizing: border-box;
	font-size: 20px;
	cursor: pointer;
}

.price-page .pricebanner .price-buy .buy-list .blue-btn {
	background-color: #1677ff;
	border: #1677ff 1px solid;
	color: #ffffff;

}

.price-page .pricebanner .price-buy .buy-list .yellow-btn {
	background-color: #FF8B2D;
	border: #FF8B2D 1px solid;
	color: #ffffff;
}

.reckoner-btn {
	font-size: 16px;
	color: #426BC0;
	margin-top: 32px;
	cursor: pointer;
}

.price-table {
	width: 1044px;
	margin: 74px auto 100px;
	padding-bottom: 20px;
	position: relative;
	z-index: 1;

}

.price-table .table-hover-border1 {
	width: 248px;
	height: 100%;
	border: transparent 1px solid;
	border-radius: 12px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	display: none;
	box-sizing: border-box;

}

.price-table .table-hover-border1 .border-title1 {
	font-size: 18px;
	font-weight: bold;
	color: #165DFF;
	margin-top: 23px;
	padding: 0 16px 0 15px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	background: #FAF9FB;
}

.price-table .table-hover-border2 {
	width: 248px;
	height: 100%;
	border: transparent 1px solid;
	border-radius: 12px;
	position: absolute;
	top: 0;
	right: 248px;
	z-index: -1;
	display: none;
	box-sizing: border-box;

}

.price-table .table-hover-border2 .border-title2 {
	font-size: 18px;
	font-weight: bold;
	color: #165DFF;
	margin-top: 23px;
	padding: 0 16px 0 16px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	background: #FAF9FB;
}

.price-table .table-hover-border3 {
	width: 248px;
	height: 100%;
	border: transparent 1px solid;
	border-radius: 12px;
	position: absolute;
	top: 0;
	right: 496px;
	z-index: -1;
	display: none;
	box-sizing: border-box;

}

.price-table .table-hover-border3 .border-title3 {
	font-size: 18px;
	font-weight: bold;
	color: #165DFF;
	margin-top: 23px;
	padding: 0 16px 0 15px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	background: #FAF9FB;
}

.price-table .table-th {
	width: 100%;
	display: flex;
	align-items: flex-start;
	position: relative;
	z-index: -2;

}

.price-table .table-th .th-title1 {
	font-size: 14px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	width: 299px;
	margin-top: 48px;
	margin-bottom: 16px;
	padding: 0 16px;
	box-sizing: border-box;
}

.price-table .table-th .th-title2 {
	font-size: 18px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	width: 248px;
	margin-top: 24px;
	padding: 0 16px;
	box-sizing: border-box;
	position: relative;
	z-index: -2;
}

.price-table .table-tr {
	display: flex;
	align-items: center;
	border-bottom: #eeeeee 1px solid;

}

.price-table .table-tr .tn-icon {
	font-size: 24px;
}

.price-table .table-tr .table-td1 {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	width: 300px;
	padding: 16px;
	box-sizing: border-box;
}

.price-table .table-tr .table-td2 {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	width: 248px;
	padding: 16px;
	box-sizing: border-box;
	border-left: transparent 1px solid;
	border-right: transparent 1px solid;

}

.price-table .table-tr .table-td2:hover {
	border-left: #165DFF 1px solid;
	border-right: #165DFF 1px solid;

}

.price-table .table-tr .table-td2:hover .table-hover-border3 {
	border: #165DFF 1px solid;
	display: block;
}

.price-table .table-tr .table-td3 {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	width: 248px;
	padding: 16px;
	box-sizing: border-box;
	border-left: transparent 1px solid;
	border-right: transparent 1px solid;

}

.price-table .table-tr .table-td3:hover {
	border-left: #165DFF 1px solid;
	border-right: #165DFF 1px solid;

}

.price-table .table-tr .table-td3:hover .table-hover-border2 {
	border: #165DFF 1px solid;
	display: block;
}

.price-table .table-tr .table-td4 {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	width: 248px;
	padding: 16px;
	box-sizing: border-box;
	border-left: transparent 1px solid;
	border-right: transparent 1px solid;

}

.price-table .table-tr .table-td4:hover {
	border-left: #165DFF 1px solid;
	border-right: #165DFF 1px solid;

}

.price-table .table-tr .table-td4:hover .table-hover-border1 {
	border: #165DFF 1px solid;
	display: block;
}

.price-table .table-tr:hover {
	background: #ffffff;
}

/*价格结束*/

.familiar-pc {
	padding: 80px 0;
	border-radius: 0 0 40px 40px;
	position: relative;
	z-index: 2;
	background: #FAF9FB;
}

.familiar-pc .familiar-title {
	margin-bottom: 80px;
	text-align: center;
	font-size: 40px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: bold;
}



.familiar-pc .familiar-content {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	width: 1280px;
	margin: 0 auto;

}

.familiar-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #EFF3FF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.familiar-icon .tn-icon {
	font-size: 24px;
	color: #165DFF;
}

.familiar-pc .familiar-content .familiar-list1 {
	width: 410px;
	padding: 32px 0 32px 24px;
	box-sizing: border-box;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	border: #EEEEEE 1px solid;
	background: #ffffff;
	border-radius: 16px;
	margin-right: 24px;
	margin-bottom: 24px;

}

.familiar-pc .familiar-content .service {
	color: #426BC0;
	cursor: pointer;
}

.familiar-pc .familiar-content .familiar-list1:nth-child(3) {
	margin-right: 0;
}

.familiar-pc .familiar-content .familiar-list1 .list-title {
	font-size: 20px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: 8px;
}

.familiar-pc .familiar-content .familiar-list2 {
	width: 100%;
	padding: 32px 24px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	border: #EEEEEE 1px solid;
	background: #ffffff;
	border-radius: 16px;

}

.familiar-pc .familiar-content .familiar-list2 .list-title {
	font-size: 20px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.9);
	margin-bottom: 8px;
}



/*计算器弹窗*/
.calc-price-popup-comp {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.45);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calc-price-popup-comp .popup-content {
	width:500px;
	border-radius: 8px;
	background: #ffffff;
}

.calc-price-popup-comp .popup-content .popup-title {
	padding: 16px 24px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	color:rgba(0, 0, 0, 0.9);
	font-weight: bold;
}

.calc-price-popup-comp .popup-content .popup-title .tn-icon {
	padding: 4px 0 4px 10px;
	color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
	font-size:20px;
}

.calc-price-popup-comp .popup-content .price-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	padding:12px 24px;
	line-height: 32px;
}
.calc-price-popup-comp .popup-content .price-item .select-block{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.calc-price-popup-comp .popup-content .price-item .select-block .select-item{
	width:214px;
	height:135px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size:16px;
	font-weight: bold;
	color:rgba(0, 0, 0, 0.9);
	border: 1px solid #EEEEEE;
	background: #F7F8FA;
	border-radius: 8px;
	position: relative;
	cursor: pointer;
}
.calc-price-popup-comp .popup-content .price-item .select-block .select-item .select-tips{
	font-size: 12px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 8px;
	line-height: 20px;
}

.calc-price-popup-comp .popup-content .price-item .select-block .select-item .icon-block{
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	border-radius:0 8px 0 8px;
	background:#165DFF ;
	color: #fff;
	position: absolute;
	right: -1px;
	top: -1px;
	display: none;
}
.calc-price-popup-comp .popup-content .price-item .select-block .select-item .icon-block .tn-icon{
	font-size: 20px;
}

.calc-price-popup-comp .popup-content .price-item .select-block .select-item-active{
	background: #ffffff;
	border-color: #165DFF;
}
.calc-price-popup-comp .popup-content .price-item .select-block .select-item-active .icon-block{
	display: flex;
}


.calc-price-popup-comp .popup-content .price-item .title {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
}

.counter{
	display: flex;
	align-content:center;
}
.counter-btn{
	width: 32px;
	height: 32px;
	display: flex;
	align-items:center;
	justify-content: center;
	border-radius:4px;
	border: 1px solid #DDDDDD;
	cursor: pointer;
}
.counter-btn .tn-icon{
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
}
.counter-btn-disabled{
	background: #eeeeee;
	cursor: not-allowed;
}
.counter-btn-disabled .tn-icon{
	color: rgba(0, 0, 0, 0.6);
}
.counter-input{
	width: 72px;
	height: 32px;
	display: flex;
	align-items:center;
	justify-content: center;
	border-radius: 4px;
	border: 1px solid #DDDDDD;
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	margin: 0 4px;
	text-align: center;
}


.calc-price-popup-comp .popup-content .popup-footer {
	padding: 16px 24px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.calc-price-popup-comp .popup-content .popup-footer .popup-select-block {
	position: relative;
	color: rgba(0, 0, 0, 0.9);
	font-size: 14px;
}

.calc-price-popup-comp .popup-content .popup-footer .popup-select-block .tn-icon {
	position: absolute;
	right: 10px;
	top: 8px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.4);
	z-index: 3;
}

.calc-price-popup-comp .popup-content .popup-footer .select {
	border: #eeeeee 1px solid;
	width: 160px;
	height: 32px;
	border-radius: 8px;
	padding: 0 16px 0 10px;
	position: relative;
	margin-left: 8px;
}

.calc-price-popup-comp .popup-content .popup-footer .money {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
}

.calc-price-popup-comp .popup-content .popup-footer .money span {
	font-size: 24px;
	color: #1677ff;
	margin-left: 8px;
}

.calc-price-popup-comp .popup-content .popup-footer .money .tn-icon {
	font-size: 16px;
	margin-left:8px;
	color:rgba(0, 0, 0, 0.6);
	cursor: pointer;
	position: relative;
}

.calc-price-popup-comp .popup-content .hover-icon-block {
	position: absolute;
	left: -150px;
	bottom: 30px;
	display: none;
}

.calc-price-popup-comp .popup-content .popup-footer .money .tn-icon:hover .hover-icon-block {
	display: block;
}

.calc-price-popup-comp .popup-content .hover-icon-block .questioncircle-detail {
	width: 300px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
	padding: 12px;

}

.hover-icon-block .questioncircle-detail .list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: #eeeeee 1px solid;
	padding: 12px 0;
	font-size: 14px;
	color: #666;

}

.hover-icon-block .questioncircle-detail .list:last-child {
	border: none;
}



/*模板库*/

.template-page {
	width: 100%;
	box-sizing: border-box;
	background: #FAF9FB;
	border-radius: 0 0 40px 40px;
	position: relative;
	z-index: 2;
}
.template-bg{
	padding: 80px 0 0;
	background: url(https://resoure-cos.jielong.com/team/web/official/image/index-bg.png);
	background-repeat: no-repeat;
	background-position: top center;

}
.template-page-content{
	width: 1280px;
	margin: 0 auto;
	min-height:calc(100vh - 563px);
	padding: 1px 0;
}


.floating-template-nav-block{
	position: fixed;
	top:112px;
	left: calc(50vw - 640px);
	width:176px;
	max-height: calc(100vh - 620px);
	overflow-y: auto;
	padding-right: 8px;
	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 99px;
		box-shadow: inset 0 0 5px rgba(204, 201, 201, 0.71);
		-webkit-box-shadow: inset 0 0 5px rgba(204, 201, 201, 0.71);
		background: theme('jl.colorCardHoverBg');
	}

	&::-webkit-scrollbar-thumb:hover {
		background: theme('jl.colorCardHoverBg');
	}

	&::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
		box-shadow: inset 0 0 5px rgb(255, 255, 255);
		border-radius: 99px;
		background: theme('jl.colorWhite');
	}

}
.floating-template-nav-block .template-nav{
	width: 100%;
	padding: 8px 24px 8px 16px;
	display:flex;
	align-items:flex-start;
	margin-bottom: 8px;
	border-radius: 8px;
	color: rgba(0, 0, 0, 0.9);
	font-size: 16px;
	line-height: 24px;
	word-break: break-all;
	word-wrap: break-word;
	cursor: pointer;
}
.floating-template-nav-block .template-nav .tn-icon{
	font-size: 16px;
	line-height: 24px;

	margin-right: 8px;
	color: rgba(0, 0, 0, 0.9);
}
.floating-template-nav-block .template-nav img{
	width: 16px;
	margin-top: 4px;
	margin-right: 8px;
	flex-shrink: 0;
}

.floating-template-nav-block .template-nav:hover{
	background: #E3EBFF;
	color: #165DFF;
} .floating-template-nav-block .template-nav:hover .tn-icon{
	  color: #165DFF;
  }
.floating-template-nav-block .template-nav-active{
	background: #E3EBFF;
	color: #165DFF;
}
.floating-template-nav-block .template-nav-active .tn-icon{
	color: #165DFF;
}

.template-left-width{
	margin-left: 222px;
	margin-top:32px;
}
.template-block-title-wrap{
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}
.template-block-title{
	font-size: 24px;
	font-weight: bold;
	color:rgba(0, 0, 0, 0.9) ;
}
.template-block-classification{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}
.template-block-classification a{
	min-width: 96px;
	padding: 6px 16px;
	text-align: center;
	border-radius: 8px;
	font-size:16px;
	color:rgba(0, 0, 0, 0.9) ;
	cursor: pointer;
}
.template-block-classification .active-a{
	background: #DBE6FF;
	color: #165DFF;
	font-weight:bold;
}
.template-block-classification a:hover{
	background: #DBE6FF;
	color: #165DFF;
	font-weight:bold;
}
.template-search-block-wrap{
	margin:0 0 40px 51px;
}
.template-search-block{
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #ffffff;
	border-radius: 8px;
	width: 914px;
	height: 48px;
	display: flex;
	align-items: center;

}
.template-search-result{
	margin-top:16px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	word-break: break-all;
	word-wrap: break-word;
}
.template-search-result .tn-icon{
	font-size: 16px;
	color:rgba(0, 0, 0, 0.9) ;
	margin-right: 8px;
	cursor: pointer;
}
.search-result-title{
	font-size: 16px;
	font-weight: bold;
	color:rgba(0, 0, 0, 0.9) ;
	margin-right: 24px;
}
.template-search-block .tn-icon{
	margin: 0 8px 0 12px;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.25);
}
.template-search-input{
	width: 100%;
	height: 100%;
	background: transparent;
	font-size: 16px;
}
.template-search-input::placeholder{
	color: rgba(0, 0, 0, 0.15);
}
.template-block-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 32px;
}
.more-template-wrap{
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
}
.more-template-btn{
	font-size:16px;
	color: #165DFF;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.more-template-btn .tn-icon{
	font-size: 20px;
	margin-left: 8px;
	transform: rotate(-45deg);
}


.template-empty {
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.template-empty .empty-img {
	width:300px;
}

.template-empty .empty-title {
	font-size: 16px;
	color: #00000073;
	line-height: 20px;
	display: flex;
	align-items: center;
	margin-top:16px;
}

.template-empty .empty-hover {
	font-size: 14px;
	color: #2e6eff;
	line-height: 20px;
	position: relative;
	cursor: pointer;
	position: relative;
}

.template-empty .empty-hover-block {
	position: absolute;
	top: 25px;
	left: -40px;
	width: 180px;
	height: 180px;
	background: #fff;
	box-shadow: 0 0 10px 3px #0000001a;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	display: none;
	z-index: 99;
	padding: 16px;
}

.template-empty .empty-hover-block img {
	width: 100%;
}

.template-empty .empty-hover:hover .empty-hover-block {
	display: block;
}

.pagination-block{
	display: flex;
	align-items: center;
	justify-content:flex-end;
	margin-bottom: 24px;
}
.pagination-a{
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid transparent;
	margin: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}
.pagination-a:hover{
	border: 1px solid #165DFF;
	background: #ffffff;
	color: #165DFF;
}
.pagination-active-a{
	border: 1px solid #165DFF;
	background: #ffffff;
	color: #165DFF;
}
.icon-right{
	transform: rotate(180deg);
}
.pagination-select-block{
	margin-left:12px;
	position: relative;
	height: 32px;
}
.pagination-select-block .tn-icon{
	position: absolute;
	top: 8px;
	right: 8px;
}
.pagination-select{
	width: 100%;
	height: 32px;
	padding-left: 12px;
	padding-right: 32px;
	border: 1px solid #DDDDDD;
	border-radius: 8px;

}


/*模板详情*/
.official-template-details-page {
	width: 100%;
	min-height: 30vh;
}





/* 使用这个模板的人也在用*/
.associated-templates {
	display: flex;
	flex-direction: column;
	padding: 16px 32px;
	background: #ffffff;
	border-top: #f6f7fb 8px solid;}
.associated-templates  .title {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	padding: 8px 0;
	display: flex;
	align-items: center;}
.associated-templates  .title .line {
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background:#165DFF;
	margin-right: 8px;
}
.associated-templates .list-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.associated-templates .list-wrap .item {
	font-size: 14px;
	color: #165DFF;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 270px;
	margin: 8px 16px 8px 0;
	padding: 8px 0;
	cursor: pointer;
	padding: 8px;
	box-sizing: border-box;
	background:#EFF3FF;
	border-radius: 8px;
}
.associated-templates .list-wrap .item:nth-child(4n) {
	margin-right: 0;
}


/*视频弹窗*/
.video-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display:flex;
	align-items: center;
	justify-content: center;
}

.video-popup .popup-content {
	width:1000px;
	display: flex;
	justify-content: space-between;
}

.video-popup .popup-content .video {
	width:970px;
}

.video-popup .popup-content .tn-icon {
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
}

.template-popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display:flex;
	align-items: center;
	justify-content: center;
}
.template-popup-content{
	width: 1200px;
	background: #F6F7FB;
	border-radius: 16px;
	overflow: hidden;
}
.template-popup-hred{
	width: 100%;
	padding:16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
}
.template-popup-hred-title{
	font-size:16px;
	color: rgba(0, 0, 0, 0.6);
	width: 100px;
}
.template-popup-hred-close{
	width: 100px;
	font-size: 20px;
	color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: flex-end;
}
.template-popup-hred-close .tn-icon{
	cursor: pointer;
}
.template-popup-tab{
	display: flex;
	align-items: center;
	justify-content: center;
}
.template-popup-tab .tn-icon{
	font-size: 28px;
	color: rgba(0, 0, 0, 0.6);
	margin: 0 24px;
	cursor: pointer;
}
.template-popup-tab .popup-tab-active{
	color: #165DFF;
}
.template-popup-content-scroll{
	height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;

	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 99px;
		box-shadow: inset 0 0 5px rgba(204, 201, 201, 0.71);
		-webkit-box-shadow: inset 0 0 5px rgba(204, 201, 201, 0.71);
		background: theme('jl.colorCardHoverBg');
	}

	&::-webkit-scrollbar-thumb:hover {
		background: theme('jl.colorCardHoverBg');
	}

	&::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
		box-shadow: inset 0 0 5px rgb(255, 255, 255);
		border-radius: 99px;
		background: theme('jl.colorWhite');
	}
}
.template-popup-footer{
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	margin-top: 8px;
}
.scan-code-btn {
	width: 140px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 4px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;

	background: #ffffff;
	color: rgba(0, 0, 0, 0.9);
	border:1px solid #E7E7E7;
	cursor: pointer;
	position: relative;
}

.scan-code-btn-hover {
	display: none;
	align-items: center;
	position: absolute;
	left:-28px;
	bottom: 48px;
	z-index: 99;

}

.scan-code-btn-hover .hover-img-lixt {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 15px 10px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin: 0 8px;
}

.scan-code-btn-hover .hover-img-lixt .img {
	width: 150px;
	height: 150px;
}

.scan-code-btn-hover .hover-img-lixt .text {
	text-align: center;
	font-size: 12px;
	color: #999999;
	line-height: 15px;
	margin-top: 10px;
}
.scan-code-btn:hover{
	color: #165DFF;
	border: #165DFF 1px solid;
}
.scan-code-btn:hover .scan-code-btn-hover {
	display: flex;
}

.template-popup-footer-content{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.popup-footer-btn{
	width: 140px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 4px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	color:#165DFF;
	background: #ffffff;
	border: #165DFF 1px solid;
	cursor: pointer;
	margin-left: 8px;
}
.btn-border-color{
	color: rgba(0, 0, 0, 0.9);
	border-color: #E7E7E7;
	position: relative;
}
.btn-border-color:hover{
	color: #165DFF;
	border: #165DFF 1px solid;
}
.btn-border-hover{
	position: absolute;
	left:0;
	bottom:40px;
	z-index: 99;
	display: none;
}
.btn-border-hover-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	padding:8px 0;
	background: #ffffff;
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin-bottom: 8px;

}
.btn-border-color:hover .btn-border-hover{
	display: flex;
}
.btn-border-hover-content .btn-border-hover-a{
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
}
.btn-border-hover-content .btn-border-hover-a:hover{
	color: #165DFF;
}

.template-popup-footer-content .tn-icon{
	font-size: 20px;
	color:rgba(0, 0, 0, 0.6) ;
	margin: 0 16px 0 8px;
	cursor: pointer;
}

.customer-service-block{
	width: 60px;
	height:60px;
	background: #165DFF;
	border-radius: 50%;
	position: fixed;
	right: 60px;
	bottom: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 99;
}
.customer-service-block .tn-icon{
	font-size: 36px;
	color: #ffffff;
}
.customer-service-hover{
	display: none;
	width: 174px;
	padding: 12px;
	box-shadow: 0 9px 28px 8px #0000000d, 0 6px 16px #00000014, 0 3px 6px -4px #0000001f;
	background: #ffffff;
	border-radius: 8px;
	border:#DDDDDD 1px solid ;
	position: absolute;
	left: -180px;
	bottom: 0;
}
.customer-service-hover img{
	width: 100%;
}
.customer-service-text{
	padding: 8px 0 4px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}
.customer-service-block:hover .customer-service-hover{
	display: block;
}

/*适配手机端*/
@media screen and (max-width: 1200px) {
	.price-pc-reveal {
		display: none;
	}

	.mobile-reveal {
		display: flex !important;
	}

	.pc-reveal {
		display: none !important;
	}


	/*手机端导航*/
	.sp_header {
		height: 88px;
		overflow: hidden;
		background: #fff;
		position: fixed;
		z-index: 99;
		width: 100%;
		padding: 0 40px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: #eeeeee 1px solid;
	}

	.sp_logo {
		float: left;
	}

	.sp-program {
		font-size: 28px;
		color: #07c05f;
		margin-right: 40px;
	}

	.sp-program .tn-icon {
		font-size: 28px;
		margin-right: 10px;
	}

	.sp_logo a {
		display: flex;
		align-items: center;
	}

	.sp_logo a .logo {
		width: 110px;
		margin-right: 16px;
		flex-shrink: 0;
	}

	.sp_logo a .slogan {
		width: 180px;
	}

	.sp_nav {
		width: 50px;
		float: right;
		position: relative;
		cursor: pointer;
		height: 30px;
		margin-top: 15px;
	}

	.sp_nav span {
		display: block;
		background: #707070;
		width: 30px;
		height: 2px;
		position: absolute;
		left: 10px;
		transition: all ease 0.35s;
	}

	.sp_nav span:nth-of-type(1) {
		top: 0px;
	}

	.sp_nav span:nth-of-type(2) {
		top: 10px;
	}

	.sp_nav span:nth-of-type(3) {
		top: 20px;
	}

	.sp_nav_se span:nth-of-type(1) {
		top: 10px;
		transform: rotate(45deg);
	}

	.sp_nav_se span:nth-of-type(2) {
		width: 0;
	}

	.sp_nav_se span:nth-of-type(3) {
		top: 10px;
		transform: rotate(-45deg);
	}

	.sjj_nav {
		position: fixed;
		z-index: 9;
		background: #ffffff;
		width: 100%;
		padding: 0 40px;
		box-sizing: border-box;
		height: calc(100vh - 88px);
		font-size: 14px;
		line-height: 40px;
		top: -100%;
		left: 0;
		overflow: auto;
		overflow-x: hidden;
		transition: top ease 0.35s;
		border-top: #eeeeee 1px solid;
	}

	.nav_show {
		top: 89px;
	}

	.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 {
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.sjj_nav ul li i {
		position: absolute;
		top: 30px;
		right: 0px;
		width: 100px;
		height: 30px;
		text-align:right;
	}

	.sjj_nav ul li {
		font-size: 28px;
		color: rgba(0, 0, 0, 0.9);
		padding: 30px 0;
		position: relative;
		float: left;
		width: 100%;
	}

	.sjj_nav ul li a {
		color: rgba(0, 0, 0, 0.9);
	}

	/* .sjj_nav > ul > li:last-child {
		  border-bottom: 1px #ddd solid;
		} */

	.sjj_nav ul li i svg {
		transform: rotate(-90deg);
		transition: all ease 0.35s;
		width: 30px;
		height: 30px;
		fill: rgba(0, 0, 0, 0.6);
	}

	.sjj_nav ul li .sjj_nav_i_se svg {
		transform: rotate(0deg);
		fill: rgba(0, 0, 0, 0.6);
	}

	.mobile-sub-nav-block {
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.block-title {
		font-size: 28px;
		color: rgba(0, 0, 0, 0.6);
		padding: 24px 0;
		border-bottom: 1px solid #eeeeee;
	}

	.mobile-sub-nav-block ul {
		width: 100%;
	}

	.mobile-sub-nav-block li {
		float: left;
		width: 50% !important;
		padding: 0 !important;
	}

	.mobile-sub-nav {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 24px 0;
		font-size: 28px;
		color: rgba(0, 0, 0, 0.9);
	}

	.mobile-sub-nav .tn-icon {
		font-size: 32px;
		margin-right: 16px;
	}


	/*手机端导航结束*/

	.index-header-comp .header-content {
		width: 100%;
		padding: 0 5%;
	}

	/*首页*/
	.banner {
		height: auto;
	}

	.banner-content {
		width: 100%;
	}

	.banner-text {
		padding: 0 48px;
		font-size: 24px;
	}

	.banner-btn {
		width: 200px;
		height: 60px;
		border-radius: 30px;
		font-size: 28px;
		margin: 0 16px;
	}

	.banner-btn .tn-icon {
		font-size: 28px;
	}

	.index-tab-content {
		width: 100%;
	}

	.index-tab-tips {
		font-size: 24px;
	}

	.index-tab-block {
		height: auto;
	}

	.index-tab-content-block {
		flex-direction: column;
		padding: 24px 48px;
		height: 1000px;
	}

	.index-tab {
		background-image: none !important;
	}

	.index-tab-nav-block {
		padding: 0 48px;
	}

	.index-tab-nav {
		flex: 0;
		font-size: 32px;
		white-space: nowrap;
	}

	.index-tab-nav .tab-icon {
		width: 36px;
	}

	.tab-nav-active {
		border-bottom: 4px solid #165DFF;
	}

	.tab-content-left-text {
		font-size: 28px;
	}

	.tab-content-img {
		width: 100%;
	}

	.index-column-tab-content {
		width: 100%;
		height: auto;
		padding: 48px;
		flex-direction: column;
	}

	.index-column-tab {
		width: 100%;
	}

	.column-tab {
		width: 100%;
		font-size: 28px;
	}

	.index-column-img {
		width: 100%;
	}

	.scene-block {
		width: 100%;
		padding: 48px;
	}

	.scene-item-block {
		justify-content: space-between;
		margin-top: 40px;
	}

	.scene-item {
		width: 48%;
	}

	.scene-item-icon {
		width: 60px;
		height: 60px;
	}


	.scene-item-icon .tn-icon {
		font-size: 32px;
	}

	.scene-item-title {
		font-size: 28px;
	}

	.scene-item-text {
		font-size: 20px;
	}

	.scene-item-btn {
		height: 60px;
		font-size: 24px;
	}

	.use-brand-content {
		width: 100%;
		margin-top: 40px;
	}

	.overlay-left {
		display: none;
	}

	.overlay-right {
		display: none;
	}

	.use-floating-block {
		width: 90%;
		padding: 32px;
		flex-direction: column;
	}

	.use-floating-title {
		text-align: center;
	}

	.floating-btn {
		margin: 24px 16px 0;
		height: 60px;
		font-size: 28px;
		border-radius: 30px;
	}

	.floating-btn .tn-icon {
		font-size: 30px;
	}

	.footer-content {
		width: 100%;
		padding: 0 48px 48px;
		box-sizing: border-box;
		flex-direction: column;
	}

	.footer-content-left {
		flex-direction: row;
		margin-bottom: 56px;
	}

	.footer-logo img {
		width: 120px;
	}

	.footer-logo-tips {
		font-size: 20px;
	}

	.footer-code-btn {
		font-size: 24px;
	}

	.footer-code-btn .tn-icon {
		font-size: 30px;
		margin-right: 16px;
	}

	.footer-code-hover {
		display: none !important;
	}

	.footer-content-right {
		width: 100%;
		justify-content: space-between;
	}

	.footer-a-block {
		margin-right: 0;
	}

	.footer-a-blcok-title {
		font-size: 24px;
	}

	.footer-a-wrap {
		max-width: none;
		align-items: flex-start;
		flex-direction: column;
	}

	.footer-a-wrap a {
		font-size: 22px;
		white-space: nowrap;
	}

	.icp a {
		font-size: 22px;
	}

	/*产品功能手机端*/
	.function-layout {
		width: 100%;
		padding: 48px;
		box-sizing: border-box;
		flex-direction: column;
	}

	.function-layout-col {
		width: 100%;
		padding: 48px;
		box-sizing: border-box;
	}

	.function-layout-col h1 {
		width: 100%;
	}

	.function-layout-col img {
		width: 100%;
	}

	.function-layout-text h1 {
		padding: 24px 0;
		width: 100%;
	}

	.function-layout-text h3 {
		width: 100%;
		font-size: 28px;
		padding: 8px 0;
		margin-bottom: 0;
	}

	.function-layout-img img {
		width: 100%;
		height: auto;
		margin-top: 32px;
	}

	.solution-banner {
		height: auto;
	}

	.solution-banner-content {
		width: 100%;
		padding: 96px 48px 48px;
		box-sizing: border-box;
		flex-direction: column;
	}

	.solution-banner-left {
		align-items: center;
		text-align: center;
	}

	.solution-banner-text {
		font-size: 24px;
	}

	.solution-banner-right {
		width: 100%;
		margin-top: 24px;
	}

	.solution-banner-right img {
		width: 100%;
		height: auto;
	}

	.solution-layout-block {
		padding: 48px 0;
	}

	.solution-layout-tab-block {
		width: 100%;
		box-sizing: border-box;

	}

	.solution-layout-tab-link {
		gap: 40px;
		justify-content: flex-start;
		margin: 0 48px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.solution-layout-tab {
		font-size: 32px;
		white-space: nowrap;
	}

	.solution-layout-tab-active {
		border-width: 4px;
	}

	.solution-layout-content {
		width: 100%;
		padding: 48px;
		box-sizing: border-box;
		flex-direction: column;
	}

	.solution-layout-left img {
		width: 100%;
		height: auto;
	}

	.solution-layout-right {
		width: 100%;
	}

	.solution-layout-right h1 {
		padding: 40px 0;
	}

	.solution-layout-right-text-title,
	.solution-layout-right-text-text,
	.solution-layout-right-text-title .tn-icon {
		font-size: 28px;
	}

	.solution-layout-right-text-text .dian {
		width: 8px;
		height: 8px;
		margin: 12px 12px 0;
	}

	.solution-layout-a a {
		font-size: 28px;
	}

	.solution-layout-a a .tn-icon {
		font-size: 28px;
	}




	.solution-template-content {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 48px;
		gap: 0;
	}

	.template-list-comp {
		width: 48%;
		margin-bottom: 24px;
	}

	.template-tag {
		height: 32px;
		border-radius: 16px;
		font-size: 20px;
	}

	.template-title {
		font-size: 24px;
	}

	/*产品功能手机端结束*/


	/*价格手机端*/
	.price-mobile-reveal {
		display: block;
	}

	.price-mobile-reveal .price-mobile {
		width: 100vw;
		box-sizing: border-box;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		padding-top: 140px;

	}

	.price-mobile-reveal .price-mobile .price-block {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 40px;
		box-sizing: border-box;

	}

	.price-mobile-reveal .price-mobile .price-block .price-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 210px;
		height: 210px;
		border-radius: 8px;
		background: #ffffff;
		border: 2px solid #eeeeee;
		position: relative;

	}

	.price-mobile-reveal .price-mobile .price-block .price-item .recommended {
		width: 80px;
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.price-mobile-reveal .price-mobile .price-block .price-item .title {
		font-size: 28px;
		color: #2d4e99;
	}

	.price-mobile-reveal .price-mobile .price-block .price-item .price {
		font-size: 18px;
		color: #2d4e99;
		margin-top: 34px;

	}

	.price-mobile-reveal .price-mobile .price-block .price-item .price span {
		font-size: 32px;
	}

	.price-mobile-reveal .price-mobile .price-block .price-item .text {
		font-size: 20px;
		margin-top: 8px;
		color: #2d4e99;
	}

	.price-mobile-reveal .price-mobile .price-block .price-item .active-icon {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #165DFF;
		border-radius: 8px 0 8px 0;
		position: absolute;
		right: -1px;
		bottom: -1px;
		font-size: 30px;
		color: #ffffff;
		display: none;
	}

	.price-mobile-reveal .price-mobile .price-block .price-item .active-icon .tn-icon {
		font-size: 32px;
	}

	.price-mobile-reveal .price-mobile .price-block .price-active {
		border: 2px solid #165DFF;

	}

	.price-mobile-reveal .price-mobile .price-block .price-active .active-icon {
		display: flex;
	}

	.price-mobile-reveal .price-mobile .price-btn {
		margin: 50px 40px;
		height: 80px;
		border-radius: 40px;
		background: #165DFF;
		text-align: center;
		line-height: 80px;
		font-size: 32px;
		color: #ffffff;
		font-weight: bold;
	}

	.price-mobile-reveal .equity-title {

		font-size: 32px;
		font-weight: bold;
		margin: 0 40px;
		z-index: 2;

	}

	.price-mobile-reveal .equity-wrap {
		padding: 24px 40px;
		box-sizing: border-box;
		overflow-x: auto;
		margin-bottom: 40px;

	}

	.price-mobile-reveal .equity-wrap .equity {
		width: 1060px;
	}


	.familiar-pc .familiar-content {
		width: 100%;
		padding: 0 48px;
		flex-direction: column;
		box-sizing: border-box;
	}

	.familiar-pc .familiar-content .familiar-list1,
	.familiar-pc .familiar-content .familiar-list2 {
		font-size: 22px;
		margin-right: 0;
		width: 100%;
	}

	.familiar-pc .familiar-content .familiar-list1 .list-title,
	.familiar-pc .familiar-content .familiar-list2 .list-title {
		font-size: 28px;
	}

	.familiar-icon {
		width: 56px;
		height: 56px;
	}

	.familiar-icon .tn-icon {
		font-size: 32px;
	}

}



/* 骨架屏样式 */
#skeleton-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 9999;
	overflow: auto;
	transition: opacity 0.5s ease-out;
}

/* 骨架屏内容容器 */
.skeleton-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 头部骨架 */
.skeleton-header {
	height: 80px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 40px;
}

.skeleton-logo {
	width: 120px;
	height: 40px;
	background-color: #f5f5f5;
	border-radius: 4px;
	animation: shimmer 1.5s infinite;
}

/* 骨架屏动画效果 */
@keyframes shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.skeleton-loading {
	background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%);
	background-size: 800px 100%;
	animation: shimmer 1.5s infinite linear;
}

/* 横幅区域骨架 */
.skeleton-banner {
	height: 400px;
	background-color: #f5f5f5;
	margin-bottom: 60px;
	border-radius: 8px;
	overflow: hidden;
}

/* 特性区域骨架 */
.skeleton-features {
	margin-bottom: 80px;
}

.skeleton-feature-title {
	height: 32px;
	width: 200px;
	margin: 0 auto 40px;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.skeleton-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.skeleton-feature-item {
	padding: 30px;
	background-color: #fafafa;
	border-radius: 8px;
}

.skeleton-feature-icon {
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	background-color: #f0f0f0;
	border-radius: 50%;
}

.skeleton-feature-heading {
	height: 24px;
	width: 70%;
	margin-bottom: 12px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

.skeleton-feature-text {
	height: 48px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

/* 功能介绍骨架 */
.skeleton-function {
	margin-bottom: 80px;
}

.skeleton-tabs {
	display: flex;
	gap: 20px;
	margin-bottom: 40px;
	overflow-x: auto;
	padding-bottom: 10px;
}

.skeleton-tab {
	flex-shrink: 0;
	height: 40px;
	width: 120px;
	background-color: #f0f0f0;
	border-radius: 20px;
}

.skeleton-function-content {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.skeleton-function-image {
	flex: 1;
	min-width: 300px;
	height: 300px;
	background-color: #f0f0f0;
	border-radius: 8px;
}

.skeleton-function-text {
	flex: 1;
	min-width: 300px;
}

.skeleton-function-title {
	height: 40px;
	width: 80%;
	margin-bottom: 20px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

.skeleton-points {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.skeleton-point {
	height: 20px;
	width: 90%;
	background-color: #f0f0f0;
	border-radius: 4px;
}

/* 解决方案骨架 */
.skeleton-solutions {
	margin-bottom: 80px;
}

.skeleton-solutions-title {
	height: 32px;
	width: 200px;
	margin: 0 auto 40px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

.skeleton-solutions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.skeleton-solution-card {
	background-color: #fafafa;
	border-radius: 8px;
	overflow: hidden;
}

.skeleton-solution-image {
	height: 200px;
	background-color: #f0f0f0;
}

.skeleton-solution-content {
	padding: 20px;
}

.skeleton-solution-heading {
	height: 24px;
	width: 70%;
	margin-bottom: 12px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

.skeleton-solution-desc {
	height: 60px;
	background-color: #f0f0f0;
	border-radius: 4px;
	margin-bottom: 16px;
}

.skeleton-solution-link {
	height: 32px;
	width: 100px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

/* 客户案例骨架 */
.skeleton-cases {
	margin-bottom: 80px;
}

.skeleton-cases-title {
	height: 32px;
	width: 200px;
	margin: 0 auto 40px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

.skeleton-cases-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 30px;
}

.skeleton-case-logo {
	height: 80px;
	background-color: #f0f0f0;
	border-radius: 4px;
}

/* 页面内容初始隐藏，加载完成后显示 */
body > *:not(#skeleton-screen) {
	opacity: 0;
	transition: opacity 0.5s ease-in;
}