@keyframes particleOne {
    50% { 
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
    }
}
@-webkit-keyframes particleOne {
    50% { 
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
    }
}
@keyframes orb {
    50%   { 
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
    }
}
@-webkit-keyframes orb {
    50%   { 
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
    }
}
@keyframes orb2 {
    50%   { 
        transform: translateX(300px);
        -webkit-transform: translateX(300px);
    }
}
@-webkit-keyframes orb2 {
    50%   { 
        transform: translateX(300px);
        -webkit-transform: translateX(300px);
    }
}
/*.dingtu{overflow: visible}*/
.webfosslogo{position:absolute;}
.content{float:left;width:100%;height:100%;}

/*.demo{position:fixed;width:300px;right:0;left:auto;}
.menu{width:100%;}*/
.land{float:left;width:100%;height:100%;background:url(../images/land.png) no-repeat bottom;position:relative;overflow: hidden;}
.qiu01{
    top: 15%;
    left: 40%;
    opacity: 0.6;
    z-index: 2;
    filter: blur(2px) hue-rotate(15deg);
    -webkit-filter: blur(2px) hue-rotate(15deg);
    animation: orb2 70s ease-out infinite;
    -webkit-animation: orb2 70s ease-out infinite;
    position:absolute;
}
.qiu02{
    position:absolute;
    bottom: 170px;
    left: 10%;
    opacity: 1;
    z-index: 2;
    animation: orb2 70s ease-out infinite;
    -webkit-animation: orb2 70s ease-out infinite;
}
.qiu03{
    position: absolute;
    left: 45%;
    opacity: 1;
    z-index: 2;
    animation: orb 2s ease infinite;
    -webkit-animation: orb 2s ease infinite;
    bottom: 40px;
}
.flake{
    position:absolute;left:0px;top:0px;animation: particleOne 260s linear infinite;-webkit-animation: particleOne 260s linear infinite;
}

.land .con-section{float:left;width:610px;margin-left:15px;position:relative;z-index:9999;margin-top:155px;}




#wrapper {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;

    left: 0;

    margin: auto;	


    overflow: hidden

}

#left-side {
    float:right;
    width:61px;
}

#left-side ul{float:left;width:100%;}
#left-side ul li{float:left;width:100%;height:61px;margin-bottom:40px;}
#left-side ul li.ico01{background:url(../images/serviceico01.png) no-repeat top;}
#left-side ul li.ico02{background:url(../images/serviceico02.png) no-repeat top;}
#left-side ul li.ico03{background:url(../images/serviceico03.png) no-repeat top;}
#left-side ul li.ico04{background:url(../images/serviceico04.png) no-repeat top;}
#left-side ul li.ico05{background:url(../images/serviceico05.png) no-repeat top;}
#left-side ul li.active{background-position: bottom;}


#right-side {
    float:left;
    height: 600px;
    width: 510px;
    overflow: hidden;
    position:relative;
}
.serviceitem{
    position: absolute;
    height: 600px;
    width: 510px;
    transition: all .6s ease-in-out;
    margin-top: -500px;
    opacity: 0;


}

.serviceitem.active {
    margin-top: 0px;
    opacity: 1;
    transition: all .8s ease-in-out;
}
.serviceitem .ico{float:left;width:100%;margin:20px 0 40px 0;}
.serviceitem h1{float:left;width:100%;text-align: left;line-height:40px;margin-bottom:45px;}
.serviceitem h1 .cn{float:left;width:100%;font-size:28px;color:#fff;}
.serviceitem h1 .en{float:left;width:100%;font-size:26px;}
.serviceitem p{float:left;width:100%;text-align: left;font-size:18px;line-height:26px;}