/* 
  全量色彩更新優化版 
  主色调：#405c70 (深蓝灰)
*/

html, body { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    min-height: 100%; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-size: 14px; 
    background: #f5f5f5; 
} 

html { scroll-padding-top: 160px; } 

a { text-decoration: none; } 

.container { width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; } 

.box { box-sizing: border-box; background: #fff; } 

.box.ad p { margin: 0; padding: 0; } 

.box img { width: 100%; display: block; } 

/* 🌈 頂部選單背景改為深藍灰系 (帶透明度防止對比度過強) */
.menuicon { 
    background: rgba(64, 92, 112, 0.05); 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    padding: 10px 6px; 
    box-sizing: border-box; 
    border-bottom: 1px solid rgba(64, 92, 112, 0.2);
} 

.menuicon img { width: 84px; height: auto; } 

/* 🚩 日期背景 */
.riqi { 
    height: 24px; 
    line-height: 24px; 
    text-align: center; 
    font-weight: 700; 
    background: #405c70; 
    color: #ffffff; 
    border-radius: 5px; 
    margin: 2px 0; 
    font-size: 11pt; 
} 

/* 🏃 螞蟻線動畫邊框容器 */
.rememberdomain { 
    margin: 5px; 
    display: block; 
    border: .5em solid transparent; 
    background: linear-gradient(#fff, #fff) padding-box, 
                repeating-linear-gradient(-45deg, #405c70, #405c70 12.5%, transparent 0, transparent 25%, #333 0, #333 37.5%, transparent 0, transparent 50%) 0 / 1.5em 1.5em; 
    -webkit-animation: ants 12s linear infinite; 
    animation: ants 12s linear infinite; 
    box-shadow: 0 0 5px rgba(0,0,0,0.15); 
    border-radius: 5px; 
} 

/* 補全螞蟻線動畫定義 */
@-webkit-keyframes ants {
    from { background-position: 0 0; }
    to { background-position: 1.5em 1.5em; }
}
@keyframes ants {
    from { background-position: 0 0; }
    to { background-position: 1.5em 1.5em; }
}

.rememberdomain table { width: 100%; } 

.rememberdomain td { border: 1px solid #ededed; padding: 6px; } 

.box table { border-collapse: collapse; width: 100%; box-sizing: border-box; } 

.box table td { border-collapse: collapse; } 

.swiper-nav { text-align: center; color: #fff; font-weight: bold; } 

.swiper-nav .swiper-slide { 
    width: 110px !important; 
    padding: 5px 0; 
    color: #303133; 
    font-size: 13px; 
    font-weight: bold; 
    border-radius: 2px; 
    border-right: 1px solid #ededed; 
} 

/* 🔵 導航激活狀態：改為深藍灰 */
.swiper-nav .active-nav { background: #405c70; color: #fff; } 

/* 📌 大標題欄：深藍灰漸變與暗色陰影 */
.tit { 
    font-size: 18px !important; 
    color: #fff !important; 
    line-height: 42px !important; 
    box-shadow: 0 10px 14px -7px rgba(64, 92, 112, 0.4); 
    text-shadow: 0 1px 0 #20303b; 
    background: linear-gradient(#5a7b94, #405c70) !important; 
    font-weight: bold; 
    text-align: center; 
} 

/* 🔍 各類邊框顏色（優化為藍灰色系與中性色搭配） */
.border1 td { border: 1px solid #405c70; padding: 7px 0; } /* 深藍灰 */
.border2 td { border: 1px solid #718da0; padding: 7px 0; } /* 淺藍灰 */
.border3 td { border: 1px solid #e1e7ec; padding: 7px 0; } /* 極淺藍灰 */
.border4 td { border: 1px solid #ddd7d7; padding: 7px 0; } /* 灰色 */

.border1 td p, .border2 td p, .border3 td p, .border4 td p { margin: 0; } 

.titsle { font-size: 15px; font-weight: bold; } 

/* 🔳 底部網格按鈕 */
.zhzl { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    box-sizing: border-box; 
    margin-top: 10px; 
    margin-bottom: 20px; 
} 

.zhzl .item { width: 25%; box-sizing: border-box; padding: 2px 3px; } 

.zhzl a { 
    line-height: 40px; 
    text-align: center; 
    border: 1px solid #ccc; 
    background: #fff; 
    border-radius: 5px; 
    display: block; 
    color: #333; 
    cursor: pointer; 
    transition: all 0.3s;
} 

/* 鼠標懸停及移動端點擊效果 */
.zhzl a:hover, .zhzl a:active {
    border-color: #405c70;
    color: #405c70;
    background: rgba(64, 92, 112, 0.02);
}

/* 📱 移動端自適應 */
@media screen and (max-width: 710px) { 
    .menuicon img { width: 66px; } 
    .menuicon { padding: 10px 0; } 
    .swiper-nav .swiper-slide { width: 90px !important; } 
} 

@media screen and (max-width: 500px) { 
    .menuicon img { width: 62px; } 
    .swiper-nav .swiper-slide { width: 90px !important; } 
    .zhzl .item { width: 50%; } 
} 

@media screen and (max-width: 400px) { 
    .menuicon img { width: 58px; } 
    .swiper-nav .swiper-slide { width: 90px !important; } 
}