@charset "UTF-8";
/*----------------最新消息 #page-news----------------*/

/*----------------共用----------------*/
:root{
	--main-color-white:#ffffff;
	--main-color-black:#000000;
	--main-color-blue:#109DCD;
	--main-color-yellow:#F0EA30;
	--main-color-orange:#EE7800;
    --main-color-green:#8CC280;
	--main-color-gray:#CCCCCC;	
    --main-color-gray2:#707070;	
}


/*--------內容--------*/

/* 卡片主體 */
#page-news .news-item {
    margin-bottom: 20px;
    border: 1px solid var(--main-color-gray2);
    border-radius: 30px;
    transition: all 0.3s ease;
}
#page-news .news-item:last-child {
    margin-bottom: 0;
}


#page-news .news-item.orange:hover {
    border: 1px solid var(--main-color-orange);
    transform: translateY(-5px);
}
#page-news .news-item.blue:hover {
    border: 1px solid var(--main-color-blue);
    transform: translateY(-5px);
}

#page-news .news-item .news-link {
    display: flex;        
    align-items: center;
    padding: 30px;         
    width: 100%;           
    box-sizing: border-box; 
}


/* 左側圖片區 */
#page-news .news-item .news-link .news-img {
    flex: 0 0 300px; /* 固定圖片寬度 */
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 40px;
}

#page-news .news-item .news-link .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片不變形並填滿 */
}

#page-news .news-item .news-link .news-img .badge{
    display: none;
}

/* 右側文字區 */
#page-news .news-item .news-link .news-content {
    flex: 1;
}

#page-news .news-item .news-link .news-content .news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#page-news .news-item .news-link .news-content .news-header h3 {
    color: var(--main-color-black);
    margin: 0;
    padding-right: 20px;

    /*開啟多行截斷功能 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    /* 設定顯示行數：2 行 */
    -webkit-line-clamp: 2;
    
    /* 隱藏超出範圍的文字並顯示省略號 */
    overflow: hidden;
    
    /* 建議：設定行高，確保視覺比例好看 */
    line-height: 1.5;
    /* 建議：設定最大高度 (line-height * 行數) 確保容器不跑位 */
    max-height: 3em;    
}

/* 日期 */
#page-news .news-item .news-link .news-content .news-date {
    font-weight: 800;
    margin-bottom: 10px;
}
#page-news .news-item .news-link .news-content .news-date.orange{
    color: var(--main-color-orange); 
}
#page-news .news-item .news-link .news-content .news-date.blue{
    color: var(--main-color-blue); 
}

/* 簡述 */
#page-news .news-item .news-link .news-content .news-desc {
    color: #6B6B6B;

    /* 限制三行文字，超過顯示省略號 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.5;
    max-height: 4.5em;
}

/* 分類標籤 Badge */
#page-news .badge {
    padding: 2px 15px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}

#page-news .badge.orange { 
    background-color: var(--main-color-orange); 
}
#page-news .badge.blue { 
    background-color: var(--main-color-blue); 
}



/*---行家推薦 #page-experts---*/





/*螢幕尺寸【小於】769時頁面顯示---手機*/
@media (max-width: 768px) {

    /* 卡片主體 */
    #page-news .news-item .news-link {
        flex-direction: column; /* 變回上下排列 */
        border-radius: 20px;
    }

    /* 左側圖片區 */
    #page-news .news-item .news-link .news-img {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        height: 240px;
        margin-right: 0;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    #page-news .news-item .news-link .news-img .badge{
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    /* 右側文字區 */
    #page-news .news-item .news-link .news-content .news-header h3 {
        -webkit-line-clamp: 1; /* 改為一行 */
        max-height: 1.5em;      /* 高度同步改為 1 行的高度 (1.5 * 1) */       
        padding-right: 0;
    }    
    #page-news .news-item .news-link .news-content .news-header .badge {
        display: none;
    }


    /* 簡述 */
    #page-news .news-item .news-link .news-content .news-desc {
        color: #6B6B6B;

        /* 限制2行文字 */
        -webkit-line-clamp: 2;
    }    

}




/*螢幕尺寸【小於】481時頁面顯示---手機*/
@media (max-width: 480px) {

    /* 左側圖片區 */
    #page-news .news-item .news-link .news-img {
        height: 200px;
    }    
}