.header>.backgroundImg {
	background: linear-gradient(135deg, rgba(57, 58, 61, 1) 0, rgba(57, 58, 61, 1) 20%, rgba(28, 28, 28, 1) 80%, rgba(28, 28, 28, 1) 100%);
	width: 100%;
	height: 48rem;
}

.header>.content>.headerBlock {
	position: absolute;
	top: 325px;
	right: 0;
}

.header>.content>.headerBlock>.title {
	height: 81px;
	overflow: hidden;
	font-size: 61px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 2px;
	margin-bottom: 38px;
}


.header>.content>.headerBlock>.btnList .block {
	width: 122px;
	height: 45px;
	border: 1px solid #FFFFFF;
	font-size: 18px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 45px;
	text-align: center;
	float: left;
	margin-left: 19px;
	cursor: pointer;
}

.header>.content>.headerBlock>.btnList .block:first-of-type {
	margin-left: 0;
}

.header>.content>.headerBlock>.btnList .block.active {
	position: relative;
	background: #FFFFFF;
	color: #272829;
}

.header>.content>.headerBlock>.btnList .block.active>em {
	display: block;
	border-width: 7px;
	position: absolute;
	bottom: -15px;
	left: 25px;
	border-style: solid dashed dashed;
	border-color: #FFFFFF transparent transparent;
	font-size: 0;
	line-height: 0;
}

.header>.content>.headerBlock>.btnList .info {
	margin-top: 31px;
	font-size: 17px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #999999;
}


/* 主体 */
.body {
	margin-top: 48rem;
	padding: 6.3125rem 0 6.625rem;
	width: 100%;
	background-color: #FFFFFF;
}

.body>.paragraph {
	display: block;
	width: 87.5rem;
	margin: 0 auto;
}

.body>.paragraph.item1>.title {
	font-size: 56px;
	font-family: PingFang SC;
	font-weight: 100;
	color: #333333;
}

.body>.paragraph.item1>.desc {
	margin: 1.5625rem 0 1.6875rem;
	font-size: 22px;
	font-family: PingFang SC;
	font-weight: 100;
	color: #333333;
}

.body>.paragraph.item1>a>div {
	width: 690px;
	height: 404px;
	box-sizing: border-box;
	float: left;
	margin-top: 20px;
	-webkit-transition: 0.5s;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 690px 404px;
	padding-top: 55px;
	padding-left: 48px;
	font-family: PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
}

.body>.paragraph.item1>a:nth-child(2n+1)>div {
	margin-right: 20px;
}

.body>.paragraph.item1>a>div:hover {
	background-size: 759px 444.4px;
}

.body>.paragraph.item1>a>div>.enTitle {
	font-size: 24px;
}

.body>.paragraph.item1>a>div>.chTitle {
	margin-top: 16px;
	font-size: 30px;
	letter-spacing: 3px;
}
.body>.paragraph.item1>a>div>hr {
	margin-top: 28px;
	width: 107px;
	height: 1px;
	background-color: #FFFFFF;
}

.body>.paragraph.item1>a>div>.desc {
	margin-top: 177px;
	font-size: 14px;
	letter-spacing: 2px;
}


.body>.paragraph.item2>.title {
	margin-top: 7rem;
	font-size: 56px;
	font-family: PingFang SC;
	font-weight: 100;
	color: #333333;
	letter-spacing: 5px;
}

.body>.paragraph.item2>.desc {
	margin: 25px 0 74px;
	font-size: 22px;
	font-family: PingFang SC;
	font-weight: 100;
	color: #333333;
}

.body>.paragraph.item2>.block {
	width: 33%;
	float: left;
	border-left: 1px solid #e6e6e6;
}

.body>.paragraph.item2>.block:last-of-type {
	border-right: 1px solid #e6e6e6;
}

.body>.paragraph.item2>.block>img {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto;
}

.body>.paragraph.item2>.block>p {
	margin-top: 65px;
	text-align: center;
	font-size: 45px;
	font-family: PingFang SC;
	font-weight: 100;
	color: #A5A5A5;
}

/* banner动画 */

