/* [ Announcement Page ] */ 
	 .system_body_area{ 
	   min-height:80vh;
	 }
	 
	 .contents_area{
	  display:flex;
	  padding:20px;
	  justify-content:space-between;
	 }  
	 
	  .contents_area > div{
	    flex: 0 1 48%; 
	  }
	 
	  .post_list{
		
	  }
	  
	  .post_list > h1{
		font-weight:bold;
        padding:10px 0;
		border-bottom:1px #7d7d7d solid;
	  }
	  
	  .post_list > ul{}

	  .post_list > ul > li{
		padding:10px 0;  
	  }

	      .post{
            margin-bottom:10px;	
			padding:10px;
			border:1px #CDCDCD solid;
			border-radius:5px;
			position:relative;
			cursor:pointer;
		  }
		  
		  .post.viewed{
			border:1px #e73562 solid;  
		  }
		  
		  
		  
		  @keyframes myanimation {
			0%   { border:1px #CDCDCD solid; }
			/*80%  { border:1px #e6b422 dotted; }*/
			100% { border:1px #c9171e dashed; }
		  }
           
		  .post[top='1'] {
			box-shadow: 0 1px 5px -1px rgba(0,0,0,0.3);
		  }  
		   
		  .post[mark='緊急通告'] {
			animation: myanimation 0.5s 200; /* use myanimation 5s duration, 5 times */
		  }
		  
		  .post > h2{ 
		    padding:5px 0 10px;
		    position:relative;
		  }
		  
          .post > h2 > span{
			display:inline-block;  
		  }
		  
			.post_date{ 
			  color:#eb6101;
			}
	        .post_rate{
			  position:absolute; 
              display:block;
              width:0;
			  height:22px;
              background-image:url(../image/mark_star.png);
			  top:-21px;
			  left:-18px;
			  transform-origin:left;
			  transform: scale(0.7);
			}
		  
		  
		  .post_content{
			color:#595857;
			margin-bottom:5px;
		  }	
	      
		  .post_refer{
			text-align:right;  
			font-size:0.9em;
		  }
	        .post_organ{}
			.post_type{}
	
	
	/*  pop out dom */
    .system_announcement_area{
	  position:fixed;
      top:80px; left:10px; right:10px; bottom:10px;	  
	  background-color:rgba(0,0,0,0.6);
	  display:none;
	}
      
	  .system_announcement_area > .container{
		height:100%;  
	  }
	  #announcement_block{
		max-width:600px;  
		height:80vh; /* fix IE11 */
		min-height:80%;
		margin:30px auto;  
	    background-color:#FFFFFF;
		border-radius:5px;
		display:flex;
		flex-direction:column;
	    padding:0 10px ;
	  }
	
	  #announcement_block > h1{
		position:relative;		
	    
	  } 
	
	  #announcement_block > h1 > span.ann_close{
		position:absolute;
		right:10px;
        top:10px;
        font-size:1.5em;		
	  }
	  
	    .ann_header{
		  display:flex; 
		  align-items:center;
		  border-bottom:1px #cdcdcd solid;
		  padding:10px 0;
		  align-items:flex-start;
		}
		  
		  .ann_type{
			font-size:0.9em;
			padding:5px;
			background-color:green;
            color:#FFFFFF;
            border-radius:5px;
			flex:0 0 100px;
			text-align:center;
		  }
		  
		  .ann_title{
		    font-weight:bold;
		    font-size:1.3em;
		    padding:5px 35px 5px 10px;
			min-height:20px;
		    flex:1;
			
		  } 
	
	    .ann_contents{
		  flex:1;  
		  padding:15px 0;
		  overflow-y:auto;
		}
	    
		.ann_contents > p{
		  font-size:1em;
		  line-height:1.5em; 
		}
		
		
	    .ann_footer{
		  border-top:1px #CDCDCD solid;
		  height:50px;
		  display:flex;
		  justify-content:space-between;
		  align-items:center;
		  font-size:0.8em;
		  color:#7d7d7d;
		} 
	      .ann_counter{
			font-weight:bold;
            font-size:2em;
		    padding-right:20px;
		  }