@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

.main {
    position: relative;
    background: linear-gradient(180deg, rgb(7 7 7) 10%, rgba(24, 36, 59, 1) 40%);
    z-index: 0;
}

/*-----------------麵包穴----------*/
.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: rgba(255, 255, 255, .87);
    content: "/";
}

.breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 1);
}

.breadcrumb .breadcrumb-item a:hover {
    color: rgba(255, 255, 255, 0.87);
    text-decoration: underline;
    text-underline-position: under;
    transition: all .2s ease-in;
}

.breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.87);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-width: 60vw;
    overflow: hidden;
}

/* --------------------top----------*/
.Wrapper-personality {
    padding: 18px 0 0;
}

.Wrapper-personality .result-container {
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    z-index: 1;
}

.Wrapper-personality h1 {
    margin-bottom: 6px;
}

.retest-link {
    font-family: "Noto Sans";
    color: rgba(255, 255, 255, .7);
    text-decoration: underline;
    text-underline-position: under;
    font-size: 14px;
    margin-top: 6px;
    margin-right: 6px;
    gap: 3px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.retest-link:hover {
    color: rgba(255, 255, 255, .87);
    text-decoration: underline;
    text-underline-position: under;
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
    margin-bottom: 120px;
}

.btn-share-quiz.character-01 {
    background-color: #c4ccbc;
    color: #445241;
    border: 2px solid #c4ccbc;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-01:hover {
    background-color: #c4ccbc;
    color: #445241;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #c4ccbc;
}

.btn-result.character-01 {
    background-color: transparent;
    color: #c4ccbc;
    border: 2px solid #c4ccbc;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-01:hover {
    background-color: transparent;
    color: #c4ccbc;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #c4ccbc;
}

.btn-share-quiz.character-02 {
    background-color: #d0c8cb;
    color: #534e71;
    border: 2px solid #d0c8cb;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-02:hover {
    background-color: #d0c8cb;
    color: #534e71;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #d0c8cb;
}

.btn-result.character-02 {
    background-color: transparent;
    color: #d0c8cb;
    border: 2px solid #d0c8cb;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-02:hover {
    background-color: transparent;
    color: #d0c8cb;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #d0c8cb;
}

.btn-share-quiz.character-03 {
    background-color: #e1c5a4;
    color: #4a2c1f;
    border: 2px solid #e1c5a4;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-03:hover {
    background-color: #e1c5a4;
    color: #4a2c1f;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #e1c5a4;
}

.btn-result.character-03 {
    background-color: transparent;
    color: #e1c5a4;
    border: 2px solid #e1c5a4;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-03:hover {
    background-color: transparent;
    color: #e1c5a4;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #e1c5a4;
}

.btn-share-quiz.character-04 {
    background-color: #d1e3e4;
    color: #416383;
    border: 2px solid #d1e3e4;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-04:hover {
    background-color: #d1e3e4;
    color: #416383;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #d1e3e4;
}

.btn-result.character-04 {
    background-color: transparent;
    color: #d1e3e4;
    border: 2px solid #d1e3e4;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-04:hover {
    background-color: transparent;
    color: #d1e3e4;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #d1e3e4;
}

.btn-share-quiz.character-05 {
    background-color: #cec9c8;
    color: #49423d;
    border: 2px solid #cec9c8;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-05:hover {
    background-color: #cec9c8;
    color: #49423d;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #cec9c8;
}

.btn-result.character-05 {
    background-color: transparent;
    color: #cec9c8;
    border: 2px solid #cec9c8;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-05:hover {
    background-color: transparent;
    color: #cec9c8;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #cec9c8;
}



.btn-share-quiz.character-06 {
    background-color: #e1c8c9;
    color: #6b4041;
    border: 2px solid #e1c8c9;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-share-quiz.character-06:hover {
    background-color: #e1c8c9;
    color: #6b4041;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #e1c8c9;
}

.btn-result.character-06 {
    background-color: transparent;
    color: #e1c8c9;
    border: 2px solid #e1c8c9;
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-result.character-06:hover {
    background-color: transparent;
    color: #e1c8c9;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #e1c8c9;
}

.section-title {
    display: flex;
    /* 使用 Flex 佈局 */
    align-items: center;
    /* 垂直置中 */
    text-align: center;
    color: #fafafa;
    /* 文字顏色 */
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    /* 自動填滿剩餘空間，讓線條等長 */
    height: 1px;
    /* 線條寬度 */
    background: #9b9b9b;
    /* 線條顏色（深灰色） */
}

/* 調整文字與左右線條的間距 */
.section-title span {
    padding: 0 20px;
    font-size: 33px;
}

/* ------------------產品推薦------------------*/
.product-container {
    padding-bottom: 45px;
}

.Wrapper-personality .highly-recommended h3 {
    position: relative;
    padding-left: 15px;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: 700;
    color: #fafafa;
    font-family: "Noto Serif TC", serif;
}

.Wrapper-personality .highly-recommended h3::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #cb2219;
    top: 3px;
    left: 3px;
    position: absolute;
}

.col-group-video-card-head {
    position: relative;
}

.col-group-video-card {
    background-color: #fff;
    padding: 9px;
    border-radius: .25rem;
}

.col-group-video-card-img_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: .25s;
    background-color: var(--color-bg-secondary-3);
}

