/*封面圖片*/
.view-im{
	overflow:hidden;
	width:100%;
	height:770px;
	position: relative;
	-webkit-animation: fadein 0.8s;
	   -moz-animation: fadein 0.8s;
	    -ms-animation: fadein 0.8s;
		 -o-animation: fadein 0.8s;
			animation: fadein 0.8s;
}
.view-im img{
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-50%,0);
}
.view-im::after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
}

.bgim{
	background-size:cover;
}
@media screen and (max-width: 767px){
	/*封面圖手機版面設定*/
	.view-im{
		height: 58vw;
	}
	.view-im img{
		width:100%;
		height:100%;
		object-fit: cover;
	}
	.yearcolb{
		padding: 1px;
	}
	.bgim{
		background-size:contain;
	}
	.topim{
		margin: 30px;
	}
}

/*封面圖片背景顏色調黑*/
.TopPic{
	position: relative;
	background-color: #000;
}

html,body{
	height:100%;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/*向上滑動*/
.slideup{
	-webkit-animation: slideup 1.3s;
	   -moz-animation: slideup 1.3s;
	    -ms-animation: slideup 1.3s;
		 -o-animation: slideup 1.3s;
			animation: slideup 1.3s;
}
@keyframes slideup {
	from { top: 50px; opacity: 0; }
    to   { top: 0px; opacity: 1; }
}
@-moz-keyframes slideup {
	from { top: 50px; opacity: 0; }
    to   { top: 0px; opacity: 1; }
}
@-webkit-keyframes slideup {
	from { top: 50px; opacity: 0; }
    to   { top: 0px; opacity: 1; }
}
@-ms-keyframes slideup {
	from { top: 50px; opacity: 0; }
    to   { top: 0px; opacity: 1; }
}
@-o-keyframes slideup {
	from { top: 50px; opacity: 0; }
    to   { top: 0px; opacity: 1; }
}

/*向下的箭頭*/
.down-arrow {
	margin: 0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #222 transparent transparent transparent;
}

/*文字與標題設定*/
#Leading p {
	color:#4A4A4A;
	font-size:16px;
	text-align:justify;
	margin: 0.4em;
	letter-spacing: 2px;
	line-height: 28px;
}

#Leading p, #Leading h1, #Leading h2, #Leading h3, #Leading h4, #Leading h5, #Leading strong, #mac {
	font-family: Helvetica, Arial, LiHei Pro, SimHei, Microsoft JhengHei, sans-serif;
}

#Leading h1, #Leading h2, #Leading h3, #Leading h4, #Leading h5, #Leading strong {
	letter-spacing: 3px;
	line-height: 50px;
}

/*英文版, 文字與標題設定*/
#Leading-en p {
	color:#4A4A4A;
	font-size:16px;
	margin: 0.4em;
	line-height: 28px;
	letter-spacing: -0.25px;
}

#Leading-en p, #Leading-en h1, #Leading-en h2, #Leading-en h3, #Leading-en h4, #Leading-en h5, #Leading-en strong{
	font-family:  Helvetica, Arial, sans-serif;
}

#Leading-en h1, #Leading-en h2, #Leading-en h3, #Leading-en h4, #Leading-en h5, #Leading-en strong {
	line-height: 42px;
	letter-spacing: -0.5px;
}

