@keyframes myfirst {
    0% { left:0; top: 0;}
    5% { left:5%; top: -50px;}
    7% { left:7%; top: 50px;}
    8% { left:9; top: 40px;}
    10% { left:11%; top: 0;}
    50% { left: 100%; top: 0;}
    100% { left: 100%; top: 100%;}
}
.ami-move{
    /* 动画： 名称， 完成时间（秒），速度曲线 ，delay，播放的次数（infinite=无限），逆向地播放*/
    animation: myfirst 5s ease 0s infinite normal; 
}

/* line dot */
@keyframes ani-light-dot-flash {
    0% { background-size: 50% 50%; opacity: .5;}
    40% { background-size: 100% 100%; opacity: 1;}
    60% { background-size: 100% 100%; opacity: 1;}
    100% { background-size: 50% 50%; opacity: .5;}
    
}
@keyframes ani-light-dot-move {
    0% { left: -4%; top: -29px;}
    1% { left: -4%; top: -29px;}
    2% { left: 1%; top: -29px;}
    3% { left: 1.5%; top: -69px;}
    4% { left: 2.5%; top: 25px;}
    5% { left: 3.6%; top: -45px;}
    6% { left: 6.5%; top: -29px;}

    40% {left: 97.7%; top: -29px;}
    80% {left: 97.7%; top: 3406px;}
    95% {left: 48%; top: 3406px;}
    100% {left: 48%; top: 3610px;}
}
.line-dot{ width: 57px; height: 57px; position: absolute; left: -4%; top: -29px;
    animation: ani-light-dot-move 20s linear 0s;  z-index: 3;
    animation-fill-mode:forwards;

}
.line-dot::before{ content: ''; display: block; position: absolute; width: 100%; height: 100%;
 background-image: url(../image/item2/dot-light.png);
 background-position: center center;
 background-repeat: no-repeat;
 animation: ani-light-dot-flash .5s linear 0s infinite normal; 
}

/* item1 ani */
@keyframes ani-move-line1 {
    0% { width: 0;}
    100% { width: 81.81%;}
}
@keyframes ani-move-line2 {
    0% { height: 0;}
    100% { height: 68%;}
}
@keyframes ani-move-line3 {
    0% { width: 0;}
    100% { width: 8.3%;}
}
@keyframes ani-move-line4 {
    0% { height: 0;}
    100% { height: 45.77%;}
}
@keyframes ani-move-line5 {
    0% { width: 0;}
    100% { width: 8.83%;}
}
@keyframes ani-move-line6 {
    0% { height: 0;}
    100% { height: 55%;}
}
.item1-move-line{ position:absolute; z-index: 2; width: 59%; height: 225px; left: 5.2%; top: 4%;}
.item1-move-line i{ position: absolute; }
.item1-move-line i:nth-child(1), .item1-move-line i:nth-child(3), .item1-move-line i:nth-child(5){
height: 1px;
 border-top: 3px solid #ff3f00;
}
.item1-move-line i:nth-child(2), .item1-move-line i:nth-child(4), .item1-move-line i:nth-child(6){
    width: 1px;
    border-left: 3px solid #ff3f00;
}
.item1-move-line1{ width:0%; left: 0; top: 0; 
    animation: ani-move-line1 1s linear 0s; 
    animation-fill-mode:forwards;
}
.item1-move-line2{ height: 0%;  left: 81.81%; top: 0;
    animation: ani-move-line2 .5s linear 1s;
    animation-fill-mode:forwards;
}
.item1-move-line3{ width: 0%; left: 81.81%; top:68%;
    animation: ani-move-line3 .3s linear 1.5s; 
    animation-fill-mode:forwards;
}
.item1-move-line4{ height: 0%; left: 90.11%; bottom: 30.8%;
    animation: ani-move-line4 .3s linear 1.8s; 
    animation-fill-mode:forwards;
}
.item1-move-line5{ width: 0%; left: 90.11%; top: 23%;
    animation: ani-move-line5 .3s linear 2.1s; 
    animation-fill-mode:forwards;
}
.item1-move-line6{ height: 0%;left: 98.8%; top: 23%;
    animation: ani-move-line6 .3s linear 2.4s; 
    animation-fill-mode:forwards;
}
/* 左右移动 */
@keyframes ani-item1-ani-1 {
    0% {  transform: translateX(-15%);}
    50% {transform: translateX(0%);}
    100% {transform: translateX(-15%);}
}
/* 360度转 -顺 */
@keyframes ani-item1-ani-2 {
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
/* 360度转 逆*/
@keyframes ani-360-back {
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(-360deg);}
}
/* 左右移动 */
@keyframes ani-item1-ani-6 {
    0% {  transform: translateX(-30%);}
    50% {transform: translateX(0%);}
    100% {transform: translateX(-30%);}
}
@keyframes ani-item1-ani-7 {
    0% {  transform: translateX(30%);}
    50% {transform: translateX(0%);}
    100% {transform: translateX(30%);}
}

