.fix-banner {
    position: absolute;
    z-index: 50;
    max-width: 340px;
    height: 200px;
    top: 80%;
    left: 19%;
    width: 20%;
    min-height: 40px;
     /*cursor: pointer;*/
}

.fix-banner a{
    display: block;
    width: 100%;
    height: 100%;
}
.fix-banner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url(../images/ball/banner01.png) center top / 100% no-repeat ;
     animation:banner01 2.4s cubic-bezier(.250, .460, .450, .940) 0s infinite both;


}
.fix-banner:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url(../images/ball/banner02.png) center top / 100% no-repeat ;
     animation:banner01 2.4s cubic-bezier(.250, .460, .450, .940) 1.2s infinite both;


}

@keyframes banner01
{
  0%,20% {
            transform: rotateX(0) scaleY(1);
            filter: blur(0px);
    opacity: 1;
  }
  30%,70% {
            transform: rotateX(200deg) scaleY(1);
            filter: blur(3px);
    opacity: 0;
  }
    80%,100% {
            transform: rotateX(0) scaleY(1);
             filter: blur(0px);
    opacity: 1;
  }
}



@media screen and (max-width:768px)
{
.fix-banner {
    max-width: 360px;
    height: 100px;
    top: 97%;
    left: 15px;
    width: 47%;
    min-height: 40px;
}

}


/*-----------------------------------------------
    ball
-----------------------------------------------*/

.ball{
    position: fixed;
    left: 15px;
    top: 65vh;
    width: 250px;
    height: 250px;
    z-index: 50;
        /*background: rgba(206, 204, 46, 0.6);*/
        background: url(../images/ball/ball.png) center top / 100% no-repeat ;
    transition: all .3s ease;
    cursor: pointer;

}
.ball:after{
    content: '';
    position: absolute;
    background: url(../images/ball/ball-box.png) center top / 100% no-repeat ;
    pointer-events: none;
    animation:ball2 1.5s cubic-bezier(.250, .460, .450, .940) 0s infinite both;
    z-index: 10;

    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ball:before{
    content: '';
    position: absolute;
    background: url(../images/ball/ball-sl.png) center top / 100% no-repeat ;
    pointer-events: none;
    animation:ball 1.5s cubic-bezier(.250, .460, .450, .940) 0s infinite both;
    z-index: 11;

    width: 100%;
    height: 100%;
}
@keyframes ball
{
0%{filter:brightness(1);transform: scale(1);}
50%{filter:brightness(1.1);transform: scale(1.1);}
100%{filter:brightness(1);transform: scale(1);}
}
@keyframes ball2
{
0%{filter:brightness(1.1);transform: scale(1.05);}
50%{filter:brightness(1);transform: scale(1);}
100%{filter:brightness(1.1);transform: scale(1.05);}
}
.ball-show{
    position: absolute;
    width: 100%;
    height: 100%;
        /*background: rgba(203, 152, 152, 0.6);*/
        z-index: 10;
        cursor: pointer;

}

.ball-back{
    position: absolute;
    width: 100%;
    height: 100%;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 10;
        display: none;
        cursor: pointer;

}

.ball-1-h a,.ball-2-h a,.ball-3-h a,.ball-1 a,.ball-2 a,.ball-3 a{
    display: block;
    width: 100%;
    height: 100%;
}

.ball-1,.ball-2,.ball-3{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    left: 100px;
    opacity: 0;

    transition: all .3s ease;
    /*cursor: pointer;*/
}
.ball-1 { /*background: rgb(170, 60, 158);*/background: url(../images/ball/ball-1.png) center top / 100% no-repeat ; }
.ball-2 { /*background: rgb(73, 120, 181);*/ background: url(../images/ball/ball-2.png) center top / 100% no-repeat ;}
.ball-3 {  background: url(../images/ball/ball-3.png) center top / 100% no-repeat ;}


.ball-1-h { top: 103px; left: 249px; opacity: 1;}
.ball-2-h { top: -9px; left: 250px;opacity: 1; }
.ball-3-h { top: -83px; left: 153px; opacity: 1;}



@media screen and (max-width:768px)
{
.ball{
    top: 34%;
        width: 105px;
        height: 150px;
        z-index: 50;
        right: 15px;
}

.ball-1,.ball-2,.ball-3{
    width: 65px;
    height: 65px;
    top: 0px;
    left: 0px;


}

.ball-1-h { top: -57px; left: 0px; }
.ball-2-h { top: -44px; left: 74px; }
.ball-3-h { top: 60px; left: 55%; }
}