/*== [ Client Archive Css  ] ==*/
   
  .system_body_area{
	min-height:500px;
    font-size:1em;
  }
  
    /* == [ LEFT BLOCK ] == */
	.function_area{
	   padding:10px 20px;
	}
      
	.topic_list{
		display:flex;	
		justify-content:space-around;
		font-size:1.3em;
		color:#000000;
	} 
	
	.topic_list li{
		font-weight:bold;
		color:#363636;
		opacity:0.8;
	}
	
	.topic_list li.focusat{
		color:#c8a980;
		opacity:1;
	}
	
	.topic_list li::after{
		position:relative;
		display:inline-block;
		margin-left:5px;
		font-size:0.85em;
		content:attr(paper);
		top:-2px;
	}
	
	
	/* == [ CENTER BLOCK ] == */
	
    div.contents_area{
	  padding:8px;
    }
         
	.article_preview{
		display:flex;
		flex-wrap:wrap;
		padding:50px 0;
		justify-content:space-between;
	}
	
	.article_block{
		flex:0 0 24%;
		min-width:0;
		position:relative;
		margin-bottom:70px;
		cursor:pointer;
	}
	.article_block:hover .article_thumb{
	   opacity:0.8;
	}
	
	.article_thumb{
		display:flex;
		align-items:center;
		height:300px;
		overflow:hidden;
		background-position: center  15%;
	    background-repeat: no-repeat;
	    background-size: cover;
	}
	
	.article_topic{
		display:inline-block;
		position:absolute;
		padding:7px 20px;
		background-color:#c8a980;
		
		top:-15px; left:50%;
		margin-left:-52px;
		
		color:#ffffff;
		font-weight:bold;
		
	}
	.article_title{
		text-align:center;
		padding:20px 10px;
		line-height:1.5em;
		min-height:80px;
		color:#666666;
	}
	.article_author{
		text-align:center;
		font-weight:bold;
		color:#666666;
	}



	.page_topic{
		padding:30px ;
		text-align:center;
		font-weight:bold;
		color:#888888;
		font-size:1.5em;
	}

	.topic_set{
		display:flex;
	}
	
	.ta_block{
		position:relative;
	}
	.ta_block:hover .ta_thumb{
		color:#c8a980;
		opacity:0.8;
		cursor:pointer;
	}
	
	.ta_block:focus .ta_thumb{
		color:#c8a980;
		opacity:0.8;
		cursor:pointer;
	}
	
	.ta_main{
		flex:0 0 50%;
		min-width:0;
	}
	.ta_main .ta_block{
		width:100%;
		height:700px;
		margin-bottom:-80px;
	}
	
	.ta_elements{
		flex:1;
		min-width:0;
		display:flex;
		flex-wrap:wrap;
		align-content:flex-start;
	}
	
	
	.ta_title{
		padding:20px 0 10px;
		line-height:1.5em;
		min-height:80px;
		color:#666666;
		font-weight:bold;
	}
	.ta_author{
		color:#666666;
		font-size:0.9em;
	}
	
	.ta_type{
		font-size:0.9em;
		position:absolute;
	    background-color:#c8a980;
		color:#ffffff;
		padding:4px 6px;
		border-radius:2px;
		top:-10px; left:-5px;
		box-shadow:1px 0px 5px 1px rgba(0,0,0,0.2);
	}
	
	.ta_thumb{
		height:70%;
		background-position: center  15%;
	    background-repeat: no-repeat;
	    background-size: cover;
		box-shadow:0 0 2px -1px rgba(0,0,0,0.2);
	}

	.ta_elements .ta_block{
		min-width:0;
		margin:0 0px 100px 30px;
		height:200px;
	}
	
	.ta_elements.showhelf .ta_block{
		flex:0 0 47%;
		height:400px;
	}
	.ta_elements.showwide .ta_block{
		flex:0 0 22%;
	}
	
	
	.ta_elements .ta_block .ta_title{
		padding:10px;
		line-height:1.2em;
		min-height:10px;
	}

	.ta_elements .ta_block .ta_author{
		padding:0 10px;
	}
	
	.ta_elements .ta_block .ta_thumb{
		height:99%;
	}
	
	
	.tv_main{
		width:80%;
	}
	
	#meta_media_tv{width:90%;}
	
	
	.tv_elements{
		flex:1;
	}
	
	.act_media_read{
		margin-bottom:15px;
	}
	
	.tv_thumb{
		height:150px;
		background-position: center  15%;
	    background-repeat: no-repeat;
	    background-size: cover;
		box-shadow:0 0 2px -1px rgba(0,0,0,0.2);
		border:1px #000000 solid;
	}
	
	.tv_title{
		padding:10px 0 10px;
		line-height:1.5em;
		color:#666666;
		font-weight:bold;
	}
	 
	
	
	/*== Class Block ==*/
	  
	.classify_area{}
	.class_block{
		margin-bottom:10px;
	}  
	
	.class_block .class_header{font-size:1.3em; font-weight:bold; padding:15px 0;}
	  
	.class_filter{ display:flex; flex-wrap:wrap;}
	.class_filter li{
		flex:0 0 115px;
		padding:8px 0;
		margin:5px 3px;
		text-align:center;
		background-color: 	#DDDDDD;
		font-weight:bold;
		border-radius:2px;
		opacity:0.9;
		cursor:pointer
	}
	.class_filter li:hover{
		background-color:#afafb0;
		opacity:1;
	}
    .class_filter li:focus-within{
		background-color:#afafb0;
		opacity:1;
	}
	.class_filter li.focusat{
		background-color:#ebe1a9;
		opacity:1;
	}
	
	#plastnamelist li{display:none;}  
	#plastnamelist li.pickup{display:block;}  
	
	#personlist li{display:none;} 
	#personlist li.pickup{display:block;}  
	
	
	#topiclist li{
		flex:0 0 32%;
		min-height:3em;
		padding:7px;
		line-height:1.3em;
		display:inline-flex;
		align-items:center;
		justify-content:space-around;
	}
	
    
	
	.topic_master{	margin-bottom:10px;  }
	
	.tptitle{font-weight:bold; line-height:1.5em; color:#000000; position:relative;}
	.tpname{}
	
	
	.tpauth{padding:5px 0; font-style: italic; }
	
	.topic_year{position:absolute; right:10px;}
	.topic_name{ text-decoration:underline; cursor:pointer; color:#2a83a2;}
	 
	
	.topic_master p{  }
	
	.events_header{
		font-weight:bold; 
		padding:10px 0; 
		border-bottom:1px #636363 dotted ; 
		color:#000000;
	}
	
	.event_list{
		 
	}
	
	.event_list li{
		padding:10px 0;
	}
	
	.event_list li p{ padding:3px 1em; line-height:1.5em;}
	
	.event_title{padding:5px 0; position:relative;}
	.event_name{font-weight:bold; text-decoration:underline; cursor:pointer; color:#2a83a2;}
	.event_year{position:absolute; right:10px;}
	.event_auth{font-style: italic; display:inline-block; padding-left:2em;} 
	  
	  
	  
	  h1.zong_label{
		padding-left:7px;  
	  }
	  
	  div.zong_block{
		padding:0 7px;
		width:99%;
		display:flex;
		justify-content:space-between;
		color:#7d7d7d;
		background-color:#FFFFFF;
		z-index:10;
		flex-direction:column;
	  }
	
	/* 主題地圖區塊 */
	.topic_map_area{
		position:absolute;
		top:10px; left:10px; right:10px; bottom:10px;
		background-color:rgba(0,0,0,0.8);
		z-index:100;
		
		display:none;
		
	}
	
	.map_platform_block{
		position:relative;
		width:100%; height:100%;
		padding:30px 30px;
	}
	
	#mapareaclose{
		position:absolute; right:2px; top:2px;
		
	}
	#mapareaclose *{
		font-size:2em;
		font-weight:bold;
		color:#ffffff;
	}
	
	
	
	#topicmap{
		width:100%; height:100%;
		z-index:150;
	}
	
	#nodeinfo{
		position:absolute;
		left:30px; top:30px; width:450px; bottom:30px;
		overflow-y:auto;
		background-color:#ffffff;
		z-index:200;
		box-shadow:0 2px 10px -1px rgba(0,0,0,0.6);
	}
	
	#nodeinfo > *{ padding:15px; display:none;}
	
	#nodeinfo[mode='section'] #sectionlist{display:block;}
	#nodeinfo[mode='nodeone'] #nodecontent{display:block;}
	
	
	#sectionlist{
		
	}
	
	#article_name{
		font-size:1.5em;
		font-weight:bold;
		padding-bottom:10px;
		margin-bottom:10px;
		border-bottom:1px #636363 solid;   
		position:relative;
	}
	
	.section_block{
		margin-bottom:10px;
		padding-bottom:10px;
		border-bottom:1px #cdcdcd dotted;
	}
	
	.section_name{
		font-weight:bold;
		padding:5px 0;
		cursor:pointer;
	}
	
	.section_name:hover{text-decoration:underline;}
	.section_name:focus-within{text-decoration:underline;}
	
	.section_name > span{ display:inline-block; margin-right:5px;position:relative; top:5px; color:#e7c69c; }
	
	.section_desc{
		padding:5px;
		margin-bottom:5px;
	}
	
	.path_node{
		position:relative;
		display:inline-block;
		padding:7px 3px;
		border:1px #cdcdcd solid;
		border-radius:5px;
		font-size:0.9em;
		margin-right:17px;
		margin-bottom:7px;
		cursor:pointer;
	}
	.path_node:nth-last-child(n+2)::after{
		display:inline-block;
		content:"\f061";
		font-family:FontAwesome;
		position:absolute;
		right:-15px;
		color:#636363;
		opacity:0.5;
	}
	
	.path_node:hover{
		background-color:#e7c69c;
	}
	.path_node:focus-within{
		background-color:#e7c69c;
	}
	.path_node.cross{
		border:0;
	}
	.path_node.cross::before{
		content:"\f111";
		font-family:FontAwesome;
		color:#c8a980;
	}
	
	.path_node.cross *{display:none;}
	
	.nodedate{display:none;}
	
	
	
	
	#nodecontent{
	 
	}
	
		#block_title{ 
			font-weight:bold; 
			background-color:#e7c69c;
			padding:15px 5px;
			position:relative;
			padding-left:3em;
		}
		
		#block_title a.option{
			position:absolute;
			left:10px;
			top:10px;
			opacity:1;
		}
		#block_title a.option *{
			font-weight:bold;
			color:#ffffff;
			
		}
		
		
		
		
		#node_title{ 
			font-weight:bold;
			font-size:1.1em;
			line-height:1.5em;
			margin-bottom:15px;
		}
		#node_info{ 
			display:flex;
			align-items:center;
			justify-content:flex-start;
			margin:10px 0;
		}
		#node_time{
		}
		#node_place{
			
		}
		
		#node_content{
			line-height:1.5em;
			margin-bottom:15px;
		}
		#node_reference{
			color:#636363;
			font-size:0.9em;
		}
		
		#node_content p[data-f-id="pbf"]{
			visibility:hidden;
		}
	   
	 
 @media (max-width: 768px){
	.zong_sets > ul > li{ width:49%;  }
	.select_function{display:block;}
	
	.function_area{
		display:block; 
	}
	.topic_list{
		flex-wrap:wrap;
	}
	.topic_list li{
		flex:0 0 28%;
		margin:10px;
	}
	.topic_set{
		flex-direction:column;;
	}
	.ta_elements{
		flex:0 0 100%;
		display:block;
	}
	
	li.act_topic_selecter[aria-label="主題地圖"]{display:none;}
	
	.article_preview{
		flex-direction:column;
	}
	
	
  }