﻿@charset "utf-8";


@font-face {
    font-family: ss_r;
    src: url('../font/SourceHanSansCN-Regular.woff2');
	font-display: swap;
}

/*头部导航*/

.one{
	width:100%;
	height: 100vh;
	position: relative;
	background: url("../images/tian_01.jpg") no-repeat center bottom;
	background-size:cover;
	z-index: 2;
	background-attachment: fixed;
}


.one_con{
	width:79vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: relative;
	z-index: 2;
}
.one_1{
	width:100%;
	color: #000;
	font-size: 1rem;
	text-transform: uppercase; 
	line-height: 1.5rem;
}


.one_2{
	width:100%;
	height: auto;
	position: relative;
	display: flex;
	justify-content: flex-start;
	margin-top: 21vh;
	align-items: center;
}
.one_2_1{
	padding-right: 3.125rem;
	position: relative;
	font-size: 0px;
	overflow: hidden;
}
.one_2_1:after{
	content: '';
	width: 2px;
	height: 2rem;
	background: #e02625;
	position: absolute;
	top: calc(50% - 1rem);
	right: 0;
}
.one_2_1 img{
	width:auto;
	height: 5.857rem;
	object-fit: cover;
	object-position: center;
}
.one_2_2{
	margin-left: 3.125rem;
	font-size: 2.857rem;
	color: #000;
}
.one_2_2 span{
	color: #e02625;
	font-family: opb;
	margin-right: 0.5rem;
}

.one_3{
	color: #000;
	font-size:4.857rem;
	font-family: ss_r;
	width: 100%;
	text-transform: uppercase; 
	line-height: 7.428rem;
	margin-top: 4rem;
}
.one_3 span{
	display: block;
	font-weight: bold;
	font-size: 6.714rem;
}



.two_warp{
	width:100%;
	background: url("../images/tian_02.png") no-repeat center;
	background-size: 100% auto;
	height: auto;
	min-height: 83vh;
	position: relative;
	overflow: hidden;
}
.two{
	width:79vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height: 100%;
	padding-top: 18vh;
}
.two_biaoti{
	width:100%;
	height: auto;
	display: flex;
	justify-content: flex-start;
}
.two_tit{
	color: #000;
	font-size: 4.142rem;
	font-family: opb;
	line-height: 4.571rem;
}
.two_tit span{
	display: block;
	color: #de2a29;
}

.two_en{
	color: #d1d1d1;
	font-size: 4.642rem;
	line-height: 4.571rem;
	font-family: oph;
	text-transform: uppercase; 
	font-style: italic;
	position: relative;
	opacity: 0.2;
	margin-left: 2.857rem;
}
.two_en span{
	display: block;
}


.two_con{
	font-size: 1.142rem;
	color: #000000;
	line-height: 2.285rem;
	width: 80%;
	height: auto;
	margin-top: 6.142rem;
}

.she_warp{
	width:100%;
	height: auto;
	background: #f0f0f0;
	position: relative;
}
.she_top{
	width:100%;
	background: url("../images/tian_03.jpg") no-repeat center;
	background-size:cover;
	height: 28.88vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.she_top .two_biaoti{
	justify-content: flex-end;
	width: 79vw;
	width: var(--mainwidth);
	margin: 0 auto;
}
.she_top .two_tit,.she_top .two_tit span{
	color: #fff;
}
.she_top .two_en{
	opacity: 0.15;
	text-align: right;
	margin-right: 2.857rem;
}
.she_bottom{
	width: 79vw;
	width: var(--mainwidth);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 110vh;
	position: relative;
}
.she_img{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(9vh);
	width: 57.76%;
	z-index: 6;
}
.she_img img{
	width: 100%;
	height: auto;
}

.she_logo{
	width: 18.428rem;
	height: 18.428rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.she_logo img{
	height: 4.571rem;
	width: auto;
	position: relative;
	z-index: 5;
}
.she_logo_1{
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius:50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	-webkit-animation: qq_assessmove1 2s 0s linear infinite;
}
.she_logo_2{
	width: 160%;
	height: 160%;
	background: rgba(255,255,255,0.52);
	border-radius:50%;
	position: absolute;
	top: -30%;
	left: -30%;
	z-index: 3;
	-webkit-animation: qq_assessmove1 2s 0s linear infinite;
	-webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .2s;
}
.she_logo_3{
	width: 220%;
	height: 220%;
	background: rgba(255,255,255,0.32);
	border-radius:50%;
	position: absolute;
	top: -60%;
	left: -60%;
	z-index: 2;
	-webkit-animation: qq_assessmove1 2s 0s linear infinite;
	-webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s;
}

@keyframes qq_assessmove1 {
   0% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}
	50% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
		}
		100% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}
}





