html{
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-color: #cceaf7;
    font-size:20px;
    overflow-x: hidden;

}
/*背景云*/
.cloud img:nth-child(1){
    position: fixed;
    width:28%;
    left: 0;
    bottom: 0;
}

.cloud img:nth-child(2){
    position: fixed;
    width: 22%;
    right: 0;
    bottom: 0;
}


.clear {
    clear:both;
    content: ".";

}
/*导航*/
.header {
    height: 88px;
    font-size: 22px;
    line-height: 88px;
    position:fixed;
    z-index: 1000;


}
.header >div {
    width: 1280px;
    height: 88px;
    margin: 0 auto;

}
.header ul {
    padding:9px 0;
    height: 80px;
    line-height: 80px;
    float:right;
}

.header ul li {
    float: left;
    cursor: pointer;
    padding-left:5px;
    padding-right:25px;
    color:#919191;
}
.header ul li:nth-last-child(1){
    /* margin-right:75px; */
}
.header ul li:nth-child(4){
    color: #1eb2d5;
}
/* .header ul li:nth-child(7){

    width: 100px;
    height: 36px;
} */
/* .header ul li:nth-child(7) img{
    width: 100px;
    height: 36px;
} */


.header img {
    height:60px;
    margin-top:20px;
}

.user .userimage img{
    width: 60px;
    margin-top: 10px;
}




/*7条颜色*/

.colorBar {
    position: fixed;
    width: 100%;
    height: 4px;
    overflow-x: hidden;
    z-index:999;
    top: 88px;
}

.colorBar ul {

    height: 4px;
    margin: 0 auto;


}
.colorBar ul li {
    float: left;
    height:4px;
}

.navbar li:nth-child(3){
    color: #1eb2d5;
}


.colorBar ul li:nth-child(1){
    background-color: #fa8c8e;
    width: 22%;
}
.colorBar ul li:nth-child(2){
    background-color: #fcb88b;
    width: 8%;
}
.colorBar ul li:nth-child(3){
    background-color: #f5e467;
    width:7.8%;
}
.colorBar ul li:nth-child(4){
    background-color: #c0ed98;
    width: 8.5%;
}
.colorBar ul li:nth-child(5){
    background-color: #88ebd5;
    width: 11%;
}
.colorBar ul li:nth-child(6){
    background-color: #8ec7ed;
    width: 11%;
}
.colorBar ul li:nth-child(7){
    background-color: #fac3f6;
    width:11%;
}
.colorBar ul li:nth-child(8){
    background-color: #fa8c8e;
    width:20.7%;
}


.app{
    height: 920px;
}
/*中间3张手机图*/
.phone {
    /* height: 100%; */
    width: 1280px;
    margin: 0 auto;
    position: relative;
    color: #6e6e6e;


    
}

.phone-l,.phone-r {
    width: 284px;

}
.phone img {
    border-radius:11%;
    width: 100%;
}

.phone-l {
    position: absolute;
    left: 48px;
    top: 250px;
}

.phone-l  div,.phone-r  div{
    text-align: center;
    margin-top:40px;
    font-size: 32px;
}

.phone-c {
    position: absolute;
    left: 450px;
    top: 120px;
}

.phone-c .gif {
    position: absolute;
    width: 257px;
    border-radius:0;
    top: 100px;
    left:48px;
}




.phone-c h3 {
    margin-top:-100px;
    font-size: 30px;
    text-align: center;
}
.phone-c div {
    margin: 0 auto;
    line-height: 30px;
    width: 295px;
}

.phone-r {
    position: absolute;
    right: 68px;
    top: 250px;
}

.phone-c .play {
    position: absolute;
    width: 30%;
    top:285px;
    left:123px;
    cursor: pointer;
}


#vedio{
    position:relative;
}

.fix{
    position:absolute;
    left:25%;
    top:20%;
    z-index: 1000;
}
/*width="948" height="528"*/
#movies{
    position:relative;
    width: 60%;
    height: 40%;
    display:none;
}
#delete{
    position:absolute;
    right:42%;
    top:4%;
    width:30px;
    height:30px;
    display:none;
    cursor: pointer;
}
::-webkit-scrollbar {
    display: none;
}


@media screen and (max-width:1450px){
    .app {
        zoom: 0.8;
    }
}


@media screen and (max-width:1200px){
    body {
        zoom: 1;
    }

}
/*底部信息*/
.foot {
    width: 1280px;
    margin:80px auto 45px ;
    font-size: 20px;
    position: absolute;
    /* bottom:0; */
    left: 50%;
    transform: translateX(-50%);
}
.foot div {
    text-align: center;

}


/*@media screen and (max-width:980px) {*/
    /*.header {*/
        /*position: fixed;*/
        /*top:0;*/

    /*}*/

    /*.phone {*/
        /*font-size: 1rem;*/
        /*width: 100%;*/
    /*}*/

    /*.phone-l,.phone-c,.phone-r {*/
        /*width: 70%;*/
        /*position: static;*/
        /*margin:20% auto;*/

    /*}*/

    /*.phone-c .gif {*/
       /*display: none;*/
    /*}*/

    /*.phone-l div,.phone-c h3,.phone-r div{*/
        /*font-size: 1.6rem;*/

    /*}*/
    /*.phone-c div {*/
        /*margin-left:10%;*/
    /*}*/


    /*.phone-c {*/
        /*!*position: relative;*!*/
    /*}*/

    /*.phone-c .play {*/
       /*display: none;*/
    /*}*/

    /*.fix{*/
        /*position:fixed;*/
        /*left:0;*/
        /*top:50%;*/
        /*transform: translateY(-50%);*/
        /*z-index: 1000;*/
    /*}*/
    /*!*width="948" height="528"*!*/
    /*#movies{*/
        /*position:relative;*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*display:none;*/
    /*}*/
    /*#delete{*/
        /*position:absolute;*/
        /*right:2%;*/
        /*top:2%;*/
        /*width:30px;*/
        /*height:30px;*/
        /*display:none;*/
        /*cursor: pointer;*/
        /*z-index: 2000;*/
    /*}*/

/*}*/