@charset "utf-8";
@font-face {
    font-family: din_black;
    src: url('../font/DINPro-Black.woff2');
	font-display: swap;
}

@font-face {
    font-family: m_h_demo;
    src: url('../font/Fontfabric-Mont-Heavy-DEMO-2.woff2');
	font-display: swap;
}




/*头部导航*/
.one_warp{
	width:100%;
	height: 120vh;
	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: 100vw;
	height:100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content:center;
	text-align: center;
}
.one_1{
	width: 100%;
	height:auto;
	font-size: 3rem;
	color: #fff;
	font-weight: bold;
}
.one_2{
	width:100%;
	height: 11.875rem;
	font-size: 10rem;
	font-weight: bold;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase; 
	font-family: '微软雅黑';
}
.one_3{
	background: #fff;
	margin: 0 auto;
	width: 3.125rem;
	height: 0.25rem;
	margin-top: 1.75rem;
}
.one_4{
	width: 100%;
	height: auto;
	position: absolute;
	bottom: -2vh;
	z-index: 3;
}
.one_4 span{
	position: relative;
	font-size: 1rem;
	color: #fff;
	writing-mode: vertical-lr;
	padding-bottom: 4rem;
}
.one_4 span:after{
	content: '';
	width: 1px;
	height: 3rem;
	position: absolute;
	bottom: 0;
	left: calc(50% - 0.5px);
	background: #fff;
}



.two_warp{
	width: 100%;
	height: 120vh;
	position: relative;
	z-index: 2;
	margin-top: -20vh;
}
.two_warp:after{
	content: '';
	background:#0a50b4;
	left: 0;
	top: 0;
	width:100%;
	height: 100%;
	position: absolute;
	transform: skewY(-10deg);
}

.two{
	width: 73vw;
	width: var(--mainwidth);
	margin: 0 auto;
	height:auto;
	position: relative;
	z-index: 2;
	padding-top: 24vh;
}
.two_en{
	width:100%;
	height: auto;
	font-family: Gotham;
	color: #fff;
	font-size: 5.25rem;
	text-transform: uppercase; 
	text-align: center;
}
.two_en span{
	position: relative;
}
.two_en span:after{
	content: '+';
	font-size: 5.25rem;
	font-weight: lighter;
	color: #fff;
	position: absolute;
	top: -4rem;
    left: -4.5rem;
	font-family: Arial;
	font-family: initial;
}
.two_tit{
	width:100%;
	text-align: center;
	color: #fff;
	font-size: 2.875rem;
}

.two_con{
	width:100%;
	height: auto;
	font-size: 1.125rem;
	color: rgba(255,255,255,0.8);
	text-align: center;
	line-height: 2.125rem;
	margin-top: 4.75rem;
}
.three_warp{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	margin-top: -20vh;
	padding-top: 10vh;
}
.three_warp:after{
	content: '';
	background:#efefef;
	left: 0;
	top: 0;
	width:100%;
	height: 84%;
	position: absolute;
	transform: skewY(-10deg);
}

.three_img{
	width:63.54vw; 
	height: calc(100vw * 0.6354 * 1816 / 1220);
	font-size: 0px;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 20vh;
	position: relative;
	z-index: 3;
}
.three_img img{
	max-width: 100%;
	height: auto;
}
.three_en{
	width:100%;
	font-size: 23.9375rem;
	height: 100%;
	line-height: 23.9375rem;
	font-family: din_black;
	color: #fff;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
	text-align: center;

}


.four{
	width:78vw; 
	width: var(--mainwidth);
	margin:0 auto;
	height: auto;
	overflow: hidden;
}


