* {
	margin: 0;
}

html {
	font-size: 62.5%;
}


.bg{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index:-200;
}
.table{
    position: fixed;
    left:50%;
    top:46%;
    width: 60%;
    transform: translateX(-50%);
    z-index:-88;
    animation: table 1s linear 0s 1;
}
.adBox{
    height: 12%;
    width: 5%;
    position: absolute;
    top:13%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: transparent;
}
.all{
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    z-index:0;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: start;
    align-content: center;
    align-items: center;
    text-align: center;
}
.beforeH{
    height: 5%;
}
.header{
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;

}
.header>img{
    animation: down 1.0s linear 0s 1;
    position: relative;
}
.header-title{
    height: 6%;
    width: 100%;
    display: flex;
    justify-content: center;
    animation: appear 1.5s ease-in-out 0s  1;
}
.beforeC-split{
    height: 3%;
    width: 100%;
}
.afterHT{
    height: 8%;
    width: 100%;
}

.beforeC{
    height: 3%;
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    animation: appear 1.5s linear 0s  1;
}
.beforeC>img:nth-child(1){
    position: relative;
    left:2%;
}
.beforeC>img:nth-child(2){
    position: relative;
    left:-1%;
}
.beforeC>img:nth-child(3){
    position: relative;
    left:-2%;
}
.beforeC>img:nth-child(4){
    position: relative;
    left:-2%;
}
.content{
    height: 15%;
    width: 45%;
    display: flex;
    justify-content: space-evenly;
    animation: appear 1.5s linear 0s  1;

}
.content{
    animation: startImg 1.2s linear 0s  1;
}
.content>img{
    cursor: pointer;

}
.content>img:hover{
    animation: pulse .5s linear 0s 1;
}

.afterC{
    height: 7%;
    width: 45%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    animation: appear 1.5s ease-in-out 0s  1;
}
.afterC>div{
    height: 20%;
    width: 15%;
    border-radius: 55%;
    opacity: 0.1;
}
.afterC>div:nth-child(1){
    background-color: #1C62E6;
    box-shadow: 0 0 5px 5px #1C62E6;
}
.afterC>div:nth-child(2){
    background-color: #CC5F00;
    box-shadow: 0 0 5px 5px #CC5F00;
}
.afterC>div:nth-child(3){
    background-color: #9545E6;
    box-shadow: 0 0 5px 5px #9545E6;
}
.afterC>div:nth-child(4){
    background-color: #1BA832;
    box-shadow: 0 0 5px 5px #1BA832;
}
.beforeT{
    height: 3%;
    width: 100%;
}
.tips{
    height: 19%;
    width: 28%;
    display: flex;
    justify-content: space-evenly;
}
.tips>img{
    animation: appear 1.5s ease-in-out 0s  1;
}

.footer{
    height: 14%;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: end;
    align-items: end;
    color: #fff;
    font-size:12px;

}
a {
    text-decoration: none;
    color: #ccc;
}
@keyframes table {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    40%{
        opacity: 0.1%;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    30%{
        transform: scale(1.15);
    }
    60%{
        transform: scale(1.2);
    }
    80%{
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes startImg {
    0% {
        transform: scale(0);
    }
    35%{
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes down {
    0% {
        top:-1200%;
        opacity: 0;
    }
    30%{
        top:-130%;
        opacity: 0.5;
    }
    30%{
        top:-110%;
        opacity: 1;
    }
    40%{
        top:-95%;
        opacity: 1;
    }
    50%{
        top:-65%;
        opacity: 1;
    }
    60%{
        top:-40%;
    }
    70%{
        top:25%;
    }
    80%{
        top:3%;
    }
    90%{
        top:11%;
    }
    100% {
        top:0;
    }
}