*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}
.down{
    position:fixed;
    left:50%;
    bottom:1em;
    width:50px;
    height:24px;
    background:url(../images/down.png)no-repeat;
    opacity:.8;
    transform:translateX(-50%);
    z-index:100;
    animation:arrow-down 1.4s infinite;
}
.item{
    position:relative;
    height:100%;
    top:0;
    transition:none;
}
.wrap{
    width:100%;
    height:100%;
    background:#000;
    border-bottom:1px solid #999;
    box-sizing:border-box;
}
.wrap .wrap-inside{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}
.item-1 .logo{
    position:relative;
    margin:0 auto;
    width:40%;
}
.item-1 .logo img{
    position:relative;
    display:block;
    width:100%;
    transform:scale(0);
}
.item-1 .logo:before{
    position:absolute;
    left:50%;
    content:"";
    display:block;
    clear:both;
    width:100%;
    height:100%;
    background:#fff;
    opacity:1;
    border-radius:50%;
    transform:translateX(-50%) scale(0);
}
.item-1 .logo-title{
    position:relative;
    margin-top:10px;
    text-align:center;
    color:#fff;
    font-size:1.5em;
    font-weight:bold;
    text-indent:.5em;
    letter-spacing:.5em;
}
.item-1 .logo-title:before,
.item-1 .logo-title:after{
    position:absolute;
    top:0;
    content:"";
    width:50%;
    height:100%;
    background:#000;
}
.item-1 .logo-title:before{
    left:0;
}
.item-1 .logo-title:after{
    right:0;
}
.item-1 .text{
    margin-top:8em;
    padding:0 2em;
}
.item-1 .text .title{
    color:#fff;
    font-size:1.6em;
    letter-spacing:.1em;
}
.item-1 .text .title-e{
    color:#fff;
    font-size:1.2em;
    text-indent:3em;
}
.item-1 .text .title,
.item-1 .text .title-e{
    transform:scale(0);
}
.item-1 .text hr{
    margin:10px auto;
    display:block;
    border:none;
    width:0;
    height:2px;
    background:#fff;
}
.item-1 .text p{
    color:#fff;
    font-size:1.14em;
    transform:scale(0);
}
.item-1.on .logo img{
    animation:item-1-logo 1s 1s forwards;
}
.item-1.on .logo:before{
    animation:item-1-logo-be 1s forwards;
}
.item-1.on .logo-title:before,
.item-1.on .logo-title:after{
    animation:item-1-logo-tit 2s 2s forwards;
}
.item-1.on .text p{
    animation:item-1-logo 1s 3s forwards;
}
.item-1.on .text hr{
    animation:item-width-max 1s 3s forwards;
}
.item-2 .title{
    position:relative;
    height:140px;
    line-height:140px;
    color:#fff;
    font-size:1.4em;
    text-align:center;
}
.item-2 .title p{
    position:relative;
    z-index:10;
}
.item-2 svg{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}
.item-2 ul{
    padding:0 2em;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    justify-content:flex-end;
}
.item-2 ul li{
    margin-right:10px;
    margin-bottom:10px;
    flex-grow:1;
    width:26%;
    text-align:center;
    border:1px solid #fff;
    border-radius:4px;
    transform:scale(0);
    transform-origin: 0 0;
    transition:.8s;
}
.item-2 ul li:nth-child(3n){
    margin-right:0;
}
.item-2 ul li a{
    padding:1.6em 0;
    display:block;
    color:#fff;
    font-size:1.2em;
    text-align:center;
    text-decoration:none;
}
.item-2 ul li.grow{
    flex-grow:0;
}
.item-2 ul li.opacity{
    opacity:0;
}
.item-2 .decorate{
    position:relative;
    height:100px;
}
.item-2 .decorate svg:nth-child(1){
    transform: rotate(0deg) scale(0);
}
.item-2 .decorate svg:nth-child(2){
    transform:translate(160%,140%) rotate(0deg) scale(0);
}
.item-2.on .title svg{
    animation:item-2-rotate 1s forwards;
}
.item-2.on .title p{
    animation:item-2-title 1s forwards;
}
.item-2.on ul li:nth-child(1){
    background:rgb(244, 125, 136);
    animation:item-2-rotate-1 1s .5s forwards;
}
.item-2.on ul li:nth-child(2){
    background:rgb(244, 169, 15);
    animation:item-2-rotate-2 1s 1.5s forwards;
}
.item-2.on ul li:nth-child(4){
    background:rgb(0, 195, 177);
    animation:item-2-rotate-1 1s 2.5s forwards;
}
.item-2.on ul li:nth-child(5){
    background:rgb(255, 133, 51);
    animation:item-2-rotate-3 1s 3.5s forwards;
}
.item-2.on ul li:nth-child(6){
    background:rgb(91, 137, 205);
    animation:item-2-rotate-1 1s 4.5s forwards;
}
.item-2.on ul li:nth-child(7){
    margin-right:0;
    padding:1.7em 1em;
    background:rgb(143, 82, 146);
    animation:item-2-rotate-1 1s 5.5s forwards;
}
.item-2.on .decorate{
    padding:0 2em;

}
.item-2.on .decorate svg{
    top:0;
}
.item-2.on .decorate svg:nth-child(1){
    left:2em;
    animation:item-2-rotate-z-2 1s 6s forwards;
}
.item-2.on .decorate svg:nth-child(2){
    left:2em;
    animation:item-2-rotate-z-3 1s 6s forwards;
}
.wrap-fixed .wrap-fixed-1{
    position:relative;
    height:24em;
}
.wrap-fixed .wrap-fixed-1 .bg{
    margin:0 3em;
}
.item-fixed .bg-color-1 .bg{
    background:#fe6e78;
}
.item-fixed .bg-color-2 .bg{
    background:#00c3b2;
}
.item-fixed .bg-color-3 .bg{
    background:#f4a90f;
}
.item-fixed .bg-color-4 .bg{
    background:#19AA00;
}
.item-fixed .bg-color-5 .bg{
    background:#bc57bc;
}
.item-fixed .bg-color-6 .bg{
    background:#388BB6;
}
.item-fixed .bg-color-7 .bg{
    background:#F28615;
}
.item-fixed .bg-color-8 .img{
    position:relative;
    width:8em;
    left:50%;
    opacity:0;
    transform-origin:center;
    transform:translateX(-50%) scale(0);
}
.item-fixed .bg-color-8 .img img{
    display:block;
    width:100%;
}
.item-fixed .bg-color-8 .contact{
    position:relative;
    margin-top:10px;
    color:#fff;
    font-size:1.3em;
    opacity:0;
    text-align:center;
}
.item-fixed .bg-color-8 .index{
    position:relative;
    padding:.6em 0;
    display:block;
    margin-top:20px;
    right:-50%;
    width:6em;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background:#fe6d7a;
    border:1px solid #fff;
    border-radius:5px;
    opacity:0;
    transform:translateX(-50%);
}
.item-fixed.on .bg-color-8 .img{
    animation:scale-op-8 1s forwards;
}
.item-fixed.on .bg-color-8 .contact{
    animation:left-op-8 1s 1s forwards;
}
.item-fixed.on .bg-color-8 .index{
    animation:right-op-8 1s 2s forwards;
}
.wrap-fixed .wrap-fixed-1 .bg ul{
    padding:2em 2em 2em 3em;
}
.wrap-fixed .wrap-fixed-1 .bg ul li{
    color:#fff;
    font-size:1.2em;
    transform:scale(0);
}
.item-fixed .bg-color-3 .bg ul,
.item-fixed .bg-color-6 .bg ul,
.item-fixed .bg-color-7 .bg ul{
    padding:1em .6em 1em 2em;
}
.item-fixed .bg-color-3 .bg li,
.item-fixed .bg-color-6 .bg li,
.item-fixed .bg-color-7 .bg li{
    font-size:1em!important;
}
.wrap-fixed .wrap-fixed-2{
    position:relative;
    height:14em;
}
.wrap-fixed .wrap-fixed-2 .title{
    position:relative;
    padding:1em 0;
    z-index:10;
}
.item-fixed .bg-color-1 .title{
    background:#fe6e78;
}
.item-fixed .bg-color-2 .title{
    background:#00c3b2;
}
.item-fixed .bg-color-3 .title{
    background:#f4a90f;
}
.item-fixed .bg-color-4 .title{
    background:#19AA00;
}
.item-fixed .bg-color-5 .title{
    background:#bc57bc;
}
.item-fixed .bg-color-6 .title{
    background:#388BB6;
}
.item-fixed .bg-color-7 .title{
    background:#F28615;
}
.item-fixed .bg-color-8 .title{
    background:#fe6d7a;
}
.item-fixed .bg-color-3 .title > p{
    padding-right:.6em!important;
}
.wrap-fixed .wrap-fixed-2 .title p{
    padding-right:1.5em;
    color:#fff;
    font-size:1.4em;
    text-align:right;
    transform:translateX(50%);
}
.wrap-fixed .wrap-fixed-2 .sum{
    position:absolute;
}
.wrap-fixed .wrap-fixed-2 .sum span{
    position:relative;
    color:#fff;
    font-size:14em;
    font-family:serif,'宋体',Arial;
}
.wrap-fixed .wrap-fixed-2 .sum.sum-1{
    z-index:9;
    opacity:0;
    transform:translateY(-70%)  scale(0);
}
.wrap-fixed .wrap-fixed-2 .sum.sum-2{
    z-index:11;
    opacity:0;
    padding-left:7em;
    transform:translateY(-70%)  scale(1.5);
}
.item-fixed.on .wrap-fixed-1 .bg{
    animation:item-2-rotate-1 1s forwards;
}
.item-fixed.on .wrap-fixed-1 .bg ul li{
    animation:item-2-rotate-1 1s 1s forwards;
}
.item-fixed.on .wrap-fixed-2 .sum-1{
    animation:item-fixed-bg-1 1s 2s forwards;
}
.item-fixed.on .wrap-fixed-2 .sum-2{
    animation:item-fixed-bg-2 1s 2s forwards;
}
.item-fixed.on .wrap-fixed-2 .title > p{
    animation:item-fixed-tit 1s 2s forwards;
}
@keyframes arrow-down{
    0%{
        opacity:.8;
        bottom:1em;
    }
    100%{
        opacity:0;
        bottom:3em;
    }
}
@keyframes item-1-logo{
    0%{
        transform:scale(0);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes item-1-logo-be{
    0%{
        transform:translateX(-50%) scale(0);
    }
    100%{
        transform:translateX(-50%) scale(0.96);
    }
}
@keyframes item-1-logo-tit{
    0%{
        width:50%;
    }
    100%{
        width:0;
    }
}
@keyframes item-width-max{
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}
@keyframes item-2-rotate{
    0%{
        transform:translate(-50%,-50%) rotate(0deg) scale(0);
    }
    100%{
        transform:translate(-50%,-50%) rotate(360deg)  scale(1);
    }
}
@keyframes item-2-rotate-z-2{
    0%{
        transform: rotate(0deg) scale(0);
    }
    100%{
        transform:rotate(360deg)  scale(1);
    }
}
@keyframes item-2-rotate-z-3{
    0%{
        transform:translate(160%,140%) rotate(0deg) scale(0);
    }
    100%{
        transform:translate(160%,140%) rotate(360deg)  scale(1);
    }
}
@keyframes item-2-title{
    0%{
        transform:scale(0);
    }
    40%{
        transform:scale(1.6);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes item-2-rotate-1{
    0%{
        transform:scale(0);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes item-2-rotate-2{
    0%{
        transform:scale(0);
    }
    100%{
        transform:scale(1.04);
    }
}
@keyframes item-2-rotate-3{
    0%{
        transform:scale(0);
    }
    100%{
        transform:scale(1.02);
    }
}
@keyframes item-fixed-bg-1{
    0%{
        opacity:0;
        transform:translateY(-70%) scale(0);
    }
    100%{
        opacity:1;
        transform:translateY(-70%) scale(1);
    }
}
@keyframes item-fixed-bg-2{
    0%{
        opacity:0;
        transform:translateY(-70%) scale(1.5);
    }
    100%{
        opacity:1;
        transform:translateY(-70%) scale(1);
    }
}
@keyframes item-fixed-tit{
    0%{
        transform:translateX(50%);
    }
    100%{
        transform:translateX(0%);
    }
}
@keyframes scale-op-8{
    0%{
        opacity:0;
        transform:translateX(-50%) scale(0);
    }
    100%{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }
}
@keyframes left-op-8{
    0%{
        left:-100%;
        opacity:0;
    }
    100%{
        left:0;
        opacity:1;
    }
}
@keyframes right-op-8{
    0%{
        right:-100%;
        opacity:0;
    }
    100%{
        right:-50%;
        opacity:1;
    }
}