.txt-right{
    text-align:right;
}
.demo-title{
    height:32px;
    font-size:32px; color:#92684F; text-align:center;
    margin:30px 0 44px 0;
    text-shadow:0 2px 4px rgba(41,48,58,0.3); 
}
#book {
    width: 420px;
    margin: 0 auto;
    position: relative;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}
.main {
    width: 420px;
    height: 560px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
}

/* = Book Font
-------------------------------------------------------------- */
.book-font{
    width:420px; height:560px;
    position:absolute; top:0; bottom:0;
    font-size:15px; text-align:center;
    text-shadow:0 2px 0 rgba(30,35,45,1);
    box-shadow:inset 3px 0 10px rgba(0,0,0,0.1); /* 给书本添加光照阴影 */
    z-index:10;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;

    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;

    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -ms-transition-duration:.5s;
    -o-transition-duration:.5s;
    transition-duration:.5s;

    -webkit-transform:translate3d(0,0,25px); /* 对应关系-1 */
    -moz-transform:translate3d(0,0,25px);
    -ms-transform:translate3d(0,0,25px);
    -o-transform:translate3d(0,0,25px);
    transform:translate3d(0,0,25px);
}
.book-cover{
    width:420px; height:560px;
    overflow:hidden;
    position:absolute; top:0; bottom:0;
    background: url(../img/main/book-cover.webp);
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;

    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}
.book-cover-back{
    width:420px; height:560px;
    position:absolute; top:0; bottom:0;
    background: url(../img/main/book-inside.webp);
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;

    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;

    -webkit-transform:rotate3d(0,1,0,-180deg);
    -moz-transform:rotate3d(0,1,0,-180deg);
    -ms-transform:rotate3d(0,1,0,-180deg);
    -o-transform:rotate3d(0,1,0,-180deg);
    transform:rotate3d(0,1,0,-180deg);
}
.title{
    margin:70px 0 25px 0;
    height:38px;
    font-size:38px;
}
.author{
    height:20px;
    font-size:20px;
}
.publisher{
    width:100%;
    position:absolute;
    bottom:22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
}
.golog-book{
    height: 57px;
}

