@keyframes animtran {
            from {
                transform: rotateZ(0deg);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

        @keyframes animtrans {
            from {
                transform: rotateZ(360deg);
            }
            to {
                transform: rotateZ(0deg);
            }
        }

        @-webkit-keyframes animtran {
            from {
                transform: rotateZ(0deg);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

        @-webkit-keyframes animtrans {
            from {
                transform: rotateZ(360deg);
            }
            to {
                transform: rotateZ(0deg);
            }
        }

        #advert {
            width: 300px;
            height: 240px;
            margin: 10% auto;
            position: relative;
            /*border:groove;*/
        }

        #advert .bg1 {
            margin:0px;
            width: 225px;
            height: 225px;
            position: absolute;
            top: 0px;
            left: 35px;
            z-index: 10;
            /*border: solid;*/
        }

        #advert .bg1 div {
            width: 220px;
            height: 220px;
            border: #ccc 1px solid;
            border-radius: 15em;
            position: relative;
            animation: animtran 65s linear infinite;
            -webkit-animation: animtran 65s linear infinite;
            /*border:solid;*/
        }

        #advert .bg1 img {
            width: 50px;
            position: absolute;
            animation: animtrans 3s linear infinite;
            -webkit-animation: animtrans 65s linear infinite;
        }

        #advert .bg1 .icon01 {
            bottom: 0px;
            left: 15px;
        }

        #advert .bg1 .icon02 {
            /*top: 80px;
            left: -24px;*/
            top: 90px;
            left: -25px;
        }

        #advert .bg1 .icon03 {
            /*top: -7px;
            left: 44px;*/
            top: 10px;
            left: 0px;
        }

        #advert .bg1 .icon04 {
            /*top: -7px;
            right: 44px;*/
            top: -25px;
            right: 85px;
        }

        #advert .bg1 .icon05 {
            /*top: 80px;
            right: -24px;*/
            top: 10px;
            right: 5px;
        }

        #advert .bg1 .icon06 {
            /*bottom: 25px;
            right: 7px;*/
            bottom: 90px;
            right: -25px;
        }

        #advert .bg1 .icon07 {
            /*bottom: -25px;
            left: 105px;*/
            bottom: 10px;
            left: 170px;

        }
        #advert .bg1 .icon08 {
            /*bottom: 25px;
            left: 27px;*/
          	bottom: -25px;
            left: 95px;
        }
        #advert .bg2 {
            width: 145px;
            height: 145px;
            position: absolute;
            top: 40px;
            left: 75px;
            z-index: 9;
            /*border:solid;*/
        }

        #advert .bg2 div {
            width: 140px;
            height: 140px;
            border: #e376bd 1px solid;
            border-radius: 15em;
            position: relative;
            animation: animtrans 35s linear infinite;
            -webkit-animation: animtrans 35s linear infinite;
        }

        #advert .bg2 span {
            display: inline-block;
            background-color: #FFFFFF;
            overflow: hidden;
            border-radius: 15em;
            position: absolute;
            animation: animtran 35s linear infinite;
            -webkit-animation: animtran 35s linear infinite;
        }

        #advert .bg2 img {
            padding: 10px;
            display: block;
        }

        /*#advert .bg2 .icon8{
            top: 10px;
            left: 13px;
        }*/

        #advert .bg2 .icon09 {
            bottom: 0;
            left: 0px;
        }

        #advert .bg2 .icon10 {
            bottom: 100px;
            right: 0px;
        }


        #advert .bg3 {
            width: 140px;
            height: 140px;
            position: absolute;
            top: 42px;
            left: 78px;
            z-index: 8;
            /*border: solid;*/
            border:none;
        }

        #advert .bg3 div {
            width: 135px;
            height: 135px;
            border: #e077bf 1px dotted;
            border-radius: 15em;
            position: relative;
            border:none;
            /*animation: animtran 8s linear infinite;
            -webkit-animation: animtran 8s linear infinite;*/
        }

        #advert .bg3 span {
            display: inline-block;
            background-color: #FFFFFF;
            overflow: hidden;
            border-radius: 15em;
            position: absolute;
            /*animation: animtrans 4s linear infinite;
            -webkit-animation: animtrans 4s linear infinite;*/
        }

        #advert .bg3 img {
            padding: 10px;
            display: block;
        }

        #advert .bg3 .icon11 {
            top: -14px;
            right: 0px;
        }

        #advert .bg3 .icon12 {
            bottom: -13px;
            right: 10px;
        }

        #advert .content {
            width: 130px;
            height: 50px;
            background: linear-gradient(to right, #fa71ad, #c77dd1);
            position: absolute;
            z-index: 11;
            left: 85px;
            top: 125px;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 20px;
            box-shadow: #f6f6f6 8px 8px 8px 4px;
            cursor: pointer;
        }


        @keyframes ani-one {
            from {
                left: 260px;
            }
            to {
                left: 16px
            }
        }

        @keyframes ani-two {
            from {
                left: 260px;
            }
            to {
                left: 70px
            }
        }

        @keyframes ani-three {
            from {
                top: 0;
                left: 0;
            }
            to {
                top: 8px;
                left: 8px;
            }
        }

        @keyframes ani-four {
            0% {
                width: 130px;
                height: 50px;
                left: 85px;
                top: 125px;
                box-shadow: #f6f6f6 8px 8px 8px 4px;
                border: #eee 0px solid;
                margin-left: 0;
            }
            100% {
                width: 259px;
                height: 333px;
                left: 50%;
                top: 0px;
                box-shadow: #FFFFFF 0 0 0 0;
                border: #eee 1px solid;
                margin-left: -130px;
            }
        }

        @keyframes ani-five {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @keyframes ani-six {
            from {
                left: 260px;
            }
            to {
                left: 0;
            }
        }

        @-webkit-keyframes ani-one {
            from {
                left: 260px;
            }
            to {
                left: 16px
            }
        }

        @-webkit-keyframes ani-two {
            from {
                left: 260px;
            }
            to {
                left: 70px
            }
        }

        @-webkit-keyframes ani-three {
            from {
                top: 0;
                left: 0;
            }
            to {
                top: 8px;
                left: 8px;
            }
        }

        @-webkit-keyframes ani-four {
            0% {
                width: 130px;
                height: 50px;
                left: 85px;
                top: 125px;
                box-shadow: #f6f6f6 8px 8px 8px 4px;
                border: #eee 0px solid;
                margin-left: 0;
            }
            100% {
                width: 259px;
                height: 333px;
                left: 50%;
                top: 0px;
                box-shadow: #FFFFFF 0 0 0 0;
                border: #eee 1px solid;
                margin-left: -130px;
            }
        }

        @-webkit-keyframes ani-five {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @-webkit-keyframes ani-six {
            from {
                left: 260px;
            }
            to {
                left: 0;
            }
        }


        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #999999;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #999999;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #999999;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #999999;
        }

        .animation-paused {
            animation-play-state: paused !important;
            -webkit-animation-play-state: paused !important;
        }

        .animation-one {
            animation: ani-one 0.6s ease 1;
            -webkit-animation: ani-one 0.6s ease 1;
        }

        .animation-two {
            animation: ani-two 0.6s ease 1;
            -webkit-animation: ani-two 0.6s ease 1;
        }

        .animation-three {
            animation: ani-three 0.6s ease 1;
            -webkit-animation: ani-three 0.6s ease 1;
        }

        .animation-four {
            animation: ani-four 0.3s ease 1;
            -webkit-animation: ani-four 0.3s ease 1;
        }

        .animation-five {
            animation: ani-five 0.5s ease 1;
            -webkit-animation: ani-five 0.5s ease 1;
        }

        .animation-six {
            animation: ani-six 0.6s ease 1;
            -webkit-animation: ani-six 0.6s ease 1;
        }

        .opacity0 {
            opacity: 0;
        }