body,
button,
dd,
div,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img,
input,
li,
ol,
p,
ul {
	margin: 0;
	padding: 0;
	border: 0
}

* {
	-webkit-tap-highlight-color: transparent;
}

body {
	font-family: "PingFangRegular", "Helvetica Neue", 'Microsoft Yahei', '黑体', Arial, sans-serif;
	background-color: #ffffff;
	overflow-x: hidden;
}

button,
input,
textarea,
select {
	-webkit-appearance: none;
	resize: none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

img {
	border: 0;
	max-width: 100%;
	vertical-align: middle;
}

.none {
	display: none;
}

.online_x {
	cursor: pointer;
}

button:hover,
input[type=submit]:hover {
	cursor: pointer
}

button:focus,
input:active,
input:focus,
textarea:focus {
	/* border: 0*/
	outline: 0 none;
	outline-color: transparent;
}



.clear {
	clear: both;
	font-size: 0;
	line-height: 0;
	height: 0;
	visibility: hidden
}

.clearfix:after,
.clearfix:before {
	content: "";
	display: table
}

.clearfix:after {
	clear: both
}

.clearfix {
	zoom: 1
}

/*引入外部字体*/
@font-face {
	font-family: "PingFangBold";
	src: url("../fonts/PingFangBold.ttf");
	src: url("../fonts/PingFangBold.ttf") format("TrueType");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PingFangMedium";
	src: url("../fonts/PingFangMedium.ttf");
	src: url("../fonts/PingFangMedium.ttf") format("TrueType");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PingFangLight";
	src: url("../fonts/PingFangLight.ttf");
	src: url("../fonts/PingFangLight.ttf") format("TrueType");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PingFangRegular";
	src: url("../fonts/PingFangRegular.ttf");
	src: url("../fonts/PingFangRegular.ttf") format("TrueType");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "GothamMedium";
	src: url("../fonts/GothamMedium.otf");
	src: url("../fonts/GothamMedium.otf") format("OpenType");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "GothamLight";
	src: url("../fonts/GothamLight.otf");
	src: url("../fonts/GothamLight.otf") format("OpenType");
	font-weight: normal;
	font-style: normal;
}

#app_mobile{
        background-color: #000000;
}
#app, #app_mobile{
        padding: 0 !important;
}


.mImg {
	display: none;
}

