@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,input,p,blockquote,th,td,section,canvas {
    padding: 0;
    margin: 0;
}
li{ list-style: none;}
img{display: block; width: 100%;border: none; pointer-events: none;}
textarea{border: none; background: none;resize : none; pointer-events:none;}

html,body {
    font-size: 22px;
    color: #000;
    font-family: 'Microsoft YaHei', Arial;
    overflow:hidden;
    width: 100%;
    height: 100%;
    background-color: #030303;
    -webkit-touch-callout:none; /* 禁用长触弹出的下载图片菜单 */
    -webkit-user-select:none; /* 禁用长触选择文字等功能 */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.IIV::-webkit-media-controls-play-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
    position: absolute;
    left: 120%;
}
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
    position: absolute;
    left: 120%;
}
@font-face {
    font-family: 'fz';
    src:url('../font/fz.otf');
}
.hide{
    display: none;
}
.load{
    width: 6.4rem;
    height: 12.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6.2rem 0 0 -3.2rem;
}
.load>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.load1{
    width: 1.7rem;
    margin: -0.85rem 0 0 -0.4rem;
}
.load2{
    width: 12.4rem;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.18rem;
    color: #FFFFFF;
    font-family: 'fz';
    transform: rotate(90deg);
    margin: -0.3rem 0 0 -6.6rem;
}
.video{
    width: 12.4rem;
    height: 6.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(90deg);
    margin: -3.2rem 0 0 -6.2rem;
}
#video{
    width: 12.4rem;
    height: 100%;
}
.video_canvas{
    width: 100%;
    height: 100%;
}
.back{
    width: 0.47rem;
    position: fixed;
    bottom: 0.3rem;
    right: 0.3rem;
}
.main{
    width: 6.4rem;
    height: 12.4rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6.2rem 0 0 -3.2rem;
}
.main>div{
    width: 6.4rem;
    height: 12.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6.2rem 0 0 -3.2rem;
    overflow: hidden;
}
.page1{
    background-image: url("../images/kv.gif");
    background-repeat: no-repeat ;
    background-position: center center;
    background-size: 6.4rem 12.4rem;
}
.page1>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p1_1_active{
    animation: bgs 5s infinite linear;
    -webkit-animation: bgs 5s infinite linear;
}
.p1_2{
    width: 0.46rem;
    margin:2.12rem 0 0 -0.86rem;
}
.p1_2_active{
    animation: zoom 1s infinite linear;
    -webkit-animation: zoom 1s infinite linear;
}
.p1_3{
    width: 0.49rem;
    margin: 2.5rem 0 0 -0.9rem;
}
.pageAll{
    background-image: url("../images/page2.jpg");
    background-repeat: no-repeat ;
    background-position: center center;
    background-size: 6.4rem 12.4rem;
}
.pageAll1{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.73rem;
    margin: -2.92rem 0 0 -3.06rem;
}
.page2>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p2_1{
    width: 3.3rem;
    margin: -2.88rem 0 0 -2.21rem;
}
#p2_2{
    width: 0.51rem;
    margin: -1.49rem 0 0 -0.84rem;
}
#p2_3{
    width: 0.51rem;
    margin: -2.16rem 0 0 -0.84rem;
}
#p2_4{
    width: 0.51rem;
    margin: -1.62rem 0 0 -0.84rem;
}
#p2_5{
    width: 0.51rem;
    margin: -1.2rem 0 0 -0.84rem;
}
.p2_3{
    width: 0.57rem;
    margin: -2.84rem 0 0 -2.98rem;
}
.p2_4{
    width: 0.57rem;
    height: 1.6rem;
    margin: -0.8rem 0 0 -2.98rem;
}

.page3>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p3_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p3_1>div{
    position: absolute;
}
.p3_2{
    width: 3.31rem;
}
.p3_3{
    width: 1.01rem;
    left: -0.3rem;
    top: 0.4rem;
}
.p3_4{
    width: 0.7rem;
    left: 0.4rem;
    top: 4.85rem;
}
.p3_5{
    width: 1.03rem;
    left: 2.04rem;
    top: 0.62rem;
    transform-origin: center;
}
.p3_5_active{
    animation: dou 2s infinite linear;
    -webkit-animation: dou 2s infinite linear;
}
.p3_6{
    width: 2.86rem;
    left: 0.20rem;
    top: 1.9rem;
    transform-origin: left;
}
.p3_6_active{
    animation: tui 2s infinite linear;
    -webkit-animation: tui 2s infinite linear;
}
.p3_7{
    width: 1.85rem;
    left: -0.01rem;
    top: 1.49rem;
}
.p3_8{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}

