@charset "UTF-8";

*{-webkit-box-sizing:border-box;box-sizing:border-box}

html{
	font-size:16px
}

body{
	margin:0 auto;padding:0;
	font-size:100%;
	font-weight:400;
	font-family:微軟正黑體, "Microsoft JhengHei", sans-serif;
	letter-spacing:1px;line-height:1.5;
	background:url(../img/noise.png)
}

h1{
	font-size:2rem;
	font-weight:600;
	font-family:'Noto Serif TC', serif;
	margin-bottom:1.5rem
}
	
@media (max-width:50rem){
	h1{
		font-size:1.625rem;
		padding:0
	}
}
			
@media (max-width:24rem){
	h1{
		font-size:1.5rem
	}
}
					
@media (max-width:20rem){
	h1{
		padding:0
	}
}

h2{
	font-size:1.5rem;
	font-weight:600;
	font-family:'Noto Serif TC', serif;
	color:#232323;
	margin-bottom:1rem
}

h2 a{
	color:#232323;
	border-bottom:1px dotted
}
	
@media (max-width:24rem){
	h2{
		font-size:1.25rem
	}
}

h3{
	font-size:1.25rem;
	font-weight:600;
	font-family:'Noto Serif TC', serif;
	color:#FAFAFA
}
	
@media (max-width:37.5rem){
	h3{
		font-size:1.125rem
	}
}
		
@media (max-width:24rem){
	h3{
		font-size:1rem
	}
}

p{
	font-size:1.125rem;
	line-height:1.8
}

p a{
	color:#232323;
	font-weight:bold;
	border-bottom:1px dotted
}
	
@media (max-width:24rem){
	p{
		font-size:1rem
	}
}

a{
	text-decoration:none
}

a:hover{
	opacity:0.9;
	-webkit-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease
}

.btn_FB span,.cnalogo span{
	display:none
}

img{
	max-width:100%;
	height:auto;
	display:initial;
	vertical-align:middle
}

figure{
	text-align:center
}

figcaption{
	font-size:0.875rem
}

@media (max-width:40rem){
	.pcshow{
		display:none
	}
}

.mshow{
	display:none
}

@media (max-width:40rem){
	.mshow{
		display:inline-block;
		overflow:hidden
	}
}

.hidden{
	display:none
}

.b-padding,.listbox,article p{
	padding:0 10rem 3rem 10rem
}

@media (max-width:50rem){
	.b-padding,.listbox,article p{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:40rem){
	.b-padding,.listbox,article p{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:24rem){
	.b-padding,.listbox,article p{
		padding:0 2rem 2.5rem 2rem
	}
}

.s-pdbottom{
	padding-bottom:1.5rem
}

.open{
	overflow:hidden
}

header{
	display:table;
	width:100%;
	vertical-align:middle
}

@media (max-width:480px){
	header{
		padding:0
	}
}

.logo_box{
	color:#FAFAFA;
	font-weight:bold;
	float:left;
	margin-top:2px;
	padding:5px 0
}

.logo_box span{
	font-size:1.5rem;vertical-align:middle
}

.logo_box span a{
	color:#FAFAFA;
	-webkit-filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8));
	filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8))
}

@media (max-width:480px){
	.logo_box span{
		font-size:1.375rem
	}
}

.icon-cnalogo{
	fill:#FAFAFA;
	width:50px;
	height:50px;
	margin:0 5px 0 0;
	vertical-align:middle;
	-webkit-filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8));
	filter:drop-shadow(0px 0px 4px rgba(35, 35, 35, 0.8))
}

@media (max-width:480px){
	.icon-cnalogo{
		width:46px;
		height:46px
	}
}

.wrapper{
	max-width:960px;
	margin:0 auto;
	clear:both
}

@media (max-width:64rem){
	.wrapper{
		padding:0 0.938rem
	}
}

.wrapper-lg{
	max-width:1080px;
	margin:0 auto;
	clear:both
}
	
.wrapper-lg .imgtitle{
	max-width:656px;
	padding:0 0 0.5rem 0;
	margin:0 auto
}

