.book_box{
    position: absolute;
    /* display: flex;
    align-items: center;
    justify-content: space-around; */
    width: 90%;
    padding-bottom: 0%;
    left: 5%;
    height: auto;
    top: 25%;
    z-index: 70;
    background-color: rgba(0, 0, 255, 0);
}



/*書本*/
.book_up {
    width: 20%;
    height: auto;
    padding-bottom: 10%;
    /* left: 7.2%; */

    background-color: rgba(184, 32, 32, 0);
    /*顏色標記*/
    
}
/*書本*/
.book_up1 {
    /* left: 34.4%; */
    background-color: rgba(255, 255, 255, 0);
    /*顏色標記*/
    animation: fadeInUp 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 0.5s;
}

/*書本2*/
.book_up2 {
    /* left: 34.4%; */
    background-color: rgba(255, 255, 255, 0);
    /*顏色標記*/
    animation: fadeInUp 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 1s;
}

/*書本3*/
.book_up3 {
    /* left: 61.6%; */
    background-color: rgba(231, 231, 231, 0);
    /*顏色標記*/
    animation: fadeInUp 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 1.5s;
}
/*書本4*/
.book_up4 {
    /* left: 88.8%; */
    background-color: rgba(231, 231, 231, 0);
    /*顏色標記*/
    animation: fadeInUp 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 2s;
}
/*書本5*/
.book_up5 {
    background-color: rgba(231, 231, 231, 0);
    /*顏色標記*/
    animation: fadeInUp 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation-delay: 2.5s;
}



.book{
    width: 80%;
    height: auto;
    margin-top: 10%;
    /* padding-bottom: 24%; */
    /* top: 5%; */
    cursor: pointer;
    transform: translateY(0);
    transition: 0.5s;
    z-index: 70; 
    background-color: rgba(226, 43, 128, 0);
    /* margin-left: 5%; */
}

.book_tag{
    width: 25%;
    height: auto;
    margin-right: 5%;
    top: 0%;
    cursor: pointer;
    transform: translateY(0);
    transition: 0.5s;
    z-index: 70;    
    background-color: rgba(137, 43, 226, 0);
}
.book_tag img{
    width: 100%;
}





/* 讓 a 標籤撐開實際高度作為 hover 感應區 */
.book_mm a {
    display: block;
    width: 100%;
    padding-bottom: 135%; /* 根據封面圖片比例給予高度 */
}

.book_mm:hover {
    transform: translateY(-15%);
    transition: 0.5s;
}




.book_mm .cover {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 0%;
    top: 0%;
    left: 0%;
    z-index: 3;

    transform-origin: left;
    transform: perspective(1000px) rotateY(0deg);
    transition: all 600ms linear;
}

.book_mm.active .cover {
    transform: perspective(1000px) rotateY(-105deg);
}



.book_mm .inside {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 0%;
    top: 0%;
    left: 0%;
    z-index: 2;

    background-color: rgba(250, 235, 215, 0);
}

@media (max-width:991.98px){
    .book_box{
        left: -8%;
        top: 23%;
        flex-wrap: nowrap;
    }
    .book_up{
        width: 26%;
    }
}

@media (max-width:768px){
    .book_box{
        width: 106%;
        left: -2%;
        top: 25%;
        padding-bottom: 0%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .book_up{
        width: 30%;
        padding-bottom: 32%;
        margin-left: 1%;
        margin-right: 1%;
    }
}

@media (max-width:575.98px){
    .book_up{
        width: 31%;
    }
}