/* html根元素，不可以用body,响应式页面必备*/
html {
	/*网页默认16px*/
	font-size: 100%;
}

@media screen and (min-width: 1440px) {
	html {
		font-size: 16px;
	}
}

@media screen and (max-width: 1439px) and (min-width: 1280px) {
	html {
		font-size: 16px;
	}
}

@media screen and (max-width: 1279px) and (min-width: 1025px) {
	html {
		font-size: 15px;
	}
}

@media screen and (max-width: 1024px) and (min-width: 751px) {
	html {
		font-size: 14px;
	}
}

/* 定义css变量 */
:root {
	--white: #ffffff;
	--black: #000000;
	--default: rgba(0, 0, 0, .5);
	--feedbackcolor: #3770F6;
	--cols-2: 2;
	--cols-3: 3;
}

@media screen and (max-device-width: 600px) and (orientation: portrait),
screen and (max-width: 750px),
screen and (max-device-width: 820px) and (orientation: landscape) {
	html {
		font-size: 16px;
	}

	:root {
		--cols-2: 1;
		--cols-3: 1;
	}
}


.m-pc {
	display: block;
}


section {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 5rem 0;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	/* background: red; */
	box-sizing: border-box;
}

section>div {
	max-width: 77.5rem;
	width: 100%;
	/* background: pink; */
}

.section1 {
	background: #F8F8F8;
}

.section2 {
	background: #000000;
}

.section3 {
	background: var(--feedbackcolor);
}

.u-title {
	position: relative;
	z-index: -2;
	font-size: 3rem;
	line-height: 110%;
	color: var(--black);
	font-weight: bold;
	margin-bottom: 2.5rem;
}

.u-title-white {
	color: var(--white);

}

.g-hd {
	position: relative;
	height: 51.375rem;
	background: var(--black);
}

.g-hd::before {
	position: absolute;
	content: "";
	height: 23.0625rem;
	width: 100%;
	background: url(../imgs/pic_02.webp) no-repeat left 15% bottom 2rem;
	background-size: 62.25rem 100%;
}

.g-hd>div:first-child {
	position: absolute;
	width: 100%;
	z-index: 6;
}

.m-hd {
	background: transparent;
}

