:root {
    --text-carousel-item-ind: 0;
    --text-carousel-speed: 1s;
}

.text-carousel {
    position: relative;
    height: 30px;
    /* 每則訊息的高度 */
    overflow: hidden;
    flex-grow: 1;
    /* 使 carousel 填滿父容器 */
}

.text-carousel-msgs {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform var(--text-carousel-speed) ease-in-out;
    /* 平滑切換效果 */
    transform: translateY(calc(-1 * var(--text-carousel-item-ind) * 30px));
}

.text-carousel-msg {
    width: 100%;
    height: 30px;
    /* 與 container 高度一致 */
    display: flex;
    align-items: center;
    flex-shrink: 1;
    /* 讓訊息縮小以適應 carousel 寬度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;       
}
.news-bg {
    background-color: #f2f2f2;
}

.index-search-area {
    width: 100%;
}

.index-search-area > .search-tips > img, .index-search-area > .hot-resource-cloud > img {
    height: 20px;
}

.index-banner {
    width: 100%;
    height: auto;
}

.index-banner>.carousel {
    margin-left: -0.1rem;
    margin-right: -0.1rem;
}

.index-banner .carousel-item>img {
    width: 100%;
}

.index-banner>.category {
    display: flex;
    flex-direction: column;
    max-height: 250px;
}

.index-banner .category-content>ul {
    padding-left: 0;
    list-style: none;
}

.index-banner .category-content>ul>li {
    border-bottom: 1px solid #eee;
    padding-top: 5px;
    padding-bottom: 5px;
}

.index-banner .category-content>ul>li .title {
    color: var(--main-bg-color);
    font-size: calc(1.15rem * var(--font-size-enlarge));
    text-decoration: none;
}

.index-banner .category-content>ul>li>small {
    color: #999;
}

.index-banner .category-action {
    text-align: right !important;
    margin-top: 15px !important;
}

.index-banner .category-action>button,
.index-banner .category-title-area>button {
    width: 100px;
    border-radius: 25px;
}

/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .index-banner {
        width: 100%;
        height: auto;
    }

    .index-banner>.carousel {
        margin-left: -2rem;
        margin-right: -2rem;
    }

    .index-banner>.category {
        flex-grow: 1;
        flex-direction: row;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    .index-banner>.carousel {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .index-search-area {
        width: 80%;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    
    .index-banner {
        height: 340px;
    }

    .index-banner>.carousel {
        flex: 0 0 680px;
    }

    .index-banner>.category {
        flex-grow: 1;
        max-height: none;
        flex-direction: column;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .index-banner {
        height: 460px;
    }

    .index-search-area {
        width: 50%;
    }

    .index-banner>.carousel {
        margin-left: 0rem;
        margin-right: 0rem;
        flex: 0 0 920px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .index-banner {
        height: 480px;
    }
}

/* 動態套無障礙紅框選取效果 */
/* 最新消息跑馬燈 */
.text-carousel-msgs a:focus {
    border: 2px dashed #ff0000;
}

/* "首頁"大圖跑馬燈,"首頁"中央導覽列,"教育應用","主題資源","熱門資源"列表 */
.accessibility-line-type1 {
    border: 2px dashed #ff0000;
}

/* "首頁"大圖跑馬燈的切換上一張、下一張按鈕 */
.accessibility-line-type2 {
    border: 2px dashed #ff0000;
    /*filter: invert(100%);*/
}

/* "首頁"大圖跑馬燈底下切換按紐 */
#carouselExampleIndicators .carousel-indicators button:focus{
  border: 4px solid #ff0000;
  /*filter: invert(100%);*/
}

/* "新上架資源" */
.category-content ul > li a:focus{
    border: 2px dashed #ff0000;
}

/* 搜尋關鍵字輸入框 */
.input-group .form-control:focus{
    outline-width: 2px !important;
    outline-style: dashed !important;
    outline-color: #ff0000 !important;
}
.search-input input:focus{
    border: 2px dashed #ff0000;
}
.video-block {
    background-color: #ddf3f6;
}
.video-block  .category-item {
    background-color: #ddf3f6;
}
.video-block .category-img {
    background-color: #fff;
    aspect-ratio: 16 / 10;
    position: relative;
}

.category-item>.category-img div.video::after {
    content: "\f144";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 3rem;
}
.category-item>.category-img div.video::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
}
.carousel-indicators [data-bs-target] {
  width: 40px;
  height: 10px;
}
@media (min-width: 768px) {
    .video-block .category-item {
        height: 100%;  
        background-color: #ddf3f6;
        padding-bottom: 15px;
    }
    
    .video-block .category-item-title  {
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .video-block .video-block-right .category-img {
        width: 160px;
        overflow: hidden;
    }
    .video-block .video-block-right .category-item-content {
        padding-left: 10px;
        width: calc(100% - 160px);
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .video-block  .video-block-left  {
        width: 550px;
        padding-right: 10px;
    }
    .video-block-right {
        width: calc(100% - 550px);
        flex-grow: 1; 
        max-height: none; 
        flex-direction: column; 
        justify-content: space-between;
        padding-left: 10px;
    }
    .video-block  .video-block-left .category-item-title  {
        white-space: normal;
    }
    .video-block .video-block-right .category-img {
        height: 110px;
        width: 176px;
    }
    .video-block .category-item-content {
        flex-grow: 1;
    }
    .video-block .video-block-right .category-item-content {
        width: calc(100% - 176px);
    }
}
@media (min-width: 1200px) {
    .video-block  .video-block-left {
        width: 750px;
    }
    .video-block-right {
        width: calc(100% - 750px);
    }
    .video-block .video-block-right .category-img {
        height: 130px;
        width: 220px;
    }
    .video-block .video-block-right .category-item-content {
        width: calc(100% - 220px);
        flex-grow: 1;
    }
}

@media (max-width: 768px) {
    .search-tips {
        display: none !important;
    }

    .hot-resource-cloud {
        display: none !important;
    }
}