@import url("../../icon_new/css/all.min.css");
@import url("../../File/css/menu_new.css?v0705");

:root {
    --white1:#FFF;
    --gray1: #efefef;
    --blue1: #4A5C88;
    --purple1: #B24F9F;
    --orange1: #F98919;
    --green1: #3D9593;
}


html,body,div,span,applet,object,iframe,header,h1,h2,h3,h4,h5,h6,blockquote,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead,figure,figcaption,menu{margin:0;padding:0;border:0;outline:0;font-size:100%;line-height:1.5em}
figure,figcaption{margin:0;padding:0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
ul,li{margin:0;padding:0;list-style:none}
*, *::before, *::after{box-sizing:inherit}
body{-webkit-text-size-adjust:100%;}
a{ text-decoration:underline;transition:all 0.3s linear;color:var(--purple1); }
[class*="grid"] {display: grid;}
[class*="flex"] {display: flex;}
[class*="flex-wrap"]{flex-wrap: wrap;}
[class*="justify-around"]{justify-content: space-around;}
[class*="justify-between"]{justify-content: space-between;}
[class*="justify-between"]{justify-content: space-between;}
[class*="pc-br"]{display:block}
article .bgcolor0 {background: url("../images/1301021_bg.jpg") center top / cover;margin-bottom: -0.8rem;overflow: hidden;}
article .bgcolor1 {background: linear-gradient(to bottom, #E27FB0 0%, #F4A377 50%, #FFE2F8 100%);}
article .bgcolor2 {}
article .bgcolor3 {}
article .bgcolor4 {}
article .bgcolor5 {}
article .bgcolor6 {}
#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth,#channel_master{padding: 1.5rem 1rem;font-family: 'Noto Sans TC', sans-serif;}
#BodyContentNavigator{padding-top: 1.5rem;}
#BodyContentNavigator a{color: black;}

/*錨點*/
.bar { width: 128px; height: auto; padding: 1rem; position: fixed; top: 36%; right: 0; z-index: 5; background-color: rgb(255 218 55 / 70%); border-radius: 30px 0 0 30px; font-size: 1.2rem; text-align: center; display: flex; flex-wrap: wrap; justify-content: center;}
.bar a{color: #000;text-decoration: none;border-bottom: dotted 2px;transition: .3s ease-in;}
.bar a:hover{background: var(--green1);color: white;border-bottom:0;}
.bar li:hover {transform: translateX(5%);}
.bar ul{display: flex;flex-wrap: wrap;}
.bar ul li{margin: .2rem 0 .2rem 1.5rem;list-style: disc;}
.bar img{max-width: 100%;vertical-align: bottom;}

/* 主圖 */
#Master_title{font-size: 2rem;text-align: center;}
picture img { max-width: 100%;height: auto; }

/* 主頁 */
.Vuecontainer {margin: 1.5rem 0;}
.branch-menu {width: 100%;justify-content: space-between;overflow: hidden;}
.branch-menu a{
    cursor: pointer;text-align: center;padding: 1rem 0rem;
    border-right: none;background-color: #f1f1f199;
    width: calc(99%/3);transition: background-color 0.2s;
    font-size: 1.6rem;transform: translateY(10px);border-radius: 30px 30px 0 0;
    transition: .3s ease-in;
}
.branch-menu a:last-child {border-right: 1px solid #ccc;}
.branch-menu a:hover {background-color: #f1f1f1cc; }
.branch-menu a.active {
    background-color: #fff;color: #484848; border-bottom: 2px solid #fff;
    cursor: default;color: var(--blue1);
    font-weight: bold;font-size: 1.8rem;transform: translateY(2px);
    text-decoration: none;padding: .8rem 0 0;
}
.branch-menu a br { display: none; }
.tabVuecontent { 
    padding: 2rem;border-radius:0 0 30px 30px;
    background: white;
}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}

.blog-container .date{margin-left: 1rem;color:#008287;font-size: 1.2rem;}
.blog-container .badge { margin-bottom: 0; margin-left: 1rem; padding: 2px 8px; border-radius: 3px; font-size: 15px; font-weight: 700; color: #f8f8f8; background-color: #ff0000; }
.blog-title{font-size: 2rem;border-left: #ff9c9c solid 5px;padding-left: 1rem;}
.blog-content{font-size: 1.3rem;margin: 1.5rem 0;text-align: justify;}
.extended-quiz,.recent-articles{border-top: #dedede solid 2px;padding:1rem 0;}
.extended-title,.recent-title{font-size: 1.5rem;margin-bottom: .5rem;}
.extended-topic li,.recent-chapter li { width: calc( 100%/3 - 10px);list-style-type: disc; list-style-position: inside; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 1.2rem;margin: .5rem .5rem .5rem 0;}
.blog-btn div{background-color: var(--green1);padding: .5rem 1.5rem;border-radius: 25px;}
.blog-btn a{color: #FFF;text-decoration: none;}

/*心理詞解資料庫*/
.database-box{background-color: white;border-radius: 25px;padding: 2rem 1rem;}
.database_box_detail { font-size: 1.2rem; }
.database-title{text-align: center;font-size: 2rem;color: var(--green1);}
.database-title span{color:#ff0000;}
.database-directions{text-align: center;margin: .5rem auto;font-size: 1.3rem;}
.database-th{display: flex;margin: 1.5rem auto 0.5rem;}
.database-th div{width: 50%;text-align: center;}
.database-th~div>div { margin: .3rem auto; }
#dic_menu ul {display: flex;justify-content: space-around;border: var(--orange1) dotted 1px;padding: .2rem 0;margin-top: 1rem;}
#dic_menu ul a {text-decoration: none;}
#dic_menu ul a:where(:hover, :active, :focus) { color: var(--orange);font-weight: bold; }
.dic_box{display: flex;justify-content: space-around;}
.dic_content1,.dic_content2{width: 50%;margin: 0 2rem;}
.dic_box:nth-child(even) .dic_content1 a,.dic_box:nth-child(even) .dic_content2 a{color: #de7205;}
.AjPageBox{text-align: center;margin-top: 1.5rem;}
.AjPages { letter-spacing: 0.1rem; }

.AjPages span {	background: #39739d ;border-radius: 2px; color: #ffffff;display: inline-block;min-width: 1.5em;text-align:center;}
.AjPages a{	border: 1px solid transparent;border-radius: 2px;box-sizing: border-box;color: #666;cursor: pointer; display: inline-block;min-width: 1.5em;text-align:center;text-decoration: none;}
.AjPages a:hover {background-color:#333;color:#FFF;}

/* 搜尋 */
/* .database-box form { display: flex; justify-content: flex-end; padding-right: 1rem;} */
.database-box input.inp_01 { border: none; border-bottom: 1px solid rgb(207, 207, 207); padding: 8px 1em; font-size: 1rem; margin-right: .5rem;}
.database-box input[type="submit"]  {  background-color: #e1ecf4; border-radius: 25px; border: 1px solid #7aa7c7; box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset; box-sizing: border-box; color: #39739d; cursor: pointer; display: inline-block; font-size: .8rem; font-weight: 400; line-height: 1.15385; margin: 0; outline: none; padding: 8px 1em; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; white-space: nowrap;}
.database-box input[type="submit"]:hover,.database input[type="submit"]:focus { background-color: #b3d3ea; color: #2c5777;}
.database-box input[type="submit"]:focus { box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);}
.database-box input[type="submit"]:active { background-color: #a0c7e4; box-shadow: none; color: #2c5777;}


/* 歷期 */
#Journalperiod {text-align: left;background: white;padding: 2% 1%;border-radius: 10px;color: #000;}
#Journalperiod>div { margin: 0 4rem; }
#Journalperiod a {color: var(--purple1);}
.pages {text-align: center;margin: 3% 0 0;font-size: 1.4rem; }
.journal-pic {width: 16%;}
.journal-pic img {margin: auto;}
.journal-cont {width: 80%;}
#journalitemlist ul {margin: 1rem auto;}
#journalitemlist ul li {list-style-type: decimal;line-height: 2.25;margin-left:1rem;}
#journalitemlist .journalitemlist_spacing{margin: 1rem 0;}
#resultlist tr th {background-color: #30bbc5;color: white;font-size: 1.25rem;}
#resultlist tr td {background-color: white;border-bottom: 1px dotted #b3b7bb;padding: 0.25rem 0.5rem;}
.pages select {border: 1px solid;}
.result_count span {color: white;background-color: #cb4daa;border: solid 2px #9d2f7e;padding: 0.25rem 0.5rem;border-radius: 0.5rem 0.5rem 0 0;display: inline-block;}

/* detail */

.columnsDetail_tableRow {width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
.columnsDetail_tableth {width: 10%;display: table-cell;background-color: #ffc069;border-top: 1px dotted var(--purple1);padding: 6px;font-weight: normal;white-space: nowrap;text-align: center;font-size: 1.1rem;}
.columnsDetail_tabletd {width: 85%;display: table-cell;background-color: #FFFFFF;border-top: 0;color: #333;padding:9px 13px;text-align: justify;font-size: 1rem;line-height: 1.9em;border-top: 1px dotted #0e757c;}
.columnsDetail_tabletd p {margin: 1rem auto;}
.columnsDetail_tabletd a,.pages a {color: #000;}
.columnsDetail_tabletd ol{margin: 0.5rem 0;}
.columnsDetail_tabletd ol li {list-style-type: decimal;margin-left: 1rem;margin-bottom: 0.5rem;}
.columnsDetail_tabletd ul li {list-style-type: disc;margin-left: 1rem;margin-bottom:0.5rem;margin-top: 0.5rem;}
.columnsDetail_tabletd ol li ul{margin: 1rem 0;}
.columnsDetail_tabletd ol li ul li{list-style-type: disc;}
.columnsDetail_tabletd ul li ul li{list-style-type: circle;}
.columnsDetail_tabletd table {width: 100%;border-collapse: collapse;}
.columnsDetail_tabletd table th{text-align: center;}
.columnsDetail_tabletd table td{vertical-align: top;}
.columnsDetail_tabletd table th,.columnsDetail_tabletd table td{border: #000 solid 1px;padding: .5rem;}
.columnsDetail_tabletd .title {font-size: 1.2rem;color: var(--purple1);}
.extend_link {position: fixed;bottom: 0;left: 0;background-color: #8149A6;width: 100%;text-align: center;}
.extend_link a {color: white;padding: 0.5rem 1rem 0.5rem 0;display: inline-block;}
.extend_link a::before {content: "\f054";display: inline-block;font-family: "Font Awesome 5 Free";font-weight: bold;padding-right: 0.25rem;font-size: 0.9rem;}
.extended_learning ul li{margin-bottom:0rem;margin-top: 0rem;}
/*ask*/
#ask{background-color: antiquewhite;font-family: 'Noto Sans TC', sans-serif;}
.ask_wrap{background-color: transparent;margin: 0 auto;}
#unit_formlist .ask_th{text-align: justify;}


@media (min-width: 1201px) {
    #event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth,#BodyContentNavigator,#Journalperiod{width: 1200px;margin: auto;}
}

@media (max-width: 1200px) {  
    .columnsDetail_tableth,.columnsDetail_tabletd {width: 100%;}    
}

@media(max-width:1600px) {

}

@media (min-width:768px) and (max-width:1199px) {
    article .bgcolor0 { margin-top: 74px; }
}

@media (min-width:768px) and (max-width:991px) {

}

@media (max-width:767px) { 
    article .bgcolor0 { margin-top: 10%; }
    [class*="mb-br"]{display:block}
    .extended-topic li, .recent-chapter li{width: 100%;font-size: 1.1rem;}
    #columns_ContentDetail .columnsDetail_tableRow, #columns_ContentDetail .columnsDetail_tableth {width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
    #columns_ContentDetail .columnsDetail_tabletd, .journal-cont, .journal-pic {width: 100%;}
    #journalitemlist ul {margin: 1rem auto 1rem 1rem;}

    .bar { width: 95%; height: auto; padding: 0.5% 1% 1%; position: fixed; top: initial; bottom: 0; right: 0; left: 0; z-index: 5;border-radius: 0; text-align: center; align-items: center; justify-content: space-around; margin: 0 auto; border-radius: 12px 12px 0 0;font-size: 1rem;background-color: rgb(255 218 55 / 90%);}
    .bar ul { justify-content:left; }
    .bar ul li {width: 25%;}
    .branch-menu a { font-size: 1.2rem; }
    .branch-menu a.active { font-size: 1.4rem; }
    .branch-menu a br { display: block; }
    .blog-content { font-size: 1.1rem; }
    #BodyContentNavigator{padding: 1.5rem 1rem 0;}
    #Journalperiod>div{margin: 0 1rem;}
    #dic_menu ul {flex-wrap: wrap;justify-content: start;}
    #dic_menu li {width: calc(100%/7);text-align: center;}
    .database-title{font-size: 1.5rem;}
    .database-directions{font-size: 1rem;}
    .database-th,.dic_box{flex-wrap: wrap;}
    .database-th div,.dic_content1, .dic_content2{width: 100%;}
    .database-navigator{margin: 1rem 0;}
}

@media \0screen\,screen\9 {/*IE 6 7 8*/

}
@media screen\0 {/*IE 8 9 10 11*/

}
@media print {

}