@charset "utf-8";
@font-face {
    font-family: hwhp;
    src: url('../font/hwhp.woff2');
	font-display: swap;
}
.chaochu{
	width: 100%;
	height: auto;
	overflow: hidden;
}

/*头部导航*/
.one_warp{
	width:100%;
	height: 73vh;
	position: relative;
	z-index: 3;
}

.one_bg{
	width:92%;
	height: calc(92vw * 764 / 1760);
	font-size: 0px;
	overflow: hidden;
	margin: 0 auto;
	transform: translateY(20vh);
}
.one_bg img{
	width:100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}


.two{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	padding: 36vh 0 13.5vh 0;
	background: url("../images/kebg_02.png") no-repeat center;
	background-size:cover;
}
.two_tit{
	width:100%;
	height: auto;
}
.two_tit_1{
	width:100%;
	display: flex;
	justify-content: center;
}
.two_tit_1 span{
	display: flex;
	background: url("../images/kebg_03.png") no-repeat center;
	background-size:cover;
	width: 6.5rem;
	height: 7.071rem;
	align-items: center;
	justify-content: center;
	padding-bottom: 8px;
	font-size: 2rem;
	color: #000;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 0.25rem;
}
.two_tit_2{
	width:100%;
	text-align: center;
	color: #000000;
	font-size: 3.428rem;
	font-family: oph;
	margin-top: 0.714rem;
}
.two_tit_3{
	width:100%;
	color: #000;
	text-align: center;
	font-size: 2rem;
	text-transform: uppercase;
	-webkit-text-stroke:2px #000;
}
.two_con{
	margin: 0 auto;
	margin-top: 2.571rem;
	background: url("../images/ke2_07.png") no-repeat center;
	background-size:100% auto;
	width: 72.29%;
	height: calc(72.29vw * 315 / 1388);
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding-bottom: 1.428rem;
}
.two_con_1{
	margin: 0 auto;
	width: 81%;
	height: auto;
	color: #000;
	font-size: 1.428rem;
	text-align: center;
	line-height: 2.428rem;
}




.three_warp{
	width:100%;
	height:  auto;
	background: url("../images/ke_02.png") no-repeat center;
	background-size:cover;
	position: relative;
	overflow: hidden;
	margin-top: 14vh;
	padding-bottom: 15vh;
}
.three{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	margin-top: 7vh;
}
.three_zi{
	font-size: 1.714rem;
	text-transform: uppercase; 
	color: #000;
	padding-left: 12%;
	display: flex;
	justify-content: center;
	flex-direction:column;
}
.three_zi span{
	font-size: 7rem;
	font-family: opb;
	display: block;
	line-height: 7.5rem;
}
.three_right{
	width: 70.5%;
	height: calc(70.5vw * 0.3545 * 480 / 480);
	position: relative;
}
.three_1{
	width:35.45%;
	height: 100%;
	position: relative;
	border-radius:50%;
	display: flex;
	align-items: center;
	padding-left: 7%;
}
.three_1:after{
	content: '';
	width: 100%;
	height: 100%;
	background: #5baaf8;
	left: -0.857rem;
	bottom: -0.857rem;
	border-radius:50%;
	position: absolute;
}
.three_1:before{
	content: '';
	width: 100%;
	height: 100%;
	background: #5baaf8;
	border: 2px solid #000;
	left: 0;
	bottom: 0;
	border-radius:50%;
	position: absolute;
	z-index: 2;
}

.three_2{
	width:49.18%;
	height: 100%;
	position: absolute;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 25.4%;
	top: 0;
	z-index: 3;
}
.three_2:after{
	content: '';
	width: 100%;
	height: 100%;
	background: #f865ab;
	left: -0.857rem;
	bottom: -0.857rem;
	border-radius:40%;
	position: absolute;
}
.three_2:before{
	content: '';
	width: 100%;
	height: 100%;
	background: #f865ab;
	border: 2px solid #000;
	left: 0;
	bottom: 0;
	border-radius:40%;
	position: absolute;
	z-index: 2;
}
.three_3{
	width:49.18%;
	height: 100%;
	position: absolute;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	right: -11.96%;
	top: 0;
}
.three_3:after{
	content: '';
	width: 100%;
	height: 100%;
	background: #01a4a3;
	left: -0.857rem;
	bottom: -0.857rem;
	border-radius:40%;
	position: absolute;
}
.three_3:before{
	content: '';
	width: 100%;
	height: 100%;
	background: #01a4a3;
	border: 2px solid #000;
	left: 0;
	bottom: 0;
	border-radius:40%;
	position: absolute;
	z-index: 2;
}

.three_1 span,.three_2 span,.three_3 span{
	font-size: 1.285rem;
	text-transform: uppercase;
	color: #000;
	position: relative;
	z-index: 3;
}

