@charset "utf-8";
/* CSS Document */
.wrapper{ margin-top:110px; }
@media screen and ( max-width: 767px){
    .wrapper{ margin-top:70px; }
}

/*錨點補正*/
.archor:target{ scroll-margin-top: 110px; }
@media screen and ( max-width: 767px){
    .archor:target{ scroll-margin-top: 70px; }
}

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{
    /* padding: 0; */
    /* margin: 0; */
    /* font-family: 'Noto Sans TC', sans-serif; */
    /* font-weight: 500; */
    /* font-size: 16px; */
    /* color: #333; */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
a{ text-decoration:none; }
*:focus{ outline:none; }
::selection{ background-color:#777; color:#fff;}
sup{ font-size: smaller; }

html, body{ padding: 0; margin: 0; }

.header *,
.footer *{ padding: 0; margin: 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 500; font-size:1rem; color: #333; }

.header{ box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; }

.header{ height:110px; background:#fff; position:fixed; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; z-index:110; }
.header .logo{ margin:0 0 0 30px; display:block; width:302px; height:66px; background-image:url(../images/layout/logo.png); background-repeat:no-repeat; }
.header .rightmenu{ padding:0 30px 0 0; height:110px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; flex:1; }
.header .rightmenu .fun_1{ padding:0 0 8px 0; text-align:right; display:flex; grid-gap:10px; align-items: center; }
.header .rightmenu .fun_2{ padding:8px 0 0 0; font-size:0; width:100%; display:flex; justify-content: flex-end; }
.header .rightmenu .btn-a{ display:inline-block; vertical-align: middle; line-height:25px; padding:0 10px; color:#fff; background:#0064a9; font-size:0.875rem; font-weight:bold; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; margin-left:5px; }

.header .rightmenu .mlink{ margin-right:30px; padding-bottom:20px; display:inline-block; vertical-align:middle; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; position:relative; height:44px; }
.header .rightmenu .mlink:last-child{ margin-right:0; }
.header .rightmenu .mlink .mdu{ display:none; position:absolute; top:44px; left:0%; margin:auto; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); padding:0; background:#fff; box-shadow: 0 10px 10px -3px rgba(0,0,0,0.1); }
.header .rightmenu .mlink .mdu .mlist{ display:block; font-size:0.875rem; white-space:nowrap; padding:10px 15px; transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; }
.header .rightmenu .menugrids{ white-space:nowrap; }
.header .rightmenu span.menugrids{ cursor: default; }
.header .rightmenu .lon_1{ font-size:0; }
.header .rightmenu .lon_2{ font-size:0; }
.header .rightmenu .lon_2 .txts{ /*display:inline-block;*/ vertical-align:middle; padding:0 10px 0 0; font-size:1rem; color:#333; }
.header .rightmenu .lon_2 .logout{ display:inline-block; vertical-align:middle; line-height:25px; padding:0 10px; background:#ef6565; font-size:0.875rem; color:#fff; }

.header .menubtn{ display:none; }


.lonFlex{ gap: 0px; display: inline-flex; flex-direction: row; }
.lonTitle{ padding: 0 15px 0 0; position: relative; }
.lonTitle::after{ width: 1px; height: 75%; border-right: 0px solid #000000; content: "|"; position: absolute; top: 50%; right: 7px; transform: translate( -50%, -50% ); }
.lonTitle:last-child{ padding: 0; }
.lonTitle:last-child:after{ display: none; }

/* 列表顏色 */
.text-red { color: #ed3a3a; }
.text-green { color: #32D15F; }
.text-blue { color: #3949ED; }
.text-dirt { color: #985757; }
.text-gray { color: #aaaaaa; }

.bgColorGray{ background-color: rgba( 206, 189, 170, 0.15 ); background-image: none !important; }
.bgColorWhite{ background-color: rgba( 255, 255, 255, 0.75 ); background-image: none !important; }
.zonefrom.bgColorWhite{ padding: 20px 20px 0 20px; margin: 0; border: none; background-color: rgba( 255, 255, 255, 1 ); }

.button_block.search{ padding: 10px 0 40px 0; gap: 5px; width: 100%; display: inline-flex; flex-wrap: wrap; justify-content: center; }
.button_block.search>*{ margin: 0 !important; }
@media screen and ( min-width: 767px) {
    .button_block.search>*{ max-width: calc( 33.33% - 4px ); }
}

.w-full{ width: 100%; }
.w-100px{ width: 100px; }

.min-w-100px{ min-width: 100px; }

.block{ display: block; }
.inline-block{ display: inline-block; }

.table{ display: table; }
.table-row{ display: table-row; }
.table-cell{ display: table-cell; vertical-align: middle; }
.table-header-group{ display: table-header-group; }
.table-row-group{ display: table-row-group; }

.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

/* 列表 預設反映 */
.table-row:hover{ background: #fff7ee; }
.cell-box{ display: inline-flex; }
.cell-box>*{ display: inline-flex; }

/* 課綱 首頁 階層 */
.marGroup{  }
.marGroup .marbox{ padding: 30px 15px; overflow: auto; }
.marGroup .pageTitle{ font-size: 1.25rem; display: inline-flex; }
.marGroup .pageTitle span{ margin-right: 10px; }
.marGroup .pageTitle .mores{ width: auto; margin: 5px 0 0; padding: 0 10px; position: relative; }

/* 課綱列表樣式 */
.tableStyle1{ margin: 10px 0; }
.tableStyle1 .table-header-group .table-row{ background: #cebdab; color: #fff; }
.tableStyle1 .table-header-group .table-cell{ padding: 10px 20px; }
.tableStyle1 .table-header-group .table-cell *{ word-break: keep-all; }

.tableStyle1 .table-cell{ padding: 10px; border-bottom: 1px solid #ccc; }
.tableStyle1 .table-cell>*{ line-height: 1.5rem; word-break: keep-all; }

.tableStyle1{  }

.courseFlex{ text-align: left; display: inline-flex; flex-direction: column; width: 100%; }
.courseFlex span{line-height: 26px;}

@media screen and ( max-width: 1200px) {
    /*頁碼*/
    .page_number{ text-align:center; padding-bottom:30px; position:relative; font-size:0; }
    .page_number .quantity{ text-align:center; top:auto; bottom:0; left:0; right:0; margin:auto; }
    .page_number .btn{ height:30px; line-height:30px; }
    .page_number .btn .fa{ line-height:24px; }
}



.footer{ background:#333; padding:40px 0 20px 0; width: 100%; gap: 30px; display: inline-flex; flex-direction: column; }
.footer .mar{ padding:0 30px; max-width:1280px; margin:auto; width: 100%; gap: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; }
.footer .mar .leftbox{ width:280px; }
.footer .mar .rightbox{ flex:1; }
.footer .mar .flogo{ display:block; width:280px; height:62px; background-image:url(../images/layout/f_logo.png); background-repeat: no-repeat; background-position:center; margin:0 0 20px 0; background-size:280px; }
.footer .mar .ftxt{ color:#fff; font-size:0.875rem; }
.footer .mar .ftxt a{ display:inline-block; color:#fff; font-size:0.875rem;}
.footer .mar .fmenus{ margin:0 0 20px 0; text-align:right; }
.footer .mar .fmenus .grids{ font-size:1rem; color:#fff; margin-left:15px; display:inline-block; vertical-align:middle; }
.footer .mar .fListItem{ line-height: 1.25rem; width: 50%; display:flex; flex-direction: column; }
.footer .mar .flist{ display:flex; justify-content:flex-end; }
.footer .mar .lTitle{ font-size:0.875rem; color:#fff; }
.footer .mar .lgrids{ display:inline-block; vertical-align:middle; font-size:0.875rem; color:#fff; }
.footer .mar .lgrids a{ color:#fff; }

.footer .fAddress{ width: 100%; }

.footer .fCopyRight{ width: 100%; padding: 0 15px; text-align: center; display: inline-flex; justify-content: center; }
.footer .fCopyRight span{ color:#fff; font-size:0.875rem; }

.footer *::selection{ background-color:#cebdab; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
.header .rightmenu .btn-a:hover{ opacity: 0.8; }
.header .rightmenu .menugrids:hover{ text-decoration:underline; }
.header .rightmenu .mlink:hover .mdu{ display:block; }
.header .rightmenu .mlink .mdu .mlist:hover{ color:#fff; background:#777; }

.footer .mar .fmenus .grids:hover{ text-decoration:underline; }

}

/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1100px){
.header .menubtn{ display:block; position:absolute; right:30px; width:30px; height:26px; cursor:pointer; }
.header .menubtn span{ display:block; background:#333; width:100%; height:2px; margin:10px 0; }
.header .menubtn:before{ content:""; display:block; background:#333; width:100%; height:2px; }
.header .menubtn:after{ content:""; display:block; background:#333; width:100%; height:2px; }
.header .rightmenu{ display:none; position: absolute; top: 110px; background: #f5f5f5; width: 100%; padding:0 20px; }
.header .rightmenu .fun_1{ padding-top:24px; justify-content: flex-end; }
.header .rightmenu .mlink .mdu{ background:#f5f5f5; }

.footer{ padding:30px 0 20px; }
.footer .mar .rightbox{ display:flex; justify-content:flex-end; flex-wrap:wrap; }
.footer .mar .fmenus{ width:500px; margin: 0 0 25px 0; }
.footer .mar .lTitle{ padding: 0 0 10px 0; }
.footer .mar .lgrids{ display:block; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
    .header .logo{ width:238px; height:52px; background-size:238px; }
    .header .rightmenu .mlink:hover .mdu{ display:block; }
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
    .header{ height:70px; }
    .header .logo{ width:151px; height:33px; background-size:151px; margin: 0 0 0 20px; }
    .header .menubtn{ right: 20px; width: 30px; height: 19px; }
    .header .menubtn:before{ height:1px; }
    .header .menubtn:after{ height:1px; }
    .header .menubtn span{ height:1px; margin:8px 0; }
    .header .rightmenu{ top:70px; padding:20px; height:auto; max-height:calc( 100dvh - 70px ); overflow:auto; }
    .header .rightmenu .fun_1{ text-align:center; padding:0 0 15px 0; flex-direction: column; }
    .header .rightmenu .fun_2{ display:block; }
    .header .rightmenu .menugrids{  display:block; text-align: left; }
    .header .rightmenu .mlink{ margin:0; display:block; margin: 0 0 10px 0; border-bottom: 1px solid #dadada; padding: 0 0 5px 0; height:auto; }

    .header .rightmenu .mlink .mdu{ display:block; position:static; box-shadow:none; background:none; transform:none; -webkit-transform:none; -moz-transform:none; }
    .header .rightmenu .mlink .mdu .mlist{ padding:7px 0 7px 15px; position:relative; }
    .header .rightmenu .mlink .mdu .mlist:before{ content:""; display:block; width:0; height:0; border-color:transparent transparent transparent #cebdab; border-style:solid; border-width:4px 0 4px 7px; position:absolute; left:0; top:0; bottom:0; margin:auto; }
    .header .rightmenu .mlink .mdu .mlist:last-child{ margin:0; }

    .footer{ margin:0; }
    .footer .mar{ padding:0 15px; }
    .footer .mar .leftbox{ width:100%; padding:0 0 30px 0; }
    .footer .mar .rightbox{ display:block; }
    .footer .mar .flogo{ margin: auto; }
    .footer .mar .fmenus{ width:auto; text-align: center; }
    .footer .mar .lTitle{ padding:0 0 5px 0; }
    .footer .mar .ftxt_2{ display:block; color:#fff; font-size:0.75rem; padding:25px 0 0 0; text-align:center; }
    .footer .mar .ftxt_2 a{ display:inline-block; color:#fff; font-size:0.75rem; }

    .footer .mar .fmenus .grids{ width: 32%; margin:0; text-align: left; font-size:0.875rem; line-height: 30px;}

    .footer{ gap: 20px; }
    .footer .mar .flist{ gap: 10px; flex-direction: column; }
    .footer .mar .fListItem{ width: 100%; }

}