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;} }