.course-card-title {
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--color-primary);
}

.Wrapper-video-color .course-card-author {
    color: rgb(24 34 37 / 75%);
    margin-bottom: 8px;
}

.col-group-video-card-body {
    -ms-flex: 1;
    flex: 1;
    height: 100%;
}

.course-card-discount {
    color: var(--color-discount);
    font-size: 13px;
    padding-right: 3px;
    text-decoration: line-through;
    font-weight: 500;
    height: 18px;
}

/* -------------------------brand------------------ */
.Wrapper-brand-color {
    /* margin-bottom: 30px; */
    background-image: url(../images/index_blog_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.Wrapper-brand-color .content_ {
    padding: 110px 15px;
}

.Wrapper-brand-color p {
    font-size: 15px;
    color: var(--color-white);
    margin: .5rem auto;
}

/* -------------------------pagination------------------ */
.Wrapper-personality .couse-pagination {
    margin: 15px auto 60px;
}

.Wrapper-personality .couse-pagination .page-link {
    width: 36px;
    height: 36px;
    border: 0px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0.87);
    line-height: 1.3;
    font-size: 12px;
    font-weight: 600;
    margin: 0 5px;
    border-radius: 100rem;
    transition: background-color .2s ease-in-out;
}

.Wrapper-personality .couse-pagination .page-link-color {
    width: 36px;
    height: 36px;
    padding: 9px 0px;
    margin: 0 5px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(24, 34, 37, 0);
    background-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.87);
    border-radius: 100rem;
    transition: background-color .2s ease-in-out;
    line-height: 1.3;
}

.Wrapper-personality .couse-pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1399.98px) {}

@media (max-width: 1199.98px) {
    .btn-group {
        margin-bottom: 90px;
    }
}

@media (min-width: 992px) {
    .col-group-video-card a:hover {
        transform: translateY(0px);
        text-decoration: none;
    }

    .col-group-video-card a:hover>.col-group-video-card-head .col-group-video-card-img_2::after {
        content: "";
        opacity: 0;
    }

    .col-group-video-card .group_ .col-group-video-card-head a:hover .col-group-video-card-img_2 {
        background-size: 110%;
        filter: brightness(.8);
        -webkit-filter: brightness(.8);
    }

    .col-group-video-card .group_:has(.hover_link:hover) .col-group-video-card-img_2,
    .col-group-video-card .group_:has(.hover_link:hover) .col-group-video-card-img {
        background-size: 110%;
        filter: brightness(.8);
        -webkit-filter: brightness(.8);
    }
}

@media (max-width: 991.98px) {
    .Wrapper-personality .couse-pagination {
        margin: 0px auto 45px;
    }

    .section-title span {
        padding: 0 15px;
        font-size: 27px;
        /* 標題字級 */
        /* 字距 */
    }

    .Wrapper-brand-color .content_ {
        padding: 90px 0px;
    }

    .Wrapper-brand-color {
        background-attachment: initial;
    }
}

@media (max-width: 767.98px) {}

@media (max-width:575.98px) {
    .col-group-video-card-img_2 {
        max-width: 100%;
        object-fit: cover;
        transform: scale(1);
    }

    .col-group-video-card-img_2.newclass_ {
        width: 128px;
        height: 72px;
        flex-shrink: 0;
        border-radius: 5px;
    }

    .col-group-video-card-head {
        aspect-ratio: 16 / 9;
        max-width: 100%;
        background: rgba(0, 0, 0, .12);
    }

    .col-group-video-card-head.newclass_ {
        margin-right: 12px;
        border-radius: 5px;
    }

    .course-card-title.index__ {
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.4;
        max-height: 50px;
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .col-group-video-card-body {
        padding-left: 0px;
    }

    .section-title span {
        padding: 0 6px;
        font-size: 7vw;
    }

    .btn-group {
        display: flex;
        flex-direction: row;
        margin-bottom: 72px;
        gap: 27px;
    }

    .btn-share-quiz.character-01,
    .btn-result.character-01,
    .btn-share-quiz.character-02,
    .btn-result.character-02,
    .btn-share-quiz.character-03,
    .btn-result.character-03,
    .btn-share-quiz.character-04,
    .btn-result.character-04,
    .btn-share-quiz.character-05,
    .btn-result.character-05,
    .btn-share-quiz.character-06,
    .btn-result.character-06 {
        display: inline;
        text-align: center;
        padding: 12px 24px;
        width: 150px;
    }

    .Wrapper-personality {
        padding: 0;
    }

    .Wrapper-brand-color .content_ {
        padding: 120px 15px;
    }

}