body {
    font-size: 14px;
    /* font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "新細明體", "蘋果儷黑體", Verdana, sans-serif; */
    overflow-x: hidden;
    background-color: #000;
    /* background-image: url(../images/background/兩側BG.png); */
    background-image: url(../images/background/新版底圖.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Noto Sans TC", sans-serif;
}

/* ⬇ 這是因為bootstrap影響到原本的header  */
*,
::after,
::before {
    box-sizing: content-box;
}

ol,
ul {
    padding-left: 2.5rem;
}

/* ⬆ 這是因為bootstrap影響到原本的header  */



body::-webkit-scrollbar {
    display: none;
}

/* 去除bootstrap點選出現的藍色框 */
.accordion-button:focus {
    box-shadow: none;
}

/* 向上的箭頭改白色 */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 向下的箭頭改白色 */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    background-color: #fff;
    border: none;
    /* border-bottom: 2px dashed #FFCC00; */
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.btn {
    line-height: 0;
}

.full-image {
    width: 100%;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

.header_logo {
    display: none;
}


.news_title {
    text-align: center;
    padding-top: 115px;
}

.news_title span {
    display: inline-block;
    font-size: 45px;
    font-weight: bold;
    color: #fff;
    /* border-bottom: 4px solid #a4a473; */

}

.news_content {
    width: 100%;
    /* background: #101823; */
    min-height: calc(100vh - 120px);
    /* background-image: url(../images/background/兩側BG.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; */
    padding-bottom: 15vh;
}

.newsbg {
    /* background-image: url(../images/background/中間BG.png);
    background-position: top;
    background-repeat: repeat;
    background-size: auto; */
    width: 66%;
    margin: 0 auto;
    min-height: inherit;
    padding-bottom: 10%;
}

.news_content .news_event .position {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 3vh 0;
    /* font-family: "Noto Sans TC", sans-serif; */
}

.news_event .position .event {
    display: inline-block;
    width: 15%;
    text-align: center;
    padding: 15px 0px;
}

.news_event .btn {
    padding: 10px 10px;
    /* font-size: 22px; */
    border-radius: 0 !important;
}

.news_event .margin {
    border-left: 2px solid #fff;
    margin: 5px 0px;
    overflow: visible;
    height: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news_event:first-of-type .margin {
    border-left: none;

}

.position .event:first-of-type .margin {
    border-left: none;
}

.news_event .position .event a {
    text-decoration: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.5rem;
    width: 100%;
    margin-left: 2%;
    font-weight: 700;
}

.news_event .position .event a:hover {
    background-color: #FFCC00;
    color: #000;
}

.news_list {
    padding: 0 20px;
}

.news_list .news_item {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
    gap: 20px;
    padding: 20px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    width: 80%;

}

.news_item a {
    display: flex;
    margin-bottom: 25px;
    text-decoration: none;
    color: #fff;
    align-items: center;
}

/* 分類的顏色 */
/* 全部 */
.posi1 .event {
    background-color: #006591;
}

/* 公告 */
.posi2 .event {
    background-color: #006591;
}

/* 活動 */
.posi3 .event {
    background-color: #B50000;
}

/* 賽事 */
.posi4 .event {
    background-color: #915900;
}

/* 更新 */
.posi5 .event {
    background-color: #249C00;
}

.news_item a .event {
    display: inline-block;
    color: #fff;
    margin: 0 15px;
    padding: 2px 5px;
}

.news_item a .pillar {
    display: inline-block;
    height: 13px;
    width: 1px;
    background-color: rgb(188, 185, 180);
    margin: 0px 8px;
}

.news_item a .time {
    display: inline-block;
    margin-left: auto;
}

.news_item a .title_text {
    font-size: 1rem;
    word-wrap: break-word;
}

.accordion-item {
    padding: 1.5rem 0;
    font-size: 1.1rem;
    position: relative;
    font-weight: 500;
}

.line {
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 5px;
    background-image: linear-gradient(to right, #FFCC00 0%, #FFCC00 50%, transparent 50%, transparent 100%);
    background-size: 18px 3px;
    background-repeat: repeat-x;
}

.accordion-button {
    padding: 1rem 0rem;
    font-size: 1.1rem;
}

.accordion-body {
    padding: 1rem 1.5rem 1.25rem;
}

/* 查看更多按鈕 */
.load_more_wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 5%;
}

#load_more {
    padding: 10px 40px;
    border: 1px solid #fff;
    background-color: #000;
    color: #fff;
    cursor: pointer;
}


/* Layout for screens with max-width 1200px */
@media (max-width: 1200px) {
    .news_list .news_item {
        display: grid;
        /* grid-template-columns: repeat(3, 1fr); */
        /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
        gap: 20px;
        padding: 20px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
    }

    .newsbg {
        width: 90%;
    }

    .news_item a .event {
        white-space: nowrap;
    }



    .news_item a .time {
        white-space: nowrap;
    }



    .news_event .position .event a {
        white-space: nowrap;
    }
}

@media (max-width: 750px) {
    .accordion-header button div {
        white-space: nowrap;
    }

    .accordion-collapse span {
        display: none;
    }

    .news_title {
        padding-top: 100px;
    }

    .news_event .position .event a {
        font-size: 1.2rem;
    }

    .news_event .position .event {
        width: 80px;
    }

    .news_list .news_item {
        width: 100%;
    }
}

/* Layout for screens with max-width 520px */
@media (max-width: 520px) {
    body {

        background-image: none;

    }

    .newsbg {
        background-image: url(../images/background/中間BG.png);
        background-position: top;
        background-repeat: repeat-y;
        background-size: cover;
        width: 100%;
        background-attachment: fixed;
        padding-bottom: 20%;
    }

    .news_content {
        padding-bottom: 0;
    }

    .accordion-item {
        padding: 1.5rem 0 2.5rem;
    }

    .accordion-body {
        padding: 0.3rem 1rem 1.25rem 0.5rem;
        font-size: 1.1rem;
        /* 換行盡量對齊用的 */
        line-break: anywhere;
    }


    .newsbg {
        width: 100%;
    }

    .news_title {
        padding-top: 115px;
    }

    .news_title span {
        font-size: 40px;
    }

    .news_item a .event {
        white-space: nowrap;
    }

    .news_event .btn {
        padding: 5px 0px;
    }

    .news_item a .title_text {
        font-size: 0.6rem;
    }

    .news_item a .time {
        white-space: nowrap;
    }

    .news_event .position .event {
        width: 20%;
    }

    .news_event .position .event a {
        font-size: 1rem;
        white-space: nowrap;
        /* line-height: 2px; */
    }

    .news_list {
        padding: 0;
    }

    .news_list .news_item {
        display: grid;
        /* grid-template-columns: repeat(3, 1fr); */
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 20px;
        padding: 0;
        max-width: calc(100% - 40px);
        margin: 0 auto;
    }

    .news_content .news_event .position {
        text-align: center;
    }

    .accordion-button {
        padding: 0;
    }

    /* .accordion-body {
        padding: 0.3rem 2rem 1.25rem;
    } */
}


/* Embedded Page */

.em_content {
    width: 100%;
    background: #101823;
    min-height: 100vh;
    font-size: 8px;
}

.em_title {
    width: 100%;
    text-align: center;
    padding-top: 30px;
}

.em_title span {
    display: inline-block;
    /* font-size: 45px; */
    font-weight: bold;
    color: #fff;
    border-bottom: 4px solid #a4a473;
}

.em_event {
    display: flex;
    flex-direction: column;
    padding-left: 10%;
    /* 左側留白 */
    padding-right: 10%;
    /* 右側留白 */
    margin-left: auto;
    /* 將容器居中 */
    margin-right: auto;
    /* 將容器居中 */
}

.row {
    display: flex;
    justify-content: flex-start;
}

.em_event .position .event {
    font-weight: bold;
    /* background-color: #f4f4f4; */
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
}

.em_event .position .event:hover {
    background: #a4a473;
}

.em_event .position .event a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.row_content {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.row_content .event,
.row_content .time {
    flex: 0 0 50px;
    /* 不固定寬度，根據內容調整 */
    display: flex;
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    /* background: #f5f5f5; */
    /* border: 1px solid #ddd;
    border-width: 1px 0; */
    /* border-radius: 5px; */
    /* padding: 10px; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.row_content .title_text {
    flex: 1;
    /* 中間欄自動填滿剩餘空間 */
    /* background: #ffffff; */
    /* border: 1px solid #ddd;
    border-width: 1px 0; */
    /* border-radius: 5px; */
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}