body{
		color:var(--gray-dark);
		font-family:"微軟正黑體",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	}
	::-webkit-scrollbar {
	  width: 10px;
	}
	::-webkit-scrollbar-track {
	  background: #f1f1f1; 
	}
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #888; 
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #555; 
	}			
	#header{
		top: 0;
		left: 0;
		width: 50px;
		height: 100vh;
		z-index: 2;
		-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
		transition: width 2s;		
	}
	.clickBig{
		width:120px !important;
	}
/*	.clickBig{
		animation: clickBig 1s;
		animation-fill-mode:forwards;
	}
	@keyframes clickBig{
	    from { width: 50px; }
	    to { width: 120px; }		
	}*/	
	#header>ul>li.active{
		border-left: 3px solid var(--blue)
	}
	#header>ul>li{
		display: block;
		border-left: 3px solid transparent;
	}	
	#header a{
		color: var(--gray-dark);
		-webkit-transition: 0.5s;
		transition: 0.5s;		
	}
	#header .logo-area{
		text-align: center;
		margin-bottom:.5rem;
		border-bottom:1px solid #dee2e6;
		padding: .5rem
	}
	#header .expand-area{
		bottom: 0;
		display: block;
	}
	#header .navbar-toggler{
		display: none
	}
	#pages{
		left:50px;
		width:calc(100% - 50px);
		height: 100vh;
	}
	#pages #home{
		background-size: cover;
		background-image: url(../img/main_bg.jpg);
		background-repeat: no-repeat;
		width: 100%;
		height:100vh;
		background-position:right top;
	}
	
	@keyframes caret {
	  50% { border-color: transparent; }
	}
	@keyframes typing {
	    0% { width: 0em;opacity: 1;}
	    50% { width: 9em;opacity: 1;}
	    99% { opacity: 1;}
	    100% { width: 0em;opacity: 0;}
	}
	@keyframes typingend {
	    0% { width: 0em;opacity: 1;}
	    100% { width: 9em;opacity: 1;}
	}				
	.typing div{
	  opacity: 0;
	  position: absolute;	
	  width: 9em;
	  border-right: .05em solid;
	  overflow: hidden;
	  white-space: nowrap;
	  animation: 
	  	typing 4s steps(9),
	    caret 1s steps(1) infinite;
	  animation-fill-mode: forwards;
	}	
	.typing div:nth-child(2){
		-ms-animation-delay: 4s;
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
	}
	.typing div:nth-child(3){
		  animation: 
		  	typingend 2s steps(9),
		    caret 1s steps(1) infinite;
		  animation-fill-mode: forwards;		
		-ms-animation-delay: 8s;
		-webkit-animation-delay: 8s;
		animation-delay: 8s;
	}	
	.modal-backdrop{
		z-index: -1;
	}
	.modal{
		width:calc(100% - 50px);
		left:50px;
	}
	.modal-dialog{
		width:90%;
		max-width: 90%;
	}
	.modal-content{
		height:95vh;
		overflow-y:scroll;
	}
	.modal-open .modal{
		overflow-y:hidden;
	}
	.modal.fade{
		transition:opacity .3s linear;
	}
	.group-content .title{
		border-left: 3px solid var(--blue)
	}
	.group-content .icon-area>i{
		font-size: 32px;
		color:var(--blue);
		padding-right: .3rem
	}
	.date{
		background-color: #eee;
		color:#444;
	}
	#blog .date{
		width: 50px;
		height: 50px;
		right: 15px;
		bottom:15px;
	}
	#blog .cover-area{
		left:0;
		top:0;
		width: 100%;
		height:100%;
		opacity: 0;
		background-color: var(--blue);
		font-size:3rem;
	}
	#blog .card-img-top{
		transform: scale(1,1);
		transition:all 1s ease-out;
	}
	#blog .card-body:hover .card-img-top{
		transform: scale(1.2,1.2);
	}
	#blog .card-body:hover .cover-area{
		opacity: 0.3;
	}	
	#blog .card-body{
		overflow: hidden;
	}	
	@media (max-width: 1023px){
		#header{
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;
			z-index: 2;
			
		}
		#header .logo-area{
			text-align: left;
			margin-bottom:0;
			border-bottom:none;
			background-color: #eee;	
			padding: .5rem;		
		}
		#header .navbar-toggler{
			display: inline
		}				
		#header .link-area{
			background-color: #eee;
		}
		#header .expand-area{
			display: none;
		}
		.headerexpand{
			width: 100% ;
		}
		#header .text{
			display: inline !important;
		}
		#pages{
			width:100%;
			height: 100vh;
			left:0;
		}
		#header .link-area>ul>li.active{
			border-left: 3px solid transparent
		}
		#header .link-area>ul>li{
			display: inline;
		}
		#header .link-area>ul{
			text-align:center;
			padding: .5rem;
		}
		.modal{
			width:100%;
			left:0;
		}
		.modal-dialog{
			width:100%;
			max-width: 100%;
		}
		.modal-content{
			height:100vh;
			overflow-y:scroll;
		}									
	}