html {
    min-height: 100%;
    width: 100%;
}

body {
    background: #000 url(../images/bg1.jpg) no-repeat center;
    /*-webkit-background-size: 100%;
    background-size: 100%;*/
}

.main {
    width: 900px;
    height: 800px;
    margin: 0 auto 0;
    /*background: url(../images/main-bg.png) no-repeat;*/
    position: relative;
    z-index: 9999;
        margin-bottom: 6%;
}
.main .img{
	width: 900px;
    height: 800px;
    margin:0 auto 0;
    position: absolute;
    z-index: 9999;
    margin-top: 8%;

}
.main a{
     position: absolute;
    z-index: 10000;
}
.main .img img{width:100%; }
    .main .title {
       display: block;
    width: 51%;
    height: 20%;
    position: absolute;
    top: 48%;
    left: 23%;
    }

    .main .system {
        display: block;
        width: 7%;
        height: 5%;
        position: absolute;
    }
    .main .system1 {
        display: block;
        width: 7%;
    height: 5%;
        position: absolute;
    }

    .main .ssn1 {
      top: 14%;
    left: 21%;
    }

    .main .ssn2 {
       top: 8.5%;
    left: 50.5%;
    }

    .main .ssn3 {
       bottom: 21%;
    left: 3%;
    }
    .main .ssn4 {
       top: 80.5%;
    right: 16.5%;
    }

    .main .wms {
       top: 28.5%;
    left: 38%;
    }

    .main .shop {
      width: 11%;
    top: 16%;
    right: 18%;
       
    }

    .main .pic {
      width: 10%;
    top: 31%;
    right: 23%;
        
    }

    .main .oa {
       top: 31%;
    width: 5%;
    right: 9.5%;
    }

    .main .crm {
       left: 8%;
    top: 31%;
    }

    .main .das {
       bottom: 2.5%;
    left: 14.5%;
    }

    .main .fms {
        left: 0%;
    top: 52%;
    }

    .main .scm {
       width: 6%;
    bottom: 13%;
    left: 37.5%;
    }
    .main .library {
       width: 9%;
    bottom: 30.5%;
    right: 13.5%;
    }
    .main .elearning {
       width: 17%;
    left: 60%;
    bottom: -9%;
    }
    .main .pda {
       left: 8.5%;
    top: 41%;
    }
    .main .ask {
       left: 12%;
    top: 61.5%;
    }
    .main .rma {
       top: 41.5%;
    left: 22%;
    }
    .main .eps {
         width: 5%;
       top: 42.5%;
    right: 28.5%;
    }
    .main .edi {
       width: 5%;
    bottom: 42.5%;
    right: 14%;
    }
    .main .dam {
        bottom: 43%;
    right: 1%;
    }
    .main .order {
       bottom: 21.5%;
    right: 1%;
    width: 9%;
    }
    .main .erp {
        width: 6%;
    bottom: 7%;
    left: 49.5%;
    }

    .main .tms {
       bottom: 3%;
    right: 14.5%;
    }
    .main .scale {
      width: 21%;
    left: 19%;
    bottom: -8%;
    }
    
    .main .srm {
       top: 21.5%;
    left: 45.5%;
    }
    
    .main .hlm {
       top: 78.5%;
    left: 68.5%;
    }
.star-base {
    position: absolute;
    height: 1.4%;
    width: 1.4%;
    z-index: 10001;
    background-color: white;
    border-radius: 100%;
}

.star-ssn1 {
    top: 17.95%;
    left: 29.8%;
    z-index: 10001;
    -webkit-animation: pulse-green 4s ease infinite alternate;
    animation: pulse-green 4s ease infinite alternate;
}

.star-wms {
   top: 32.8%;
    left: 14.75%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms1 {
   top: 64.6%;
    left: 20.4%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms2 {
   top: 53.26%;
    left: 8.1%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms3 {
   top: 75.64%;
    left: 10.35%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms4 {
   top: 73.24%;
    left: 16.55%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms5 {
   top: 93.78%;
    left: 21.7%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms6 {
   top: 46.80%;
    left: 20.3%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms7 {
   top: 42.4%;
    left: 15.3%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms8 {
   top: 95.38%;
    left: 54.2%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms9 {
   top: 104.2%;
    left: 58.4%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}
.star-wms10 {
   top: 103.9%;
    left: 39%;
    -webkit-animation: pulse-red 3s ease infinite alternate;
    animation: pulse-red 3s ease infinite alternate;
}

.star-oa {
   top: 12.6%;
    right: 50.2%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa1 {
    top: 18%;
    right: 46.4%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa2 {
    top: 18.1%;
    right: 30.4%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa3 {
    top: 46.8%;
    right: 23.65%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa4 {
    top: 32.8%;
    right: 21.5%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa5 {
    top: 32.8%;
    right: 15.8%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa6 {
    top: 56.7%;
    right: 18.8%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa7 {
    top: 53.7%;
    right: 8.8%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa8 {
    top: 75.1%;
    right: 11.5%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa9 {
    top: 80.1%;
    right: 24.7%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}
.star-oa10 {
    top: 93.55%;
    right: 22.7%;
    -webkit-animation: pulse-yellow 3s ease infinite alternate;
    animation: pulse-yellow 3s ease infinite alternate;
}

@-webkit-keyframes pulse-red {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #FF6666;
    }
}

@keyframes pulse-red {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #FF6666;
    }
}


@-webkit-keyframes pulse-yellow {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #FFCC99;
    }
}

@keyframes pulse-yellow {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #FFCC99;
    }
}


@-webkit-keyframes pulse-blue {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #67b5b0;
    }
}

@keyframes pulse-blue {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #67b5b0;
    }
}

@-webkit-keyframes pulse-green {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #00FFFF;
    }
}

@keyframes pulse-green {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #00FFFF;
    }
}