@charset "utf-8";
/* 宣告變數 */
:root{
    --mwidth: 150px;            /* 一般月份區塊寬度 */
    --mheight: 150px;           /* 一般月份區塊高度 */
    --mcolorb: #0057b7;         /* 藍色 */
    --mcolory: #ffd700;         /* 黃色 */
}
*{
    padding: 0;
    margin: 0 auto;  /*設定這個會導致flex的justify-content錯誤*/
    list-style: none;
    text-decoration: none;
    /* box-sizing: border-box; */
} 
/* 設定為100%，最外層div方能使用(固定)100%頁面 */
html, body{
    width: 100%;
    height: 100%; 
    /* margin: 0 auto;
    padding: 0; */
    background: url("../images/maindiv_pg.jpg") center center fixed no-repeat;      /*設定背景圖片的呈現方式*/
    background-size: cover;   設定背景圖片的填滿方式
}


/* 最外層div設定為flex 垂直排列 */
.outer_layer{
    position: absolute;              /* 設定以下定位，能讓此div外圍多餘的空白消失 */
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    overflow:scroll;             /* 圖片太大導致超出螢幕範圍時，讓最外層產生scrollbar，以免因畫面破錶導致outler_layer無法覆蓋全部螢幕 */

    display: flex;
    flex-direction: column;
    background:rgba(255,255,255,0.6);           /* 當背景遮罩 */
}

.banner_div, .title_div, .main_content{
    width: 70%;
}
/* 設置最上及最下區塊的高度 */
.banner_div{
    position: relative;            /*  為了讓admin_div定位用 */
    height: 150px;
    /* line-height: 150px;           會影響裏面的admin_div區塊裏面的圖片垂直排列*/
    color: #ffffff;
    /* line-height: 180px; */
    display:flex;
    /* justify-content: flex-start; */
    align-items: center;
    /* text-align: left; */
    /* display: flex; */
    
    /* width: 70%; */
}
.banner_div h1{
    font-size: 3.5em;
    margin-left: 0px;            /* 讓標題靠左，不然會置中(不知道原因) */
    /* border-radius: 10px; */
    color: #000;
    /* background: rgb(0,0,0,0.5); */
}

.banner_div .admin_div{
    position: absolute; 
    /* line-height: 30px; */
    /* height: 50px; */
    top: 10px;
    right: -30px;
    display: flex;
    flex-direction: column;
}
.banner_div .admin_div a{
    display:inline-block;

}
.banner_div .admin_div img{
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-bottom: 5px;
    border:2px solid var(--mcolorb);
    background: var(--mcolory);
    border-radius: 100px;;
    /* display: inline-block; */
    transition: 0.4s;
}
.banner_div .admin_div img:hover{
    border:2px solid var(--mcolory);
    background: var(--mcolorb);
    transform: scale(1.4);
}

.footer{
    width: 100%;
    height: 60px;
    /* line-height: 60px; */
    color: #fff;
    font-size: 0.9em;
    background: rgba(100, 100, 100, 0.7);
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;

    /* text-align: center; */
}
.footer .historylink {
    width: 80%;
    /* border: 2px solid red; */
    font-size: 1.4em;
}
.footer a{
    /* display: inline-block; */
    padding: 0 5px;
    color: #fff;
}
.footer a:hover{
    color: var(--mcolorb);
    font-weight: 900;
    font-size: 1.2em;
    /* background: var(--mcolorb); */
    border: 1px solid var(--mcolorb);
    border-radius: 5px;
    padding: 5px;
}

.title_div{
    border-bottom: 3px solid #ccc;
}
.title_div h2{
    margin: 0;
    padding: 0 10px;
    display: inline-block;           /* 父層title_dive有設定width，所以需再加此一設定，不然下面的內容會作用在整個父層 */
    /* border: 2px solid #ccc; */
    /* border-bottom: 0px; */
    border-radius: 10px 10px 0 0 ;
    color: #fff;
    font-size: 2.5em;
    background: rgb(0,0,255,0.8);
}

/* 月份、公告訊息區塊 */
.main_content{
    flex: 1;            /* 因應上層(outer_layer)display:flex設定，扣除最上最下區塊的高度後，與bulletin_div分享使用剩餘的所有區塊高度所佔比例 */
    /* overflow: auto;     自動出現捲軸 */
    display: flex;
    /* justify-content: center; */
    /* flex-direction: column; */
    align-items: center; 
    /* width: 70%; */
    /* padding: 0 20px; */
    /* border: 2px solid #ccc;  */
    /* border-radius: 10px; */
    text-align: center;
    /* background: #000; */
    /* background:rgba(0,0,0,0.3); */

}
/* 月份區塊 */
.month_menu{
    flex: 5;
    /* border: 1px solid rgb(0,0,255); */
    
}
/* 公告訊息區塊 */
.bulletin_div{
    flex: 2;                 /*與main_content div分享使用剩餘的所有區塊高度所佔比例*/
    height: 90%;
    /* width: 70%; */
    text-align: center;

    /*overflow: auto;      自動出現捲軸 */
    margin: 5px 0;;
        /*padding: 0 0 60px 0;       規範iframe的下邊界，不然下面會破格(iframe height 100%) */
    border: 4px solid #ccc;  
    border-radius: 10px;
    text-align: center;
    /* background: #000; */
    background:rgba(250,250,0,0.4)
}
.bulletin_div .title{
    font-size: 1.5em;
    margin: 1px 1px 5px 1px;
    padding: 10px 0;
    color: #fff;
    border-radius: 10px 10px 0 0;
    background: #0057b7;;
}
    
    
/* 在iframe的上一級中使用如div包含iframe，則樣式給div使用，勿直接给iframe使用。 */