.four_en{
	width: 100%;
	height: auto;
	text-transform: uppercase;
	color: #000;
	font-size: 1.875rem;
	line-height: 2rem;
	font-family: din_black;
}
.four_tit{
	width: 100%;
    font-size: 19.25rem;
    line-height: 19.25rem;
    font-family: m_h_demo;
    color: transparent;
    -webkit-text-stroke: 3px #000;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 10vh;
}
.four_come{
	width:100%;
	height: auto;
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 4rem;
}
.four_come_1{
	width: auto;
	margin: 0 auto;
	color: #484848;
	font-size: 1.625rem;
	font-family: m_h_demo;
	text-transform: uppercase; 
	letter-spacing: 0.25rem;
	line-height: 3.375rem;
}
.four_come_2{
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.875rem;
	color: #000;
	text-transform: uppercase; 
}
.four_list{
	width:100%;
	height: auto;
	display: flex;
	justify-content: center;
	margin-top: 10vh;
}
.four_con:nth-child(2){
	padding: 0px 8.75rem;
}
.four_1{
	color: #4f4f4f;
	font-size: 8.125rem;
	font-family: din_black;
}
.four_2{
	color: #4f4f4f;
	font-size: 1.875rem;
}
.five_warp{
	width: 100%;
	height: auto;
	padding: 20vh 0;
	background: #efefef;
	margin-top: 10vh;
}
.five{
	width:73vw; 
	width: var(--mainwidth);
	margin:0 auto;
	height: auto;
}
.five_en{
	width: 100%;
    color: #4f4f4f;
    font-size: 5.25rem;
    font-family: m_h_demo;
    text-transform: uppercase;
	line-height: 5.625rem;
}
.five_tit{
	width:100%;
	height: auto;
	color: #343434;
	font-size: 2.875rem;
	line-height: 4rem;
}
.five_con{
	width:100%;
	height: calc(73vw * 575 / 1400);
	height: calc(var(--mainwidth) * 575 / 1400);
	display: flex;
	justify-content: space-between;
	margin-top: 10vh;
	position: relative;
}
.five_con:after{
	content: '';
	background: url("../images/tai1_03.png") no-repeat left;
	background-size:cover;
	width: 11.75rem;
	height: 11.75rem;
	border-radius:50%;
	position: absolute;
	top: -5.875rem;
	right: -5.875rem;
	animation: aboutball_breath1 2s infinite alternate;
}
@keyframes aboutball_breath1 {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1.1);
    }
}