/*向右滑動*/
.slideright{
	-webkit-animation: slideright 1.3s;
	   -moz-animation: slideright 1.3s;
	    -ms-animation: slideright 1.3s;
		 -o-animation: slideright 1.3s;
			animation: slideright 1.3s;
}
@keyframes slideright {
	0%   { right: 100px; opacity: 0; }
	25%   { right: 100px; opacity: 0; }
	75%  { right: -10px; opacity: 1; }
	100% { right: 0px; }
}
@-moz-keyframes slideright {
	0%   { right: 100px; opacity: 0; }
	25%   { right: 100px; opacity: 0; }
	75%  { right: -10px; opacity: 1; }
	100% { right: 0px; }
}
@-webkit-keyframes slideright {
	0%   { right: 100px; opacity: 0; }
	25%   { right: 100px; opacity: 0; }
	75%  { right: -10px; opacity: 1; }
	100% { right: 0px; }
}
@-ms-keyframes slideright {
	0%   { right: 100px; opacity: 0; }
	25%   { right: 100px; opacity: 0; }
	75%  { right: -10px; opacity: 1; }
	100% { right: 0px; }
}
@-o-keyframes slideright {
	0%   { right: 100px; opacity: 0; }
	25%   { right: 100px; opacity: 0; }
	75%  { right: -10px; opacity: 1; }
	100% { right: 0px; }
}

/*向左滑動*/
.slideleft{
	-webkit-animation: slideleft 1s;
	   -moz-animation: slideleft 1s;
	    -ms-animation: slideleft 1s;
		 -o-animation: slideleft 1s;
			animation: slideleft 1s;
}
@keyframes slideleft {
	0%   { left: 100px; opacity: 0; }
	50%  { left: -10px; opacity: 1; }
	100% { left: 0px;}
}
@-moz-keyframes slideleft {
	0%   { left: 100px; opacity: 0; }
	50%  { left: -10px; opacity: 1; }
	100% { left: 0px;}
}
@-webkit-keyframes slideleft {
	0%   { left: 100px; opacity: 0; }
	50%  { left: -10px; opacity: 1; }
	100% { left: 0px;}
}
@-ms-keyframes slideleft {
	0%   { left: 100px; opacity: 0; }
	50%  { left: -10px; opacity: 1; }
	100% { left: 0px;}
}
@-o-keyframes slideleft {
	0%   { left: 100px; opacity: 0; }
	50%  { left: -10px; opacity: 1; }
	100% { left: 0px;}
}