.bulletin_div iframe{
    border: 0;
    height: 90%;         /* 100%會破表 */
    width: 100%; 
    /*overflow-y: hidden;	無作用*/
}

.month_menu li{
    display: inline-block;
    font-size: 4.5em;
    font-weight: bolder;        /* 一般字型僅提供lighter(1-500)及bolder(600-900) */
    line-height: var(--mheight);             /*搭配 li 裏面 div 的 height, 即可達成 元素 垂直置中的目的 */
    margin: 10px;
    color: var(--mcolorb);
    /* border: 1px solid rgb(255,0,0); */
    /* text-align: left; */
}
/* 當月月份區塊、文字大小，顏色通用變數值設定 */
.month_menu .cmli{
    --mwidth: 180px; 
    --mheight: 180px; 
    --mcolorb: #ffd700; 
    --mcolory: #0057b7; 
    font-size: 6.5em;
}
.month_list{
    position: relative;                             /* 讓內含的.month及.content區塊做定位用 */
    width: var(--mwidth);
    height: var(--mheight);
    border-radius: var(--mwidth);
    /* text-align: center; */
    border:4px solid var(--mcolorb);
    background-color: var(--mcolory);
    /* text-align: center; */
}
/* 月份 span 區塊*/
.month_list .month{
    position: absolute;
    width: var(--mwidth);
    height: var(--mheight);
    /* border-radius: 100%; */
    text-align: center;
    
}
.month_list .month_bg{
    position: absolute;
    width: var(--mwidth);
    height: var(--mheight);
    /* border: 1px solid #333; */
    display:flex;            /* 讓裏面的圖片水平、垂直置中 */
    justify-content: center;
    align-items: center;
}
.month_list .month_bg img{
    width: calc(var(--mwidth)/1.5);
    opacity: 0.4;        /* 圖片透明度 */
    /* line-height: var(--mheight); */
    /* display: block; */
    
    /*margin-top: 10px;            透過margin-top及margin-bottom調整與文字(月份)的上下距離 */
    /* margin-bottom: -30px; */
    /* border: 1px solid #333; */
}
.month_list .month, .content{
    position: absolute;
} 
/* 菜單、明細區塊，預設隱藏 */
.month_list .content{
    display: none;

    /* text-align: center; */
}
/* 菜單、明細a之共同設定 */
.month_list .content a{
    font-size: 24px;
    color: var(--mcolorb);
    /* display: block; */
    width: var(--mwidth);
    height: calc(var(--mheight) * 0.5);
    /* padding: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.month_list .content a.menu{   /*  上半圓 */
    border-radius: var(--mwidth) var(--mwidth) 0 0;
}
.month_list .content a.detail{   /*  下半圓 */
    border-radius: 0 0 var(--mwidth) var(--mwidth);
}
/* month_list(上層)移過，content(下層)顯示，不用選擇器，直接作用該區塊 */
.month_list:hover .content{
    display: block;       
}
/* 同層span的月份數字透明度 */
.month_list:hover .month{
    opacity: 0.5;       
}
.month_menu .content a:hover{
    background-color: var(--mcolorb);
    color: var(--mcolory);
}

/* 媒體查詢RWD功能 */
/* 寬度小於768px時，適用此格式 */
@media screen and (max-width: 768px){

    :root{
        --mwidth: 60px; 
        --mheight: 60px; 
    }
    .banner_div, .title_div, .main_content{
        width: 90vw;
    }
    .banner_div h1{
        font-size: 2em;
    }
    .banner_div .admin_div{
        right: -10px;
    }
    .banner_div .admin_div img{
        width: 15px;
        height: 15px;
    }
    .title_div h2{
        font-size: 1.5em;
    }
    .main_content{
        /* display: flex; */
        flex-direction: column;
        padding: 10px 0;
    }
    .main_content .month_menu{
        /* flex: 3; */
    }
    .month_menu li{
        font-size: 2.5em;
    }
    /* 當月月份區塊、文字大小，顏色通用變數值設定 */
    .month_menu .cmli{
        --mwidth: 80px; 
        --mheight: 80px; 
        font-size: 4em;
    }
    .main_content .bulletin_div{
        width: 100%;
        /* margin: 0; */
    }
    .main_content .bulletin_div iframe{
        height: 70%;         /* 100%會破表 */
    }
    /* 菜單、明細a之共同設定 */
    .month_list .content a{
        font-size: 12px;
    }
}   /* form @media 768px */  


/* 寬度小於1024px，大於等於768px時，適用此格式 */
@media screen and (max-width: 1024px) and (min-width: 768px){

    :root{
        --mwidth: 120px; 
        --mheight: 120px; 
    }
    .banner_div, .title_div, .main_content{
        width: 90vw;
    }
    .banner_div .admin_div img{
        width: 20px;
        height: 20px;
    }
    .main_content{
        /* display: flex; */
        flex-direction: column;
        padding: 20px 0;
    }
    .main_content .month_menu{
        /* flex: 3; */
    }
    .month_menu li{
        font-size: 3.8em;
    }
    /* 當月月份區塊、文字大小，顏色通用變數值設定 */
    .month_menu .cmli{
        --mwidth: 150px; 
        --mheight: 150px; 
        font-size: 5.5em;
    }
    .main_content .bulletin_div{
        width: 100%;
        /* margin: 0; */
    }
    .main_content .bulletin_div iframe{
        height: 70%;         /* 100%會破表 */
    }
    /* 菜單、明細a之共同設定 */
    .month_list .content a{
        font-size: 20px;
    }
}   /* form @media 768px */