html {
	font-size: 16px; /* 默认字体大小 */
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}

input {
  background-color: transparent;
  border: 0;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}

/* 显示 */
.display-block {
	display: block !important;
}
/* 隐藏 */
.display-none {
	display: none !important;
}


.swiper-pagination-bullet {
	width: 20rem !important;
	height: 20rem !important;
	background-color: #999 !important;
}

/* .swiper-pagination-bullet-active */

/* 盒子模型 */
.flex-box {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

/*盒子模型，竖向自适应,垂直排列  */
.flex-box-v {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-flow: column;
	flex-flow: column !important;
}

/*flex-box与 flex-v-ce结合*/
.flex-box-ce {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
}

/* 水平等列排版（容器左右没缝隙，子元素左右两边自适应） */
.flex-d-center {
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

/* 水平等列排版（子元素两边有缝隙自己适应） */
.flex-dv-center {
	justify-content: space-around;
	-webkit-justify-content: space-around;
}


/*水平，垂直居中  */
.flex-center-center {
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	-moz-align-items: center;
	-moz-box-pack: center;
	-moz-box-align: center;
}

/*对view中的子元素进行居中，并且位于容器的中间位置 水平居中 */
.flex-v-zhu,
.flex-h-zhu {
	justify-content: center;
	-webkit-justify-content: center;
	-webkit-box-pack: center;
}

/*对view中的子元素进行居中，并且位于容器的中间位置 垂直居中  */
.flex-v-ce,
.flex-h-ce {
	align-items: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
}

/*让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：  */
.flex-1 {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.flex-2 {
	-webkit-box-flex: 2;
	box-flex: 2;
	-moz-box-flex: 2;
	-webkit-flex: 2;
	-ms-flex: 2;
	flex: 2;
}

.flex-3 {
	-webkit-box-flex: 3;
	box-flex: 3;
	-moz-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
}

.flex-4 {
	-webkit-box-flex: 4;
	box-flex: 4;
	-moz-box-flex: 4;
	-webkit-flex: 4;
	-ms-flex: 4;
	flex: 4;
}


.flex-5 {
	-webkit-box-flex: 5;
	box-flex: 5;
	-moz-box-flex: 5;
	-webkit-flex: 5;
	-ms-flex: 5;
	flex: 5;
}

/* 水平反方向 */
.flex-direction-row-reverse {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
}

/*超出部分用....表示的公用样式  */
.clamp1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clamp2 {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.clamp3 {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 内容超出部分自动换行 */
.flex-d-wrap {
	flex-wrap: wrap;
}

/* 内容超出部分不换行 */
.flex-no-wrap {
	flex-wrap: nowrap;
}

/* 从右边开始排列 */
.flex-box-end {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-end;
}

/* 字体颜色 */
.blue {
	color: #26A2FF !important;
}

.red {
	color: #F56C6C !important;
}

.yellow {
	color: #FFC910 !important;
}

.orange {
	color: #FF9600 !important;
}

.green {
	color: #67C23A !important;
}

.cyan {
	color: #00C4CB !important;
}

.black {
	color: #141c28 !important;
}

.fontColorA {
	color: #303133 !important;
}

.fontColorB {
	color: #606266 !important;
}

.fontColorC {
	color: #89919F !important;
}

.fontColorD {
	color: #BFC7D5 !important;
}


.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-reverse {
	flex-direction: row-reverse;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

/* 元素渐入动画 */
.fade-in {
	opacity: 0; /* 初始状态为透明 */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	transform: translateY(30px); /* 初始位置向下偏移 */
}

.fade-in.visible {
	opacity: 1; /* 可见状态为不透明 */
	transform: translateY(0); /* 动画结束位置 */
}




/*元素左边滑入动画*/

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		 transform: translateX(0);
		  opacity: 1;
	}
}


/* 导航栏 */
/* pc端导航栏 pc-header */
.pc-header {
	width: 100%;
	height: 80rem;
	padding: 0 120rem;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	left: 0;
	background-color: white;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px, rgba(0, 0, 0, 0.04) 0px 0px 6px;
	z-index: 999;
}

.pc-header .header-left {
	width: 300rem;
	height: 100%;
	display: flex;
	align-items: center;
}


/* Logo */
.pc-header .header-left img {
	width: 120rem;
}
/* 公司信息 */
.pc-header .header-left .company-info {
	margin: 0 20rem;
}

.pc-header .header-left .company-info div:nth-child(1) {
	font-size: 16rem;
}


.pc-header .header-left .company-info div:nth-child(2) {
	font-size: 14rem;
}

.pc-header .header-left .line {
	width: 1px;
	height: 30rem;
	background-color: #161819;
}

.pc-header .header-center {
	display: flex;
	align-items: center;
}
/* 导航项 */
.pc-header .header-center .nav-item {
	width: 140rem;
	height: 80rem;
	line-height: 80rem;
	font-size: 18rem;
	font-weight: 500;
	position: relative;
	text-align: center;
}

.pc-header .header-center .nav-item .line {
	position: absolute;
	bottom: 10rem;
	left: 50%;
	transform: translate(-50%);
	width: 0;
	height: 3rem;
	background: transparent;
	border-radius: 2rem;
	transition: all 0.3s;
} 
.pc-header .header-center .nav-item .line.line-active {
	width: 30%;
	background-color: #409eff;
}

.header-right {
	flex: 1;
	display: flex;
	align-items: center;
	height: 80rem;
}

.header-right .phone {
	color: #409eff;
	font-size: 18rem;
	font-weight: 600;
	padding: 0 30rem;
	box-sizing: border-box;
}


.header-right .register {
	color: #409eff;
	font-size: 18rem;
	padding: 8rem 16rem;
	border: 1px solid #409eff;
	border-radius: 4rem;
	margin: 0 14px;
	transition: all 0.3s;
}

.header-right .register:hover {
	cursor: pointer;
	background-color: #409eff;
	color: white;
}

.header-right .show {
	color: #fff;
	font-size: 18rem;
	padding: 8rem 16rem;
	background: #FE0000;
	border-radius: 4rem;
	margin: 0 14px;
	transition: all 0.3s;
}

.header-right .show:hover {
	cursor: pointer;
	background-color: #fff;
	border: 1px solid #FE0000;
	color: #FE0000;
}

.header-right .login {
	color: #409eff;
	font-size: 18rem;
	font-weight: 600;
	padding: 0 30rem;
}


.header-right .login:hover {
	cursor: pointer;
}

/* pc-header */


/* 下拉菜单 */
.dropdown-list {
	width: 100%;
	height: 0;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	background-color: #fff;
	display: flex;
	position: fixed;
	top: 80rem;
	left: 0rem;
	z-index: 88;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px, rgba(0, 0, 0, 0.04) 0px 0px 6px;
	opacity: 0;
	pointer-events: none; /* 禁用指针事件 */
	z-index: 999;
	transition: all 0.3s linear;
}

.dropdown-list .dropdown-list-left {
	width: 30%;
	height: 430rem;
	padding: 0 100rem;
}


.dropdown-list .dropdown-list-right {
	/* width: 70%; */
	width: 100%;
	padding: 0 100rem;
	box-sizing: border-box;
	height: 430rem;
}


.dropdown-list-left .desc1{
	width: 100%;
	height: 40rem;
	font-weight: 600;
	font-size: 22rem;
	line-height: 24rem;
	margin-bottom: 30rem;
	color: black;
	margin-top: 40rem;
}

.dropdown-list-left .desc2{
	width: 100%;
	height: 40rem;
	font-weight: 400;
	font-size: 16rem;
	color: #777A8D;
	line-height: 24rem;
	margin-bottom: 30rem;
}

/* dropdown 向下箭头 */
.nav-item-2 img {
	width: 24rem;
	transition: all 0.3s;
}

.nav-item-2 img.active {
	transform: rotate(180deg);
}

.dropdown-list.active {
	opacity: 1;
	pointer-events: auto;
	height: 430rem;
}

.dropdown-list .dropdown-list-title, .dropdown-list .title  {
	width: 100%;
	height: 80rem;
	text-align: left;
	font-family: SimHei;
	font-weight: 500;
	font-size: 24rem;
	color: #777A8D;
	line-height: 80rem;
}

.dropdown-list .dropdown-item-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 1400rem;
	
}


.dropdown-list .dropdown-item {
	width: 33.33%;
	height: 80rem;
	margin: 0 0 20rem 0;
	transition: 0.3s;
	padding: 10rem;
	box-sizing: border-box;
}

.dropdown-list .dropdown-item:hover {
	background-color: #f5f5f5;
	cursor: pointer;
	border-radius: 10rem;
}

.dropdown-list .dropdown-item .img-box {
	width: 50rem;
	height: 50rem;
	border-radius: 10rem;
	background-color: #E2EDFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rem;
}

.dropdown-list .dropdown-item img {
	width: 24rem;
	height: 24rem;
}

.dropdown-list .dropdown-item .project-name {
	font-family: Source Han Sans CN;
	font-weight: 600;
	font-size: 20rem;
	color: #373737;
}

.dropdown-list .dropdown-item .project-desc {
	font-family: SimHei;
	color: #777A8D;
	font-size: 16rem;
	font-weight: 400;
	margin-top: 8rem;
}



.dropdown-list .dropdown-item:nth-child(4) {
	border-bottom: none;
}

/* 下拉菜单 */




/* 移动端导航栏 */
/* 折叠容器 */
.m-header-box {
	width: 100%;
	height: 200rem;
	display: none;
}



/* 汉堡折叠按钮 */
.m-header-box .collapse-box {
	width: 100%;
	height: 200rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 80rem;
	box-sizing: border-box;
	border-bottom: 1px solid #f1f1f1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: white;
}


.m-header-box .collapse-box .logo {
	width: 300rem;
}


.collapse-icon {
	width: 100rem;
	height: 100rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	position: relative;
}

.collapse-icon span {
	width: 100%;
	height: 10rem;
	background-color: #409eff;
	border-radius: 20rem;
	transition: 0.5s;
}

.collapse-icon span.toggle:nth-child(1) {
	position: absolute;
	top: 10px;
	transform: rotate(45deg);
}

.collapse-icon  span.toggle:nth-child(2) {
	position: absolute;
	top: 10px;
	transform: rotate(-45deg);
}

.collapse-icon  span.toggle:nth-child(3) {
	display: none;
}

/* 折叠容器 */

/* 移动端导航栏 */
.m-nav-list {
	width: 100%;
	overflow-y: auto;
	display: none;
	transition: all 0.4s;
	box-sizing: border-box;
	z-index: 9999;
	position: fixed;
	top: 200rem;
	left: 0;
}

/* dropdown 箭头 */
.m-nav-list .arrow-img {
	width: 80rem; 
	height: 80rem; 
	transform: rotate(270deg);
	transition: all 0.3s;
}

.m-nav-list .arrow-img.arrow-img-toggle {
	transform: rotate(360deg);
}

.m-dropdown-item-list {
	width: 100%;
	height: 0;
	opacity: 0;
	pointer-events: none; /* 禁用指针事件 */
	z-index: 9999;
	transition: all 0.3s linear;
}

.m-dropdown-item-list.m-dropdown-show {
	width: 100%;
	height: 1400rem;
	opacity: 1;
	pointer-events: auto;
	background-color: white;
	color: #606266;
}

.m-nav-list .m-nav-item, .m-nav-list .m-dropdown-item {
	width: 100%;
	height: 200rem;
	font-size: 76rem;
	line-height: 200rem;
	border-bottom: 1px solid #f5f5f5;
	background-color: #fff;
	margin: 0 auto;
	padding: 0 60rem;
	box-sizing: border-box;
	transition: all 0.3s;
	align-items: center;
}


.m-nav-list .m-dropdown-item {
	color: #606266;
}


.m-nav-list .m-nav-item a, .m-nav-list .m-dropdown-item a{
	display: flex;
	width: 100%;
	height: 100%;
}

.m-nav-list .m-dropdown-item a img{
	display: inline-block;
	width: 80rem;
	height: 80rem;
	margin-right: 40rem;
}

.m-nav-list .phone {
	display: flex;
	align-items: center;
	color: #409eff;
	font-weight: 500;
}

.m-nav-list .register {
	display: flex;
	align-items: center;
	color: #409eff;
}


.m-nav-list .login {
	color: #409eff;
	font-weight: 500;
}

.m-nav-list .trial {
	color: #409eff;
	font-weight: 500;
}

.m-nav-list .show {
	color: #FE0000;
	font-weight: 500;
}



.m-nav-list .m-nav-item:hover {
	cursor: pointer;
	background-color: #f5f5f5;
}

.m-nav-list.toggle {
	display: block !important;
}


.m-nav-list .m-nav-item.toggle{
	display: flex !important;
} 



.mask-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 98;
	/* display: none; */
}


/* footer */
footer .text {
	font-size: 16rem;
}

footer a:hover {
	text-decoration: underline;
}


footer img {
	width: 100rem;
	height: 100rem;
	margin-bottom: 6rem;
}


.bg-blue {
	padding: 50rem 0;
	background-color: #409eff;
	color: #fff;
	box-sizing: border-box;
}
.container {
  max-width: 1100rem;
  margin: 0 auto;
  padding: 20rem 0 26rem 0;
}
.left .row div {
  width: 200rem;
  margin-bottom: 12rem;
}
.left {
  width: 600rem;
}
.row span {
  cursor: pointer;
  font-size: 18rem;
}
.row span:hover {
  text-decoration: underline;
}


.left-box div{
	font-weight: 550;
	font-size: 24rem;
	margin-bottom: 20rem;
}


.right .right-title {
	font-size: 24rem; 
	font-weight: 600;
}

.right .address {
	margin: 20rem 0;
	font-size: 16rem;
}



.code-item {
	margin-right: 20rem; 
	text-align: center;
}

/* 版权信息 */
.copyright_box {
  height: 44rem;
  line-height: 44rem;
  height: auto;
  background: #161819;
  text-align: center;
  color: #ccc;
  font-size: 16rem;
}
.copyright_box span:hover {
  cursor: pointer;
  color: #409eff;
}



/* 屏幕小于768 */
	
 @media (max-width: 768px) {
	 
	 .pc-header {
		display: none;
	 }
	 
	 .dropdown-list {
		 display: none;
	 }
	 
	.m-header-box {
		display: block;
	}
	
	/* footer */
	footer .text {
		font-size: 60rem;
	}
	
	
	footer img {
		width: 360rem;
		height: 360rem;
		margin-bottom: 40rem;
	}
	
	.container {
	  max-width: 1800rem;
	  margin: 0 auto;
	  padding: 20rem 120rem 26rem 120rem;
	  display: flex;
	  flex-wrap: wrap;
	  box-sizing: border-box;
	}
	
	
	.bg-blue {
		padding: 100rem 0;
		background-color: #409eff;
		color: #fff;
		box-sizing: border-box;
	}
	
	.left {
	  width: 1500rem;
	  margin-bottom: 100rem;
	}
	
	.left .row div {
	  width: 500rem;
	  margin-bottom: 40rem;
	}
	
	.row a {
	  cursor: pointer;
	  font-size: 54rem;
	}
	
	.row a:hover {
	  text-decoration: underline;
	}
	
	
	.left-box div{
		font-weight: 600;
		font-size: 80rem;
		margin-bottom: 20rem;
	}
	
	
	.right .right-title {
		font-size: 80rem; 
		font-weight: 600;
	}
	
	.right .address {
		margin: 40rem 0;
		font-size: 54rem;
	}
	
	
	
	.code-item {
		margin-right: 60rem; 
		text-align: center;
		font-size: 40rem;
	}
	
	/* 版权信息 */
	.copyright_box {
		width: 100%;
		height: 120rem;
		line-height: 120rem;
		background: #161819;
		text-align: center;
		color: #ccc;
		font-size: 50rem;
	}
	.copyright_box span:hover {
	  cursor: pointer;
	  color: #409eff;
	}
 }
 
 
 html {
   font-size: 16px; /* 默认字体大小 */
 }
 
 @media (max-width: 1200px) {
   html {
     font-size: 14px;
   }
 }
 
 @media (max-width: 768px) {
   html {
     font-size: 12px;
   }
   .swiper-pagination-bullet {
		width: 40rem !important;
		height: 40rem !important;
   }
 }
 
 @media (max-width: 480px) {
   html {
     font-size: 10px;
   }
 }