﻿#comm_circle_bg,
#comm_circle_bg1{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 0;
    display: none;
/*    background-color: #f7f7f7;*/
}

    #comm_circle_bg .main,
    #comm_circle_bg1 .main {
        height: 100%;
        position: relative;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        transform: scale(0.6);
        -webkit-transition: all 3s ease;
        -moz-transition: all 3s ease;
        -ms-transition: all 3s ease;
        transition: all 3s ease;
    }

    #comm_circle_bg .row1 div,
    #comm_circle_bg .row2 div,
    #comm_circle_bg .row3 div,
    #comm_circle_bg1 .row1 div,
    #comm_circle_bg1 .row2 div,
    #comm_circle_bg1 .row3 div {
        position: absolute;
    }

    #comm_circle_bg .row1 div,
    #comm_circle_bg1 .row1 div {
        -webkit-animation: orbmove 96s linear infinite;
        -moz-animation: orbmove 96s linear infinite;
        -ms-animation: orbmove 96s linear infinite;
        animation: orbmove 96s linear infinite;
        opacity: .6;
    }

    #comm_circle_bg .row1 .orb1,
    #comm_circle_bg1 .row1 .orb1 {
        position: absolute;
        width: 60px;
        height: 60px;
        top: 50%;
        left: 50%;
        margin-left: -30px;
        margin-top: -380px;
    }

        #comm_circle_bg .row1 .orb1 div,
        #comm_circle_bg1 .row1 .orb1 div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row1 .orb2,
    #comm_circle_bg1 .row1 .orb2 {
        position: absolute;
        width: 9.25vh;
        height: 9.25vh;
        top: 50%;
        left: 50%;
        margin-left: 23vw;
        margin-top: 32vh;
    }

        #comm_circle_bg .row1 .orb2 div,
        #comm_circle_bg1 .row1 .orb2 div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row1 .orb1c,
    #comm_circle_bg1 .row1 .orb1c {
        position: absolute;
        width: 60px;
        height: 60px;
        top: 30%;
        left: 50%;
        margin-left: 1970px;
        margin-top: -380px;
    }

        #comm_circle_bg .row1 .orb1c div,
        #comm_circle_bg1 .row1 .orb1c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row1 .orb2c,
    #comm_circle_bg1 .row1 .orb2c {
        position: absolute;
        width: 9.25vh;
        height: 9.25vh;
        top: 20%;
        left: 50%;
        margin-left: 127vw;
        margin-top: 50px;
    }

        #comm_circle_bg .row1 .orb2c div,
        #comm_circle_bg1 .row1 .orb2c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row2 div,
    #comm_circle_bg1 .row2 div {
        -webkit-animation: orbmove 48s linear infinite;
        -moz-animation: orbmove 48s linear infinite;
        -ms-animation: orbmove 48s linear infinite;
        animation: orbmove 48s linear infinite;
        opacity: .6;
    }

    #comm_circle_bg .row2 .orb1,
    #comm_circle_bg1 .row2 .orb1 {
        position: absolute;
        width: 18.5vh;
        height: 18.5vh;
        top: 60%;
        left: 50%;
        margin-left: -26vw;
        margin-top: -27vh;
    }

        #comm_circle_bg .row2 .orb1 div,
        #comm_circle_bg1 .row2 .orb1 div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row2 .orb2,
    #comm_circle_bg1 .row2 .orb2 {
        position: absolute;
        width: 23vh;
        height: 23vh;
        top: 50%;
        left: 50%;
        margin-left: 9vw;
        margin-top: -11.5vh;
    }

        #comm_circle_bg .row2 .orb2 div,
        #comm_circle_bg1 .row2 .orb2 div {
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row2 .orb1c,
    #comm_circle_bg1 .row2 .orb1c {
        position: absolute;
        width: 38.5vh;
        height: 38.5vh;
        top: 0%;
        left: 50%;
        margin-left: 78vw;
        margin-top: -27vh;
    }

        #comm_circle_bg .row2 .orb1c div,
        #comm_circle_bg1 .row2 .orb1c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row2 .orb2c,
    #comm_circle_bg1 .row2 .orb2c {
        position: absolute;
        width: 37vh;
        height: 37vh;
        top: 20%;
        left: 50%;
        margin-left: 109vw;
        margin-top: -18.5vh;
    }

        #comm_circle_bg .row2 .orb2c div,
        #comm_circle_bg1 .row2 .orb2c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #ffffff, #dedede);
            background: linear-gradient(to bottom, #ffffff, #dedede);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row3 div,
    #comm_circle_bg1 .row3 div {
        -webkit-animation: orbmove 24s linear infinite;
        -moz-animation: orbmove 24s linear infinite;
        -ms-animation: orbmove 24s linear infinite;
        animation: orbmove 24s linear infinite;
        opacity: 0.7;
    }

    #comm_circle_bg .row3 .orb1,
    #comm_circle_bg1 .row3 .orb1 {
        position: absolute;
        width: 27.5vh;
        height: 27.5vh;
        top: 50%;
        left: 50%;
        margin-left: 44vw;
        margin-top: -41vh;
    }

        #comm_circle_bg .row3 .orb1 div,
        #comm_circle_bg1 .row3 .orb1 div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #dedede, #ffffff);
            background: linear-gradient(to bottom, #dedede, #ffffff);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row3 .orb2,
    #comm_circle_bg1 .row3 .orb2 {
        position: absolute;
        width: 55.5vh;
        height: 55.5vh;
        top: 50%;
        left: 50%;
        margin-left: 0;
        margin-top: 0;
    }

        #comm_circle_bg .row3 .orb2 div,
        #comm_circle_bg1 .row3 .orb2 div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #dedede, #ffffff);
            background: linear-gradient(to bottom, #dedede, #ffffff);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row3 .orb1c,
    #comm_circle_bg1 .row3 .orb1c {
        position: absolute;
        width: 27.5vh;
        height: 27.5vh;
        top: 30%;
        left: 50%;
        margin-left: 148vw;
        margin-top: 0;
    }

        #comm_circle_bg .row3 .orb1c div,
        #comm_circle_bg1 .row3 .orb1c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #dedede, #ffffff);
            background: linear-gradient(to bottom, #dedede, #ffffff);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg .row3 .orb2c,
    #comm_circle_bg1 .row3 .orb2c {
        position: absolute;
        width: 55.5vh;
        height: 55.5vh;
        top: 10%;
        left: 50%;
        margin-left: 104vw;
        margin-top: 0;
    }

        #comm_circle_bg .row3 .orb2c div,
        #comm_circle_bg1 .row3 .orb2c div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: -webkit-linear-gradient(top, #dedede, #ffffff);
            background: linear-gradient(to bottom, #dedede, #ffffff);
            -webkit-animation: orbloop 6s linear infinite;
            -moz-animation: orbloop 6s linear infinite;
            -ms-animation: orbloop 6s linear infinite;
            animation: orbloop 6s linear infinite;
        }

    #comm_circle_bg.active .main,
    #comm_circle_bg1.active .main {
        -webkit-transform: scale(1) translateX(-200px) translateY(300px) rotateZ(-60deg);
        -moz-transform: scale(1) translateX(-200px) translateY(300px) rotateZ(-60deg);
        -ms-transform: scale(1) translateX(-200px) translateY(300px) rotateZ(-60deg);
        transform: scale(1) translateX(-200px) translateY(300px) rotateZ(-60deg);
    }

