* {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style: none;
}

html,
body {
    position: relative;
    height: 100%;
    min-width: 1440px
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* min-height: 770px; */
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /* ie 10 */
    /* ff 20 */
    /* ch 30 */
    margin-bottom: 30px;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.wh {
    width: 100%;
    height: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.bg {
    width: 100%;
    min-height: 770px;
    overflow: hidden;
}

.one-text {
    margin: auto;
    top: 150px;
    left: 0;
    bottom: 0;
    right: 0;
}

.logo-img img {
    width: 180px;
    height: 100px;
}

.logo-img-first img {
    width: 144px;
    height: 98px;
}

.logo-logo {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
}

.one-text .logo-img:nth-child(2) {
    margin-top: 20px;
}

.logo-title-h1 {
    color: #fff;
}

.logo-title {
    color: #fff;
}

.logo-title h1 {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -50px;
    opacity: 1;
    animation: myfirst 2s;
    -webkit-animation: myfirst 2s;
    animation-fill-mode: forwards;
}

@keyframes myfirst {
    0% {
        bottom: -140px;
        opacity: 0;
    }
    100% {
        bottom: -50px;
        opacity: 1;
    }
}

@-webkit-keyframes myfirst
/* Safari and Chrome */

    {
    0% {
        bottom: -140px;
        opacity: 0;
    }
    100% {
        bottom: -50px;
        opacity: 1;
    }
}

@-o-keyframes myfirst
/* Safari and Chrome */

    {
    0% {
        bottom: -140px;
        opacity: 0;
    }
    100% {
        bottom: -50px;
        opacity: 1;
    }
}

@-moz-keyframes myfirst
/* Safari and Chrome */

    {
    0% {
        bottom: -140px;
        opacity: 0;
    }
    100% {
        bottom: -50px;
        opacity: 1;
    }
}

.left-title {
    top: 80px;
    left: 220px;
    color: #8c8c8c;
    z-index: 10
}

.kk {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.one-top-title {
    width: 100%;
    height: 200px;
    top: 50px
}

.one-top-title span {
    display: block;
    height: 40px;
    width: 300px;
    margin: 0 auto;
    border-bottom: 2px solid #f66;
    padding: 10px;
    font-size: 30px;
    color: #f66;
}

.one-top-title p {
    letter-spacing: 1px;
    line-height: 30px;
    font-size: 24px
}

.one-title {
    width: 100%;
    top: 210px;
}

.one-small-title {
    width: 100%;
    text-align: center;
    line-height: 40px;
    height: 40px;
}

.one-small-title h4 {
    color: #f66;
    line-height: 40px;
    height: 40px;
}

.body-text {
    height: 200px;
    width: 90%;
    margin: 0 auto
}

.vendor {
    width: 20%;
    float: left;
    text-align: left
}

.vendor-last {
    width: 40%;
    float: left;
    text-align: left
}

.vendor-last div {
    width: 180px;
    height: 120px;
    margin: 30px auto;
    text-align: center
}

.to-right {
    width: 10%;
    float: left;
    text-align: left
}

.right-person-man {
    width: 20%;
    right: 50px;
    top: -200px;
    text-align: left;
}

.two-top {
    width: 100%;
    height: 200px;
    top: 50px
}

.two-top span {
    display: block;
    height: 40px;
    width: 300px;
    margin: 0 auto;
    border-bottom: 2px solid #f66;
    padding: 10px;
    font-size: 30px;
    color: #f66
}

.two-top p {
    letter-spacing: 1px;
    line-height: 30px;
    font-size: 24px
}

.two-middle {
    top: 320px;
    width: 100%
}

.two-img {
    top: 400px;
    width: 100%;
    height: 300px
}

.two-left-img {
    width: 50%;
    height: 330px;
    float: left
}

.two-left-div {
    width: 580px;
    height: 330px;
    left: 100px
}

.two-right-img {
    width: 50%;
    height: 330px;
    float: right
}

.two-right-div {
    width: 330px;
    height: 330px;
    top: 30px;
    right: 200px
}

.three {
    width: 100%;
    top: 200px;display: box;             
    display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;     
    display: -webkit-flex;
    display: flex
}

.three-text {
    width: 50%;
    text-align: left;
    letter-spacing: 1px;
    opacity: 0
}

.three-h1 {
    top: 50px;
    border-bottom: 2px solid #f66;
    color: #f66;
    width: 200px;
    height: 60px;
    margin-bottom: 10px
}

.fifth-top-title {
    width: 100%;
    height: 80px;
    line-height: 80px;
    top: 0px;
    font-size: 50px;
    color: rgb(201, 84, 84);
    text-align: center;
}

.header-title2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    top: 210px;
    font-size: 24px;
    text-align: center;
}

.two-icon {
    width: 100%;
    height: 80px;
    top: 660px
}

.two-li {
    display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;     
    display: -webkit-flex;
    display: flex;
    width: 40%;
    margin: 0 auto;
    height: 100%;
}

.two-left-right {
    width: 50%;
    line-height: 80px;
    display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;     
    display: -webkit-flex;
    display: flex
}

.two-left-right-img {
    width: 75px;
    height: 80px;
}

.integration {
    width: 125px;
    height: 770px;
    float: left;
    background-color: #cc6160;
    font-size: 54px;
    color: #fff;
    text-align: center
}

.integration-title {
    width: 100px;
    height: 100%;
    padding-top: 20px
}

.twelve-text {
    top: 350px;
    left: 200px;
    text-align: center;
    opacity: 0
}

.twelve-text p {
    line-height: 40px;
    font-size: 30px
}

.thirteen-text-one {
    width: 100px;
    height: 150px;
    top: 120px;
    left: 310px;
    font-size: 48px;
    text-align: center;
    color: #fff
}

.thirteen-text-two {
    width: 200px;
    height: 150px;
    top: 230px;
    left: 1000px;
    font-size: 40px;
    text-align: center;
    color: #fff
}

.thirteen-text-three {
    width: 200px;
    height: 150px;
    top: 590px;
    left: 1020px;
    font-size: 40px;
    text-align: center;
    color: #fff
}

.thirteen-text-four {
    width: 100px;
    height: 150px;
    top: 430px;
    left: 310px;
    font-size: 40px;
    text-align: center;
    color: #fff
}

.pain {
    top: 220px;
    width: 100%;
    font-size: 14px;
}

.pain-body {
    margin: 0 auto;
    width: 1300px;
    line-height: 24px
}

.pain-li {
    width: 20%;
    float: left;
}

.plan {
    height: 100px;
    line-height: 100px;
    text-align: left
}

.green-round .round {
    margin: 0 auto;
    background: linear-gradient(#5dd418, #38b503);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: 0 0 20px #ccc;
    text-align: center;
    position: relative
}

.green-round .round span {
    display: block;
    position: absolute;
    top: 20%;
    left: 40%;
    font-size: 24px;
    color: #fff;
}

.red-round .round {
    margin: 0 auto;
    background: linear-gradient(#b33537, #b50f0c);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: 0 0 20px #ccc;
    text-align: center;
    position: relative
}

.red-round .round span {
    display: block;
    position: absolute;
    top: 20%;
    left: 40%;
    font-size: 24px;
    color: #fff;
}

.problem {
    margin-top: 20px;
    height: 120px;
    text-align: left
}

.fifteen-title {
    top: 150px;
    left: 120px;
    color: #fff;
    opacity: 0
}

.fifteen-title span {
    display: block;
    font-size: 60px;
    color: #fff
}

.logo-15 {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 280px;
    left: 600px;
}

.get-services {
    top: 510px;
    left: 120px;
    text-align: left
}

.span-services-get span {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ffa798;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    color: #fff;
    margin-left: 35px
}

.span-services-get span:last-child {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: none;
    padding-right: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 80px;
    color: #000
}

.span-services-follow span {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ccc;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    margin-left: 35px
}

.span-services-follow span:last-child {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: none;
    padding-right: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 120px
}

.table-text {
    top: 200px;
    left: 1%;
    right: 3%;
    width: 96%;
    font-size: 14px
}

.table tr {
    height: 100px
}

.table-left {
    width: 49%;
    float: left
}

.table-right {
    width: 49%;
    float: right
}

.bg-success {
    height: 100px;
    background-color: #8cbb78;
    color: #fff;
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: none
}

.bg-success th {
    height: 100px;
    text-align: center;
    width: 25%
}

.red-title-17th {
    top: 230px;
    left: 220px;
    font-size: 32px;
    color: #f00
}

.parts {
    top: 580px;
    left: 140px;
    text-align: left;
    font-size: 24px
}

.dottedline {
    width: 1000px;
    top: 340px;
    left: 240px
}

.unify {
    bottom: 25px;
    text-align: center;
    width: 600px;
    left: 400px;
    font-size: 24px
}

.lock-p {
    bottom: 50px;
    right: 300px;
    font-size: 24px
}

.code {
    width: 350px;
    height: 130px;
    top: 430px;
    left: -50px;
    ;
    opacity: 0
}

.left-span {
    width: 150px;
    height: 80px;
    top: 415px;
    left: 50px;
    opacity: 0
}

.left-span span:first-child {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgb(131, 192, 250)
}

.dotted-reward {
    width: 350px;
    height: 130px;
    left: 650px;
    top: 108px;
    opacity: 0
}

.left-span span:last-child {
    font-size: 14px
}

.middle-span {
    width: 150px;
    height: 80px;
    top: 133px;
    left: 770px;
    opacity: 0
}

.middle-span span:first-child {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgb(230, 124, 25);
    color: #fff
}

.middle-span span:last-child {
    font-size: 14px
}

.dotted-self {
    width: 280px;
    height: 80px;
    right: 0;
    top: 430px;
    opacity: 0
}

.right-span {
    width: 150px;
    height: 80px;
    top: 497px;
    right: 50px;
    opacity: 0
}

.right-span span:first-child {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgb(6, 33, 58);
    color: #fff
}

.right-span span:last-child {
    font-size: 14px
}

.professional-title {
    width: 100%;
    height: 80px;
    line-height: 80px;
    top: 30px;
    font-size: 50px;
    color: rgb(201, 84, 84);
    text-align: center;
}

.main-25st {
    width: 100%;
    height: 330px;
    top: 265px
}

.left-img {
    width: 150px;
    float: left;
    height: 100%;
    padding: 15px
}

.left-img img {
    width: 100px;
    height: 80px;
    margin-top: 10px
}

.left-img img:first-child {
    width: 120px;
    height: 120px
}

.center-logo {
    float: left;
    height: 100%;
    width: 1080px;
}

.text-left {
    float: left;
    width: 40%;
    height: 100%;
    font-size: 48px;
    color: #fff;
    line-height: 100%
}

.clouds {
    width: 350px;
    height: 60px;
    line-height: 60px;
    text-align: right;
    top: 100px;
    opacity: 0
}

.img-center {
    text-align: center;
    float: left;
    width: 20%;
    height: 100%
}

.img-center .kk img {
    top: 100px;
    width: 220px;
    height: 130px;
}

.text-right {
    float: right;
    width: 40%;
    height: 100%;
    font-size: 48px;
    color: #fff
}

.star {
    width: 350px;
    height: 60px;
    line-height: 60px;
    text-align: left;
    top: 100px;
    opacity: 0
}

.right-img {
    width: 150px;
    float: left;
    height: 100%;
    padding: 15px
}

.right-img img {
    width: 100px;
    height: 70px;
    margin-top: 10px
}

.right-img img:first-child {
    width: 120px;
    height: 70px;
}

.manage-clouds {
    width: 100%;
    height: 80px;
    line-height: 80px;
    top: 30px;
    font-size: 50px;
    color: rgb(201, 84, 84);
    text-align: center;
}

.header-title-27st {
    width: 100%;
    height: 80px;
    line-height: 80px;
    top: 30px;
    font-size: 32px;
    color: rgb(201, 84, 84);
    text-align: center;
}

.advantage span {
    font-weight: bold;
    font-size: 32px
}

.advantage span:nth-child(1) {
    color: #0f0;
}

.advantage span:nth-child(2) {
    color: #00f;
}

.advantage span:nth-child(3) {
    color: rgb(109, 92, 98);
}

.advantage span:nth-child(4) {
    color: #f00;
}

.advantage span:nth-child(7) {
    color: rgb(143, 140, 140);
    letter-spacing: 2px;
    font-size: 24px
}

.join-type {
    width: 400px;
    left: 200px;
    top: 390px
}

.good-img {
    width: 100%;
    height: auto;
    margin-top: 30px
}

.join {
    width: 50%;
    height: 200px;
    float: left
}

.img-271 {
    top: 200px;
    left: 750px
}

.img-27 {
    top: 250px;
    left: 700px
}

.bottom-logo {
    top: 390px;
    opacity: 0
}

.bottom-logo img {
    width: 180px;
    height: 100px
}

.address {
    color: #ccc;
    left: 130px;
    top: 660px;
    text-align: left
}

.address span:first-child {
    letter-spacing: 2px;
    font-size: 28px
}

.address span:nth-child(1) {
    letter-spacing: 2px;
    font-size: 28px
}

.address span:nth-child(3) {
    font-size: 14px;
    letter-spacing: 1px
}

/* 左上角的logo图片和竖块 start code */

/* 左上角的logo */

.left-top-logo {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 80px;
    top: 50px;
}

.left-go-top {
    animation: leftGoTop 0.5s;
    -webkit-animation: leftGoTop 0.5s;
    animation-fill-mode: forwards;
}

@keyframes leftGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-webkit-keyframes leftGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-o-keyframes leftGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-moz-keyframes leftGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

/* 左上角灰色小竖块 start code */

.gray-vertical {
    width: 20px;
    height: 140px;
    left: 170px;
    top: 50px;
    background-color: rgb(199, 196, 196);
}

.gray-go-top {
    animation: grayGoTop 1s;
    -webkit-animation: grayGoTop 1s;
    animation-fill-mode: forwards;
}

@keyframes grayGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-webkit-keyframes grayGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-o-keyframes grayGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

@-moz-keyframes grayGoTop {
    0% {
        top: 50px;
    }
    100% {
        top: 0px;
    }
}

/* 左上角灰色小竖块 end code */

/* 左上角红色小竖块 code start */

.red-vertical {
    width: 20px;
    height: 60px;
    left: 195px;
    top: 130px;
    background-color: rgb(190, 54, 54);
}

.red-go-top {
    animation: redGoTop 2s;
    -webkit-animation: redGoTop 2s;
    animation-fill-mode: forwards;
}

@keyframes redGoTop {
    0% {
        top: 130px;
    }
    100% {
        top: 80px;
    }
}

@-webkit-keyframes redGoTop {
    0% {
        top: 130px;
    }
    100% {
        top: 80px;
    }
}

@-o-keyframes redGoTop {
    0% {
        top: 130px;
    }
    100% {
        top: 80px;
    }
}

@-moz-keyframes redGoTop {
    0% {
        top: 130px;
    }
    100% {
        top: 80px;
    }
}

/* 左上角红色小竖块 code end */

/* 问题一 start code*/

/* 问题一的小人图片 */

.right-person {
    animation: personGoDown 2s;
    -webkit-animation: personGoDown 2s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-animation-delay: 1s;
    /* 运动最后停在那里 */
    animation-fill-mode: forwards;
}

@keyframes personGoDown {
    0% {
        top: -200px;
    }
    100% {
        top: 20px;
    }
}

@-webkit-keyframes personGoDown {
    0% {
        top: -200px;
    }
    100% {
        top: 20px;
    }
}

@-o-keyframes personGoDown {
    0% {
        top: -200px;
    }
    100% {
        top: 20px;
    }
}

@-moz-keyframes personGoDown {
    0% {
        top: -200px;
    }
    100% {
        top: 20px;
    }
}

/* 问题一 end code*/

/* 问题二 start code */

/* 左边图片 */

.left-go-right {
    animation: leftGoRight 2s;
    -webkit-animation: leftGoRight 2s;
    /* 运动最后停在那里 */
    animation-fill-mode: forwards;
}

@keyframes leftGoRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100px;
    }
}

@-webkit-keyframes leftGoRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100px;
    }
}

