body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:24px;

	height: 100vh;
	background: -webkit-linear-gradient(white,#c2e8e9);
	background: -o-linear-gradient(white,#c2e8e9);
	background: -moz-linear-gradient(white,#c2e8e9);
	background: linear-gradient(white,#c2e8e9);
}

.main_frame{
	position: absolute;
	height: 768px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100%;
	top: 0;
}

.f_l{
	width: 37px;
	background-image: url(../img/frame_l.png);
	left: 50%;
	margin-left: -549px;
}

.f_r{
	width: 34px;
	background-image: url(../img/frame_r.png);
	left: 50%;
	margin-left: 512px;
}


/*main
============================================================== */
.main{
	overflow: hidden;
	width:1024px;
	margin: 0 auto;
}
.main > div {
	width:1024px;
	height:768px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

/* ============================ intro ============================ */
.intro {
	background-color: #fbb03b;
}
.intro h1 {
	display: none;
}
.intro > img, .intro_end > * {
	position: absolute;
	opacity: 0;
	filter:alpha(opacity=0);
}
.intro .eye_1, .intro .eye_2, .intro .eye_3 {
	left: 40.5%;
	top: 52.5%;
	width: 17.5%;
	z-index: 4;
}
.intro .eye_2 {
	z-index: 3;
	left: 43.2%;
}
.intro .eye_3 {
	z-index: 2;
	left: 43.2%;
}
.intro .face {
	height: 100%;
	left: -2%;
	top: 0;
	z-index: 1;
}
.intro .intro_tit_1 {
	width: 26%;
	right: -2%;
	top: 50%;
}
/* intro_end */
.intro_end {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
	filter:alpha(opacity=0);
}
.ie7 .intro_end, .ie8 .intro_end {
	background: url(../img/intro_end.jpg) no-repeat 0 0;
}
.intro_end  .intro_tit_2 {
	left: 5.5%;
	top: 40%;
	width: 34.5%;
	z-index: 2;
	-ms-transform: scale(0.5, 0.5); /* IE 9 */
	-webkit-transform: scale(0.5, 0.5); /* Safari */
	transform: scale(0.5, 0.5);
}
.intro_end .text {
	color: #fff;
	font-size: 23px;
	line-height: 1.4;
	right: 7.2%;
	/*text-shadow: 1px 1px 0 #eb9b00;*/
	top: 23%;
	width: 37%;
	z-index: 2;
}


.intro_end  a.btn_go {
	width: 17.5%;
	height: 0;
	padding-bottom: 5.3%;
	background-image: url(../img/btn_go.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	z-index: 3;
	right: 15%;
	top: 76.5%;
	/*top: 66.5%;*/
	text-decoration: none;
	font-size: 38px;
	color: #28a7e1;
	text-indent: 3%;
	line-height: 50px;
	display: none;
	opacity: 1;
	filter:alpha(opacity=100);

	animation: btn_ani 2s infinite;
}
.intro_end  a.btn_go:hover {
	background-position: 0 100%;
	color: #35dde1;

	animation: none;
}

@keyframes btn_ani{
	0%{
 		-ms-transform: scale(1,1);
	   	-webkit-transform: scale(1,1);
	    transform: scale(1,1);
 	}

 	10%{
 		-ms-transform: scale(1.15,1.15);
	   	-webkit-transform: scale(1.15,1.15);
	    transform: scale(1.15,1.15);
 	}

 	20%{
 		-ms-transform: scale(1,1);
	   	-webkit-transform: scale(1,1);
	    transform: scale(1,1);
 	}

 	30%{
 		-ms-transform: scale(1.1,1.1);
	   	-webkit-transform: scale(1.1,1.1);
	    transform: scale(1.1,1.1);
 	}

 	40%{
 		-ms-transform: scale(1,1);
	   	-webkit-transform: scale(1,1);
	    transform: scale(1,1);
 	}

 	100%{
 		-ms-transform: scale(1,1);
	   	-webkit-transform: scale(1,1);
	    transform: scale(1,1);
 	}
}




.intro_end .left_bg {
	background-color: #c4fffa;
	height: 200%;
	left: -50%;
	top: 110%;
	-ms-transform: rotate(16deg); /* IE 9 */
	-webkit-transform: rotate(16deg); /* Chrome, Safari, Opera */
	transform: rotate(16deg);
	width: 57%;
	z-index: 1;
	opacity: 1;
	filter:alpha(opacity=100);
}
.intro_end .right_bg {
	background-color: #fff495;
	height: 200%;
	right: -75%;
	top: -210%;
	-ms-transform: rotate(16deg); /* IE 9 */
	-webkit-transform: rotate(16deg); /* Chrome, Safari, Opera */
	transform: rotate(16deg);
	width: 65%;
	z-index: 1;
	opacity: 1;
	filter:alpha(opacity=100);
}
.ie7 .intro_end .left_bg, .ie8 .intro_end .left_bg, .ie7 .intro_end .right_bg, .ie8 .intro_end .right_bg {
	background-color: transparent !important;
}

/* ============================ question ============================ */
.question{
	display: none;
	color: #fff;
}
.question .q_tit span {
	font-size: 52px;
}
.question .q_tit h2 {
	line-height: 1.4;
}
.question a {
	color: #fff;
	text-shadow: none;
	text-decoration: none;
	cursor: pointer;
}
.question a > * {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
}
.question a .icon{
	background-image: url(../img/answer_bg.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	color: #28a7e1;
	font-size: 30px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	text-indent: -40px;
	width: 140px;
}
.question a p {
	font-size: 20px;
	margin-left: -10px;
}
.question a:hover .icon {
	background-position: 0 100%;
	color: #35dde1;
}
.question > *, .question .q_tit > * {
	position: absolute;
}
/* q1*/
.q1 {
	background: url(../img/q1_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #f5a100, 2px 2px 0 #f5a100, 3px 3px 0 #f5a100;*/
}
.q1 .q_tit span {
	top: 110px;
	left: 60px;
}
.q1 .q_tit h2 {
	width: 275px;
	top: 80px;
	left: 150px;
}
.q1 .btn_a {
	left: 60px;
	*left: 110px;
	top: 500px;
}
.q1 .btn_b {
	left: 60px;
	*left: 110px;
	top: 580px;
}

/* q2*/
.q2 {
	background: url(../img/q2_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #008881, 2px 2px 0 #008881, 3px 3px 0 #008881;*/
}
.q2 .q_tit span {
	top: 110px;
	left: 60px;
}
.q2 .q_tit h2 {
	width: 200px;
	top: 100px;
	left: 150px;
	font-size: 24px;
}
.q2 .btn_a {
	left: 60px;
	*left: 110px;
	top: 295px;
}
.q2 .btn_b {
	left: 60px;
	*left: 110px;
	top: 370px;
}
.q2 .btn_c {
	left: 60px;
	*left: 110px;
	top: 445px;
}
.q2 .btn_d {
	left: 60px;
	*left: 110px;
	top: 520px;
}

/* q3*/
.q3 {
	background: url(../img/q3_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #ff8e73, 2px 2px 0 #ff8e73, 3px 3px 0 #ff8e73;*/
}
.q3 .q_tit span {
	top: 110px;
	left: 60px;
}
.q3 .q_tit h2 {
	width: 125px;
	top: 100px;
	left: 150px;
	font-size: 24px;
}
.q3 .btn_a {
	left: 60px;
	*left: 110px;
	top: 295px;
}
.q3 .btn_b {
	left: 60px;
	*left: 110px;
	top: 370px;
}
.q3 .btn_c {
	left: 60px;
	*left: 110px;
	top: 445px;
}
.q3 .btn_d {
	left: 60px;
	*left: 110px;
	top: 520px;
}

/* q4*/
.q4 {
	background: url(../img/q4_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #3992ab, 2px 2px 0 #3992ab, 3px 3px 0 #3992ab;*/
}
.q4 .q_tit span {
	top: 110px;
	left: 60px;
}
.q4 .q_tit h2 {
	width: 215px;
	top: 100px;
	left: 150px;
	font-size: 24px;
}
.q4 .btn_a {
	left: 60px;
	*left: 110px;
	top: 295px;
}
.q4 .btn_b {
	left: 60px;
	*left: 110px;
	top: 370px;
}
.q4 .btn_c {
	left: 60px;
	*left: 110px;
	top: 445px;
}
.q4 .btn_d {
	left: 60px;
	*left: 110px;
	top: 520px;
}

/* q5*/
.q5 {
	background: url(../img/q5_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #2c6fa0, 2px 2px 0 #2c6fa0, 3px 3px 0 #2c6fa0;*/
}
.q5 .q_tit span {
	top: 110px;
	left: 60px;
}
.q5 .q_tit h2 {
	width: 200px;
	top: 90px;
	left: 150px;
	font-size: 24px;
}
.q5 .btn_a {
	left: 60px;
	*left: 110px;
	top: 295px;
}
.q5 .btn_b {
	left: 60px;
	*left: 110px;
	top: 370px;
}
.q5 .btn_c {
	left: 60px;
	*left: 110px;
	top: 445px;
}
.q5 .btn_d {
	left: 60px;
	*left: 110px;
	top: 520px;
}
.q5 a p {
	font-size: 18px;
	line-height: 20px;
	width: 230px;
}

/* q6*/
.q6 {
	background: url(../img/q6_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #3992ab, 2px 2px 0 #3992ab, 3px 3px 0 #3992ab;*/
}
.q6 .q_tit span {
	top: 110px;
	left: 60px;
}
.q6 .q_tit h2 {
	width: 195px;
	top: 90px;
	left: 150px;
	font-size: 24px;
}
.q6 .btn_a {
	left: 60px;
	*left: 110px;
	top: 295px;
}
.q6 .btn_b {
	left: 60px;
	*left: 110px;
	top: 370px;
}
.q6 .btn_c {
	left: 60px;
	*left: 110px;
	top: 445px;
}
.q6 .btn_d {
	left: 60px;
	*left: 110px;
	top: 520px;
}
.q6 .btn_d p {
	font-size: 18px;
	line-height: 20px;
	width: 95px;
}

/* q7*/
.q7 {
	background: url(../img/q7_bg.jpg) no-repeat 0 0;
	/*text-shadow: 1px 1px 0 #137a7d, 2px 2px 0 #137a7d, 3px 3px 0 #137a7d;*/
}
.q7 .q_tit span {
	top: 195px;
	left: 260px;
}
.q7 .q_tit h2 {
	width: 380px;
	top: 200px;
	left: 345px;
	font-size: 24px;
}
.q7 .btn_a {
	left: 95px;
	*left: 140px;
	top: 595px;
}
.q7 .btn_b {
	left: 330px;
	*left: 380px;
	top: 595px;
}
.q7 .btn_c {
	left: 565px;
	*left: 605px;
	top: 595px;
}
.q7 .btn_d {
	left: 800px;
	*left: 850px;
	top: 595px;
}

/* result*/
.result {
	color: #fff;
	display: none;
	line-height: 1.5;
}
.result .rs_con {
	margin-left: 60px;
	margin-top: 100px;
	width: 375px;
}
.result .rs_con .tit {
	font-size: 32px;
}
.result .rs_con>a {
	/*font-size: 20px;*/
	font-size: 0;
	color: #001ed4;
	display: block;
	width: 275px;
	height: 77px;
	word-wrap:break-word;
	word-break:break-all;
	background-image: url(../img/btn_more.png);
	background-size: 275px 154px;
	background-position: 50% 0;
	background-repeat: no-repeat;
}

.result.rs3 .rs_con>a{
	background-image: url(../img/btn_more_white.png);
}

.result .rs_con>a:hover {
	text-decoration: none;
	background-position: 50% 100%;
}
.result .rs_con .text {
	font-size: 20px;
	margin: 30px 0 50px;
	/*text-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.2), 0 0 8px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.2);*/
}

/* result - rs1*/
.rs1 {
	background: url(../img/rs1_bg.jpg) no-repeat 0 0;
}
.rs1 .rs_con .tit {
	/*text-shadow: 1px 1px 0 #4864a3, 2px 2px 0 #4864a3, 3px 3px 0 #4864a3;*/
}

/* result - rs2*/
.rs2 {
	background: url(../img/rs2_bg.jpg) no-repeat 0 0;
}
.rs2 .rs_con .tit {
	/*text-shadow: 1px 1px 0 #2b7e80, 2px 2px 0 #2b7e80, 3px 3px 0 #2b7e80;*/
}

/* result - rs3*/
.rs3 {
	background: url(../img/rs3_bg.jpg) no-repeat 0 0;
}
.rs3 .rs_con .tit {
	/*text-shadow: 1px 1px 0 #c87600, 2px 2px 0 #c87600, 3px 3px 0 #c87600;*/
}
.rs3 .rs_con .text {
	/*margin: 47px 0 235px;*/
	margin: 47px 0 25px;
}

.social_btns{
	position: relative;
	left: 290px;
	top: -154px;
}

.social_btns a{
	display: inline-block;
	width: 66px;
	height: 66px;
	background-position: 50%;
	background-size: 100%;
	background-repeat: no-repeat;

	-webkit-transition: all .2s; /* Safari */
    transition: all .2s;
}

.social_btns a:hover{
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
    -webkit-transform: scale(1.1, 1.1); /* Safari */
    transform: scale(1.1, 1.1);
}

.btn_fb{
	background-image: url(../img/btn_fb.png);
}

.btn_tw{
	background-image: url(../img/btn_tw.png);
}

.btn_ag{
	font-size: 0;
	color: #001ed4;
	display: block;
	width: 213px !important;
	height: 71px !important;
	word-wrap:break-word;
	word-break:break-all;
	background-image: url(../img/btn_tryagain.png) !important;
	background-size: 213px 142px !important;
	overflow: hidden;
}