html,body{
	font-size: calc( 100vw/ 19.2 );
	color: #333;
	font-family: 'Microsoft YaHei','华文细黑','平方';
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select:none;
	overflow: hidden;
}
.first-wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	background: #eee;
}
.title img{
	width: 3.22rem;
	display: block;
	margin: 0.4rem auto 0.5rem auto;
}
.tip-txt{
	color: #1c95bf;
	margin: 0 auto;
	text-align: center;
	font-size: 0.21rem;
	line-height: 0.54rem;
}
.rainbow_box{
	clear: both;
	overflow: hidden;
	position: relative;
}
.rainbow_box .btn-1,
.rainbow_box .btn-2{
	width: 1.40rem;
	height: 0.40rem;
	border-radius: 4px;
	color: #fff;
	text-align: center;
	line-height: 0.4rem;
	float: left;
	font-size: 0.22rem;
	cursor: pointer;
}
.rainbow_box .btn-1{
	background: #40c5d3;
	margin:0.1rem 0 0.15rem 4.9rem;
}
.rainbow_box .btn-2{
	background: #08a9fb;
	margin:0.1rem 0 0.15rem 2.55rem;
}

.life-big,
.life-air{
	width: 14.25rem;
	height: 0.73rem;
	margin: 0 auto;
	font-weight: bold;
	vertical-align: top;
	font-size: 0.18rem;
	line-height: 0.3rem;
	display: none;
}
.life-big .title,
.life-air .title{
	width: 1.11rem;
	height: 0.73rem;
	float: left;
	color: #4922ab;
}
.life-big .desc,
.life-air .desc{
	float: left;
	width: 13rem;
	margin-bottom:0.3rem;
}
.draw-desc{
	position: absolute;
	left: 2.47rem;
	top: 9rem;
	text-align: center;
	color: #1c95bf;
	font-size: 0.22rem;
	font-weight: bold;
	display: none;
}
.draw-btn img{
	display: block;
	cursor: pointer;
	position: absolute;
	width: 2rem;
	right: 0.4rem;
	top: 8.6rem;
	display: none;
}
.second-wrap{
	width: 100%;
	height: 100%;
	background: #eee;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.rainbow_bg {
	width: 100%;
	text-align: center;
}
.rainbow_bg svg{
	width: 10.45rem;
	height: 4.07rem;
}

.rainbow_bg .cls-1 {
	fill: #fd8f56;
}

.rainbow_bg .cls-2 {
	fill: #fdcd68;
}

.rainbow_bg .cls-3 {
	fill: #fbff95;
}

.rainbow_bg .cls-4 {
	fill: #b8ffa5;
}

.rainbow_bg .cls-5 {
	fill: #95dbff;
}

.rainbow_bg .cls-6 {
	fill: #edaffd;
}

.rainbow_bg .cls-7 {
	font-size: 24px;
	font-family: MicrosoftYaHeiLight, Microsoft YaHei;
}

.rainbow_bg .cls-10,
.rainbow_bg .cls-11,
.rainbow_bg .cls-14,
.rainbow_bg .cls-8 {
	fill: none;
}

.rainbow_bg .cls-8 {
	stroke: #221e1f;
	stroke-width: 3px;
}

.rainbow_bg .cls-9 {
	fill: #fff;
}

.rainbow_bg .cls-11,
.rainbow_bg .cls-13 {
	stroke: #000;
}

.rainbow_bg .cls-11,
.rainbow_bg .cls-13,
.rainbow_bg .cls-14 {
	stroke-miterlimit: 10;
}

.rainbow_bg .cls-12 {
	fill: #221e1f;
}

.rainbow_bg .cls-13 {
	font-size: 25.92px;
	font-family: AdobeSongStd-Light-GBpc-EUC-H, Adobe Song Std;
}

.rainbow_bg .cls-14 {
	stroke: #337c14;
	stroke-width: 2px;
}


.rainbow_bg .cls-1,
.rainbow_bg .cls-2,
.rainbow_bg .cls-3,
.rainbow_bg .cls-4,
.rainbow_bg .cls-5,
.rainbow_bg .cls-6,
.rainbow_bg .cls-9,
.rainbow_bg .cls-7,
.rainbow_bg .cls-12,
.rainbow_bg .cls-13,
.rainbow_bg .cls-14{
	display: none;
}

