/* reset */
body, .cc-mobile-containt,.cc-mobile-containt div,.cc-mobile-containt dl,.cc-mobile-containt dt,.cc-mobile-containt dd
,.cc-mobile-containt ul,.cc-mobile-containt ol,.cc-mobile-containt li,.cc-mobile-containt h1,.cc-mobile-containt h2
,.cc-mobile-containt h3,.cc-mobile-containt h4,.cc-mobile-containt h5,.cc-mobile-containt h6,.cc-mobile-containt pre
,.cc-mobile-containt form,.cc-mobile-containt fieldset,.cc-mobile-containt input,.cc-mobile-containt textarea
,.cc-mobile-containt p,.cc-mobile-containt blockquote,.cc-mobile-containt th,.cc-mobile-containt td{
	padding: 0; 
    margin: 0; 
    box-sizing: border-box;
}
.cc-mobile-containt table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.cc-mobile-containt fieldset, .cc-mobile-containt img { 
    border: 0; 
    vertical-align: middle;
} 
.cc-mobile-containt address,.cc-mobile-containt caption,.cc-mobile-containt cite,.cc-mobile-containt code,.cc-mobile-containt dfn
,.cc-mobile-containt em,.cc-mobile-containt strong,.cc-mobile-containt th,.cc-mobile-containt var { 
    font-weight: normal; 
    font-style: normal; 
} 
.cc-mobile-containt ol,.cc-mobile-containt ul { 
    list-style: none; 
} 
.cc-mobile-containt caption,.cc-mobile-containt th { 
    text-align: left; 
} 
.cc-mobile-containt h1,.cc-mobile-containt h2,.cc-mobile-containt h3,.cc-mobile-containt h4,.cc-mobile-containt h5,.cc-mobile-containt h6 { 
    font-weight: normal; 
    font-size: 100%; 
} 
.cc-mobile-containt q:before,.cc-mobile-containt q:after { 
    content:'';
} 
.cc-mobile-containt abbr,.cc-mobile-containt acronym { 
    border: 0; 
}

/* style */
body{
	background-color: #303447;
}
.cc-mobile-containt{
	background-color: #4cbda7;
	position: relative;
	overflow: hidden;
	font-family: '微软雅黑';
}
.cc-mobile-containt .logo{
	position: fixed;
	text-align: center;
	left: 15px;
	top: 0;
}

.cc-mobile-containt .nav-list{
	position: fixed;
	right: 20px;
	top: 20px;
}
.cc-mobile-containt .nav-list li{
	width: 70px;
	height: 70px;
	margin-bottom: 25px;
	cursor:pointer;
}
.cc-mobile-containt .nav-list .text{
	color: #4cbda7;
	font-size: 16px;
	background: url("../image/pc/nav_active_bg.fa24dae6753e.png") no-repeat 0 0;
	line-height: 24px;
	padding: 12px 19px;
	font-family: '微软雅黑';
	text-decoration: none;
	display: none;
	cursor: pointer;
}
.cc-mobile-containt .nav-list .active .text{
	display: inline-block;
}
.cc-mobile-containt .nav-list a{
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	width: 70px;
	height: 70px;
	line-height: 66px;
	box-sizing: border-box;
	cursor: pointer;
	background: url("../image/pc/nav_bg.dcd9fd558a55.png") no-repeat 0 0;
	*padding: 18px 0;
}
.cc-mobile-containt .nav-list .active{
	position: relative;
}
.nav-list img{
	cursor: pointer;
}
.cc-mobile-containt .nav-list .active a{
	position: absolute;
	display:block;
	left:-75px;
	top:0;
	width:70px;
	height:70px;
}
.cc-mobile-containt .nav-list a:hover{
	background: url("../image/pc/nav_hover_bg.efef264fb0c0.png") no-repeat 0 0;
}

.cc-mobile-containt .views{
	width: 800px;
	margin: 0 auto;
	height: 644px;
	position: relative;
}
.cc-mobile-containt .step-list{
	width: 100%;
	height: 600px;
	position: relative;
}
.cc-mobile-containt .step-list li{
	display: none;
	height: 600px;
	width: 800px;
	position: absolute;
	top: 0;
	left: 0;
}
.cc-mobile-containt .step-list li.in,
.cc-mobile-containt .step-list li.out,
.cc-mobile-containt .step-list li.active{
	display: block;
}
.cc-mobile-containt .step-list .step-box{
	position: relative;
}
.cc-mobile-containt .step-list .step-box.step4-box{
	position: static;
}