@-o-keyframes leftGoRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100px;
    }
}

@-moz-keyframes leftGoRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100px;
    }
}

/* 右边图片 */

.right-go-left {
    animation: rightGoLeft 2s;
    -webkit-animation: rightGoLeft 2s;
    /* 运动最后停在那里 */
    animation-fill-mode: forwards;
}

@keyframes rightGoLeft {
    0% {
        right: 100px;
    }
    100% {
        right: 200px;
    }
}

@-webkit-keyframes rightGoLeft {
    0% {
        right: 100px;
    }
    100% {
        right: 200px;
    }
}

@-o-keyframes rightGoLeft {
    0% {
        right: 100px;
    }
    100% {
        right: 200px;
    }
}

@-moz-keyframes rightGoLeft {
    0% {
        right: 100px;
    }
    100% {
        right: 200px;
    }
}

/* 问题二 end code */

/* 问题三 start code */

.scale-img {
    transform: scale(0.1);
}

.small-big {
    animation: scaleImg 2s;
    -webkit-animation: scaleImg 2s;
    animation-fill-mode: forwards;
}

@keyframes scaleImg {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
        transform: rotate(0);
    }
}

@-webkit-keyframes scaleImg {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes scaleImg {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes scaleImg {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
    }
}

/* 问题三 end code */

/* 背景图片 */

.one {
    background: url('../images/01.png') center center no-repeat;
}

.bg-img {
    background: url('../images/bg14.png') center center no-repeat;
}

.bg-thirteen {
    background: url('../images/bg13.png') center center no-repeat;
}

.bg-fiftteen {
    background: url('../images/bg15.png') center center no-repeat;
}

.bg-18th {
    background: url('../images/bg18.png') center center no-repeat;
}

.bg-twenty {
    background: url('../images/bg20.png') center center no-repeat;
}

.bg-22st {
    background: url('../images/bg22.png') center center no-repeat;
}

.bg-23st {
    background: url('../images/bg23.png') center center no-repeat;
}

.bg-25st {
    background: url('../images/bg25.png') center center no-repeat;
}

.bg-26st {
    background: url('../images/bg26.png') center center no-repeat;
}

.bg-28st {
    background: url('../images/bg28.png') center center no-repeat;
}

.bg-img-model {
    background: url('../images/model.png') center center no-repeat;
}

/* 第五页 */

/* 电脑 computer start */

.computer {
    width: 400px;
    height: 250px;
    left: 0;
    right: 0;
    top: 280px;
    margin: auto;
    transform: scale(0);
}

.computer-go {
    animation: computerGo 2s;
    -webkit-animation: computerGo 2s;
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes computerGo {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes computerGo {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes computerGo {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes computerGo {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* 电脑 computer end */

/* 手机 pad start */

.phone {
    left: -250px;
    top: 0;
    transform: scale(0.1);
}

.phone-go {
    animation: phoneGo 2s;
    -webkit-animation: phoneGo 2s;
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes phoneGo {
    0% {
        top: 0;
        left: 0;
        transform: scale(0.1);
    }
    100% {
        top: 380px;
        left: 350px;
        transform: scale(1);
    }
}

@-webkit-keyframes phoneGo {
    0% {
        top: 0;
        left: 0;
        transform: scale(0.1);
    }
    100% {
        top: 380px;
        left: 350px;
        transform: scale(1);
    }
}

@-o-keyframes phoneGo {
    0% {
        top: 0;
        left: 0;
        transform: scale(0.1);
    }
    100% {
        top: 380px;
        left: 350px;
        transform: scale(1);
    }
}

@-moz-keyframes phoneGo {
    0% {
        top: 0;
        left: 0;
        transform: scale(0.1);
    }
    100% {
        top: 380px;
        left: 350px;
        transform: scale(1);
    }
}

/* 手机 pad code end */

/* 小音响 stereo code start */

.stereo {
    width: 310px;
    height: 220px;
    right: -200px;
    top: 0;
    transform: rotate(0);
}

.stereo-go {
    animation: stereoGo 2s;
    -webkit-animation: stereoGo 2s;
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes stereoGo {
    0% {
        top: 0;
        right: -200px;
        transform: rotate(0);
    }
    100% {
        right: 330px;
        top: 380px;
        transform: rotate(360deg);
    }
}

@-webkit-keyframes stereoGo {
    0% {
        top: 0;
        right: -200px;
        transform: rotate(0);
    }
    100% {
        right: 330px;
        top: 380px;
        transform: rotate(360deg);
    }
}

@-o-keyframes stereoGo {
    0% {
        top: 0;
        right: -200px;
        transform: rotate(0);
    }
    100% {
        right: 330px;
        top: 380px;
        transform: rotate(360deg);
    }
}

@-moz-keyframes stereoGo {
    0% {
        top: 0;
        right: -200px;
        transform: rotate(0);
    }
    100% {
        right: 330px;
        top: 380px;
        transform: rotate(360deg);
    }
}

/* 小音响 pad end */

/* 第六页 */

/* 盒子 */

.box-box {
    top: 370px;
    left: 600px;
    height: 150px;
    width: 350px;
    transform: scale(0);
}

.box-box-scale {
    animation: boxBox 1s;
    -webkit-animation: boxBox 1s;
    animation-fill-mode: forwards;
}

@keyframes boxBox {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes boxBox {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes boxBox {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes boxBox {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* 串云平台 */

.box-title {
    font-size: 0;
    color: rgb(255, 255, 255);
}

.box-title-show {
    animation: boxTitleShow 1s;
    -webkit-animation: boxTitleShow 1s;
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes boxTitleShow {
    0% {
        font-size: 0;
        transform: scale(0);
    }
    100% {
        font-size: 36px;
        transform: scale(1);
    }
}

@-webkit-keyframes boxTitleShow {
    0% {
        font-size: 0;
        transform: scale(0);
    }
    100% {
        font-size: 36px;
        transform: scale(1);
    }
}

@-o-keyframes boxTitleShow {
    0% {
        font-size: 0;
        transform: scale(0);
    }
    100% {
        font-size: 36px;
        transform: scale(1);
    }
}

@-moz-keyframes boxTitleShow {
    0% {
        font-size: 0;
        transform: scale(0);
    }
    100% {
        font-size: 36px;
        transform: scale(1);
    }
}

/* 第七页 start code */

/* 大图down */

.more {
    top: -400px;
    right: 50px;
    width: 800px;
    height: 650px;
    z-index: 10;
    display: none;
}

.more-down {
    animation: moreDown 2s;
    -webkit-animation: moreDown 2s;
    animation-fill-mode: forwards;
    display: block;
}

@keyframes moreDown {
    0% {
        top: -400px;
    }
    100% {
        top: -20px;
    }
}

@-webkit-keyframes moreDown {
    0% {
        top: -400px;
    }
    100% {
        top: -20px;
    }
}

@-moz-keyframes moreDown {
    0% {
        top: -400px;
    }
    100% {
        top: -20px;
    }
}

@-o-keyframes moreDown {
    0% {
        top: -400px;
    }
    100% {
        top: -20px;
    }
}

/* 小图盒子 */

.box-7 {
    height: 150px;
    width: 350px;
    right: -600px;
    top: 600px;
}

.box-to-left {
    animation: boxToLeft 1s;
    -webkit-animation: boxToLeft 1s;
    animation-fill-mode: forwards;
}

@keyframes boxToLeft {
    0% {
        right: 50px;
    }
    100% {
        right: 290px;
    }
}

@-webkit-keyframes boxToLeft {
    0% {
        right: 50px;
    }
    100% {
        right: 290px;
    }
}

@-moz-keyframes boxToLeft {
    0% {
        right: 50px;
    }
    100% {
        right: 290px;
    }
}

@-o-keyframes boxToLeft {
    0% {
        right: 50px;
    }
    100% {
        right: 290px;
    }
}

/* 第七页 end code */

/* 第八页 end start */

/* 顶部标题 */

.thirteen-title {
    width: 100%;
    height: 80px;
    line-height: 80px;
    top: 30px;
    font-size: 50px;
    color: rgb(201, 84, 84);
    text-align: center;
}

.thirteen-title-move {
    animation: thirteenTitleMove 1s;
    -webkit-animation: thirteenTitleMove 1s;
    animation-fill-mode: forwards;
}

@keyframes thirteenTitleMove {
    0% {
        top: -100px;
    }
    80% {
        top: 30px;
    }
    90% {
        top: 40px;
    }
    100% {
        top: 30px;
    }
}

@-webkit-keyframes thirteenTitleMove {
    0% {
        top: -100px;
    }
    80% {
        top: 30px;
    }
    90% {
        top: 40px;
    }
    100% {
        top: 30px;
    }
}

@-moz-keyframes thirteenTitleMove {
    0% {
        top: -100px;
    }
    80% {
        top: 30px;
    }
    90% {
        top: 40px;
    }
    100% {
        top: 30px;
    }
}

@-o-keyframes thirteenTitleMove {
    0% {
        top: -100px;
    }
    80% {
        top: 30px;
    }
    90% {
        top: 40px;
    }
    100% {
        top: 30px;
    }
}

/* 小音响 */

.thirteen-video {
    width: 300px;
    height: 250px;
    top: 380px;
    left: 570px;
}

.thirteen-video-move {
    animation: thirteenVideoMove 1s;
    -webkit-animation: thirteenVideoMove 1s;
    animation-fill-mode: forwards;
}

@keyframes thirteenVideoMove {
    0% {
        top: 600px;
    }
    80% {
        top: 380px;
    }
    90% {
        top: 390px;
    }
    100% {
        top: 380px;
    }
}

@-webkit-keyframes thirteenVideoMove {
    0% {
        top: 600px;
    }
    80% {
        top: 380px;
    }
    90% {
        top: 390px;
    }
    100% {
        top: 380px;
    }
}

@-moz-keyframes thirteenVideoMove {
    0% {
        top: 600px;
    }
    80% {
        top: 380px;
    }
    90% {
        top: 390px;
    }
    100% {
        top: 380px;
    }
}

@-o-keyframes thirteenVideoMove {
    0% {
        top: 600px;
    }
    80% {
        top: 380px;
    }
    90% {
        top: 390px;
    }
    100% {
        top: 380px;
    }
}

/* 第八页 end code */

/* 第九页 start code */

/* 第九页 end code */

/* 第十页 start code */

.fifteen-video {
    width: 300px;
    height: 600px;
    left: 0;
    top: 0;
    transform: scale(0);
}

.fifteen-video-move {
    animation: fifteenVideoMove 1s;
    -webkit-animation: fifteenVideoMove 1s;
    animation-fill-mode: forwards;
}

@keyframes fifteenVideoMove {
    0% {
        top: 0;
        left: 0;
        transform: scale(0);
    }
    100% {
        top: 90px;
        left: 1000px;
        transform: scale(1);
    }
}

@-webkit-keyframes fifteenVideoMove {
    0% {
        top: 0;
        left: 0;
        transform: scale(0);
    }
    100% {
        top: 90px;
        left: 1000px;
        transform: scale(1);
    }
}

@-moz-keyframes fifteenVideoMove {
    0% {
        top: 0;
        left: 0;
        transform: scale(0);
    }
    100% {
        top: 90px;
        left: 1000px;
        transform: scale(1);
    }
}

@-o-keyframes fifteenVideoMove {
    0% {
        top: 0;
        left: 0;
        transform: scale(0);
    }
    100% {
        top: 90px;
        left: 1000px;
        transform: scale(1);
    }
}

/* 第十页 end code */

/* 第十一页 start code */

.logo-right {
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
}

.logo-to-right {
    animation: logoToRight 2s;
    -webkit-animation: logoToRight 2s;
    animation-fill-mode: forwards;
}

@keyframes logoToRight {
    0% {
        right: 100px
    }
    100% {
        right: 0
    }
}

@-webkit-keyframes logoToRight {
    0% {
        right: 100px
    }
    100% {
        right: 0
    }
}

@-moz-keyframes logoToRight {
    0% {
        right: 100px
    }
    100% {
        right: 0
    }
}

@-o-keyframes logoToRight {
    0% {
        right: 100px
    }
    100% {
        right: 0
    }
}

/* 第十一页 end code */

/* 第十二页 start code */

/* 串云盒子 */

.box-to-right {
    width: 400px;
    height: 180px;
    left: 130px;
    top: 360px
}

.cloud-move {
    animation: cloudMove 2s;
    -webkit-animation: cloudMove 2s;
    animation-fill-mode: forwards;
}

@keyframes cloudMove {
    0% {
        left: 0;
    }
    100% {
        left: 130px
    }
}

@-webkit-keyframes cloudMove {
    0% {
        left: 0;
    }
    100% {
        left: 130px
    }
}

@-moz-keyframes cloudMove {
    0% {
        left: 0;
    }
    100% {
        left: 130px
    }
}

@-o-keyframes cloudMove {
    0% {
        left: 0;
    }
    100% {
        left: 130px
    }
}

/* 服务类平台 */

.platform {
    width: 800px;
    height: 600px;
    left: 520px;
    top: 200px
}

.platform-move {
    animation: platformMove 2s;
    -webkit-animation: platformMove 2s;
    animation-fill-mode: forwards;
}

@keyframes platformMove {
    0% {
        left: 620px;
    }
    100% {
        left: 520px
    }
}

@-webkit-keyframes platformMove {
    0% {
        left: 620px;
    }
    100% {
        left: 520px
    }
}

@-moz-keyframes platformMove {
    0% {
        left: 620px;
    }
    100% {
        left: 520px
    }
}

@-o-keyframes platformMove {
    0% {
        left: 620px;
    }
    100% {
        left: 520px
    }
}

/* 第十二页 end code */

/* 第十三页 start code */

/* 步骤图 start code */

.wechat-platform {
    top: 150px;
    transform: rotateY(-90deg);
}

.wechat-platform-rotate {
    animation: wechatPlatformRotate 2s;
    -webkit-animation: wechatPlatformRotate 2s;
    animation-fill-mode: forwards;
}

@keyframes wechatPlatformRotate {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes wechatPlatformRotate {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@-moz-keyframes wechatPlatformRotate {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@-o-keyframes wechatPlatformRotate {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

/* 步骤图 end code */

/* 序号1 2 3 4 5 code start*/

.step {
    display: none;
    width: 60px;
    height: 60px;
    transform: scale(3);
}

.first-step {
    left: 200px;
    top: 300px;
}

.second-step {
    left: 490px;
    top: 370px
}

.third-step {
    left: 770px;
    top: 320px
}

.step-four {
    left: 920px;
    top: 430px
}

.step-five {
    left: 1240px;
    top: 470px
}

.step-move {
    display: block;
    animation: stepMove 2s;
    -webkit-animation: stepMove 2s;
    animation-fill-mode: forwards
}

@keyframes stepMove {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes stepMove {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1)
    }
}

@-o-keyframes stepMove {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1)
    }
}

@-moz-keyframes stepMove {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1)
    }
}

/* 序号1 2 3 4 5 code end*/

/* 第十三页 end code */

/* 第十四页 start code */

.television {
    top: 150px;
    transform: scale(1)
}

.television-move {
    top: 150px
}

.television-move {
    display: block;
    animation: televisionMove 2s;
    -webkit-animation: televisionMove 2s;
    animation-fill-mode: forwards
}

@keyframes televisionMove {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes televisionMove {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1)
    }
}

@-o-keyframes televisionMove {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1)
    }
}

@-moz-keyframes televisionMove {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1)
    }
}

/* 第十四页 end code */

/* 第十五页 start code */

.door-phone {
    top: 200px;
    left: 100px;
    width: 500px;
}

.dotted-line-red {
    top: 160px;
    left: 140px;
    width: 700px;
    opacity: 0;
}

/* 门锁手机动画 start code */

.door-phone-move {
    animation: doorPhoneMove 2s;
    -webkit-animation: doorPhoneMove 2s;
    animation-fill-mode: forwards
}

@keyframes doorPhoneMove {
    0% {
        left: -100px
    }
    100% {
        left: 100px
    }
}

@-webkit-keyframes doorPhoneMove {
    0% {
        left: -100px
    }
    100% {
        left: 100px
    }
}

@-o-keyframes doorPhoneMove {
    0% {
        left: -100px
    }
    100% {
        left: 100px
    }
}

@-moz-keyframes doorPhoneMove {
    0% {
        left: -100px
    }
    100% {
        left: 100px
    }
}

/* 门锁手机动画 end code */

/* 红色虚线 */

.dotted-line-red-change-opacity {
    animation: changeOpacity 2s;
    -webkit-animation: changeOpacity 2s;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -o-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-fill-mode: forwards
}

@keyframes changeOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes changeOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes changeOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes changeOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 第十五页 end code */

/* 第十六页 end code */

/* 房间面板 */

.panel {
    width: 610px;
    height: 210px;
    top: 200px
}

.panel-detail {
    width: 610px;
    height: 210px;
    top: 450px;
    left: -210px
}

.panel-move {
    animation: panelMove 2s;
    -webkit-animation: panelMove 2s;
    animation-fill-mode: forwards
}

@keyframes panelMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-webkit-keyframes panelMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-o-keyframes panelMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-moz-keyframes panelMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

.panel-detail-move {
    animation: panelDetailMove 2s;
    -webkit-animation: panelDetailMove 2s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-fill-mode: forwards
}

@keyframes panelDetailMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-webkit-keyframes panelMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-o-keyframes panelDetailMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

@-moz-keyframes panelDetailMove {
    0% {
        left: -210px
    }
    100% {
        left: 0px
    }
}

/* 房间列表 */

.room-list {
    width: 420px;
    top: 150px;
    left: 580px
}

.room-controller {
    width: 420px;
    top: 150px;
    left: 1160px
}

.room-list-move {
    animation: roomListMove 2s;
    -webkit-animation: roomListMove 2s;
    animation-fill-mode: forwards
}

@keyframes roomListMove {
    0% {
        left: 780px
    }
    100% {
        left: 580px
    }
}

@-webkit-keyframes roomListMove {
    0% {
        left: 780px
    }
    100% {
        left: 580px
    }
}

@-o-keyframes roomListMove {
    0% {
        left: 780px
    }
    100% {
        left: 580px
    }
}

@-moz-keyframes roomListMove {
    0% {
        left: 780px
    }
    100% {
        left: 580px
    }
}

/* 房间控制器 */

.room-controller-move {
    animation: roomControllerMove 2s;
    -webkit-animation: roomControllerMove 2s;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-fill-mode: forwards
}

@keyframes roomControllerMove {
    0% {
        left: 1160px
    }
    100% {
        left: 960px
    }
}

@-webkit-keyframes roomControllerMove {
    0% {
        left: 1160px
    }
    100% {
        left: 960px
    }
}

@-o-keyframes roomControllerMove {
    0% {
        left: 1160px
    }
    100% {
        left: 960px
    }
}

@-moz-keyframes roomControllerMove {
    0% {
        left: 1160px
    }
    100% {
        left: 960px
    }
}

/* 第十六页 end code */

/* 第十七页 start code */

.vedio-22 {
    bottom: -600px;
    right: 400px;
    font-size: 24px;
    width: 100px;
    height: 200px
}

.vedio-move {
    animation: vedioMove 2s;
    -webkit-animation: vedioMove 2s;
    animation-fill-mode: forwards
}

@keyframes vedioMove {
    0% {
        bottom: -300px
    }
    100% {
        bottom: 100px
    }
}

@-webkit-keyframes vedioMove {
    0% {
        bottom: -300px
    }
    100% {
        bottom: 100px
    }
}

@-o-keyframes vedioMove {
    0% {
        bottom: -300px
    }
    100% {
        bottom: 100px
    }
}

@-moz-keyframes vedioMove {
    0% {
        bottom: -300px
    }
    100% {
        bottom: 100px
    }
}

/* 第十七页 end code */

/* 第十八页 start code */

.self-service-machine-short {
    width: 450px;
    height: 450px;
    left: 50px;
    top: 400px
}

.self-service-machine-height {
    width: 230px;
    height: 660px;
    left: 550px;
    top: 100px
}

.self-option {
    bottom: 100px;
    right: 230px;
    font-size: 30px;
    width: 300px;
    text-align: left;
    color: #fff
}

.short-move {
    animation: shortMove 2s;
    -webkit-animation: shortMove 2s;
    animation-fill-mode: forwards
}

@keyframes shortMove {
    0% {
        left: -100px;
        opacity: 0
    }
    100% {
        left: 50px;
        opacity: 1
    }
}

@-webkit-keyframes shortMove {
    0% {
        left: -100px;
        opacity: 0
    }
    100% {
        left: 50px;
        opacity: 1
    }
}

@-o-keyframes shortMove {
    0% {
        left: -100px;
        opacity: 0
    }
    100% {
        left: 50px;
        opacity: 1
    }
}

@-moz-keyframes shortMove {
    0% {
        left: -100px;
        opacity: 0
    }
    100% {
        left: 50px;
        opacity: 1
    }
}

.height-move {
    animation: heightMove 2s;
    -webkit-animation: heightMove 2s;
    animation-fill-mode: forwards
}

@keyframes heightMove {
    0% {
        top: 0;
        opacity: 0
    }
    100% {
        top: 100px;
        opacity: 1;
    }
}

@-webkit-keyframes heightMove {
    0% {
        top: 0;
        opacity: 0
    }
    100% {
        top: 100px;
        opacity: 1;
    }
}

@-o-keyframes heightMove {
    0% {
        top: 0;
        opacity: 0
    }
    100% {
        top: 100px;
        opacity: 1;
    }
}

@-moz-keyframes heightMove {
    0% {
        top: 0;
        opacity: 0
    }
    100% {
        top: 100px;
        opacity: 1;
    }
}

.self-option-move {
    animation: selfOptionMove 2s;
    -webkit-animation: selfOptionMove 2s;
    animation-fill-mode: forwards
}

@keyframes selfOptionMove {
    0% {
        right: 100px;
        opacity: 0
    }
    100% {
        right: 230px;
        opacity: 1
    }
}

@-webkit-keyframes selfOptionMove {
    0% {
        right: 100px;
        opacity: 0
    }
    100% {
        right: 230px;
        opacity: 1
    }
}

@-o-keyframes selfOptionMove {
    0% {
        right: 100px;
        opacity: 0
    }
    100% {
        right: 230px;
        opacity: 1
    }
}

@-moz-keyframes selfOptionMove {
    0% {
        right: 100px;
        opacity: 0
    }
    100% {
        right: 230px;
        opacity: 1
    }
}

/* 第十八页 end code */

/* 第十九页 start code */

/* 图片 */

.steward {
    height: 550px;
    width: 100%;
    top: 230px
}

.steward-move {
    animation: stewardMove 1s;
    -webkit-animation: stewardMove 1s;
    animation-fill-mode: forwards;
}

@keyframes stewardMove {
    0% {
        top: 330px;
    }
    100% {
        top: 230px
    }
}

@-webkit-keyframes stewardMove {
    0% {
        top: 330px;
    }
    100% {
        top: 230px
    }
}

@-o-keyframes stewardMove {
    0% {
        top: 330px;
    }
    100% {
        top: 230px
    }
}

@-moz-keyframes stewardMove {
    0% {
        top: 330px;
    }
    100% {
        top: 230px
    }
}

/* 文字 */

.opacity-change {
    animation: opacityChange 2s;
    -webkit-animation: opacityChange 2s;
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-fill-mode: forwards
}

@keyframes opacityChange {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes stewardMove {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-o-keyframes opacityChange {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes opacityChange {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/* 第十九页 end code */

/* 第二十页 start code */

.move-up {
    animation: moveUp 2s;
    -webkit-animation: moveUp 2s;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-fill-mode: forwards
}

@keyframes moveUp {
    0% {
        top: 100px;
        opacity: 0
    }
    100% {
        top: 0;
        opacity: 1
    }
}

@-webkit-keyframes moveUp {
    0% {
        top: 100px;
        opacity: 0
    }
    100% {
        top: 0;
        opacity: 1
    }
}

@-o-keyframes moveUp {
    0% {
        top: 100px;
        opacity: 0
    }
    100% {
        top: 0;
        opacity: 1
    }
}

@-moz-keyframes moveUp {
    0% {
        top: 100px;
        opacity: 0
    }
    100% {
        top: 0;
        opacity: 1
    }
}

/* 第二十页 end code */

/* 第二十一页 start code */

.management {
    width: 100%;
    height: 500px;
    top: 300px
}

.management-move {
    animation: managementMove 1s;
    -webkit-animation: managementMove 1s;
    animation-fill-mode: forwards;
}

@keyframes managementMove {
    0% {
        top: 400px;
    }
    100% {
        top: 300px
    }
}

@-webkit-keyframes managementMove {
    0% {
        top: 400px;
    }
    100% {
        top: 300px
    }
}

@-o-keyframes managementMove {
    0% {
        top: 400px;
    }
    100% {
        top: 300px
    }
}

@-moz-keyframes managementMove {
    0% {
        top: 400px;
    }
    100% {
        top: 300px
    }
}

/* 第二十一页 end code */

/* 第二十二页 start code */

.advantage {
    top: 300px;
    left: 200px;
}

.advantage-move {
    animation: advantageMove 2s;
    -webkit-animation: advantageMove 2s;
    animation-fill-mode: forwards
}

@keyframes advantageMove {
    0% {
        top: 350px;
        opacity: 0
    }
    100% {
        top: 300px;
        opacity: 1
    }
}

@-webkit-keyframes advantageMove {
    0% {
        top: 350px;
        opacity: 0
    }
    100% {
        top: 300px;
        opacity: 1
    }
}

@-o-keyframes advantageMove {
    0% {
        top: 350px;
        opacity: 0
    }
    100% {
        top: 300px;
        opacity: 1
    }
}

@-moz-keyframes advantageMove {
    0% {
        top: 350px;
        opacity: 0
    }
    100% {
        top: 300px;
        opacity: 1
    }
}

/* 第二十二页 end code */
/*返回主页 */
.go-back-home {
    width: 100px;
    height: 40px;
    bottom: 0;
    right: 0;
    z-index: 100
}
    .go-back-home a {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #fff;
        background-color: #5bc0de;
        border-color: #46b8da;
        text-decoration: none;
        letter-spacing: 0.5px
    }
        .go-back-home a:hover {
            color: #fff;
            background-color: #31b0d5;
            border-color: #269abc;
        }
        .go-back-home a:active {
            color: #fff;
            background-color: #31b0d5;
            border-color: #269abc;
        }