* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	user-select: none;
	font-family: "微软雅黑";
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	/*系统默认菜单被禁用*/
	-webkit-user-select: none;
	/*webkit浏览器*/
	-khtml-user-select: none;
	/*早期浏览器*/
	-moz-user-select: none;
	/*火狐*/
	-ms-user-select: none;
	/*IE10*/
	user-select: none;

}

input,
button,
select {
	border: none;
	opacity: none;
	outline: none;
	-webkit-appearance: none;
}

html {}

body {
	background: #f4661f;
}

.new_bg {
	width: 100%;
	z-index: -1;
}

.new_bg img {
	width: 100%;
	height: auto;
}

.mbti_light {
	width: 92%;
	height: 40px;
	margin: 0.25rem 4% 2rem;
	position: relative;
	z-index: 99;
	background: #fcf5e0;
	border-radius: 4px;
}

.mbti_light li {
	width: 33.33%;
	float: left;
	font-size: 13px;
	text-align: center;
	line-height: 40px;
	color: #fd8a1d;
}

.mbti_title {
	width: 50%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	position: relative;
	z-index: 99;
	margin: -2.6rem 25% 0.75rem;
}

.mbti_titles {
	width: 92%;
	font-size: 16px;
	font-weight: 600;
	color: red;
	margin: 1rem 4%;
	color: #fff;
}

.mbti_problem_list {
	width: 92%;
	margin: 0 4%;
}

