body {
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.home-video {
    background: #000;
}

a {
    position: absolute;
    width: 370px;
    display: inline-block;
}

body .active a {
    width: 370px;
    height: 160px;
}

body .active #industry {
    top: 18%;
    left: 17%;
    width: 240px;
    height: 180px !important;
}

body .active #garden {
    top: 39%;
    left: 9%;
    width: 280px;
    height: 230px !important;
}

body .active #project {
    top: 55%;
    right: 12%;
    width: 350px;
    height: 260px !important;
}
body .active #enterprise {
    top: 62%;
    left: 31%;
    width: 350px;
    height: 260px !important;
}
.active #areas {
    top: 24%;
    right: 10%;
    width: 250px;
    height: 230px !important;
}

.industry {
    animation: animate_industry 20s;
    height: 160px;
}

.garden {
    animation: animate_garden 20s;
    height: 160px;
}

.project {
    animation: animate_project 20s;
    height: 160px;
}

.areas {

    animation: animate_areas 20s;
    height: 160px;
}
.enterprise {
    animation: animate_enterprise 20s;
    height: 160px;
}
.audio-bg {
    display: none;
}

@keyframes animate_project {
    0% {
        top: 49%;
        right: 10%;
    }

    46% {
        top: 53%;
        right: 12%;
    }

    47% {
        top: 51%;
        right: 0%;
    }

    100% {
        top: 58%;
        right: 5%;
    }
}

@keyframes animate_areas {
    0% {
        top: 17%;
        right: 14%;
    }

    46% {
        top: 20%;
        right: 14%;
    }

    47% {
        top: 15%;
        right: 5%;
    }

    100% {
        top: 19%;
        right: 2%;
    }

}

@keyframes animate_industry {
    0% {
        /* top: 47%;
        left: 23%; */
        top: 28%;
        left: 18%;
    }

    46% {
        top: 25%;
        left: 18%;
    }

    47% {
        top: 23%;
        left: 18%;
    }

    100% {
        top: 19%;
        left: 13%;
    }
}

@keyframes animate_garden {
    0% {
        top: 47%;
        left: 23%;
    }

    46% {
        top: 45%;
        left: 20%;
    }

    47% {
        top: 38%;
        left: 5%;
    }

    100% {
        top: 32%;
        left: 3%;
    }
}
@keyframes animate_enterprise {
    0% {
        top: 61%;
        left: 47%;
    }

    46% {
        top: 63%;
        left: 43%;
    }

    47% {
        top: 60%;
        left: 35%;
    }

    100% {
        top: 60%;
        left: 26%;
    }
}
/*鑳屾櫙闊充箰鍥炬爣*/
.rotateAll {
    animation: rotateAll 1.5s infinite linear both;
    -webkit-animation: rotateAll 1.5s infinite linear both;
}

.mute {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 99;
    background: url(img/mute.png) no-repeat;
    cursor: pointer;
    width: 31px;
    height: 31px;
}

@-webkit-keyframes rotateAll {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@keyframes rotateAll {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        transform: rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}