@charset "utf-8";
/* CSS Document */

/*公共部分***********************************************************/
body{font-family: '微软雅黑', '宋体', Tahoma, Arial, Helvetica, STHeiti; width:100%;overflow-x: hidden;background-color: #f3f4f4; font-size: 10px;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
ul,ol,li{list-style:none;}
em,i{font-style:normal}strong,b{font-weight:normal}img{border:none}
input,img{vertical-align:middle}
a{text-decoration:none; cursor:pointer; color: #000;}
p,span,i,em{  margin: 0;  padding: 0;  font-style: normal;  font-weight: normal;  }
*{ margin:0; padding:0; }
html,body{
    height:100%;
	position:relative;
	z-index:-10;
}

.viewport{ max-width:100%;min-height:100%; margin:0 auto; position: absolute;
            top: 0;
            left: 0;
            width: 100%;
			min-height:100%;
            z-index: -2; background:url(../images/bg2.jpg); background-size:100% 100%;}
.logo{ width:70%; height:.4rem; padding:5% 5%; }
.logo img{ max-width:50%;}
.title{ width:100%; height:.4rem; text-align:center; margin:.6rem auto; }
.title img{ max-width:50%; text-align:center; }
.title2{ width:100%; height:.5rem; text-align:center; margin:.6rem auto; }
.title2 img{ max-width:70%; text-align:center; }
.zp{margin:0 auto; margin-top:3%; text-align:center; margin-top:.7rem;}
.zp img{ max-width:90%; }




.age{ width:40%; height:.95rem; line-height:.75rem; font-size:.4rem; color:#fe9100; background:url(../images/age4.png); background-size:100% 100%; text-align:center; margin:0 auto; margin-top:-.2px;}
.btn .indexBtnAnimation {
	animation-name: 'suofang';
	animation-duration: 1s;
	animation-direction: alternate;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: 'suofang';
	-webkit-animation-duration: 1s;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
.resultBtn{
	/*width:11rem;
	margin-top:1rem;
	margin-bottom:0.5rem;*/
}


.indexBtnAnimation {
	animation-name: 'suofang';
	animation-duration: 1s;
	animation-direction: alternate;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: 'suofang';
	-webkit-animation-duration: 1s;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
.btn .resultBtn{
	/*width:11rem;
	margin-top:1rem;
	margin-bottom:0.5rem;*/
}



 @keyframes suofang {
 from {
 transition-origin:center center;
 transform:scale(1);
}
to {
	transition-origin: center center;
	transform: scale(1.1);
}
}
@-webkit-keyframes suofang {
 from {
 -webkit-transition-origin:center center;
 -webkit-transform:scale(1);
}
to {
	-webkit-transition-origin: center center;
	-webkit-transform: scale(1.1);
}
}




.tip{ width:100%; margin:.1rem; text-align:center; font-size:.3rem; color:#fe9100;margin-top:.1rem;}
.tip2{ width:100%; height:.6rem; text-align:center; margin-top:0.3rem;}
.tip2 p{ color:#fe9100; font-size:.3rem; margin-top:.2rem;}
.btn{ width:100%; text-align:center; margin:0 auto; margin-top:.1rem;}
.btn input{ display:block; width:75%; height:30px; line-height:30px;background-color:rgb(219,117,9);-webkit-appearance:none; border:1px solid #FFF; border-radius:10px; color:#FFF; margin:0 auto; margin-top:.22rem; font-size:.22rem;}
.zhizhen{ width:30%; margin:0 auto; text-align:center; position:relative; top:-1rem; left:.3rem;}
.zhizhen2{ width:30%; margin:0 auto; text-align:center; position:relative; top:-1.2rem; left:.3rem;}
.zhizhen img{ max-width:60%;}
.zhizhen2 img{ max-width:60%;}
.info{ width:90%; background:url(../images/bg.png); background-size:100% 100%; margin:0px auto; padding:20px 0; margin-top:-.4rem;}
.info h2{ width:100%; color:#FFF; text-align:center; font-size:.26rem; margin-bottom:.2rem;}
.info ul{ width:80%; margin:0 auto; }

.info ul li{ margin-bottom:10px; color:#FFF; font-size:.24rem;}
.info ul li input{ border:1px solid #929292; outline:none; border-radius:5px; height:.5rem;}
.info ul li .radio{ margin-left:10%;}
.info ul li select{ width:29%; margin-top:7%; margin-right:.1rem; color:#999;  border-radius:5px; color:#fff; height:.5rem; font-size:.24rem;}
.info ul li select option{ color:#999;}
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #FFF;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url(../images/arrow.png) no-repeat scroll right center transparent;


  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
.rule{ width:90%; height:auto; margin:0rem auto;}
.rule img{ max-width:100%; padding:.2rem 0;}
.rule2{ width:90%; margin:0rem auto; margin-bottom:.3rem; margin-top:-.5rem; text-align:center;}
.rule2 img{ max-width:70%;}
.con{ width:3rem; height:3rem; margin:0 auto; background:url(../images/1.png); background-size:100% 100%; z-index:22; margin-top:.2rem;}
.con1{ width:1.5rem; height:1.5rem; line-height:1.5rem; background:#fe9100;border-radius:50%; margin:0 auto; position:relative;color:#FFF; text-align:center; font-size:.4rem; font-weight:bold; z-index:333; top:-2.25rem;}

#jqcanvas_1{ text-align:center;  position:relative; margin-top:2.2rem; margin-left:1.6rem;}
#test{ width:100%; margin:0 auto;  margin-top:.5rem; background:url(images/zhuanpan.jpg); background-size:100% 100%;}
@media (min-width: 320px) and (max-width: 991px) {
  html {font-size:calc(100vw/6.4);font-size:-webkit-calc(100vw/6.4);font-size:-moz-calc(100vw/6.4);}
}


	@media screen and ( max-width:320px){
				
		.result2 input{ width:12%; margin-left:73%; margin-top:14%; }	
			
			}
			
			@media screen and ( min-width:360px)and(max-width:400px){
				
		.result2 input{ width:12%; margin-left:73%; margin-top:20%; }	
			
			}
			
			
			@media screen and (min-width:750px){
		
         .result2 input{ width:12%; margin-left:73%; margin-top:5.7%; text-align:center; }
		
		
		}		