.page4>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p4_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p4_1>div{
    position: absolute;
}
.p4_2{
    width: 2.44rem;
    left: 0.59rem;
    top: 2.92rem;
}
.p4_3{
    width: 3.31rem;
}
.p4_4{
    width: 2.11rem;
    left: 0;
    top: 0;
}
.p4_5{
    width: 1.54rem;
}
.p4_6{
    width: 0.92rem;
    left: 1.84rem;
    top: 1.07rem;
}
.p4_7{
    width: 3.31rem;
    top: 0.01rem;
    opacity: 0;
}
.p4_7_active{
    animation: show 2s infinite linear;
    -webkit-animation: show 2s infinite linear;
}
.p4_8{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}
.p4_9{
    width: 3.31rem;
}
.page5>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p5_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p5_1>div{
    position: absolute;
}
.p5_2{
    width: 3.31rem;
}
.p5_3{
    width: 2.31rem;
    height: 3.56rem;
    left: 0.98rem;
    top: 1.06rem;
    background: url("../images/p5_3.png") no-repeat -0.66rem 0;
    background-size: 2.97rem 3.56rem;
}
.p5_4{
    width: 0.66rem;
    height: 3.56rem;
    left: 0.32rem;
    top: 1.06rem;
    background: url("../images/p5_3.png") no-repeat 0 0;
    background-size: 2.97rem 3.56rem;
}
.p5_5{
    height: 1.21rem;
    background: url("../images/p5_6.png") no-repeat 0 0;
    background-size: 1.46rem 1.21rem;
    transition: 1s;
    left: 0.53rem;
    top: 1.98rem;
}
.p5_bg{
    background-image: url("../images/p5_5.png");
    background-size: 2.41rem 1.2rem;
    background-repeat: no-repeat;
}
.fish1{
    animation: fish1 8s infinite linear;
    -webkit-animation: fish1 8s infinite linear;
}
.fish{
    animation: fish 11s infinite linear;
    -webkit-animation: fish 11s infinite linear;
}
.p5_6{
    width: 0.55rem;
    height: 1.2rem;
    background-position: 0 0;
    left: 0.88rem;
    top: -6.6rem;
}
.p5_7{
    width: 0.35rem;
    height: 0.9rem;
    background-position: -0.55rem 0;
    left: 2.2rem;
    top: 6.6rem;
}
.p5_8{
    width: 0.35rem;
    height: 0.9rem;
    background-position: -0.9rem 0;
    left: 2.6rem;
    top: 6.2rem;
}
.p5_9{
    width: 0.3rem;
    height: 0.9rem;
    background-position: -1.2rem 0;
    left: 2.6rem;
    top: 7.5rem;
}
.p5_10{
    width: 0.4rem;
    height: 0.9rem;
    background-position: -1.56rem 0;
    left: 1.8rem;
    top: 8.1rem;
}
.p5_11{
    width: 0.46rem;
    height: 1.2rem;
    background-position: -2.06rem 0;
    left: 1rem;
    top: 7rem;
}
.p5_12{
    width: 3.31rem;
}
.p5_13{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}

