﻿
/*定位器*/
.Tracker {
    position:absolute;
    z-index:9999;
    display:flex;
    box-shadow: 0px 5px 8px rgba(0,0,0,1);
    background-clip:padding-box;
    background-color:#fff;
    border-radius:4px;
    border:1px solid rgba(0,0,0,0.2);
    padding:4px;
}
.Top-orient-left:before,.Top-orient-right:before {
    display:block;
    content:"";
    position:absolute;
    border-bottom: 7px solid rgba(0,0,0,0.2);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    top:-7px;
    /*box-shadow:0 2px 1px red inset;*/
}
.Top-orient-left:before {
    left:6px;
}
.Top-orient-left:after,.Top-orient-right:after {
    display:block;
    content:"";
    position:absolute;
    border-bottom: 6px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    top:-6px;
    /*box-shadow:0 2px 1px red inset;*/
}
.Top-orient-left:after {
    left:7px;
}
.Top-orient-right:before {
    right:6px;
}
.Top-orient-right:after {
    right:7px;
}
.Bottom-orient-left:before,.Bottom-orient-right:before {
    display:block;
    content:"";
    position:absolute;
    border-top: 7px solid rgba(0,0,0,0.2);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    bottom:-7px;
}
.Bottom-orient-left:before {
        left:6px;
}
.Bottom-orient-left:after,.Bottom-orient-right:after {
    display:block;
    content:"";
    position:absolute;
    border-top: 6px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    bottom:-6px;
}
.Bottom-orient-left:after {
   left:7px;
}
.Bottom-orient-right:before {
    right:6px;
}
.Bottom-orient-right:after {
    right:7px;
}


@-moz-keyframes mymove /* Firefox */
{
    from {
        top:-150px;
        left:-280px;
        opacity: 0;
    }
    30% {
        opacity:0.6
    }
    to {
        top: 35px;
        left: 10px;
        opacity: 1;
    }
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {
        top:-150px;
        left:-280px;
        opacity: 0;
    }
    30% {
        opacity:0.6
    }
    to {
        top: 35px;
        left: 10px;
        opacity: 1;
    }
}

@-o-keyframes mymove /* Opera */
{
    from {
        top:-150px;
        left:-280px;
        opacity: 0;
    }
    30% {
        opacity:0.6
    }
    to {
        top: 35px;
        left: 10px;
        opacity: 1;
    }
}
@keyframes mymove {
    from {
        top:-150px;
        left:-280px;
        opacity: 0;
    }
    30% {
        opacity:0.6
    }
    to {
        top: 35px;
        left: 10px;
        opacity: 1;
    }
}

@-moz-keyframes closemove /* Firefox */
{
    from {
         top: 35px;
        left: 10px;
        visibility:visible;
        opacity: 1;
    }

    to {
         top:-150px;
        left:-280px;
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}

@-webkit-keyframes closemove /* Safari and Chrome */
{
      from {
         top: 35px;
        left: 10px;
        visibility:visible;
        opacity: 1;
    }

    to {
         top:-150px;
        left:-280px;
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}

@-o-keyframes closemove /* Opera */
{
    from {
         top: 35px;
        left: 10px;
        visibility:visible;
        opacity: 1;
    }

    to {
         top:-150px;
        left:-280px;
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}

@keyframes closemove {
    from {
         top: 35px;
        left: 10px;
        visibility:visible;
        opacity: 1;
    }

    to {
         top:-150px;
        left:-280px;
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}
@keyframes mycolor {
    50% {
        background-color: #FFFFFF;
    }

    100% {
        background-color: #FFFFFF;
    }
}

@-moz-keyframes mycolor /* Firefox */
{
    50% {
        background-color: #FFFFFF;
    }

    100% {
        background-color: #FFFFFF;
    }
}

@-webkit-keyframes mycolor /* Safari and Chrome */
{
    50% {
        background-color: #FFFFFF;
    }

    100% {
        background-color: #FFFFFF;
    }
}

@-o-keyframes mycolor /* Opera */
{
    50% {
        background-color: #FFFFFF;
    }

    100% {
        background-color: #FFFFFF;
    }
}

@keyframes tipanime {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@-moz-keyframes tipanime /* Firefox */
{
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@-webkit-keyframes tipanime /* Safari and Chrome */
{
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@-o-keyframes tipanime /* Opera */
{
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        display: none;
    }
}


@-webkit-keyframes closeModal 
{
 from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes closeModal 
{
 from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}