.m-hd>div {
	max-width: 77.5rem;
	width: calc(100% - 3rem);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.m-logo .u-img {
	width: 10.125rem;
}

.m-logo .u-img1 {
	width: 4.1069rem;
	margin-left: 1.3919rem;
}

.m-guide {
	display: flex;
	position: fixed;
	right: 50%;
	transform: translateX(38.75rem);
	background: rgba(25, 25, 25, .6);
	border-radius: 1.875rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	backdrop-filter: blur(.25rem);
}

.m-guide a {
	display: inline-block;
	font-size: .875rem;
	line-height: 1.375rem;
	color: rgba(255, 255, 255, .8);
	padding: .75rem .9375rem;
	font-weight: bold;
	white-space: nowrap;
}

.m-guide a:hover,
.m-guide .z-crt {
	color: rgba(255, 255, 255, 1);
}

.m-banner {
	position: relative;
	max-width: 77.5rem;
	width: calc(100% - 3rem);
	height: 100%;
}

.m-banner .intro {
	display: grid;
	grid-template-columns: 43.9375rem 30.75rem;
	justify-content: space-between;
	overflow: hidden;
}

.m-banner .txtbox img {
	width: 100%;
}

.m-banner .abox {
	width: 25rem;
	margin-top: 3.75rem;
}

.m-banner .abox>div:last-child {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}


.m-banner .u-a {
	display: block;
	width: 100%;
	height: 2.9375rem;
	line-height: 2.9375rem;
	transform: scale(1);
	transition: transform .3s ease-in-out;
	background: var(--feedbackcolor);
	border-radius: 1.875rem;
	text-align: center;
	color: var(--white);
	font-size: 1rem;
}

.m-banner .u-a:hover {
	transform: scale(.98);
	transition: transform .3s ease-in-out;
}

.m-banner .u-a1 {
	display: block;
	width: 100%;
	height: 2.9375rem;
	line-height: 2.9375rem;
	transform: scale(1);
	transition: transform .3s ease-in-out;
	border-radius: 1.875rem;
	border: 1px solid var(--white);
	text-align: center;
	color: var(--white);
	font-size: .875rem;
	margin-top: 1.25rem;
}

.m-banner .u-a1:hover {
	transform: scale(.98);
	transition: transform .3s ease-in-out;
}

.m-banner .u-a2 {
	display: inline-block;
	font-size: 1rem;
	line-height: 145%;
	background: linear-gradient(90deg, #3770F6 0%, #C0D3FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 1.25rem;
}


.m-banner .intro .imgbox img {
	width: 100%;
	transform: scale(1);
	transition: transform .3s ease-in-out;
}

.m-banner .intro .imgbox img:hover {
	width: 100%;
	transform: scale(1.1);
	transition: transform .3s ease-in-out;
}

.m-banner .logobox {
	display: flex;
	justify-content: space-between;
	gap: 2.625rem;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-top: 1.25rem;
	padding-bottom: 2.5rem;
	background: rgba(0, 0, 0, 1);
}

.m-banner .logobox .lbox {
	position: relative;
	display: flex;
}

.m-banner .logobox .lbox::before {
	position: absolute;
	content: "";
	right: -1.3125rem;
	width: .0625rem;
	height: 1.125rem;
	background: var(--white);
	top: 50%;
	transform: translateY(-50%);
}

.m-banner .logobox .rbox {
	display: flex;
}

.m-banner .item {
	padding: .5rem .8125rem;
}

.m-banner .logobox .item .imgbox {
	width: 100%;
	height: 3.75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.m-banner .logobox img {
	width: 100%;
	height: auto;
	transform: scale(1);
	transition: all .3s ease-in-out;
}

.m-banner .logobox img:hover {
	transform: scale(.96);
	transition: all .3s ease-in-out;
}

.m-banner .logobox svg:hover {
	transform: scale(.96);
	transition: all .3s ease-in-out;
}

.m-banner .logobox p {
	white-space: nowrap;
	font-size: .75rem;
	color: rgba(251, 251, 251, .5);
}


.m-list1 {
	position: relative;
	display: grid;
	grid-template-columns: 21.5rem 37.25rem;
	justify-content: space-between;
}

.m-list1 .imgbox {
	position: absolute;
	width: 47.0938rem;
	height: 47.0938rem;
	left: -8.3125rem;
	bottom: -16.625rem;
	opacity: 0;
}

.m-list1 .imgbox img {
	width: 100%;
	height: 100%;
}

.m-list1 .txtbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.875rem;
	z-index: 5;
}

.m-list1 .txtbox p {
	font-size: 1.125rem;
	line-height: 145%;
	color: rgba(0, 0, 0, .5);
}

.m-list1 .txtbox a {
	color: var(--feedbackcolor);
	text-decoration: underline;
}

.m-list2 {
	display: grid;
	grid-template-columns: repeat(var(--cols-2), 1fr);
	gap: 2.5rem;

}

.m-list2 .item {
	padding: 3.75rem 2.5rem;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.25rem;
}

.m-list2 .item .imgbox {
	overflow: hidden;
	border-radius: 1.25rem;
}

.m-list2 .item .imgbox .u-img {
	width: 100%;

	transform: scale(1);
	transition: all .3s ease-in-out;
}

.m-list2 .item .imgbox .u-img:hover {
	transform: scale(1.2);
	transition: all .3s ease-in-out;
}

.m-list2 .item h2 {
	position: relative;
	font-size: 2.25rem;
	font-weight: bold;
	line-height: 110%;
	color: var(--feedbackcolor);
	margin-top: 5rem;
	min-height: 7.5rem;
}

.m-list2 .item h2::before {
	position: absolute;
	content: "";
	left: 0;
	top: -0.625rem;
	width: 2.875rem;
	height: .375rem;
	background: var(--feedbackcolor);
}

.m-list2 .item p {
	font-size: 1.125rem;
	color: rgba(0, 0, 0, .5);
	line-height: 145%;
	margin-top: 3.75rem;
}

.m-list2 .item .intro {
	margin-top: 5rem;
	min-height: 22rem;
}

.m-list2 .item .intro h3 {
	font-size: 1.5rem;
	color: var(--black);
	font-weight: bold;
}

.m-list2 .item .intro ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.m-list2 .item .intro li {
	position: relative;
	font-size: 1.125rem;
	color: rgba(0, 0, 0, .5);
	line-height: 145%;
	padding-left: .75rem;
}

.m-list2 .item .intro li::before {
	position: absolute;
	content: "";
	top: .7rem;
	left: 0;
	width: .375rem;
	height: .375rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
}

.m-list2 .u-a {
	display: inline-block;
	font-size: 1rem;
	line-height: 145%;
	color: var(--black);
	padding: .25rem 1rem;
	border-radius: 1.25rem;
	border: 1px solid var(--black);
	transition: all .3s ease-in-out;
	margin-top: 2.5rem;
	font-weight: bold;
}

.m-list2 .u-a:hover {
	color: var(--feedbackcolor);
	border: 1px solid var(--feedbackcolor);
	transition: all .3s ease-in-out;
}

.m-list3 .lefbox>div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.1875rem;
}


.m-list3 .item {
	display: grid;
	grid-template-columns: repeat(var(--cols-2), 1fr);
	justify-content: space-between;
	padding-top: 1.5625rem;
	padding-bottom: 1.5625rem;
	border-top: 1px solid rgba(0, 0, 0, .2);
}

.m-list3 .time h2 {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--feedbackcolor);
}

