@font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_1446165971_8375697.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/font_1446165971_8375697.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('//at.alicdn.com/t/font_1446165971_8375697.woff') format('woff'), /* chrome、firefox */
    url('//at.alicdn.com/t/font_1446165971_8375697.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/font_1446165971_8375697.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
    display: inline-block;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    vertical-align: top;
    *vertical-align: middle;
}

::selection {
  background-color: #b2d3fa;
  text-shadow: none;
}

body, input, button, textarea, select, option {
    font: normal 14px \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, tahoma, sans-serif;
}

/* 清除默认margin与padding */
body, h1, h2, h3, h4, h5, h6, p, figure, pre, dl, dd, blockquote {
    margin: 0;
}

input, legend, input, textarea, button {
    padding: 0;
}

ul, ol, form, fieldset, th, td {
    margin: 0;
    padding: 0;
}


a {
  color: inherit;
  text-decoration: none;
}

a:active {
  color: inherit;
}


/*start*/
html, body, .page {
    position: relative;
    width: 100%;
    min-width: 1200px;
    height: 100%;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    height: 100%;
}
.container>* {
    position: absolute;
}

.b {
    font-weight: bold;
}

.fs48 {
    font-size: 48px;
}

.orange {
    color: #f3793a
}

sup {
    font-size: 1.5em;
    vertical-align: baseline;
}

img {
    width: 100%;
    vertical-align: middle;
}

.page {
    background-size:100% 100%!important;
    background-repeat:no-repeat;
}

.page-1 {
    background: url(http://static.jjoobb.cn/images/main/app/page-1.jpg);
    z-index: 1
}
.page-2 {
    background: url(http://static.jjoobb.cn/images/main/app/page-2.jpg);
    z-index: 2
}
.page-3 {
    background: url(http://static.jjoobb.cn/images/main/app/page-3.jpg);
    z-index: 3
}
.page-4 {
    background: url(http://static.jjoobb.cn/images/main/app/page-4.jpg);
    z-index: 4
}
.page-5 {
    background: url(http://static.jjoobb.cn/images/main/app/page-5.jpg);
    z-index: 5
}
.page-6 {
    background: url(http://static.jjoobb.cn/images/main/app/page-6.jpg);
    z-index: 6
}

.arrow {
    position: fixed;
    left: 50%;
    bottom: 15px;
    z-index: 999;
    margin-left: -24px;
    color: #fff;
    font-size: 48px;
    opacity: .3;
    filter: alpha(opacity=30);
}

.logo-top {
    top: 6.6%;
    left: 25px;
    width: 194px;
    height: 65px;
    background: url(http://static.jjoobb.cn/images/main/app/logo-white.png);
}

.title-shadow {
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.title-1 {
    top: 29%;
    left: 10px;
    color: #fff000;
    font-size: 32px;
}
.title-2 {
    top: 35%;
    left: 10px;
    color: #fff;
    font-size: 76px;
}
.fn-list {
    top: 48%;
    left: 40px;
    width: 700px;
    font-size: 20px;
}
.fn-list li {
    float: left;
    width: 300px;
    height: 22px;
    margin-bottom: 15px;
}
.down {
    bottom: 23%;
    left: 110px;
    height: 150px;
}
.code,.down-btn {
    float: left;
    margin-right: 40px;
}
.code,
.code img {
    width: 150px;
    height: 150px;
}
.down-btn {
    position: relative;
    height: 150px;
}
.down-btn a {
    position: absolute;
    left: 0;
    width: 180px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 22px;
    border: 3px solid #000;
}
.down-btn .btn-1 {
    top: 0;
}
.down-btn .btn-2 {
    bottom: 0;
}
.phone-1 {
    bottom: 16%;
    right: 250px;
    width: 280px;
    height: 520px;
}
.phone-2 {
    right: -25px;
    bottom: 0;
    width: 480px;
    height: 620px;
}

.phone-2 img {
    -webkit-transform: translate3d(30%,70%,0);
    transform: translate3d(30%,70%,0);
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.2, 0.7, 0.5, 1);
    transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.5, 1);
}
.page-title {
    font-size: 72px;
    font-weight: bold;
    color: #f3793a;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.page-title-1 {
    top: 29%;
    left: 0;
    width: 100%;
    text-align: center;
}
.page-cont {
    font-size: 28px;
    line-height: 2em;
    color: #fff;
    font-weight: 300;
}
.page-title,
.page-cont {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: .8s ease-in;
    transition: .8s ease-in;
}
.cont-1 {
    top: 46%;
    left: 0;
    width: 100%; 
}
.cont-1 p {
    text-indent: 2em;
}
.page-title-2 {
    top: 38%;
    left: 120px;
}
.cont-2 {
    top: 50%;
    left: 120px;
    width: 17em;
}
.iphone {
    width: 450px;
    height: 910px; 
}
.iphone img {
    -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.2, 0.7, 0.5, 1);
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.5, 1);
}
.phone-3 {
    right: 30px;
    bottom: -150px;
}
.phone-3 img {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}
.page-title-3 {
    top: 44%;
    right: 100px;
}
.cont-3 {
    bottom: 33%;
    right: 75px;
    width: 18em;
}
.phone-4 {
    left: 40px;
    bottom: -180px;
}
.phone-4 img {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
}
.page-title-4 {
    top: 40%;
    left: 118px;
}
.cont-4 {
    top: 53%;
    left: 118px;
    width: 20em;
}
.phone-5 {
    right: 40px;
    bottom: -160px;
}
.phone-5 img {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
}
.page-title-5 {
    top: 45%;
    left: 635px;
}
.cont-5 {
    top: 58%;
    left: 635px;
    width: 20em;
}
.phone-6 {
    left: 60px;
    bottom: -145px;
}
.phone-6 img {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}
.page-7 {
    background: #fff;
    z-index: 7;
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    background: #ed7334;
}
.title-last {
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 48px;
}
.logo-orange {
    top: 28%;
    left: 50%;
    height: 100px;
    width: 300px;
    margin-left: -150px;
}
.code-ft {
    top: 46%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
}

/*小屏兼容*/
.sm .title-1 {
    top: 24%;

}
.sm .title-2 {
    top: 32%;
    font-size: 60px;
}
.sm .down {
    bottom: 16%;
}
.sm .page-title-1 {
    top: 22%;
}
.sm .page-cont {
    font-size: 20px;
    line-height: 1.8em;
}
.sm .page-title-2 {
    top: 33%;
}
.sm .page-title-3 {
    top: 40%;
}
.sm .page-title-4 {
    top: 36%;
}
.sm .page-title-5 {
    top: 41%;
}
.sm .code-ft {
    top: 50%;
}
.sm .iphone {
    width: 310px;
    height: 628px;
}

#fp-nav span, .fp-slidesNav span {
    width: 10px!important;
    height: 10px!important;
    border: none!important;
    background: #000!important;
    opacity: .7!important;
    filter: alpha(opacity=70)!important;
}
#fp-nav li .active span, 
.fp-slidesNav .active span {
    opacity: .3!important;
    filter: alpha(opacity=30)!important;
}