.cc-mobile-containt .step-list .step1-box .floor{
	position: absolute;
	top: 413px;
	left: 58px;
}
.cc-mobile-containt .step-list .step1-box .room-bg{
	position: absolute;
	top: 98px;
	left: 194px;
}
.cc-mobile-containt .step-list .step1-box .boy{
	position: absolute;
	top: 277px;
	left: 396px;
}
.cc-mobile-containt .step-list .step1-box .girl{
	position: absolute;
	top: 277px;
	left: 238px;
}
.cc-mobile-containt .step-list .step1-box .phone{
	position: relative;
	margin-top: 0;
	left: 250px;
}
.cc-mobile-containt .step-list .step1-box .tip1{
	position: absolute;
	top: 286px;
	left: 51px;
}
.cc-mobile-containt .step-list .step1-box .tip2{
	position: absolute;
	top: 286px;
	left: 576px;
}
.cc-mobile-containt .step-list .step2-box{
	text-align: center;
	padding-top: 73px;
}
.cc-mobile-containt .step-list .step2-box .tip3{
	margin-bottom: 25px;
}
.cc-mobile-containt .step-list .step3-box{
	text-align: center;
}
.cc-mobile-containt .step-list .step3-box .tip4{
	position: absolute;
	top: 280px;
	left: 45px;
}
.cc-mobile-containt .step-list .step3-box .tip5{
	position: absolute;
	top: 280px;
	left: 588px;
}
.cc-mobile-containt .step-dot-list{
	overflow: hidden;
	width: 78px;
	height: 10px;
	margin: 25px auto 30px;
}
.cc-mobile-containt .step-dot-list li{
	width: 10px;
	height: 10px;
	background: url("../image/pc/step_page.7abe03dc142b.png") no-repeat 0 0;
	margin-right: 5px;
	float: left;
}
.cc-mobile-containt .step-dot-list li.active{
	width: 28px;
	background: url("../image/pc/step_page_active.2dd595d40e30.png") no-repeat 0 0;
}
.cc-mobile-containt .download{
	height: 166px;
	background-color: #303447;
	margin-top: 96px;
	position: absolute;
	bottom: 0px;
	width: 100%;
}
.cc-mobile-containt .download .content{
	width: 530px;
	margin: 0 auto;
	background-color: #303447;
	position: relative;
	*width: 550px;
}
.cc-mobile-containt .download .download-botton{
	background-color: #4cbda7;
	position: absolute;
}
.cc-mobile-containt .download .dl-link{
	line-height: 45px;
	width: 170px;
	height: 54px;
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	background: url("../image/pc/download_bg.411726cd8464.png") no-repeat 0 0;
	*padding: 6px 0;
}
.cc-mobile-containt .download .dl-link:hover{
	background: url("../image/pc/download_hover_bg.902886c32162.png") no-repeat 0 0;
}
.cc-mobile-containt .download .dl-iphone{
	left: 8px;
	top: -70px;
}
.cc-mobile-containt .download .dl-android{
	right: 8px;
	top: -70px;
}
.cc-mobile-containt .download .dl-code{
	width: 222px;
	height: 162px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	line-height: 162px;
	text-align: center;
	top: -82px;
	background: url("../image/pc/code_bg.cd9c37068f2e.png") no-repeat 0 0;
}
.cc-mobile-containt .download .dl-code-inner{
	*padding: 32px 0;
}
.cc-mobile-containt .download .send-addr-box{
	margin: -68px auto 0;
}
.cc-mobile-containt .download .send-addr-box .verify-box,
.cc-mobile-containt .download .send-addr-box .phone-box{
	height: 68px;
	box-sizing: border-box;
	padding: 5px;
	float: left;
}
.cc-mobile-containt .download .send-addr-box .verify-box{
	width: 220px;
	background: url("../image/pc/addr_verify_bg.f0108784805e.png") no-repeat 0 0;
}
.cc-mobile-containt .download .send-addr-box .phone-box{
	width: 310px;
	background: url("../image/pc/addr_box_bg.123d0cef3291.png") no-repeat 0 0;
}
.cc-mobile-containt .download .send-addr-box input{
	background-color: transparent;
	border: none;
	line-height: 22px;
	padding: 6px 17px;
	outline: none;
	color: #fff;
	width: 184px;
	*vertical-align: top;
	*width: 156px;
	font-family: '微软雅黑';
}
.cc-mobile-containt .download .send-addr-box input.default{
	color: #5d6177;
}
.cc-mobile-containt .download .send-addr-box .verify-code{
	width: 110px;*width: 100px; padding:6px 12px; 
}
.cc-mobile-containt .download .send-addr-box .verify-code-img{
	float:right;
	margin-right: 15px;
}
.cc-mobile-containt .download .send-addr-box button{
	width: 108px;
	height: 32px;
	border: none;
	background: url("../image/pc/send_addr_bg.c88dedbae05d.png") no-repeat 0 0;
	color: #fff;
	font-family: '微软雅黑';
	font-size: 14px;
	cursor: pointer;
}
.cc-mobile-containt .download .send-addr-box button:hover{
	background: url("../image/pc/send_addr_hover_bg.0afe2c593de7.png") no-repeat 0 0;
}
.cc-mobile-containt .download .send-addr-box .m-errTips {
	color: #C00;
	position: absolute;
	left: 100%;
	white-space: nowrap;
	display: none;
	padding-left: 10px;
	font-size: 16px;
	line-height: 42px;
}

