a {
    text-decoration: none;
}

.main-content {
    background-color: #ffffff;
}

/* 最新消息 */
.section {
    width: 100%;
    height: auto;
    margin: auto;
    margin-top: 0;
    padding: 0;
}

.container-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(135 135 135 / 10%);
    margin: auto;
    padding: 0;
    border-radius: 0 0 10px 10px;
}

.container-title::before,
.container-title::after {
    content: '';
    display: flex;
    width: 12.5%;
    height: 3px;
    padding: 0 2px;
    background-color: rgb(139 198 101 / 50%);
}

.container-title::before {
    margin-right: 30px;
}

.container-title::after {
    margin-left: 30px;
}

.container-title-text {
    color: #000000;
    margin: 0;
    padding: 0;
    width: 25%;
    text-align: center;
}

/* 定義每個方框陰影以及佈局設定 */
.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    margin: 15px 25px 30px;
    place-items: center;
}

.news-item {
    /* height: 330px; */
    width: 100%;
    max-width: 500px; /* 最大寬度 500px */
    height: auto;
    aspect-ratio: 3 / 2; /* 保持寬高比為 3:2，這裡可以根據需求調整 */
    overflow: hidden;
    box-shadow: 7px 8px rgb(0 0 0 / 60%);
    border-radius: 15px;
    object-fit: cover;
}

/* 調整文字框圓角 */
.text {
    border-radius: 15px 15px 0 0;
}

/* 文字顏色(color)跟背景(background-color) */
.grid > .news-item > .text {
    color: violet;
    background-color: rgb(0 207 255 / 30%);
}

/* 調整日期整體距離 */
.date {
    padding: 5px 0 0 5px;
    margin-bottom: 5px;
    font-size: 18px;
}

/* 調整標題整體距離 */
.title {
    padding: 0 5px;
    font-weight: bold;
    padding-bottom: 9px;
    margin-bottom: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-item:hover {
    text-decoration: none;
}

.image {
    overflow: hidden;
}

.news-item img {
    display: block;
    width: auto;
    height: 300px;
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

.image > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0 0 15px 15px;
    object-fit: cover;
}

.news-item:hover img {
    transform: scale(1.05);
}

.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.img-container-pic {
    width: 70%;
    height: auto;
}

.responsive-video {
    width: 70%; /* 調整為容器寬度的70% */
    max-width: 800px; /* 最大寬度限制為800px */
    height: auto; /* 根據寬度自動調整高度，保持比例 */
}

.back-news {
    text-align: center;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #595757;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.back-btn:hover {
    background-color: rgb(139 198 101 / 20%);
    transform: scale(1.02);
}

.back-btn i {
    margin-right: 8px; /* 圖示和文字之間的間距 */
}

.news-link {
    /* 基本樣式 */
    color: #7b2cbf;
    text-decoration: none;
    font-weight: 500;
    
    /* 增加觸控區域，提高可點擊性 */
    padding: 8px 12px;
    margin: 5px 0;
    display: inline-block;
    
    /* 視覺效果 */
    border-radius: 6px;
    background-color: rgba(0, 102, 204, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    
    /* 動畫效果 */
    transition: all 0.3s ease;
    
    /* 文字樣式 */
    font-size: 16px; /* 移動裝置上更易閱讀的字體大小 */
    line-height: 1.4;
    
    /* 防止文字溢出 */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-link:hover, .news-link:active {
    background-color: rgba(0, 102, 204, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    color: #004499;
}

@media (width <= 768px) {
    .news-item {
        max-width: 90%; /* 在平板上寬度變小，使用百分比 */
        height: 250px; /* 平板上設置固定高度 */
    }

    .img-container-pic {
        width: 95%;
        height: auto;
    }

    .responsive-video {
        width: 90%; /* 調整為容器寬度的90% */
    }

    .news-link {
        /* 在手機上可以增加更大的點擊區域 */
        padding: 10px 15px;
        
        /* 可以考慮在手機上讓連結更突出 */
        display: block; /* 讓連結佔據整行 */
        text-align: center;
        margin: 8px 0;
        
        /* 稍微增大字體 */
        font-size: 17px;
    }
}

@media (width <= 480px) {
    /* 定義每個方框陰影以及佈局設定 */
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .news-item {
        max-width: 85%; /* 手機端寬度100% */
        height: 200px; /* 手機端設置較小的高度 */
    }

    .img-container-pic {
        width: 100%;
    }

    .responsive-video {
        width: 100%; /* 調整為容器寬度的100% */
    }
}