*{margin:0;padding:0;}
body,html{
    height:100%;
    width:100%;
    overflow: hidden;
}
.floatup_body{
    /* background: url(./img/bg1.png) no-repeat;
    background-size:100% 100%; */
    height: 70%;
    width: 70%;
    margin: 0px auto;
    position: relative;
    top: 21%;
}
.floatup_body:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(./img/bg1.png) no-repeat 34% 55%;
    background-size: 86%;
    animation: floatup_anibg 3s linear 0s infinite;
    -webkit-animation: floatup_anibg 3s linear 0s infinite;
    -moz-animation:floatup_anibg 3s linear 0s infinite;
}
.floatup_body>div{
    position:absolute;
    border-radius: 50%;
    box-shadow: 0px 0 35px 10px rgba(34,69,92,.7);
}
.floatup_1,.floatup_2,.floatup_3{
    width:100px;
    height:100px;
    line-height:100px;
}
.floatup_4,.floatup_5,.floatup_6,.floatup_7{
    width:70px;
    height:70px;
    line-height:70px;
}
.floatup_1{
    top:15%;
    left:15%;
    background: url(./img/icon1.png) no-repeat;
    background-size:100% 100%;
    animation: floatup_ani1 3s linear 0s infinite;
    -webkit-animation: floatup_ani1 3s linear 0s infinite;
    -moz-animation:floatup_ani1 3s linear 0s infinite;
}
.floatup_2{
    top:70%;
    left:25%;
    background: url(./img/icon2.png) no-repeat;
    background-size:100% 100%;
    animation:floatup_ani2 3s linear 0s infinite;
    -webkit-animation: floatup_ani2 3s linear 0s infinite;
    -moz-animation: floatup_ani2 3s linear 0s infinite;
}
.floatup_3{
    top:40%;
    left:38%;
    background: url(./img/icon3.png) no-repeat;
    background-size:100% 100%;
    animation:floatup_ani3 3s linear 0s infinite;
    -webkit-animation: floatup_ani3 3s linear 0s infinite;
    -moz-animation: floatup_ani3 3s linear 0s infinite;
}
.floatup_4{
    top:40%;
    left:70%;
    background: url(./img/icon4.png) no-repeat;
    background-size:100% 100%;
    animation:floatup_ani4 3s linear 0s infinite;
    -webkit-animation: floatup_ani4 3s linear 0s infinite;
    -moz-animation: floatup_ani4 3s linear 0s infinite;
}
.floatup_5{
    top:63%;
    left:60%;
    background: url(./img/icon5.png) no-repeat;
    background-size:100% 100%;
    animation:floatup_ani5 3s linear 0s infinite;
    -webkit-animation: floatup_ani5 3s linear 0s infinite;
    -moz-animation: floatup_ani5 3s linear 0s infinite;
}
.floatup_6{
    top:25%;
    left:60%;
    background: url(./img/icon6.png) no-repeat;
    background-size:100% 100%;
    animation:floatup_ani6 3s linear 0s infinite;
    -webkit-animation: floatup_ani6 3s linear 0s infinite;
    -moz-animation: floatup_ani6 3s linear 0s infinite;
}
@keyframes floatup_anibg{
    0%{opacity: 1;}
    50%{opacity: 0.3}
    100%{opacity: 1}
}
@-webkit-keyframes floatup_anibg{
    0%{opacity: 1;}
    50%{opacity: 0.3}
    100%{opacity: 1}
}
@keyframes floatup_ani1{
    from{opacity: 1;top:15%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani1{
    from{opacity: 1;top:15%}
    to{opacity: 0;top:0%}
}
@keyframes floatup_ani2{
    from{opacity: 1;top:70%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani2{
    from{opacity: 1;top:70%}
    to{opacity: 0;top:0%}
}
@keyframes floatup_ani3{
    from{opacity: 1;top:40%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani3{
    from{opacity: 1;top:40%}
    to{opacity: 0;top:0%}
}
@keyframes floatup_ani4{
    from{opacity: 1;top:40%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani4{
    from{opacity: 1;top:40%}
    to{opacity: 0;top:0%}
}
@keyframes floatup_ani5{
    from{opacity: 1;top:63%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani5{
    from{opacity: 1;top:63%}
    to{opacity: 0;top:0%}
}
@keyframes floatup_ani6{
    from{opacity: 1;top:25%}
    to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani6{
    from{opacity: 1;top:25%}
    to{opacity: 0;top:0%}
}