.threea{ margin-top: 22vh;}
.threea .three_zi{ padding-left:0;padding-right: 12%;}
.threea .three_right{ height: auto; display: flex;justify-content:space-between;}
.three_mu{
	width: 48%;
    font-size: 24.714rem;
    line-height: 20.714rem;
    font-family: opb;
    color: #a973bf;
    -webkit-text-stroke: 1px #000;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.three_all{
	width: 53%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.three_e{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.cthree_e_e{
	color: #000;
	line-height: 3rem;
}
.three_e_right{
	width: 80%;
	
}
.three_e_1{
	font-size: 2.571rem;
	color: #000;
	font-family: Arial;
}
.three_e_2{
	width:100%;
	color: #000;
	line-height: 2.142rem;
	margin-top: 1.285rem;
	letter-spacing: 0.5rem;
}
.three_e_2 span{text-transform: uppercase; display: block;}
.three_e_3{
	width:100%;
	color: #000;
	line-height: 2.142rem;
	margin-top: 1.285rem;
}
.three_e_3 span{ margin-right: 6.285rem;}

.four_warp{
	width:100%;
	height: auto;
	padding-top: 18vh;
	position: relative;
}
.four_warp:after{
	content: '';
	width: 100%;
	height: calc(100vw * 1539 / 1920);
	background: url("../images/kebg_04.png") no-repeat center top;
	background-size:cover;
	position: absolute;
	top: 0;
	left: 0;
}
.four{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}
.four_all{
	width:100%;
	height: auto;
	margin-top: 6.142rem;
	position: relative;
}
.four_list{
	display: flex;
	justify-content: flex-start;
	transform: translateX(-2.857rem);
}
.four_img{
	width: 24.9%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
	margin-right: 2.6%;
}
.four_img:first-child{ padding-top: 14vh;}
.four_img:nth-child(3){ padding-top: 17.5vh;}
.four_img img{
	width: 100%;
	height: auto;
}

.four_en{
	color: #fff;
	font-size: 13rem;
	font-family: hwhp;
	 writing-mode: vertical-lr;
	text-transform: uppercase; 
	position: absolute;
	top: 18vh;
	right: 7vw;
}



.love_warp{
	width: 100%;
	height:auto;
	margin-top: -3rem;
	position: relative;
	z-index: 2;
	padding-bottom: 15vh;
}
.love{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
.love_img{
	width: 100%;
	height: auto;
	overflow: hidden;
	font-size: 0;
	margin-top: 3rem;
	text-align: center;
}
.love_img img{
	width: 71%;
	height: auto;
	object-fit: cover;
	object-position: center;
}
.five{
	width:100%;
	height: auto;
	background: url("../images/kebg_14.png") no-repeat center top;
	background-size:cover;
	position: relative;
	z-index: 2;
	padding: 18vh 0 11vh 0;
}

.five_list{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: flex-start;
	margin-top: 6.7vh;
	position: relative;
	z-index: 3;
}
.five_img{
	width: 16.3%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
}
.five_img:first-child{ margin-left: 5.78vw; padding-top: 17.77vh;}
.five_img:nth-child(2){ margin-left: 11.71vw;}
.five_img:nth-child(3){ margin-left: 3vw; padding-top: 24.4vh;}
.five_img:nth-child(4){ margin-left: 3.9vw; padding-top: 12.88vh;}
.five_img:nth-child(5){ position: absolute; right: -8.2vw; padding-top: 31.33vh;}
.five_img img{ width: 100%; height: auto;}

.five_typeright{
	width:94%;
	height: auto;
	margin: 0 auto;
	text-align: right;
	font-size: 1.285rem;
	color: #000;
	line-height: 2.142rem;
	margin-top: 14.45vh;
}

.five_bg{
	width:39.375vw;
	height: 39.375vw;
	font-size: 0px;
	border-radius: 50%;
	position: absolute;
	bottom: 33.88vh;
	left: 30.3125vw;
	border: 1px solid #000;

}
.five_bg:after{
	content: '';
	width: 28vh;
	height: 28vh;
	background: #fc684a;
	border: 1px solid #000;
	border-radius:50%;
	position: absolute;
	bottom: 0;
	left: 1.5rem;
}

.five_bg img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
		background: #00abaa;
	position: relative;
	z-index: 2;
	border-radius:50%;
	overflow: hidden;
}


@media screen and (max-width:1279px)and (min-width:1024px){
	.one_warp{ height: 50vh;}
	.two{ padding: 30vh 0 13.5vh 0;}
	.two_con {
		width: 80%;
		height: calc(80vw * 315 / 1388);
	}
	.three_zi{ padding-left: 8%; font-size: 1.5rem;}
	.three_zi span{ font-size: 6rem;}
	.three_mu {
		width: 42%;
		font-size: 18rem;
		line-height: 16rem;
	}
	.three_all{ width:56%;}
	.three_e_right{ width: 74%;}
	.three_e_3 span {
		margin-right: 4rem;
	}
	.threea .three_zi {
		padding-right: 8%;
	}
	.four_warp{ padding-top: 10vh;}
	.four_warp:after {
  	  height: calc(100vw * 1800 / 1920);
	}
	.four_all{ margin-top: 4.5rem;}
	.four_en{ font-size: 10rem;}
	.love_warp{ margin-top: -1rem; padding-bottom: 10vh;}
	.five{ padding: 12vh 0 7vh 0;}
	
}
@media screen and (max-width:1023px)and (min-width:300px){
	.one_warp{
		height:30vh;
	}
	.one_bg{
		width:94%;
		height: calc(94vw * 764 / 1760);
		transform: translateY(14vh);
	}
	.two{
		padding: 16vh 0 13.5vh 0;
	}

	.two_tit_1 span{
		width: 45px;
		height: 49px;
		padding-bottom: 4px;
		font-size:1.25rem;
		letter-spacing: 0.125rem;
	}
	.two_tit_2{
		font-size: 2rem;
	}
	.two_tit_3{
		font-size: 1.375rem;
	}
	.two_con{
		margin-top: 2.571rem;
		background: #fff none;
		border: 8px solid #9b71b1;
		border-radius:20px;
		width: 94%;
		height: auto;
		padding:1.5rem 0;
	}
	.two_con_1{
		width: 90%;
		font-size: 1.125rem;
		line-height: 2rem;
	}

	.three_warp{
		margin-top: 8vh;
		padding-bottom: 10vh;
	}
	.three{
		justify-content:center;
		flex-direction: column;
		width: 94%;
		margin: 0 auto;
		margin-top: 7vh;
	}
	.three_zi{
		font-size: 1.125rem;
		padding-left:0;
	}
	.three_zi span{
		font-size: 2.75rem;
		line-height: 3.25rem;
	}
	.three_right{
		width: 100%;
		height: calc(100vw * 0.3545 * 480 / 480);
		margin-top: 4vh;
	}
	.three_1 span,.three_2 span,.three_3 span{
		font-size: 1.125rem;
	}

	.threea{ margin-top: 8vh; flex-direction: column-reverse;}
	.threea .three_zi{ padding-left:0;padding-right: 0%;}
	.threea .three_right{ height: auto; display: flex;justify-content:center; flex-direction: column;}
	.three_mu{
		width: 100%;
		font-size: 16rem;
		line-height: 15rem;
	}
	.three_all{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 2vh;
	}
	.three_e{
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
		.three_e:nth-child(2){ margin-top: 5vh;}
	.cthree_e_e{
		color: #000;
		line-height: 3rem;
	}
	.three_e_right{
		width: 100%;

	}
	.three_e_2{
		letter-spacing: 0.375rem;
	}

	.three_e_3 span{ margin-right: 4rem;}

	.four_warp{
		padding-top: 10vh;
	}
	.four_warp:after{
		height: 80%;
	}
	.four_all{
		margin-top: 3rem;
	}
	.four_list{
		transform: translateX(0);
		justify-content: center;
	}
	.four_img{
		width: 30%;
		height: auto;
		font-size: 0px;
		overflow: hidden;
		margin-right: 2%;
	}
	.four_img:first-child{ padding-top: 8vh;}
	.four_img:nth-child(3){ padding-top: 11.5vh; margin-right: 0;} 
	.four_en{
		display: none;
	}



	.love_warp{
		margin-top: 2vh;
		padding-bottom: 8vh;
	}

	.love_img img{
		width: 94%;
	}

	.five{
		padding: 8vh 0 6vh 0;
	}

	.five_list{
		flex-wrap: wrap;
		width: 94%;
		margin: 0 auto;
		margin-top: 6vh;
		justify-content: center;
	}
	.five_img{
		width: 32%;
		height: auto;
		height: calc(94vw * 0.32 * 649 / 313);
		margin-right: 2%;
		margin-bottom: calc(94vw * 0.02);
	}
	
	.five_img:first-child{ margin-left: 0; padding-top: 0;}
	.five_img:nth-child(2){ margin-left: 0;}
	.five_img:nth-child(3){ margin-left: 0; padding-top: 0;}
	.five_img:nth-child(4){ margin-left: 0; padding-top: 0;}
	.five_img:nth-child(5){ position: relative; right:0; padding-top: 0;}

	.five_img:nth-child(3n){ margin-right: 0;}		

	.five_img img{ width: 100%; height: auto;}

	.five_typeright{

		font-size: 1.125rem;
		line-height: 2rem;
		margin-top: 10vh;
	}

}