.cloud-1{
	width: 5.8rem;
	height: 3.34rem;
	position: absolute;
	top: 0.28rem;
	left: 0.35rem;
	z-index: 999;
}
.cloud-2{
	width: 1.7rem;
	height: 1.07rem;
	position: absolute;
	top: 0.5rem;
	left:11.4rem;
	z-index: 9;
}
.cloud-3{
	width: 1.22rem;
	height: 0.76rem;
	position: absolute;
	top: 0.48rem;
	left:15.33rem;
	z-index: 999;
}

.gray{
	display: none;
	position: absolute;
	top: 0;
	z-index: 99;
}

.brush{
	position: absolute;
	top: 0;
	z-index: 99;
}
.brush.yellow,
.gray.yellow{
	width: 0.74rem;
	height: 5.02rem;
	left: 4.1rem;
}
.brush.orange,
.gray.orange{
	width: 1.6rem;
	height: 3.87rem;
	left: 5.76rem;
}
.brush.purple,
.gray.purple{
	width: 1.17rem;
	height: 2.98rem;
	left: 8.6rem;
}
.brush.red,
.gray.red{
	width: 0.73rem;
	height: 3.42rem;
	left: 11.3rem;
}
.brush.blue1,
.gray.blue1{
	width: 1.13rem;
	height: 4.35rem;
	left: 13.1rem;
}
.brush.blue2,
.gray.blue2{
	width: 0.83rem;
	height: 3.77rem;
	left: 15.34rem;
}
.canvas_bg{
	width: 14.2rem;
	height: 10.52rem;
	position: absolute;
	bottom: 0;
	left: 2.53rem;
	transition: bottom 1s ease;
	-webkit-transition: bottom 1s ease;
}
.reset_btn{
	width: 1.7rem;
	position: absolute;
	bottom: 0.37rem;
	left: 1.05rem;
	z-index: 999;
}
.done_btn{
	width: 1.7rem;
	position: absolute;
	bottom: 0.37rem;
	right: 0.45rem;
}

.rainbow_canvas_line{
	position: absolute;
	width: 12.35rem;
	height: 6.5rem;
	bottom: 1.95rem;
	left: 3.43rem;
	z-index: 98;
	text-align: center;
}
.rainbow_canvas_line svg{
	width: 100%;
	height: 100%;
}

.rainbow_canvas_line .cls-1 {
	fill: #fff;
}


.rainbow_canvas_line .cls-1,
.rainbow_canvas_line .cls-5,
.rainbow_canvas_line .cls-6 {
	stroke: #000;
}


.rainbow_canvas_line .cls-1,
.rainbow_canvas_line .cls-5,
.rainbow_canvas_line .cls-6,
.rainbow_canvas_line .cls-7 {
	stroke-miterlimit: 10;
}


.rainbow_canvas_line .cls-2,
.rainbow_canvas_line .cls-6,
.rainbow_canvas_line .cls-7 {
	fill: none;
}

.rainbow_canvas_line .cls-2 {
	stroke: #221e1f;
	stroke-width: 3px;
}

.rainbow_canvas_line .cls-3 {
	font-size: 24px;
	font-family: MicrosoftYaHeiLight, Microsoft YaHei;
}

.rainbow_canvas_line .cls-4 {
	fill: #221e1f;
}

.rainbow_canvas_line .cls-5 {
	font-size: 25.92px;
	font-family: AdobeSongStd-Light-GBpc-EUC-H, Adobe Song Std;
}

.rainbow_canvas_line .cls-7 {
	stroke: #337c14;
	stroke-width: 2px;
}

/*.rainbow_canvas_color{
	position: absolute;
	width: 7.9rem;
    height: 3.94rem;
    left: 5.65rem;
	bottom: 1.95rem;
	z-index: 98;
	text-align: center;
}

.rainbow_canvas_color .cls-1{
	fill:#fd8f56;
}
.rainbow_canvas_color .cls-2{
	fill:#fdcd68;
}
.rainbow_canvas_color .cls-3{
	fill:#fbff95;
}
.rainbow_canvas_color .cls-4{
	fill:#b8ffa5;
}
.rainbow_canvas_color .cls-5{
	fill:#95dbff;
}
.rainbow_canvas_color .cls-6{
	fill:#edaffd;
}*/

