html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.bigBoxContent {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.topBox {
    background-image: url('../image/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    /* height:800px; */
    flex: 7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerBox {
    width: 100%;
    min-height: 185px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    position: relative;
}

.centerBox {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;


}

.tipsBox1,
.tipsBox2 {
    margin: 0 30px;
    position: relative;
    width: 100px;
    /* width:400px; */
    height: 350px;
    border-radius: 6px;
    opacity: 0.5;
    background: rgb(248, 98, 107);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    font-size: 25px;
    color: #fff;
    transition: all ease 0.5s;
    position: relative;
    left: 0;
}

.tipsBox2:hover,
.tipsBox1:hover {
    margin: 0 30px;
    width: 400px;
    position: relative;
    left: 0;
    box-sizing: border-box;
    height: 350px;
    border-radius: 6px;
    opacity: 1;
    background: rgb(248, 98, 107);
    display: flex;
    justify-content: center;
    font-size: 25px;
    color: #fff;
}
.rules{
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin-bottom:10px;
    color:#fff;
}

.centerInfo {
    position: relative;
    display: none;
    width: 0%;
    overflow: hidden;
    height: 90%;
    color: #3a2e2e;
    font-size: 12px;
    color: #fff;
    font-size: 12px;
    transition: all ease 1s;
}
.centerText{
    transition:all 0.2s;
}


.tipsBox2:hover .centerText,
.tipsBox1:hover .centerText {
    display: none;

}

.tipsBox1:hover .centerInfo,.tipsBox2:hover .centerInfo {
    display: block;
    width:80%;
}

.footerBoxText,
.footerInfoTwo,
.footerInfoOne {
    color: rgb(102, 102, 102);
    font-size: 12px;
    /* width: 33%; */
    margin: 0 20px;
    height: 100%;
    padding-top: 10px;
    margin-top: -10px;
    display: flex;
    justify-content: center;

}
.erweima{
    color: rgb(102, 102, 102);
    font-size: 12px;
    margin-top:2px;
}

.footerBoxText {
    display: flex;
    align-items: end;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.fontBoxOne,
.fontBoxTwo,
.fontBoxThree {
    width: 320px;
    text-align: justify;
}