.she_tu{
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(4.857rem);
	width: 25.53%;
}
.she_tu1{
	position: absolute;
	right: 8.26%;
	bottom: 0;
	width: 25.53%;
	z-index: 2;
	transform: translateY(14.28rem);
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.she_tu1:hover{}

.she_tu img,.she_tu1 img{ width: 100%; height: auto;}



.limited_warp{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}
.limited_warp .two_biaoti{
	width:78vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	padding:13.88vh 0 10vh 0; 
}

.limited{
	width:100%;
	background: #de2a29;
	height: auto;
	padding-bottom: 21vh;
	overflow: hidden;
}
.limited_tit{
	width:78vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	font-size: 1.285rem;
	color: #fff;
	height: 11vh;
	display: flex;
	align-items: center;
}

.limited_con{
	width: 100%;
	height: auto;
	display: flex;
	justify-content:center;
	animation: go 1s ease-in-out alternate infinite;
}
@keyframes go {
   0% {
       -webkit-transform: rotate(1deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(1deg);
       -moz-transform-origin: top center;
       transform: rotate(1deg);
       transform-origin: top center;
    }
    100% {
       -webkit-transform: rotate(-1deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(-1deg);
       -moz-transform-origin: top center;
       transform: rotate(-1deg);
       transform-origin: top center;
    }
}

.limited_con div{}


.limited_1{
	width: 17.9vw;
	height: 17.9vw;
	border-radius:50%;
	border: 1px solid #fff;
	background: #de2a29;
	position: relative;
	z-index: 5;
	
}
.limited_2{
	width: 17.9vw;
	height: 17.9vw;
	border-radius:50%;
	border: 1px solid #696a6b;
	background: #696a6b;
	position: relative;
	z-index: 4;
	margin-left: -6.77vw;
}
.limited_3{
	width: 17.9vw;
	height: 17.9vw;
	border-radius:50%;
	border: 1px solid #8c8c8c;
	background: #8c8c8c;
	position: relative;
	z-index: 3;
	margin-left: -6.77vw;
}
.limited_4{
	width: 17.9vw;
	height: 17.9vw;
	border-radius:50%;
	border: 1px solid #fff;
	background: #fff;
	position: relative;
	z-index: 2;
	margin-left: -6.77vw;
}
.limited_4 .limited_yan{ color: #de2a29;}
.limited_5{
	width: 17.9vw;
	height: 17.9vw;
	border-radius:50%;
	border: 1px solid #302525;
	background: #302525;
	position: relative;
	z-index: 1;
	margin-left: -6.77vw;
}

.limited_logo{
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	left: 2.285rem;
	top: 0;
}
.limited_logo img{
	height: 4rem;
	width: auto;
}
.limited_yan{
	position: absolute;
	height: 100%;
	display: flex;
	align-items: center;
	right: 2.285rem;
	top: 0;
	font-size: 1.142rem;
	color: #fff;
	text-align: right;
	line-height: 1.714rem;
	text-transform: uppercase; 
}


.design{
	width:78vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height: auto;
	padding: 1.857rem 0 18vh 0;
}
.design .limited_tit{ color: #000;}

.design_con{
	width:100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 4;
	margin-top: 4.571rem;
}
.design_zi{
	display: flex;
	justify-content: flex-start;
}
.design_ti{
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-size: 1.285rem;
	color: #211d1b;	
}
.design_ti span{ font-family: opb; font-size: 2.142rem; display: block;}
.design_ti:nth-child(1){ margin-right: 3rem;}

.design_1{
	font-size: 11rem;
	color: #de2a29;
	font-family: ss_r;
	font-weight: bold;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	background:#de2a29 url("../images/tian1.png") repeat-x left bottom;
	background-size: auto 70%;
    -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	line-height: 13.571rem;
	    animation: go 1s ease-in-out alternate infinite;
}

.design_2{
	font-size: 9rem;
	color: #f0f0f0;
	font-family: oph;
	display: flex;
	align-items: center;
	line-height: 13.571rem;
}

.design_cona{ margin-top: 0;}
.design_cona .design_1{ text-transform: initial;}


.four_warp{
	width: 100%;
    position: relative;
    height: auto;
	background:#f6f6f6;
	padding: 17vh 0 15vh 0;
}
.four_warp:after{
	content: '';
	width: 100%;
	height: 1.714rem;
	background: #e89d9c;
	position: absolute;
	left: 0;
	bottom: 2.285rem;
}
.four_warp:before{
	content: '';
	width: 100%;
	height: 2.285rem;
	background: #de2a29;
	position: absolute;
	left: 0;
	bottom: 0;
}

.four{
	width:78vw; 
	width: var(--mainwidth);
	margin: 0 auto;
}
.four_img{
	width:100%;
	height:auto;
	font-size: 0px;
	overflow: hidden;
	margin-top: 10vh;
}
.four_img img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.four_zi{
	width:80%;
	height: auto;
	color: #000000;
	font-size: 6.125rem;
	line-height: 8.125rem;
	text-transform: uppercase;  
	font-family: Gotham;
	margin: 0 auto;
	margin-top: 14rem;
}
.four_zi span{
	padding-left: 12.25rem;
}


.five{
	width:78vw; 
	width: var(--mainwidth);
	margin: 0 auto;
	height: auto;
	padding: 15vh 0 20vh 0;
}
.five_list{
	width:100%;
	height: auto;
	position: relative;
	display: flex;
	justify-content: flex-end;
	transform: translateY(-7rem);
}
.five_1{
	width: 35vw;
	height: 35vw;
	border-radius:50%;
	border: 1px solid #de2a29;
	margin-top: 4.857rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.five_1 img{
	width:auto;
	height: 67.4%;
	position: relative;
	z-index: 3;
}
.five_2{
	width: 37.6vw;
	height: 37.6vw;
	border-radius:50%;
	background: url("../images/tian_25.png") no-repeat center;
	background-size:cover;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -19.2vw;
}
.five_2 img{
	width:auto;
	height: 77.56%;
	
}
.five_3{
	width: 11.77vw;
	height: 37.6vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -3.75vw;
}
.five_3 img{
	width:100%;
	height: auto;
	
}

.six{
	width:100%;
	height: auto;
	position: relative;
	padding-bottom: 15.55vh;
	background: url("../images/tian2_05.png") no-repeat center bottom;
	background-size: 100% auto;
}
.six:after{
	content: '';
	width: 100%;
	height: 44vh;
	background: #de2a29;
	position: absolute;
	left: 0;
	top: 0;
}
.six_list{
	width:100%;
	height: auto;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.six_img{
	width: 17.81vw;
	height: auto;
	margin: 0px 2.9vw;
	font-size: 0px;
}
.six_img:nth-child(1){ transform: translateY(2.285rem);}
.six_img:nth-child(2){ transform: translateY(-4.285rem);}
.six_img:nth-child(3){ transform: translateY(0.5rem);}
.six_img img{
	width: 100%;
	height: auto;
	-moz-box-shadow: 0px 9px 8px 0 rgba(9,0,8,0.14);
    -webkit-box-shadow: 0px 9px 8px 0 rgba(9,0,8,0.14);
    box-shadow: 0px 9px 8px 0 rgba(9,0,8,0.14);
	border-radius:30px;
	overflow: hidden;
	border: 1px solid #f5dede;
}
.six_typeright{
	position: absolute;
	font-size: 1.285rem;
	color: #000000;	
	line-height: 2.142rem;
	text-align: right;
	right: 5%;
	bottom: 8vh;
}

@media screen and (max-width:1599px)and (min-width:1440px){
	.design_2{ font-size: 8rem;}
	.design_1{ font-size: 10rem;}
}
@media screen and (max-width:1439px)and (min-width:1366px){
	.design_2{ font-size: 8rem;}
	.design_1{ font-size: 10rem;}
}
@media screen and (max-width:1365px)and (min-width:1280px){
	.design_2{ font-size: 7rem;}
	.design_1{ font-size: 9rem;}
}
@media screen and (max-width:1279px)and (min-width:1024px){
	.one_2_1{ padding-right: 2.5rem;}
	.one_2_1 img{
		height: 5rem;
	}
	.one_2_2{
		margin-left: 2.5rem;
		font-size: 2.25rem;
	}
	.one_3{
		font-size:3.25rem;
		line-height: 6rem;
		margin-top: 3rem;
	}
	.one_3 span{
		font-size: 5.714rem;
	}
	.two_warp{ min-height: 70vh;}
	.two_tit {
		font-size: 3.25rem;
		line-height: 3.571rem;
	}
	.two_en {
		font-size: 3.642rem;
		line-height: 3.571rem;
		margin-left: 2rem;
	}
	.she_top{ height: 19vh;}
	.she_bottom{ height: 70vh;}
	.she_logo {
		width: 12rem;
		height: 12rem;
	}
	.she_logo img{ height: 2.75rem;}
	.limited_logo { left: 1rem;}
	.limited_logo img{    height: 2.5rem;}
	.limited_yan{    right: 1rem; font-size: 1rem; line-height: 1.375rem;}
	.five {
		padding: 10vh 0 10vh 0;
	}
	.five_2{ margin-left: -15vw;}
	.five_3{ margin-left: -2.75vw;}
	
	.design_2{ font-size: 7rem;}
	.design_1{ font-size: 9rem;}
}
@media screen and (max-width:1023px)and (min-width:300px){
	.one{
		width:100%;
		height: 60vh;
	}
	.one_con{
		width:94vw; 
		padding-top: 8vh;
	}
	.one_2{
		margin-top: 5vh;
	}
	.one_2_1{
		padding-right: 1.5rem;
		position: relative;
		font-size: 0px;
		overflow: hidden;
	}
	.one_2_1:after{
		height: 1.5rem;
		top: calc(50% - 0.75rem);
	}
	.one_2_1 img{
		height: 3.25rem;
	}
	.one_2_2{
		margin-left: 1.5rem;
		font-size: 1.5rem;
	}

	.one_3{
		font-size:1.5rem;
		line-height: 5rem;
		margin-top: 4rem;
	}
	.one_3 span{
		font-size: 3.5rem;
		line-height: 4rem;
	}
	.two_warp{ min-height: 56vh;}
	.two{
		width:94vw; 
		padding-top: 6vh;
	}
	.two_tit{
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.two_en{
		font-size: 2.5rem;
		line-height: 2.5rem;
		margin-left: 1.25rem;
 	}
	.two_con{
		width: 100%;
		margin-top: 4rem;
	}
	.she_top{
		background: #db2a29 none;
		height: 16vh;
	}
	.she_top .two_biaoti{
		width: 94vw;
	}
	.she_top .two_en{
		margin-right: 1.25rem;
	}
	.she_bottom{
		width: 94vw;
		height: 34vh;
		position: relative;
	}
	.she_img{
		transform: translate(-6vw,3vh);
		width: 54%;
		z-index: 6;

	}
	.she_logo{
		display: none;
	}

	.she_tu{
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translateY(4.857rem);
		width:28%;
	}
	.she_tu1{
		right: 12%;
		width: 28%;
		transform: translateY(14.28rem);
	}

	.limited_warp .two_biaoti{
		width:94vw; 
		padding:10vh 0 6vh 0; 
	}

	.limited{
		padding-bottom: 8vh;
	}
	.limited_tit{
		width:94vw; 
		height:8vh;
	}

	.limited_1{
		width: 24vw;
		height: 24vw;

	}
	.limited_2{
		width: 24vw;
		height: 24vw;
		margin-left: -6vw;
	}
	.limited_3{
		width: 24vw;
		height:24vw;
		margin-left: -6vw;
	}
	.limited_4{
		width: 24vw;
		height: 24vw;
		margin-left: -6vw;
	}
	.limited_5{
		width: 24vw;
		height: 24vw;
		margin-left: -6vw;
	}
	.limited_logo{
		display: none;
	}

	.limited_yan{
		right: 1rem;
		font-size: 1rem;
		line-height: 1.5rem;
	}


	.design{
		width:94vw; 
		padding: 1.25rem 0 8vh 0;
	}

	.design_con{
		justify-content:center;
		flex-direction: column;
		margin-top:3rem;
	}
	.design_zi{
		justify-content: center;
	}
	.design_ti{
		font-size: 1rem;
	}
	.design_ti span{ font-size: 1.875rem;}

	.design_1{
		font-size: 5rem;
		line-height: 7rem;
		justify-content: center;
	}

	.design_2{
		font-size: 4rem;
		justify-content: center;
		line-height: 5rem;
	}

	.design_cona{ flex-direction: column-reverse;}

	.four_warp{
		padding: 6vh 0 10vh 0;
	}
	.four_warp:after{
		height: 1rem;
		bottom: 1.285rem;
	}
	.four_warp:before{
		height: 1.285rem;
	}

	.four{
		width:94vw; 
	}
	.four_img{
		margin-top: 6vh;
	}


	.five{
		width:94vw; 
		padding:6vh 0 10vh 0;
	}
	.five_list{
		transform: translateY(0rem);
		justify-content: center;
	}
	.five_1{
		width: 35vw;
		height: 35vw;
		margin-top: 1.5rem;
	}

	.five_2{
		margin-left: -8vw;
	}

	.five_3{
		margin-left: -1.75vw;
	}

.six{
	padding-bottom: 14vh;
}
.six:after{
	height: 20vh;
}

.six_img{
	width: 25vw;
	height: auto;
	margin: 0px 2vw;
}
.six_img:nth-child(1){ transform: translateY(1.285rem);}
.six_img:nth-child(2){ transform: translateY(-3rem);}
.six_img img{
	border-radius:10px;
}
.six_typeright{
	font-size: 1rem;
	line-height: 1.5rem;
	right: 4%;
	bottom: 4vh;
}
}
