*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#fff;font:18px/1.5"Ubuntu",sans-serif}h1,p{margin-top:0}h1{margin-bottom:.5em;font-size:60px;font-weight:700}p{margin-bottom:2em}#wrapper{position:absolute;top:50%;left:50%;margin-top:-130px;margin-left:-300px;height:260px;width:600px;text-align:center}

/*.down {*/
/*    position: absolute;*/
/*    display: table;*/
/*    width: 120px;*/
/*    height: 45px;*/
/*    background: rgb(230 208 208 / 25%);*/
/*    left: 50%;*/
/*    bottom: 0;*/
/*    margin-left: -60px;*/
/*    border-radius: 50px 50px 0px 0px;*/
/*    z-index: 3;*/
/*    overflow: hidden;*/
/*}*/
.down {
    position: absolute;
    display: table;
    width: 100px;
    height: 50px;
    background: rgba(175, 175, 175, 0.2);
    left: 50%;
    bottom: 0;
    margin-left: -50px;
    border-radius: 50px 50px 0 0px;
    z-index: 3;
    overflow: hidden;
}

.down i {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 50px;
    color: #9e86ff;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    -webkit-animation: down 1.8s infinite;
    animation: down 1.8s infinite;
}

@-webkit-keyframes down {
    0% {
        top: 0;
        opacity: 0.5;
    }

    25% {
        top: 10px;
        opacity: 1;
    }

    50% {
        top: 5px;
        opacity: 1;
    }

    100% {
        top: 15px;
        opacity: 0;
    }
}

@keyframes down {
    0% {
        top: 0;
        opacity: 0.5;
    }

    25% {
        top: 10px;
        opacity: 1;
    }

    50% {
        top: 5px;
        opacity: 1;
    }

    100% {
        top: 15px;
        opacity: 0;
    }
}




.introduce0 {
   background-color:#ff7272;margin-bottom:25px;padding:20px
}

.introduce1 {
   background-color:#f68db1;margin-bottom:25px;padding:20px
}

.introduce2 {
   background-color:#a979fb;margin-bottom:25px;padding:20px
}

.introduce3 {
   background-color:#51d8b3;margin-bottom:25px;padding:20px
}