/* 右移动消失 */
@keyframes ani-yuan {
    0% { transform: translateX(0);  opacity: 0;}
    50% {  transform: translateX(5%); opacity: 1;}
    100% {  transform: translateX(10%); opacity: 0;}
}

/* 向上移动消失 */
@keyframes ani-yuan-up {
    0% {  transform: translateY(5%);  opacity: 0;}
    50% {  transform: translateY(-15%);  opacity: 1;}
    100% {  transform: translateY(-20%);  opacity: 0;}
}

/* 由上往下移动消失 */
@keyframes ani-fade-dowm-out {
    0% {  transform: translateY(0%); opacity: 0;}
    50% {  transform: translateY(10%); opacity: 1;}
    100% {  transform: translateY(20%); opacity: 0;}
}

/* Y转动*/
@keyframes ani-item1-ani-3 {
    0%{ transform: rotateY(40deg); }
    50%{  transform: rotateY(0deg); }
    100%{  transform: rotateY(40deg); }
}
/* 由下往上移动 */
@keyframes ani-item1-ani-4 {
    0%{ top:60%;}
    100%{ top: 0%;}
}
/* 原地闪动 */
@keyframes ani-fadeInOut {
    0%{ opacity: 1;}
    50%{ opacity: 0;}
    100%{ opacity: 1;}
}


.item1-ani-box .pos{ position: absolute;}

.item1-pos-1{ left: 45%; top: 66%; }
.item1-ani-1{ animation: ani-item1-ani-1 2s linear 0s infinite normal;}

.item1-pos-2{ right: 8%; top: 30%;}
.item1-ani-2{ animation: ani-item1-ani-2 2s linear 0s 3;}

.item1-pos-3{ left: 78.4%; top: 48%; z-index: 2; }
.item1-ani-3{animation: ani-item1-ani-3 3s linear 0s infinite normal;}

.item1-ani-4{ left: 80.7%; top:60%; animation: ani-item1-ani-4 3s; animation-fill-mode:forwards;}
.item1-ani-4 .ani-sun{ animation: ani-item1-ani-2 4s linear 0s infinite normal; width: 148px; height: 148px;}

.item1-ani-6{ left: 70%; top: 20%; animation: ani-item1-ani-6 4s linear 0s infinite normal;}
.item1-ani-7{ right: 4%; top: 30%; animation: ani-item1-ani-7 4s linear 0s infinite normal;}

/* item 2*/
/* 上下往显示 */
@keyframes ani-item2-ani-2 {
    0%{ height: 0;}
    100%{ height: 213px;}
}
@keyframes ani-icon-mask-popup {
    0%{ height: 0;}
    100%{ height: 100%;}
}

@keyframes ani-ranked-ani-zoom {
    0%{ transform:scale(1.5);}
    100%{ transform:scale(1);}
}

.ranked-ani-zoom{
    animation: ani-ranked-ani-zoom 1s linear;
    animation-fill-mode:forwards;
}


/* 由下向下移动 */
@keyframes icon-mask-ani {
    0%{ height: 0;}
    100%{ height: 100%;}
}


/* item3 */

@keyframes item5-mid-ani{
    from{
        background-position: 0 0;
    }
    to{
        background-position: -16000px 0 ;
    }
}

/* width 0~100% */
@keyframes ani-echart-line {
    0%{width: 0%;}
    100%{width: 100%;}
}
.ani-echart-line{ 
    animation: ani-echart-line 3s ease 0s;
    animation-fill-mode:forwards;
}