.mBox {
	display: none;
}
.mBox .video{
	position: relative;
}
.mBox .video>img{
	width: 100%;
}
.mBox .video .icon-play {
    position: absolute;
    width: 56px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mBox .video .movie{
	display: none;
}
.mBox .video .movie video{
	position: static;
}


.header .dropDown2 .item.active {
	display: block;
}

.header .dropDown2 .rNav {
	width: calc(703px - 250px);
}

.header .dropDown2 .text {
	margin: 15px 35px 15px;
	width: calc(100% - 70px);
	overflow: hidden;
	color: #999;
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	max-height: 65px;
	font-weight: normal;
}

.header .dropDown2 .more {
	line-height: 43px;
	font-size: 13px;
	color: #00a0e9;
	font-weight: normal;
	display: block;
	margin: 0;
}

.header .dropDown2 .more:hover{
	text-decoration: underline;
}

.header .dropDown2 .rNav .box{
	display: none;
}

.header .dropDown2 .rNav .box.active{
	display: block;
}

.header .btnMenu {
	float: right;
	width: 40px;
	height: 30px;
	margin-top: 25px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.header .btnMenu>span {
	width: 40px;
	height: 2px;
	background-color: #fff;
	margin: 4px 0;
	transition: all 0.3s;
	-webkit-transform: skew(40deg);
	-moz-transform: skew(40deg);
	-o-transform: skew(40deg);
	-ms-transform: skew(40deg);
	transform: skew(40deg);
}

.header .btnMenu.on>span {
	width: 20px;
}

.header .btnMenu.on>span:first-child {
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.header .btnMenu.on>span:nth-child(2) {
	display: none;
}

.header .btnMenu.on>span:last-child {
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	margin-top: -6px;
}

.header .btnMenu>span {
	background-color: #fff;
}

.header.on .btnMenu>span {
	background-color: #000;
}

.header.active .btnMenu>span {
	background-color: #000;
}

.header.headBack .btnMenu>span {
	background-color: #000;
}

.header .mNav {
	position: fixed;
	top: 80px;
	left: 0;
	width: 100%;
	height: calc(100vh - 80px);
	padding: 5%;
	background-color: #fff;
	box-sizing: border-box;
	overflow-y: auto;
	z-index: 11;
	display: none;
}

.header .mNav .item a {
	font-size: 15px;
	color: #141414;
	font-weight: bold;
	line-height: 50px;
	font-family: PingFangMedium;
}

.header .mNav::-webkit-scrollbar {
	display: none;
}

.searchbox {
	float: left;
	margin-left: 50px;
	width: 205px;
}

.header .search {
	position: relative;
	margin-top: 20px;
	width: 0%;
	min-width: 40px;
	height: 40px;
	float: right;
	overflow: hidden;
	-webkit-transition: width 0.1s;
	-moz-transition: width 0.1;
	transition: width 0.1s;
	-webkit-backface-visibility: hidden;
}

.header .search.open {
	width: 100%;
}

.header .search .text {
	float: left;
	width: 100%;
	padding: 0px 10px;
	overflow: hidden;
	border: none;
	outline: none;
	background: #fff;
	height: 40px;
	margin: 0;
	z-index: 10;
	font-size: 14px;
	color: #2c3e50;
	box-sizing: border-box;
	opacity: 0;
}

.header .search.open .text {
	opacity: 1;
}

.header .search .btn {
	position: absolute;
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	color: transparent;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background: url(https://hobbywin.oss-cn-beijing.aliyuncs.com/images/search1.png) center no-repeat;
	background-size: 22px auto;
}

.header .search.open .btn {
	z-index: 10;
}

.header .search .icon {
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background: url(https://hobbywin.oss-cn-beijing.aliyuncs.com/images/search.png) center no-repeat;
	background-size: 22px auto;
}

.header .search.open .icon {
	z-index: 9;
}

/*语言切换*/
.head-nation {
	float: left;
	position: relative;
	margin-top: 23px;
	margin-left: 15px;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.header .head-nation .current {
	cursor: pointer;
	padding-bottom: 10px;
	line-height: 30px;
	height: 30px;
	text-align: center;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	padding-left: 24px;
	/*background: url(https://hobbywin.oss-cn-beijing.aliyuncs.com/images/lang.png) left top 7px no-repeat;*/
}

.header .head-nation .current .name {
	font-size: 14px;
	color: #888;
	line-height: 30px;
	vertical-align: middle;
	display: inline-block;
	transition: all .3s;
	text-align: center;
}

.header .head-nation .current .name.on {
	color: #d4d4d4;
}

.head-nation ul {
	display: none;
	position: absolute;
	left: 50%;
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 40px;
	z-index: 100;
	background-color: #2b2b2b;
	text-align: left;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.head-nation ul li a {
	display: block;
	font-size: 14px;
	color: #666666;
	line-height: 2.2;
	min-width: 80px;
	text-align: center;
	padding: 3px 10px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.head-nation ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
}

.head-user {
	position: relative;
	float: left;
	margin-top: 30px;
}

.head-user .icon {
	width: 80px;
	text-align: center;
	padding-bottom: 15px;
}

.head-user ul {
	display: none;
	position: absolute;
	left: 50%;
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 33px;
	z-index: 100;
	background-color: #2b2b2b;
	text-align: left;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.head-user ul li a {
	display: block;
	font-size: 14px;
	color: #666666;
	line-height: 2.2;
	min-width: 80px;
	text-align: center;
	padding: 3px 10px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.head-user ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
}

.positionBox {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

.location {
	width: 100%;
	height: 35px;
	background-color: #141414;
}

.location .line {
	width: 100%;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));
	background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0));
}

.location .box {
	max-width: 1190px;
	width: 90%;
	margin: auto;
	line-height: 35px;
	font-size: 13px;
	color: #777777;
}

.location .box code {
	padding: 2px 4px;
	font-size: 90%;
	color: #666;
	white-space: nowrap;
	border-radius: 4px;
}

.location .box a {
	color: #666;
}

.location .box .on {
	font-family: GothamLight;
}

.tabbb {
	top: 0;
	left: 0;
	width: 100%;
	margin: 0 auto;
	height: 70px;
	background-color: #FFFFFF;
	z-index: 5;
	transition: all 0.3s;
	display: flex;
	align-items: center;
}

.tabbb.active {
	position: fixed;
	height: 50px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.naaavbg {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.6);
}

.tabss {
	max-width: 1190px;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tabss .more {
	display: none;
	float: right;
	font-size: 14px;
	line-height: 1;
	align-items: center;
	cursor: pointer;
}

.tabss .more .icon {
	margin-left: 5px;
}

.tabss span {
	color: #00A0E9;
	font-size: 26px;
	max-width: 50%;
	font-family: GothamLight;
	font-weight: bold
}

.tabss ul {
	padding: 0;
	margin: 0;
}

.tabss ul li {
	float: left;
	margin: 0 15px;
	box-sizing: border-box;
}

.tabss ul li a {
	font-size: 18px;
	text-decoration: none;
	color: #58595b;
}

.tabss ul li.activem a {
	color: #00A0E9;
}

#app {
	background-color: #000000;
}

/* 颜色变化区 */
.color {
	width: 100%;
	height: 600vh;
}

.color-con {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.color-sticky {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	position: sticky;
	/*background: url('https://hobbywin.oss-cn-beijing.aliyuncs.com/images/pbg1.png') no-repeat center center;
    background-size: cover;*/
	background: #000000;
}

.color-title {
	top: 10vh;
	position: absolute;
	/*right: 50px;*/
	right: 0;
	width: 100%;
	padding-right: 50px;
	text-align: right;
	box-sizing: border-box;
	text-transform: uppercase;
	font-family: "posb";
	font-weight: bold;
	font-size: 67px;
	line-height: 1.5;
	color: #292523;
	/*text-align: center;*/
}

.color-subtit {
	font-family: "posb";
	bottom: 6vh;
	position: absolute;
	right: 50px;
	font-size: 23px;
	line-height: 1.5;
	color: #000000;
	text-align: center;
}

.color-subtit span {
	color: #FF0000;
}

.color-img-box {
	/*width: 670px;
    height: 670px;*/
	width: 100%;
	height: calc(100vh - 90px);
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 55%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

.color-img {
	/*transition: opacity .8s ease-out;*/
	opacity: 0;
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translate(-50%, 0%);
	/*-webkit-transition: opacity .8s ease-out;
    -moz-transition: opacity .8s ease-out;
    -ms-transition: opacity .8s ease-out;
    -o-transition: opacity .8s ease-out;*/
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
}

.colorBottomImg {
	opacity: 1;
}

.color-img.colorRoll {
	z-index: 2;
	opacity: 1;
}

.color-img-text {
	white-space: nowrap;
	font-family: 'posb';
	height: 30px;
	color: #e7e7e7;
	font-size: 47px;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: left;
	padding-left: 5%;
	bottom: 15vh;
	box-sizing: border-box;
	transition: all 0.6s ease-out;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
}

@media (max-width:1920px) {
	/*.color-img-box{
        width: 35vw;
        height: 35vw;
    }*/
}

@media only screen and (max-width: 1680px) {
	.color-title {
		font-size: 60px;
	}

	.color-img-text {
		font-size: 44px;
	}
}

@media only screen and (max-width: 1536px) {
	.color-title {
		font-size: 54px;
	}

	.color-img-text {
		font-size: 40px;
	}
}

@media only screen and (max-width: 1440px) {
	.color-title {
		font-size: 50px;
	}

	.color-img-text {
		font-size: 36px;
	}

	.color-subtit {
		font-size: 21px;
	}
}

@media only screen and (max-width: 1280px) {
	.color-title {
		font-size: 44px;
	}

	.color-img-text {
		font-size: 32px;
	}

	.color-subtit {
		font-size: 18px;
	}
}

@media only screen and (max-width: 1024px) {
	/*.color-img-box {
	    width: 60vw;
	    height: 60vw;
	}*/
}

@media only screen and (max-width: 1024px) {
	.color-title {
		font-size: 36px;
	}
}

@media only screen and (max-width: 768px) {
	.color-title {
		font-size: 32px;
		padding-right: 6%;
	}
}

@media only screen and (max-width: 640px) {
	.color-title {
		font-size: 28px;
	}

	.color-subtit {
		right: 5%;
	}

	.color-img-text {
		font-size: 24px;
	}
}

@media only screen and (max-width: 540px) {
	.color-title {
		font-size: 28px;
		padding-right: 0;
		text-align: center;
	}

	.color-subtit {
		font-size: 16px;
	}

	.color-img-text {
		font-size: 20px;
	}
}

@media only screen and (max-width: 480px) {
	.color-title {
		font-size: 24px;
	}
}

.color1 {
	width: 100%;
	height: 1000vh;
}

.color-con1 {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.color-sticky1 {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	position: sticky;
}

.color-img-box1 {
	/*width: 670px;
    height: 670px;*/
	width: 100%;
	height: calc(100vh - 90px);
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 55%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

.color-img1 {
	/*transition: opacity .8s ease-out;*/
	opacity: 0;
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translate(-50%, 0%);
	/*-webkit-transition: opacity .8s ease-out;
    -moz-transition: opacity .8s ease-out;
    -ms-transition: opacity .8s ease-out;
    -o-transition: opacity .8s ease-out;*/
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
}

.colorBottomImg1 {
	opacity: 1;
}

.color-img1.colorRoll {
	z-index: 2;
	opacity: 1;
}

.color-img-text1 {
	white-space: nowrap;
	font-family: 'posb';
	height: 30px;
	color: #e7e7e7;
	font-size: 47px;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: left;
	padding-left: 5%;
	bottom: 15vh;
	box-sizing: border-box;
	transition: all 0.6s ease-out;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
}

/**/
.illustration {
	width: 100%;
	height: calc((100vh - 50px)*10);
}

.illustration-con {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.illustration-sticky {
	width: 100%;
	height: 100vh;
	padding-top: 50px;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	position: sticky;
	background: #000000;
	box-sizing: border-box;
}

.illustration-con-box {
	position: relative;
	height: 100%;
	max-width: 1440px;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.illustration-img-box {
	width: 100%;
	position: relative;
	/*height: 100vh;*/
	height: 700px;
}

.illustration-img {
	width: 80%;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 60%;
	/*max-height: 80%;*/
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	/*transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all cubic-bezier(0.075, 0.82, 0.165, 1);*/
}

.illustration-img.colorRoll {
	z-index: 2;
	opacity: 1;
}







@-webkit-keyframes fadeInUpSmall {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUpSmall {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInUpSmall {
	-webkit-animation-name: fadeInUpSmall;
	animation-name: fadeInUpSmall;
}

@keyframes fadeup {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.fadeup {
	-webkit-animation-name: fadeup;
	animation-name: fadeup;
}

@keyframes faderight {
	0% {
		transform: translateX(20px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.faderight {
	-webkit-animation-name: faderight;
	animation-name: faderight;
}

@keyframes fadeleft {
	0% {
		transform: translateX(-20px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.fadeleft {
	-webkit-animation-name: fadeleft;
	animation-name: fadeleft;
}

/**/
.videobox {}

.videobox .wrap {
	position: relative;
	width: 100%;
}

.videobox .wrap img {
	width: 100%;
}

.videobox video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.part1 {
	position: relative;
	padding-top: 50px;
	min-height: 115vh;
	box-sizing: border-box;
}

.part1 .img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.part1 .img.animated {
	background-size: 100% 100%;
}

.part1 .img:before {
	/* content: ''; */
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	-webkit-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.part1 .img.animated:before {
	background: rgba(0, 0, 0, 0);
}

.part1 .img img {
	width: 100%;
}

.part1 .text {
	z-index: 1;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, 0);
}

.part1 .text .title {
	text-align: center;
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity;
}

.part1 .text .title .t1 {
	max-width: 700px;
	color: #1faaff;
	font-size: 38px;
	margin: 0 auto;
	margin-bottom: 15px;
	font-family: PingFangBold;
}

.part1 .text .title .t2 {
	color: #fff;
	font-size: 18px;
	line-height: 2;
	width: 100%;
	margin: auto;
	font-family: PingFangLight;
}

.part1 .text ul {
	margin-top: 10px;
	font-size: 0;
	text-align: center;
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity;
}

.part1 .text ul li {
	display: inline-block;
	vertical-align: top;
	max-width: 230px;
	margin-right: 30px;
}

.part1 .text ul li:last-child {
	margin-right: 0;
}

.part1 .text ul li .pic {
	width: 100%;
	border-radius: 28px;
	border: 1px solid #000000;
	background: #ffffff;
	overflow: hidden;
}

.part1 .text ul li .txt {
	margin-top: 10px;
	font-family: GothamLight;
	color: #221e1f;
	font-size: 21px;
}

.illustration .section1 .comtxt {
	display: flex;
	justify-content: space-between;
}

.illustration .section1 .comtxt .con {
	max-width: 640px;
	text-align: left;
}

/* .illustration .section2 .comtxt .con {
	max-width: 740px;
} */

.illustration .section1 .wrap {
	text-align: left;
}

.illustration .section1 .wrap .w1 {
	text-align: left;
}

.comtxt .con {
	display: inline-block;
	max-width: 640px;
	width: 100%;
}

.comtxt .t1 {
	color: #1faaff;
	font-size: 38px;
	margin-bottom: 10px;
	font-family: PingFangBold;
}

.comtxt .t2 {
	color: #ffffff;
	font-size: 16px;
	line-height: 1.7;
	font-family: PingFangLight;
}

.illustration .text {
	position: absolute;
	top: 10vh;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
	max-width: 1190px;
	width: 90%;
}

.illustration .text.right {
	text-align: right;
}

.illustration .text.section1 .wrap {
	margin-top: 2%;
}

.illustration .text.section1 .wrap .w1 {
	display: inline-block;
	overflow: hidden;
}

.illustration .text.section1 .wrap .w2,
.illustration .text.section1 .wrap .w3 {
	float: left;
}

.illustration .text.section1 .wrap .w2 {
	position: absolute;
	top: 120%;
	left: 0;
}

.illustration .text .power {
	position: relative;
	text-align: left;
}

.illustration .text .power .t1 {
	color: #fff;
	font-size: 18px;
}

.illustration .text .power .t2 {
	position: relative;
	font-family: "GothamMedium";
	color: #982e25;
	font-size: 76px;
	line-height: 1.2;
	white-space: nowrap;
}

.illustration .text .power .t2 img {
	display: inline-block;
}

.illustration .section1 .arrow {
	position: absolute;
	left: 0;
	animation: downico3 2s ease-out infinite;
}

.illustration .section2 .arrow {
	position: absolute;
	right: -8%;
	animation: downico2 1.5s ease-out infinite;
}

.illustration .section3 .arrow {
	position: absolute;
	right: -10px;
	animation: downico 2s ease-out infinite;
}

@keyframes downico {
	0% {
		bottom: 30%;
		opacity: 1;
	}

	35% {
		bottom: 50%;
		opacity: 0;
	}

	65% {
		bottom: -50%;
		opacity: 0;
	}

	100% {
		bottom: 30%;
		opacity: 1;
	}
}

@keyframes downico2 {
	0% {
		top: 25%;
		opacity: 1;
	}

	35% {
		top: 50%;
		opacity: 0;
	}

	65% {
		top: -50%;
		opacity: 0;
	}

	100% {
		top: 25%;
		opacity: 1;
	}
}

@keyframes downico3 {
	0% {
		bottom: 10%;
		opacity: 1;
	}

	35% {
		bottom: 30%;
		opacity: 0;
	}

	65% {
		bottom: -60%;
		opacity: 0;
	}

	100% {
		bottom: 10%;
		opacity: 1;
	}
}

.illustration .text .icon li,
.interaction .icon li,
.rotor .mark .icon li,
.materials .icon li {
	display: inline-block;
	text-align: center;
}

.illustration .text .icon li .ic,
.interaction .icon li .ic,
.rotor .mark .icon li .ic,
.materials .icon li .ic {
	overflow: hidden;
}

.illustration .text .icon li .zi,
.interaction .icon li .zi,
.rotor .mark .icon li .zi,
.materials .icon li .zi {
	margin-top: 8px;
	color: #ffffff;
	font-size: 14px;
	font-family: PingFangLight;
}

.axis_txt {
	position: absolute;
	left: 35%;
	top: 32%;
	width: 30%;
	z-index: 10;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}

.m1,
.m2,
.m3,
.m4,
.m5,
.m6,
.m7,
.m8,
.m9,
.m10,
.m11,
.m12,
.m13,
.m14,
.m15,
.m16,
.m17,
.m18,
.m19,
.m20,
.m21,
.m22 {
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}

.illustration .text.section2 .w1,
.illustration .text.section2 .w2 {
	float: left;
	width: 50%;
}

.illustration .text.section2 .comtxt .t2 {
	max-width: 500px;
}

.illustration .text.section2 .icon {
	display: none;
	margin-top: 35px;
}

.illustration .text.section2 .w2 {
	text-align: right;
}

.illustration .text.section2 .w2 .con {
	display: inline-block;
}

.illustration .text.section2 .w3 {
	font-size: 0;
}

.illustration .text.section2 .w4,
.illustration .text.section2 .w5,
.illustration .text.section2 .w6 {
	display: inline-block;
	vertical-align: bottom;
	font-family: GothamLight;
}

.illustration .text.section2 .w4 {
	position: relative;
	color: #fff;
	font-size: 18px;
	/*height: 230px;*/
	height: 180px;
	padding-right: 25px;
	box-sizing: border-box;
	text-align: right;
}

.illustration .text.section2 .w4::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background-image: linear-gradient(180deg, #458ad9 16%, #2d5dcd 100%);
	border-radius: 2px 2px 0 0;
}

.illustration .text.section2 .w5 {
	color: #ffffff;
	font-size: 16px;
	/*height: 90px;*/
	height: 60px;
	width: 40px;
	text-align: center;
}

.illustration .text.section2 .w6 {
	position: relative;
	padding-left: 25px;
	/*height: 200px;*/
	height: 150px;
	box-sizing: border-box;
}

.illustration .text.section2 .w6::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-image: linear-gradient(180deg, #ee9fde 16%, #7f31f4 100%);
	border-radius: 2px 2px 0 0;
}

.illustration .text.section2 .w7 {
	text-align: center;
	font-size: 0;
}

.illustration .text.section2 .w8 {
	display: inline-block;
	padding: 3px 12px;
	color: #000;
	font-size: 16px;
	background-color: #fff;
	border-radius: 13px;
	margin-left: 5.5%;
}

/**/
.illustration .text.section3 .w1,
.illustration .text.section3 .w2 {
	float: left;
	width: 50%;
}

.illustration .text.section3 .icon {
	margin-bottom: 35px;
}

.illustration .text.section3 .w3 {
	display: flex;
	align-items: flex-end;
	font-size: 0;
}

.illustration .text.section3 .w4,
.illustration .text.section3 .w5,
.illustration .text.section3 .w6 {
	display: inline-block;
	vertical-align: bottom;
	font-family: GothamLight;
}

.illustration .text.section3 .w4 {
	position: relative;
	width: calc(50% - 15px);
	color: #fff;
	font-size: 18px;
	height: 150px;
	padding-right: 25px;
}

.illustration .text.section3 .w4::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background-image: linear-gradient(180deg, #458ad9 16%, #2d5dcd 100%);
	border-radius: 2px 2px 0 0;
}

.illustration .text.section3 .w5 {
	color: #ffffff;
	font-size: 16px;
	height: 60px;
	width: 30px;
	text-align: center;
}

.illustration .text.section3 .w6 {
	position: relative;
	width: calc(50% - 15px);
	position: relative;
	padding-left: 25px;
	height: 200px;
	box-sizing: border-box;
}

.illustration .text.section3 .w6:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background-image: linear-gradient(180deg, #ee9fde 16%, #7f31f4 100%);
	border-radius: 2px 2px 0 0;
}

.illustration .text.section3 .w7 {
	text-align: center;
	font-size: 0;
}

.illustration .text.section3 .w8 {
	display: inline-block;
	padding: 3px 12px;
	color: #000;
	font-size: 16px;
	line-height: 1;
	background-color: #fff;
	border-radius: 19px;
	margin-left: 4.7%;
}

.illustration .text.section4 .comtxt .t2 {
	max-width: 500px;
	width: 100%;
}

.illustration .text.section4 .icon {
	margin-top: 35px;
}

.plate_txt {
	position: absolute;
	left: 42%;
	top: 71%;
	z-index: 12;
	padding-left: 25vw;
	color: #ffffff;
	font-size: 36px;
	font-family: PingFangBold;
}

.plate_txt:before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	z-index: 99;
	width: 15px;
	height: 15px;
	background: url(../images/imgv10_12.png) center no-repeat;
}

.plate_txt:after {
	content: '';
	position: absolute;
	left: 4px;
	top: 25px;
	width: 25vw;
	height: 1px;
	border-bottom: #fff solid 1px;
}

.plate_txt span {
	font-size: 36px;
	color: #f4811f;
	margin-left: 5px;
	white-space: nowrap;
}

.illustration .text.center {
	text-align: center;
}

.illustration .text.section5 .comtxt .t2 {
	width: 100%;
	text-align: left;
}

.illustration .text.section5 .icon {
	margin-top: 35px;
}

.structure_txt {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.structure_txt .tit {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.structure_txt .tit .t1 {
	margin-bottom: 5px;
}

.structure_txt .tit .t1 span {
	display: inline-block;
	font-family: "GothamLight";
	color: #939598;
	font-size: 18px;
	padding: 0px 16px;
	line-height: 1.6;
	border-radius: 28px;
	border: #939598 solid 1px;
}

.structure_txt .tit .t2 {
	color: #ffffff;
	font-size: 37px;
	font-family: PingFangBold;
}

.structure_txt ul li {
	position: absolute;
	color: #FFFFFF;
	font-size: 18px;
}

.structure_txt ul li.s1 {
	left: 25%;
	top: 48%;
	padding-top: 40vh;
}

.structure_txt ul li.s2 {
	left: 43%;
	top: 55%;
	padding-top: 25vh;
}

.structure_txt ul li.s3 {
	left: 51%;
	top: 30%;
	padding-bottom: 25vh;
}

.structure_txt ul li.s4 {
	left: 62%;
	top: 65%;
	padding-top: 20vh;
}

.structure_txt ul li.s5 {
	left: 66%;
	top: 40%;
	padding-bottom: 10vh;
}

.structure_txt ul li.s6 {
	right: 1%;
	top: 50%;
	padding-bottom: 20vh;
}

.structure_txt ul li i {
	display: inline-block;
	vertical-align: top;
	width: 50px;
	height: 1px;
	border-bottom: #ed1b23 dashed 1px;
	display: none;
}

.structure_txt ul li span {
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
	line-height: 1.2;
}

.structure_txt ul li.right i {
	vertical-align: middle;
}

.structure_txt ul li.right span {
	margin-top: 0;
}

.structure_txt ul li:before {
	content: '';
	position: absolute;
	left: -7px;
	top: -5px;
	width: 15px;
	height: 15px;
	background: url(../images/imgv10_12.png) center no-repeat;
}

.structure_txt ul li.right:before {
	top: auto;
	bottom: -5px;
}

.structure_txt ul li:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100% !important;
	border-left: #fff solid 1px;
}

.structure_txt ul li.s1:after {
	height: 100%;
}

.structure_txt ul li.s2:after {
	height: 30vh;
}

.structure_txt ul li.s3:after {
	height: 25vh;
}

.structure_txt ul li.right:after {
	top: auto;
	bottom: 0;
}

.structure_txt ul li.s4:after {
	height: 26vh;
}

.structure_txt ul li.s5:after {
	height: 25vh;
}

.structure_txt ul li.s6:after {
	height: 13vh;
}

/**/
.interaction {
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
	overflow: hidden;
}

.interaction .backImg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	font-size: 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition-duration: 1s;
	transition-property: opacity;
}

.interaction .backImg img {
	width: 30%;
	transition-duration: 0.5s;
	transition-property: opacity;
}

.interaction .conwidth {
	position: relative;
}

.interaction .conwidth .box {
	transition: all 1s;
	opacity: 0;
}

.interaction .comtxt {
	position: relative;
	text-align: center;
	z-index: 2;
	transition: all 1s;
	opacity: 0;
}

.interaction .comtxt .t2 {
	max-width: 800px;
	width: 100%;
	margin: auto;
}

.interaction .icon {
	position: relative;
	display: flex;
	margin-top: 35px;
	text-align: center;
	z-index: 2;
	transition: all 1s;
	opacity: 0;
}

.interaction .box {
	position: relative;
	font-size: 0;
	text-align: center;
}

.interaction .a1 {
	display: inline-block;
	vertical-align: middle;
}

.interaction .a2 {
	display: inline-block;
	vertical-align: middle;
}

.interaction .a3 {
	display: inline-block;
	vertical-align: middle;
}

.interaction .a4 {
	position: absolute;
	right: -6%;
	top: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 0;
}

.interaction .a5 {
	display: inline-block;
	vertical-align: middle;
}

.interaction .a6 {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	font-size: 26px;
	font-family: PingFangBold;
}

.interaction .a6 span {
	color: #f3801e;
	font-size: 26px;
}

.rotor {
	position: relative;
	padding-bottom: 90px;
}

.rotor .box {
	position: relative;
	padding-top: 10%;
}

.rotor .box .comtxt {
	position: absolute;
	right: 10%;
	top: 5%;
	text-align: right;
}

.rotor .box .comtxt .t2 {
	max-width: 620px;
	width: 100%;
}

.rotor .img {
	width: 100%;
	text-align: center;
	overflow: hidden;
}

.rotor .img img {
	max-width: 100%;
}

.rotor .mark {
	position: absolute;
	left: 40%;
	top: 40%;
	background: none;
}
.interaction .conwidth {
    position: relative;
}
.conwidth {
    max-width: 1190px;
    width: 90%;
    margin: auto;
}
.rotor .mark .txt {
	position: relative;
	padding-top: 33vh;
	padding-left: 20px;
	color: #ffffff;
	font-size: 36px;
	line-height: 1;
	font-family: PingFangBold;
}

.rotor .mark .txt span {
	color: #f3801e;
	font-size: 26px;
}

.rotor .mark .txt .s-1 {
	font-size: 18px;
	color: #fff;
	font-family: PingFangRegular;
}

.rotor .mark i {
	position: absolute;
	right: 60px;
	bottom: 40px;
	z-index: 2;
	width: 15px;
	height: 15px;
	background: url(https://hobbywin.oss-cn-beijing.aliyuncs.com/images/img12.png) center no-repeat;
}

.rotor .mark .txt:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	border-right: #fff solid 1px;
}

.rotor .mark .icon {
	text-align: center;
	margin-top: 25px;
}

.materials {
	position: relative;
	z-index: 1;
	padding-top: 3%;
	padding-bottom: 80px;
	background: #000000;
	min-height: 1440px;
	box-sizing: border-box;
}

.materials .img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	-webkit-transition: all 1.5s ease;
	transition: all 1.5s ease;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 50% 50%;
}

.materials .img.animated {
	background-size: 100% 100%;
}

.materials .comtxt {
	max-width: 720px;
	text-align: right;
	margin-left: auto;
}

.materials .comtxt .t2{
	max-width: 650px;
	margin-left: auto;
}

.materials .comtxt .t2 li span {
	display: block;
	position: relative;
	padding-left: 10px;
	word-break: break-all;
	word-wrap: break-word;
}

.materials .comtxt .t2 li i {
	position: absolute;
	left: 0;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffffff;
}

.materials .icon {
	position: absolute;
	left: 50%;
	bottom: 80px;
	transform: translate(-50%, 0);
	text-align: right;
}

.materials .icon li {
	margin-right: 70px;
}

.materials .trait {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	padding-bottom: 50px;
}

.materials .trait ul {
	font-size: 0;
}

.materials .trait ul li {
	display: inline-block;
	vertical-align: top;
	max-width: 180px;
	width: 22.9%;
	margin-right: 2.8%;
	text-align: center;
	/*-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform: rotateY(50px);
	transform: rotateY(50px);*/
}

.materials .trait ul li:nth-child(4n) {
	margin-right: 0;
}

.materials .trait ul li .pic {
	width: 100%;
	margin-bottom: 20px;
}

.materials .trait ul li .pic img {
	border-radius: 50%;
	overflow: hidden;
}

.materials .trait ul li .txt {
	color: #f3801e;
	font-size: 14px;
	text-align: center;
	font-family: PingFangBold;
}

/*.materials .trait.animated ul li{
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}*/

.illustration .section1 {
	top: 5vh;
}

.illustration .section1 .power {
	padding-left: 30px;
}

.illustration .section1 .power .t2 {
	width: 144px;
	background: linear-gradient(180deg, #4e9cde 16%, #2246c7 100%);
	-webkit-background-clip: text;
	color: transparent;
	animation: move 1s infinite;
}

@keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		/*宽度固定，如果为百分比背景不会滚动*/
		background-position: -144px 0;
	}
}

.illustration .text.section2 .icon {
	text-align: right;
	margin-top: 65vh;
}

.illustration .section2 .power .t2 {
	background: linear-gradient(180deg, #db8ce2 16%, #9446f0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.illustration .section3 {
	/* max-width: 100%;
	width: 100%; */
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.illustration .section3 .w2 {
	text-align: right;
}

.illustration .text.section3 .icon {
	margin-bottom: 0;
	margin-top: 40vh;
}

.illustration .text.section3 .power .t2 {
	background: linear-gradient(180deg, #db8ce2 16%, #9446f0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.illustration .section4 {
	display: flex;
	justify-content: space-between;
}

.illustration .text.section4 .icon {
	margin-top: 0;
}

.illustration .section5 {
	display: flex;
	justify-content: space-between;
}

.illustration .section5 .con {
	max-width: 730px;
}

.illustration .section5 .t1 {
	text-align: left;
}

.illustration .text.section5 .icon {
	margin-top: 0;
}

.structure_txt ul li {
	color: #f3801e;
	font-family: PingFangBold;
}

.structure_txt .tit {
	display: none;
}

.rotor .icon {
	text-align: right;
	margin-top: 130px;
}

.rotor .icon li {
	display: inline-block;
	text-align: center;
}

.rotor .icon .zi {
	font-size: 14px;
	color: #fff;
	text-align: center;
	margin-top: 8px;
}

@media screen and (max-width: 1600px) {
	.illustration .text.section3 .icon {
		margin-top: 30vh;
	}

	.structure_txt ul li.s4 {
		top: 69%;
	}

	.materials {
		min-height: 1200px;
		padding: 5% 0;
	}
}

@media screen and (max-width: 1440px) {

	.tabbb,
	.tabss,
	.naaavbg {
		height: 64px;
	}

	.tabbb.active,
	.tabbb.active .tabss,
	.tabbb.active .naaavbg {
		height: 50px;
	}

	.tabss span {
		font-size: 24px;
		line-height: 64px;
	}

	.tabss ul li a {
		line-height: 64px;
		font-weight: bold;
	}

	.part1 .text .title .t1 {
		font-size: 32px;
	}

	.part1 .text .title .t2 {
		font-size: 16px;
	}

	.part1 .text ul li {
		max-width: 200px;
	}

	.part1 .text ul li .txt {
		font-size: 19px;
	}

	.comtxt .t1 {
		font-size: 32px;
	}

	.comtxt .t2 {
		font-size: 16px;
	}

	.illustration .text .power .t1 {
		font-size: 16px;
	}

	.illustration .text .power .t2 {
		font-size: 68px;
	}

	.illustration .text.section3 .w4 {
		font-size: 16px;
	}

	.illustration .text.section3 .w8 {
		font-size: 15px;
	}

	.plate_txt,
	.interaction .a6 {
		font-size: 32px;
	}

	.plate_txt span,
	.interaction .a6 span {
		font-size: 32px;
	}

	.structure_txt ul li {
		font-size: 16px;
	}

	.structure_txt .tit .t1 span {
		font-size: 16px;
	}

	.structure_txt .tit .t2 {
		font-size: 32px;
	}

	.materials .trait ul li {
		max-width: 200px;
	}

	.materials .trait ul li .txt {
		font-size: 16px;
	}

	.structure_txt ul li.s1 {
		left: 16%;
		top: 32%;
	}

	.structure_txt ul li.s2 {
		left: 25%;
	}

	.structure_txt ul li.s3 {
		left: 41%;
		top: 53%;
	}

	.structure_txt ul li.s4 {
		left: 60%;
		top: 35%;
	}

	.structure_txt ul li.s5 {
		left: 65%;
		top: 70%;
	}

	.structure_txt ul li.s6 {
		left: 70%;
	}

	.header .nav>ul>li {
		min-width: 120px;
	}

	.header .searchbox {
		margin-left: 30px;
	}

	.interaction .a4 {
		right: -2%;
	}
}

@media screen and (max-width: 1366px) {
	.part1 .text .title .t1 {
		font-size: 32px;
	}

	.part1 .text .title .t2 {
		font-size: 16px;
	}.comtxt .t1 {
		font-size: 32px;
	}

	.comtxt .t2 {
		font-size: 16px;
	}.illustration .text .power .t1 {
		font-size: 14px;
	}

	.illustration .text .power .t2 {
		font-size: 50px;
	}.illustration .text.section3 .w2 {
		display: flex;
		justify-content: flex-end;
	}.illustration .section3 .arrow {
		right: -15%;
	}

	.illustration .text.section3 .icon {
		margin-top: 20vh;
	}.illustration .text.section3 .w4 {
		height: 120px;
		font-size: 14px;
		padding-right: 15px;
	}

	.illustration .text.section3 .w5 {
		height: 40px;
		font-size: 14px;
	}

	.illustration .text.section3 .w6 {
		width: auto;
		height: 180px;
		padding-left: 15px;
	}

	.illustration .text.section3 .w8 {
		font-size: 14px;
		margin-left: 0;
		margin-right: 10%;
	}

	.plate_txt,
	.interaction .a6 {
		font-size: 26px;
	}

	.plate_txt span,
	.interaction .a6 span {
		font-size: 26px;
	}

	.structure_txt ul li {
		font-size: 14px;
	}

	.structure_txt .tit .t1 span {
		font-size: 14px;
	}
	.materials .trait ul li .txt {
		font-size: 14px;
	}	
	.interaction .a4 {
		right: 9%;
	}

	.illustration .section1 .power {
		padding-left: 20px;
	}

	.illustration .section1 .arrow {
		width: 15px;
	}

	.illustration .text.section2 .w4 {
		font-size: 14px;
		padding-right: 15px;
	}

	.illustration .text.section2 .w5 {
		width: 30px;
		height: 40px;
		font-size: 14px;
	}

	.illustration .text.section2 .w6 {
		height: 120px;
		padding-left: 15px;
	}

	.illustration .section2 .arrow {
		right: 20%;
	}

	.illustration .text.section2 .w8 {
		font-size: 14px;
	}

	.plate_txt:after {
		top: 18px;
	}

	.plate_txt:before {
		top: 11px;
	}

	.plate_txt {
		top: 70%;
	}

	.illustration-img-box {
		height: 500px;
	}

	.illustration .section5.text {
		text-align: left;
	}

	.interaction .a1 {
		height: 700px;
	}

	.interaction .a1 img {
		max-height: 100%;
	}

	.interaction .a5 {
		width: 220px;
	}

	.materials {
		min-height: 1000px;
	}

	.materials .trait ul li {
		max-width: 150px;
	}

	.rotor .img {
		height: 500px;
	}

	.rotor .img img {
		max-height: 100%;
	}

	.rotor .mark {
		top: 40%;
		left: 43%;
	}

	.rotor .mark .txt {
		font-size: 26px;
	}

	.rotor .mark .txt span {
		font-size: 26px;
	}

	.rotor .icon {
		margin-top: 7%;
	}
}
@media screen and (max-width: 1199px) {
	.header {
		position: fixed;
	}

	.header .nav {
		display: none;
	}

	.header .box {
		display: none;
	}

	.header .btnMenu {
		display: flex;
	}

	.main {
		padding-top: 80px;
	}

	.tabbb.active {
		top: 80px;
	}

	.tabbb.active,
	.tabbb.active .tabss,
	.tabbb.active .naaavbg {
		height: 50px;
	}
	.tabss span{
		line-height: 50px;
	}
	.illustration {
		height: calc((100vh - 130px)*10);
	}

	.illustration-sticky {
		padding-top: 130px;
	}

}

@media screen and (max-width: 1024px) {

	.tabbb,
	.tabss,
	.naaavbg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tabss span {
		line-height: 1;
	}

	.tabss .tabs {
		display: none;
		position: absolute;
		/*top: 64px;*/
		top: 50px;
		left: 0;
		width: 100%;
		padding: 2% 5%;
		border-top: 1px solid #eee;
		background-color: #fff;
		box-sizing: border-box;
		z-index: 2;
	}

	.tabss .tabs li {
		width: 100%;
		margin: 0;
	}

	.tabss .tabs li a {
		line-height: 50px;
	}

	.tabss .more {
		display: flex;
	}
	.axis_txt{
		top: 38vh;
	}
	.plate_txt{
		top: 53vh;
	}
	
	.videobox .mBox{
		display: block;
	}
	.videobox .pBox {
		display: none;
	}
	/* .structure_txt ul li.s1 {
		padding-top: 40vh;
	} */
	.interaction .a4{
		right: 0;
	}
	.structure_txt ul li.s2 {
		padding-top: 20vh;
	}

	.structure_txt ul li.s3 {
		padding-bottom: 20vh;
	}

	.structure_txt ul li.s4 {
		padding-top: 20vh;
		top: 60%;
	}

	.structure_txt ul li.s5 {
		padding-bottom: 10vh;
	}

	.structure_txt ul li.s6 {
		padding-bottom: 9vh;
	}
	/*.illustration .text .power .t2{
		font-size: 50px;
	}
	.illustration .section3 .arrow {
	    right: -15%;
	}*/
	.rotor .box .comtxt .t2{
		right: 4%;
	}
	.rotor .box .comtxt .t2{
		max-width: 500px;
	}
}

@media screen and (max-width: 991px) {
	.illustration-img {
		top: 50%;
	}

	.illustration .section2.text {
		top: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 5% 0;
		box-sizing: border-box;
	}

	.illustration .text.section2 .w1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.illustration .text.section2 .w1 .comtxt{
		width: 72%;
	}
	.illustration .text.section2 .icon {
		width: 27%;
		display: block;
		margin-top: 0;
	}

	.illustration .section3.text {
		top: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 5% 0;
		text-align: center;
		box-sizing: border-box;
	}

	.illustration .text.section3 .icon {
		display: none;
	}

	.illustration .section4.text {
		top: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 5% 0;
		text-align: center;
		box-sizing: border-box;
	}

	.plate_txt {
		top: 55%;
	}

	.illustration .text.section5 .icon {
		display: none;
	}

	.illustration .section5.text {
		justify-content: center;
		text-align: center;
	}

	.illustration .text.section5 .comtxt .t2 {
		text-align: center;
	}

	.structure_txt ul li.s2 {
		top: 48%;
		padding-top: 15vh;
	}

	.structure_txt ul li.s3 {
		padding-bottom: 15vh;
	}

	.structure_txt ul li.s4 {
		top: 55%;
		padding-top: 15vh;
	}

	.structure_txt ul li.s5 {
		top: 32%;
	}

	.structure_txt ul li.s6 {
		top: 39%;
		padding-bottom: 15vh;
	}

	.interaction .comtxt {
		text-align: left;
	}

	.interaction .comtxt .t2 {
		margin: 0;
	}

	.interaction .icon {
		display: none;
	}

	.interaction .icon-2 {
		/* display: flex;
		justify-content: flex-end; */
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
	}

	.interaction .box {
		text-align: right;
	}

	.interaction .a5 {
		display: none;
	}

	.interaction .a4 {
		/* width: 100%;
		right: auto;
		left: 0;
		text-align: left; */
		width: auto;
		right: 25%;
		top: auto;
		bottom: 0;
		transform: none;
	}
	.interaction .a6 span {
		display: block;
	}

	.interaction .line {
		/*position: relative;
		 width: 73%;
		height: 1px; */
		position: absolute;
		/* bottom: 7vh; */
		bottom: 70px;
		width: 1px;
		height: 30vh;
		background-color: #fff;
	}

	.interaction .line::after {
		content: "";
		position: absolute;
		right: -7px;
		top: -7px;
		width: 15px;
		height: 15px;
		background: url(../images/imgv10_12.png) center no-repeat;
	}
	.interaction .line.line-1{
		left: 0;
		height: 12vh;
	}
	.interaction .line.line-2{
		right: 0;
	}
	.interaction .a6 {
		margin: 5% 0;
	}

	.rotor .box .comtxt {
		right: 0;
	}

	.materials .comtxt {
		text-align: center;
	}

	.materials .trait ul li {
		max-width: 50%;
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.materials {
		/*min-height: none;*/
		min-height: 1px;
	}

	.materials .img {
		top: 25vh;
		height: 700px;
	}

	.materials .box {
		width: 100%;
		height: 100%;
	}

	.materials .trait {
		position: relative;
		margin-top: 65%;
		padding-bottom: 50px;
	}

	.materials .icon {
		position: relative;
		text-align: center;
	}

	.illustration .text.section2 .w2 {
		width: 100%;
		text-align: center;
	}

	.illustration .text.section3 .w2 {
		width: 100%;
		justify-content: center;
	}
	
	.part1 .text .title .t1,
	.comtxt .t1{
		font-weight: bold;
	}
}
@media screen and (max-width: 768px) {
	.axis_txt{
		top: 33vh;
	}
	.illustration .text.section3 .w1, .illustration .text.section3 .w2{
		float: none;
		width: 100%;
	}
	.interaction .a6{
		text-align: center;
	}
	.rotor .mark{
		max-width: 110px;
	}
}
@media screen and (max-width: 750px) {
	.header .logo a {
		line-height: 50px;
	}

	.header .btnMenu {
		margin-top: 10px;
	}

	.header .btnMenu>span {
		width: 30px;
		margin: 3px 0;
	}

	.header .btnMenu.on>span:last-child {
		margin-top: -5px;
	}

	.tabbb.active {
		top: 50px;
	}

	.header .mNav {
		top: 50px;
		height: calc(100vh - 50px);
	}

	.pImg {
		display: none;
	}

	.mImg {
		display: block;
		font-size: 0;
	}

	.mBox {
		display: block;
	}

	.pBox {
		display: none;
	}

	.part1 {
		padding: 0;
	}

	.part1 .iconBox {
		text-align: center;
		margin-bottom: 30px;
	}

	.part1 .iconBox .name {
		font-size: 12px;
		color: #fff;
		margin-top: 10px;
		white-space: nowrap;
	}

	.structure_txt ul li.s6 {
		top: 37%;
		right: 5%;
	}

	.interaction .a1 {
		height: auto;
	}

	.interaction .a4 {
		/* top: 50%; */
		right: 13%;
		bottom: 0;
		height: 64%;
		width: 12%;
	}
	.interaction .a6{
		position: absolute;
		/* left: 0;
		right: 0; */
		left: 50%;
		bottom: 0;
		margin: auto;
		text-align: center;
		font-size: 14px;
		white-space: nowrap;
		background: #000000;
		min-width: 70px;
		margin-left: -68px;
	}
	
	.interaction .a6 span{
		font-size: 24px;
	}
	.interaction .line{
		/* height: 33vh; */
		bottom: 50px;
	}
	.interaction .line.line-1{
		left: 10%;
		height: 50%;
	}
	.interaction .line.line-2{
		right: 11%;
		height: calc(100% - 60px);
	}
	/* .interaction .line {
		width: 80%;
	} */
		
	.rotor .box {
		padding: 0;
	}

	.rotor .img {
		height: auto;
	}

	.rotor .box .comtxt {
		z-index: 1;
	}

	.rotor .mark {
		top: 56%;
		left: 12%;
		max-width: 100%;
	}

	.rotor .mark .txt {
		padding-left: 0;
		padding-top: 30vh;
		padding-right: 20px;
	}

	.rotor .mark .txt:before {
		left: auto;
		right: 0;
	}

	.rotor .mark .txt::after {
		content: "";
		position: absolute;
		top: -7px;
		right: -7px;
		width: 15px;
		height: 15px;
		background: url(../images/imgv10_12.png) center center no-repeat;
	}

	.rotor .icon {
		position: absolute;
		right: 0;
		bottom: 5%;
		margin-top: 0;
	}

	.materials .img {
		top: 0;
		height: auto;
	}

	.materials .trait {
		margin-top: 105%;
	}

	.axis_txt {
		top: 37%;
	}
}
@media screen and (max-width: 640px){
	.interaction .a4{
		right: 16%;
	}
}
@media screen and (max-width: 540px){
	.interaction .line.line-1{
		/* height: 26vh; */
		left: 12%;
	}
	.interaction .line.line-2{
		/* height: 46vh; */
		right: 12%;
	}
}
@media screen and (max-width: 480px){
	.interaction .a4{
		/* right: 14%; */
	}
	.interaction .line.line-1{
		/* height: 21vh; */
		left: 16%;
	}
	.interaction .line.line-2{
		/* height: 37vh; */
		right: 16%;
	}
}
@media screen and (max-width: 440px) {
	.header .logo {
		width: 200px;
	}

	.main {
		padding-top: 50px;
	}

	.tabbb,
	.tabss,
	.naaavbg {
		height: 50px;
	}

	.tabss span {
		font-size: 16px;
	}

	.tabss .tabs {
		top: 40px;
	}

	.part1 .text .title .t1 {
		font-size: 24px;
	}

	.part1 .text .title .t2 {
		font-size: 12px;
	}

	.part1 .iconBox {
		margin-bottom: 20px;
	}

	.part1 .iconBox img {
		width: 50px;
	}

	.illustration-sticky {
		padding-top: 100px;
	}

	.illustration .section1 {
		top: 0;
		height: 100%;
	}

	.illustration .section1 .comtxt .con {
		text-align: center;
	}

	.illustration .section1 .comtxt {
		height: 100%;
		flex-direction: column;
		padding: 5% 0;
		box-sizing: border-box;
	}

	.illustration .text.section1 .wrap .w1 {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
	}

	.illustration .text.section1 .wrap .w2 {
		position: relative;
		top: auto;
		left: auto;
	}

	.illustration .text.section1 .wrap .w1 .ic img {
		width: 50px;
	}

	.illustration .section1 .power {
		padding-left: 0;
		padding-right: 20px;
		text-align: right;
	}

	.illustration .section1 .arrow {
		left: auto;
		right: 0;
	}

	.comtxt .t1 {
		font-size: 24px;
	}
	.interaction .comtxt .t1{
		max-width: 230px;
	}
	.interaction .comtxt .t2{
		max-width: 280px;
	}
	.comtxt .t2 {
		font-size: 12px;
	}

	.illustration-img {
		width: 100%;
	}

	.illustration .text .power .t1 {
		font-size: 12px;
	}

	/*.illustration .text .icon li .zi,*/
	.interaction .icon li .zi,
	.rotor .mark .icon li .zi,
	.materials .icon li .zi {
		font-size: 12px;
		white-space: nowrap;
	}

	.illustration .text.section2 .icon img {
		width: 50px;
	}

	.illustration .text {
		width: 100%;
	}

	.illustration .text.section2 .w4 {
		height: 120px;
		font-size: 12px;
	}

	.illustration .text.section2 .w5 {
		height: 30px;
	}

	.illustration .text.section2 .w6 {
		height: 90px;
	}

	.illustration .text.section1 .power .t2 {
		font-size: 70px;
	}

	.illustration .text.section1 .power .t1 {
		display: inline-block;
		line-height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background-image: linear-gradient(to right, #00ECF6, #0280E6);
	}

	.illustration .section2 .arrow {
		/*right: 20%;
		width: 10%;*/
		right: -10%;
    	width: 15%;
	}

	.illustration .text.section2 .w8 {
		font-size: 12px;
	}

	.illustration .text.section3 .w1,
	.illustration .text.section3 .w2 {
		width: 100%;
	}

	.illustration .text.section3 .w4 {
		height: 90px;
		font-size: 12px;
	}

	.illustration .text.section3 .w5 {
		height: 30px;
	}

	.illustration .text.section3 .w6 {
		height: 120px;
	}

	.illustration .text.section3 .w8 {
		margin-right: 15%;
	}

	.illustration .text.section4 .ic img {
		width: 50px;
	}

	.plate_txt {
		top: 54%;
		left: 41%;
		font-size: 14px;
		padding-left: 30vw;
	}

	.plate_txt .mBox{
		line-height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		white-space: nowrap;
		background-image: linear-gradient(to right, #00ECF6, #0280E6);
	}

	.plate_txt:after {
		top: 9px;
		width: 29vw;
	}

	.plate_txt:before {
		width: 10px;
		height: 10px;
		background-size: cover;
		top: 5px;
	}

	.plate_txt span,
	.interaction .a6 span {
		display: block;
		font-size: 14px;
		margin-left: 0;
	}
	
	.plate_txt span{
		color: #fff;
		display: inline-block;
	}
	.structure_txt ul li{
		font-size: 12px;
	}
	.structure_txt ul li.s6 {
		top: 40%;
		right: 5%;
		padding-bottom: 10vh;
		text-align: right;
	}

	.structure_txt ul li.s6.right:after {
		left: auto;
	}

	.structure_txt ul li.s6 span {
		margin-left: 0;
		margin-right: 5px;
		text-align: left;
		max-width: 70px;
	}

	.structure_txt ul li.s6.right:before {
		left: auto;
		right: -5px;
	}

	.structure_txt ul li:before {
		left: -5px;
		width: 10px;
		height: 10px;
		background-size: cover;
	}

	.structure_txt ul li.s2 {
		padding-top: 25vh;
	}

	.structure_txt ul li.s3 {
		top: 27%;
		left: 53%;
		padding-bottom: 17vh;
	}

	.structure_txt ul li.s4 {
		padding-top: 12vh;
	}

	.structure_txt ul li.s5 {
		top: 31%;
		left: 70%;
	}

	.interaction .icon .ic img {
		width: 50px;
	}

	.rotor .mark .txt {
		font-size: 16px;
		padding-right: 10px;
	}

	.rotor .mark .txt span {
		font-size: 16px;
	}

	.rotor .mark .txt .s-1 {
		font-size: 16px;
	}

	.rotor .mark {
		top: 55%;
		left: 3%;
	}

	.rotor .icon {
		bottom: -5%;
	}

	.rotor .icon .ic img {
		width: 50px;
	}

	.materials .trait ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.materials .trait ul li {
		max-width: 45%;
	}

	.materials .trait {
		margin-top: 80%;
		padding-bottom: 30px;
	}

	.materials .icon li {
		margin-right: 0;
	}

	.materials .icon .ic img {
		width: 50px;
	}
	.interaction .a4{
		right: 16%;
	}
	.interaction .a6 {
		font-size: 14px;
	}

	.interaction .a6 span {
		font-size: 24px;
	}

	.axis_txt {
		top: 39.5%;
		width: 38%;
	}

	.illustration .section5.text{
		top: 5%;
		justify-content: flex-start;
		text-align: left;
	}

	.illustration .text.section5 .comtxt .t2{
		text-align: left;
	}

	.materials .comtxt .t2 li i{
		top: 5px;
	}

	.materials .comtxt .t2{
		font-size: 10px;
	}

	.materials .icon{
		width: 100%;
	}

	.interaction .line::after{
		top: -5px;
		width: 10px;
		height: 10px;
		background-size: cover;
		right: -4px;
	}

	.rotor .mark .txt::after{
		right: -5px;
		width: 10px;
		height: 10px;
		background-size: cover;
	}

	.tabbb.active, .tabbb.active .tabss, .tabbb.active .naaavbg{
		height: 40px;
	}

	.tabss .tabs li a{
		font-size: 14px;
		line-height: 40px;
	}
	
	.mBox .video .icon-play{
		width: 48px;
	}
	.interaction .line.line-1{
		left: 20%;
		height: 46%;
	}
	.interaction .line.line-2{
		right: 20%;
	}
	.structure_txt ul li.s2{
		top: 45%;
		padding-top: 12vh;
	}
	.structure_txt ul li.s3{
		padding-bottom: 12vh;
	}
	.structure_txt ul li.s5{
		padding-bottom: 4vh;
	}
	.structure_txt ul li.s6{
		top: 45%;
		padding-bottom: 1vh;
	}
	.structure_txt ul li.s2 span .mBox,
	.structure_txt ul li.s3 span,
	.structure_txt ul li.s4 span .mBox,
	.structure_txt ul li.s5 span .mBox,
	.structure_txt ul li.s6 span .mBox{
		max-width: 110px;
	}
	.interaction .comtxt .t1,
	.interaction .comtxt .t2{
		max-width: 100%;
	}
	.rotor .mark .txt{
		max-width: 135px;
	}
}
@media screen and (max-width: 320px){
	.interaction .line.line-1{
		height: 42%;
	}
}