* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

html,
body {
	font-family: "MicrosoftYaHei", "MFYanSong_Noncommercial-Regular",
		Arial, sans-serif;
	font-size: 100%;
	width: 100%;
	overflow-x: hidden;
	background: linear-gradient(to right, #c2d5e4, #ffffff, #c2d5e4);

}

div {
	margin: 0;
	border: 0;
	padding: 0;
}

/* 内容区 */
.immune {
	width: 100%;
	/* height: 9905px; */
	overflow: hidden;
	background: url("../images/immune/immune-bg.jpg") repeat-y;
	background-size: 100%;

	position: relative;
	/* background-color: red; */
}

.banner {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	margin-bottom: -3px; 
	/* width: 1200px; */
}

.banner-text {
	width: 1200px;
	font-size: 81px;
	color: #FFFFFF;
	line-height: 120px;
	background: linear-gradient(-43deg, #33A6DF 0%, #D28A28 49.21875%, #33A6DF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* position: absolute; */
	/* top: 325px; */
	/* margin-left: calc(50% - 550px); */
	margin: 0 auto;
	text-align: start;
	font-weight: 200;
	/* height: 700px; */
	padding-top: 20%;
	padding-bottom: 15%;
	/* margin-left: 10%; */
	z-index: 1;
	position: relative;

}

.banner-text em {
	font-style: normal;
	font-weight: bold;
	display: inline;

}

.banner img {
	width: 100vw;
	height: auto;
	/* position: absolute; */
	top: 0;
	left: 0;
	/* z-index: 1; */
}

.box-shaw {
	position: relative;
	box-shadow: 0px 50px -1px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
}

.box-shaw::before,
.box-shaw::after {
	content: "";
	position: absolute;
	z-index: -1;
}

.card {
	width: 1200px;
	height: 493px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* border-radius: 10px; */
	background-color: #ffffff;
	border: 1px solid;
	border-image: linear-gradient(0deg, #FFFFFF, #D18928) 1 1;
}

.card-content {
	width: 511px;
}

.card-up {
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: 300;
	line-height: 46px;
	background: linear-gradient(-43deg, #33A6DF 0%, #D28A28 49.21875%, #33A6DF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card-content hr {
	width: 100%;
	height: 1px;
	background: linear-gradient(-43deg, #33A6DF, #D28A28, #33A6DF);
	margin-top: 53px;
	margin-bottom: 50px;
	border: none;
}

.card-down {
	font-size: 36px;
	line-height: 54px;

	background: linear-gradient(-43deg, #33A6DF 0%, #D28A28 49.21875%, #33A6DF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.banner-title {
	margin-top: 146px;
	/* margin-bottom: 61px; */
	font-size: 48px;
	font-weight: bold;
	color: #33A6DF;
	line-height: 40px;
}

.thr-1 {
	margin: 0 auto;
	width: 0;
	height: 0;
	border: 32px solid #33A6DF;
	border-color: #33A6DF transparent transparent transparent;
	position: absolute;
	opacity: .15;
	top: 94px;
	left: 568px;
}

.thr {
	margin: 0 auto;
	width: 0;
	height: 0;
	border: 32px solid #33A6DF;
	border-color: #33A6DF transparent transparent transparent;
	margin-top: 61px;
	margin-bottom: 102px;
	z-index: 1;
}

.contain {
	width: 1200px;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	/* top:-268px; */
}

.contain>.title_content>hr {
	position: absolute;
	width: 100vw;
	height: 1px;
	border: none;
	background: #33A6DF;
	top: 38px;
	/* z-index: -1; */
}

/* part1 */
.part1 {
	/* height: 814px; */
	width: 100%;
	margin: 0 auto;
}

.title_content {
	width: 671px;
	height: 76px;
	background: #33A6DF;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.title_content img {
	position: absolute;
	z-index: 2;
	margin-right: 10px;
	left: 168px;
}

.title_content h4 {
	/* display: flex;
    align-items: center; 
    justify-content: center; */
	text-align: center;
	font-size: 36px;
	color: #FFFFFF;
	line-height: 40px;
	font-weight: 300;
	position: absolute;
	z-index: 2;
	margin-left: 25px;
}

.content {
	width: 1200px;
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
}

.content p {
	font-size: 18px;
	color: #333333;
	line-height: 36px;
	margin-top: 100px;
	text-align: center;
}

.img {
	width: 1200px;
	margin: 0 auto;
	/* background-color: #333333; */
	margin-top: 121px;
	/* height: 334px; */
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: center;
}

/* .img-left, .img-right{
  width: 496px;
  height: 334px;
} */
.img-left {
	width: 614px;
	height: auto;
}

.text {
	position: absolute;
	top: 0;
	left: 0;
}

.txt4 {
	width: 288px;
	position: absolute;
	font-size: 36px !important;
	font-weight: bold;
	color: #0172AA !important;
	line-height: 46px !important;
	top: 440px;
	left: 458px;
	white-space: nowrap;
}

.txt1 {
	width: 365px;
	position: absolute;
	top: 176px;
	left: 377px;
	font-size: 24px;
	color: #333333;
}

.txt2 {
	width: 170px;
	position: absolute;
	top: 486px;
	left: 97px;
	font-size: 24px;
	color: #333333;
}

.txt3 {
	width: 170px;
	position: absolute;
	top: 470px;
	left: 930px;
	font-size: 24px;
	color: #333333;
}

.txt1 em,
.txt2 em,
.txt3 em {
	font-style: normal;
	font-size: 36px;
	font-weight: bold;
	color: #83AC47;
	line-height: 46px;
}

.txt5 {
	font-weight: 300;
	margin-top: 56px !important;
}

.img-right {
	margin-top: 213px;
	margin-bottom: 126px;
}

.part1 .img p {
	/* margin-top: 0 !important; */
}

.txt6 em,
.txt7 em,
.txt8 em,
.txt9 em,
.txt10 em {

	font-style: normal;
	font-size: 26px;
	font-weight: bold;
	color: #353535;
	line-height: 7px;
	width: 100%;
}

.txt6,
.txt7,
.txt8,
.txt9,
.txt10 {
	width: 250px !important;
	font-size: 24px;
	font-weight: bold;
	color: #353535;
	line-height: 7px;
	position: absolute;
}

.txt6 span,
.txt7 span,
.txt8 span,
.txt9 span,
.txt10 span {
	font-size: 18px;
	font-weight: 300;
	color: #959595;
	line-height: 7px;
}

.txt6 {
	top: 1254px;
	left: 5px;
}

.txt7 {
	top: 1064px;
	left: 855px;
}

.txt8 {
	top: 1964px;
	left: 5px;
}

.txt9 {
	top: 1900px;
	left: 825px;
}

.txt10 {
	top: 1700px;
	left: 950px;
}

.t0 {
	width: 155px;
	position: absolute;
	font-weight: bold;
	color: #FEFEFE !important;
	line-height: 32px;
	font-size: 38px !important;
	top: 1655px !important;
	left: 475px !important;
	white-space: nowrap;

}

.t1,
.t2,
.t3,
.t4,
.t5 {
	width: 60px;
	position: absolute;
	font-weight: bold;
	color: #FEFEFE !important;
	line-height: 32px;
	font-size: 30px !important;
}

.t1 {
	top: 1435px;
	left: 175px;
}

.t2 {
	top: 1285px;
	left: 853px;
}

.t3 {
	top: 1813px;
	left: 224px;
	white-space: nowrap;
}

.t4 {
	top: 1750px;
	left: 830px;
}

.t5 {
	top: 1545px;
	left: 960px;
}

/* part2 */

.part2 .content {
	width: 1200px;
	height: 847px;
	position: relative;
}

.circle0 {
	width: 564px;
	height: 564px;
	border-radius: 50%;
	position: absolute;
	top: 121px;
	left: 303px;

}

.t-top {
	position: absolute;
	z-index: 4;
	color: #EAF4FC !important;
	top: 320px;
	left: 200px;
	font-size: 44px !important;
	margin-top: 0 !important;
}

.line {
	position: absolute;
	top: 300px;
	left: 195px;
	height: 5px;
	width: 200px;
	border: none;
	opacity: .75;
	background: linear-gradient(to right, #529fc5, #ffffff, #027dbb);
}

.center {
	font-weight: bold;
	color: #EAF4FC !important;
	top: 250px;
	left: 200px;
}

.pop {
	width: 392px;
	height: 392px;
	background: #DBEFFB;
	border-radius: 50%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.pop-title {
	font-size: 36px !important;
	font-weight: bold;
	color: #0172AA !important;
	margin-top: 0 !important;
	line-height: 65px !important;
}

.pop-content {
	font-size: 24px;
	color: #010101;
	line-height: 26px;
	text-align: center;
	white-space:nowrap;
	line-height: 36px;
}

.pop1 {
	top: 100px;
	left: 3px;
}

.pop2 {
	top: 221px;
	right: 1px;
}

.part2-img {
	height: 63px;
	width: 63px;
	color: #EAF4FC;
	background: #2596C3;
	border-radius: 50%;
	position: absolute;
	top: 20px;
	/* left: 20px; */
	display: flex;
	justify-content: center;
	align-items: center;
	border: #ffffff 7px solid;
}

.part2-img>p {
	color: #ffffff;
	font-size: 24px;
	margin-top: 0;
	font-weight: bold;
}

/* part 7 */
.part7 .contain {
	height: 756px;
}

.part7 .card-case {
	height: 457px !important;
	margin-top: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.part7 .card-text {
	text-align: justify !important;
	border: none !important;
}

.part7 .card-text>p {
	text-align: left !important;
}

.part7 .card-case>img {
	margin-top: 0 !important;
}

/* part3 */
.case {
	position: relative;
}

.case>h4 {
	width: 501px;
	height: 69px;
	border: 1px solid #33A6DF;
	border-radius: 30px;
	margin: 0 auto;
	margin-top: 86px;
	/* margin-bottom: 50px; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #33A6DF;
	line-height: 46px;

}

.card-case {
	width: 1201px;
	height: 395px;
	background: #FFFFFF;
	border: 1px solid #999999;
	display: flex;
	justify-content: space-around;
	/* align-items: center; */
	position: relative;
}

.card-case>img {
	width: 588px;
	margin-left: 38px;
	height: 320px;
	margin-right: 60px;
	/* display: flex; */
	/* justify-content: space-around; */
	/* align-items: center; */
	margin-top: 38px;
}

.card-text {
	width: 468px;
	height: fit-content;
	margin-right: 38px;
	padding-left: 31px;
	border-left: 1px solid #999999;
	display: flex;
	flex-direction: column;
	margin-top: 35px;
}

.card-text>p {
	font-size: 18px;
	color: #333333;
	line-height: 36px;
	margin-top: 0;
}

.tess p {
	text-align: justify;
}

.card-text>span {
	font-size: 18px;
	color: #333333;
	line-height: 36px;
	margin-top: 0;
	display: flex;
	align-items: end;
	justify-content: flex-end;
}

.card-case>hr {
	background-color: #999999;
	border: #999999;
	width: 8px;
	height: 8px;
	top: 35px;
	position: absolute;
	right: 523px;
	border-radius: 50%;
}

.part03-down {
	margin-top: 200px;
	position: relative;
}

.part03-down p {
	font-size: 36px;
	color: #33A6DF;
	text-align: center;
}

.part03-down img {
	width: 389px;
	height: 257px;
}

.mask {
	width: 389px;
	height: 257px;
	position: absolute;
	background: #1E719A;
	background: rgba(30, 113, 154, .3);
	/* background: none; */
	display: flex;
	align-items: center;
	opacity: 1;
	justify-content: center;

}

.mask p {
	font-size: 36px;
	color: #ffffff;
}

.part03-down span {
	border-bottom: 10px solid #DFC133;
}

.down {
	height: 547px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.thr0 {
	position: absolute;
	margin: 0 auto;
	top: 156px;
	left: 48.45%;
	width: 0;
	height: 0;
	border: 18.5px solid #ffffff;
	border-color: #ffffff transparent transparent transparent;
}

.thr1 {
	margin: 0 auto;
	width: 0;
	height: 0;
	border: 20px solid #33A6DF;
	border-color: #33A6DF transparent transparent transparent;
}

/* part4 */
.part4 .content {
	height: 572px;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-items: center;
}

.box-4 {
	width: 381px;
	height: 224px;
	background: #FFFFFF;
	border: 1px solid #999999;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-4 img {
	position: absolute;
	top: -50px;
	left: 137px;
}

.box-4 p {
	margin-top: 40px;
}

/* part 5 */
.part5 .contain {
	text-align: center;
}

.part5 .content {
	height: 1184px;
	margin: 0 auto;
	position: relative;
}

.part5 .content>p {
	margin-top: 46px;
	text-align: center;
}

.title-5 {
	width: 100px;
	border-bottom: 12px solid #C5E0ED;
	margin: 0 auto;
	margin-bottom: 95px;
}

.title-5 p {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	line-height: 23px;
}

.border-5 {
	width: 983px;
	height: 455px;
	border-top: 1px solid #33A6DF;
	border-right: 1px solid #33A6DF;
	border-bottom: 1px solid #33A6DF;
	position: absolute;
	top: 425px;
	right: 52px;
	opacity: 1;
}

.row {
	display: flex;
	justify-content: end;
	align-items: center;
	margin-bottom: 95px;
}

.circle {
	width: 184px;
	height: 184px;
	background: #C5E0ED;
	border-radius: 50%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 17px solid #ffffff;
}

.item {
	width: 290px;
	height: 370px;
	display: flex;
	align-items: center;
	flex-direction: column;
	opacity: 1;
}

.item>p {
	font-size: 24px;
	font-family: Arial;
	font-weight: bold;
	color: #33A6DF;
	line-height: 36px;
	margin-top: 35px;
}

.item>span {
	margin-top: 15px;
	font-size: 18px;
	font-family: Source Han Sans CN;
	color: #333333;
	line-height: 36px;
}

/* part6 */
.part6 .title_content {
	width: 1200px;
	margin-top: 146px;
}

.part6 .content {
	height: 2148px;
}

.part6 .content>p {
	margin-top: 46px;
	text-align: center;
}

.img-6-1 {
	width: 1200px;
	height: 745px;
	background: #FFFFFF;
	border: 1px solid #999999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 115px;
	margin-bottom: 18px;
}

.img-6-1 p,
.paper p {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
	line-height: 36px;
	margin-top: 40px;
}

.img-6-1 span,
.paper span {
	font-size: 18px;
	font-weight: 300;
	color: #333333;
	line-height: 36px;
	margin-top: 18px;
}

.img-6 {
	width: 1200px;
	display: flex;
	justify-content: space-between;
}

.paper {
	width: 380px;
	height: 494px;
	background: #FFFFFF;
	border: 1px solid #999999;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 18px;
	margin-bottom: 18px;
}

.paper span {
	text-align: center;
}

/* footer */
.footer {
	width: 100%;
	height: 28vh;
	background: url("../images/immune/immune-footer.png") no-repeat;
	background-size: 100% 100%;
	/* position: absolute; */
	bottom: 0;
	padding-top: 0;
}

.footer p {
	font-size: 36px;
	color: #FFFFFF;
	line-height: 61px;
	text-align: center;
	/* bottom: -200px; */
	position: relative;
	top: 100px;

}

.fadenone {
	opacity: 0;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInUp {
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

@keyframes show {
	from {
		opacity: 0;
		/* -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0); */
	}

	to {
		opacity: 1;
		/* -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); */
	}
}

.show {
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show1 {
	animation-duration: .2s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show2 {
	animation-duration: .6s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show3 {
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show4 {
	animation-duration: 1.4s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show5 {
	animation-duration: 1.8s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show6 {
	animation-duration: 2.2s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show7 {
	animation-duration: 2.6s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show8 {
	animation-duration: 3s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}

.show9 {
	animation-duration: 3.5s;
	animation-fill-mode: both;
	-webkit-animation-name: show;
	animation-name: show;
}