.page6>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p6_7{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p6_7>div{
    position: absolute;
}
.p6_1{
    width: 3.31rem;
}
.p6_2 {
    width: 3.31rem;
}
.p6_2_active{
    animation: yun 2.2s infinite linear;
    -webkit-animation: yun 2.2s infinite linear;
}
.p6_3{
    width: 0.32rem;
    height: 0.83rem;
    background: url("../images/p3_3_active.png") no-repeat 0.1rem 0.01rem;
    background-size: 0.09rem 0.15rem;
    left: 2.64rem;
    top: 1.32rem;
}
.p6_3_active{
    animation: p3_3bgs 2s infinite linear;
    -webkit-animation: p3_3bgs 2s infinite linear;
}
.p6_4{
    width: 3.31rem;
}
.p6_5{
    width: 0.54rem;
    left: 0.72rem;
    top: 4.02rem;
}
.p6_5_active{
    animation: Rotating 5s infinite linear;
    -webkit-animation: Rotating 5s infinite linear;
}
.p6_6{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}
.list{
    width: 0.60rem;
    height: 5.79rem;
    margin: -2.85rem 0 0 -3rem;
}

.page7>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p7_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p7_1>div{
    position: absolute;
}
.p7_2{
    width: 3.31rem;
}
.p7_3{
    width: 0.39rem;
    left: 1.82rem;
    top: 0.84rem;
}
.p7_3_active{
    animation: down 5s infinite linear;
    -webkit-animation: down 5s infinite linear;
}
.p7_4{
    width: 1.52rem;
    background: url("../images/p7_4.png") no-repeat 0 0;
    background-size: 1.52rem 2.45rem;
    left: 1.19rem;
    top: 2.4rem;
}
.p7_5{
    width: 1rem;
    left: 1.8rem;
    top: 4.43rem;
}
.p7_6{
    width: 0.14rem;
    left: 2.48rem;
    top: 4.65rem;
}
.p7_6_active{
    animation: top 2s infinite linear;
    -webkit-animation: top 2s infinite linear;
}
.p7_7{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}
.page8>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p8_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p8_1>div{
    position: absolute;
}
.p8_2{
    width: 3.31rem;
}
.p8_3{
    width: 3.31rem;
}
.p8_3_active{
    animation: downUp 3s infinite linear;
    -webkit-animation: downUp 3s infinite linear;
}
.p8_4{
    width: 1.85rem;
    bottom: 0;
}
.p8_5{
    height: 1.1rem;
    background: url("../images/p8_5.png") no-repeat 0 0 ;
    background-size: 1.6rem 1.1rem;
    left: 1.24rem;
    top: 2.8rem;
}
.p8_6{
    width: 1.81rem;
}
.p8_7{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}
.p8_8{
    width: 3.31rem;
}
.page9>div{
    position: absolute;
    left: 50%;
    top: 50%;
}
.p9_1{
    width: 3.31rem;
    height: 5.81rem;
    margin: -2.86rem 0 0 -2.21rem;
    overflow: hidden;
}
.p9_1>div{
    position: absolute;
}
.p9_2,.p9_9{
    width: 3.31rem;
}
.p9_3{
    width: 0.6rem;
    left: 2.21rem;
    top: -0.8rem;
}
.p9_3_active{
    animation: jingyu 10s infinite linear;
    -webkit-animation: jingyu 10s infinite linear;
}
.p9_4{
    width: 0.6rem;
    left: 1.31rem;
    top: 4.8rem;
}
.p9_4_active{
    animation: jingyu1 9s infinite linear;
    -webkit-animation: jingyu1 9s infinite linear;
}
.p9_5{
    width: 3.09rem;
    left: -1rem;
    top: 0.94rem;
}
.p9_6{
    width: 0.58rem;
    left: 1.9rem;
    top: 2.5rem;
}
.p9_7{
    width: 0.68rem;
    left: 1.85rem;
    top: 2.4rem;
}
.p9_8{
    width: 0.55rem;
    height: 0.25rem;
    background: url("../images/p9_8.png") no-repeat 0 0;
    background-size: 0.55rem 1.05rem;
    left: 0.2rem;
    top: 0.2rem;
}
.p9_11{
    width: 0.55rem;
    height: 0.35rem;
    background: url("../images/p9_8.png") no-repeat 0 -0.25rem ;
    background-size: 0.55rem 1.05rem;
    left: 0;
    top: 1rem;
}
.p9_12{
    width: 0.55rem;
    height: 0.25rem;
    background: url("../images/p9_8.png") no-repeat 0 0;
    background-size: 0.55rem 1.05rem;
    left: 0.5rem;
    top: 3.85rem;
}
.p9_13{
    width: 0.55rem;
    height: 0.35rem;
    background: url("../images/p9_8.png") no-repeat  0 -0.8rem;
    background-size: 0.55rem 1.05rem;
    left: 0rem;
    top: 5rem;
}
.p9_10{
    width: 0.25rem;
    margin: -0.18rem 0 0 -2.82rem;
}
.page10{
    background: url("../images/page10.jpg") no-repeat 0 0;
    background-size: 100% 100%;
}
.page10>div{
    position: absolute;
    left:50%;
    top: 50%;
}
.p10_1{
    width: 3.58rem;
    height: 6.02rem;
    background: #19148c;
    margin: -4.49rem 0 0 -1.31rem;
}
.p10_2{
    width: 5.76rem;
    height: 3.31rem;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);
    margin: 1.35rem 0 0 -1.1rem;
    overflow: hidden;
}
.swiper-container {
    width: 100%;
    height: 100%;

}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