.mbti_problem_list ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mbti_problem_list li {
	width: 48%;
	padding: 1rem 0.5rem;
	box-sizing: border-box;
	filter: drop-shadow(0.628px 8.978px 12px rgba(247, 93, 16, 0.17));
	background-color: #fcf0cc;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}

.mbti_problem_list li h2 {
	width: 100%;
	text-align: center;
	color: #fd831a;
	font-size: 20px;
}

.mbti_problem_list li p:nth-child(2) {
	font-size: 15px;
	font-weight: 600;
	margin: 0.5rem 0;
	color: #fd831a;
}

.mbti_problem_list li p:nth-child(3) {
	line-height: 1.5rem;
}

.mbti_problem_list li p {
	font-size: 13px;
	text-align: center;
	color: #999;
}

.mbti_text {
	width: 92%;
	margin: 0rem 4% 2rem;
	background: #fcf0cc;
	padding: 1rem;
	box-sizing: border-box;
	border-radius: 0.5rem;
}

.mbti_text p {
	line-height: 1.8rem;
	font-size: 14px;
	color: #666;
}

.mbti_text p:nth-child(1) {}

.mbti_report {
	width: 92%;
	margin: 0rem 4%;
}

.mbti_report li {
	width: 100%;
	height: 5rem;
	background: #fcf0cc;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	display: flex;
	justify-content: flex-start;
	padding: 0 1rem;
	box-sizing: border-box;
}

.mbti_report li .img {
	width: 3rem;
	height: 3rem;
	background-image: linear-gradient(0deg, #fea427 0%, #fd8019 100%);
	filter: drop-shadow(0.244px 6.996px 9px rgba(238, 122, 63, 0.26));
	margin: 1rem 1rem 0 0;
	flex-shrink: 0;
	border-radius: 2.5rem;
}

.mbti_report li .img img {
	height: 1.5rem;
	display: block;
	margin: 0.75rem auto;
}

.mbti_report li .text {
	width: 100%;
	height: 4rem;
	margin-top: 0.5rem;
}

.mbti_report li .text h4 {
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
	font-size: 14px;
	color: #fd4919;
}

.mbti_report li .text p {
	font-size: 12px;
	line-height: 1.25rem;
	height: 2.5rem;
	overflow: hidden;
	color: #999;
}

.mbti_img {
	width: 100%;
	margin-top: 1rem;
	border-radius: 0.5rem;
	overflow: hidden;
}

.mbti_img img {
	width: 50%;
	float: left;
}

.footers {
	width: 100%;
	height: 100px;
}

.mbti_btn {
	width: 92%;
	position: fixed;
	bottom: 2rem;
	left: 4%;
	display: flex;
	justify-content: center;
}

.mbti_btn a {
	width: 94%;
	display: block;
	height: 2.5rem;
	background: #fd9428;
	text-align: center;
	line-height: 2.5rem;
	border-radius: 50px;
	font-size: 14px;
	color: #fff;
	box-shadow: 0 0 16px #fd9428;
	animation: btns 3s ease-in-out infinite;
}

@keyframes btns {
	from {
		transform: scale(1);
	}

	33.33% {
		transform: scale(1.1);
	}

	to {
		transform: scale(1);
	}
}

.mbti_instructions {
	width: 92%;
	margin: 0 4%;
}

.mbti_instructions li {
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	font-size: 14px;
	background: #fcf0cc;
	margin-top: 0.5rem;
	border-radius: 4px;
	padding: 0 4%;
	box-sizing: border-box;
	color: #999;
}

.mbti_score {
	width: 92%;
	margin: 0 4%;
}

.mbti_score ul {
	display: flex;
	justify-content: space-between;
}

.mbti_score li {
	width: 31%;
	padding: 1rem 0;
	background: #fcf0cc;
	border-radius: 4px;
}

.mbti_score li p:nth-child(2) {
	width: 100%;
	font-size: 14px;
	text-align: center;
	margin-top: 1rem;
	color: #666;
}

.third {
	background: #e6d6a6;
	width: 5rem;
	height: 5rem;
	position: relative;
	margin: 0 auto;
	border-radius: 50%;
}

.second {
	background: #fd9428;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	clip: rect(0, 36px, auto, 0);
	position: absolute;
	transform: rotate(0deg);
}

.seconds {
	background: #fd9428;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	clip: rect(0, 40px, auto, 0);
	position: absolute;
	transform: rotate(195deg);
}

.first {
	background: #fff;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	clip: rect(0, auto, auto, 91px);
}

.third * {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.mbti_musk {
	width: 4rem;
	height: 4rem;
	background: #fcf0cc;
	border-radius: 50%;
	position: absolute;
	top: 0.5rem;
	text-align: center;
	font-weight: bold;
	left: 0.5rem;
}

.mbti_musk p {
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	font-size: 12px;
	color: #fd9428;
	margin-top: 0.75rem;
}

.mbti_musk h2 {
	width: 100%;
	height: 2rem;
	color: #fd9428;
	line-height: 2rem;
	font-size: 14px;
	margin-top: 1.5rem;
}

.mbti_exam_tips {
	width: 92%;
	height: 4rem;
	line-height: 4rem;
	font-weight: bold;
	color: #999;
	margin: 0 4%;
}

.mbti_exam_box {
	width: 92%;
	padding: 1rem 4%;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 0 8px #e9e9e9;
	border-radius: 4px;
	margin: 0 4%;
}

.mbti_exam_number {
	width: 100%;
	height: 1.5rem;
	display: flex;
	justify-content: flex-start;
	flex-shrink: 0;
	font-size: 13px;
	color: #999;
	line-height: 1.5rem;
}

.mbti_exam_number p {
	color: #333;
	font-size: 14px;
}

.mbti_exam_number span {
	color: #999;
	font-size: 13px;
	margin-left: 0.5rem;
}

.mbti_exam_progress {
	width: 100%;
	height: 6px;
	background: #f5f5f5;
	position: relative;
	margin-top: 0.5rem;
	border-radius: 5rem;
}

.mbti_exam_progress span {
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	background: #fd9428;
	border-radius: 5rem;
}

.mbti_exam_hr {
	border-bottom: 2px #f5f5f5 dashed;
	margin-top: 1rem;
}

.mbti_exam_title {
	width: 100%;
	margin: 1.25rem 0;
	font-size: 15px;
	color: #333;
}

.mbti_tabs {
	width: 100%;
	background: #f5f5f5;
	margin-bottom: 1.5rem;
	position: relative;
	border-radius: 50px;
}

.mbti_tabs p {
	position: relative;
	z-index: 1;
	padding: 0.4rem 6%;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.5rem;
	color: #666;
	text-align: center;
}

.mbti_tabs input {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
}

.mbti_back_btn {
	width: 160px;
	height: 2rem;
	line-height: 2rem;
	background: #fd9428;
	color: #fff;
	font-size: 12px;
	border-radius: 50px;
	text-align: center;
	margin: 2rem auto 1rem;
}

.mbti_exam_bottom_tips {
	width: 92%;
	margin: 1.5rem 4%;
}

.mbti_exam_bottom_tips p {
	line-height: 1.5rem;
	font-size: 13px;
	color: #949695;
}

.mbti_exam_pay_musk {
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.mbti_exam_pay_btn {
	width: 92%;
	background: #fff;
	padding: 1.5rem 4%;
	box-sizing: border-box;
	border-radius: 0.5rem;
	position: fixed;
	top: 30%;
	left: 4%;
	z-index: 9999;
}

.mbti_exam_pay_btn img {
	height: 7.5rem;
	margin: 1rem auto;
	display: block;
}

.mbti_exam_pay_btn h4 {
	width: 100%;
	text-align: center;
}

.mbti_exam_pay_btn a {
	width: 100%;
	height: 40px;
	background: #fd9428;
	display: block;
	border-radius: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	margin-top: 1.5rem;
}

.mbti_report_bg {
	width: 100%;
	padding-bottom: 0rem;
	background-image: linear-gradient(#fd9428, #f5f5f5);
	position: relative;
	z-index: -1;

}

.mbti_report_title {
	width: 100%;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}

.mbti_report_pay {
	width: 92%;
	padding: 1rem 4%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 0.5rem;
	margin: 0 4%;
}

.mbti_report_tips {
	width: 100%;
	height: 5rem;
	display: flex;
	justify-content: space-between;
}

.mbti_report_tips img {
	height: 5rem;
	flex-shrink: 0;
}

.mbti_report_tips .text {
	width: 100%;
	height: 5rem;
	margin-left: 1rem;
}

.mbti_report_tips .text h4 {
	width: 100%;
	height: 1.9rem;
	line-height: 1.9rem;
	color: #f4661f;
}

.mbti_report_tips .text p {
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
	font-size: 13px;
	color: #999;
}

.mbti_report_btn {
	width: 100%;
	margin-top: 1.5rem;
	display: flex;
	justify-content: space-between;
}

.mbti_report_btn a {
	width: 48%;
	height: 2.5rem;
	background: #1776fe;
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 2.5rem;
	border-radius: 4px;
	display: inline-block;
}

.mbti_report_btn a:nth-child(2) {
	background: #04be02;
}

.mbti_report_paytips {
	margin-top: 1rem;
	font-size: 14px;
	text-align: center;
	line-height: 1.5rem;
	color: #999;
}

.mbti_report_text {
	width: 92%;
	padding: 1rem 4%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 0.5rem;
	margin: 1rem 4% 0;
	position: relative;
}

.mbti_report_text_title {
	height: 32px;
	line-height: 32px;
	width: 60%;
	box-sizing: border-box;
	background-image: linear-gradient(0deg, #fea427 0%, #fd8019 100%);
	display: inline-block;
	border-radius: 40px;
	color: #fff;
	margin: 0 auto;
	font-size: 14px;
	display: block;
	text-align: center;
	font-weight: bold;
}

.mbti_report_text_swiper {
	width: 100%;
	margin: 1rem 0 0.5rem;
}

.mbti_report_text_swiper img {
	height: 7.5rem;
	display: block;
	margin: 0.5rem auto 1rem;
}

.mbti_report_text_swiper * {
	text-align: center;
	margin-top: 0.5rem;
}

.mbti_report_text_swiper h2 {
	color: #f4661f;
}

.mbti_report_text_swiper h4 {
	color: #333;
	font-size: 16px;
	margin-top: 0.75rem;
}

.mbti_report_text_swiper p {
	color: #999;
	font-size: 14px;
	margin-top: 0.75rem;
}

.mbti_report_text .swiper-container {
	width: 100%;
	height: 100%;
}

.mbti_report_text .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.mbti_report_text  .img{
	margin-top: 1rem;
}
.mbti_report_text  .img img{
	width: 100%;
	filter: blur(3px);
}
.mbti_report_footetips{
	width: 92%;
	margin: 1rem 4%;
	background: linear-gradient(0deg, #fea427 0%, #fd8019 100%);
	padding: 1rem 4%;
	box-sizing: border-box;
	border-radius: 0.5rem;
	text-align: center;
	line-height: 2rem;
	font-weight: bold;
	color: #fff;
}