@charset "UTF-8";
@import url(3rd/jquery.treeview.css);

.page{
    --page_p: 1rem;
    --menuTitle_f: 1.325rem;
    background: url("../img/block_bg.jpg") repeat;
}

.page .main-con{
    display: flex; flex-wrap: wrap; background: #ffffff;
}

.page section.main-con {
    --max_w: 90rem;
    transition: all .3s;
}

.page .aside, .page .con, .page div:not(.selectIcon){ position: relative; }

.page .accesskey:is( #l, #c ){ 
    top: 0px; left: 0px;
}

/* 左側選單 */
.page .aside{
    width: var( --w_1-3 ); padding: var( --page_p ); position: relative; transition: all 0.3s;
}

.page .aside .nav {
    /*position: sticky; top: 0; overflow-y: auto; */ z-index: 5; height: auto; padding: 0 .25rem .25rem .25rem;
}

.page .aside .nav li {
    background-color: #f9fbfa; line-height: 2rem;
}

.page .aside .nav li.title {
    display: flex; align-items: center; gap: .5rem; padding: calc( var( --page_p ) * .75 ) calc( var( --page_p ) * 1.5 ); font-size: var( --menuTitle_f ); color: var( --color_myblack ); font-weight: bold; background: linear-gradient(to right, #fbb735, #f37832);
}


/* 右側內容 */
.page .con{
    --max_btn: 20rem;
    width: var( --w_2-3 ); padding: var( --page_p ); font-size: var( --fontSize ); display: flex; flex-direction: column; gap: 1rem; transition: all 0.3s;
}

.page .print {
    width: fit-content; background: var( --color_brand4 ); margin-left: auto; color: var( --color_myblack ); font-size: .95rem; padding: .25rem .5rem;
};

.page .title-block { padding: 0 0 .5rem 0; }

.page .contentGroup ul.text-block { margin: 1rem 0 !important; }

.page .subject-list.ng-scope { 
    display: grid; gap: 1rem; background-color: var( --color_white );
}

.page .subject-list {
    padding: .5rem; border: 1px dotted var( --color_brand3 ); border-radius: .5rem;
}

.page .h5 {
    display: grid; grid-template-columns: 1.5rem 1fr; align-items: center; gap: .5rem; font-size: 1.325rem; font-weight: bolder;
}
.h5.orange { color: #C24900; }

.page .subject-list .text-block.clearfix {
    display: flex; flex-direction: row-reverse; gap: 1rem; background: var( --color_brand6 ); border: 1px solid var( --color_mygray300 ); padding: .5rem;
}

.page .subject-list .text-block.clearfix .content {
    flex: 1; display: grid; gap: 1rem;
}

.page .subject-list .text-block.clearfix .content a:not(.btn) { text-decoration: underline; }

.page .subject-list .text-block.clearfix .times {
    display: flex; flex-direction: column; white-space: nowrap; color: var( --color_brand11 ); text-align: center;
}

.text-block.clearfix .times div {
    font-size: 1.3rem; font-weight: bold;
}

.page .about2-block .block:not(.ng-binding), .inputBox, .page .categoryBox {
    display: flex; align-items: center; gap: 1.5rem .5rem; padding: .5rem;
}

.page .inputBox, .page .keywordBox, .page .categoryBox {
    flex-wrap: wrap; padding: .5rem 0;
}
.page .categoryBox { gap: .5rem; }
.page .category { padding: .5rem 1rem; }

.page .keywordBox { 
    display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 11rem; max-width: clamp(16rem, 100%, 100%);
}

.page .subject-list .checkGroup {
    min-width: fit-content; flex: none;
}

.page .subject-list ul.tool {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .5rem;
}

.page .subject-list ul.tool li { border-bottom: none; }

.page .subject-list ul.tool li.date { margin-left: auto; }

.page .title{
    color: var( --color_error ); margin: 0;
}

.page .listBox .title{ text-align: center; }

.page ol li {
    list-style: decimal !important; margin-left: 2rem;
}

.page .about2-block .block:nth-of-type(odd) { flex-direction: row-reverse; }

.page .block .col-right, .page .block .col-left {
    width: fit-content; padding: 0; margin: 0;
}

.page .link-block, .page .video-block { 
    display: grid; gap: 1.5rem; grid-template-columns: repeat( 3, calc( ( 100% / 3 ) - 1rem ) ); justify-content: center; margin-top: 1rem;
}

.page .subject-block .pane {
    display: grid; gap: 2rem;
}

.page .center{
    display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0; margin: 1rem auto; flex-wrap: wrap;
}

.page .subject-block .center { margin-top: -1rem; }

.center > .btn {
    min-width: 10rem; display: flex !important; align-items: center; justify-content: center; gap: .5rem; color: var( --color_brand2 ); line-height: 1.5rem; 
}

.page .btn.clear { background: var( --color_mygray200 ); }

/* 網站地圖 */
.webImgBox .photo a{
    display: block; position: absolute; z-index: 2; background-color: rgba( 162, 223, 145, .7 ); padding: 0 .25rem; border-radius: 1rem; box-shadow: 0px 0px 16px 0px rgba( 162, 223, 145, 1 );
}
.webImgBox .photo a.a1-1, .webImgBox .photo a.a5-1{ top: 27%; left: 3.5%; }
.webImgBox .photo a.a1-2, .webImgBox .photo a.a5-2{ top: 47%; left: 71.5%; }
.webImgBox .photo a.a1-3, .webImgBox .photo a.a5-3{ top: 59.3%; left: 8.5%; }

.webImgBox .photo a.a2-1{ top: 20%; left: 15.5%; }

.webImgBox .photo a.a3-1{ top: 26%; left: 16.5%; }
.webImgBox .photo a.a3-2{ top: 54%; left: 15.5%; }

.webImgBox .photo a.a4-1{ top: 24.5%; left: 9.5%; }
.webImgBox .photo a.a4-2{ top: 53%; left: 6.5%; }

.webImgBox .photo a.a6-1{ top: 54%; left: 15.5%; }

.webImgBox .photo img{
    width: 100%; aspect-ratio: 1/1; z-index: 1; position: relative;
}

.page .link-block .solid {
    border-bottom: 50px solid #a9d148; margin-top: -2rem; z-index: 0;
}

.page .tltleBox {
    display: grid; gap: .5rem;
}

.page .date, .page .tool-btn-block .path, .page .tool-btn-block .passCount {
    width: fit-content; color: var( --color_myblack2 ); font-size: var( --sFont ); white-space: nowrap;
}

.page .tool-btn-block .passCount {
    font-size: var( ----fontSize ); font-weight: 900;
}

.defaultCSS {
    border: 1px solid var( --color_mygray300 ); padding: 1rem !important; line-height: 2rem !important;
}

.defaultCSS ul, ol {
    list-style:disc !important; display: block !important;
}


/* Nwws section 課程，套課，個人學習 list */
.page .title.clearfix { display: grid; }

.page .title.clearfix .title-block {
   align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap;
}

.page .title.clearfix .h5, .page .title.clearfix .tool-btn-block, .page .title.clearfix .processDetail {
    display: flex; align-items: center; gap: .5rem; white-space: nowrap;
}

.page .title-block > .date {
    width: 100%; display: flex; flex-wrap: wrap; font-size: 1rem; color: var( --color_myblack ); font-weight: 500; letter-spacing: .125rem;
}

.processDetail .btn { margin: .5rem .5rem .5rem auto; }

.page .title.clearfix .h5 ~ span {
    font-size: 1.325rem; font-weight: bolder; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.page .title.clearfix .tool-btn-block {
    flex-wrap: wrap; margin-left: auto;
}

.page .tool-btn-block .pop-text { display: none; }

.page .tool-btn-block a:hover .pop-text {
    width: fit-content; position: absolute; top: -1.625rem; display: block; border-radius: .5rem; overflow: hidden;  background-color: var( --color_white ); border: 1px solid var( --color_mygray400 ); font-size: .9rem; color: var( --color_myblack2 );
}

.page .btn.blue {
    background: linear-gradient( to bottom, #6ed8ff, #27c5ff ); color: #002d3d; border: 1px solid #0176a0;
}
.page .btn.purple {
    background: linear-gradient( to bottom, #dd9dfe, #d17bfe ); color: #410263; border: 1px solid #7102ae;
}
.page .btn.green {
    background: linear-gradient( to bottom, #75ddb9, #39ce9b ); color: #005739; border: 1px solid #017a50;
}
.page .btn.green .icon-print2{
    filter: brightness(0) saturate(100%) invert(26%) sepia(9%) saturate(6776%) hue-rotate(122deg) brightness(91%) contrast(101%);
}
.page .btn.red {
    background: linear-gradient( to bottom, #ff9ca3, #ff6c76 ); color: #340004; border: 1px solid #aa000f;
}
.page .btn .icon-print2{
    filter: brightness(0) saturate(100%) invert(26%) sepia(18%) saturate(5531%) hue-rotate(23deg) brightness(93%) contrast(103%);
}

.page .funBtn, .page .funTxtBtn {
    width: var( --btn_w_h ); border-radius: .25rem; padding: 0;
}

.page .funTxtBtn {
    min-width: fit-content; padding: 0 .5rem !important;
}

.page .list {
    display: grid; gap: 1rem; margin-bottom: 1rem;
}

.page .list li, .page .list li .title {
    display: flex; align-items: flex-start; border-bottom: none !important;
}

.page .list li .title {
    white-space: nowrap; align-items: center; font-weight: 700;
}
/* Nwws section 課程，套課，個人學習 list end */

/* 友站連結 */
#ShowList-RightMore, #ShowList-RformTitle{ 
    display: flex !important; align-items: center;
}

#ShowList-RformTitle{ flex-wrap: wrap; }

.ShowListBtnBox { 
    display: grid; gap: 1.5rem; grid-template-columns: repeat( 4, calc( ( 100% / 4 ) - 1rem ) ); justify-content: center;
}

.ShowListBtnBox a, .ShowListBtnBox img {
    border-radius: .25rem; overflow: hidden;
}

.ShowListBtnBox a {
    width: 100%; aspect-ratio: 300 / 150; display: flex; place-content: center;
    border: 1px solid var(--color_mygray300); background-color: var(--color_brand6);
}

#ShowList-RightMore span { color: var( --color_brand2 ) !important; }

@media only screen and (min-width: 1880px) {
    .page section.main-con {
        --max_w: 100rem;
    }
}

@media only screen and (max-width: 1180px) {
    .page .link-block, .page .video-block{ 
        grid-template-columns: repeat( 2, calc( ( 100% / 2 ) - 1rem ) );
    }

    .ShowListBtnBox { 
        grid-template-columns: repeat( 3, calc( ( 100% / 3 ) - 1rem ) );
    }
}

@media only screen and (max-width: 1024px) {
    .page .con{ 
        --w_2-3: 100%;
        --w_1-3: 100%;
    }
    .page .aside{ display: none; }
}

@media only screen and (max-width: 640px) {
    .main{
        --container_p: .5rem;
    }

    .page .con { 
        padding: var( --page_p ) calc( var( --page_p ) * .5 ); 
    }

    .page .about2-block .block{ flex-direction: column !important; }

    .page .link-block, .page .video-block, .ShowListBtnBoxc { 
        grid-template-columns: repeat( 1, calc( 100% - .5rem ) );
    }

    .ShowListBtnBox { 
        grid-template-columns: repeat( 2, calc( ( 100% / 2 ) - 1rem ) );
    }

    .page .subject-list .text-block.clearfix {
        display: flex; flex-direction: column;
    }

    .page .subject-list .text-block.clearfix .times {
        flex-direction: row; justify-content: end;
    }

    .CourseSummary { padding: 0 0 0 1.5rem; }

    .page .list li { flex-flow: row wrap; }
}

@media only screen and (max-width: 576px) {
    .page .title.clearfix .title-block { flex-flow: row wrap; }

    .ProcessDetail .btn { margin: auto; }
}

@media only screen and (max-width: 480px) {
    .page .con{ 
        --max_btn: 100%;
    }

    .ShowListBtnBox { 
        grid-template-columns: repeat( 1, calc( ( 100% / 1 ) - .5rem ) );
    }
}