/* = Book Page
-------------------------------------------------------------- */
.book-page{
    width:415px; height:550px;
    line-height:20px;
    position:absolute; top:5px;
    z-index:9;
    box-shadow:inset 3px 0 10px rgba(0,0,0,0.1);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;

    -webkit-transition-duration:.5s;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;

    -webkit-transform:translate3d(0,0,24px); /* 这里的Z坐标 一定要比封面页的低 否则旋转的时候 渲染时会导致层叠*/
    -moz-transform:translate3d(0,0,24px);
    -ms-transform:translate3d(0,0,24px);
    -o-transform:translate3d(0,0,24px);
    transform:translate3d(0,0,24px);
}
.page{
    height:500px;
    margin:30px 40px;
    overflow:hidden;
    cursor: pointer;
}
.book-page h3{
    font-size:14px;
    text-align:center;
    margin-bottom:14px;
    color: #424140 !important;
    text-align: center;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    font-family: 'GeistMono';
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 23.4px */
    -webkit-text-fill-color: #424140 !important;
}
.book-page p{
    font-size:13px;
    margin-bottom:14px;
    color: #424140;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    font-family: "Forma DJR Micro";
    font-style: normal;
    font-weight: 400;
    line-height: 170%; 
}
.page-number{
    width:100%;
    font-size:13px;
    text-align:center;
    position:absolute;
    bottom:10px;
    color: #424140;
    font-family: "Forma DJR Micro";
    font-size:13px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 22.1px */
    letter-spacing: 0.34px;
}
.redir-btn-book{
    padding: 15px 14px;
    border-radius: 2px;
    border: 1px solid rgba(66, 65, 64, 0.35);
    backdrop-filter: blur(12.5px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: transparent;
}
.redir-btn-book span{
    color: #424140;
    text-align: center;
    font-family: "Forma DJR Micro";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 115%; /* 18.4px */
    letter-spacing: 0.32px;
}
/* = Book Back
-------------------------------------------------------------- */
.book-back{
    width:420px;
    background: url(../img/main/book-cover.webp);
    background-size: cover;
    background-repeat: no-repeat;
    position:absolute; top:0; bottom:0;
    color:white;
    -webkit-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
    -moz-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
    -ms-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
    -o-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
    transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
    z-index:8;
}
.book-back .description{
    font-size:14px;
    line-height:20px;
    margin-top:50px;
    padding:10px 20px 10px 30px;
    background:rgba(255,255,255,0.1);
}
.book-back p{
    padding:5px 0;
}
.isbn{
    position:absolute;
    bottom:20px; left:30px;
}

/* = Book Bone
-------------------------------------------------------------- */
.book-bone{
    width:50px;
    background: linear-gradient(180deg, #272828 0%, #13161C 100%);
    box-shadow: 2px 24px 60px -20px rgba(0, 0, 0, 0.20), -8px 12px 40px 0px rgba(0, 0, 0, 0.25), 0px 86px 56px -32px rgba(0, 0, 0, 0.35);
    position:absolute;
    top:0; bottom:0; left:-25px;
    -webkit-transform:rotate3d(0,1,0,-90deg);
    -moz-transform:rotate3d(0,1,0,-90deg);
    -ms-transform:rotate3d(0,1,0,-90deg);
    -o-transform:rotate3d(0,1,0,-90deg);
    transform:rotate3d(0,1,0,-90deg);
}
.book-bone h2{
    width:530px;
    height:50px; line-height:50px; /* 对应关系-1 */
    font-size:14px; text-align:right;
    padding:0 15px;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;

    -webkit-transform:rotate(90deg) translateY(-50px); /* 对应关系-1 */
    -moz-transform:rotate(90deg) translateY(-50px);
    -ms-transform:rotate(90deg) translateY(-50px);
    -o-transform:rotate(90deg) translateY(-50px);
    transform:rotate(90deg) translateY(-50px);
}
.book-bone span{ font-size:14px; padding-right:20px;}

/* = Order
-------------------------------------------------------------- */
.book-cover:after,.book-back:after{ /*  */
    content:"";
    width:3px;
    position:absolute; top:0; left:10px; bottom:0;
    background:rgba(0,0,0,0.06);
    box-shadow:1px 0 3px rgba(255, 255, 255, 0.1);
}
.book-page,.book-top,.book-right,.book-bottom{
    background: linear-gradient(90deg, #C5C5C5 0%, #D7D7D7 3.58%, #EEEFEB 42.14%);
}
.book-right{
    width:50px; height:550px;
    position:absolute; top:5px; right:-20px;
    box-shadow:0 1px 0 #EEEFE9,0 -1px 0 #EEEFE9;
    -webkit-transform:rotate3d(0,1,0,90deg);
    -moz-transform:rotate3d(0,1,0,90deg);
    -ms-transform:rotate3d(0,1,0,90deg);
    -o-transform:rotate3d(0,1,0,90deg);
    transform:rotate3d(0,1,0,90deg);
}
.book-top{
    width:415px; height:50px;
    position:absolute; top:-20px; left:0;
    -webkit-transform:rotate3d(1,0,0,90deg);
    -moz-transform:rotate3d(1,0,0,90deg);
    -ms-transform:rotate3d(1,0,0,90deg);
    -o-transform:rotate3d(1,0,0,90deg);
    transform:rotate3d(1,0,0,90deg);
}
.book-bottom{
    width:415px; height:50px;
    position:absolute; bottom:-20px; left:0;
    -webkit-transform:rotate3d(1,0,0,-90deg) translate3d(0,0,0);
    -moz-rotate3d(1,0,0,-90deg) translate3d(0,0,0);
    -ms-rotate3d(1,0,0,-90deg) translate3d(0,0,0);
    -o-rotate3d(1,0,0,-90deg) translate3d(0,0,0);
    rotate3d(1,0,0,-90deg) translate3d(0,0,0);
}
.book-right,.book-top,.book-bottom{
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}

/* = Flip
-------------------------------------------------------------- */
/* Cover */
.view-cover:hover .main{
    -webkit-transform:rotate3d(0,1,0,-40deg);
    -moz-transform:rotate3d(0,1,0,-40deg);
    -ms-transform:rotate3d(0,1,0,-40deg);
    -o-transform:rotate3d(0,1,0,-40deg);
    transform:rotate3d(0,1,0,-40deg);
}
/* Cover Back */
.view-back .main{
    -webkit-transform:rotate3d(0,1,0,180deg);
    -moz-transform:rotate3d(0,1,0,180deg);
    -ms-transform:rotate3d(0,1,0,180deg);
    -o-transform:rotate3d(0,1,0,180deg);
    transform:rotate3d(0,1,0,180deg);
}
.view-back:hover .main{
    -webkit-transform:rotate3d(0,1,0,140deg);
    -moz-transform:rotate3d(0,1,0,140deg);
    -ms-transform:rotate3d(0,1,0,140deg);
    -o-transform:rotate3d(0,1,0,140deg);
    transform:rotate3d(0,1,0,140deg);
}
/* Open */
.open-book{
    -webkit-transform:translate3d(50%,0,0);
    -moz-transform:translate3d(50%,0,0);
    -ms-transform:translate3d(50%,0,0);
    -o-transform:translate3d(50%,0,0);
    transform:translate3d(50%,0,0);
}
.open-book  .book-font{
    -webkit-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
    -moz-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
    -ms-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
    -o-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
    transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
}
.open-book:hover .main{
    -webkit-transform:rotate3d(1,1,0,15deg);
    -moz-transform:rotate3d(1,1,0,15deg);
    -ms-transform:rotate3d(1,1,0,15deg);
    -o-transform:rotate3d(1,1,0,15deg);
    transform:rotate3d(1,1,0,15deg);
}
/* View Right */
.view-rotate .main{
    -webkit-transition-duration:5s;
    -moz-transition-duration:5s;
    -ms-transition-duration:5s;
    -o-transition-duration:5s;
    transition-duration:5s;

    -webkit-transform:rotate3d(0,1,0,360deg);
    -moz-transform:rotate3d(0,1,0,360deg);
    -ms-transform:rotate3d(0,1,0,360deg);
    -o-transform:rotate3d(0,1,0,360deg);
    transform:rotate3d(0,1,0,360deg);
}
.view-rotate:hover .main{
    -webkit-transition-duration:8s;
    -moz-transition-duration:8s;
    -ms-transition-duration:8s;
    -o-transition-duration:8s;
    transition-duration:8s;

    -webkit-transform:rotate3d(0,1,0,-360deg);
    -moz-transform:rotate3d(0,1,0,-360deg);
    -ms-transform:rotate3d(0,1,0,-360deg);
    -o-transform:rotate3d(0,1,0,-360deg);
    transform:rotate3d(0,1,0,-360deg);
}

/* = Opt
-------------------------------------------------------------- */
#opt{
    width:150px;
    line-height:30px;
    text-align:center;
    padding:10px 10px 5px 10px;
    background:rgba(255,255,255,0.4);
    position:fixed; top:10%; right:6%;
    z-index:100px;
}
#opt:after{
    content:"";
    width:105%; height:104%;
    position:absolute; top:-4%; left:-5%;
    border:4px solid rgba(255,255,255,0.3);
    z-index:-1;
}
#opt dt{
    margin-bottom:5px;
    border-bottom:1px solid rgba(0,0,0,0.1);
}
#opt dd{
    color:#999;
    cursor:pointer;
    background:rgba(170,170,170,0.1);
    margin-bottom:5px;
}
#opt dd:hover{
    color:rgba(255,255,255,0.8);
    box-shadow:inset 2px 0 0 rgba(85,85,85,0.2);
    background:rgba(85,85,85,0.4);
}
#opt .cur{
    color:black;
    box-shadow:inset 2px 0 0 rgba(85,85,85,0.2);
    background:rgba(85,85,85,0.2);
}
.abs-img-book{
    position: absolute;
    top: 32px;
    left: 50px;
}
.ttu{
    text-shadow: 0px 9.494px 28.483px rgba(0, 0, 0, 0.16);
    font-size: 76px;
    font-style: normal;
    font-weight: 700;
    line-height: 82%; /* 62.32px */
    text-transform: uppercase;
    margin-top: 90px;
    margin-left: 50px;
    font-family: 'GeistMono';
    text-align: left;
}
@media (max-width:1200px){
    .main{
        width: 300px;
        height: 450px;
    }
    .book-font{
        width: 300px;
        height: 450px;
    }
    .book-cover{
        width: 300px;
        height: 450px;
    }
    .book-cover-back{
        width: 300px;
        height: 450px;
    }
    .book-page{
        width: 300px;
        height: 440px;
    }.book-page p:last-child{
        display: none;
    }
    .book-back{
        width: 300px;
        height: 450px;
    }
    .book-top{
        width: 300px;
    }
    .book-right{
        height: 440px;
    }
    .book-bottom{
        width: 300px;
    }
    .page{
        height: 450px;
    }
    .book-bone h2{
        width: max-content;
    }
    #book{

    }
}
@media (max-width:700px){
    .main{
        width: 190px;
        height: 290px;
    }
    .book-font{
        width: 190px;
        height: 290px;
    }
    .book-cover{
        width: 190px;
        height: 290px;
    }
    .book-cover-back{
        width: 190px;
        height: 290px;
    }
    .book-page{
        width: 190px;
        height: 280px;
    }.book-page p:last-child{
        display: none;
    }
    .book-back{
        width: 190px;
        height: 290px;
    }
    .book-top{
        width: 190px;
    }
    .book-right{
        height: 280px;
    }
    .book-bottom{
        width: 190px;
    }
    .page{
        height: 290px;
    }
    .book-bone h2{
        width: max-content;
    }
    .page{
        margin: 10px 15px;
    }
    .ttu{
        font-size: 24px;
        margin-left: 20px;
    }
    .copy-book{
        width: 50px;
    }
    .golog-book{
        height: 30px;
    }
    .publisher{
        padding: 0px 20px;
    }
    .abs-img-book{
        left: 20px;
    }
    .book-page p{
        font-size: 10px;
    }
    #book{
        width: 100%;
        max-width: 150px;
    }
}