.rainbow_canvas_color{
	position: absolute;
	width: 12.35rem;
	height: 6.5rem;
	bottom: 1.95rem;
	left: 3.43rem;
	z-index: 98;
	text-align: center;
}
.rainbow_canvas_color svg{
	width: 100%;
	height: 100%;
}
.rainbow_canvas_color .cls-1 {
	fill: #fff;
}

.rainbow_canvas_color .cls-1,
.rainbow_canvas_color .cls-11,
.rainbow_canvas_color .cls-14,
.rainbow_canvas_color .cls-15,
.rainbow_canvas_color .cls-4,
.rainbow_canvas_color .cls-5 {
	stroke: #000;
}

.rainbow_canvas_color .cls-1,
.rainbow_canvas_color .cls-11,
.rainbow_canvas_color .cls-14,
.rainbow_canvas_color .cls-15,
.rainbow_canvas_color .cls-16,
.rainbow_canvas_color .cls-4,
.rainbow_canvas_color .cls-5 {
	stroke-miterlimit: 10;
}


.rainbow_canvas_color .cls-12,
.rainbow_canvas_color .cls-15,
.rainbow_canvas_color .cls-16,
.rainbow_canvas_color .cls-2 {
	fill: none;
}


.rainbow_canvas_color .cls-3,
.rainbow_canvas_color .cls-4 {
	fill: #fd8f56;
}


.rainbow_canvas_color .cls-11,
.rainbow_canvas_color .cls-4,
.rainbow_canvas_color .cls-5 {
	stroke-width: 0.25px;
}


.rainbow_canvas_color .cls-5,
.rainbow_canvas_color .cls-6 {
	fill: #fdcd68;
}


.rainbow_canvas_color .cls-7 {
	fill: #fbff95;
}
.rainbow_canvas_color .cls-3,
.rainbow_canvas_color .cls-6,
.rainbow_canvas_color .cls-7,
.rainbow_canvas_color .cls-8,
.rainbow_canvas_color .cls-9,
.rainbow_canvas_color .cls-10{
	opacity: 0;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-o
}


.rainbow_canvas_color .cls-11,
.rainbow_canvas_color .cls-8 {
	fill: #b8ffa5;
}


.rainbow_canvas_color .cls-9 {
	fill: #95dbff;
}


.rainbow_canvas_color .cls-10 {
	fill: #edaffd;
}


.rainbow_canvas_color .cls-12 {
	stroke: #221e1f;
	stroke-width: 3px;
}


.rainbow_canvas_color .cls-13 {
	fill: #221e1f;
}


.rainbow_canvas_color .cls-14 {
	font-size: 25.92px;
	font-family: AdobeSongStd-Light-GBpc-EUC-H, Adobe Song Std;
}


.rainbow_canvas_color .cls-16 {
	stroke: #337c14;
	stroke-width: 2px;
}

.rainbow_canvas_color .cls-17 {
	font-size: 24px;
	font-family: MicrosoftYaHeiLight, Microsoft YaHei;
}
.second-wrap .tip-txt{
	width: 12rem;
	margin-top: 1rem;
	line-height: 0.35rem;
	text-align: left;
	background: #2196F3;
	color: #fff;
	padding: .15rem;
	border-radius: .1rem;
	display: none;
}

.alert-box{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.7);
	display: none;
}
.alert-box .box{
	width: 5.83rem;
	height: 3.53rem;
	border-radius: 0.3rem;
	background: rgba(255,255,255,.7);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.765rem 0 0 -2.915rem;
}
.alert-box .box .content{
	font-size: 0.48rem;
	text-align: center;
	margin-top: 1.3rem;
	color: #1d7ac8;
	margin-bottom: 0.84rem;
}
.alert-box .box .cancel-btn{
	width: 1.8rem;
	height: 0.65rem;
	border-radius: 0.325rem;
	margin-left: 0.7rem;
	background: #f36558;
	color: #fff;
	font-size: 0.28rem;
	text-align: center;
	line-height: 0.65rem;
	float: left;
	cursor: pointer;
}

.alert-box .box .yes-btn{
	width: 1.8rem;
	height: 0.65rem;
	border-radius: 0.325rem;
	margin-left: 0.7rem;
	background: #32b16c;
	color: #fff;
	font-size: 0.28rem;
	text-align: center;
	line-height: 0.65rem;
	float: left;
	cursor: pointer;
}
.layer{
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
	z-index: 99;
}

.cursor{
	cursor: /*url(../images/life/brush.ico),*/pointer;
}
.cls-17{
	font-weight: bold;
}