.Title /* 文章標題 */
{
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: #5082b5;
}

.tc /* 文章標題置中 */
{
  
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  color: #77654a;
  
}

.st /* 文章副標題 */
{
  font-size: 1.2em;
  font-weight: bold;
  color: #226b73;
  padding-bottom:0.5em;
  padding-top:1em;
}

.sst /* 文章副副標題 */
{
  font-size: 1.1em;
  font-weight: bold;
  padding-top:1em;
}

.ssst /* 文章副副副標題 */
{
  font-size: 1em;
  font-weight: bold;
  padding-top:1em;
}

.stc /* 文章副標題 */
{
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  color: #226b73;
}

.writer /* 作者 */
{
  font-size: 1.1em;
  font-weight: bold;
  text-align: right;
  color: #6f6f6f;
}

.tmenu /* 目錄類別 */
{
  font-size: 1.1em;
  font-weight: bold;
  color: #758f18;
  line-height: 1.5em;
  background-image: linear-gradient(to right, #daf7ea, #e6f7f6, #cbd7ef);
}

.pm /* 目錄標題 */
{
  font-size: 1em;
  padding-top: 0.2em;
  text-align: justify;
  font-weight: bold;
  color: #6f6f6f;
  line-height: 1.8em;
}

.pm2 /* 目錄標題 */
{
  font-size: 1em;
  padding-top: 0.2em;
  text-align: justify;
  font-weight: bold;
  color: #2d4553;
  line-height: 1.8em;
}


p
{
  font-size: 1em;
  text-indent: 2em;
  padding-top: 1em;
  text-align: justify;
  line-height: 1.8em;　/* 設定文字行距 */
}

.ask
{
  font-size: 1.1em;
  margin-left : 3em; 
  text-indent : -2em;
  padding-right: 1em;
  padding-top: 2em;
  text-align: justify;
  color: #7c3703;
  line-height: 1.8em;
}

.ask2
{
  font-size: 1.1em;
  margin-left : 4em; 
  text-indent : -3em;
  padding-right: 1em;
  padding-top: 2em;
  text-align: justify;
  color: #7c3703;
  line-height: 1.8em;
}

.ask3
{
  font-size: 1.1em;
  margin-left : 5em; 
  text-indent : -4em;
  padding-right: 1em;
  padding-top: 2em;
  text-align: justify;
  color: #7c3703;
  line-height: 1.8em;
}

.answer
{
  font-size: 1.1em;
  margin-left : 3em; 
  text-indent : -2em;
  padding-right: 1em;
  padding-top: 0.5em;
  text-align: justify;
  line-height: 1.8em;
}

.answer2
{
  font-size: 1.1em;
  margin-left : 4em; 
  text-indent : -3em;
  padding-right: 1em;
  padding-top: 0.5em;
  text-align: justify;
  line-height: 1.8em;
}

.answer3
{
  font-size: 1.1em;
  margin-left : 5em; 
  text-indent : -4em;
  padding-right: 1em;
  padding-top: 0.5em;
  text-align: justify;
  line-height: 1.8em;
}

.pss
{
    font-size: 0.5em;
    font-weight: bold;
}

.pp /* 首行文摘 */
{
  font-size: 1em;
  font-weight: bold;
  padding-top: 0.8em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.8em;
  line-height: 1.5em;　/* 設定文字行距 */
  text-align: justify;
  background-image: linear-gradient(to right, #d6c0ab, #d9cdb4, #e8deca);
}

.ppr /* 首行文摘置底 */
{
  font-size: 1em;
  font-weight: bold;
  text-align: right;
  padding-right: 2em;
  padding-bottom: 0.8em;
  background-image: linear-gradient(to right, #d6c0ab, #d9cdb4, #e8deca);
}

.ppy /* 黃綠底 */
{
  font-size: 1em;
  color: #0b6f6f;
  font-weight: bold;
  padding-left: 0.4em;
  padding-right: 0.4em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  
  margin-bottom: 1em;
  line-height: 1.8em;　/* 設定文字行距 */
  text-align: left;
  display: inline-block;
  background-color: #f1f8f5;
  border-radius: 20px;
}
.ppf /* 白黃底 */
{
  font-size: 1.1em;
  color: #226b73;
  font-weight: bold;
  padding-left: 2em;
  padding-right: 1em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  line-height: 1.8em;　/* 設定文字行距 */
  text-align: justify;
  background-color: #ffffff;
  background: linear-gradient(to right, #ffffff, #ffefba);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
}
.pll /* 文字單純靠左 */
{
  font-family: 標楷體;
  text-indent: -282px;

}

.prr /* 文字單純靠右 */
{
  text-align: right;
}

.ppb /* 藍綠底 #c1e3ce, */
{
  font-size: 1em;
  color: #1f6352;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  line-height: 1.5em;　/* 設定文字行距 */
  text-align: justify;
  background-image: linear-gradient(to right, #aed6d6, #bacbdb);
}

.ppg /* 經文加框 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  color: #914c0a;
  font-weight: bold;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.6em;　/* 設定文字行距 */
  text-align: justify;
  background-image: linear-gradient(to right, #e6cfba, #e0cfbf, #e6cfba);
  box-shadow: 0 0 3px 2px #dec8b1;
}

.ppw /* 注解加框 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  color: #6b6904;
  font-weight: bold;
  margin-top: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.6em;　/* 設定文字行距 */
  text-align: justify;
  background-image: linear-gradient(to right, #e8deb0, #e3dcbc, #e8dfb7);
  box-shadow: 0 0 3px 2px #d6ce9a;
}

.ppi /* 醒目亮框 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  color: #6b6904;
  font-weight: bold;
  margin-top: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.6em;　/* 設定文字行距 */
  text-align: justify;
  background-image: linear-gradient(to right, #f5e9a2, #e6ddac);
  box-shadow: 0 0 3px 2px #faf5cf;
}

.ppe /* 易經卦 */
{
  font-size: 1em;
  color: #497368;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.8em;
  text-align: justify;
  background-image: linear-gradient(to right, #f0edc7, #edecd5, #e0ddc3);
}

.ptop /* 內文-不空格 */
{
  font-size: 1.1em;
  text-align: justify;
  padding-top: 1em;
  line-height: 1.8em;　/* 設定文字行距 */
}

.ptop2 /* 書信-不空格 */
{
  font-size: 1em;
  text-align: justify;
  line-height: 1.8em;　/* 設定文字行距 */
}

.pb /* 內文-粗體 */
{
  font-size: 1em;
  font-weight: bold;
  text-align: justify;
  /*padding-top: 0.5em;*/
}




.pbm /* 內文-粗體置中 */
{
  font-family: 標楷體;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;

}




.psee /* 內文-引言 */
{
  font-family: 新細明體;
}

.pw /* 內文-引言 */
{
  font-family: 標楷體;
  font-size: 1.3em;
  text-align: justify;
}

.pW /* 內文-書信 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  text-align: justify;
  line-height: 1.3em;　/* 設定文字行距 */
}

.pwb /* 內文-引言粗體 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  text-align: justify;
  font-weight: bold;
}

.pwbb /* 內文-引言粗體 */
{
  font-family: 標楷體;
  font-size: 1.3em;
  text-align: justify;
  font-weight: bold;
  padding-top: 0.5em;
  text-indent: 2em;
}

.pwh /* 內文-引言加高行距 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  text-align: justify;
  line-height: 1.6em;　/* 設定文字行距 */
}

.pws /* 內文-引言加高行距空兩格 */
{
  font-family: 標楷體;
  font-size: 1.05em;
  text-align: justify;
  text-indent: 1.85em;
  line-height: 1.6em;　/* 設定文字行距 */
}

.poem /* 內文-詩 */
{
  font-family: 標楷體;
  font-size: 1.12em;
  text-align: justify;
  font-weight: bold;
  padding-top: 0.5em;
}

.says
{
  font-family: 標楷體;
  font-size: 1.3em;
  text-indent: 2em;
  text-align: justify;
  padding-top: 0.5em;
}

.pz /* 縮緊行距 */
{
  line-height: 0.75em;
}

.pzz /* 加寬文字間距 */
{
  letter-spacing: 1px;　/* 設定文字間距 */
}

.pt /* 內文-標題 */
{
  font-size: 1.2em;
  font-weight: bold;
  text-indent: 3.4em;
  padding-top: 1em;
}

.ptb /* 內文-大標 */
{
  font-size: 1.3em;
  font-weight: bold;
  text-indent: 1.5em;
  padding-top: 1em;
}

.ptm /* 內文-小標 */
{
  font-size: 1.1em;
  font-weight: bold;
  text-indent: 3.6em;
  padding-top: 1em;
}

.ptt /* 內文-標題不空格 */
{
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 1em;
}

.pttm /* 內文-小標不空格 */
{
  font-size: 1.1em;
  font-weight: bold;
  padding-top: 1em;
}

.pc /* 置中 */
{
  text-align: center;
}

.pcb /* 置中-粗體 */
{
  text-align: center;
  padding-bottom: 1em;
}

.pr /* 靠右 */
{
  font-size: 1em;
  text-align: right;
  padding-top: 1em;
  padding-bottom: 0.5em;
}

.prb /* 靠右粗體 */
{
  font-size: 1em;
  text-align: right;
  padding-top: 1em;
  padding-bottom: 0.5em;
  font-weight: bold;
}

.pR /* 靠右無色無高 */
{
  font-size: 1em;
  text-align: right;
}

.pmm /* 縮字體字距 */
{
  font-size: 0.8em;
  letter-spacing: -2.8px;
  color: #574e46;
}

.c-o /* 橘色 */
{
  color: #ad4f10;
}

.c-K /* 咖紅色 */
{
  color: #4a2312;
}

.c-tr /* 咖橘色*/
{
  color: #70432d;
}

.c-tao /* 桃紅色 */
{
  color: #690719;
}

.c-p /* 紫色 */
{
  color: #9d55e0;
}

.c-g /* 綠色 */
{
  color: #3d9113;
}

.c-b /* 藍色 */
{
  color: #243261;
}

.c-dg /* 綠色 */
{
  color: #245e07;
}

.c-ddg /* 墨綠色 */
{
  color: #184203;
}

.c-bg /* 藍綠 */
{
  color: #063030;
  font-size: 1em;
}

.c-dgm /* 左側目錄深綠 */
{
  color: #245e07;
  font-size: 1em;
}

.c-km /* 左側目錄淺咖 */
{
  color: #6e6248;
  font-size: 1em;
}

.c-grey /* 灰 */
{
  color: #968c77;
}

.c-ka /* 氣質咖 */
{
  color: #574b40;
}

.c-gg /* 灰綠 */
{
  color: #666b54;
  font-size: 1em;
}

.paL
{
  padding-left: 1em;
}

.p6
{
  font-size: 0.6em;
}

.p7
{
  font-size: 0.7em;
}

.p8
{
  font-size: 0.8em;
}

.p85
{
  font-size: 0.85em;
}

.p9
{
  font-size: 0.9em;
}

.p95
{
  font-size: 0.95em;
}

.p170
{
  font-size: 1.7em;
}
.pL
{
  font-size: 1.1em;
}

.pXL
{
  font-size: 1.2em;
}

.ul /* 底線 wavy Tan */
{
  text-decoration: underline solid 1.5px Tan;
  padding-bottom: 4px;
  text-underline-offset: 7px;
}

.ulb /* 底線 藍綠色 */
{
  text-decoration: underline solid 1.5px LightSteelBlue;
  border-bottom: 2px;
  padding-bottom: 8px;
  text-underline-offset: 7px;
}

.tlb /* 頂線 藍綠色 */
{
  text-decoration: overline solid 1.5px LightSteelBlue;
  padding-top: 4px;
}

.tl /* 頂線 */
{
  text-decoration: overline solid 1.5px Tan;
  padding-top: 4px;
}



.hr-double-arrow {
    color: #c5c5c570;
    border: double;
    border-width: 3px 5px;
    border-color: #c5c5c570 transparent;
    height: 1px;
    overflow: visible;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
}
.hr-double-arrow:before, 
.hr-double-arrow:after {
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    border-width: 0 3px 3px 0;
    border-style: double;
    top: -3px;
    background: radial-gradient(2px at 1px 1px, currentColor 2px, transparent 0) no-repeat;
}
.hr-double-arrow:before {
    transform: rotate(-45deg);
    left: -20px;
}
.hr-double-arrow:after {
    transform: rotate(135deg);
    right: -20px;
}

.turndown{
    display: inline-block;
    transform: rotate(90deg);
}

.turnup{
    display: inline-block;
    transform: rotate(-90deg);
}

.hr101 /* 線-彩色 */
{
	border: 0;
	height: 1px;
	border-color: #fffecf;
    background-image: linear-gradient(to right, #dcf7e4, #fffecf, #ffd1cf, #fcedf2);
}

.hr121 /* 透明漸變 - color - transparent */
{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.hr2 /* 雙線 */
{
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

.hrin /* 單線陰影 */
{
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

.hrs /* 内嵌 */
{
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.hrt /* 陰影-標題 */
{
    border: 0;
    height: 0;
    border-top: 2px solid rgba(97, 85, 69,0.2);
    border-bottom: 1px solid rgba(217, 198, 33,0.3);
}

.hrt2 /* 粗線-標題 */
{
    border: 0;
    height: 0;
    background: #d9c621;
    box-shadow: 0 0 2px 1px #6b5d43;
}

.hr0 /* 虛線 */
{
	border-width: 0.5px;
	height: 0.5px;
	border-style: dashed;
	border-color: #fffecf;
}

.hrc /* 粗線-淡 */
{
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 2px 1px #baaea0;
}

.classOuter01
{
  display: inline-block;
  font-size: 1em;
  padding-top: 0.5em;
  vertical-align: top;
}

.classOuter02
{
  display: inline-block;
  font-size: 1em;
}

.Q
{
  font-size: 1em;
  margin-left : 3em; 
  text-indent : -2.1em;
  padding-right: 1em;
  padding-top: 1.8em;
  text-align: justify;
  color: #7c3703;
}

.A
{
  font-size: 1em;
  margin-left : 3em; 
  text-indent : -2.1em;
  padding-right: 1em;
  padding-top: 1em;
  text-align: justify;
}

.A2
{
  font-size: 1em;
  margin-left : 5em; 
  text-indent : -2em;
  padding-right: 1em;
  padding-top: 1em;
  text-align: justify;
}

.A3
{
  font-size: 1em;
  margin-left : 6em; 
  text-indent : -1em;
  padding-right: 1em;
  padding-top: 1em;
  text-align: justify;
}

.NB /* （一） */
{
  margin-left : 3em; 
  text-indent : -3.1em;
  text-align: justify;
  padding-top: 1.05em;
}

.PS /* 注3個字 */
{
  font-size: 1.1em;
  margin-left : 3em; 
  text-indent : -3em;
  text-align: justify;
  padding-top: 0.5em;
  line-height: 1.8em;
}

.PS2 /* 　注2個字 */
{
  font-size: 1em;
  margin-left : 3em; 
  text-indent : -2em;
  padding-right: 1em;
  padding-top: 0.5em;
  text-align: justify;
  line-height: 1.8em;
}

.PS3 /* 　注4個字 */
{
  font-size: 1em;
  margin-left : 5em; 
  text-indent : -4em;
  padding-right: 1em;
  padding-top: 0.5em;
  text-align: justify;
  line-height: 1.8em;
}



img
{
  margin-top: 1em;
}

.imgEi
{
  max-height: 1.5em;
  padding-top: 0em;
  vertical-align: sub;
}
.imgEii
{
  max-height: 1em;
  padding-top: 0em;
  vertical-align: sub;
}
.imgEiw /*造字*/
{
  max-height: 1em;
  padding-top: 0em;
  vertical-align: -0.1em;
}
.imgmc
{
  text-align: center;
}

.imgm
{
  max-width: 45%;
  max-height: 45%;
  padding-top: 1em;
}

.imgr
{
  max-width: 35%;
  max-height: 80vh;
  padding-top: 0em;
  padding-left: 1em;
  float: right;
}

.imgrm
{
  max-width: 45%;
  max-height: 80vh;
  padding-top: 0em;
  padding-left: 1em;
  float: right;
}

.imgrh
{
  max-width: 35%;
  max-height: 70vh;
  padding-top: 0em;
  padding-left: 1em;
  float: right;
}

.imgrhl
{
  max-width: 40%;
  max-height: 80vh;
  padding-top: 0em;
  padding-left: 1em;
  float: right;
}

.imgrhs
{
  max-width: 30vh;
  max-height: 50vh;
  padding-top: 0em;
  padding-left: 1em;
  float: right;
}

.imgp
{
  width: 1em;
  height: 1em;
  padding: 0em;
}

.imgpb
{
  width: 1.2em;
  padding: 0em;
}

.imgpm
{
  max-width: 2em;
  max-height: 2em;
  padding: 0em;
}


.img30
{
  max-width: 30%;
  max-height: 30%;
}

.img25
{
  max-width: 25%;
  max-height: 25%;
}

.img15
{
  max-width: 15%;
  max-height: 15%;
}

.img45
{
  max-width: 45%;
  max-height: 45%;
}

.img50
{
  max-width: 50%;
  max-height: 50%;
}

.img60
{
  max-width: 60%;
  max-height: 60%;
}

.img70
{
  max-width: 70%;
  max-height: 70%;
}

.img80
{
  max-width: 80%;
  max-height: 80%;
}

.img100
{
  max-width: 100%;
  max-height: 100vh;
}

.imghss
{
  max-width: 25vh;
  max-height: 40vh;
}

.imghs
{
  max-width: 30vh;
  max-height: 50vh;
}

.imghm
{
  max-width: 35vh;
  max-height: 60vh;
}

.imgh
{
  max-width: 40vh;
  max-height: 65vh;
}

.imghl
{
  max-width: 50vh;
  max-height: 70vh;
}

.imgw
{
  font-size: 0.8em;
  padding-bottom: 1em;
  text-align: justify;
}

.imgwc
{
  font-size: 0.8em;
  padding-bottom: 1em;
  text-align: center;
}

.imgwr
{
  font-size: 0.8em;
  padding-bottom: 1em;
  text-align: right;
}

.gotoTop
{
  clear: both;
  width: 40px;
  cursor: pointer;
  float: right;
}

td
{
  vertical-align: text-top;
  padding-left: 2em;
}

.OOO
{
  font-size: 1em;
  font-weight: bold; 
  padding-right: 0.2em;
  color: #80694e;
}

.OS
{
  font-size: 1em;
  font-weight: bold;
  padding-right: 0.5em;
  color: #cf5f04;
}

.imgText
{
  font-size: 0.8em;
  padding-bottom: 1em;
}

a
{
  color: #6e4c40;
}

.GoBackHead
{
  font-weight: bold;
  padding-left: 2em;
}

.GoBack
{
  text-align: left;
  font-weight: bold;
  padding-left: 0.8em;
}

body.bodyVS30
{
  background: #ffffd98a;
  padding-top: 1em
}


#divContent
{
  padding: 1em;
}

.stitle .cMI
{
  /*
  border-style: solid;
  border-width: 1px;
  border-color: red;
  */
  width: 10em;
  float: left;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end; /* 讓圖片與文字的最後一行對齊 */

}

.image-container {
    float: left; /* 將容器向左漂浮 */
    margin-right: 10px; /* 與文字之間加點間距 */
    width: 30%;
}

.image-container img{
    display: block; /* 使圖片呈現區塊排列，自然垂直堆疊 */
    margin-bottom: 10px; /* 圖片間的垂直間距，可依需求調整 */
}



button
{
  margin: 1.3em;
  padding: 1em;
  font-size: 0.3em;
}

.article-container {
            display: flex;
            flex-wrap: wrap; /* 允許換行 */
            gap: 20px; /* 設置每個項目之間的間距 */
        }
        
.article {
            flex: 1 1 calc(50% - 20px); /* 設置寬度為50%並保持間距 */
            border: 1px solid #ddd39e;
            display: flex;
            flex-direction: column; /* 讓內容和作者上下排列 */
            justify-content: space-between; /* 讓內容區域靠上，作者名字靠下 */
            box-sizing: border-box;
            padding:40px;
            background: linear-gradient(to bottom right, #FFFFFF, #FFEFBA);


            
        }
        

.article-content {
            flex-grow: 1; /* 讓內容部分填滿剩餘空間 */
        }

.indent2{
    margin-left: 2em;
}

.indent4{
    margin-left: 4em;
}
        
.indent6{
    margin-left: 6em;
}