@media (max-width:50rem){
	.wrapper-lg .imgtitle{
		padding:0 0 0.5rem 0
	}
}

@media (max-width:40rem){
	.wrapper-lg .imgtitle{
		padding:0 2rem 0.5rem 2rem
	}
}

.wrapper-lg .imgblock,.wrapper-lg .media,.wrapper-lg .tablebox{
	padding:0 0 3rem 0
}

@media (max-width:64rem){
	.wrapper-lg{
		padding:0
	}
}

.visualbox{
	width:100%;
	height:72vh;
	position:relative
}

.visualbox:before{
	content:"";
	min-height:72vh;
	position:absolute;
	top:0;
	left:0;
	right:0;
	background:center center url("../img/visual.jpg") no-repeat;
	background-size:cover;
	z-index:0
}

.visualbox .wrapper{
	height:100%;
	position:relative
}

@media (max-width:64rem){
	.visualbox{
		height:56vh
	}
}

@media (max-width:50rem){
	.visualbox:before{
		background:center center url("../img/visual_m.jpg") no-repeat;
		background-size:cover
	}
}

.source{
	font-size:0.75rem;
	color:#FAFAFA;
	left:0;
	bottom:1rem;
	position:absolute;
	text-shadow:0px 0px 4px #232323
}

@media (max-width:64rem){
	.source{
		margin-left:1rem
	}
}

.infobox{
	width:100%;
	position:relative
}

.info{
	color:#FAFAFA;
	background-color:#03153A;
	padding:3rem 0;
	position:relative
}

.info .wrapper{
	text-align:center
}

@media (max-width:37.5rem){
	.info{
		padding:2.5rem 0
	}
}

.staff{
	font-size:0.875rem;
	margin-bottom:0.5rem
}

.date{
	font-size:0.875rem;
	opacity:0.85
}

.border{
	content:'';
	display:inline-block;
	width:20px;
	height:1px;
	background-color:#333;
	vertical-align:middle
}

.scrollhint{
	width:1px;
	height:96px;
	position:relative;
	bottom:1.5rem;
	left:0;
	right:0;
	margin:0 auto;
	overflow:hidden
}

