
.fl{
	float: left;
}
.fr{
	float: right;
}
.fsize40{
	font-size: 0.4rem;
}
.moduleBox{
	max-width: 790px;
	background: #f9f9fc;
	color: #333;
	font-size: 0.22rem;
}
.moduleBox .module{
	padding: 0 0.58rem;
}
.moduleBox .orangeText{
	color: #f88a14;
}
.moduleBox .titleStyle1{
	position: relative;
	z-index: 1;
	margin-bottom: 0.36rem;
	line-height: 1.16;
	font-size: 0.6rem;
	font-weight: 400;
}
.moduleBox .titleStyle1:after{
	content: '';
	margin-top: 0.36rem;
	display: block;
	width: 0.46rem;
	height: 0.06rem;
	background: #000;
}
.moduleBox .titleStyle1.textCenter:after{
	margin-left: auto;
	margin-right: auto;
}
.moduleBox .titleStyle1.textRight:after{
	margin-left: auto;
}
.moduleBox .textLeft{
	text-align: left;
}
.moduleBox .textRight{
	text-align: right;
}
.moduleBox .btn_style1{
	display: inline-block;
	width: 2.24rem;
	height: 0.5rem;
	line-height: 0.5rem;
	margin-top: 0.1rem;
	margin-bottom: 0.32rem;
	border-radius: 0.25rem;
	padding: 0 0.1rem;
	background-color: #fff;
	box-shadow: #d6d6d6 0 0 0.1rem;
	color: #f78e1d;
	font-size: 0.3rem;
	text-align: left;
}
.moduleBox .btn_style1 .icon{
	display: inline-block;
	margin-right: 0.16rem;
	vertical-align: text-top;
	width: 0.38rem;
	height: 0.38rem;
}


.moduleBox .module1{
	width: 100%;
	height: 12rem;
	background: url(../images/img1.jpg);
	background-size: 100% auto;
}
.moduleBox .module1 .textLayout1{
	margin-top: 0.54rem;
}

