page {
	height: 100%
}

.index {
	width: 100%;
	padding-bottom: 0;
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-height: 100vh;
	overflow-x: hidden
}

.logo-assess {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: .42667rem;
	width: 1.49333rem;
	height: 1.49333rem
}

.header {
	width: 100%;
	background-color: var(--grey-bg-color);
	margin: 0 auto .85333rem;
	padding: .85333rem 0;
	z-index: 1;
	text-align: center
}

.family-img {
	width: 100%;
	height: 1.06667rem;
	margin: 1.06667rem auto
}

.question-info {
	color: var(--shimo-color);
	margin-bottom: .85333rem
}

.question-info-name {
	font-size: .896rem;
	white-space: pre-wrap;
	font-weight: 700
}

.labels {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: .21333rem;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center
}

.question-total {
	font-size: .512rem;
	text-align: center;
	color: gray;
	margin: 0 .21333rem
}

.question-item {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%
}

.question-card {
	width: var(--card-width);
	margin: .42667rem auto 1.06667rem;
	border-radius: .42667rem;
	-webkit-box-shadow: 0 .02133rem .42667rem 0 rgba(4, 0, 0, .1);
	box-shadow: 0 .02133rem .42667rem 0 rgba(4, 0, 0, .1);
	background-color: #fff;
	padding-bottom: .42667rem
}

.question-top {
	padding:0px 10px 0px 10px
}

.question-progress {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end
}

.current {
	font-size: 1.6rem;
	line-height: 1.6rem;
	margin-right: .10667rem
}

.total {
	font-size: .59733rem;
	color: #333045
}

.question-name {
	margin-top: 1.06667rem;
	font-size: .768rem;
	white-space: pre-wrap
}

.option-view {
	padding: 0 .64rem;
	width: 100%;
}

.option-item {
	border-radius: .21333rem;
	text-align: left;
	margin-bottom: .64rem;
	font-size: .68267rem;
	padding: .42667rem .85333rem;
	background-color: #f0f0f0
}

.option-view .option-select {
	color: #fff;
	background-color: var(--primary-color);
	font-weight: bolder;
	cursor: pointer
}

.iq-que-label {
	font-size: .59733rem;
	margin-top: -.85333rem;
	margin-bottom: .21333rem
}

.iq-que-img {
	width: 100%;
	max-width: 10.66667rem;
	height: auto;
	text-align: center
}

.iq-option-view {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 .21333rem
}

.iq-option {
	margin: .32rem;
	width: 3.2rem;
	height: 2.56rem
}

.iq-op-img {
	width: 100%;
	height: auto
}

.iq-op-label {
	margin-top: .10667rem;
	font-weight: bolder;
	font-size: .42667rem
}

.bottom {
	width: var(--card-width);
	margin: .42667rem 0 1.06667rem
}

.last-question,
.next-question {
	float: left;
	color: gray;
	font-size: .64rem;
	padding: 0 .85333rem;
	border: 0;
	max-width: 5.33333rem
}

.next-question {
	float: right;
	color: #fff;
	padding: 0 1.70667rem;
	background-color: var(--primary-color);
	-webkit-box-shadow: 0 .064rem .064rem #858585;
	box-shadow: 0 .064rem .064rem #858585
}

.result-loading {
	margin-top: 30%
}

.progress {
	margin: .11333rem auto .64rem
}

.assess-footer {
	background-color: var(--grey-bg-color)
}

.footer-description {
	font-size: .512rem;
	color: gray
}

.side-l {
	margin: .21333rem .64rem .64rem
}

.side-r {
	width: 100%
}

.official-img {
	width: 2.56rem;
	height: 2.56rem;
	margin-bottom: -1.49333rem
}

.footer-head {
	margin: .64rem 0 .21333rem;
	text-align: center;
	font-weight: 700
}

.panel-l {
	-webkit-flex-basis: 60%;
	-ms-flex-preferred-size: 60%;
	flex-basis: 60%
}

.panel-r {
	-webkit-flex-basis: 40%;
	-ms-flex-preferred-size: 40%;
	flex-basis: 40%
}

.assessment-loading {
	margin-top: 50%
}

.mask-flow {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-column-gap: .42667rem;
	-moz-column-gap: .42667rem;
	column-gap: .42667rem
}

.new-header,
.top {
	width: 100%
}

