@font-face {
    font-family: "PangMengZhengDao";
    src: url("../fonts/PangMenZhengDaoCuShuTi-2.ttf");
}
@font-face {
    font-family: "fangzheng";
    src: url("../fonts/fangzheng.TTF");
}
body{
    font-family: "fangzheng";
    font-size: 0.32rem;
    background: url(../img/90a7c0a9d48ed50eafca55e96cc416c.jpg) no-repeat;
    background-size: 100% 100%;
    user-select: none;
    height: 100vh;
    width: 100vw;
    color: #333;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    position: relative;
}
.top{
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: space-around;
    font-size: 0.4rem;
    align-items: center;
}
.icon-haipai{
    width: 1.2rem;
    height: 1rem;
    margin-left: -0.1rem;
}
.icon-hudong{
    width: 0.6rem;
    height: 0.6rem;
    margin-bottom: -0.1rem;
    margin-right: -0.1rem;
}
.top>div{
    display: flex;
    align-items: center;
}
.top a{
    text-decoration: none;
    color: #333;
}
.banner{
    margin: 0 auto;
    width: 6.8rem;
    height: 11.5rem;
    border-radius: 0.2rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    overflow: hidden;
}
.banner-content{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    transition: all 0.3s ease;
}
.banner-item{
    width: 6.8rem;
    height: 11.5rem;
    background: url(../img/2ffc656a1f9393f478e50ab7dcd6e33.jpg) no-repeat;
    background-size: 100% 100%;
    flex-shrink: 0;
}
#banner-index{
    text-align: center;
    font-size: 0.24rem;
    margin-top: 0.2rem;
}
.item-box{
    width: 85%;
    height: 100%;
    margin: 0 auto;
    background: url(../img/3d3b01a8cc64da7411f38c4857deb2d.png) no-repeat;
    background-size: 98% 96%;
    padding: 0.1rem 0.36rem;
    background-position: center center;
    box-sizing: border-box;
    font-size: 0.36rem;
}
.item-title{
    text-align: center;
    font-family: 'PangMengZhengDao';
    font-size: 0.5rem;
    margin: 0.1rem;
    font-weight: normal;
}
.item-content{
    overflow-y: auto;
    height: 85%;
}
.item-content p{
    text-indent: 2em;
    margin: 0;
}
.btn-back{
    width: 0.8rem;
    height: 0.8rem;
    background: url(../img/cabb6b0d123734d8ee01b2edba4c6bb.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0.3rem;
    right: 0.3rem;
}
.layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reminder{
    width: 4rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/62f31e38c783f0da4dc39ec352a1281.png) no-repeat;
    background-size: contain;
}
.hand{
    margin-top: 0.3rem;
    width: 0.5rem;
    height: 1rem;
    background: url(../img/e5d7c255791745e1d1a24184ab189c8.png) no-repeat;
    background-size: 100% 100%;
    animation: handAnimate 5s linear;
}
@keyframes handAnimate{
    0%{
        transform: translateX(0);
    }
    7%{
        transform: translateX(1.5rem);
    }
    16%{
        transform: translateX(0);
    }
    20%{
        transform: translateX(0);
    }
    27%{
        transform: translateX(1.5rem);
    }
    40%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(0);
    }
    57%{
        transform: translateX(-1.5rem);
    }
    66%{
        transform: translateX(0);
    }
    70%{
        transform: translateX(0);
    }
    77%{
        transform: translateX(-1.5rem);
    }
    90%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
}