.moduleBox .module2{
	padding-top: 0.46rem;
	min-height: 11.56rem;
	background: url(../images/bg1.png) no-repeat left 3.85rem;
	background-size: 1.5rem auto;
}
.moduleBox .module2 .textLayout1{
	color: #666;
	line-height: 1.45;
}
.moduleBox .module2 .howGoodBox{
	position: relative;
	right: -0.56rem;
	float: right;
	margin-top: 1.44rem;
	width: 6.45rem;
	height: 6.56rem;
	background: url(../images/bg2.png) no-repeat center;
	background-size: 100%;
}
.moduleBox .module2 .goodlist li{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	margin-left: -0.64rem;
	margin-top: -0.74rem;
	width: 1.38rem;
	height: 1.38rem;
	background: #fdfdfe;
	padding: 0.1rem;
	border-radius: 1.38rem;
	overflow: hidden;
	text-align: center;
	box-shadow: 0.08rem -0.03rem 0.01rem 0.01rem rgba(95,95,117,0.27),inset -0.03rem -0.02rem 0.08rem 0.02rem rgba(0,0,0,0.1);
}
.moduleBox .module2 .goodlist li:nth-of-type(1){
	transform: translate(-3.1rem , 1.4rem);
}
.moduleBox .module2 .goodlist li:nth-of-type(2){
	transform: translate(-2.7rem , -1.2rem);
	box-shadow: 0.09rem 0px  0.01rem 0.01rem rgba(95,95,117,0.27),inset -0.03rem -0.02rem 0.08rem 0.02rem rgba(0,0,0,0.1);
}
.moduleBox .module2 .goodlist li:nth-of-type(3){
	transform: translate(-0.6rem , -3.2rem);
	box-shadow: 0.05rem 0.08rem 0.01rem 0.01rem rgba(95,95,117,0.27),inset -0.03rem -0.02rem 0.08rem 0.02rem rgba(0,0,0,0.1);
}
@-webkit-keyframes spreadEffect1{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform: translate(-3.1rem , 1.4rem);
		transform: translate(-3.1rem , 1.4rem);
	}
}
@keyframes spreadEffect1{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform: translate(-3.1rem , 1.4rem);
		transform: translate(-3.1rem , 1.4rem);
	}
}
@-webkit-keyframes spreadEffect2{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform: translate(-2.7rem , -1.2rem);
		transform: translate(-2.7rem , -1.2rem);
	}
}
@keyframes spreadEffect2{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform: translate(-2.7rem , -1.2rem);
		transform: translate(-2.7rem , -1.2rem);
	}
}
@-webkit-keyframes spreadEffect3{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform:  translate(-0.6rem , -3.2rem);
		transform:  translate(-0.6rem , -3.2rem);
	}
}
@keyframes spreadEffect3{
	0% {
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
	}
	100% {
		-webkit-transform:  translate(-0.6rem , -3.2rem);
		transform:  translate(-0.6rem , -3.2rem);
	}
}
.spreadEffect1{
	-webkit-animation-name: spreadEffect1;
	animation-name: spreadEffect1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.spreadEffect2{
	-webkit-animation-name: spreadEffect2;
	animation-name: spreadEffect2;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.spreadEffect3{
	-webkit-animation-name: spreadEffect3;
	animation-name: spreadEffect3;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.moduleBox .module2 .goodlist .imgBox{
	margin: 0 auto 0.02rem;
	width: 0.5rem;
}
.moduleBox .module2 .goodlist .imgBox{
	margin: 0 auto 0.02rem;
	width: 0.5rem;
}
.moduleBox .module2 .goodlist .zh{
	color: #fb791f;
	font-size: 0.24rem;
	font-weight: 700;
}
.moduleBox .module2 .goodlist .en{
	margin-top: 0.08rem;
	font-size: 0.12rem;
	color: #666;
}
.moduleBox .module2 .imgLayout1{
	position: absolute;
	right: 0;
	top: 0.8rem;
	height: 5.71rem;
}

.moduleBox .module3{
	min-height: 9.9rem;
	padding-top: 0.16rem;
	background: url(../images/bg3.png) no-repeat 3.1rem 2.1rem;
	background-size: 100% auto;
}
.moduleBox .module3 .textLayout1{
	width: 4.4rem;
	line-height: 1.4;
}
.moduleBox .module3 .imgLayout1{
	position: relative;
	left: -0.42rem;
	margin-top: 0.32rem;
	width: 7.45rem;
}

.moduleBox .module4{
	margin-top: -0.8rem;
	padding-top: 1.55rem;
	min-height: 13.9rem;
	background: url(../images/bg4.png) no-repeat -1.9rem top,url(../images/bg5.png) no-repeat 5.33rem bottom,url(../images/bg6.png) no-repeat left 4.56rem;
	background-size: 4.23rem auto,2.05rem auto, 100% auto;
}
.moduleBox .module4 .textLayout1{
	line-height: 1.4;
}
.moduleBox .module4 .imgLayout1{
	margin-top: 2.16rem;
	margin-left: -0.58rem;
	width: 7.9rem;
	height: 9.22rem;
	padding-top: 1.77rem;
}
.moduleBox .module4 .imgLayout1>img{
	width: 5.66rem;
	margin: 0 auto;
}

.moduleBox .module5{
	position: relative;
	height: 13.1rem;
	padding-top: 0.5rem;
	background: url(../images/bg5.png) no-repeat -1.36rem bottom;
	background-size: 3.63rem auto;
}
.moduleBox .module5 .textLayout1{
	width: 4.4rem;
	line-height: 1.4;
}
.moduleBox .module5 .imgLayout1{
	position: absolute;
	right: 0;
	margin-top: 0.78rem;
	width: 7.2rem;
}

.moduleBox .module6{
	margin-top: -1.96rem;
}
.moduleBox .module6 .skill{
	margin-top: 0.34rem;
	padding-bottom: 0.96rem;
	min-height: 3.18rem;
}
.moduleBox .module6 .skill{
	margin-top: 0.34rem;
}
.moduleBox .module6 .skill li{
	margin-bottom: 0.06rem;
	overflow: hidden;
	background: url(../images/icon8.png) no-repeat right 0.38rem;
	background-size: 0.08rem auto;
}
.moduleBox .module6 .skill .imgBox{
	float: left;
	align-items: center;
	width: 3.1rem;
}
.moduleBox .module6 .skill .textBox{
	float: right;
	width: 3.1rem;
	padding-top: 0.56rem;
	padding-right: 0.4rem;
}
.moduleBox .module6 .skill .textBox .title{
	font-size: 0.4rem;
	font-weight: 700;
}
.moduleBox .module6 .skill li:nth-of-type(2n){
	background-position: left 0.68rem
}
.moduleBox .module6 .skill li:nth-of-type(2n) .imgBox{
	float: right;
}
.moduleBox .module6 .skill li:nth-of-type(2n) .textBox{
	float: left;
	padding-left: 0.25rem;
	padding-right: 0.15rem;
}
.moduleBox .module6 .skill .textBox p{
	margin-top: 0.2rem;
	line-height: 1.4;
}

.moduleBox .module7,.moduleBox .module8{
	padding-bottom: 1.0rem;
}
.moduleBox .module7 .layoutBox,.moduleBox .module8 .layoutBox{
	border-top: 1px dashed #98999a;
	padding-top: 0.88rem;
}
.moduleBox .module7 .titleEn,.moduleBox .module8 .titleEn{
	margin-top: 0.16rem;
}
.moduleBox .module7 .imgLayout1{
	margin: 1.04rem 0 0 0.3rem;
	max-width: none;
	width: 6.95rem;
}
.moduleBox .module7 .textLayout1{
	margin: 0.7rem auto 0;
}
.moduleBox .module7 .textLayout1 .remarks{
	display: block;
	margin-top: 0.16rem;
	color: #282828;
}
.moduleBox .module8{
	background: url(../images/bg8.png) no-repeat 7.0rem 0.4rem,url(../images/bg1.png) no-repeat left 6.86rem;
	background-size: 2.07rem , 1.5rem auto;
}
.moduleBox .module8 .imgLayout1{
	width: 5.58rem;
	margin: 0.7rem auto 0;
}
.moduleBox .module8 .imgLayout2{
	width: 5.61rem;
	margin: 0.48rem auto 0;
}


/*魔方购买按钮*/
.buy-link {
position: fixed;
bottom: 0.5rem;
right: 15%;
z-index: 100;
font-size: 16px;
}

@media (max-width: 768px) {
	.buy-link {
		right: 0.5rem;
		bottom: 120px;
	}
}

ul.cube-link *, ul.cube-link *:before, ul.cube-link *:after {
box-sizing: border-box;
}

ul.cube-link * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

ul.cube-link *:focus {
outline: none !important;
}

ul.cube-link {
-webkit-transform: translateZ(60px);
transform: translateZ(60px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
width: auto;
}

ul.cube-link .link {
position: relative;
width: 60px;
height: 60px;
-webkit-perspective: 400px;
perspective: 400px;
perspective-origin: 200px center;
}
ul.cube-link a {
-webkit-transform-origin: 30px 30px -30px;
transform-origin: 30px 30px -30px;
display: block;
position: absolute;
z-index: 1;
-webkit-transform: translateZ(24px);
transform: translateZ(24px);
width: 100%;
height: 100%;
}
ul.cube-link a:nth-child(1) {
top: 0;
left: 0;
height: 50%;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
ul.cube-link a:nth-child(1):hover ~ .link .cube, ul.cube-link a:nth-child(1):focus ~ .link .cube {
-webkit-transform: rotateX(-0.5turn);
transform: rotateX(-0.5turn);
}
ul.cube-link a:nth-child(1):hover ~ .link .cube div:nth-child(6), ul.cube-link a:nth-child(1):focus ~ .link .cube div:nth-child(6) {
-webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(180deg) translateZ(60px);
}
ul.cube-link a:nth-child(2) {
top: 0;
right: 0;
width: 50%;
-webkit-clip-path: polygon(100% 100%, 0 50%, 100% 0);
clip-path: polygon(100% 100%, 0 50%, 100% 0);
}
ul.cube-link a:nth-child(2):hover ~ .link .cube, ul.cube-link a:nth-child(2):focus ~ .link .cube {
-webkit-transform: rotateY(-0.5turn);
transform: rotateY(-0.5turn);
}
ul.cube-link a:nth-child(3) {
bottom: 0;
right: 0;
height: 50%;
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
ul.cube-link a:nth-child(3):hover ~ .link .cube, ul.cube-link a:nth-child(3):focus ~ .link .cube {
-webkit-transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
ul.cube-link a:nth-child(3):hover ~ .link .cube div:nth-child(6), ul.cube-link a:nth-child(3):focus ~ .link .cube div:nth-child(6) {
-webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(180deg) translateZ(60px);
}
ul.cube-link a:nth-child(4) {
bottom: 0;
left: 0;
width: 50%;
-webkit-clip-path: polygon(0 100%, 0 0, 100% 50%);
clip-path: polygon(0 100%, 0 0, 100% 50%);
}
ul.cube-link a:nth-child(4):hover ~ .link .cube, ul.cube-link a:nth-child(4):focus ~ .link .cube {
-webkit-transform: rotateY(0.5turn);
transform: rotateY(0.5turn);
}

ul.cube-link a:hover, ul.cube-link a:focus{
z-index: 2;
-webkit-transform: translateZ(36px);
transform: translateZ(36px);
width: 100% !important;
height: 100% !important;
-webkit-clip-path: none !important;
clip-path: none !important;
-webkit-transition: all 100ms ease 500ms;
transition: all 100ms ease 500ms;
}

ul.cube-link .cube {
-webkit-transform-origin: 30px 30px -30px;
transform-origin: 30px 30px -30px;
position: relative;
z-index: 0;
display: block;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.cube-link .cube div {
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: white;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
}
ul.cube-link .cube div b{
	position: relative;
	z-index: 2;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}
ul.cube-link .cube div:after{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	left: calc(50% - 1px);
	top: 0;
	width: 2px;
	height: 100%;
	background: rgba(0,0,0,0.2);
}
ul.cube-link .cube div:before{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(0,0,0,0.2);
}
ul.cube-link .cube div:nth-child(1) {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotateX(90deg) translateY(-60px);
transform: rotateX(90deg) translateY(-60px);
}
ul.cube-link .cube div:nth-child(2) {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(-90deg) translateY(60px);
transform: rotateX(-90deg) translateY(60px);
}
ul.cube-link .cube div:nth-child(3) {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotateY(-90deg) translateX(-60px);
transform: rotateY(-90deg) translateX(-60px);
}
ul.cube-link .cube div:nth-child(4) {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotateY(90deg) translateX(60px);
transform: rotateY(90deg) translateX(60px);
}
ul.cube-link .cube div:nth-child(5) {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
ul.cube-link .cube div:nth-child(6) {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotateY(180deg) translateZ(60px);
transform: rotateY(180deg) translateZ(60px);
}
ul.cube-link .cube.codepen div:nth-child(1) {
background: #FF1400;
}
ul.cube-link .cube.codepen div:nth-child(2) {
background: #FFA300;
}
ul.cube-link .cube.codepen div:nth-child(3) {
background: #FFF;
}
ul.cube-link .cube.codepen div:nth-child(4) {
background: #FDFF00;
}
ul.cube-link .cube.codepen div:nth-child(5) {
background: #0085F7;
}
ul.cube-link .cube.codepen div:nth-child(6) {
background: #00C700;
}