.top {
	height: 6.46667rem;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.another-bg,
.top {
	background-color: #e2ecf6
}

.top-bg-img {
	width: 6.4rem;
	height: 6.4rem;
	margin-right: 1.06667rem;
	z-index: 1
}

.middle {
	z-index: 2;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	padding-top: 1.33333rem
}

.card-box,
.info-card {
	width: var(--card-width)
}

.card-box {
	border-radius: .21333rem;
	padding: .42667rem;
	margin-bottom: .85333rem;
	background-color: #fff
}

.info-card {
	position: absolute;
	top: -3rem;
	background-color: rgba(255, 255, 255, .7);
	border-radius: .10667rem
}

.info-title {
	font-size: .72533rem;
	font-weight: 700;
	color: #000
}

.info-content {
	font-size: .512rem;
	color: #a9a9aa;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap
}

.middle-info {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-bottom: .21333rem
}

.info-price {
	font-size: .68267rem;
	color: #e9aa6a
}

.info-count {
	margin-top: .64rem;
	color: #a9a9aa;
	font-size: .512rem
}

.info-people {
	padding-left: .42667rem
}

.intro-title {
	font-size: .64rem;
	font-weight: 550;
	margin-bottom: .21333rem
}

.intro-content {
	font-size: .55467rem;
	color: #8b8b8b;
	word-wrap: break-word;
	line-height: 1.06667rem
}

@media only screen and (min-width:728px) {
	:root {
		--card-width: 800Px
	}

	.question-info {
		margin-bottom: 0;
		padding: .42667rem 0
	}

	.question-info-name,
	.question-total {
		font-size: .68267rem;
		line-height: .68267rem
	}

	.question-total {
		font-size: .29867rem;
		height: .68267rem
	}

	.header {
		margin: 0 auto .21333rem;
		padding: 0 0 .85333rem
	}

	.logo-assess {
		visibility: visible;
		position: absolute;
		top: 0;
		left: .42667rem;
		width: 1.6rem;
		height: 1.6rem
	}

	.question-card {
		margin: .64rem auto;
		border-radius: .32rem;
		-webkit-box-shadow: 0 .02133rem .21333rem 0 rgba(4, 0, 0, .1);
		box-shadow: 0 .02133rem .21333rem 0 rgba(4, 0, 0, .1)
	}

	.question-top {
		padding: .53333rem
	}

	.question-name {
		margin-top: .21333rem;
		font-size: .42667rem
	}

	.option-item {
		font-size: .32rem;
		padding: .21333rem .64rem;
		margin-bottom: .32rem;
		border-radius: .10667rem
	}

	.current {
		font-size: .68267rem;
		line-height: .59733rem
	}

	.total {
		font-size: .384rem
	}

	.bottom {
		bottom: .21333rem;
		margin: 0
	}

	.last-question,
	.next-question {
		font-size: .32rem;
		padding: 0 .64rem;
		max-width: 4.26667rem;
		line-height: .85333rem
	}

	.next-question {
		height: .85333rem;
		width: 3.2rem
	}

	.result-loading {
		margin-top: 10%
	}

	.side-l {
		width: 750Px;
		margin: .42667rem 0
	}

	.footer-description {
		font-size: .29867rem
	}

	.official-img {
		width: 1.49333rem;
		height: 1.49333rem;
		margin-bottom: -.85333rem
	}

	.top {
		height: 4.26667rem
	}

	.top-bg-img {
		width: 3.84rem;
		height: 3.84rem;
		margin-right: 3.84rem
	}

	.middle {
		padding-top: 1.28rem
	}

	.card-box {
		border-radius: .128rem;
		padding: .34133rem .53333rem;
		margin-bottom: .512rem
	}

	.info-card {
		width: calc(100% - 3.41333rem);
		position: absolute;
		top: -1.92rem;
		text-align: center
	}

	.info-title {
		font-size: .64rem
	}

	.info-content {
		font-size: .384rem
	}

	.middle-info {
		padding-bottom: .128rem
	}

	.info-count {
		margin-top: .256rem;
		font-size: .384rem
	}

	.info-people {
		padding-left: .42667rem
	}

	.intro-title {
		font-size: .64rem;
		font-weight: 550;
		margin-bottom: .21333rem
	}

	.intro-content {
		font-size: .55467rem;
		color: #8b8b8b;
		word-wrap: break-word;
		line-height: 1.06667rem
	}

	.iq-que-label {
		font-size: .384rem
	}

	.iq-que-img {
		width: 100%;
		max-width: 6.82667rem
	}

	.iq-8 {
		-webkit-column-gap: .32rem;
		-moz-column-gap: .32rem;
		column-gap: .32rem;
		padding: 0 .32rem
	}
}

.footer {
	margin-top: 1.70667rem;
	bottom: .21333rem;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: .512rem;
	color: #d3d3d3;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}

.beian,
.company {
	text-align: center
}

.to-enterprise {
	font-size: .55467rem;
	margin-top: -.08533rem
}

.to-enterprise:hover {
	color: var(--secondary-color);
	cursor: pointer
}

@media only screen and (min-width:728px) {
	.footer {
		margin-top: .85333rem;
		font-size: .256rem
	}

	.to-enterprise {
		font-size: .34133rem;
		margin-top: -.128rem
	}
}