@charset "utf-8";
@font-face{ font-family:'din_m'; src:url('../font/DINPro-Medium.woff2');}

.chaochu{
	width: 100%;
	height: auto;
	overflow: hidden;
}

/*头部导航*/
.one_warp{
	width:100%;
	height: 150vh;
	position: relative;
}

.one_bg{
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
}
.one_bg img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.one{
	width: 73vw;
    width: var(--mainwidth);
    margin: 0 auto;
	height:100%;
	position: relative;
	padding: 18vh 0;
}
.one_1{
	width: 100%;
	height:auto;
	font-size: 6.428rem;
	color: #fff;
	text-transform: uppercase; 
	font-family: din_m;
	line-height: 7.142rem;
	padding-bottom: 14vh;
	position: relative;
}
.one_1:after{
	content: '';
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.714rem;
	height: 4px;
}
.one_2{
	width:100%;
	height: auto;
	font-size: 2.142rem;
	color: #fff;
	line-height: 3.142rem;
	margin-top: 14vh;
}
.one_3{
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 18vh;
	left: 0;
	font-size: 1.285rem;
	color: #fff;
	line-height: 2.142rem;
}
.one_3 span{
	display: block;
	text-transform: uppercase; 
}

.one_4{
	height: auto;
	position: absolute;
	bottom: 18vh;
	z-index: 3;
	right: 0
}
.one_4 img{
	height: 4.571rem;
	width: auto;
}




.two_warp{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	background: #f5f5f5;
	padding: 2.5vw 0 36vh 0;
}

.two{
	width: 95vw;
	margin: 0 auto;
	height:auto;
	position: relative;
	z-index: 2;
	border-radius:20px;
	background-image: linear-gradient(#fff,  #f5f5f5);
}
.two_img{
	width:100%;
	height: auto;
	overflow: hidden;
}
.two_img img{
	width: 100%;
	height: auto;
}
.two_con{
	margin: 0 auto;
	width: 94%;
	height: auto;
	margin-top: 5.142rem;
}
.four_en{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: flex-start;
}
.four_en_1{
	width: 50%;
	height: auto;
	text-transform: uppercase;
	color: rgba(0,0,0,0.7);
	font-size: 2.857rem;
	line-height: 3rem;
	font-family: din_m;
}
.four_tit{
	width: 100%;
    font-size: 18.571rem;
    line-height: 18.571rem;
    font-family: din_m;
    color: #000;
    display: flex;
    align-items: center;
	margin-top: 11vh;
}

.four_come{
	width:100%;
	height: auto;
	display: flex;
	justify-content:space-between;
	position: relative;
	margin-top: 4rem;
}
.four_come_2{
	width: 62%;
    font-size: 48.857rem;
    line-height: 40.857rem;
    font-family: din_m;
    color: transparent;
    -webkit-text-stroke: 2px #000;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.four_come_1{
	width: auto;
	color: rgba(0,0,0,0.6);
	font-size: 1.857rem;
	font-family: din_m;
	text-transform: uppercase; 
	letter-spacing: 1rem;
	line-height: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.four_come_1 span{
	display: block;
	font-family: din_m;
	font-size: 4.571rem;
	color: #000;
	text-transform: initial; 
	padding-bottom: 2.857rem;
	letter-spacing: 0;
}

.four_wei{
	width:100%;
	font-size: 4.571rem;
	color: #000;
	font-family: '微软雅黑';
	text-align: center;
	margin-top: 11vh;
	letter-spacing: 1rem;
}
.four_comea .four_come_1{
	text-align: right;
	padding-left: 5%;
}
.four_comea .four_come_2{
	-webkit-text-stroke: 0;
	font-family: '微软雅黑';
	color: #000;
	font-size: 25.5rem;
	justify-content: flex-start;
	line-height: 25.5rem;
}


.five_en{
	width: 100%;
    color: rgba(0,0,0,0.6);
    font-size: 2.857rem;
    font-family: din_m;
    text-transform: uppercase;
	line-height: 5.625rem;
	margin-top: 24vh;
}
.five_tit{
	width:100%;
	height: auto;
	color: #e9e9e9;
	font-size: 35.857rem;
	font-family: din_m;
    text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 36rem;
}
.five_con{
	margin: 0 auto;
	width:73vw;
	width:var(--mainwidth);
	height: calc(73vw * 850 / 1400);
	height: calc(var(--mainwidth) * 850 / 1400);
	display: flex;
	justify-content: space-between;
	margin-top: -17.357rem;
	position: relative;
	z-index: 2;
}
.five_con:after{
	content: '';
	background: url("../images/de_08.png") no-repeat left;
	background-size:cover;
	width: 25.071rem;
	height: 28.642rem;
	position: absolute;
	bottom: -11.428rem;
	right: -11.428rem;
}
@keyframes aboutball_breath1 {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1.1);
    }
}

