.st-outer {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
/*	min-height: 100%;*/
}

/*changed for one image*/
.st-layer {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.st-layer-img {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
}

.st-layer1 {
	position: absolute;
	z-index: 1;
	background-color: #F9F7D7;
	height: 70%;
	width: 50%;
	top: 0px;
	left: 0px;
}

.st-layer2 {
	position: absolute;
	z-index: 2;
	background-color: #CDCDCD;
	height: 60%;
	width: 50%;
	top: 40%;
	right: 0px;
}

.st-layer3 {
	position: absolute;
	z-index: 3;
	width: 75%;
	height: 75%;
	top: 18%;
	left: 20%;
	/*transform: translateY(-20%);*/
	background-image: url("../../images/firstview_illust_pc.jpg");
	background-repeat: no-repeat;
	background-size: contain;
}

	.st-layer3 img {
		top: 15%;
		left: 60%;
		width:20%;
		/*transform: translate(-50%,0);*/
		position: absolute;
		z-index: 4
	}

.st-cir-outer {
	position: relative;
	z-index: 0;
	width: 650px;
	height: 260px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}
.st-cir-layer1 {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
}

.st-cir-layer2 {
	position: absolute;
	z-index: 2;
	right:0px;
}

.st-cir-layer2 img {
	height:250px;
}

.st-cir-layer3 {
	position: absolute;
	z-index: 2;
	left: 0px;
}

	.st-cir-layer3 img {
		height: 250px;
	}

.st-cir-layer4 {
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
}

@media (max-width: 1180px) and (min-width: 1024px) {
	.st-layer3 {
		left: 15%;
	}
}

/*<=820的设备*/
@media (max-width: 820px) {
	.st-outer {
		position: relative;
		z-index: 0;
		width: 100%;
		height: 60%;
	}

	.st-layer1 {
		position: absolute;
		z-index: 1;
		background-color: #F9F7D7;
		height: 60%;
		width: 50%;
		top: 0px;
		left: 0px;
	}

	.st-layer2 {
		position: absolute;
		z-index: 2;
		background-color: #CDCDCD;
		/*height: 80%;*/
		width: 50%;
		top: 45%;
		right: 0px;
	}

	.st-layer3 {
		position: absolute;
		z-index: 3;
		width: 90%;
		top: 10%;
		left: 13%;
		/*transform: translateY(-20%);*/
		background-image: url("../../images/firstview_illust_sp.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

		.st-layer3 img {
			top: 3%;
			left: 40%;
			width: 40%;
			/*transform: translate(-50%,0);*/
			position: absolute;
			z-index: 4
		}

	.st-cir-outer {
		width: 600px;
		height: 230px;
	}

	.st-cir-layer2 img {
		height: 200px;
	}

	.st-cir-layer3 img {
		height: 200px;
	}
}

@media (max-width: 767px) {
	.st-outer {
		position: relative;
		z-index: 0;
		width: 100%;
		height: 60%;
	}

	.st-layer1 {
		position: absolute;
		z-index: 1;
		background-color: #F9F7D7;
		height: 60%;
		width: 50%;
		top: 0px;
		left: 0px;
	}

	.st-layer2 {
		position: absolute;
		z-index: 2;
		background-color: #CDCDCD;
		/*height: 80%;*/
		width: 50%;
		top: 45%;
		right: 0px;
	}

	.st-layer3 {
		position: absolute;
		z-index: 3;
		width: 90%;
		top: 10%;
		left: 13%;
		/*transform: translateY(-20%);*/
		background-image: url("../../images/firstview_illust_sp.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

		.st-layer3 img {
			top: 3%;
			left: 40%;
			width: 40%;
			/*transform: translate(-50%,0);*/
			position: absolute;
			z-index: 4
		}

	.st-cir-outer {
		width: 370px;
		height: 180px;
	}

	.st-cir-layer2 img {
		height: 140px;
	}

	.st-cir-layer3 img {
		height: 140px;
	}
}

@media (max-width: 375px) {
	.st-layer2 {
		position: absolute;
		z-index: 2;
		background-color: #CDCDCD;
		height: 45%;
		width: 50%;
		top: 40%;
		right: 0px;
	}

	.st-layer3 {
		position: absolute;
		z-index: 3;
		width: 80%;
		height: 75%;
		top: 13%;
		left: 18%;
		/*transform: translateY(-20%);*/
		background-image: url("../../images/img-fv-sm.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

		.st-layer3 img {
			top: 3%;
			/*left: 35%;*/
			width: 35%;
			/*transform: translate(-50%,0);*/
			position: absolute;
			z-index: 4
		}
}