liedou/phone/phone.css

body{
	padding-bottom: 0;
	background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/lieodu_gw/bg3.png) #e8d1c2;
	
}
#item-list-head #head .head_top_warp{
	background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/lieodu_gw/bg3.png) #e8d1c2;
}
.mobile_header_in{
	content: ".";
    clear: both;
    display: block;
    overflow: hidden;
    font-size: 0;
    height: 0;
}
.mobile_header{
	width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    filter: alpha(opacity=70);
    background: rgba(255,255,255,0.7);
}
.mobile_header_in {
    width: 1100px;
    margin: 0 auto;
    height: 100%;
}
.mobile_header .logo {
	width: 85px;
	height: 34px;
    float: left;
    margin: 8px 0 0;
}
.mobile_header .logo img{
	width: 100%;
}
.mobile_header .logo_text {
    float: left;
    width: 200px;
    height: 27px;
    font-size: 20px;
    margin: 12px 0 0 20px;
    color: #666;
    font-family: "微软雅黑";
    padding: 0 0 0 12px;
    background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/lieodu_gw/slogan.png) no-repeat left 0px;
}
.menu_list{
	float: right;
	margin-right: 200px;
}
.menu_list a{
	font-size: 14px;
    color: #424141;
    padding: 0 0 0 65px;
    line-height: 50px;
}
.page_right{
	height: 426px;
    /*z-index: 1000;*/
    right: 197px;
    position: absolute;
    top: 170px;
    font-family: 微软雅黑;
}
.page_right .title {
    display: block;
    font-size: 40px;
    font-weight: bold;
    color: #000;
}
.step_text{
	opacity: 1;
	animation: step_text 1s ease-in-out;
	-moz-animation: step_text 1s ease-in-out;	/* Firefox */
	-webkit-animation: step_text 1s ease-in-out;	/* Safari 和 Chrome */
	-o-animation: step_text 1s ease-in-out;	/* Opera */
}
.step_text .mobile_text{
	text-align: right;
	font-size: 16px;
	color: #333333;
}
.mobile_text{
	width: 343px;
}
.code_area {
    clear: right;
    float: right;
    width: 253px;
    height: 275px;
    margin: 10px 0 0;
    background: #FFFFff;
}
.code_area img{
	width: 80%;
	display: block;
	margin: auto;
	margin-top: 20px;
}
.code_area p{
	text-align: center;
	margin-top:10px ;
}
.page{
	position: relative;
}
/*第一屏*/
.page_1{
	position: relative;
	top: 0;
	left: 0;
}
.page_in{
	width: 1100px;
	height: 100%;
	margin: auto;
	position: relative;
	
}
.lady01{
	width: 235px;
    position: relative;
    bottom: 370px;
    left: 15%;
    overflow: hidden;
}
.lady01 .people{
	width: 100%;
}
#phoneCon{
	width: 250px;
    position: relative;
    bottom: 10px;
    top: 124px;
    opacity: 1;
    animation: phoneCon 0.5s ease-in-out;
	-moz-animation: phoneCon 0.5s ease-in-out;	/* Firefox */
	-webkit-animation: phoneCon 0.5s ease-in-out;	/* Safari 和 Chrome */
	-o-animation: phoneCon 0.5s ease-in-out;	/* Opera */
}
#phoneCon .iphoneBg{
	width: 100%;
}
#phoneCon .iphone{
	position: absolute;
    top: 15%;
    left: 18%;
    width: 64%;
}
.arrow{
	width: 70px;
    height: 45px;
    position: fixed;
    left: 50%;
    z-index: 4;
    margin-left: -35px;
    bottom: 30px;
    background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/lieodu_gw/arrow.png) no-repeat;
    animation: scroll-arrow-animation 750ms ease-in-out infinite alternate;
    -moz-animation: scroll-arrow-animation 750ms ease-in-out infinite alternate;
    -webkit-animation: scroll-arrow-animation 750ms ease-in-out infinite alternate;
}
.slideInUp{
	width: 45px;
	height: 70px;
	position: absolute;
	bottom: 0;
	left: 60%;
	animation: slideInUp 0.5s ease-in-out;
	-moz-animation: slideInUp 0.5s ease-in-out;	/* Firefox */
	-webkit-animation: slideInUp 0.5s ease-in-out;	/* Safari 和 Chrome */
	-o-animation: slideInUp 0.5s ease-in-out;	/* Opera */
}
.money{
	width: 200px;
    position: absolute;
    top: 25%;
    left: 35%;
    z-index: 2;
    animation: money 1s ease-in-out;
	-moz-animation: money 1s ease-in-out;	/* Firefox */
	-webkit-animation: money 1s ease-in-out;	/* Safari 和 Chrome */
	-o-animation: money 1s ease-in-out;	/* Opera */
}

/*page_01动画*/
@keyframes slideInUp{
	from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }
	
	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
}

@-moz-keyframes  slideInUp{
	from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }
	
	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
}

@-webkit-keyframes  slideInUp{
	from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }
	
	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
}

@-o-keyframes  slideInUp{
	from {
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	    visibility: visible;
	  }
	
	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
}
@keyframes scroll-arrow-animation{
    from{padding-top:8;} to{padding-top:18px;}
}
@-webkit-keyframes scroll-arrow-animation{
    from{padding-top:8;} to{padding-top:18px;}
}
@-moz-keyframes scroll-arrow-animation{
    from{padding-top:8;} to{padding-top:18px;}
}
@-o-keyframes scroll-arrow-animation{
    from{padding-top:8;} to{padding-top:18px;}
}

@keyframes phoneCon{
    from{opacity:0;left: -300px;} to{opacity:1;left: 0;}
}
@-webkit-keyframes phoneCon{
    from{opacity:0;left: -300px;} to{opacity:1;left: 0;}
}
@-moz-keyframes phoneCon{
    from{opacity:0;left: -300px;} to{opacity:1;left: 0;}
}
@-o-keyframes phoneCon{
    from{opacity:0;left: -300px;} to{opacity:1;left: 0;}
}

@keyframes step_text{
    from{opacity:0;} to{opacity:1;}
}
@-webkit-keyframes step_text{
    from{opacity:0;} to{opacity:1;}
}
@-moz-keyframes step_text{
    from{opacity:0;} to{opacity:1;}
}
@-o-keyframes step_text{
    from{opacity:0;} to{opacity:1;}
}

@keyframes money{
    from{opacity:0;top:15%;left: 20%;width: 56px;} to{opacity:1;top: 25%;left: 35%;width: 200px;}
}
@-webkit-keyframes money{
    from{opacity:0;top:15%;left: 20%;width: 56px;} to{opacity:1;top: 25%;left: 35%;width: 200px;}
}
@-moz-keyframes money{
    from{opacity:0;top:15%;left: 20%;width: 56px;} to{opacity:1;top: 25%;left: 35%;width: 200px;}
}
@-o-keyframes money{
   from{opacity:0;top:15%;left: 20%;width: 56px;} to{opacity:1;top: 25%;left: 35%;width: 200px;}
}