@charset "utf-8";

/* CSS Document */
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
/*-------------banner--------------------*/
#banner {
	width: 85%;
	height: auto;
	min-width: 980px;
	margin: 0 auto;
	position: relative;
}
/*-------------threeShop--------------------*/
#threeShop {
}
#threeShop li {
	width:32%;
	display:block;
	float:left;
	background:#eee;
	margin-right:2%;
}
#threeShop li:nth-child(3n){
	margin-right:0;
    margin-bottom:20px;
	}

	.indextjrconten {
		position: absolute;
		margin-top: -30%;
		text-align: center;
		width: 100%;
	}
}
.gouwudaihoven:hover {
	color: #e5004b!important;
}
#twoShop li {
	width: 49%;
	display: block;
	background: #eee;
}

/*-------------fourShop--------------------*/
#fourShop {
}
#fourShop li {
	width:23.5%;
	display:block;
	float:left;
	background:#eee;
	margin-right:2%;
}
#fourShop li:nth-child(4n){
	margin-right:0;
    margin-bottom:20px;
}

/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
/*-------------banner--------------------*/
	#banner {
		margin-top: 5px;
		margin-bottom: 30px;
	}

/*-------------threeShop--------------------*/
#threeShop li{
	margin-bottom:20px;
}
#threeShop li:nth-child(3){
	margin-bottom:20px;
	}

	.indextjrconten {
		position: absolute;
		margin-top: -39%;
		text-align: center;
		width: 100%;
		padding-left:15px;
		padding-right:15px;
	}
}
/*-------------fourShop--------------------*/
#fourShop li{
	margin-bottom:20px;
}
#fourShop li:nth-child(4){
	margin-bottom:20px;
	}

@media screen and (min-width:801px) {
	.contentverify {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1000;
		background-color: #000;
		opacity: 0.6;
		position: fixed;
	}

	.formWrapper_index {
		z-index: 1001;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 400px;
		height: 500px;
		background: white;
		color: #333;
		margin: auto;
		position: fixed;
		text-align: center;
	}

		.formWrapper_index img {
			width: 400px;
			height: 500px;
		}

	.formWrapper_index2 {
		z-index: 1001;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 400px;
		background: white;
		color: #333;
		margin: auto;
		position: fixed;
		text-align: center;
	}

		.formWrapper_index2 img {
			width: 400px;
		}

	#close {
		display: inline-block;
		width: 30px;
		height: 2px;
		background: #ffffff;
		transform: rotate(45deg);
	}

		#close::after {
			content: '';
			display: block;
			width: 30px;
			height: 2px;
			background: #ffffff;
			transform: rotate(-90deg);
		}
}

@media screen and (max-width:800px) {
	.contentverify {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1000;
		background-color: #000;
		opacity: 0.6;
		position: fixed;
	}

	.formWrapper_index {
		z-index: 1001;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		color: #333;
		margin: auto;
		position: fixed;
		max-width: 90vw;
	}

		.formWrapper_index img {
			width: 80vw;
			height: auto;
		}

	.formWrapper_index2 {
		z-index: 1001;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		color: #333;
		margin: auto;
		position: fixed;
		max-width: 90vw;
	}

		.formWrapper_index2 img {
			width: 80vw;
			height: auto;
		}

	#close {
		display: inline-block;
		width: 20px;
		height: 2px;
		background: #ffffff;
		transform: rotate(45deg);
	}

		#close::after {
			content: '';
			display: block;
			width: 20px;
			height: 2px;
			background: #ffffff;
			transform: rotate(-90deg);
		}
}