@charset "utf-8";
/*头部导航*/
.hua_bg{
	width:100%;
	height: auto;
	background: url("../images/hua_bg.jpg") no-repeat top;
	background-size:cover;
}
.one_warp{
	width: 100%;
	height: 100vh;
	position: relative;
}
.one_bg{
	position: absolute;
	top:0;
	right: 0;
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
	background: url("../images/hua_02.jpg") no-repeat center right;
	background-size:cover;
	background-attachment: fixed;
}
.one_bg img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.one{
	width: 73vw;
	width: calc(--mainwidth);
	margin: 0 auto;
	height:100%;
	position: relative;
	padding-top: 10vh;
	z-index: 2;
}
.one_logo{
	width:100%;
	height: 6.875rem;
	font-size: 0px;
}
.one_logo img{
	height: 6.875rem;
	width: auto;
}
.one_1{
	width:100%;
	height: 7.75rem;
	font-size: 0px;
	margin-top: 22%;
}
.one_1 img{
	height: 7.75rem;
	width: auto;
}

.one_tit{
	width:100%;
	height: auto;
	position: relative;
	color: #000;
	font-weight: bold;
	font-size: 5.4375rem;
	line-height: 7.75rem;
}
.one_2{
	width:100%;
	position: absolute;
	bottom: 0;
	font-size: 1.875rem;
	color: #545454;
	font-family: Gotham;
	text-transform: uppercase; 
	line-height: 2.25rem;
	height: 2.25rem;
}
.one_2:after{
	content: '';
	background: url("../images/hua_08.png") no-repeat left;
	background-size:cover;
	width: 5.75rem;
	height: 5.75rem;
	border-radius:50%;
	position: absolute;
	top:-1.75rem;
	margin-left: 2.5rem;
	-webkit-animation: quan 2s infinite normal ease;
    animation: quan 2s infinite normal ease;
}



.two{
	width: 100vw;
	margin: 0 auto;
	height: calc(100vw * 1191 / 1920);
	overflow: hidden;
}
.two_tu img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.three{
	width:86%;
	height: calc(86vw * 1021 / 1658);
	background: url("../images/hua_13.jpg") no-repeat center;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0px 7.6%;
	background-attachment: fixed;
}
.three_1{
	color: #fff;
	width: 100%;
	font-size: 5.5rem;
	font-family: Gotham;
	text-transform: uppercase; 
	line-height: 5.5rem;
}
.three_2{
	width:100%;
	color: #fff;
	font-size: 3.75rem;
	font-family: opp_m;
	line-height: 8rem;
}
.three_3{
	width:50%;
	height: auto;
	color: #fff;
	font-size: 1.125rem;
	line-height: 2rem;
	margin-top: 4.75rem;
}
.three_4{
	width:50%;
	height: auto;
	color: rgba(255,255,255,0.3);
	font-size: 0.875rem;
	line-height: 1.75rem;
	margin-top: 3.75rem;
}


