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;

}



a {

	color: #333;

	/* display: inline-block; */

}



a:link {

	text-decoration: none

}



a:visited {

	text-decoration: none

}



a:hover {

	text-decoration: none;



}



a:active {

	text-decoration: none

}



li {

	list-style: none;

}



.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;

}



.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;

}

.conwidth {

	max-width: 1190px;

	width: 90%;

	margin: auto;

}



.container {

	margin-right: auto;

	margin-left: auto;



}



.container:before,

.container:after {

	content: " ";

	display: table

}



.container:after {

	clear: both

}



/*header*/

.header {

	/*position: fixed;

	left: 0;

	top: 0;

	z-index: 12;*/

	position: relative;

	width: 100%;

	background: #141414;

	z-index: 10;

}





.header .logo {

	float: left;

}



.header .logo a {

	line-height: 80px;

}



.header .box {

	float: right;

}



.header .nav {

	float: left;

}



.header .nav>ul>li {

	position: relative;

	float: left;

	min-width: 140px;

	text-align: center;

	transition: all 0.3s;

}



.header .nav>ul>li:hover{

	background-color: #404041;

}



.header .nav>ul>li>a {

	color: #d4d4d4;

	font-size: 15px;

	font-weight: bold;

	line-height: 80px;

 font-family: "Helvetica Neue",'Microsoft Yahei','����', Arial, sans-serif;;

}



.header .nav>ul>li .dropDown {

	position: absolute;

	top: 100%;

	left: 0;

	min-width: 100%;

	padding: 0 2px;

	background-color: #fff;

	box-sizing: border-box;

	display: none;

}



.header .nav>ul>li .dropDown>a {

	display: block;

	color: #666;

	font-size: 14px;

	line-height: 70px;

	text-align: center;

	text-decoration: none;

	font-weight: 400;

	transition: all 0.3s;

}



.header .nav>ul>li .dropDown>a:hover {

	background-color: #a8a9a5;

	color: #fff;

}



.header .nav>ul>li .dropDown2 {

	padding: 0;

}



.header .dropDown2 .wrap{

	display: flex;

	align-items: stretch;

	min-width: 703px;

	min-height: 432px;

}



.header .dropDown2 .item {

	display: none;

}



.header .dropDown2 .lNav {

	width: 140px;

	padding: 0 2px;

	border-right: 1px solid #ddd;

	box-sizing: border-box;

}



.header .dropDown2 .lNav>a {

	display: block;

	color: #666;

	font-size: 14px;

	line-height: 70px;

	text-align: center;

	text-decoration: none;

	font-weight: 400;

	transition: all 0.3s;

}



.header .dropDown2 .lNav>a.active{

	background-color: #a8a9a5;

	color: #fff;

}



.header .dropDown2 .lNav>a:hover {

	background-color: #a8a9a5;

	color: #fff;

}



.header .dropDown2 .cNav {

	width: 110px;

	padding: 0 2px;

	border-right: 1px solid #ddd;

	box-sizing: border-box;

}



.header .dropDown2 .cNav .item>a {

	display: block;

	color: #666;

	font-size: 14px;

	line-height: 70px;

	text-align: center;

	text-decoration: none;

	font-weight: 400;

	transition: all 0.3s;

}



.header .dropDown2 .cNav .item>a:hover {

	background-color: #a8a9a5;

	color: #fff;

}



.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;

	background-color: rgba(255, 255, 255, 0.6);

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);

}



.naaavbg {

	position: relative;

	width: 100%;

	margin: 0 auto;

}



.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: 24px;

	max-width: 50%;

	font-family: "Helvetica Neue",'Microsoft Yahei','����', Arial, sans-serif;

}



.tabss ul {

	padding: 0;

	margin: 0;

}



.tabss ul li {

	float: left;

	margin: 0 15px;

	box-sizing: border-box;

}



.tabss ul li a {

	font-size: 16px;

	text-decoration: none;

	color: #58595b;

}



.tabss ul li.activem a {

	color: #00A0E9;

	font-weight: bold;

}



#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;

}



/**/


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


.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 {

	color: #1faaff;

	font-size: 48px;

	margin-bottom: 15px;

	font-family: PingFangBold;

}



.part1 .text .title .t2 {

	color: #fff;

	font-size: 18px;

	line-height: 2;

	max-width: 560px;

	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: 440px;

	text-align: left;

}



.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: 48px;

	margin-bottom: 10px;

	font-family: PingFangBold;

}



.comtxt .t2 {

	color: #ffffff;

	font-size: 18px;

	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: 17%;

	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: 380px;

}



.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;

	margin-right: 10%;

}



.illustration .text.section2 .w8 {

	display: inline-block;

	min-width: 60px;

	padding: 3px 12px;

	color: #000;

	font-size: 16px;

	background-color: #fff;

	border-radius: 13px;

}



/**/

.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;

	background-color: #fff;

	border-radius: 13px;

	margin-left: 4.7%;

}



.illustration .text.section4 .comtxt .t2 {

	max-width: 380px;

	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/img12.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;

}



.illustration .text.center {

	text-align: center;

}



.illustration .text.section5 .comtxt .t2 {

	max-width: 440px;

	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: 10%;

	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/img12.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: 430px;

	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: 36px;

	font-family: PingFangBold;

}



.interaction .a6 span {

	color: #f3801e;

	font-size: 36px;

}



.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: 500px;

	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;

}



.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: 36px;

}



.rotor .mark .txt .s-1 {

	font-size: 24px;

	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: 10%;

	padding-bottom: 80px;

	background: #000000;

	min-height: 1440px;

	box-sizing: border-box;

	overflow: hidden;

}



.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 {

	text-align: center;

	

    max-width: 720

px

;

    text-align: right;

    margin-left: auto;



}



.materials .comtxt .t2 li {}



.materials .comtxt .t2 li span {

	position: relative;

	padding-left: 10px;

}



.materials .comtxt .t2 li i {

	position: absolute;

	left: 0;

	top: 9px;

	width: 7px;

	height: 7px;

	border-radius: 50%;

	background: #ffffff;

}



.materials .icon {

	position: absolute;

	left: 50%;

	bottom: 20%;

	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: 80px;

}



.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: 18px;

	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 .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: 19px;

		line-height: 64px;

	}



	.tabss ul li a {

		line-height: 64px;

	}



	.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%;

	}*/

}



@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 .icon {

		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/img12.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: -35px;

	}

	

	.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/img12.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%;

	}



	.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.s6 {

		top: 40%;

		right: 5%;

		padding-bottom: 10vh;

		text-align: right;

	}



	.structure_txt ul li.s6.right:after {

		left: auto;

		right: 0;

	}



	.structure_txt ul li.s6 span {

		text-align: left;

		margin-left: 0;

		margin-right: 5px;

	}



	.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%;

	}

}

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

	.interaction .line.line-1{

		height: 42%;

	}

}