/*== [ Client Archive Css  ] ==*/
  body{ background:#f3f3f2; }
 
  .system_body_area{
	min-height:500px;
    font-size:1em;
  }
  .system_body_area > h2{
	 position:relative;
	font-size:1.2em;
	margin:20px 0;
	font-weight:bold;
  }
  
  .share_button{
	position:absolute;
	display:flex;
	align-items:center;
	right:0;
	top:-4px;
  }
  
    /* == [ Display BLOCK ] == */  
	
    .display_area{ }	
	   
	/* == [ Navigate Block] == */   
	.navigate_area{
		padding:30px 0;
		display:flex;
		align-items:center;
	}

	.navigate_area span{
		display:inline-block; 
	    display:flex;
		align-items:center; 
	}
	
	#return_search{width:160px;}
	#return_search *{color:#946E3C; display:inline-flex; align-items:center;cursor:pointer; }
	#return_search:hover span:last-child{text-decoration:underline;}
	#return_search:focus-within span:last-child{text-decoration:underline;}
	   
	/* == [ Discrip BLOCK ] == */
	
	#media_player_dom{
		width:100%;
		min-height:100px;
	}
	#president_media_player{} 
	
	
	.descrip_area{
		margin:10px 0;
		display:flex;
		min-height:600px;
		box-shadow:0 0 10px -1px rgba(0,0,0,0.2);
		position:relative;
	}
	
	.policy_display_block{
		flex:1;
		min-width:300px;
		margin-right:20px;
	}
	
	.policy_title{
		position:relative;
		font-weight:bold;
		font-size:1.8em;
		padding-left:0.9em;
		margin:10px 0 25px;
	}
	
	.policy_title::before{
		content:"";
		display:inline-block;
		position:absolute;
		left:10px;
		width:10px; height:26px;
		border-radius:3px;
		background-color:#B28C5A;
	}
	
	
	
	.display_meta{
		padding: 10px;
	}
	
	.media_meta{
		display:flex;
		align-items:center;
		margin:12px 0;
		position:relative;
		 
	}
	.media_info{
		line-height:1.5em; 
	}
	
	.part_title{
		display:inline-block;
		font-size:1.3em;
		font-weight:bold;
		margin-right:1em;
	}
	
	.part_classify,.part_keywords{
		font-size:0.9em;
		display:inline-block;
		font-weight:bold;
		padding:3px 4px;
		border-radius:10px;
		margin:0 10px;
	}
	
	.part_classify{
		background-color:#a4a8d4 ; 
	}
	.part_keywords{
		background-color:#f6bfbc  ; 
	}
	
	.part_mediatime{
		 
		 
	}
	
	.volumn_meta{
		margin:7px 0;
		padding:7px 0 0;
		border-top:1px #cdcdcd solid;
		line-height:1.3em;
	}
	.main_description{
		min-height:3em;
	}
	
	.policy_collect_block{
		flex:0 0 430px;
		background-color:#ffffff;
		padding:10px 25px;
	}
	
	.media_overview{
		padding:10px 0;
		border-bottom:1.5px #cdcdcd solid;
		margin-bottom:7px;
	}
	
	.media_selecter{
	    display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	
	.media_paragraph{
		flex:1;
		display:flex;
	}
	
	.media_part{
		display:block;
		width:180px; 
		flex:0 0 170px;
		min-height:130px;
		overflow:hidden;
		margin-bottom:0px;
		position:relative;
		cursor:pointer;
		padding:10px;
	}
	
	.media_preview{
		position:relative;
		width:100%;
		height:auto;
	}

	.media_preview > img{
		width:100%;
		height:auto;
	}
	
	.media_marker{
		font-size:2em;
		color:#B28C5A;
		position:absolute;
		left:13px; top:83px;  
		display:none;
	}
	
	.media_time{
		display:inline-block;
		position:absolute;
		right:13px; top:90px; 
		font-size:0.8em;
		color:#ffffff;
		background-color:#000000;
		padding:5px;
		opacity:0.7;
	}
	
	.media_desc{
		position:relative;
		padding:7px 0;
		 
		
	}
	
	.media_ptitle{
		position:relative;
		padding:7px 0;
		font-weight:bold;
	}
	
	.media_part:hover .media_marker{display:inline-block;}
	.media_part._playing .media_marker{display:inline-block;}
	.media_part._playing{
		background-color:#fbdac8 ;
	}
	
	.media_pmeta{
		width:100%;
		line-height:1.3em;
		font-size:0.9em;
	}
	.act_media_selected{
		cursor:pointer;
	}
	.act_media_selected:hover{
		text-decoration:underline;
	}
	
	 
	
	
	/* == [ Display BLOCK ] == */
	
	.display_area{
	   margin:0 10px;
	   min-height:300px;
	   display:flex;
	   align-items:flex-start;
	   justify-content:space-around;
	   overflow:hidden;
	   
	   position: sticky;
	   top:10px;
	   z-index:300;
	   
	}
	.display_area > img{width:90%;height:auto;}
	 
	 
	.display_subtitle{
		margin:10px;
		line-height:1.5em;
		min-height:500px;
	} 
	.display_subtitle > h2{
		padding:7px 0;
		font-weight:bold;
		
	}
	 
	.subtitle_block{
		  
	}
	
	.stutitle_time{
		font-size:0.8em;
		border-bottom:1px #cdcdcd dotted;
	}
	.stutitle_part{
		margin-bottom:0.2em;
	}
	
	
	
	.speaker{
		width:80px;
		color:#7b5544;
		display:flex;
		align-items:flex-start;
		cursor:pointer;
	}
	.speaker:hover{
		text-decoration:underline;
	}
	.speaker > i{
		position:relative;
		top:-4px;
		left:3px;
		display:none;
	}
	
	.ststring{
		flex:1;
	}
	
	.stutitle_part.playing .ststring{
		color:#006eb0;
	}
	.stutitle_part.playing .speaker > i{
		display:inline-block;
		
	}
	
	.timestart{
	   width:70px;
       text-align:center;	 
	   color:#636363;
	}
	
	.ststring > div{
		margin-bottom:10px;
	}
	
	
@media(max-width: 999px){
	
	.policy_collect_block{
		flex:0 0 300px;
	}
	.media_part{display:none;}
	
}
	
@media (max-width: 768px){
     
	.display_area{
		min-height:200px;
	}
	.descrip_area{  flex-direction:column;}
	.zong_sets > ul > li{ width:49%;  }
	.subtitle_pattern{
		display:block;
	}
	.speaker,.timestart{display:inline-block;}
	.speaker{
		min-width:80px;
	}
	.ststring{
		display:block;
		margin-bottom:10px;
	}
  
	.policy_collect_block{
		width:100%;
	}	 
	.media_selecter{
		flex-direction:column;
		flex-wrap: nowrap;
	}
	.media_part{display:block;}
    
    
  }	


@media (max-width: 450px){
     
	.media_paragraph{
		flex-direction:column;
	}
	.media_part{
		flex:0 0 100px;
	}
  
  }