/* animate */
@keyframes step1InFloor{
	from{transform:rotateX(90deg);opacity: 0;} 
	to {transform:rotateX(0deg);opacity: 1;}
}
@-moz-keyframes step1InFloor /* Firefox */{
	from {-moz-transform:rotateX(90deg);opacity: 0;} 
	to {-moz-transform:rotateX(0deg);opacity: 1;}
}
@-webkit-keyframes step1InFloor /* Safari 和 Chrome */{
	from {-webkit-transform:rotateX(90deg);opacity: 0;} 
	to {-webkit-transform:rotateX(0deg);opacity: 1;}
}
@-o-keyframes step1InFloor /* Opera */{
	from {-o-transform:rotateX(90deg);opacity: 0;} 
	to {-o-transform:rotateX(0deg);opacity: 1;}
}
@keyframes step1OutFloor{
	from{transform:rotateX(0deg);opacity: 1;}
	to {transform:rotateX(90deg);opacity: 0;} 
}
@-moz-keyframes step1OutFloor /* Firefox */{
	from{-moz-transform:rotateX(0deg);opacity: 1;}
	to {-moz-transform:rotateX(90deg);opacity: 0;} 
}
@-webkit-keyframes step1OutFloor /* Safari 和 Chrome */{
	from{-webkit-transform:rotateX(0deg);opacity: 1;}
	to {-webkit-transform:rotateX(90deg);opacity: 0;} 
}
@-o-keyframes step1OutFloor /* Opera */{
	from{-o-transform:rotateX(0deg);opacity: 1;}
	to {-o-transform:rotateX(90deg);opacity: 0;} 
}
@keyframes step1ActiveFloor{
	25%{transform:translateX(-10px) skewX(10deg);}
	50% {transform:translateX(0px) skewX(0deg);} 
	75% {transform:translateX(10px) skewX(-10deg);} 
	100% {transform:translateX(0px) skewX(0);} 
}
@-moz-keyframes step1ActiveFloor /* Firefox */{
	25%{-moz-transform:translateX(-10px) skewX(10deg);}
	50% {-moz-transform:translateX(0px) skewX(0deg);} 
	75% {-moz-transform:translateX(10px) skewX(-10deg);} 
	100% {-moz-transform:translateX(0px) skewX(0);} 
}
@-webkit-keyframes step1ActiveFloor /* Safari 和 Chrome */{
	25%{-webkit-transform:translateX(-10px) skewX(10deg);}
	50% {-webkit-transform:translateX(0px) skewX(0deg);} 
	75% {-webkit-transform:translateX(10px) skewX(-10deg);} 
	100% {-webkit-transform:translateX(0px) skewX(0);} 
}
@-o-keyframes step1ActiveFloor /* Opera */{
	25%{-o-transform:translateX(-10px) skewX(10deg);}
	50% {-o-transform:translateX(0px) skewX(0deg);} 
	75% {-o-transform:translateX(10px) skewX(-10deg);} 
	100% {-o-transform:translateX(0px) skewX(0);} 
}
.cc-mobile-containt .step-list li.in .step1-box .floor{
	animation: step1InFloor 1s ease;
	-moz-animation: step1InFloor 1s ease;/* Firefox: */
	-webkit-animation: step1InFloor 1s ease;/* Safari 和 Chrome: */
	-o-animation: step1InFloor 1s ease;/* Opera: */

	transform-origin:100% 100%;	
	-moz-transform-origin:100% 100%;/* Firefox: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
	-o-transform-origin:100% 100%;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step1-box .floor{
	animation: step1OutFloor 0.5s ease 0.6s forwards;
	-moz-animation: step1OutFloor 0.5s ease 0.6s forwards;/* Firefox: */
	-webkit-animation: step1OutFloor 0.5s ease 0.6s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutFloor 0.5s ease 0.6s forwards;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.active .step1-box .floor{
	animation: step1ActiveFloor 5s ease infinite;
	-moz-animation: step1ActiveFloor 5s ease infinite;/* Firefox: */
	-webkit-animation: step1ActiveFloor 5s ease infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveFloor 5s ease infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}

@keyframes step1InBg{
	from {transform:scale(0,0);opacity: 0;}
	to {transform:scale(1,1);opacity: 1;}
}
@-moz-keyframes step1InBg /* Firefox */{
	from {-moz-transform:scale(0,0);opacity: 0;}
	to {-moz-transform:scale(1,1);opacity: 1;}
}
@-webkit-keyframes step1InBg /* Safari 和 Chrome */{
	from {-webkit-transform:scale(0,0);opacity: 0;}
	to {-webkit-transform:scale(1,1);opacity: 1;}
}
@-o-keyframes step1InBg /* Opera */{
	from {-o-transform:scale(0,0);opacity: 0;}
	to {-o-transform:scale(1,1);opacity: 1;}
}
@keyframes step1OutBg{
	from {transform:scale(1,1);opacity: 1;}
	to {transform:scale(0,0);opacity: 0;}
}
@-moz-keyframes step1OutBg /* Firefox */{
	from {-moz-transform:scale(1,1);opacity: 1;}
	to {-moz-transform:scale(0,0);opacity: 0;}
}
@-webkit-keyframes step1OutBg /* Safari 和 Chrome */{
	from {-webkit-transform:scale(1,1);opacity: 1;}
	to {-webkit-transform:scale(0,0);opacity: 0;}
}
@-o-keyframes step1OutBg /* Opera */{
	from {-o-transform:scale(1,1);opacity: 1;}
	to {-o-transform:scale(0,0);opacity: 0;}
}
@keyframes step1ActiveBg{
	25%{transform:translateX(-30px);}
	50% {transform:translateX(0px);} 
	75% {transform:translateX(30px);} 
	100% {transform:translateX(0px);} 
}
@-moz-keyframes step1ActiveBg /* Firefox */{
	25%{-moz-transform:translateX(-30px);}
	50% {-moz-transform:translateX(0px);} 
	75% {-moz-transform:translateX(30px);} 
	100% {-moz-transform:translateX(0px);} 
}
@-webkit-keyframes step1ActiveBg /* Safari 和 Chrome */{
	25%{-webkit-transform:translateX(-30px);}
	50% {-webkit-transform:translateX(0px);} 
	75% {-webkit-transform:translateX(30px);} 
	100% {-webkit-transform:translateX(0px);} 
}
@-o-keyframes step1ActiveBg /* Opera */{
	25%{-o-transform:translateX(-30px);}
	50% {-o-transform:translateX(0px);} 
	75% {-o-transform:translateX(30px);} 
	100% {-o-transform:translateX(0px);} 
}
.cc-mobile-containt .step-list li.in .step1-box .room-bg{
	animation: step1InBg 1s ease 0s backwards;
	-moz-animation: step1InBg 1s ease 0s backwards;/* Firefox: */
	-webkit-animation: step1InBg 1s ease 0s backwards;/* Safari 和 Chrome: */
	-o-animation: step1InBg 1s ease 0s backwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.out .step1-box .room-bg{
	animation: step1OutBg 0.5s ease 0.6s forwards;
	-moz-animation: step1OutBg 0.5s ease 0.6s forwards;/* Firefox: */
	-webkit-animation: step1OutBg 0.5s ease 0.6s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutBg 0.5s ease 0.6s forwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.active .step1-box .room-bg{
	animation: step1ActiveBg 5s ease infinite;
	-moz-animation: step1ActiveBg 5s ease infinite;/* Firefox: */
	-webkit-animation: step1ActiveBg 5s ease infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveBg 5s ease infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}

@keyframes step1InBoy{
	from {transform:translate(250px,-150px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}

@-moz-keyframes step1InBoy /* Firefox */{
	from {-moz-transform:translate(250px,-150px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step1InBoy /* Safari 和 Chrome */{
	from {-webkit-transform:translate(250px,-150px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step1InBoy /* Opera */{
	from {-o-transform:translate(250px,-150px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}
@keyframes step1OutBoy{
	from {transform:translate(0px,0px);opacity: 1;}
	to {transform:translate(250px,-150px);opacity: 0;}
}

@-moz-keyframes step1OutBoy /* Firefox */{
	from {-moz-transform:translate(0px,0px);opacity: 1;}
	to {-moz-transform:translate(250px,-150px);opacity: 0;}
}

@-webkit-keyframes step1OutBoy /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,0px);opacity: 1;}
	to {-webkit-transform:translate(250px,-150px);opacity: 0;}
}
@-o-keyframes step1OutBoy /* Opera */{
	from {-o-transform:translate(0px,0px);opacity: 1;}
	to {-o-transform:translate(250px,-150px);opacity: 0;}
}

@keyframes step1ActiveBoy{
	25%{transform:translateX(-16px);}
	50% {transform:translateX(0px);} 
	75% {transform:translateX(16px);} 
	100% {transform:translateX(0px);} 
}
@-moz-keyframes step1ActiveBoy /* Firefox */{
	25%{-moz-transform:translateX(-16px);}
	50% {-moz-transform:translateX(0px);} 
	75% {-moz-transform:translateX(16px);} 
	100% {-moz-transform:translateX(0px);} 
}
@-webkit-keyframes step1ActiveBoy /* Safari 和 Chrome */{
	25%{-webkit-transform:translateX(-16px);}
	50% {-webkit-transform:translateX(0px);} 
	75% {-webkit-transform:translateX(16px);} 
	100% {-webkit-transform:translateX(0px);} 
}
@-o-keyframes step1ActiveBoy /* Opera */{
	25%{-o-transform:translateX(-16px);}
	50% {-o-transform:translateX(0px);} 
	75% {-o-transform:translateX(16px);} 
	100% {-o-transform:translateX(0px);} 
}
.cc-mobile-containt .step-list li.in .step1-box .boy{
	animation: step1InBoy 1s ease-out 1s backwards;
	-moz-animation: step1InBoy 1s ease-out 1s backwards;/* Firefox: */
	-webkit-animation: step1InBoy 1s ease-out 1s backwards;/* Safari 和 Chrome: */
	-o-animation: step1InBoy 1s ease-out 1s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step1-box .boy{
	animation: step1OutBoy 0.5s ease-out 0.5s forwards;
	-moz-animation: step1OutBoy 0.5s ease-out 0.5s forwards;/* Firefox: */
	-webkit-animation: step1OutBoy 0.5s ease-out 0.5s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutBoy 0.5s ease-out 0.5s forwards;/* Opera: */
}
.cc-mobile-containt .step-list li.active .step1-box .boy{
	animation: step1ActiveBoy 5s ease infinite;
	-moz-animation: step1ActiveBoy 5s ease infinite;/* Firefox: */
	-webkit-animation: step1ActiveBoy 5s ease infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveBoy 5s ease infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}

@keyframes step1InGirl{
	from {transform:translate(-250px,-150px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}
@-moz-keyframes step1InGirl /* Firefox */{
	from {-moz-transform:translate(-250px,-150px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step1InGirl /* Safari 和 Chrome */{
	from {-webkit-transform:translate(-250px,-150px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step1InGirl /* Opera */{
	from {-o-transform:translate(-250px,-150px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}
@keyframes step1OutGirl{
	from {transform:translate(0px,0px);opacity: 1;}
	to {transform:translate(-250px,-150px);opacity: 0;}
}
@-moz-keyframes step1OutGirl /* Firefox */{
	from {-moz-transform:translate(0px,0px);opacity: 1;}
	to {-moz-transform:translate(-250px,-150px);opacity: 0;}
}

@-webkit-keyframes step1OutGirl /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,0px);opacity: 1;}
	to {-webkit-transform:translate(-250px,-150px);opacity: 0;}
}
@-o-keyframes step1OutGirl /* Opera */{
	from {-o-transform:translate(0px,0px);opacity: 1;}
	to {-o-transform:translate(-250px,-150px);opacity: 0;}
}

@keyframes opacity {
	from {opacity: 1;}
	to {opacity: 0;}
}
@-moz-keyframes opacity  /* Firefox */{
	from {opacity: 1;}
	to {opacity: 0;}
}

@-webkit-keyframes opacity  /* Safari 和 Chrome */{
	from {opacity: 1;}
	to {opacity: 0;}
}
@-o-keyframes opacity  /* Opera */{
	from {opacity: 1;}
	to {opacity: 0;}
}

@keyframes step1ActiveGirl{
	25%{transform:translateX(-10px);}
	50% {transform:translateX(0px);} 
	75% {transform:translateX(10px);} 
	100% {transform:translateX(0px);} 
}
@-moz-keyframes step1ActiveGirl /* Firefox */{
	25%{-moz-transform:translateX(-10px);}
	50% {-moz-transform:translateX(0px);} 
	75% {-moz-transform:translateX(10px);} 
	100% {-moz-transform:translateX(0px);} 
}
@-webkit-keyframes step1ActiveGirl /* Safari 和 Chrome */{
	25%{-webkit-transform:translateX(-10px);}
	50% {-webkit-transform:translateX(0px);} 
	75% {-webkit-transform:translateX(10px);} 
	100% {-webkit-transform:translateX(0px);} 
}
@-o-keyframes step1ActiveGirl /* Opera */{
	25%{-o-transform:translateX(-10px);}
	50% {-o-transform:translateX(0px);} 
	75% {-o-transform:translateX(10px);} 
	100% {-o-transform:translateX(0px);} 
}
.cc-mobile-containt .step-list li.in .step1-box .girl{
	animation: step1InGirl 1s ease-out 1.5s backwards;
	-moz-animation: step1InGirl 1s ease-out 1.5s backwards;/* Firefox: */
	-webkit-animation: step1InGirl 1s ease-out 1.5s backwards;/* Safari 和 Chrome: */
	-o-animation: step1InGirl 1s ease-out 1.5s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step1-box .girl{
	animation: step1OutGirl 0.5s ease-out 0.4s forwards;
	-moz-animation: step1OutGirl 0.5s ease-out 0.4s forwards;/* Firefox: */
	-webkit-animation: step1OutGirl 0.5s ease-out 0.4s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutGirl 0.5s ease-out 0.4s forwards;/* Opera: */
}
.cc-mobile-containt .step-list li.active .step1-box .girl{
	animation: step1ActiveGirl 5s ease infinite;
	-moz-animation: step1ActiveGirl 5s ease infinite;/* Firefox: */
	-webkit-animation: step1ActiveGirl 5s ease infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveGirl 5s ease infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}

@keyframes step1InPhone{
	from {transform:scale(2,2);opacity: 0;}
	to {transform:scale(1,1);opacity: 1;}
}
@-moz-keyframes step1InPhone /* Firefox */{
	from {-moz-transform:scale(2,2);opacity: 0;}
	to {-moz-transform:scale(1,1);opacity: 1;}
}

@-webkit-keyframes step1InPhone /* Safari 和 Chrome */{
	from {-webkit-transform:scale(2,2);opacity: 0;}
	to {-webkit-transform:scale(1,1);opacity: 1;}
}
@-o-keyframes step1InPhone /* Opera */{
	from {-o-transform:scale(2,2);opacity: 0;}
	to {-o-transform:scale(1,1);opacity: 1;}
}
@keyframes step1OutPhone{
	from {transform:scale(1,1);opacity: 1;}
	to {transform:scale(2,2);opacity: 0;}
}
@-moz-keyframes step1OutPhone /* Firefox */{
	from {-moz-transform:scale(1,1);opacity: 1;}
	to {-moz-transform:scale(2,2);opacity: 0;}
}

@-webkit-keyframes step1OutPhone /* Safari 和 Chrome */{
	from {-webkit-transform:scale(1,1);opacity: 1;}
	to {-webkit-transform:scale(2,2);opacity: 0;}
}
@-o-keyframes step1OutPhone /* Opera */{
	from {-o-transform:scale(1,1);opacity: 1;}
	to {-o-transform:scale(2,2);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step1-box .phone{
	animation: step1InPhone 1s ease-out 2s backwards;
	-moz-animation: step1InPhone 1s ease-out 2s backwards;/* Firefox: */
	-webkit-animation: step1InPhone 1s ease-out 2s backwards;/* Safari 和 Chrome: */
	-o-animation: step1InPhone 1s ease-out 2s backwards;/* Opera: */
}

.cc-mobile-containt .step-list li.out .step1-box .phone,
.cc-mobile-containt .step-list li.out .step4-box .phone{
	animation: step1OutPhone 0.5s ease-out 0.3s forwards;
	-moz-animation: step1OutPhone 0.5s ease-out 0.3s forwards;/* Firefox: */
	-webkit-animation: step1OutPhone 0.5s ease-out 0.3s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutPhone 0.5s ease-out 0.3s forwards;/* Opera: */
}

@keyframes step1Intip1{
	from {transform:translate(-200px,0px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}
@-moz-keyframes step1Intip1 /* Firefox */{
	from {-moz-transform:translate(-200px,0px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step1Intip1 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(-200px,0px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step1Intip1 /* Opera */{
	from {-o-transform:translate(-200px,0px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}
@keyframes step1Outtip1{
	from {transform:translate(0px,0px);opacity: 1;}
	to {transform:translate(-200px,0px);opacity: 0;}
}
@-moz-keyframes step1Outtip1 /* Firefox */{
	from {-moz-transform:translate(0px,0px);opacity: 1;}
	to {-moz-transform:translate(-200px,0px);opacity: 0;}
}

@-webkit-keyframes step1Outtip1 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,0px);opacity: 1;}
	to {-webkit-transform:translate(-200px,0px);opacity: 0;}
}
@-o-keyframes step1Outtip1 /* Opera */{
	from {-o-transform:translate(0px,0px);opacity: 1;}
	to {-o-transform:translate(-200px,0px);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step3-box .tip4{
	animation: step1Intip1 1s ease-out 1s backwards;
	-moz-animation: step1Intip1 1s ease-out 1s backwards;/* Firefox: */
	-webkit-animation: step1Intip1 1s ease-out 1s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip1 1s ease-out 1s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.in .step1-box .tip1{
	animation: step1Intip1 1s ease-out 3s backwards;
	-moz-animation: step1Intip1 1s ease-out 3s backwards;/* Firefox: */
	-webkit-animation: step1Intip1 1s ease-out 3s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip1 1s ease-out 3s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step3-box .tip4,
.cc-mobile-containt .step-list li.out .step1-box .tip1,
.cc-mobile-containt .step-list li.out .step4-box .pl_msg1{
	animation: step1Outtip1 0.5s ease-out 0.5s forwards;
	-moz-animation: step1Outtip1 0.5s ease-out 0.5s forwards;/* Firefox: */
	-webkit-animation: step1Outtip1 0.5s ease-out 0.5s forwards;/* Safari 和 Chrome: */
	-o-animation: step1Outtip1 0.5s ease-out 0.5s forwards;/* Opera: */
}

@keyframes step1Intip2{
	from {transform:translate(200px,0px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}
@-moz-keyframes step1Intip2 /* Firefox */{
	from {-moz-transform:translate(200px,0px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step1Intip2 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(200px,0px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step1Intip2 /* Opera */{
	from {-o-transform:translate(200px,0px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}
@keyframes step1Outtip2{
	from {transform:translate(0px,0px);opacity: 1;}
	to {transform:translate(200px,0px);opacity: 0;}
}
@-moz-keyframes step1Outtip2 /* Firefox */{
	from {-moz-transform:translate(0px,0px);opacity: 1;}
	to {-moz-transform:translate(200px,0px);opacity: 0;}
}

@-webkit-keyframes step1Outtip2 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,0px);opacity: 1;}
	to {-webkit-transform:translate(200px,0px);opacity: 0;}
}
@-o-keyframes step1Outtip2 /* Opera */{
	from {-o-transform:translate(0px,0px);opacity: 1;}
	to {-o-transform:translate(200px,0px);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step3-box .tip5{
	animation: step1Intip2 1s ease-out 1.5s backwards;
	-moz-animation: step1Intip2 1s ease-out 1.5s backwards;/* Firefox: */
	-webkit-animation: step1Intip2 1s ease-out 1.5s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip2 1s ease-out 4s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.in .step1-box .tip2{
	animation: step1Intip2 1s ease-out 4s backwards;
	-moz-animation: step1Intip2 1s ease-out 4s backwards;/* Firefox: */
	-webkit-animation: step1Intip2 1s ease-out 4s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip2 1s ease-out 4s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step3-box .tip5,
.cc-mobile-containt .step-list li.out .step1-box .tip2,
.cc-mobile-containt .step-list li.out .step4-box .pl_msg2{
	animation: step1Outtip2 0.5s ease-out 1s forwards;
	-moz-animation: step1Outtip2 0.5s ease-out 1s forwards;/* Firefox: */
	-webkit-animation: step1Outtip2 0.5s ease-out 1s forwards;/* Safari 和 Chrome: */
	-o-animation: step1Outtip2 0.5s ease-out 1s forwards;/* Opera: */
}


@keyframes step2InGame{
	from {transform:rotate(70deg);opacity: 0;}
	to {transform:rotate(0deg);opacity: 1;}
}
@-moz-keyframes step2InGame /* Firefox */{
	from {-moz-transform:rotate(70deg);opacity: 0;}
	to {-moz-transform:rotate(0deg);opacity: 1;}
}

@-webkit-keyframes step2InGame /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(70deg);opacity: 0;}
	to {-webkit-transform:rotate(0deg);opacity: 1;}
}
@-o-keyframes step2InGame /* Opera */{
	from {-o-transform:rotate(70deg);opacity: 0;}
	to {-o-transform:rotate(0deg);opacity: 1;}
}
@keyframes step4InGame{
	from {transform:rotate(-90deg);opacity: 0;}
	to {transform:rotate(0deg);opacity: 1;}
}
@-moz-keyframes step4InGame /* Firefox */{
	from {-moz-transform:rotate(-90deg);opacity: 0;}
	to {-moz-transform:rotate(0deg);opacity: 1;}
}

@-webkit-keyframes step4InGame /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(-90deg);opacity: 0;}
	to {-webkit-transform:rotate(0deg);opacity: 1;}
}
@-o-keyframes step4InGame /* Opera */{
	from {-o-transform:rotate(-90deg);opacity: 0;}
	to {-o-transform:rotate(0deg);opacity: 1;}
}

@keyframes step4OutGame{
	from {transform:rotate(0deg);opacity: 1;}
	to {transform:rotate(90deg);opacity: 0;}
}
@-moz-keyframes step4OutGame /* Firefox */{
	from {-moz-transform:rotate(0deg);opacity: 1;}
	to {-moz-transform:rotate(90deg);opacity: 0;}
}

@-webkit-keyframes step4OutGame /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(0deg);opacity: 1;}
	to {-webkit-transform:rotate(90deg);opacity: 0;}
}
@-o-keyframes step4OutGame /* Opera */{
	from {-o-transform:rotate(0deg);opacity: 1;}
	to {-o-transform:rotate(90deg);opacity: 0;}
}

@keyframes step2OutGame{
	from {transform:rotate(0deg);opacity: 1;}
	to {transform:rotate(-70deg);opacity: 0;}
}
@-moz-keyframes step2OutGame /* Firefox */{
	from {-moz-transform:rotate(0deg);opacity: 1;}
	to {-moz-transform:rotate(-70deg);opacity: 0;}
}

@-webkit-keyframes step2OutGame /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(0deg);opacity: 1;}
	to {-webkit-transform:rotate(-70deg);opacity: 0;}
}
@-o-keyframes step2OutGame /* Opera */{
	from {-o-transform:rotate(0deg);opacity: 1;}
	to {-o-transform:rotate(-70deg);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step2-box .game{
	animation: step2InGame 0.5s ease-out backwards;
	-moz-animation: step2InGame 0.5s ease-out backwards;/* Firefox: */
	-webkit-animation: step2InGame 0.5s ease-out backwards;/* Safari 和 Chrome: */
	-o-animation: step2InGame 0.5s ease-out backwards;/* Opera: */
	transform-origin:100% 100%;	
	-moz-transform-origin:100% 100%;/* Firefox: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
	-o-transform-origin:100% 100%;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step2-box .game{
	animation: step2OutGame 0.5s ease-out forwards;
	-moz-animation: step2OutGame 0.5s ease-out forwards;/* Firefox: */
	-webkit-animation: step2OutGame 0.5s ease-out forwards;/* Safari 和 Chrome: */
	-o-animation: step2OutGame 0.5s ease-out forwards;/* Opera: */
	transform-origin:0% 100%;	
	-moz-transform-origin:0% 100%;/* Firefox: */
	-webkit-transform-origin:0% 100%;	/* Safari 和 Chrome */
	-o-transform-origin:0% 100%;/* Opera: */
}

@keyframes step2Intip1{
	from {transform:translate(0px,-100px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}
@-moz-keyframes step2Intip1 /* Firefox */{
	from {-moz-transform:translate(0px,-100px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step2Intip1 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,-100px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step2Intip1 /* Opera */{
	from {-o-transform:translate(0px,-100px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}
@keyframes step2Outtip1{
	from {transform:translate(0px,0px);opacity: 1;}
	to {transform:translate(0px,-100px);opacity: 0;}
}
@-moz-keyframes step2Outtip1 /* Firefox */{
	from {-moz-transform:translate(0px,0px);opacity: 1;}
	to {-moz-transform:translate(0px,-100px);opacity: 0;}
}

@-webkit-keyframes step2Outtip1 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(0px,0px);opacity: 1;}
	to {-webkit-transform:translate(0px,-100px);opacity: 0;}
}
@-o-keyframes step2Outtip1 /* Opera */{
	from {-o-transform:translate(0px,0px);opacity: 1;}
	to {-o-transform:translate(0px,-100px);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step2-box .tip3{
	animation: step2Intip1 1s ease-out 1s backwards;
	-moz-animation: step2Intip1 1s ease-out 1s backwards;/* Firefox: */
	-webkit-animation: step2Intip1 1s ease-out 1s backwards;/* Safari 和 Chrome: */
	-o-animation: step2Intip1 1s ease-out 1s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step2-box .tip3{
	animation: step2Outtip1 0.5s ease-out 0.1s forwards;
	-moz-animation: step2Outtip1 0.5s ease-out 0.1s forwards;/* Firefox: */
	-webkit-animation: step2Outtip1 0.5s ease-out 0.1s forwards;/* Safari 和 Chrome: */
	-o-animation: step2Outtip1 0.5s ease-out 0.1s forwards;/* Opera: */
}



@keyframes step3InboyGirl{
	from {transform:rotate(480deg) scale(0);opacity: 0;}
	to {transform:rotate(0deg) scale(1);opacity: 1;}
}
@-moz-keyframes step3InboyGirl /* Firefox */{
	from {-moz-transform:rotate(480deg) scale(0);opacity: 0;}
	to {-moz-transform:rotate(0deg) scale(1);opacity: 1;}
}

@-webkit-keyframes step3InboyGirl /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(480deg) scale(0);opacity: 0;}
	to {-webkit-transform:rotate(0deg) scale(1);opacity: 1;}
}
@-o-keyframes step3InboyGirl /* Opera */{
	from {-o-transform:rotate(480deg) scale(0);opacity: 0;}
	to {-o-transform:rotate(0deg) scale(1);opacity: 1;}
}
@keyframes step3OutboyGirl{
	from {transform:rotate(0deg) scale(1);opacity: 1;}
	to {transform:rotate(-480deg) scale(0);opacity: 0;}
}
@-moz-keyframes step3OutboyGirl /* Firefox */{
	from {-moz-transform:rotate(0deg) scale(1);opacity: 1;}
	to {-moz-transform:rotate(-480deg) scale(0);opacity: 0;}
}

@-webkit-keyframes step3OutboyGirl /* Safari 和 Chrome */{
	from {-webkit-transform:rotate(0deg) scale(1);opacity: 1;}
	to {-webkit-transform:rotate(-480deg) scale(0);opacity: 0;}
}
@-o-keyframes step3OutboyGirl /* Opera */{
	from {-o-transform:rotate(0deg) scale(1);opacity: 1;}
	to {-o-transform:rotate(-480deg) scale(0);opacity: 0;}
}
.cc-mobile-containt .step-list li.in .step3-box .boy_girl{
	animation: step3InboyGirl 0.5s ease-out backwards;
	-moz-animation: step3InboyGirl 0.5s ease-out backwards;/* Firefox: */
	-webkit-animation: step3InboyGirl 0.5s ease-out backwards;/* Safari 和 Chrome: */
	-o-animation: step3InboyGirl 0.5s ease-out backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step3-box .boy_girl{
	animation: step3OutboyGirl 0.5s ease-out forwards;
	-moz-animation: step3OutboyGirl 0.5s ease-out forwards;/* Firefox: */
	-webkit-animation: step3OutboyGirl 0.5s ease-out forwards;/* Safari 和 Chrome: */
	-o-animation: step3OutboyGirl 0.5s ease-out forwards;/* Opera: */
}


/****手机直播样式***/
.cc-mobile-containt .step-list .step4-box .pl_bg1{
	position: absolute;
	top: 300px;
	left: 58px;
}
.cc-mobile-containt .step-list .step4-box .pl_bg2{
	position: absolute;
	top: 0;
	left: 50px;
}
.cc-mobile-containt .step-list li.in .step4-box .pl_bg1,
.cc-mobile-containt .step-list li.in .step4-box .pl_bg2{
	animation: step1InBg 1s ease 0s backwards;
	-moz-animation: step1InBg 1s ease 0s backwards;/* Firefox: */
	-webkit-animation: step1InBg 1s ease 0s backwards;/* Safari 和 Chrome: */
	-o-animation: step1InBg 1s ease 0s backwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.out .step4-box .pl_bg1,
.cc-mobile-containt .step-list li.out .step4-box .pl_bg2,
.cc-mobile-containt .step-list li.out .step4-box .pl_sun,
.cc-mobile-containt .step-list li.out .step4-box .pl_dot{
	animation: step1OutBg 0.5s ease 0.6s forwards;
	-moz-animation: step1OutBg 0.5s ease 0.6s forwards;/* Firefox: */
	-webkit-animation: step1OutBg 0.5s ease 0.6s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutBg 0.5s ease 0.6s forwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.active .step4-box .pl_bg1,
.cc-mobile-containt .step-list li.active .step4-box .pl_bg2{
	animation: step1ActiveBg 5s linear infinite;
	-moz-animation: step1ActiveBg 5s linear infinite;/* Firefox: */
	-webkit-animation: step1ActiveBg 5s linear infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveBg 5s linear infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.active .step4-box .pl_people,
.cc-mobile-containt .step-list li.active .step4-box .pl_tm11,
.cc-mobile-containt .step-list li.active .step4-box .pl_tm21 {
	animation: step1ActiveGirl 5s ease infinite;
	-moz-animation: step1ActiveGirl 5s ease infinite;/* Firefox: */
	-webkit-animation: step1ActiveGirl 5s ease infinite;/* Safari 和 Chrome: */
	-o-animation: step1ActiveGirl 5s ease infinite;/* Opera: */
	-webkit-transform-origin:100% 100%;
}
.cc-mobile-containt .step-list li.out .step4-box .pl_people,
.cc-mobile-containt .step-list li.out .step4-box .pl_tm11,
.cc-mobile-containt .step-list li.out .step4-box .pl_tm21 {
	animation: step1OutGirl 0.5s ease 0.5s forwards;
	-moz-animation: step1OutGirl 0.5s ease 0.5s forwards;/* Firefox: */
	-webkit-animation: step1OutGirl 0.5s ease 0.5s forwards;/* Safari 和 Chrome: */
	-o-animation: step1OutGirl 0.5s ease 0.5s forwards;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step4-box .pl_tm{
		animation: opacity 0.5s ease 0.5s forwards;
	-moz-animation: opacity 0.5s ease 0.5s forwards;/* Firefox: */
	-webkit-animation: opacity 0.5s ease 0.5s forwards;/* Safari 和 Chrome: */
	-o-animation: opacity 0.5s ease 0.5s forwards;/* Opera: */
}
.cc-mobile-containt .step-list .step4-box .baby{
	position: absolute;
	left: 50%;
    top: 50%;
    z-index: 2;
    margin-left: -186px;
    margin-top: -300px;
	z-index:2;
}
.cc-mobile-containt .step-list .step4-box .pl_sun{
	position: absolute;
	top: 80px;
	left: 120px;
}
.cc-mobile-containt .step-list .step4-box .phone{
	position: relative;
	margin-top: 0;
	left: 250px;
}
.cc-mobile-containt .step-list li.in .step4-box .pl_sun,
.cc-mobile-containt .step-list li.in .step4-box .pl_dot{
	animation: step4InSun 0.5s ease 1s backwards;
	-moz-animation: step4InSun 0.5s ease 1s backwards;/* Firefox: */
	-webkit-animation: step4InSun 0.5s ease 1s backwards;/* Safari 和 Chrome: */
	-o-animation: step4InSun 0.5s ease 1s backwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
.cc-mobile-containt .step-list li.active .step4-box .pl_sun{
	animation: step4ActiveSun 5s linear infinite;
	-moz-animation: step4ActiveSun 5s linear infinite;/* Firefox: */
	-webkit-animation: step4ActiveSun 5s linear infinite;/* Safari 和 Chrome: */
	-o-animation: step4ActiveSun 5s linear infinite;/* Opera: */
	-webkit-transform-origin:50% 50%;
}


@keyframes step4InSun{
	from {transform:scale(0,0);opacity: 0;}
	to {transform:scale(1,1);opacity: 1;}
}
@-moz-keyframes step4InSun /* Firefox */{
	from {-moz-transform:scale(0,0);opacity: 0;}
	to {-moz-transform:scale(1,1);opacity: 1;}
}

@-webkit-keyframes step4InSun /* Safari 和 Chrome */{
	from {-webkit-transform:scale(0,0);opacity: 0;}
	to {-webkit-transform:scale(1,1);opacity: 1;}
}
@-o-keyframes step4InSun /* Opera */{
	from {-o-transform:scale(0,0);opacity: 0;}
	to {-o-transform:scale(1,1);opacity: 1;}
}

@keyframes step4ActiveSun{
	25%{transform:translateX(-20px) rotate(90deg);}
	50% {transform:translateX(0px) rotate(180deg);}
	75% {transform:translateX(20px) rotate(270deg);}
	100% {transform:translateX(0px) rotate(360deg);}
}
@-moz-keyframes step4ActiveSun /* Firefox */{
	25%{-moz-transform:translateX(-20px) rotate(90deg);}
	50% {-moz-transform:translateX(0px) rotate(180deg);}
	75% {-moz-transform:translateX(20px) rotate(270deg);}
	100% {-moz-transform:translateX(0px) rotate(360deg);}
}

@-webkit-keyframes step4ActiveSun /* Safari 和 Chrome */{
	25%{-webkit-transform:translateX(-20px) rotate(90deg);}
	50% {-webkit-transform:translateX(0px) rotate(180deg);}
	75% {-webkit-transform:translateX(20px) rotate(270deg);}
	100% {-webkit-transform:translateX(0px) rotate(360deg);}
}
@-o-keyframes step4ActiveSun /* Opera */{
	25%{-o-transform:translateX(-20px) rotate(90deg);}
	50% {-o-transform:translateX(0px) rotate(180deg);}
	75% {-o-transform:translateX(20px) rotate(270deg);}
	100% {-o-transform:translateX(0px) rotate(360deg);}
}

.cc-mobile-containt .step-list .step4-box .pl_tm1{
	position: absolute;
	top: 355px;
    left: 274px;
	z-index:3;
}
.cc-mobile-containt .step-list .step4-box .pl_tm2{
	position: absolute;
    top: 406px;
    left: 329px;
	z-index:3;
}
.cc-mobile-containt .step-list .step4-box .pl_tm3{
	position: absolute;
    top: 434px;
    left: 296px;
	z-index:3;
}
.cc-mobile-containt .step-list .step4-box .pl_leftHeart{
	position: absolute;
 	top: 353px;
    left: 102px;
	z-index:3;
}
.cc-mobile-containt .step-list .step4-box .pl_rightHeart{
	position: absolute;
    top: 384px;
    left: 482px;
	z-index:3;
}
.cc-mobile-containt .step-list li.in .step4-box .pl_tm1{
	animation: step4InTm1 0.5s linear .5s backwards;
	-moz-animation: step4InTm1 0.5s linear .5s backwards;/* Firefox: */
	-webkit-animation: step4InTm1 0.5s linear .5s backwards;/* Safari 和 Chrome: */
	-o-animation: step4InTm1 0.5s linear .5s backwards;/* Opera: */
	-webkit-transform-origin:50% 50%;	/* Safari 和 Chrome */
}
@keyframes step4InTm1{
	from {transform:translateY(20px);opacity: 0;}
	to {transform:translateY(0px);opacity: 1;}
}
@-moz-keyframes step4InTm1 /* Firefox */{
	from {-moz-transform:translateY(20px);opacity: 0;}
	to {-moz-transform:translateY(0px);opacity: 1;}
}

@-webkit-keyframes step4InTm1 /* Safari 和 Chrome */{
	from {-webkit-transform:translateY(20px);opacity: 0;}
	to {-webkit-transform:translateY(0px);opacity: 1;}
}
@-o-keyframes step4InTm1 /* Opera */{
	from {-o-transform:translateY(20px);opacity: 0;}
	to {-o-transform:translateY(0px);opacity: 1;}
}
.cc-mobile-containt .step-list li.in .step4-box .pl_tm2{
	animation: step4InTm1 .5s linear 1s backwards;
	-moz-animation: step4InTm1 .5s linear 1s backwards;/* Firefox: */
	-webkit-animation: step4InTm1 .5s linear 1s backwards;/* Safari 和 Chrome: */
	-o-animation: step4InTm1 .5s linear 1s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.in .step4-box .pl_tm3{
	animation: step4InTm1 .5s linear 1.5s backwards;
	-moz-animation: step4InTm1 .5s linear 1.5s backwards;/* Firefox: */
	-webkit-animation: step4InTm1 .5s linear 1.5s backwards;/* Safari 和 Chrome: */
	-o-animation: step4InTm1 .5s linear 1.5s backwards;/* Opera: */
}
@keyframes step4InTm2{
	from {transform:translate(100px,-50px);opacity: 0;}
	to {transform:translate(0px,0px);opacity: 1;}
}
@-moz-keyframes step4InTm2 /* Firefox */{
	from {-moz-transform:translate(100px,-50px);opacity: 0;}
	to {-moz-transform:translate(0px,0px);opacity: 1;}
}

@-webkit-keyframes step4InTm2 /* Safari 和 Chrome */{
	from {-webkit-transform:translate(100px,-50px);opacity: 0;}
	to {-webkit-transform:translate(0px,0px);opacity: 1;}
}
@-o-keyframes step4InTm2 /* Opera */{
	from {-o-transform:translate(100px,-50px);opacity: 0;}
	to {-o-transform:translate(0px,0px);opacity: 1;}
}

.cc-mobile-containt .step-list .step4-box .pl_msg1{
	position: absolute;
    left: 53px;
    top: 247px;
}
.cc-mobile-containt .step-list li.in .step4-box .pl_msg1{
	animation: step1Intip1 1s ease-out 2s backwards;
	-moz-animation: step1Intip1 1s ease-out 2s backwards;/* Firefox: */
	-webkit-animation: step1Intip1 1s ease-out 2s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip1 1s ease-out 2s backwards;/* Opera: */
}
.cc-mobile-containt .step-list .step4-box .pl_msg2{
	position: absolute;
	top: 250px;
	left: 550px;
}
.cc-mobile-containt .step-list li.in .step4-box .pl_msg2{
	animation: step1Intip2 1s ease-out 3s backwards;
	-moz-animation: step1Intip2 1s ease-out 3s backwards;/* Firefox: */
	-webkit-animation: step1Intip2 1s ease-out 3s backwards;/* Safari 和 Chrome: */
	-o-animation: step1Intip2 1s ease-out 3s backwards;/* Opera: */
}
.cc-mobile-containt .step-list li.in .step4-box .pl_leftHeart,.cc-mobile-containt .step-list li.in .step4-box .pl_rightHeart{
	display:none;
}
.cc-mobile-containt .step-list .active.in .step4-box .pl_leftHeart,.cc-mobile-containt .step-list .active.in .step4-box .pl_rightHeart{
	display:inline;
}

.cc-mobile-containt .step-list li.active .step4-box .pl_dot{
	animation: step4ActiveDot 5s linear infinite;
	-moz-animation: step4ActiveDot 5s linear infinite;/* Firefox: */
	-webkit-animation: step4ActiveDot 5s linear infinite;/* Safari 和 Chrome: */
	-o-animation: step4ActiveDot 5s linear infinite;/* Opera: */
	-webkit-transform-origin:50% 50%;
}
.cc-mobile-containt .step-list .step4-box .pl_dot1{
	position: absolute;
	top: 445px;
	left: 603px;
}
.cc-mobile-containt .step-list .step4-box .pl_dot2{
	position:absolute;
	top: 450px;
	left: 692px;
}
.cc-mobile-containt .step-list .step4-box .pl_dot3{
	position:absolute;
	top: 440px;
	left: 700px;
}
.cc-mobile-containt .step-list .step4-box .pl_dot4{
	position:absolute;
	top: 430px;
	left: 720px;
}
@keyframes step4ActiveDot{
	25%{transform:translate(-30px,10px) ;}
	50% {transform:translate(0px,20px) ;}
	75% {transform:translate(30px,30px) ;}
	100% {transform:translate(0px,40px) ;}
}
@-moz-keyframes step4ActiveDot /* Firefox */{
	25%{-moz-transform:translate(-30px,10px) ;}
	50% {-moz-transform:translate(0px,20px) ;}
	75% {-moz-transform:translate(30px,30px) ;}
	100% {-moz-transform:translate(0px,40px) ;}
}

@-webkit-keyframes step4ActiveDot /* Safari 和 Chrome */{
	25%{-webkit-transform:translate(-30px,10px) ;}
	50% {-webkit-transform:translate(0px,20px) ;}
	75% {-webkit-transform:translate(30px,30px) ;}
	100% {-webkit-transform:translate(0px,40px) ;}
}
@-o-keyframes step4ActiveDot /* Opera */{
	25%{-o-transform:translate(-30px,10px) ;}
	50% {-o-transform:translate(0px,20px) ;}
	75% {-o-transform:translate(30px,30px) ;}
	100% {-o-transform:translate(0px,40px) ;}
}

/* modifed by UmbrellaFish */
.cc-mobile-containt .step-list li.in .step4-box .phone{
	animation: step4InGame 0.5s ease-out backwards;
	-moz-animation: step4InGame 0.5s ease-out backwards;/* Firefox: */
	-webkit-animation: step4InGame 0.5s ease-out backwards;/* Safari 和 Chrome: */
	-o-animation: step4InGame 0.5s ease-out backwards;/* Opera: */
	transform-origin:0 100%;	
	-moz-transform-origin:0 100%;/* Firefox: */
	-webkit-transform-origin:0 100%;	/* Safari 和 Chrome */
	-o-transform-origin:0 100%;/* Opera: */
}
.cc-mobile-containt .step-list li.in .step4-box .baby{
	animation: step4InGame 0.5s ease-out backwards;
	-moz-animation: step4InGame 0.5s ease-out backwards;/* Firefox: */
	-webkit-animation: step4InGame 0.5s ease-out backwards;/* Safari 和 Chrome: */
	-o-animation: step4InGame 0.5s ease-out backwards;/* Opera: */
	transform-origin:0 100%;	
	-moz-transform-origin:0 100%;/* Firefox: */
	-webkit-transform-origin:0 100%;	/* Safari 和 Chrome */
	-o-transform-origin:0 100%;/* Opera: */
}
.cc-mobile-containt .step-list li.out .step4-box .baby{
	animation: step4OutGame 0.5s ease-out 1.5s backwards;
	-moz-animation: step4OutGame 0.5s ease-out 1.5s backwards;/* Firefox: */
	-webkit-animation: step4OutGame 0.5s ease-out 1.5s backwards;/* Safari 和 Chrome: */
	-o-animation: step4OutGame 0.5s ease-out 1.5s backwards;/* Opera: */
	transform-origin:0 100%;	
	-moz-transform-origin:0 100%;/* Firefox: */
	-webkit-transform-origin:0 100%;	/* Safari 和 Chrome */
	-o-transform-origin:0 100%;/* Opera: */
}

.heart,.star{
	position:absolute;
	z-index:10;
}
li.active .step4-box .star1111{
	animation: starani  3s  infinite;
	-moz-animation: starani  3s  infinite;/* Firefox: */
	-webkit-animation: starani 3  infinite;/* Safari 和 Chrome: */
	-o-animation: starani  3s  infinite;/* Opera: */
}
@keyframes starani{
	0%{opacity:.2;transform:scale(1);}
	25%{opacity:.5;transform:scale(.8);}
	50% {opacity:.9;transform:scale(1);}
	75% {opacity:.5;transform:scale(.8);}
	100% {opacity:.2;transform:scale(1);}
}
.star1{
	left: 252px;
    top: 264px;
    transform:scale(.7,.7);
}
.star2{
	left: 465px;
    top: 112px;
}
.star3{
	left: 499px;
    top: 369px;
}
.star4{
	left: 86px;
    top: 423px;
    -webkit-transform:scaleX(.5) scaleY(.5);
}
.star5{
    left: 131px;
    top: 411px;
    opacity:.4;
    -webkit-transform:scaleX(.5) scaleY(.5);
}
.star6{
    left: 623px;
    top: 437px;
}
.heart1{
	left: 540px;
    top: 381px;
}
.heart2{
    left: 108px;
    top: 381px;
}
.heart3{
    left: 567px;
    top: 443px;
}
.heart4{
    left: 510px;
    top: 460px;
}
.heart5{
	left: 486px;
    top: 482px;
}
.heart6{
    left: 207px;
    top: 451px;
}
.heart7{
    left: 177px;
    top: 346px;
}
.heart8{
    left: 689px;
    top: 400px;
}
li.in .heart,li.in .star,li .heart,li .star{
	display:none;
}
li.active .heart,li.active .star{
	display:block;
}