@font-face {
	font-family: "yf";
	src: url("../font/yf.ttf");
}
body{
    background-image: url(../img/background.jpg);
    background-repeat: no-repeat;
    background-size: auto 110vh;
    background-attachment: fixed;
}
.qrcode{
    position: fixed;
    z-index: 20;
    width: 170px;
    height: 170px;
    margin: auto;
    opacity: 1;
    display: block;
    transition: all 0.5s ease-in-out;
}
.nav{
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.80);
    float: left;
    position: fixed;
    height: 50px;
    width: 100vw;
    color: white;
    list-style: none;
    transform: translate(-8px, -10px);
    user-select:none;
    overflow:hidden;
}
.nav input{
    position: fixed;
    z-index: 20;
    font-size: 35px;
    margin: auto;
    margin-top: 0;
    margin-left: 0;
    transform: translate(20px,2px);
    font-family: "yf";
    color: #eeeeee;
    outline:none;
    border:0px;
    opacity: 0;
    text-align: center;
    border-radius: 20px;
    background-color: rgba(75, 83, 82, 0.882);
    transition: all 0.5s ease-in-out;
}
.nav input:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    box-shadow: 0 0 10px 0;
}
.setgetnum{
    position: fixed;
    z-index: 20;
    font-size: 35px;
    margin: auto;
    margin-top: 0;
    margin-left: 0;
    width: 138px;
    transform: translate(calc(100vw - 249px),100vh);
    font-family: "yf";
    color: #eeeeee;
    background-color: rgba(0, 0, 0, 0.80);
    transition: all 0.5s ease-in-out;
}
.setgetnum p{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setgetnum p:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.showsetgetnum{
    transform: translate(calc(100vw - 249px),calc(100vh - 270px));
}
.setsort{
    position: fixed;
    z-index: 20;
    font-size: 35px;
    margin: auto;
    margin-top: 0;
    margin-left: 0;
    transform: translate(calc(100vw - 109px),100vh);
    font-family: "yf";
    color: #eeeeee;
    background-color: rgba(0, 0, 0, 0.80);
    transition: all 0.5s ease-in-out;
}
.showsetsort{
    transform: translate(calc(100vw - 109px),calc(100vh - 270px));
}
.setsort .setsortname{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setsort .setsortname:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.setsort .setsortauthor{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setsort .setsortauthor:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.setsort .setsortpublisher{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setsort .setsortpublisher:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.setsort .setsorttype{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setsort .setsorttype:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.setsort .setsortcount{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setsort .setsortcount:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.title{
    font-size: 35px;
    font-family: "yf";
    z-index: 1;
    margin-left: 20px;
    margin-top: 5px;
    float: left;
}
.down{
    z-index: 30;
    background-color: rgba(0, 0, 0, 0.80);
    float: right;
    position: static;
    height: 50px;
    width: 100vw;
    color: white;
    list-style: none;
    transform: translate(10px, 50px);
    user-select:none;
    overflow:hidden;
}
.down .sort{
    font-size: 35px;
    font-family: "yf";
    z-index: 1;
    margin-left: 20px;
    opacity: 0;
    margin-top: 5px;
    float: right;
    transition: all 0.5s ease-in-out;
}
.down .sort:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.down .getnum{
    font-size: 35px;
    font-family: "yf";
    z-index: 1;
    margin-left: 20px;
    margin-top: 5px;
    float: right;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.down .getnum:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.down .pagenum{
    font-size: 35px;
    font-family: "yf";
    z-index: 1;
    margin-left: 20px;
    margin-top: 5px;
    float: right;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}
.down .pagenum:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.down .links{
    position: static;
    color: azure;
    font-size: 30px;
    font-family: "yf";
    text-decoration: none;
}
.setpagenum{
    position: fixed;
    z-index: 20;
    font-size: 35px;
    margin: auto;
    margin-top: 0;
    margin-left: 0;
    transform: translate(calc(100vw - 349px),100vh);
    font-family: "yf";
    color: #eeeeee;
    background-color: rgba(0, 0, 0, 0.80);
    transition: all 0.5s ease-in-out;
}
.showsetpagenum{
    transform: translate(calc(100vw - 355px),calc(100vh - 120px));
}
.setpagenum a{
    font-size: 30px;
    font-family: "yf";
    color: #eeeeee;
    margin: 0em 0em 0em 0em;
    transition: all 0.5s ease-in-out;
}
.setpagenum a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.signup{
    z-index: 2;
    font-size: 35px;
    margin-top: 5px;
    font-family: "yf";
    float: right;
    text-align: left;
    transform: translateX(-17px);
    transition: all 0.5s ease-in-out;
}
.signin{
    z-index: 2;
    font-size: 35px;
    font-family: "yf";
    float: right;
    margin: auto;
    margin-top: 5px;
    transform: translate(-17px,0px);
    transition: all 0.5s ease-in-out;
    /* width: 120px; */
}
.signup:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.signin:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.username{
    z-index: 2;
    font-size: 35px;
    font-family: "yf";
    opacity: 0;
    float: right;
    transform: translate(-20px,5px);
    transition: all 0.5s ease-in-out;
    /* width: 120px; */
}
.username:hover{
    background-color: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0);
}
.img{
    margin: auto;
    margin-top: 50px;

}
.userset{
    user-select:none;
    opacity: 0; 
    z-index: 2;
    width: 170px;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.80);
    position: fixed;
    right: 0px;
    top: 48px;
    color: white;
    font-family: 'yf';
    font-size: 26px;
    transform: translate3d(120px,0px,0px);
    transition: all 0.5s ease-in-out;
}
.userset .in{
    margin: auto;
    width: 200px;
    height: 30px;
    transition: all 0.5s ease-in-out;
    /* background-color: rgba(0, 0, 0, 0.80); */
}
.userset .in:hover{
    background-color: rgb(216, 216, 216);
    color: rgb(0, 0, 0);
}
.books{
    display: flex;
    width: 100vw;
    flex-wrap: wrap;/*重要*/    /*--让弹性盒元素在必要的时候拆行：*/
	align-content: space-between;/*重要*/
    
}
.books:last-child {
    margin-right: auto;
    justify-content: flex-start;
  }
.books .book{
    width: 250px;
    height: 350px;
    transform: translateY(50px);
    margin: auto;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 20px;
    box-shadow: 0 0 8px 0;
    user-select:none;
    overflow:hidden;
    background-color: #eeeeee;
}.books .bookept{
    width: 250px;
    transform: translateY(50px);
    margin: auto;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 20px;
    box-shadow: 0 0 8px 0;
    /* display: none; */
    opacity: 0;
    user-select:none;
    overflow:hidden;
    background-color: #eeeeee;
}
.books .book .img{
    position:static;
    width: 150px;
    height: 219px;
    transform: translate(0px,-51px);
}
.books .book .title{
    position:absolute;
    font-family: "yf";
    font-size: 35px;
    transform: translate(-20px,-60px);
    width: 250px;
    background-color: #eeeeee;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}
.books .book .title:hover{
    background-color: rgb(255, 201, 171);
    color: rgb(0, 0, 0);
    z-index: 20;
}
.books .book .author{
    position:absolute;
    font-family: "yf";
    z-index: 5;
    transform: translate(0px,-38px);
    font-size: 25px;
    width: 250px;
    background-color: #eeeeee;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}
.books .book .author:hover{
    background-color: rgb(255, 183, 183);
    color: rgb(0, 0, 0);
    z-index: 20;
}
.books .book .publisher{
    font-family: "yf";
    position:absolute;
    z-index: 6;
    transform: translate(0px,27px);
    font-size: 25px;
    width: 250px;
    background-color: #eeeeee;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}
.books .book .publisher:hover{
    background-color: rgb(221, 255, 210);
    color: rgb(0, 0, 0);
    z-index: 20;
}
.books .book .info{
    font-family: "yf";
    opacity: 0;
}
.books .book .count{
    font-family: "yf";
    opacity: 0;
}
.books .book .link{
    font-family: "yf";
    opacity: 0;
}
.books .book .type{
    font-family: "yf";
    position:absolute;
    z-index: 7;
    transform: translate(0px,10px);
    background-color: #eeeeee;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}
.books .book .type:hover{
    background-color: rgb(210, 247, 255);
    color: rgb(0, 0, 0);
    z-index: 20;
}
.books .book .more{
    font-family: "yf";
    position:absolute;
    z-index: 8;
    transform: translate(160px,-110px);
    font-size: 40px;
    background:linear-gradient(-200deg,#ffc4ef,#9ec0ff);
    border-radius: 20px;
    box-shadow: 0 0 3px 0;
    transition: all 0.5s ease-in-out;
}
.books .book .more:hover{
    background:linear-gradient(100deg,#ffc4ef,#9ec0ff);
    box-shadow: 0 0 10px 0;
}
.books .book .borrow{
    font-family: "yf";
    position:absolute;
    z-index: 8;
    transform: translate(160px,-200px);
    font-size: 40px;
    background:linear-gradient(-200deg,#ffc4ef,#9ec0ff);
    border-radius: 20px;
    box-shadow: 0 0 3px 0;
    transition: all 0.5s ease-in-out;
}
.books .book .borrow:hover{
    background:linear-gradient(100deg,#ffc4ef,#9ec0ff);
    box-shadow: 0 0 10px 0;
}
.infos{
    position: absolute;
    width: 290px;
    font-family: 'yf';
    background-color: #eeeeee;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s ease-in-out;
    border-radius: 15px;
}
.infos .infoin{
    font-size: 25px;
}
.gray{
    background-color: black;
    box-shadow: 0 0 3px 0;
}
.show1{
    opacity: 1;
    z-index: 20;
    transform: translate3d(0,0,0);
}
.show2{
    opacity: 1;
    z-index: 20;
}
.showop{
    opacity: 1;
}
.show{
    opacity: 1;
}