.five_left{
	width: 32%;
	height: 100%;
	background: #0a50b4;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}
.five_left_1{
	font-size: 2.625rem;
	color: #fff;
	font-family: Gotham;
	line-height: 2.25rem;
}
.five_left_2{
	width:100%;
	font-size: 2.875rem;
	color: #fff;
	margin-top: 2.25rem;
}
.five_left_en{
	color: #fff;
	font-size: 1.375rem;
	font-family: Gotham;
}
.five_mid{
	width: 18%;
	height: 100%;
	padding: 2rem;
	display: flex;
	align-items: flex-end;
	background: #111;
}
.five_right{
	width:50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.five_right_1{
	width:100%;
	height: 64%;
	padding: 2rem;
	display: flex;
	align-items: flex-end;
	background: #fff;
}
.five_right_1 .five_left_en{ color: #000;}
.five_right_2{
	width:100%;
	height: 36%;
	padding: 2rem;
	display: flex;
	align-items: flex-end;
	background: #f1f1f1;
}
.five_right_2 .five_left_en{ color: #000;}

.five_cona{
	margin-top: 0px;
	height: calc(73vw * 782 / 1400);
	height: calc(var(--mainwidth) * 782 / 1400);
}
.five_cona:after{ display: none;}
.five_cona:before{
	content: '';
	background: url("../images/tai_08.png") no-repeat left;
	background-size:cover;
	width: 21.375rem;
	height:22rem;
	position: absolute;
	bottom: -6.125rem;
	left: -8.875rem;
	    animation: go 1s ease-in-out alternate infinite;
}
@keyframes go {
   0% {
       -webkit-transform: rotate(3deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(3deg);
       -moz-transform-origin: top center;
       transform: rotate(3deg);
       transform-origin: top center;
    }
    100% {
       -webkit-transform: rotate(-3deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(-3deg);
       -moz-transform-origin: top center;
       transform: rotate(-3deg);
       transform-origin: top center;
    }
}



.five_cona .five_left,.five_cona .five_mid{
	background: #fff;
}
.five_cona .five_left .five_left_1{ color: #000;}
.five_cona .five_mid{
	display: flex;
    align-items:flex-start;
	padding: 2rem 0;
	flex-direction: column;
}
.five_mid_1{
	color: #484848;
	font-size: 1.625rem;
	line-height: 2.125rem;
}
.five_mid_2{
	color: #484848;
	font-size: 1.625rem;
	line-height: 1.625rem;
	text-transform: uppercase; 
	font-family: Gotham;
	margin-top: 16.5rem;
}
.five_cona .five_right{
	display: flex;
    align-items:flex-start;
	padding: 2rem;
	flex-direction: column;
	background: #fff;
	position: relative;
}
.five_1{
	width:100%;
	height: auto;
	color: #484848;
	font-size: 1.625rem;
}
.five_1 span{
	display: block;
	font-size: 3rem;
}
.five_2{
	width:100%;
	height: auto;
	color: #484848;
	font-size: 1.625rem;
	font-family: Gotham;
}
.five_2 span{
	display: block;
	font-size: 3.5rem;
	font-family: m_h_demo;
	text-transform: uppercase; 
}
.five_3{
	width:100%;
	height: auto;
	color: #484848;
	font-size: 5.25rem;
	font-family: m_h_demo;
	line-height: 4.75rem;
	padding-bottom: 3rem;
}
.five_4{
	width: 11.75rem;
    height: 11.75rem;
    border-radius: 50%;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 3.75rem;
	right: 4rem;
	filter: blur(8px);
	animation: aboutball_breath1 2s infinite alternate;
}

.five_4 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.alphabet{
	width:100%;
	height:auto;
	position: relative;
	margin-top: 20vh;
	
	
	
}
.alphabet_en{
	width:100%;
	height: auto;
	text-align: center;
	color: #484848;
	font-size: 5.25rem;
	font-family: m_h_demo;
	text-transform: uppercase; 
	line-height: 5.625rem;
}
.alphabet_tit{
	width:100%;
	text-align: center;
	color: #343434;
	font-size: 2.875rem;
	line-height: 4.25rem;
}
.alphabet_all{
	width:100%;
	height: auto;
	position: relative;
	margin-top: 10vh;
	
	padding-bottom: 20vh;
	z-index: 3;
}
.alphabet_all_bg2{
	width:100%;
	height: calc(100vw * 1758 / 1920);
	background: #232323;
	position: absolute;
	top:calc(100vw * 3456 / 1920);
	left: 0;
}
.alphabet_all_bg1{
	width:100%;
	height: calc(100vw * 3456 / 1920);
	background: url("../images/tai_11.jpg") no-repeat center top;
	background-size:cover;
	position: absolute;
	top:0;
	left: 0;
}
.alphabet_1{
	width:100%;
	height: 33.25rem;
	text-align:center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #343434;
	font-size: 3.5rem;
	line-height: 4.5rem;
	position: relative;
	z-index: 2;
}

.alphabet_list{
	width:100%;
	height: calc(100vw * 746 / 1920);
}
.alphabet_img{
	width:100%;
	height:100%;
	font-size: 0px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.alphabet_img img{
	width:100%;
	height: auto;
	object-fit: cover;
	border-radius: 20px;
	object-position: center;
}
.alphabet_list{
	width:100%;
	
}
.alphabet_tu{
	margin: 0 auto;
	width:91.25%;
	height: calc(100vw * 0.9125 * 6266 / 1752);
	font-size: 0px;
	overflow: hidden;
	position: relative;
	z-index: 3;
	margin-top: 18vh;
	
}
.alphabet_tu img{
	width:100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}


.six{
	width:100%;
	height: auto;
	padding: 30vh 0 20vh 0;
	position: relative;
    z-index: 2;
	margin-top: -20vh;
}
.six:after{
	content: '';
    background: #dadada;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transform: skewY(-10deg);
}

.six_con{
	width:91.25%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}


.six_img{
	width:70.75%;
	height:calc(100vw * 0.64559375 * 4313 / 1132);
	font-size: 0px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.six_imga{
	width:23.8125%;
	height:calc(100vw * 0.2172890625 * 3308 / 381);
	font-size: 0px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.six_img img,.six_imga img{
	width:100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}


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



.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:1023px)and (min-width:300px){
	/*头部导航*/
	.one_1{
		font-size: 1.625rem;
	}
	.one_2{
		height: 9rem;
		font-size: 6rem;
	}
	.one_3{
		width: 3rem;
	}
	.one_4 span{
		text-align: center;
		text-transform: uppercase;
	}
	.two_warp {
		height: auto;
		padding-bottom: 30vh;
	}
	.two{
		width: 90vw;
		padding-top: 16vh;
	}
	.two_en{
		font-size: 2.75rem;
	}

	.two_en span:after{
		font-size: 3.25rem;
		top: -2.5rem;
		left: -3rem;
	}
	.two_tit{
		font-size: 1.625rem;
	}

	.two_con{
		width:100%;
		margin-top: 2.75rem;
	}
	.three_warp{
		margin-top: -20vh;
	}
	.three_img{
		width:80vw; 
		height: calc(100vw * 0.8 * 1816 / 1220);
		margin-top: 0vh;
	}

	.three_en{
		width:100%;
		font-size: 7rem;
		line-height: 8rem;
	}


	.four{width:96vw; }
	.four_en{
		text-align: center;
	}
	.four_tit{
		font-size: 8rem;
		line-height: 8rem;
		margin-top: 6vh;
	}
	.four_come{
		margin-top: 2rem;
	}
	.four_come_1{
		font-size: 1.375rem;
		letter-spacing: 0.25rem;
		line-height: 3rem;
	}
	.four_come_2{
		top: inherit;
		bottom: 0;
		font-size: 1.375rem;
		font-weight: bold;
	}
	.four_list{
		margin-top: 8vh;
	}
	.four_con:nth-child(2){
		padding: 0px 3rem;
	}
	.four_1{
		font-size: 5rem;
	}
	.four_2{
		font-size: 1.25rem;
	}
	.five_warp{
		padding: 8vh 0;
		margin-top: 8vh;
	}
	.five{
		width:96vw; 
	}
	.five_en{
		font-size: 2.75rem;
		line-height: 2.75rem;
		text-align: center;
	}
	.five_tit{
		text-align: center;
		font-size: 1.625rem;
		line-height: 3rem;
	}
	.five_con{
		height: calc(96vw * 575 / 1400);
		margin-top: 4vh;
	}
	.five_con:after{
		width: 5rem;
		height: 5rem;
		top: -2.5rem;
		right: -2.5rem;
	}
	.five_left{
		width: 37%;
		padding: 1rem;
	}
	.five_left_1{
		font-size: 1.25rem;
		line-height: 1.375rem;
	}
	.five_left_2{
		font-size: 1.5rem;
		margin-top: 1rem;
	}
	.five_left_en{
		font-size: 1.125rem;
	}
	.five_mid{
		padding: 1rem;
	}
	.five_right_1{
		padding: 1rem;
	}
	.five_right_2{
		padding: 1rem;
	}
	.five_cona{
		height: calc(96vw * 782 / 1400);
	}
	.five_cona:before{
		width: 8rem;
		height:8.5rem;
		bottom: -2.125rem;
		left: 0;
	}

	.five_cona .five_mid{
		padding: 1rem 0;
	}
	.five_mid_1{
		font-size: 1.25rem;
		line-height: 1.375rem;
	}
	.five_mid_2{
		font-size: 1.25rem;
		line-height: 1.375rem;
		margin-top: 8.5rem;
	}
	.five_cona .five_right{
		padding: 1rem;
	}
	.five_1{
		font-size: 1.125rem;
	}
	.five_1 span{
		font-size: 1.5rem;
	}
	.five_2{
		font-size: 1.125rem;
	}
	.five_2 span{
		font-size:1.75rem;
	}
	.five_3{
		font-size: 2rem;
		line-height: 2.25rem;
		padding-bottom: 0rem;
	}
	.five_4{
		width: 4rem;
		height: 4rem;
		top: 3.75rem;
		right: 1rem;
	}
	.alphabet{
		margin-top: 8vh;	
	}
	.alphabet_en{
		font-size: 2.75rem;
    	line-height: 2.75rem;
	}
	.alphabet_tit{
			font-size: 1.625rem;
		line-height: 3rem;
	}
	.alphabet_all{
		margin-top: 4vh;
		padding-bottom: 10vh;
	}
	.alphabet_1{
		height: 16rem;
		font-size: 1.75rem;
		line-height:3rem;
	}
	.alphabet_tu{
		margin-top: 10vh;
	}

	.six{
		padding: 20vh 0 10vh 0;
	}

	.shell_2{
		font-size: 1.5rem;
		margin-top: 14vh;
	}
	.shell_3{
		font-size: 1.5rem;
		letter-spacing: 0.5rem;
		line-height: 4rem;
	}
	.shell_4{
		font-size: 1rem;
		margin-top: 3.25rem;
		padding-bottom: 10vh;
	}


}