@keyframes slideDown {
	from {
		margin-top: -500px;
		opacity: 1;
	}

	to {
		margin-top: 0px;
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes slideDown {
	from {
		margin-top: -500px;
		opacity: 1;
	}

	to {
		margin-top: 0px;
		opacity: 1;
	}
}

@keyframes animationShadow {
	from {
		margin-top: 50px;
		margin-left: 50px;
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0;
	}

	to {
		margin-top: 0px;
		margin-left: 0px;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes animationShadow {
	from {
		margin-top: 50px;
		margin-left: 50px;
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0;
	}

	to {
		margin-top: 0px;
		margin-left: 0px;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes enlarge {
	from {
		transform: scale(0.9, 0.9);
		opacity: 0;
	}

	to {
		transform: scale(1, 1);
		opacity: 1;
	}
}

@keyframes enlarge {
	from {
		transform: scale(0.9, 0.9);
		opacity: 0;
	}

	to {
		transform: scale(1, 1);
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes enlarge_slideUp {
	0% {
		transform: scale(0.9, 0.9);
		opacity: 0;
		margin-top: 0px;
	}

	50% {
		transform: scale(1, 1);
		opacity: 1;
		margin-top: 0px;
	}

	75% {
		transform: scale(1, 1);
		opacity: 1;
		margin-top: 0px;
	}

	100%{
		transform: scale(1, 1);
		margin-top: -20px;
		opacity: 1;
	}
}

@keyframes enlarge_slideUp {
	0% {
		transform: scale(0.9, 0.9);
		opacity: 0;
		margin-top: 0px;
	}

	50% {
		transform: scale(1, 1);
		opacity: 1;
		margin-top: 0px;
	}

	75% {
		transform: scale(1, 1);
		opacity: 1;
		margin-top: 0px;
	}

	100%{
		transform: scale(1, 1);
		margin-top: -20px;
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes enlargeShadow {
	from {
		transform: scale(1, 1);
		opacity: 0;
	}

	to {
		transform: scale(1.3, 1.3);
		opacity: 0.8;
	}
}

@keyframes enlargeShadow {
	from {
		transform: scale(1, 1);
		opacity: 0;
	}

	to {
		transform: scale(1.3, 1.3);		
		opacity: 0.8;
	}
}

#banner_animation img {
	position: absolute;
	transform-origin: 50% 50%;
	opacity: 0;
	animation-fill-mode: forwards;
}

#banner_animation .slideDown {
	animation-duration: 2s;
	-webkit-animation-name: slideDown;
	animation-name: slideDown;
}

#banner_animation .enlarge{
	animation-duration: 1s;
	-webkit-animation-name: enlarge;
	animation-name: enlarge;
}

#banner_animation .enlarge_slideUp{
	animation-duration: 2s;
	-webkit-animation-name: enlarge_slideUp;
	animation-name: enlarge_slideUp;
}

#banner_animation .animationShadow {
	animation-duration: 2s;
	-webkit-animation-name: animationShadow;
	animation-name: animationShadow;
}

#banner_animation .enlargeShadow {
	animation-duration: 0.5s;
	-webkit-animation-name: enlargeShadow;
	animation-name: enlargeShadow;
}

#banner_animation #banner_book {
	top: 345px;
	left: -170px;
	width: 460px;
	animation-delay: 0s;
}

#banner_animation #banner_book_shadow {
	top: 343px;
	left: -173px;
	width: 475px;
	animation-delay: 0s;
}

#banner_animation #banner_wacom {
	top: 204px;
	left: 237px;
	width: 360px;
	animation-delay: 0.75s;
}

#banner_animation #banner_wacom_shadow {
	top: 204px;
	left: 235px;
	width: 385px;
	animation-delay: 0.75s;
}

#banner_animation #banner_plant {
	top: 127px;
	left: 115px;
	width: 93px;
	animation-delay: 1s;
}

#banner_animation #banner_plant_shadow {
	top: 295px;
	left: 125px;
	width: 280px;
	animation-delay: 1s;
}

#banner_animation #banner_cup {
	top: 573px;
	left: 134px;
	width: 180px;
	animation-delay: 1.25s;
}

#banner_animation #banner_cup_shadow {
	top: 600px;
	left: 160px;
	width: 270px;
	animation-delay: 1.25s;
}

#banner_animation #banner_pen {
	top: 363px;
	left: 207px;
	width: 120px;
	animation-delay: 0.25s;
}

#banner_animation #banner_pen_shadow {
	top: 365px;
	left: 200px;
	width: 150px;
	animation-delay: 0.25s;
}

#banner_animation #banner_ipad {
	top: 444px;
	left: 255px;
	width: 396px;
	animation-delay: 0.75s;
}

#banner_animation #banner_ipad_shadow {
	top: 446px;
	left: 256px;
	width: 410px;
	animation-delay: 0.75s;
}

#banner_animation #banner_ipad_screen {
	top: 460px;
	left: 284px;
	width: 340px;
	animation-delay: 2.75s;
}

#banner_animation .banner_slider {
	top: 472px;
    left: 305px;
    width: 212px;
	animation-delay: 2.75s;
}

#banner_animation .banner_slider_Shadow {
	top: 472px;
    left: 305px;
    width: 212px;
	animation-delay: 4.25s;
}

/* #banner_animation #banner_ipad_screen_banner {
	top: 463px;
	left: 290px;
	width: 255px;
} */
#banner_animation #banner_stylus {
	top: 193px;
	left: 493px;
	width: 144px;
	animation-delay: 0.75s;
}

#banner_animation #banner_stylus_shadow {
	top: 192px;
	left: 487px;
	width: 175px;
	animation-delay: 0.75s;
}

#banner_animation #banner_notebook {
	top: 380px;
	left: 490px;
	width: 200px;
	animation-delay: 0.5s;
}

#banner_animation #banner_notebook_shadow {
	top: 386px;
	left: 488px;
	width: 220px;
	animation-delay: 0.5s;
}




@keyframes titleShow {
	from {
		margin-top: 81px;
	}

	to {
		margin-top: 0px;
	}
}

/* Safari and Chrome */
@-webkit-keyframes titleShow {
	from {
		margin-top: 81px;
	}

	to {
		margin-top: 0px;
	}
}

.header>.content>.headerBlock>.title>span {
	display: block;
	margin-top: 81px;
	animation-duration: 2s;
	/* animation-delay: 3s; */
	animation-fill-mode: forwards;
	-webkit-animation-name: titleShow;
	animation-name: titleShow;
}



@keyframes btnListShow {
	from {
		margin-left: 567px;
	}

	to {
		margin-left: 0px;
	}
}

/* Safari and Chrome */
@-webkit-keyframes btnListShow {
	from {
		margin-left: 567px;
	}

	to {
		margin-left: 0px;
	}
}

.header>.content>.headerBlock>.btnList {
	width: 567px;
	overflow: hidden;
}

.header>.content>.headerBlock>.btnList>.btnListShow {
	width: 570px;
	margin-left: 570px;
	animation-duration: 2s;
	/* animation-delay: 5s; */
	animation-delay: 2s;
	animation-fill-mode: forwards;
	-webkit-animation-name: btnListShow;
	animation-name: btnListShow;
}