/* homepage.css —— 首頁（Default.cshtml 與 Homepage/ 五個 partial 之外部化） */

/* 原 Default.cshtml 內聯 <style> */
.panel { height:20em; }
#mainpanel *[class*="col_"] { margin:0; }

/* 原 _RecentNews / _RecentClass 內聯 <style>（兩份重複規則整併） */
.recentnews ul, .recentclass ul { list-style-type:none; }
.recentnews ul li, .recentclass ul li { border:none; margin:0 0 -1em 0; }
.recentnews span, .recentclass span { color:#c79522; }
.recentnews .recentgrid, .recentclass .recentgrid, #recentnews .recentrow, #recentclass .recentrow { margin:0; padding:0; }
.recentnews .col_1, .recentclass .col_1 { width: 4%; }
.recentnews .col_4, .recentclass .col_4 { width: 30%; }
.recentnews .col_8, .recentclass .col_8 { width: 66%;}
.recentnews .col_11, .recentclass .col_11 { width: 96%; }
.recentnews .recentgrid { height:3em; }
.recentclass .recentgrid { height:4em; }
.recentnews i, .recentclass i { color:#C79522; }
.recentnews .button.small.blue, .recentclass .button.small.blue { position:relative; top:-0.25em; }
.recentnews > div > b, .recentclass > div > b { color:#2F4D91; font-size:large; }
.recentnews .recentrow a, .recentclass .recentrow a { text-decoration:none; color:#000; }
    .recentnews .recentrow a:hover, .recentclass .recentrow a:hover { text-decoration:underline; color:#C79522; }
.recentclass .dateinfo { font-size:small; color:#4782B8; }

/* 各 recentnews/recentclass 區塊的容器內距與分隔線（原 style 屬性） */
.recentnews, .recentclass { padding:10px; }
.recentnews hr, .recentclass hr { margin:0.25em 0; }

/* 原 _RecentNews 醒目連結的 style 屬性
   （用 a.hot-headline 提高權重，確保能蓋過 .recentnews .recentrow a 的預設黑色與 hover 金色） */
.recentnews .recentrow a.hot-headline { font-size:1.1em; color:limegreen; text-decoration:underline dotted; text-decoration-color:red; font-weight:900; }
    .recentnews .recentrow a.hot-headline:hover { color:limegreen; text-decoration:underline dotted; text-decoration-color:red; }

/* 原 _RecentEvent 內聯 <style>（theWidth=160、theHeight=120，值寫死在本檔，Razor 不再輸出內聯樣式） */
#recentevent { --thumb-w:160px; --thumb-h:120px; }
#recentevent a { float:left; margin-right:0.5em; text-decoration:none; color:blue; }
    #recentevent a:hover { color:#C79522; text-decoration:underline; }
#recentevent a div { width:var(--thumb-w); }
#recentevent .customimage { height:var(--thumb-h); background-position:center center; background-repeat:no-repeat; }
#recentevent .customimagecaption { font-size:small; padding:0 0.5em; }
/* 縮圖改 <img> 呈現（原 background-image div），contain 等效原 background-size 的等比縮放 */
#recentevent .customphoto { width:var(--thumb-w); height:var(--thumb-h); object-fit:contain; object-position:center; }

/* 原 _RecentNews 內聯 <style> 的 .light 動畫 */
.light {
    position: relative;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    cursor: pointer;
    overflow: hidden;
}
    .light:hover {
        background-color: #fff93a;
        color: #fff93a;
        box-shadow: 0 0 5px #fff93a, 0 0 25px #fff93a, 0 0 50px #fff93a, 0 0 200px #fff93a;
    }
.light div {
    position: absolute;
}
.light div:nth-child(1) {
    width: 100%;
    height: 5px;
    top: 0;
    left: -100%;
    background: linear-gradient(to right,transparent,#ff9500);
    animation: animate1 0.6s linear infinite;
}
.light div:nth-child(2) {
    width: 5px;
    height: 100%;
    top: -100%;
    right: 0;
    background: linear-gradient(to bottom,transparent,#ff9500);
    animation: animate2 0.6s linear infinite;
    animation-delay: 0.15s;
}
.light div:nth-child(3) {
    width: 100%;
    height: 5px;
    bottom: 0;
    right: -100%;
    background: linear-gradient(to left,transparent,#ff9500);
    animation: animate3 0.6s linear infinite;
    animation-delay: 0.3s;
}
.light div:nth-child(4) {
    width: 5px;
    height: 100%;
    bottom: -100%;
    left: 0;
    background: linear-gradient(to top,transparent,#ff9500);
    animation: animate4 0.6s linear infinite;
    animation-delay: 0.45s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}