.topim{
	border-width: 9px;
	border-color: #ededed;
	border-style: solid;
	border-radius: 0px;
	overflow: hidden;
}
.topim img{
	width: 100%;
	height: 100%;
}
.topim::after{
	content:"";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/*圖片向上滑動*/
.slideimgup{
	-webkit-animation: slideimgup 1s;
	   -moz-animation: slideimgup 1s;
	    -ms-animation: slideimgup 1s;
		 -o-animation: slideimgup 1s;
			animation: slideimgup 1s;
}
@keyframes slideimgup {
	from { top: 100px; opacity: 0; transform:scale(0.8); }
    to   { top: 0px; opacity: 1; transform:scale(1); }
}
@-moz-keyframes slideimgup {
	from { top: 100px; opacity: 0; transform:scale(0.8); }
    to   { top: 0px; opacity: 1; transform:scale(1); }
}
@-webkit-keyframes slideimgup {
	from { top: 100px; opacity: 0; transform:scale(0.8); }
    to   { top: 0px; opacity: 1; transform:scale(1); }
}
@-ms-keyframes slideimgup {
	from { top: 100px; opacity: 0; transform:scale(0.8); }
    to   { top: 0px; opacity: 1; transform:scale(1); }
}
@-o-keyframes slideimgup {
	from { top: 100px; opacity: 0; transform:scale(0.8); }
    to   { top: 0px; opacity: 1; transform:scale(1); }
}

/*浮現滑進(向右)*/
.slideemergeright{
	-webkit-animation: slideemergeright 1s;
	   -moz-animation: slideemergeright 1s;
	    -ms-animation: slideemergeright 1s;
		 -o-animation: slideemergeright 1s;
			animation: slideemergeright 1s;
}
@keyframes slideemergeright {
	0%   { opacity: 0; right: 150px; }
	50%  { opacity: 1; right: 0px; }
	100% { opacity: 1; }
}
@-moz-keyframes slideemergeright {
	0%   { opacity: 0; right: 150px; }
	50%  { opacity: 1; right: 0px; }
	100% { opacity: 1; }
}
@-webkit-keyframes slideemergeright {
	0%   { opacity: 0; right: 150px; }
	50%  { opacity: 1; right: 0px; }
	100% { opacity: 1; }
}
@-ms-keyframes slideemergeright {
	0%   { opacity: 0; right: 300px; }
	50%  { opacity: 1; right: 0px; }
	100% { opacity: 1; }
}
@-o-keyframes slideemergeright {
	0%   { opacity: 0; right: 150px; }
	50%  { opacity: 1; right: 0px; }
	100% { opacity: 1; }
}

/*浮現*/
.slideemerge{
	-webkit-animation: slideemerge 1s;
	   -moz-animation: slideemerge 1s;
	    -ms-animation: slideemerge 1s;
		 -o-animation: slideemerge 1s;
			animation: slideemerge 1s;
}
@keyframes slideemerge {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-moz-keyframes slideemerge {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-webkit-keyframes slideemerge {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-ms-keyframes slideemerge {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-o-keyframes slideemerge {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}

/*紀元*/
.chronicle-former{
	width: 65%;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
	.chronicle-former{
		width: 90%;
	}
	/*豎線改橫線*/
	.vertical-line{
		width:100%;
	}
}
.chronicle{
	border-top: solid #708090 2px;
	margin: 0 auto;
}
.chronicle-l{
	width: 50%;
	border-right: solid #708090 1.5px;
}
.chronicle-r{
	width: 50%;
	border-left: solid #708090 1.5px;
}
.chronicle h5{
	color:#4A4A4A;
}
/*年份欄位*/
.yearb{
	width: 100%;
	border-bottom: dashed #708090 1px;
}
/*文字欄位*/
.yearcolb{
	border: solid #F0F0F0 5px;
}
.chronicle-l div{
	opacity:0;
}
.chronicle-r div{
	opacity:0;
}

/*變寬*/
.slidewidening{
	-webkit-animation: slidewidening 0.7s;
	   -moz-animation: slidewidening 0.7s;
	    -ms-animation: slidewidening 0.7s;
		 -o-animation: slidewidening 0.7s;
			animation: slidewidening 0.7s;
}
@keyframes slidewidening {
	0%   { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}
@-moz-keyframes slidewidening {
	0%   { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}
@-webkit-keyframes slidewidening {
	0%   { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}
@-ms-keyframes slidewidening {
	0%   { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}
@-o-keyframes slidewidening {
	0%   { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}

/*加入*/
.slideinner{
	-webkit-animation: slideinner 1s;
	   -moz-animation: slideinner 1s;
	    -ms-animation: slideinner 1s;
		 -o-animation: slideinner 1s;
			animation: slideinner 1s;
}
@keyframes slideinner {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-moz-keyframes slideinner {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-webkit-keyframes slideinner {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-ms-keyframes slideinner {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
@-o-keyframes slideinner {
	0%   { opacity: 0; transform:scale(0.8); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}

/*單獨浮現*/
.slideon{
	-webkit-animation: slideon 1.2s; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: slideon 1.2s; /* Firefox < 16 */
	    -ms-animation: slideon 1.2s; /* Internet Explorer */
		 -o-animation: slideon 1.2s; /* Opera < 12.1 */
			animation: slideon 1.2s;
}
@keyframes slideon {
	0%   { opacity: 0; transform:scale(0.5); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
/* Firefox < 16 */
@-moz-keyframes slideon {
	0%   { opacity: 0; transform:scale(0.5); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideon {
	0%   { opacity: 0; transform:scale(0.5); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
/* Internet Explorer */
@-ms-keyframes slideon {
	0%   { opacity: 0; transform:scale(0.5); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}
/* Opera < 12.1 */
@-o-keyframes slideon {
	0%   { opacity: 0; transform:scale(0.5); }
	50%  { opacity: 1; transform:scale(1.02); }
	100% { opacity: 1; transform:scale(1); }
}