.m-list3 .time p {
	font-size: 1rem;
	color: var(--black);
	line-height: 145%;
	margin-top: .25rem;
}

.m-list3 .rigbox>div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.m-list3 .intro {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.5rem;
}

.m-list3 .intro h1 {
	font-size: 3rem;
	color: var(--black);
	font-weight: bold;
}

.m-list3 .intro h3 {
	font-size: 1.5rem;
	color: var(--black);
	font-weight: bold;
}

.m-list3 .intro p {
	font-size: 1rem;
	color: rgba(0, 0, 0, .5);
	line-height: 145%;
	margin-top: .25rem;
}

.m-list3 .intro .u-a {
	display: block;
	font-size: 1rem;
	color: var(--feedbackcolor);
	line-height: 145%;
	margin-top: .25rem;
	text-decoration: underline;
}

.m-list3 .intro .u-a1 {
	display: block;
	font-size: 1rem;
	color: var(--feedbackcolor);
	line-height: 145%;
	margin-top: .25rem;
	text-decoration: none;
}

.m-list4 {
	position: relative;
}

.m-list4 .item {
	display: grid;
	grid-template-columns: repeat(var(--cols-2), 1fr);
	justify-content: space-between;
	gap: 1.25rem;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	border-top: 1px solid rgba(251, 251, 251, .2);
}

.m-list4 h2 {
	font-size: 1.5rem;
	color: var(--white);
	font-weight: bold;
}

.m-list4 p {
	font-size: 1rem;
	color: var(--white);
	line-height: 145%;
}

.m-list4 li {
	font-size: 1rem;
	color: var(--white);
	line-height: 145%;
	background: url(../imgs/pic_07.svg) no-repeat left top .25rem;
	background-size: .8869rem auto;
	padding-left: 1.9rem;
}

.m-list4 a {
	color: var(--feedbackcolor);
	text-decoration: underline;
}

.m-list4 .u-span {
	font-weight: bold;
}

.m-list4 .u-span-1 {
	color: #FF9368;
}

.m-list4 .u-span-2 {
	color: var(--feedbackcolor)
}

.m-list4 .u-span-3 {
	color: #86B18A;
}

.m-list4 .imgbox {
	position: absolute;
	width: 29.75rem;
	height: 29.75rem;
	bottom: -9.8125rem;
	left: -2.3531rem;
	opacity: 0;
}

.m-list4 .imgbox img {
	width: 100%;
	height: 100%;
}

.m-list5 {
	display: grid;
	grid-template-columns: repeat(var(--cols-3), 1fr);
	gap: 1.25rem 1.25rem;
}


.m-list5 .item {
	padding: 1.25rem;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.25rem;
	min-height: 12.5rem;
}


.m-list5 .item-1 {
	background: url(../imgs/pic_08.png) no-repeat right bottom;
	background-size: 11.5rem 9.1875rem;
}

.m-list5 .item-1:hover {
	background: var(--feedbackcolor) url(../imgs/pic_08_1.png) no-repeat right bottom;
	background-size: 11.5rem 9.1875rem;
}

.m-list5 .item-2 {
	background: url(../imgs/pic_09.png) no-repeat right bottom;
	background-size: 12.0625rem 10rem;
}

.m-list5 .item-2:hover {
	background: var(--feedbackcolor) url(../imgs/pic_09_1.png) no-repeat right bottom;
	background-size: 12.0625rem 10rem;
}

.m-list5 .item-3 {
	background: url(../imgs/pic_10.png) no-repeat right bottom;
	background-size: 7.75rem 8.75rem;
}

.m-list5 .item-3:hover {
	background: var(--feedbackcolor) url(../imgs/pic_10_1.png) no-repeat right bottom;
	background-size: 7.75rem 8.75rem;
}

.m-list5 .item h2 {
	font-size: 2.25rem;
	color: var(--black);
	font-weight: bold;
	transition: all 0.3s ease-in-out;
}