.five_left{
	width: 31%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.five_left_con{
	width: 100%;
	height: 71.5%;
	background: #003f98;
	padding: 2.857rem;
	position: relative;
}
.five_left_1{
	font-size: 2.285rem;
	color: #fff;
	font-family: din_m;
}
.five_left_2{
	font-size: 2.285rem;
	color: #fff;
	font-family: din_m;
	margin-top: 0.714rem;
	text-transform: uppercase; 
}
.five_left_2 span{	
	padding: 0px 2rem;
}
.five_left_3{
	font-size: 2.285rem;
	color: #fff;
	font-family: din_m;
	position: absolute;
	bottom: 2.857rem;
	right: 2.857rem;
}

.five_left_en{
	width: 100%;
	height: 28.5%;
	background: #fff;
	color: #000;
	font-size: 2.285rem;
	font-family: din_m;
	padding: 2.857rem;
}

.five_right{
	width:69%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.five_right .five_left_con{ background: #fff;}
.five_right .five_left_1{ color: rgba(0,0,0,0.6);}
.five_right .five_left_2{ color: rgba(0,0,0,0.6);}
.five_right .five_left_3{ color: rgba(0,0,0,0.6);}

.five_list{
	width: 100%;
	height: 28.5%;
	display: flex;
	justify-content: flex-start;
}
.five_list .five_left_en{
	width: 25%;
	height: 100%;
	background: #cccccc;
	color: #fff;
}
.five_list .five_left_en:nth-child(2){background: #999;}
.five_list .five_left_en:nth-child(3){background: #666;}
.five_list .five_left_en:nth-child(4){background: #000;}

.three_warp{
	width:100%;
	height: 144vh;
	position: relative;
	overflow: hidden;
}
.three_img{
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 0;
}
.three_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.three{
	position: relative;
	z-index: 2;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	padding-top: 11.66vh;
}
.three_mun{
	font-size: 2.285rem;
	color: #fff;
	font-family: din_m;
	line-height: 3rem;
}

.three_en{
	font-size: 2.857rem;
	color: #fff;
	font-family: din_m;
	line-height: 3rem;
	text-transform: uppercase; 
	margin-left: 4rem;
}

.love_warp{
	width: 100%;
	height: auto;
	background: #003f98;
}
.love{
	width: 90vw;
	height: auto;
	margin: 0 auto;
}
.love_img{
	width: 100%;
	height: auto;
	overflow: hidden;
	transform: translateY(-6.142rem);
	font-size: 0;
}
.love_img1{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: -6.5rem;
	text-align: right;
	position: relative;
	z-index: 2;
	font-size: 0;
}

.love_img img,.love_img1 img{
	width: 74.21%;
	height: auto;
}
.love_bg{
	width: 100%;
	height: auto;
	background: #003784;
	margin-top: -25vh;
	padding-top: 50vh;
	transform: translateX(5vw);
}
.love_zi{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	font-size: 25.5rem;
	font-family: din_m;
	text-transform: uppercase; 
	line-height: 23rem;
	background-clip: text;
    background-origin: border-box;
    background:url("../images/de_17.jpg") repeat-x center;
	background-size:100% 200%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: identifier 20s infinite linear;
 }
@keyframes identifier {
    from {
        background-position: -200px -100px;
    }

    to {
        background-position: -2220px -100px;
    }
}

.love_img2{
	width: 100%;
	height:calc(100vw * 0.5 * 600 / 970);
	overflow: hidden;
	margin-top: 23vh;
	position: relative;
	z-index: 2;
	font-size: 0;
	transform: translateX(-10vw);
}

.love_img2 img{
	width: 50%;
	height:100%;
}

.pic_warp{
	width:100%;
	height: auto;
	background: #f2f2f2;
}
.pic{
	width: 90vw;
	height: auto;
	margin: 0 auto;
	background: #f6f7fc;
	display: flex;
	justify-content: center;
	font-size: 0px;
	overflow: hidden;
}
.pic img{
	width: 73vw;
	width: var(--mainwidth);
	height: auto;
}

.alphabet{
	width:100%;
	height:auto;
	position: relative;
	margin-top: 34vh;
	background-image: linear-gradient(#fff, #f3f3f3);
}
.alphabet_tit{
	width:100%;
	text-align: center;
	color: #000;
	font-size: 6.428rem;
}
.alphabet_xia{
	margin: 0 auto;
	width: 7.857rem;
	height: 7.857rem;
	position: relative;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4.285rem;
-moz-box-shadow: 0px 4px 35px 0 rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 4px 35px 0 rgba(0,0,0,0.08);
    box-shadow: 0px 4px 35px 0 rgba(0,0,0,0.08);
	border: 5px solid rgba(0,0,0,0.1);
animation: 3s shang infinite linear;
}

@keyframes shang{
		    0%{ transform: translateY(0px);}
			25%{transform: translateY(-10px); }
			50%{transform: translateY(0px); }
			75%{transform: translateY(10px); }
		    100%{transform: translateY(0px); }
		}




.alphabet_xia_btn{
	fill: #000;	
	width: 24%;
	height: 24%;
}

.alphabet_img{
	width:100%;
	height:auto;
	font-size: 0px;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 20vh;
	
}
.alphabet_img img{
	width:100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}
.alphabet_en{
	width: 100%;
    height: auto;
    color: #e9e9e9;
    font-size: 44.285rem;
    font-family: din_m;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 44rem;
}


.six{
	width:100%;
	height: auto;
	padding: 50vh 0;
	position: relative;
    z-index: 2;
	margin-top: -12vh;
	background: #1e1e1e;
	overflow: hidden;
}
.six_list{
	margin: 0 auto;
	width: 80%;
	height: auto;
	display: flex;
	justify-content: space-between;
}
.six_left{
	width: 45%;
}

.six_img{
	width:100%;
	height:calc(100vw * 0.36 * 1378 / 696);
	font-size: 0px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.six_img:nth-child(2){ margin-top: 30vh;}
.six_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.six_left:nth-child(2){ padding-top: 80vh;}


.six .alphabet_en{
	position: absolute;
	bottom: -12vh;
	left: 0;
	color: rgba(255,255,255,0.05);
}


.shell{
	width:100%;
	position: relative;
	height: auto;
	overflow: hidden;
}



.shell_2{
	width:100%;
	text-align: center;
	color: #000;
	font-size: 2.5rem;
	font-family:Arial;
	margin-top: 20vh;
}
.shell_3{
	width:100%;
	text-align: center;
	font-size: 2.25rem;
	color: #000;
	letter-spacing: 1.5rem;
	line-height: 4.75rem;
}
.shell_4{
	width:100%;
	height: auto;
	font-size: 1.125rem;
	color: rgba(0,0,0,0.43);
	text-align: center;
	margin-top: 4.25rem;
	padding-bottom: 15vh;
}
@media screen and (max-width:1365px)and (min-width:1280px){
	.four_comea .four_come_2{ width: 58%;}	
	.five_left_con{ padding: 1.5rem;}
	.five_left_2 span {
		padding: 0px 1.5rem;
	}
	.five_left_3{
		bottom: 1.5rem;
		right:1.5rem;
	}
	.five_left_en{ padding: 1.5rem;font-size: 2rem;}
	.love_zi {
		font-size: 20rem;
		line-height: 20rem;
	}
	.alphabet_en {
		font-size: 38rem;
		line-height: 38rem;
	}
}
@media screen and (max-width:1279px)and (min-width:1024px){
	.four_tit {
		font-size: 16rem;
		line-height: 16rem;
	}
	.four_come_2{ width: 56%; font-size: 42rem; line-height: 34rem;}
	.four_comea .four_come_2{ width: 50%;}	
	.five_tit{    font-size: 30rem; line-height: 30rem;}
	
	.five_left_con{ padding: 1.5rem;}
	.five_left_2 span {
		padding: 0px 1.25rem;
	}
	.five_left_3{
		bottom: 1.5rem;
		right:1.5rem;
	}
	.five_left_en{ padding: 1.5rem;font-size: 2rem;}
	.love_bg{ padding-top: 40vh;}
	.love_zi {
		font-size: 20rem;
		line-height: 20rem;
	}
	.love_img2{ margin-top: 15vh;}
	.alphabet{ margin-top: 24vh;}
	.alphabet_tit{ font-size:6rem;}
	.alphabet_xia{ width: 7rem; height: 7rem;}
	.alphabet_img{ margin-top: 14vh;}
	.alphabet_en {
		font-size: 32rem;
		line-height: 32rem;
	}
	.six{ padding: 30vh 0;}
	.six_img:nth-child(2) { margin-top: 34vh;}
	.six_left:nth-child(2) { padding-top: 76vh;}
	.shell_2{ margin-top: 12vh;}
	.shell_4{ padding-bottom: 10vh;}
}
@media screen and (max-width:1023px)and (min-width:300px){
	.one_warp{
		height: 100vh;
	}

	.one{
		width: 92vw;
		padding: 8vh 0;
	}
	.one_1{
		font-size: 3.25rem;
		line-height: 4.5rem;
		padding-bottom: 8vh;
		padding-top: 10vh;
	}

	.one_2{
		font-size: 1.875rem;
		line-height: 2.5rem;
		margin-top: 10vh;
	}
	.one_3{
		bottom: 8vh;
		font-size: 1.125rem;
		line-height: 2rem;
	}
	.one_4{
		bottom: 8vh;
	}
	.one_4 img{
		height: 2.25rem;
	}


	.two_warp{
		padding: 3vw 0 10vh 0;
	}

	.two{
		width: 94vw;
	}

	.two_con{
		margin-top: 4rem;
	}
	.four_en_1{
		width: 70%;
		font-size: 1.75rem;
		line-height: 2.5rem;
	}
	.four_en_1:nth-child(2){ width: 30%;}	
	.four_tit{
		font-size: 8rem;
		line-height: 8rem;
		margin-top: 6vh;
	}

	.four_come{
		justify-content:center;
		 flex-direction: column;
		margin-top: 2rem;
	}
	.four_come_2{
		width: 100%;
		font-size: 30rem;
		line-height: 30rem;
		justify-content: center;
	}

	.four_come_1{
		width: 100%;
		font-size: 1.5rem;
		letter-spacing: 0.75rem;
		line-height: 2.75rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.four_come_1 span{
		font-size: 3.571rem;
		padding-bottom: 1.857rem;
		letter-spacing: 0;
	}

	.four_wei{
		font-size: 3rem;
		margin-top: 8vh;
		letter-spacing: 0.75rem;
	}
	.four_comea{ flex-direction: column-reverse;}
	.four_comea .four_come_1{
		text-align: left;
		padding-left:0;
		margin-top: 2.5rem;
	}
	.four_comea .four_come_2{
		font-size: 16rem;
		justify-content:center;
		line-height: 16rem;
	}


	.five_en{
		font-size: 1.857rem;
		line-height: 4rem;
		margin-top: 18vh;
	}
.five_tit{
	font-size: 11rem;
	line-height: 11rem;
}
.five_con{
	width:100%;
	height: calc(94vw * 850 / 1400);
	margin-top: -4rem;
}
.five_con:after{
	width: 80px;
	height: 91px;
	bottom: -30px;
	right: -30px;
}


	.five_left{
		width: 40%;
	}
	.five_left_con{
		width: 100%;
		height: 65%;
		padding: 1rem;
	}
	.five_left_1{
		font-size: 1.5rem;
	}
	.five_left_2{
		font-size: 1.25rem;
	}
	.five_left_2 span{	
		padding: 0px 0.5rem;
	}
	.five_left_3{
		font-size: 1.25rem;
		bottom: 1rem;
		right: 1rem;
	}

	.five_left_en{
		height: 35%;
		font-size: 1.5rem;
		padding: 1rem;
	}

	.five_right{
		width:60%;
	}

	.five_list{
		height: 35%;
	}
	.five_list .five_left_en{
		width: 25%;
		height: 100%;
		font-size: 1rem;
		padding: 0.5rem;
	}
	.three_warp{
		height: 90vh;
	}
	.three{
		width: 94%;
		padding-top:6vh;
	}
	.three_mun{
		font-size: 1.75rem;
		line-height: 2.5rem;
	}

	.three_en{
		font-size: 1.75rem;
		line-height: 2.5rem;
		margin-left: 2.5rem;
	}
	.love{
		width: 94vw;
	}
	.love_img{
		transform: translateY(-4rem);
	}
	.love_img1{
		margin-top: -4rem;
	}
	.love_img img,.love_img1 img{
		width: 100%;
	}
	.love_bg{
		margin-top: -15vh;
		padding-top: 24vh;
		transform: translateX(4vw);
	}
	.love_zi{
		font-size: 8rem;
		line-height: 8rem;
	}

	.love_img2{
		width: 100%;
		height:calc(94vw * 600 / 970);
		margin-top: 13vh;
		transform: translateX(-4vw);
	}

	.love_img2 img{width: 100%;}

	.pic{
		width: 100vw;
	}
	.pic img{
		width: 94vw;
	}

	.alphabet{
		margin-top: 10vh;
	}
	.alphabet_tit{
		font-size: 2.5rem;
	}
	.alphabet_xia{
		width: 4rem;
		height: 4rem;
		margin-top: 3rem;
		border: 3px solid rgba(0,0,0,0.1);
	}
	.alphabet_xia_btn{
		width: 40%;
		height: 40%;
	}

	.alphabet_img{
		margin-top: 10vh;
	}

	.alphabet_en{
		font-size: 12rem;
		line-height: 12rem;
	}


	.six{
		padding: 10vh 0;
		margin-top: -6vh;
	}
	.six_list{
		width: 94%;
	}

	.six_img{
		height:calc(100vw * 0.423 * 1378 / 696);
	}
	.six_img:nth-child(2){ margin-top: 8vh;}
	.six_left:nth-child(2){ padding-top: 26vh;}


	.six .alphabet_en{
		bottom: -6vh;
	}
	.shell_2{
		font-size: 1.5rem;
		margin-top:8vh;
	}
	.shell_3{
		font-size: 1.5rem;
		letter-spacing: 0.25rem;
		line-height: 3.75rem;
	}
	.shell_4{
		font-size: 1rem;
		margin-top: 2.5rem;
		padding-bottom:5vh;
	}

}