/* 字型 */
@font-face {
    font-family: 'Jinxiang';
    src: url('/fonts/Jinxiang.ttf') format('truetype');
}

@font-face {
    font-family: 'Huninn';
    src: url('/fonts/jf-openhuninn-2.0.ttf') format('truetype');
}

/* 字體大小 */
}


h1, .h1 {
    font-size: 2rem;
    margin: 9px;
    font-weight: 600;
}

.highlight-text-smaller {
    font-size: 1.5rem; /* 2rem 的 1.5 倍 */
}

.highlight-text {
    font-size: 2.5rem; /* 2rem 的 1.5 倍 */
}

.highlight-text-bigger {
    font-size: 3rem; /* 2rem 的 1.5 倍 */
}


@media (min-width: 1024px) and (max-width: 1589px) {
    h1, .h1 {
        font-size: calc(1rem + 1vw);
        margin: 7px;
        font-weight: 600;
    }

    .highlight-text-smaller {
        font-size: calc(1rem + 1vw); /* 2rem 的 1.5 倍 */
    }

    .highlight-text {
        font-size: calc(1.25rem + 1.25vw); /* 放大 1.5 倍 */
    }

    .highlight-text-bigger {
        font-size: calc(1.5rem + 1.5vw); /* 放大 1.5 倍 */
    }
}

@media (max-width: 1023px) {
    h1, .h1 {
        font-size: calc(0.75rem + 0.75vw);
        margin: 5px;
        font-weight: 600;
    }

    .highlight-text-smaller {
        font-size: calc(0.75rem + 0.75vw); /* 放大 1.5 倍 */
    }

    .highlight-text {
        font-size: calc(1rem + 1vw); /* 放大 1.5 倍 */
    }

    .highlight-text-bigger {
        font-size: calc(1.125rem + 1.125vw); /* 放大 1.5 倍 */
    }
}


.bb-item .card3 .title .boom {
    height: 4rem;
    width: 4rem;
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .bb-item .card3 .title .boom {
        height: 3rem;
        width: 3rem;
    }
}

@media (max-width: 1023px) {
    .bb-item .card3 .title .boom {
        height: 2rem;
        width: 2rem;
    }
}



h2, .h2 {
    font-size: 1.5rem;
    margin: 9px;
    font-weight: 600;
}


@media (min-width: 1024px) and (max-width: 1589px) {
    h2, .h2 {
        font-size: calc(0.8rem + 0.8vw);
        margin: 7px;
        font-weight: 600;
    }
}

@media (max-width: 1023px) {
    h2, .h2 {
        font-size: calc(0.6rem + 0.6vw);
        margin: 5px;
        font-weight: 600;
    }
}

/* 首頁標題 */
.card {
    position: absolute;
    top: 79%;
    left: 50%;
    margin: 5px;
    padding: 5px;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    background-color: #E2CDB0;
    text-align: center;
    color: #434343;
    width: 100%;
}