.m-list5 .item:hover h2 {
	color: var(--white);
	font-size: 2.625rem;
	transition: all 0.3s ease-in-out;
}

.m-list5 .item p {
	font-size: 3rem;
	font-weight: bold;
}

.m-list5 .item-1 p {
	color: var(--feedbackcolor);
}

.m-list5 .item-2 p {
	color: #767676;
}

.m-list5 .item-3 p {
	color: #B69F8F;
}



.m-list5 .item:hover p {
	color: var(--white);
}

.m-list6 {
	padding: 1.25rem;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 1.25rem;
	margin-top: 2.5rem;
}

.m-list6 p {
	font-size: 1rem;
	color: var(--black);
	line-height: 145%;
}

.m-list6 p span {
	color: var(--feedbackcolor);
	font-weight: bold;
}

.m-list6 ul {
	display: grid;
	grid-template-columns: 1fr;

}

.m-list6 li {
	margin-top: .625rem;
}

.m-list6 li>p {
	padding: .25rem .75rem .25rem 1.6rem;
	display: inline-block;
	font-size: 1rem;
	color: var(--black);
	line-height: 1;
	background: url(../imgs/pic_11.svg) no-repeat left .3rem center;
	background-size: 1.25rem auto;
	border-radius: 1.25rem;
	border: 1px solid var(--feedbackcolor);
}


.m-list9 {
	display: grid;
	grid-template-columns: repeat(var(--cols-3), 1fr);
	gap: 0;
}

.m-list9 .item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 7.5rem;
	font-size: 1.5rem;
	color: var(--white);
	border: 1px solid var(--white);
	box-sizing: border-box;
	border-radius: 0;
}

.m-list9 .item .layerhover {
	display: none;
}

.m-list9 .item:hover {
	background: var(--black);
	border: none;
	border-radius: 9.375rem;
}

.m-list9 .item:hover div:first-child {
	display: none;
}

.m-list9 .item:hover .layerhover {
	display: block;
}

.m-list9 .u-img {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: .625rem;
}

/* 脱离section,同一个模块，颜色 */
.m-list10 {
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
	background: var(--black);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.m-list10>div {
	max-width: 77.5rem;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.m-list10 p {
	font-size: 1.125rem;
	line-height: 140%;
	color: rgba(255, 255, 255, 1);
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.m-list11 {
	position: relative;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
	background: var(--black);
	padding-bottom: 5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.m-list11::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	bottom: 0;
	height: 100%;
	/* max-width: 77.5rem; */
	width: 100%;
	background: url(../imgs/pic_12.webp) no-repeat bottom right;
	background-size: 80% 100%;
}

.m-list11>div {
	max-width: 77.5rem;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;

}

.m-list11 .u-title {
	font-size: 1.75rem;
	margin-top: 2.5rem;
	line-height: 1;
	margin-bottom: 1.25rem;
}

.m-list11 .intro {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 19.625rem auto;
	justify-content: space-between;
	gap: 8.9375rem;
}



.m-list11 h2 {
	position: relative;
	font-size: 1rem;
	color: rgba(255, 255, 255, .8);
	padding-left: 1.5625rem;
	line-height: 1;
}

.m-list11 .u-h2-1::before {
	position: absolute;
	left: 0;
	top: .2rem;
	content: "";
	width: 1.1175rem;
	height: .745rem;
	background: url(../imgs/pic_13.svg) no-repeat center left;
	background-size: cover
}

.m-list11 .u-h2-2::before {
	position: absolute;
	left: 0;
	top: .2rem;
	content: "";
	width: 1.1175rem;
	height: .745rem;
	background: url(../imgs/pic_13.svg) no-repeat center left;
	background-size: cover;
	transform: rotate(90deg);

}

.m-list11 .u-h2-3::before {
	position: absolute;
	left: 0;
	top: .2rem;
	content: "";
	width: 1.1175rem;
	height: .745rem;
	background: url(../imgs/pic_13.svg) no-repeat center left;
	background-size: cover;
	transform: rotate(45deg);
}

.m-list11 p {
	font-size: 1rem;
	line-height: 140%;
	color: rgba(255, 255, 255, .5);

}

.m-list11 .rig {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.m-list11 .rig p {
	margin-top: .625rem;

}

.m-list11 .item {
	height: 100%;
}

.m-list11 a,
.m-list11 a:hover {
	display: inline-block;
	font-size: .875rem;
	line-height: 140%;
	color: rgba(255, 255, 255, .5);
}