html,body {
	height: 100%;
}

body {
	font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
	overflow: hidden;
	font-size: 18px;
	background: rgba(4, 14, 31, 0.9);
	color: rgba(255, 255, 255, 0.77);
	min-height: 100%;
	position: relative;
}
.footer{
	position: fixed;
	height: 15%;
	bottom: 0;
	text-align: center;
	width: 100%;
}
.footer .logo-img{
	height: 45%;
	margin-top:9%;
}
.bg-img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.wrap {
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 100%;
	position: fixed;
	padding: 2%;
	padding-top: 5px;
	margin-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-ms-overflow-scrolling: touch;
	-o-overflow-scrolling: touch;
	overflow-y: scroll;
}
.wrap{
	position: absolute;
  	top: 0;
  	bottom: 0;
}
.wrap .rows {
	margin: 40px 0;
	font-size: 100%;
	margin-top: 30px;
}
.wrap .rows.text-title{
	font-size: 18px;
}
.rows .desc{
	font-size: 18px;
  	width: 80%;
  	margin: auto;
}
.guide-div{
	height: 50%;
	text-align: center;
}
.large{
	font-size: 28px;
}
.wrap .rows .title {
	text-align: center;
	font-size: 120%;
}
div.desc1{
	float: left;
	width: 100%;
	position: relative;
	margin-top: 28%;
}
.wrap .btn-rows-spec {
	margin: 12% 0;
	width: 100%;
	float: left;
}
.wrap .btn-rows {
	position: absolute;
	bottom: 15%;
	width: 90%;
	left: 5%;
}

.wrap .rows .btn {
	width: 100%;
	height: 45px;
	border-radius: 6px;
}

.wrap .rows .next-btn {
	background: rgba(253, 90, 90, 0.82);
	color: #ffffff;
}

.wrap .rows .next-btn:active,.wrap .rows .next-btn:focus {
	background: #ffffff;
	color: #333333;
}

.wrap .rows .sel-btn {
	background: #ffffff;
	color: #333333;
}

.wrap .rows .sel-btn:active,.wrap .rows .sel-btn:focus {
	background: rgba(253, 90, 90, 0.82);
}

.wrap .show-btn {
	background: rgba(253, 90, 90, 0.82);
	color: #ffffff
}

small,.small {
	font-size: 75%;
	margin-bottom: 20px;
	color: gray;
}

.rows h2 {
	font-size: 60px;
	color: rgba(253, 90, 90, 0.82);
}

.pomp-font {
	color: rgba(253, 90, 90, 0.82);
}

#btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	background-color: red;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.canvas-div {
	min-height: 100px;
	height: 50%;
	width: 100%;
	min-width: 100px;
	position: relative;
}

.nature {
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 30px;
	line-height: 3;
	font-size: 16px;
}

.qingg {
	float: left;
	margin-top: 50px;
}

.luoji-div {
	width: 50%;
	float: right;
}

.luoj {
	float: right;
	margin-top: 50px;
}

.luoji:before {
	content: counter(step);
	counter-increment: step;
	width: 30px;
	line-height: 30px;
	display: block;
	color: white;
}

.zhij {
	margin: auto;
}

.ganj {
	margin: auto;
	margin-top: 100px;
}

.nature-color {
	font-size: 18px;
}

.content {
	font-size: 14px;
	text-align: left;
	margin-top: 20px;
}
.content img{
	width: 40px;
	margin-right: 5px;
}
.blue {
	color: rgb(13, 122, 232);
}

.green {
	color: rgb(68, 186, 37);
}

.yellow {
	color: rgb(231, 185, 19);
}

.orange {
	color: rgb(245, 122, 22);
}
.result-tip{
	margin: auto;
	text-align: center;
	width: 80%;
}
.red{
	color: rgba(253, 90, 90, 1);
}
hr {
	z-index: 0;
	border: 1px solid rgba(253, 90, 90, 1);
  	background: rgba(253, 90, 90, 1);
}
hr.hline{
	top: 45%;
  	position: absolute;
  	width: 86%;
  	left: 5%;
  	
}
hr.line {
	height: 90%;
	position: absolute;
	top: 5%;
	margin: 0px;
	left: 50%;
}

.quan {
	width: 10%;
	min-height:45px;
	min-width: 45px;
	border: 1px solid rgba(253, 90, 90, 1);
	background: rgba(253, 90, 90, 1);
	border-radius: 25px;
	font-size: 14px;
	line-height: 2.8;
	color: #ffffff;
	z-index: 1;
}

.oneq {
	margin: auto;
	position: absolute;
	top: 0;
	left: 45%;
}

.twoq {
	float: left;
  	position: absolute;
  	top: 45%;
  	left: 5%;
}

.threeq {
	float: right;
	position: absolute;
	right: 5%;
  	top: 45%;
}

.fourq {
	margin: auto;
	position: absolute;
	top: 90%;
	left: 45%;
}
.color-k{
  	position: absolute;
  	background:none ;
  	border:none;
  	font-size: 18px;
}
.color-green{
  	left: 35%;
  	top: 28%;
}
.color-blue{
  	right: 35%;
  	top: 28%;
}
.color-orange{
  	right: 35%;
  	bottom: 28%;
}
.color-yellow{
  	left: 35%;
  	bottom: 28%;
}
.res-blue{
	font-size: 26px;
  	width: 100%;
  	top: 25%;
  	padding-left: 110px;
  	right: 0;
}
.res-orange{
	font-size: 26px;
  	width: 100%;
  	bottom: 25%;
  	padding-left: 110px;
  	right: 0;
}
.res-green{
	font-size: 26px;
  	width: 100%;
    top: 25%;
    padding-right: 110px;
  	left: 0;
}
.res-yellow{
	font-size: 26px;
  	width: 100%;
    bottom: 25%;
    padding-right: 110px;
  	left: 0;
}
.result-title{
	margin-top: 10px;
	text-align: center;
}
h3{
	color: rgba(253, 90, 90, 1);
	font-size: 28px;
}
.form-control{
	background-color: rgba(242, 233, 233, 1);
	border: 1px solid #000000;
}
.control-label{
	padding: 0;
	text-align: right;
	font-size: 14px;
  	margin-top: 5px;
  	font-weight: normal;
}
.form-group{
	height: 35px;
}
.font-big{
	font-size: 26px;
}
img.result-icon{
	height: 100%;
}