.scrollhint .sline{
	width:100%;
	height:100%;
	display:block;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #6a6969), color-stop(50%, rgba(255, 255, 255, 0)));
	background:-webkit-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
	background:-o-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
	background:linear-gradient(to bottom, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
	background-position:0 -96px;
	background-size:100% 200%;-webkit-animation:scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
	animation:scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite
	}

@media (max-width:40rem){
	.scrollhint .sline{
		width:100%;
		height:100%;
		display:block;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #6a6969), color-stop(50%, rgba(255, 255, 255, 0)));
		background:-webkit-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
		background:-o-linear-gradient(top, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
		background:linear-gradient(to bottom, #6a6969 50%, rgba(255, 255, 255, 0) 50%);
		background-position:0 -72px;
		background-size:100% 200%;
		-webkit-animation:scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
		animation:scrolldown2 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite
	}
}

@media (max-width:40rem){
	.scrollhint{
		height:72px
	}
}

@-webkit-keyframes scrolldown{
	0%{
		background-position:0 -96px
	}
	75%{
		background-position:0 0
	}
	to{
		background-position:0 96px
	}
}

@keyframes scrolldown{
	0%{
		background-position:0 -96px
	}
	75%{
		background-position:0 0
	}
	to{
		background-position:0 96px
	}
}

@-webkit-keyframes scrolldown2{
	0%{
		background-position:0 -72px
	}
	75%{
		background-position:0 0
	}
	to{
		background-position:0 72px
	}
}

@keyframes scrolldown2{
	0%{
		background-position:0 -72px
	}
	75%{
		background-position:0 0
	}
	to{
		background-position:0 72px
	}
}

.main{
	height:100%;
	position:relative;
	-webkit-overflow-scrolling:touch
}

article{
	color:#232323
}

@media (max-width:40rem){
	article .wrapper{
		padding:0
	}
}

article h2{
	padding:0 10rem 1rem 10rem;
	margin-bottom:0
}

@media (max-width:50rem){
	article h2{
		padding:0 2rem 0rem 2rem;
		margin-bottom:1rem
	}
}

.imgblock,.media,.tablebox{
	width:100%;
	padding:0 5rem 3rem 5rem;
	position:relative
}
	
@media (max-width:50rem){
	.imgblock,.media,.tablebox{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:40rem){
	.imgblock,.media,.tablebox{
		padding:0 0 3rem 0
	}
}

@media (max-width:24rem){
	.imgblock,.media,.tablebox{
		padding:0 0 2.5rem 0
	}
}

.imgtitle{
	font-size:1.375rem;
	font-weight:bold;
	padding:0 5rem 0.5rem 5rem
}

@media (max-width:50rem){
	.imgtitle{padding:0 0 0.5rem 0
	}
}

@media (max-width:40rem){
	.imgtitle{
		padding:0 1.95rem 0.5rem 1.95rem
	}
}

.imgbox{
	width:100%;
	height:100%;
	position:relative
}

.xscroll{
	max-width:100vw;
	overflow-y:auto;
	background:#FAFAFA
}

.imgcaption{
	padding:0.5rem 5rem;
	font-size:0.875rem
}

.imgcaption a{
	color:#232323;
	font-weight:bold;
	border-bottom:#232323 dotted 1px
}

@media (max-width:50rem){
	.imgcaption{
		padding:0.5rem 0
	}
}

@media (max-width:40rem){
	.imgcaption{
		padding:0.5rem 1.95rem
	}
}

.incresehover{
	max-width:800px;
	width:100%;
	height:100%;
	position:absolute;
	z-index:1
}

.incresehover:hover .increse{
	opacity:1;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease
}

.increse{
	top:50%;
	left:50%;
	width:60px;
	height:60px;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	position:absolute;display:inline-block;
	background:rgba(0, 0, 0, 0.8);
	padding:1rem;border-radius:100%;
	opacity:0;cursor:pointer
}

.increse-btn{
	width:28px;
	height:28px
}

.intro{
	margin-bottom:3rem
}
	
.intro p{
	font-size:1.25rem;
	padding:1rem 5rem
}

.intro p:last-child{
	padding-bottom:0
}

@media (max-width:50rem){
	.intro p{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:40rem){
	.intro p{padding:0 2rem 3rem 2rem
	}
}

@media (max-width:24rem){
	.intro p{
		padding:0 2rem 2.5rem 2rem
	}
}

@media (max-width:24rem){
	.intro p{
		font-size:1.125rem
	}
}

.firstblock{
	position:relative
}

.firstblock .wrapper{
	padding:3rem 10rem 0 10rem
}

@media (max-width:50rem){
	.firstblock .wrapper{
		padding:3rem 2rem 0 2rem
	}
}

@media (max-width:40rem){
	.firstblock .wrapper{
		padding:3rem 2rem 0 2rem
	}
}

@media (max-width:24rem){
	.firstblock .wrapper{
		padding:3rem 2rem 0 2rem
	}
}

.firstblock:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:0;
	right:50%;
	bottom:-8rem;
	left:0;
	background:#DBE2EC
}

@media (max-width:40rem){
	.firstblock:before{
		right:0
	}
}

.firstblock h2,.firstblock p{
	padding:0;margin-bottom:3rem
}

@media (max-width:50rem){
	.firstblock h2,.firstblock p{
		padding:0
	}
}

.resoltblock{
	position:relative;font-size:1.125rem;line-height:1.8
}

.resoltblock .wrapper{
	padding:1rem 5rem 2rem 5rem;margin:0 auto;clear:both
}

@media (max-width:50rem){
	.resoltblock .wrapper{
		padding:0 3rem
	}
}

@media (max-width:40rem){
	.resoltblock .wrapper{
		padding:0 1rem 1rem 1rem
	}
}

.resoltblock h2,.resoltblock p{
	font-size:1.125rem;
	color:#03153A;
	padding:0
}

@media (max-width:50rem){
	.resoltblock h2,.resoltblock p{
		padding:0
	}
}

.resoltblock h2{
	font-size:1.25rem;
	font-family:微軟正黑體, "Microsoft JhengHei", sans-serif
}

.resoltblock ol{
	padding:1rem 2.5rem
}

.resoltblock ol li{
	list-style-type:decimal;list-style-position:inside
}

@media (max-width:50rem){
	.resoltblock ol{
		padding:0 1rem 1rem 1rem
	}
}

.infomation,.result{
	margin:0 auto;
	padding:2rem 5rem;
	background:#fff;
	border-radius:16px;
	-webkit-box-shadow:20px 20px 40px #d2d2d2;
	box-shadow:20px 20px 40px #d2d2d2;
	position:relative;
	top:-1rem
}

@media (max-width:40rem){
	.infomation,.result{
		padding:2rem
	}
}

@media (max-width:37.5rem){
	.infomation,.result{
		border-radius:0
	}
}

.infomation{
	max-width:41rem;
	padding:2rem 2.5rem;
	margin-bottom:2.5rem;
	z-index:1
}

.infomation h2{
	font-size:1.25rem;
	color:#03153A;
	padding:0 0 1.125rem 0
}

@media (max-width:40rem){
	.infomation h2{
		padding:0
	}
}

.infomation p{
	font-size:1rem;
	color:#03153A;
	padding:0 0 1.125rem 0;
	text-align:left
}

@media (max-width:50rem){
	.infomation p{
		padding:0 0 0.5rem 0
	}
}

@media (max-width:37.5rem){
	.infomation{
		margin-bottom:1rem
	}
}

.notice{
	font-size:1rem;
	font-weight:700;
	color:#03153A
}

.notice:after{
	z-index:2
}

.quotebox{
	padding:2rem 10rem 3rem 10rem
}

@media (max-width:50rem){
	.quotebox{
		padding:0 2rem 3rem 2rem
	}
}

.textbox{
	display:table;
	position:relative;
	margin-bottom:0.5rem
}

.textbox .tleft{
	display:table-cell;
	vertical-align:top;
	padding-right:1rem
}

.textbox .tright{
	color:#03153A;
	display:table-cell;
	font-size:1.25rem;
	font-weight:bold;
	text-align:justify;
	vertical-align:top
}

.quote_b,.quote_t{
	fill:#03153A;
	width:32px;
	height:22px;
	vertical-align:top;
	position:relative;
	z-index:1
}

.quote_t{
	margin:0 5px 0 0
}

.quote_b{
	margin:10px 0 0 0;
	float:right;
	top:-2rem
}

.from{
	width:100%;
	position:relative;
	text-align:right
}

.from span{
	display:inline-block;
	font-size:0.875rem
}

.fline{
	width:48px;
	height:1px;
	background-color:#03153A;
	vertical-align:middle;
	display:inline-block;
	margin-right:0.5rem
}

.sharebox{
	display:inline;
	position:relative;
	padding:2rem 10rem
}

.sharebox div{
	display:inline-block;
	cursor:pointer;
	padding:0 0.5rem
}

.sharebox div:first-child{
	padding:0 0.5rem 0 0
}

.sharebox div:last-child{
	padding:0 0 0 0.5rem
}

.sharebox div a{
	display:block
}

@media (max-width:50rem){
	.sharebox{
		padding:0 2rem 3rem 2rem;
		top:-2rem
	}
}

.fb-btn{
	fill:#232323;
	width:32px;
	height:50px;
	vertical-align:middle
}

.line-btn{
	fill:#232323;
	width:32px;
	height:50px;
	vertical-align:middle
}

.twitter-btn{
	fill:#232323;
	width:32px;
	height:50px;
	vertical-align:middle
}

.divide{
	width:320px;
	height:10px;
	background:url(../img/wave.svg) repeat-x;
	margin:3rem auto
}

@media (max-width:50rem){
	.divide{
		margin:0 auto 3rem auto
	}
}

@media (max-width:37.5rem){
	.divide{
		margin:0 auto 3rem auto
	}
}

@media (max-width:24rem){
	.divide{
		width:240px
	}
}

.editorbox{
	position:relative;
	margin:3rem auto
}

.otherinfo{
	position:relative;
	background:#FAFAFA;
	border-radius:8px;
	margin:0 10rem 3rem 10rem;
	overflow:hidden
}

.otherinfo p{
	padding:1.5rem;
	font-size:1rem
}

@media (max-width:50rem){
	.otherinfo{
		margin:0 2rem 3rem 2rem
	}
}

.related-cards{
	margin:2rem auto 0 auto;
	background:#FAFAFA;
	padding:2.5rem 0
}

@media (max-width:37.5rem){
	.related-cards{
		padding:2rem
	}

.related-cards .wrapper{
	padding:0
	}
}

.related-title{
	font-size:1.25rem;
	font-weight:bold;
	font-family:'Noto Serif TC', serif;
	color:#232323;
	text-align:center;
	margin-bottom:2rem
}

.morecards{
	position:relative;
	text-align:center
}

@media (max-width:40rem){
	.morecards{
		text-align:left
	}
}

.card{
	width:260px;
	display:inline-block;
	margin-right:1rem;
	margin-bottom:2rem;
	vertical-align:top
}

.card:nth-child(3n){
	margin-right:0
}

.card .img-container{
	width:100%;
	height:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}

.card .img-container .featured-image{
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover
}

@media (max-width:860px){
	.card:nth-child(3n){
		margin-right:1.875rem
	}
}

@media (max-width:50rem){
	.card{
		width:calc(33.33% - 1.875rem)
	}
	.card:nth-child(3n){
		margin-right:1.875rem
	}
	.card:nth-child(5){
		margin-right:1.875rem
	}
	.card:last-child{
		margin-right:0
	}
}

@media (max-width:40rem){
	.card{
		width:100%
	}

	.card:nth-child(2n){
		margin-right:0
	}

	.card:nth-child(3n){
		margin-right:1.875rem
	}

	.card:nth-child(5){
		margin-right:1.875rem
	}

	.card:last-child{
		margin-right:0
	}

	.card div{
		display:inline-block;
		vertical-align:top
	}
}

@media (max-width:37.5rem){
	.card{
		width:100%;
		margin-right:0;
		margin-bottom:1.25rem
	}
	.card:nth-child(2n){
		margin-right:0
	}
	.card:nth-child(3n){
		margin-right:0
	}
	.card:nth-child(5){
		margin-right:0
	}
	.card:last-child{
		margin-right:0;
		margin-bottom:0
	}
}

.fixheight img{
	max-width:initial;
	max-height:96vh
}

.scrollhint2{
	width:100%;
	height:96vh;
	position:absolute;
	z-index:3;
	background:rgba(0, 0, 0, 0.8)
}

.scrollhint2 p{
	color:#FAFAFA;
	position:relative
}

.hintbox{
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	position:absolute;
	display:inline-block;
	padding:1rem;
	width:100%;
	text-align:center
}

.hintbox span{
	color:#FAFAFA;
	position:relative;
	top:3rem;
	font-size:1.25rem
}

.scrollicon{
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	position:absolute;
	display:inline-block;
	padding:1rem
}

.scroll{
	width:56px;
	height:56px;
	fill:#FAFAFA
}

.scalebox{
	height:96vh;
	position:absolute
}

.scale{
	position:relative;
	top:0;
	left:0;
	z-index:2
}

.scale img{
	height:96vh
}

.topbox{
	width:100vw;
	position:absolute;
	z-index:2
}

.topbox img{
	display:block;
	margin:0 auto;
	padding:0.5rem 0
}

.bottombox{
	width:100vw;
	position:absolute;
	bottom:2rem;
	z-index:2
}

.bottombox img{display:block;
	margin:0 auto;
	padding:0.5rem 0
}

.maskbox{
	width:100%;
	height:96vh;
	max-width:800px;
	position:relative;
	z-index:1
}

.pic{width:100%;
	height:195px;
	position:relative
}

.pic a{
	display:block;
	width:100%;
	height:100%
}

.pic:hover .relatedmask{
	opacity:1;
	-webkit-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease
}

@media (max-width:50rem){
	.pic{
		height:160px
	}
}

@media (max-width:40rem){
	.pic{
		width:120px;
		height:90px
	}
}

@media (max-width:37.5rem){
	.pic:hover .relatedmask{
		opacity:0
	}
}

.cardtitle{
	font-size:1rem;
	font-weight:bold;
	margin-top:0.938rem;
	text-align:left
}

.cardtitle a{
	color:#232323
}

@media (max-width:40rem){
	.cardtitle{
		margin-top:0;
		margin-left:0.75rem;
		width:calc(100% - 150px - 20px)
	}
}

@media (max-width:37.5rem){
	.cardtitle{
		margin-top:0;
		margin-left:0.75rem
	}
}

@media (max-width:37.5rem){
	.cardtitle{
		width:calc(100% - 120px - 20px)
	}
}

.relatedmask{
	width:100%;
	height:100%;
	position:absolute;
	background:rgba(0, 0, 0, 0.6);
	cursor:pointer;
	opacity:0;
	z-index:1
}

.maskbtn{
	width:100px;
	height:40px;
	text-align:center;
	line-height:40px;
	background-color:#000;
	color:#fff;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	position:absolute
}

.annotation{
	background-color:#dbe2ec;
	text-decoration-skip-ink:none;
	cursor:help;
	position:relative;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}

.annotation:hover{
	background-color:#c2d7f7
}

.annotation.active{
	background-color:#424ebb;color:#FAFAFA
}

.annotation .annotation-icon{
	display:inline-block;
	width:1.5rem;
	text-align:center;
	font-size:1.2rem;
	line-height:1;
	height:1.5rem;
	font-weight:bold;
	border-radius:50%;
	-webkit-transform:scale(0.65);
	-ms-transform:scale(0.65);
	transform:scale(0.65);
	vertical-align:baseline;
	border:2px solid currentColor;
	position:relative
}

.annotation .annotation-icon:before{
	content:"";
	display:none;
	position:absolute;
	top:100%;
	left:50%;
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
	width:0;
	height:0;
	border-style:solid;
	border-width:0 16px 16px 16px;
	border-color:transparent transparent #ffffff transparent;z-index:1
}

.annotation .annotation-icon:after{
	content:attr(data-annotation);
	position:absolute;
	background:white;
	width:auto;
	max-width:300px;
	min-width:300px;
	top:calc(100% + 16px);
	left:5%;
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
	padding:2rem;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-size:1.4rem;
	text-align:left;
	line-height:1.5;
	-webkit-box-shadow:1px 1px 8px rgba(0, 0, 0, 0.14);
	box-shadow:1px 1px 8px rgba(0, 0, 0, 0.14);
	display:none;
	z-index:2
}

@media (max-width:37.5rem){
	.annotation .annotation-icon:after{
		-webkit-transform:translateX(-90%);
		-ms-transform:translateX(-90%);
		transform:translateX(-90%)
	}
}

@media (max-width:24rem){
	.annotation .annotation-icon:after{
		-webkit-transform:translateX(-90%);
		-ms-transform:translateX(-90%);
		transform:translateX(-90%)
	}
}

@media (max-width:374px){
	.annotation .annotation-icon:after{
		-webkit-transform:translateX(-1%);
		-ms-transform:translateX(-1%);
		transform:translateX(-1%)
	}
}

.annotation.active .annotation-icon{
	color:#03153a;
	background:white;
	border:2px solid #03153a
}

.annotation.active .annotation-icon:after,.annotation.active .annotation-icon:before{
	display:inline-block
}

.timeline{
	max-width:41rem;
	width:100%;
	margin:0 auto;
	padding:0 0 3rem 0
}

@media (max-width:37.5rem){
	.timeline{
		width:88%
	}
}

.timeline-item{
	margin:0 0 0 10px;
	padding:1.35rem 0 0 1.35rem;
	position:relative;
	border-left:1px solid #F1A194
}

.timeline-item h3{
	font-size:1.25rem;
	color:#03153A;
	padding-bottom:0.5rem
}

@media (max-width:24rem){
	.timeline-item h3{
		font-size:1.125rem
	}
}

.timeline-item p{
	font-size:1.125rem;
	padding:0
}

@media (max-width:24rem){
	.timeline-item p{
		font-size:1rem
	}
}

.timeline-item:before{
	content:attr(date-is);
	position:absolute;
	left:2em;
	font-weight:bold;
	top:2em;
	display:block;
	color:#03153A
}

.timeline-item:after{
	width:8px;
	height:8px;
	display:block;
	top:2em;
	position:absolute;
	left:-7px;
	border-radius:8px;
	content:'';
	border:2px solid #03153A;
	background:#03153A
}

footer{
	font-size:0.875rem;
	color:#232323;
	text-align:center;
	position:relative;
	padding:1.25rem;
	z-index:1;
	background:#FAFAFA
}

@media (max-width:20rem){
	footer{
		text-align:left
	}
}

.cd-top{
	color:#FAFAFA;
	font-size:1.2rem;
	display:block;
	width:45px;
	height:45px;
	line-height:48px;
	text-align:center;
	position:fixed;
	bottom:20px;
	right:10px;
	-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.05);
	box-shadow:0 0 10px rgba(0, 0, 0, 0.05);
	overflow:hidden;
	background:rgba(35, 35, 35, 0.9) no-repeat center 50%;
	visibility:hidden;
	opacity:0;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
	border-radius:100%;
	z-index:99
}

@media only screen and (min-width:64rem){
	.cd-top{
		right:30px;bottom:20px
	}
}

@media only screen and (min-width:40rem){
	.cd-top{
		right:20px;
		bottom:20px
	}
}

@media (max-width:37.5rem){
	.cd-top{
		width:32px;
		height:32px;
		line-height:32px
	}
}

.cd-top.cd-is-visible{
	visibility:visible;
	opacity:1
}

.cd-top.cd-fade-out{
	opacity:.5
}

.no-touch .cd-top:hover{
	opacity:1
}

.back2top{
	fill:#FAFAFA;
	width:20px;
	height:20px
}

@media (max-width:40rem){
	.back2top{
		width:16px;
		height:16px
	}
}

.tablebox{
	margin:0 auto;
	max-width:60rem;
}

@media (max-width:40rem){
	.tablebox{
		max-width:100%
	}
}

.tablehint{
	display:none
}

@media (max-width:40rem){
	.tablehint{
		display:block;
		text-align:center;
		font-weight:700;
		padding:0.5rem;
		background-color:#e5f4ff
	}
	.tablehint span{
		vertical-align:middle
	}
}

.scrollbox{
	width:100%
}

@media (max-width:40rem){
	.scrollbox{
		overflow-x:scroll
	}
}

.scroll{
	fill:#232323;
	width:32px;
	height:32px;
	margin-right:0.5rem;
	vertical-align:middle
}

@media (max-width:37.5rem){
	.scroll{
		width:24px;
		height:24px
	}
}

.rwd-table{
	width:100%;
	background-color:#fff
}

.rwd-table tr{
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd
}

.rwd-table th{
	display:none
}

.rwd-table td{
	display:block
}

.rwd-table td:first-child{
	width:20rem;
	font-weight:700
}

@media (max-width:40rem){
	.rwd-table td:first-child{
		background-color:#03153A;
		color:#FAFAFA
	}
}

.rwd-table td:before{
	font-weight:bold;
	width:6.5em;
	display:inline-block
}

@media (min-width:40rem){
	.rwd-table td:before{
		display:none
	}
}

.rwd-table td,.rwd-table th{
	text-align:left
}

@media (min-width:40rem){
	.rwd-table td,.rwd-table th{
		display:table-cell;
		padding:.25em .5em
	}
}

@media (max-width:40rem){
	.rwd-table td.greybg:first-child{
		background-color:#fff;
		color:#4d4d4d;
		font-weight:400
	}
}

.tabletitle{
	font-size:1.375rem;
	font-weight:bold;
	padding:0 0 0.5rem 0
}

.tabletitle a{color:#03153A;
	font-weight:bold
}

.tabletitle a:after{
	border-bottom:1px soild #03153A
}

@media (max-width:50rem){
	.tabletitle{
		padding:0 2rem 0rem 2rem;
		margin-bottom:1rem
	}
}

.rwd-table{
	color:#fff;
	overflow:hidden
}

.rwd-table tr{
	border-color:#ddd;
	color:#4d4d4d
}

.rwd-table td,.rwd-table th{
	padding:1rem 1.5rem
}

@media (min-width:40rem){
	.rwd-table td,.rwd-table th{
		padding:1.125rem 1.25rem
	}
}

.rwd-table td:before,.rwd-table th{
	color:#fff
}

.rwd-table th{
	min-width:2rem;
	background-color:#03153A
}



/* none-table */


.none-table {
	table-layout:fixed;
	width:100%;
	background-color:#fff
}

.none-table tr{
	border-color:#ddd;
	color:#4d4d4d;
	border-top:0px solid #ddd;
	border-bottom:0px solid #ddd;
}

.none-table tr:nth-child(even){
	background-color:#e3e7f0
}

.none-table td:first-child{
	width:3rem;
	font-weight:700;
	text-align:center;
	vertical-align:middle;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.none-table td,.none-table th{
	padding:0.5rem 0.5rem;
	text-align:center;
	vertical-align:middle;
	border-left:1px solid #efefef;
	border-right:1px solid #efefef
}

.none-table th{
	min-width:10rem;
	background-color:#03153A
}

.none-table:before{
	font-weight:bold;
	display:inline-block;
	vertical-align:middle
}

.none-table td:before,.none-table th{
	color:#fff
}

thead .none-table tr, .none-table th{
 	position:sticky;
 	position:-webkit-sticky;
 	top:0; /* 列首永遠固定於上 */
}


.none-table2 {
	width:100%;
	background-color:#fff
}

.none-table2 tr{
	border-color:#ddd;
	color:#4d4d4d;
	border-top:0px solid #5e5e5e;
	border-bottom:0px solid #5e5e5e;
}

.none-table2 td:first-child{
	width:25rem;
	font-weight:700;
	text-align:left;
	vertical-align:middle;
	padding:0.5rem 0.5rem 0.5rem 0.5rem
}

.none-table2 td:last-child{
	width:2rem;
}

.none-table2 tr:nth-child(even){
	background-color:#e3e7f0
}

.none-table2 td,.none-table2 th{
	padding:0.5rem 0.5rem;
	text-align:center;
	vertical-align:middle;
	border-left:1px solid #efefef;
	border-right:1px solid #efefef
}

.none-table2 td:nth-child(2),td:nth-child(3),td:nth-child(4){
	width:4rem;
}

.none-table2 th{
	min-width:1rem;
	background-color:#03153A
}

.none-table2:before{
	font-weight:bold;
	display:inline-block;
	vertical-align:middle
}

.none-table2 td:before,.none-table2 th{
	color:#fff
}

thead .none-table2 tr, .none-table2 th{
 	position:sticky;
 	position:-webkit-sticky;
 	top:0; /* 列首永遠固定於上 */
}



.listbox{
	padding:0 12rem 3rem 12rem
}

@media (max-width:50rem){
	.listbox{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:40rem){
	.listbox{
		padding:0 2rem 3rem 2rem
	}
}

@media (max-width:24rem){
	.listbox{
		padding:0 2rem 2.5rem 2rem
	}
}

.listbox ol li{
	list-style-type:decimal;
	list-style-position:inside;
	padding-bottom:.5rem
}

.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:0px;
	height:0;
	overflow:hidden;
	margin:0 auto
}

.video-container embed,.video-container iframe,.video-container object{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0 none
}