.cardo {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.cardindex {
    position: absolute;
    margin: 5px;
    padding: 5px;
    color: #434343;
    width: 100%;
}

.cardbasic {
    padding: 9px;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    background-color: white;
    border-radius: 10px;
    color: #434343;
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .cardbasic {
        padding: 7px;
    }
}

@media (max-width: 1023px) {
    .cardbasic {
        padding: 5px;
    }
}


/* 第一頁 */
.card0 {
    left: 30%;
    top: 15%;
    width: calc(21rem + 30vw);
    height: calc(3rem + 3vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card0 {
        left: 45%;
        top: 20%;
        width: calc(31rem + 30vw);
        height: calc(3rem + 3vw);
    }
}
@media (max-width: 1023px) {
    .card0 {
        left: 50%;
        top: 10%;
        width: calc(25rem + 20vw);
        height: calc(2rem + 2vw);
    }
}

.card1 {
    left: 30%;
    top: 50%;
    width: calc(21rem + 30vw);
    height: calc(10rem + 7vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card1 {
        left: 45%;
        top: 60%;
        width: calc(31rem + 30vw);
        height: calc(10rem + 8vw);
    }
}
@media (max-width: 1023px) {
    .card1 {
        left: 50%;
        top: 50%;
        width: calc(25rem + 20vw);
        height: calc(9rem + 4vw);
    }
}

/* 第二頁 */
.card2 {
    left: 25%;
    top: 30%;
    width: calc(17rem + 26vw);
    height: calc(6rem + 6vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card2 {
        left: 33%;
        top: 35%;
        width: calc(19rem + 25vw);
        height: calc(5rem + 10vw);
    }
}
@media (max-width: 1023px) {
    .card2 {
        left: 50%;
        top: 50%;
        width: calc(18rem + 15vw);
        height: calc(6rem + 5vw);
    }
}

/* 第三頁 */
.card3 {
    left: 27%;
    top: 45%;
    width: calc(13rem + 30vw);
    height: calc(14rem + 10vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card3 {
        left: 40%;
        top: 47%;
        width: calc(25rem + 30vw);
        height: calc(13rem + 10vw);
    }
}
@media (max-width: 1023px) {
    .card3 {
        left: 50%;
        top: 50%;
        width: calc(20rem + 20vw);
        height: calc(11rem + 5vw);
    }
}

/* 第四頁 */
.card4 {
    left: 35%;
    top: 25%;
    width: calc(33rem + 30vw);
    height: calc(6rem + 6vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card4 {
        left: 50%;
        top: 20%;
        width: calc(42rem + 25vw);
        height: calc(5rem + 10vw);
    }
}
@media (max-width: 1023px) {
    .card4 {
        left: 50%;
        top: 50%;
        width: calc(32rem + 15vw);
        height: calc(6rem + 5vw);
    }
}


/* 第五頁 */
.card5 {
    left: 35%;
    top: 27%;
    width: calc(33rem + 28vw);
    height: calc(10rem + 8vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card5 {
        left: 50%;
        top: 25%;
        width: calc(42rem + 25vw);
        height: calc(10rem + 11vw);
    }
}
@media (max-width: 1023px) {
    .card5 {
        left: 50%;
        top: 50%;
        width: calc(32rem + 15vw);
        height: calc(10rem + 5vw);
    }
}

/* 第六頁 */
.card6 {
    left: 35%;
    top: 25%;
    width: calc(33rem + 25vw);
    height: calc(10rem + 8vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card6 {
        left: 50%;
        top: 25%;
        width: calc(42rem + 25vw);
        height: calc(11rem + 11vw);
    }
}
@media (max-width: 1023px) {
    .card6 {
        left: 50%;
        top: 50%;
        width: calc(32rem + 15vw);
        height: calc(10rem + 5vw);
    }
}


/* 第二章，第一頁 */
.card20 {
    left: 30%;
    top: 30%;
    width: calc(21rem + 30vw);
    height: calc(3rem + 4vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card20 {
        left: 45%;
        top: 20%;
        width: calc(31rem + 30vw);
        height: calc(3rem + 3vw);
    }
}
@media (max-width: 1023px) {
    .card20 {
        left: 50%;
        top: 10%;
        width: calc(25rem + 20vw);
        height: calc(2rem + 2vw);
    }
}

.card21 {
    left: 60%;
    top: 83%;
    width: calc(21rem + 30vw);
    height: calc(7rem + 6vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card21 {
        left: 60%;
        top: 75%;
        width: calc(28rem + 28vw);
        height: calc(7rem + 5vw);
    }
}
@media (max-width: 1023px) {
    .card21 {
        left: 50%;
        top: 75%;
        width: calc(25rem + 20vw);
        height: calc(6rem + 4vw);
    }
}

/* 第二章，第二頁 */
.card22 {
    left: 35%;
    top: 75%;
    width: calc(38rem + 25vw);
    height: calc(12rem + 11vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card22 {
        left: 45%;
        top: 75%;
        width: calc(40rem + 28vw);
        height: calc(10rem + 10vw);
        
    }
}
@media (max-width: 1023px) {
    .card22 {
        left: 50%;
        top: 70%;
        width: calc(27rem + 24vw);
        height: calc(8rem + 8vw);
    }
}

/* 第二章，第三頁 */
.card23 {
    left: 38%;
    top: 23%;
    width: calc(35rem + 36vw);
    height: calc(10rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card23 {
        left: 40%;
        top: 24%;
        width: calc(28rem + 32vw);
        height: calc(13rem + 10vw);
    }
}
@media (max-width: 1023px) {
    .card23 {
        left: 50%;
        top: 50%;
        width: calc(28rem + 28vw);
        height: calc(8rem + 5vw);
    }
}

/* 第二章，第四頁 */
.card24 {
    left: 60%;
    top: 78%;
    width: calc(44rem + 32vw);
    height: calc(9rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card24 {
        left: 50%;
        top: 80%;
        width: calc(43rem + 27vw);
        height: calc(9rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card24 {
        left: 50%;
        top: 75%;
        width: calc(33rem + 21vw);
        height: calc(6rem + 6vw);
    }
}

/* 第二章，第五頁 */
.card25 {
    left: 50%;
    top: 74%;
    width: calc(46rem + 42vw);
    height: calc(10rem + 10vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card25 {
        left: 50%;
        top: 80%;
        width: calc(47rem + 30vw);
        height: calc(11rem + 11vw);
    }
}
@media (max-width: 1023px) {
    .card25 {
        left: 50%;
        top: 75%;
        width: calc(36rem + 22vw);
        height: calc(8rem + 6vw);
    }
}

/* 第三章，第一頁 */
.card30 {
    left: 18%;
    top: 20%;
    width: calc(15rem + 15vw);
    height: calc(3rem + 3vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card30 {
        left: 22%;
        top: 25%;
        width: calc(16rem + 17vw);
        height: calc(3rem + 3vw);
    }
}
@media (max-width: 1023px) {
    .card30 {
        left: 22%;
        top: 20%;
        width: calc(13rem + 13vw);
        height: calc(2rem + 2vw);
    }
}

.card31 {
    left: 34%;
    top: 75%;
    width: calc(30rem + 32vw);
    height: calc(8rem + 8vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card31 {
        left: 50%;
        top: 82%;
        width: calc(39rem + 39vw);
        height: calc(8rem + 8vw);
    }
}
@media (max-width: 1023px) {
    .card31 {
        left: 50%;
        top: 78%;
        width: calc(30rem + 30vw);
        height: calc(6rem + 4vw);
    }
}

/* 第三章，第二頁 */
.card32 {
    left: 50%;
    top: 75%;
    width: calc(45rem + 45vw);
    height: calc(11rem + 11vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card32 {
        left: 50%;
        top: 79%;
        width: calc(45rem + 28vw);
        height: calc(12rem + 11vw);
    }
}
@media (max-width: 1023px) {
    .card32 {
        left: 50%;
        top: 70%;
        width: calc(32rem + 30vw);
        height: calc(9rem + 8vw);
    }
}

/* 第三章，第三頁 */
.card33 {
    left: 36%;
    top: 21%;
    width: calc(35rem + 34vw);
    height: calc(8rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card33 {
        left: 50%;
        top: 15%;
        width: calc(37rem + 37vw);
        height: calc(8rem + 8vw);
    }
}
@media (max-width: 1023px) {
    .card33 {
        left: 50%;
        top: 20%;
        width: calc(28rem + 28vw);
        height: calc(6rem + 5vw);
    }
}

/* 第三章，第四頁 */
.card34 {
    left: 40%;
    top: 82%;
    width: calc(45rem + 32vw);
    height: calc(8rem + 8vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card34 {
        left: 50%;
        top: 80%;
        width: calc(45rem + 34vw);
        height: calc(7rem + 7vw);
    }
}
@media (max-width: 1023px) {
    .card34 {
        left: 50%;
        top: 80%;
        width: calc(35rem + 25vw);
        height: calc(5rem + 6vw);
    }
}

/* 第三章，第五頁 */
.card35 {
    left: 50%;
    top: 15%;
    width: calc(28rem + 28vw);
    height: calc(3rem + 5vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card35 {
        left: 50%;
        top: 15%;
        width: calc(25rem + 35vw);
        height: calc(3rem + 3vw);
    }
}
@media (max-width: 1023px) {
    .card35 {
        left: 50%;
        top: 15%;
        width: calc(25rem + 22vw);
        height: calc(3rem + 1vw);
    }
}

/* 第四章，第一頁 */
.card40 {
    left: 24%;
    top: 10%;
    width: calc(20rem + 20vw);
    height: calc(3rem + 3vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card40 {
        left: 40%;
        top: 10%;
        width: calc(30rem + 30vw);
        height: calc(3rem + 3vw);
    }
}
@media (max-width: 1023px) {
    .card40 {
        left: 35%;
        top: 20%;
        width: calc(22rem + 22vw);
        height: calc(2rem + 3vw);
    }
}

.card41 {
    left: 42%;
    top: 45%;
    width: calc(39rem + 38vw);
    height: calc(9rem + 10vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card41 {
        left: 50%;
        top: 82%;
        width: calc(39rem + 39vw);
        height: calc(10rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card41 {
        left: 50%;
        top: 78%;
        width: calc(32rem + 32vw);
        height: calc(7rem + 6vw);
    }
}

/* 第四章，第二頁 */
.card42 {
    left: 50%;
    top: 78%;
    width: calc(45rem + 45vw);
    height: calc(8rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card42 {
        left: 50%;
        top: 79%;
        width: calc(45rem + 32vw);
        height: calc(9rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card42 {
        left: 50%;
        top: 75%;
        width: calc(32rem + 32vw);
        height: calc(7rem + 7vw);
    }
}

/* 第四章，第三頁 */
.card43 {
    left: 42%;
    top: 80%;
    width: calc(36rem + 38vw);
    height: calc(7rem + 6vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card43 {
        left: 50%;
        top: 85%;
        width: calc(37rem + 37vw);
        height: calc(6rem + 6vw);
    }
}
@media (max-width: 1023px) {
    .card43 {
        left: 50%;
        top: 83%;
        width: calc(33rem + 33vw);
        height: calc(4rem + 5vw);
    }
}

/* 第五章，第一頁 */
.card50 {
    left: 75%;
    top: 15%;
    width: calc(20rem + 20vw);
    height: calc(4rem + 4vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card50 {
        left: 70%;
        top: 10%;
        width: calc(23rem + 23vw);
        height: calc(4rem + 4vw);
    }
}
@media (max-width: 1023px) {
    .card50 {
        left: 65%;
        top: 20%;
        width: calc(22rem + 22vw);
        height: calc(4rem + 4vw);
    }
}

.card51 {
    left: 35%;
    top: 65%;
    width: calc(30rem + 30vw);
    height: calc(9rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card51 {
        left: 45%;
        top: 82%;
        width: calc(34rem + 34vw);
        height: calc(10rem + 7vw);
    }
}
@media (max-width: 1023px) {
    .card51 {
        left: 50%;
        top: 78%;
        width: calc(32rem + 32vw);
        height: calc(7rem + 6vw);
    }
}

/* 第五章，第二頁 */
.card52 {
    left: 50%;
    top: 78%;
    width: calc(40rem + 40vw);
    height: calc(9rem + 10vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card52 {
        left: 50%;
        top: 79%;
        width: calc(45rem + 32vw);
        height: calc(11rem + 11vw);
    }
}
@media (max-width: 1023px) {
    .card52 {
        left: 50%;
        top: 75%;
        width: calc(32rem + 32vw);
        height: calc(7rem + 8vw);
    }
}

/* 第五章，第三頁 */
.card53 {
    left: 38%;
    top: 20%;
    width: calc(38rem + 37vw);
    height: calc(7rem + 7vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card53 {
        left: 50%;
        top: 25%;
        width: calc(37rem + 37vw);
        height: calc(9rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card53 {
        left: 50%;
        top: 80%;
        width: calc(33rem + 33vw);
        height: calc(5rem + 5vw);
    }
}

/* 第五章，第四頁 */
.card54 {
    left: 42%;
    top: 80%;
    width: calc(38rem + 38vw);
    height: calc(8rem + 9vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card54 {
        left: 50%;
        top: 80%;
        width: calc(37rem + 37vw);
        height: calc(9rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card54 {
        left: 50%;
        top: 76%;
        width: calc(33rem + 33vw);
        height: calc(7rem + 6vw);
    }
}


/* 第六章，第一頁 */
.card60 {
    left: 50%;
    top: 10%;
    width: calc(21rem + 21vw);
    height: calc(3rem + 3vw);
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .card60 {
        left: 55%;
        top: 10%;
        width: calc(31rem + 31vw);
        height: calc(3rem + 3vw);
    }
}

@media (max-width: 1023px) {
    .card60 {
        left: 35%;
        top: 20%;
        width: calc(23rem + 23vw);
        height: calc(2rem + 3vw);
    }
}

.card61 {
    left: 65%;
    top: 82%;
    width: calc(37rem + 37vw);
    height: calc(7rem + 7vw);
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .card61 {
        left: 50%;
        top: 82%;
        width: calc(39rem + 39vw);
        height: calc(8rem + 8vw);
    }
}

@media (max-width: 1023px) {
    .card61 {
        left: 50%;
        top: 78%;
        width: calc(32rem + 32vw);
        height: calc(5rem + 5vw);
    }
}

/* 第六章，第二頁 */
.card62 {
    left: 50%;
    top: 20%;
    width: calc(42rem + 42vw);
    height: calc(8rem + 8vw);
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .card62 {
        left: 50%;
        top: 27%;
        width: calc(45rem + 32vw);
        height: calc(12rem + 12vw);
    }
}

@media (max-width: 1023px) {
    .card62 {
        left: 50%;
        top: 70%;
        width: calc(30rem + 30vw);
        height: calc(9rem + 9vw);
    }
}

/* 第六章，第三頁 */
.card63 {
    left: 65%;
    top: 80%;
    width: calc(36rem + 36vw);
    height: calc(5rem + 5vw);
}

@media (min-width: 1024px) and (max-width: 1589px) {
    .card63 {
        left: 50%;
        top: 85%;
        width: calc(37rem + 37vw);
        height: calc(6rem + 6vw);
    }
}

@media (max-width: 1023px) {
    .card63 {
        left: 50%;
        top: 83%;
        width: calc(33rem + 33vw);
        height: calc(4rem + 5vw);
    }
}

/* 第六章，第四頁 */
.card64 {
    left: 63%;
    top: 20%;
    width: calc(37rem + 38vw);
    height: calc(7rem + 7vw);
}
@media (min-width: 1024px) and (max-width: 1589px) {
    .card64 {
        left: 50%;
        top: 20%;
        width: calc(37rem + 37vw);
        height: calc(8rem + 9vw);
    }
}
@media (max-width: 1023px) {
    .card64 {
        left: 50%;
        top: 20%;
        width: calc(33rem + 33vw);
        height: calc(5rem + 5vw);
    }
}