@charset "utf-8";
/*头部导航*/

@font-face {
    font-family: hwhp;
    src: url('../font/hwhp.woff2');
	font-display: swap;
}

.tielishan{
	width:100%;
	height: auto;
	overflow: hidden;
	background-image: linear-gradient(to right, #00080d , #002034);
}

.one{
	width:100%;
	height:100vh;
	position: relative;
}
.one_bg{
	width:100%;
	height:100vh;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 0;
	background: url("../images/tie_01.png") no-repeat top right;
	background-size:cover;
	background-attachment: fixed;
}
.one_bg img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.one_con{
	width:100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
}
.one_en{
	width:100%;
	margin-top: -30vh;
}

.word {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.word--magneto {
	font-size: 27.75rem;
	color: rgba(255,255,255,0.1);
	font-family: hwhp;
	text-transform: uppercase;
	line-height: 27.75rem;
}

.word--magneto > span {
	display: block;
	padding: 1em 0 0;
	cursor: default;
	position: relative;
}

.word--magneto span span {
	display: block;
	pointer-events: none;
}

.word--magneto svg {
	position: absolute;
	left: 50%;
	margin-left: -1.5vw;
	width: 3vw;
	bottom: calc(100% - 1em);
}

.word--magneto svg circle {
	fill: currentColor;
	opacity: 0;
	transform-origin: 50% 50%;
}



.one_img{
	width:100%;
	height:3.125rem;
	text-align: center;
	font-size: 0px;
	overflow: hidden;
}
.one_img img{
	width:auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.one_1{
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 1.625rem;
	letter-spacing: 2.875rem;
	margin-top: 5.375rem;
	padding-bottom: 2rem;
}






.two_warp{
	width: 100%;
	height: calc(100vw * 1075 / 1920);
	position: relative;
	background: url("../images/tie_02.png") no-repeat left;
	background-size:cover;
	margin-top: 8.75rem;
}

.two{
	width: 73vw;
	width: calc(--mainwidth);
	margin: 0 auto;
	height: auto;
	padding-top: 4.25rem;
	position: relative;
}
.two_en{
	position: absolute;
	top: 1.25rem;
	left: 0;
	color: #fff;
	font-size: 1.125rem;
	writing-mode: vertical-lr;
	letter-spacing: 4px;
}


.two_img{
	height: auto;
	width:100%;
	margin: 0 auto;
}

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

.three_warp{
	width:100%;
	height: auto;
	margin-top: 10vh;
	position: relative;
}
.three_zi{
	font-size: 21.125rem;
	color: rgba(255,255,255,0.1);
	font-family: hwhp;
	position: absolute;
	left: -7rem;
	top: 40vh;
	writing-mode: vertical-lr;
	z-index: 1;
}

.three{
	width: 73vw;
	width: calc(--mainwidth);
	margin: 0 auto;
	height: auto;
	padding-top: 4.25rem;
	position: relative;
}
.three_tit{
	width:100%;
	height: auto;
	font-size: 2rem;
	color: #fff;
	font-weight: bold;
	line-height: 4.5rem;
}
.three_en{
	width:100%;
	height: auto;
	font-size: 2.875rem;
	color: #fff;
	font-weight: bold;
	line-height: 3.75rem;
	margin-top: 1.75rem;
}
.three_hang{
	width:100%;
	font-size: 2.25rem;
	color: #369ad9;
	 font-weight: bold;
	line-height: 3rem;
}
.three_come{
	width:100%;
	height: 10.75rem;
	font-size: 1rem;
	color: #7dcdff;
	line-height: 2rem;
	margin-top: -10.75rem;
	padding-left: 33.57%;
}
.three_come span{
	width: 29rem;
	display: flex;
}
.three_biaoti{
	margin-top: 20vh;
}
.three_shu{
	width:100%;
	display: flex;
	justify-content: flex-start;
	
}

.alphabet_warp{
	width:100%;
	height: auto;
	position: relative;
	height: calc(100vw * 1366 / 1920);
}
.alphabet_img{
	width:45.9375%;
	height: calc(100vw * 0.459375 * 1200 / 882);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 3.75%;
	z-index: 3;
}
.alphabet_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.alphabet{
	width:78vw; 
	width: var(--mainwidth);
	height:100%; 
	overflow:hidden; 
	margin:0 auto;
	position: relative;
	z-index: 2;
	padding-left: 22.85%;
	display: flex;
	justify-content: flex-start;
}
.alphabet:after{
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 18%;
	background: #206b99;
	opacity: 0.5;
}
.alphabet:before{
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 28%;
	background: #206b99;
	opacity: 0.5;
}
.alphabet_yi{
	width: 68%;
}
.alphabet_1{
	width:100%;
	color: #369ad9;
	font-size: 2.125rem;
	font-weight: bold;
}
.alphabet_2{
	width:100%;
	color: #b6b6b6;
	font-size: 1.125rem;
	line-height: 2.75rem;
}
.alphabet_3{
	width:100%;
	font-size: 20.875rem;
	font-weight: bold;
	color: #009eae;
	line-height: 22.5rem;
	font-family: '微软雅黑';
}
.alphabet_4,.alphabet_5{
	width:100%;
	padding-left: 32%;
	font-size: 1.125rem;
	color: #fff;
	display: flex;
	line-height: 2.5rem;
	margin-top: 1.875rem;
}
.alphabet_4 span,.alphabet_5 span{ width: 6.875rem;}
.alphabet_5{
	font-weight: bold;
	margin-top:0;
}
.alphabet_tu{
	width:100%;
	height: auto;
	margin-top: 3.25rem;
	padding-left: 2.75rem;
}
.alphabet_tu img{
	width: 6.75rem;
	height: 6.75rem;
}
.alphabet_6{
	width:100%;
	height: auto;
	margin-top: 2.75rem;
	padding-left: 2.75rem;
}
.alphabet_6_1{
	width:100%;
	display: flex;
	justify-content: flex-start;
	color: #fff;
	line-height: 2rem;
	
}
.alphabet_6_1 span{
	color: #369ad9;
	width: 13.625rem;
}
.alphabet_tua{ margin-top: 12.125rem;}


.brief{ 
	width:78vw; 
	width: var(--mainwidth);
	height:auto; 
	overflow:hidden; 
	margin:0 auto;
	position: relative;
	z-index: 2;
}
.brief .three_tit,.brief .three_en,.brief .three_hang{
	text-align: right;
}
.brief_img{
	width:100%;
	height: auto;
	margin-top: 4.75rem;
	text-align: center;
}
.brief_img img{
	max-width: 100%;
	height: auto;
}


.shell_warp{
	width:100%;
	position: relative;
	margin-top: 18vh;
	height: calc(100vw * 1954 / 1920);
}
.shell_bg{
	width:100%;
	height: 100%;
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.shell_bg img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.shell{
	width:73vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height:auto;
	position: relative;
	z-index: 3;
}
.shell_con{
	width: 100%;
	height: auto;
	margin-top: 6.75rem;
	position: relative;
	display: flex;
	justify-content: flex-end;
}
.shell_con_1{
	width:44.14%;
	height: calc(73vw * 0.4414 * 1512 / 617);
	height: calc(var(--mainwidth) * 0.4414 * 1512 / 617);
	font-size: 0px;
	overflow: hidden;
	margin-right: 28.85%;
	position: relative;
	z-index: 2;
}
.shell_con_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	    border-radius: 20px;
}

.shell_con_2{
	width:44.28%;
	height: calc(73vw * 0.4428 * 1425 / 620);
	height: calc(var(--mainwidth) * 0.4428 * 1425 / 620);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top:-16.75rem;
	right: 0;
}
.shell_con_2 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	    border-radius: 20px;
}
.shell_zi{
	position: absolute;
	left: -2rem;
	bottom: 0;
	color: rgba(255,255,255,0.04);
    font-family: hwhp;
	    writing-mode: vertical-lr;
	z-index: 2;
	font-size: 18.125rem;
}





.delight {
    width: 100%;
    height: 36.625rem;
    margin: 0 auto;
   position: relative;
	margin-top: 20vh;
}
.delight_list{
	width:73vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height:auto;
	position: relative;
	overflow: inherit;
}
.delight_list .swiper-slide-active .delight_img{ opacity:1;}
.delight_list .swiper-slide-active .delight_con:after{ opacity:1;}
.delight_list .swiper-slide-next .delight_img{ opacity:1;}
.delight_list .swiper-slide-next .delight_con:after{ opacity:1;}

.delight_con{
	width: 100%;
	height: 36.625rem;
	position: relative;
}
.delight_con:after{
	content:'' ;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 11rem;
	border-radius:20px;
	border: 1px solid #2d546e;
	border-bottom: none;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	opacity: 0;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.delight_img{
	width:100%;
	height: calc(73vw * 0.4 * 390 / 562);
	height: calc(var(--mainwidth) * 0.4 * 390 / 562);
	font-size: 0px;
	overflow: hidden;
	position: relative;
	z-index: 2;
	border-radius:20px;
	opacity: 0.16;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
	
}

.delight_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;
	border: 1px solid #fff;
	border-radius:20px;
}

.delight_en{
	width:100%;
	height: auto;
	color: rgba(255,255,255,0.04);
    font-family: hwhp;
    z-index: 2;
    font-size:20.125rem;
	text-align: center;
}




.shift_warp{
	width:100%;
	height: calc(100vw * 1760 / 1920);
	position: relative;
	margin-top: 5vh;
}
.shift_bg{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-size: 0px;
	overflow: hidden;
	background:url("../images/tie2_08.png") no-repeat top;
	background-size:cover;
	background-attachment: fixed;
}
.shift{
	width: 73vw;
	width: var(--mainwidth);
	height: auto;
	margin: 0 auto;
	position: relative;
    z-index: 1;
	padding-top: 5rem;
}
.shift .three_tit,.shift .three_en,.shift .three_hang{ text-align: right;}


.shift_img{
	width: 100%;
	height: auto;
	margin-top: -11rem;
}

.shift_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (max-width:1366px)and (min-width:1280px){
	.word--magneto {
    font-size: 20rem;
    line-height: 20rem;
}
}
@media screen and (max-width:1079px)and (min-width:1024px){
	.word--magneto {
    font-size: 16rem;
    line-height: 16rem;
}
}
@media screen and (max-width:1023px)and (min-width:300px){
	.one{ height: 54vh;}
	.word--magneto {font-size: 7.75rem; line-height: 14rem;}
	
	.one_img{
		height:2.25rem;
		margin-top: 1.5rem;
	}

	.one_1{
		font-size: 1.25rem;
		letter-spacing: 1.25rem;
		margin-top: 2rem;
		padding-bottom: 4rem;
	}


	.two_warp{
		height: auto;
		margin-top: 4vh;
		background: none;
	}

	.two{
		width: 96vw;
		padding-top: 4vh;
	}
	.two_en{
		width: 100%;
		text-align: right;
		top: 0;
		font-size: 1rem;
		writing-mode: horizontal-tb;
		letter-spacing: 4px;
		position: relative;

	}

	.two_img{
		height: auto;
		margin-top: 4vh;

	}


	.three_warp{
		margin-top: 5vh;
	}
	.three_zi{
		display: none;
	}

	.three{
		width: 96vw;
		padding-top: 4vh;
	}
	.three_tit{
		font-size: 1.75rem;
		line-height: 3.5rem;
		text-align: center;
	}
	.three_en{
		text-align: center;
		font-size: 1.875rem;
		line-height: 2.75rem;
		margin-top: 1rem;
	}
	.three_hang{
		font-size: 2rem;
		text-align: center;
	}
	.three_come{
		height: auto;
		line-height: 2rem;
		margin-top:2rem;
		padding-left: 0;
	}
	.three_come span{
		width: 90%;
		display: flex;
		margin: 0 auto;
		text-align: center;
	}
	.three_biaoti{
		margin-top: 10vh;
	}


	.alphabet_warp{
		height:auto;
	}
	.alphabet_img{
		width:90%;
		margin: 0 auto;
		height: auto;
		position: relative;
		left: 0;
	}

	.alphabet{
		width:96vw; 
		height:auto; 
		padding-left: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: 5vh;
	}
	.alphabet:after,.alphabet:before{
		display: none;
	}
	.alphabet_yi{
		width: 100%;
		
	}
	.alphabet_1{
		font-size: 1.875rem;
		text-align: center;
	}
	.alphabet_2{
		font-size: 1rem;
		line-height: 2.25rem;
		text-align: center;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		padding-bottom: 0.8rem;
	}
	.alphabet_3{
		font-size: 14rem;
		line-height: 14.5rem;
		text-align: center;
	}
	.alphabet_4,.alphabet_5{
		padding-left: 10%;
	}
	.alphabet_4 span,.alphabet_5 span{ width: 60%;}

	.alphabet_tu{
		margin-top: 2rem;
		padding-left: 0;
		text-align: center;
	}
	.alphabet_tu img{
		width: 8.75rem;
		height: 8.75rem;
	}

	.alphabet_6_1{
		padding-left: 10%;

	}

	.alphabet_tua{ margin-top: 10vh;}


	.brief{ 
		width:96vw; 
		margin-top: 10vh;
	}
	.brief .three_tit,.brief .three_en,.brief .three_hang{
		text-align: center;
	}
	.brief_img{
		margin-top: 4vh;
	}



	.shell_warp{
		margin-top: 10vh;
		height: auto;
	}


	.shell{
		width:96vw; 
	}
	.shell_con{
		width: 100%;
		height: auto;
		margin-top:4vh;
		position: relative;
		display: flex;
		justify-content: flex-end;
	}
	.shell_con_1{
		width:60%;
		height: calc(96vw * 0.6 * 1512 / 617);
		margin-right:40%;
	}


	.shell_con_2{
		width:60%;
		height: calc(96vw * 0.6 * 1425 / 620);
		top:-2.75rem;
		right: 0;
	}

	.shell_zi{
		display: none;
	}


	.delight {
		width: 100%;
		height:auto;
		margin-top: 10vh;
	}
	.delight_list{
		width:80vw; 
	}
	.delight_list .swiper-slide-next .delight_img {
		opacity: 0.16;
	}
	.delight_con{
		width: 100%;
		height: auto;
		position: relative;
	}
	.delight_con:after{
		display: none;
	}

	.delight_img{
		width:100%;
		height: calc(80vw * 390 / 562);
		border-radius:10px;
	}
	.delight_img img{ border-radius:10px;}


	.delight_en{
		text-align: center;
		z-index: 2;
		font-size:8rem;
		padding-left: 0%;
		margin-top: 0;
	}
	.delight_en .word--magneto {
		line-height: 8rem;
	
	}



	.shift_warp{
		width:100%;
		height: auto;
	}


	.shift{
		width:96vw;
		padding-top: 2rem;
	}
	.shift .three_tit,.shift .three_en,.shift .three_hang{ text-align: center;}


	.shift_img{
		margin-top: 4vh;
	}






}