.four{
	width:86%;
	height: calc(86vw * 1147 / 1656);
	background: url("../images/hua_16.png") no-repeat center;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0px 7.6%;
	background-attachment: fixed;
}
.four_shang{
	padding-top: 10vh;
}
.four .three_1,.four .three_2{ color: #000;}
.four_xia{
	padding-bottom: 6vh;
}
.four_1{
	width:100%;
	height: auto;
}
.four_1 img{
	height: 4.5rem;
	width: auto;
}
.four_2{
	width: 19.75rem;
	height: 5.375rem;
	position: relative;
	margin-top: 4.75rem;
}
.four_2:after{
	content: '';
	width: 100%;
	height: 0.25rem;
	background: #3977e7;
	position: absolute;
	left: 0;
	top: 0;
}
.four_2 a{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 5.375rem;
	align-items: center;
	font-size: 1.5rem;
	color: #000;
	font-family: Gotham;
}
.four_2 a>img{ width: 1.625rem; height: auto;}

.four_img{
	position: absolute;
	right: 7.6%;
	top:0;
	height:100%;
	display: flex;
	align-items: center;
	
}
.four_img img{
	height: 33.75rem;
	width: auto;
	-webkit-animation: quan 2s infinite normal ease;
    animation: quan 2s infinite normal ease;
}

@keyframes quan {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
	 100% {
        transform: scale(1);
    }
}


.alphabet{
	width:73vw; 
	width: var(--mainwidth);
	height:auto; 
	overflow:hidden; 
	margin:0 auto;
	padding-top: 12vh;
}
.alphabet_tit{
	width: 100%;
	height:6.0625rem;
	position:relative;
}
.alphabet_tit:after{
	 content: '';
	background: url("../images/hua_27.png") no-repeat center;
	background-size: cover;
	width: 16.25rem;
	height: 9.625rem;
	position: absolute;
	right: 0;
	top: -3rem;
}
.alphabet_tit_1{
	position: relative;
	color: #3977e7;
	font-family: opp_m;
	font-size: 3.6875rem;
	width:18.25rem;
	height: 6.0625rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.alphabet_tit_1:after{
	content: '';
	background: url("../images/hua_28.png") no-repeat center;
	background-size:cover;
	width:18.25rem;
	height:6.0625rem;
	position: absolute;
	left: 0;
	top:0;
}
.alphabet_tit_1:before{
	content: '';
	background: url("../images/hua_32.png") no-repeat center;

	width:34.625rem;
	height:6.0625rem;
	position: absolute;
	left: 17.75rem;
	top:0;
}


.alphabet_con{
	width: 100%;
	height: calc(73vw * 800 / 1400);
	height: calc(var(--mainwidth) * 800 / 1400);
	margin-top: 4vh;
	display: flex;
	justify-content: space-between;
}
.alphabet_left{
	width: 49%;
	background: #3977e7;
	border-radius:20px;
	padding: 0px 4%;
	display: flex;
	align-items: flex-end;
	font-family: Gotham;
	font-size: 2.25rem;
	color: #fff;
	line-height: 6.25rem;
	justify-content: flex-end;
	text-transform: uppercase;
}

.alphabet_right{
	width: 49%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.alphabet_1{
	width:100%;
	display: flex;
	justify-content:space-between;
	height: 53.25%;
}
.alphabet_1>div{
	width: calc(50% - 0.5rem);
	background: #8abb29;
	border-radius:20px;
	padding: 0px 4%;
	display: flex;
	align-items: flex-end;
	font-family: Gotham;
	font-size: 1.875rem;
	color: #fff;
	line-height: 4.5rem;
	justify-content: flex-end;
	text-transform: uppercase;
}
.alphabet_1>div:nth-child(2){ background: #5a95ff;}

.alphabet_2{
	width:100%;
	background: #bed3f4;
	border-radius:20px;
	padding: 0px 4%;
	display: flex;
	align-items: center;
	font-family: Gotham;
	font-size: 1.875rem;
	color: #fff;
	line-height: 4.5rem;
	justify-content: flex-end;
	height: 23.75%;
	text-transform: uppercase;
}
.alphabet_3{
	width:100%;
	display: flex;
	justify-content:space-between;
	height: 18.75%;
}
.alphabet_3>div{
	width: calc((52.5% - 2rem) / 2);
	background: #000;
	border-radius:20px;
}
.alphabet_3>div:nth-child(1){ width:47.5%;}
.alphabet_3>div:nth-child(2){ background: #212f46;}
.alphabet_3>div:nth-child(3){ background: #c0c0c0;}


.alphabet_nei{
	width:100%;
	display: flex;
	justify-content:center;
	flex-direction: column;
	height: calc(73vw * 508 / 1400);
	height: calc(var(--mainwidth) * 508 / 1400);
	margin-top: 2.5vh;
	background: #212f46;
	border-radius:20px;
	position: relative;
	padding: 0px 4%;
}
.alphabet_nei_1{
	width:100%;
	font-size: 3.75rem;
	color: #fff;
}
.alphabet_nei_2{
	width:100%;
	height: auto;
	font-family: Gotham;
	font-size: 4.625rem;
	color: #3977e7;
	line-height: 4.5rem;
}
.alphabet_nei_3{
	font-size: 28rem;
	color: rgba(255,255,255,0.03);
	font-family: Gotham;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	right: 4%;
}



.brief{ 
	width:73vw; 
	width: var(--mainwidth);
	height:auto; 
	margin:0 auto;
	position: relative;
	z-index: 2;
	margin-top: 18vh;
}
.brief:after{
	content:'';
	background: url("../images/hua_38.png") no-repeat center;
	background-size:cover;
	width: 14.125rem;
	height: 14rem;
	position: absolute;
	right: 1.875rem;
	top: -5.625rem;
}
.brief:before{
	content:'';
	background: url("../images/hua_41.png") no-repeat center;
	background-size:cover;
	width: 7.875rem;
	height: 6.875rem;
	position: absolute;
	right: -11.75rem;
	top: 1.125rem;
}

.brief .three_1,.brief .three_2{ color: #000;}


.brief_img{
	width:100%;
	height: auto;
	text-align: center;
	margin-top: 4vh;
}
.brief_img img{
	max-width: 80%;
	height: auto;
}


.delight{
	width: 100%;
	height: auto;
	margin-top: 14vh;
}
.delight .three_1,.delight .three_2{ 
	color: #000;
	width:73vw; 
	width: var(--mainwidth);
	height:auto; 
	margin:0 auto;
}



.shell_con{
	width: 86%;
	height: auto;
	margin: 0 auto;
	margin-top:4vh;
	position: relative;
	background: rgba(255,255,255,0.3);
	padding: 14vh 0 20vh 0;
	overflow: hidden;
}
.shell_con_1{
	width:58.31%;
	height: calc(86vw * 0.5831 * 2324 / 971);
	font-size: 0px;
	overflow: hidden;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
	margin-left: 7%;
	position: relative;
	z-index: 2;
}
.shell_con_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.shell_con_2{
	width:43.6%;
	height: calc(86vw * 0.436 * 1951 / 726);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top:11.875rem;
	right: 7%;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
}
.shell_con_2 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.show{
	width: 100%;
	height: auto;
	background: url("../images/hua3_02.jpg") no-repeat center;
	background-size:cover;
	position: relative;
	z-index: 2;
	padding: 8vh 0 10vh 0;
	background-attachment: fixed;
}


.show_img{
	width:100%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
	
}
.show_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.love{
	width: 100vw;
    margin: 0 auto;
    height: auto;
    padding-top: 14vh;
	background: url("../images/hua2_02.jpg") no-repeat center top;
	background-attachment: fixed;
}
.love_img{
	width: 100%;
	height:auto;
	font-size: 0px;
	overflow: hidden;
	text-align: center;
}
.love_img img{
	width:86%;
	height: auto;
	object-fit: cover;
	object-position: center;
}
.love_nei{
	width:100%;
	height: auto;
	text-align: center;
	margin-top: 20vh;
	padding-bottom: 10vh;
}
.love_1{
	width:100%;
	height: auto;
	color: #000;
	font-size: 2.5rem;
	font-family: Arial;
}
.love_2{
	width:100%;
	text-align: center;
	font-size: 2.25rem;
	color: #000;
	letter-spacing: 0.25rem;
	line-height: 4.75rem;
}
.love_3{
	width:100%;
	text-align: center;
	font-size: 1.125rem;
	color: rgba(0,0,0,0.43);
	line-height:6.625rem;
	margin-top: 1.5rem;
}


@media screen and (max-width:1023px)and (min-width:300px){

	.one_bg{
		position: absolute;
		top:0;
		right: 0;
		width:100%;
		height: 100%;
		font-size: 0px;
		overflow: hidden;
		background: url("../images/hua_02.png") no-repeat top right;
		background-size:100% auto;
	}
	.one_bg img{
		display:none;
	}

	.one{
		width: 96vw;
		padding-top: 26vh;
		z-index: 2;
		text-align: center;
		
	}
	.one_logo{
		width:100%;
		height: 4rem;
		font-size: 0px;
	}
	.one_logo img{
		height: 4rem;
		width: auto;
	}
	.one_1{
		height: 3rem;
	}
	.one_1 img{
		height: 3rem;
	}

	.one_tit{
		font-size: 2.5rem;
		line-height: 5.75rem;
	}
	.one_2{
		font-size: 1.5rem;
		text-align: left;
	}
	.one_2:after{
		width: 4.75rem;
		height: 4.75rem;
		top:-1.25rem;
		margin-left: 2rem;
	}



	.two{
		height: auto;
		padding: 10vh 0;
	}
		.two img{
			width:100%;
			height: auto;
		}

	.three{
		width:96%;
		height: auto;
		background-size:cover;
		padding: 5vh 4%;
	}
	.three_1{
		font-size: 2.5rem;
		line-height: 2.5rem;
		text-align: center;
	}
	.three_2{
		font-size: 2.25rem;
		line-height: 6rem;
		text-align: center;
	}
	.three_3{
		width:100%;
		margin-top: 3vh;
		text-align: center;
	}
	.three_4{
		width:100%;
		margin-top: 2.75vh;
		text-align: center;
	}


	.four{
		width:96%;
		height: auto;
		background-size:cover;
		position: relative;
		justify-content:center;
		padding: 0px 4%;
	}
	.four_shang{
		padding-top: 8vh;
	}

	.four_xia{
		padding-bottom: 6vh;
		margin-top: 8vh;
	}
	.four_1 img{
		height: 2rem;
		width: auto;
	}
	.four_2{
		width: 100%;
		margin-top: 4vh;
	}
	.four_img{
		position: relative;
		right:0;
		top:0;
		justify-content: center;
		margin-top: 4vh;
	}
	.four_img img{
		height: auto;
		width: 90%;
	}


	.alphabet{
		width:96vw; 
		padding-top: 8vh;
	}
	.alphabet_tit{
		width: 100%;
		height:5.125rem;
		position:relative;
	}
		.alphabet_tit:after{
			width: 7.5rem;
			height: 4.5rem;
			top: -3rem;
			right: -1rem;
		}
	.alphabet_tit_1{

		font-size: 2.25rem;
		width:16.25rem;
		height: 5.125rem;
		margin: 0 auto;
	}
	.alphabet_tit_1:after{
		width:16.25rem;
		height:5.125rem;
		left: 0;
	}
	.alphabet_tit_1:before{
		display: none;
	}


	.alphabet_con{
		height:auto;
		margin-top: 6vh;
		justify-content:center;
		flex-direction: column;
	}
	.alphabet_left{
		width: 100%;
		font-size: 2rem;
		line-height: 5.25rem;
		height: 20vh;
	}

	.alphabet_right{
		width: 100%;
		margin-top: 1rem;
	}
	.alphabet_1{
		height: 20vh;
	}
	.alphabet_1>div{
		font-size: 1.75rem;
	}


	.alphabet_2{
		font-size: 1.75rem;
		height: 20vh;
		margin-top: 1rem;
	}
	.alphabet_3{
		margin-top: 1rem;
		height:16vh;
	}



	.alphabet_nei{

		height: 30vh;
		margin-top: 1rem;
	}
	.alphabet_nei_1{
		font-size: 2rem;
	}
	.alphabet_nei_2{
		font-size: 3rem;
		line-height: 4.5rem;
	}
	.alphabet_nei_3{
		font-size: 14rem;

	}

	.brief{ 
		width:96vw; 
		margin-top: 14vh;
	}
	.brief:after{
		width: 6rem;
		height: 6rem;
		right: 1.25rem;
		top: -4.625rem;
	}
	.brief:before{
		display: none;
	}

	.brief_img img{
		max-width: 100%;
		height: auto;
	}

	.delight{
		margin-top: 10vh;
	}
	.delight .three_1,.delight .three_2{ 
		width:96vw; 
	}



	.shell_con{
		width: 96%;
		padding: 6vh 0 12vh 0;
	}
	.shell_con_1{
		width:60%;
		height: calc(96vw * 0.6 * 2324 / 971);
		margin-left:5%;
	}


	.shell_con_2{
		width:45%;
		height: calc(96vw * 0.45 * 1951 / 726);
		top:6rem;
		right: 5%;
	}


	.love{
		padding-top: 10vh;
	}

	.love_img img{
		width:90%;
	}
	.love_nei{
		margin-top: 16vh;
		padding-bottom: 10vh;
	}
	.love_1{
		font-size: 1.75rem;
	}
	.love_2{
		font-size: 1.875rem;
		line-height: 4rem;
	}
	.love_3{
		font-size: 1rem;
	}





}