.lz-hzhb-f{
    position:relative;
}

@keyframes o-upfade-top {
    0% {
        opacity: 0;
        top: 50px;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@keyframes lineScale {
    0% {
        -webkit-transform: scaleX(0);
        -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
    }

    100% {
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes svgScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }

    30% {
        opacity: 1;
    }

    90% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes moveCloud {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes circle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes circle_ {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes moveLine {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes orbloop {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbmove {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(-2000px);
    }
}

@keyframes voice1 {
    0% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }

    20% {
        -webkit-transform: scaleY(1.5);
        -moz-transform: scaleY(1.5);
        -ms-transform: scaleY(1.5);
        transform: scaleY(1.5);
    }

    30% {
        -webkit-transform: scaleY(1.2);
        -moz-transform: scaleY(1.2);
        -ms-transform: scaleY(1.2);
        transform: scaleY(1.2);
    }

    50% {
        -webkit-transform: scaleY(0.5);
        -moz-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    80% {
        -webkit-transform: scaleY(1.5);
        -moz-transform: scaleY(1.5);
        -ms-transform: scaleY(1.5);
        transform: scaleY(1.5);
    }

    100% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes dragHand {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80%,100% {
        -webkit-transform: translateX(-144px);
        -moz-transform: translateX(-144px);
        -ms-transform: translateX(-144px);
        transform: translateX(-144px);
    }

    100% {
        opacity: 0;
    }
}

@keyframes index_down {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}

@keyframes newsIcon {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: .5;
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }
}

@keyframes index_hand {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}


.bx-img-dx {
    position: absolute;
    width: 500px;
    left: -100px;
    top: 0;
  
}
.bx-img-hicer{
   animation: sssp 5s linear;
    animation-fill-mode: forwards;
}

@keyframes sssp {
    from {
        width: 20px;
        top: 0px;
        left: -100px;
        transform: rotate(0deg);
    }

    to {
        width:800px;
        top:-200px;
        left: calc(100vw - 600px);
        transform: rotate(360deg);
    }
}

