body {
    max-width: 640px;
    margin: 0 auto;
}
.index-main {
    /* position: relative; */
}
.tip {
    display: block;
    position:absolute;
    top: 75%;
    left: 3.5rem;
    width: 3.5rem;
    animation:fadeIn 1s infinite;
    -webkit-animation:fadeIn 1s infinite;
}
.logo {
    display: block;
    position:absolute;
    bottom: 2%;
    left: 3.5rem;
    width:40%;
}
.play {
    -webkit-tap-highlight-color:transparent;
    display: block;
    width: 2.8rem;
    height:1.59rem;
    background: url("../img/start.png") no-repeat;
    background-size: 100% 100%;
    position:absolute;
    top: 74%;
    left: 0.1rem;
    z-index: 100;
}
.play1 {
    -webkit-tap-highlight-color:transparent;
    display: block;
    width: 3rem;
    height:1.76rem;
    background: url("../img/open.gif") no-repeat;
    background-size: 100% 100%;
    position:absolute;
    top: 13rem;
    left: 0.2rem;
    z-index: 100;
}
@keyframes fadeIn
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes fadeIn /*Safari and Chrome*/
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes tada{
    0%{transform:scale(1);}
    10%,20%{transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{transform:scale(1.2) rotate(-3deg);}
    100%{transform:scale(1) rotate(0);}
}

@-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}
.tada1{
    -webkit-animation: tada 1s .2s ease both;
    animation: tada 1s .2s ease both;



}

.desc-main {
    position: relative;
}
.desc-main a img {
    position: absolute;
    width: 3rem;
    top: 1rem;
    right: 0.8rem;
    float: right;
}
a {
    -webkit-tap-highlight-color:transparent
}