@charset "utf-8";
.lightbox-target {
	/* 設定好背景層的樣式以及位置 */
	position: fixed;
	top: -100%;
	width:100%;
	height:auto;
	background: rgba(0,0,0,.7);

	/* 預設透明度為 0，觸發 :target 後，利用動畫效果調整透明度 */
	opacity: 0;
	z-index:20000;
	transition:opacity 0.5s ease-in-out;
	overflow: hidden;
}

.lightbox-content{
		/* 設定內容的樣式及位置(白底區塊) */
		width:50%;
		/*height:60%;*/
		height:auto;
		background-color:#FFFFFF;
		color: #333;
		margin: auto;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 3px solid #fff;
		box-shadow(0 0 8px rgba(0,0,0,.3));
		box-sizing: border-box;
		z-index:20000;
		transition:0.5s ease-in-out;
	}
	.lightbox-content > div{height:auto;padding:15px;}
	.lightbox-content > div label {
		width:80%;
		height:50px;
		margin:0 auto;
		text-align:center;
		line-height:50px;
		font-weight: bold;
	}
	.articleText{
		word-break: break-all;
		text-align:center;
		height:auto;
}
.articleText img{
		width:100%;
		height:100%;
		-webkit-background-size:cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
}
	.lightbox_toggle{
		opacity: 1;
		top: 0;
		bottom: 0;
	}
	.lightbox_toggle .lightbox-content{
			max-height: 100%;
			max-width: 100%;
			top: 5%;
	}
	lightbox_toggle .lightbox-close {
			top: 5%;
	}
	
	/* 關閉 Lightbox 按鈕的位置及樣式 */
.lightbox-close {
	display: block;
	width: 50px;
	height: 50px;
  box-sizing: border-box;  
	background-color: #139dd7;
	color:#FFFFFF;
	position: absolute;
	top: 10%;
	right: 5%;
  transition:0.5s ease-in-out;
}

/* 利用偽元素做出 \ 以及 / 的線條，合併就變成 X 囉 */
	.lightbox-close:before, .lightbox-close:after {
		content: " ";
		display: block;
		height: 30px;
		width: 1px;
		background-color: #fff;
		position: absolute;
		right: 26px;
		top: 10px;
		transform: rotate(45deg);

	}
	.lightbox-close:after{
		content: " ";
		display: block;
		height: 30px;
		width: 1px;
		background: #fff;
		position: absolute;
		right: 26px;
		top: 10px;
		transform: rotate(135deg);
	
	}