.p10_3{
    width: 0.78rem;
    height: 2.73rem;
    background: #19148c;
    margin: 0.55rem 0 0 0.84rem;
}
.p10_3:before{
    content: '';
    background: #000103;
    width: 0.72rem;
    height: 2.67rem;
    position: absolute;
    left: 0.03rem;
    top: 0.03rem;
}
.p10_4{
    width: 0.43rem;
    position: absolute;
    margin: 0.32rem 0 0 0.19rem;
}
.p10_5{
    width: 1.26rem;
    height: 3.58rem;
    background: #19148c;
    margin: 1rem 0 0 -0.34rem;
}
.p10_5:before{
    content: '';
    width: 1.2rem;
    height: 3.52rem;
    background: #000103;
    position: absolute;
    left: 0.03rem;
    top: 0.03rem;
}
.p10_6{
    width: 3.22rem;
    height: 0.94rem;
    overflow: hidden;
    position: absolute;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);
    margin: 1.32rem 0 0 -0.96rem;
}
.p10_7{
    width: 0.58rem;
    margin: 1.8rem 0 0 -0.83rem;
}
.p10_9{
    width: 0.8rem;
    margin: -2.59rem 0 0 -2.4rem;
}
.p10_10{
    width: 0.8rem;
    margin: 0.14rem 0 0 -2.4rem;
}
.prev{
    width: 0.91rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -4.38rem 0 0 -0.95rem;
}
.next{
    width: 0.91rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 3.83rem 0 0 -0.95rem;
}
.music{
    width: 0.99rem;
    position: fixed;
    right: 0.3rem;
    bottom: 0.3rem;
}
.pop{
    width: 6.4rem;
    height: 12.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6.2rem 0 0 -3.2rem;
}
.pop>div{
    width: 6.4rem;
    height: 12.4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6.2rem 0 0 -3.2rem;
    background: rgba(0,0,0,.85);
}
.pop1_1{
    width: 2.79rem;
    position: fixed;
    right: 0.4rem;
    top: 0.2rem;
}
/*横屏提示*/
.landscape_tip{ position: fixed; left: 0; top: 0; width: 100%; height: 100%;  background: url(../images/tip.jpg) no-repeat center center; background-size: cover }
@media screen and (orientation: portrait) {
    /*横屏 css*/
    .landscape_tip { display: none;}
}
@media screen and (orientation: landscape) {
    /*竖屏 css*/
    .landscape_tip { display: block;}
}
@keyframes bgs {
    10%,15%,43%,88% { background-image: url("../images/p1_1_1.png");  }
    21%,39%,55%,90% { background-image: url("../images/p1_1_2.png"); }
    92%,100%{ background-image: url("../images/p1_1_3.png"); }
}
@-webkit-keyframes bgs {
    10%,15%,43%,88% { background-image: url("../images/p1_1_1.png"); }
    21%,39%,55%,90%  { background-image: url("../images/p1_1_2.png"); }
    92%,100%{ background-image: url("../images/p1_1_3.png");}
}
@keyframes p3_3bgs {
    0%,49%,100% { background: url("../images/p3_3_active.png") no-repeat 0.1rem 0,01rem;background-size: 0.09rem 0.15rem;}
    50%,99% { background: url("../images/p3_3.png") no-repeat 0 0;background-size: 0.32rem 0.83rem;}
}
@-webkit-keyframes p3_3bgs {
    0%,49%,100% { background: url("../images/p3_3_active.png") no-repeat 0.1rem 0.01rem;background-size: 0.09rem 0.15rem;}
    50%,99% { background: url("../images/p3_3.png") no-repeat 0 0;background-size: 0.32rem 0.83rem;}
}
@keyframes yun {
    25% { transform: translateY(0.1rem);}
    75% { transform: translateY(-0.1rem);}
}
@-webkit-keyframes yun {
    25%{ -webkit-transform: translateY(0.1rem);}
    75%{ -webkit-transform: translateY(0.1rem);}
}
@-webkit-keyframes Rotating{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes Rotating{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes zoom {
    50% {transform: scale(.9);  }
    0%,100% { transform: scale(1.1); }
}
@-webkit-keyframes zoom {
    50% { -webkit-transform: scale(.9);  }
    0%,100% { -webkit-transform: scale(1.1); }
}
@keyframes show {
    30%,35%,60%,65%,99% {opacity: 0;  }
    0%,31%,62%,100% { opacity: 1; }
}
@-webkit-keyframes show {
    30%,35%,60%,65%,99%{opacity: 0;  }
    0%,31%,62%,100% { opacity: 1; }
}
@keyframes fish {
    0%{ transform: translateY(0rem);}
    100%{transform: translateY(-10rem);}
}
@-webkit-keyframes fish {
    0%{ -webkit-transform: translateY(0rem);}
    100%{ -webkit-transform: translateY(-10rem);}
}
@keyframes fish1 {
    0%{ transform: translateY(0rem);}
     100%{transform: translateY(-9rem);}
}
@-webkit-keyframes fish1 {
    0%{ -webkit-transform: translateY(0rem);}
    100%{ -webkit-transform: translateY(-9rem);}
}
@keyframes tui {
    25%{transform: rotate(-5deg)}
    75%{transform: rotate(5deg)}
}
@-webkit-keyframes tui {
    25%{-webkit-transform: rotate(-5deg)}
    75%{-webkit-transform: rotate(5deg)}
}
@keyframes dou {
    25%{transform: rotate(-15deg)}
    75%{transform: rotate(15deg)}
}
@-webkit-keyframes dou {
    25%{-webkit-transform: rotate(-15deg)}
    75%{-webkit-transform: rotate(15deg)}
}
@keyframes top {
    0%,100% { transform: translateX(0rem);}
    50% { transform: translateX(-0.5rem);}
}
@-webkit-keyframes top {
    0%,100%{ -webkit-transform: translateX(0rem);}
    50%{ -webkit-transform: translateX(-0.5rem);}
}
@keyframes down {
    25% { transform: translateX(0.3rem);}
    75% { transform: translateX(-0.3rem);}
}
@-webkit-keyframes down {
    25%{ -webkit-transform: translateX(0.3rem);}
    75%{ -webkit-transform: translateX(-0.3rem);}
}
@keyframes jingyu {
    0% { transform: translateY(0rem);}
    100% { transform: translateY(6.5rem);}
}
@-webkit-keyframes jingyu {
    0%{ -webkit-transform: translateY(0rem);}
    100%{ -webkit-transform: translateY(6.5rem);}
}
@keyframes jingyu1 {
    0% ,100%{ transform: translateY(0rem);}
    10%{transform: translateY(1rem);}
    10.1% { transform: translateY(-7rem);}
}
@-webkit-keyframes jingyu1 {
    0%,100%{ -webkit-transform: translateY(0rem);}
    10%{-webkit-transform: translateY(1rem);}
    10.1%{ -webkit-transform: translateY(-7rem);}
}
@keyframes downUp {
    25% { transform: translateX(0.05rem);}
    75% { transform: translateX(-0.05rem);}
}
@-webkit-keyframes downUp {
    25%{ -webkit-transform: translateX(0.05rem);}
    75%{ -webkit-transform: translateX(-0.05rem);}
}

@keyframes top1 {
    0% {
        transform: translateY(0);
        opacity: 0;
    }40%, 60% {
         transform: translateY(-4px);
         opacity: 1;
     }80%, 100% {
          transform: translateY(-8px);
          opacity: 0;
      }
}
@-webkit-keyframes top1 {
    0% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }40%, 60% {
         -webkit-transform: translateY(-4px);
         opacity: 1;
     }80%, 100% {
          -webkit-transform: translateY(-8px);
          opacity: 0;
      }
}
@keyframes down1 {
    0% {
        transform: translateY(0);
        opacity: 0;
    }40%, 60% {
         transform: translateY(4px);
         opacity: 1;
     }80%, 100% {
          transform: translateY(8px);
          opacity: 0;
      }
}
@-webkit-keyframes down1 {
    0% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }40%, 60% {
         -webkit-transform: translateY(4px);
         opacity: 1;
     }80%, 100% {
          -webkit-transform: translateY(8px);
          opacity: 0;
      }
}