@import "print.css" print; /* 載入列印CSS */

/*----------------------------------------------------------------------*/
/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
form,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
em,
img,
q,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li {
	margin: 0;
	padding: 0;
}
img {
	border: none;
	vertical-align: top;
}
ul,
ol {
	list-style: none;
}
body {
	line-height: 1;
	-webkit-text-size-adjust: none;
}
table {
	border-collapse: collapse;
}
p {
	line-height: 1.75em;
	padding: 3px 0;
}

select {
	padding: 0;
}
select,
input {
	vertical-align: middle;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
	padding: 1px 4px;
	*padding: 0 4px;
	*overflow: visible;
} /* Remove IE7 Extra Width & Padding */
input[type="text"],
textarea {
	padding: 2px;
}
input[type="checkbox"],
input[type="radio"] {
	margin: 0 3px;
	padding: 0;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
	cursor: pointer;
	*cursor: hand;
}
input[type="text"]:disabled {
	background: #eee;
}

/* ios樣式清除 */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
	background-color: transparent;
	border: none;
	margin: 0px;
	border-radius: 0px;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 100%
	); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}

/*----------------------------------------------------------------------*/
/* 整體共用 */
body {
	color: #7d7d7d;
	margin: 0;
	padding: 0;
}
#Wrap {
	position: relative;
}
#Header,
#Center,
#Footer {
	max-width: 830px;
	margin: auto;
	position: relative;
}

a:focus {
	outline: 2px solid #f67c06;
}
a.guide_title {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
	color: #cecece;
	text-decoration: none;
	font-size: 0.75em;
	font-weight: normal;
	z-index: 99;
}

/* 基本樣式 */
.italic {
	font-style: italic;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.text-center {
	text-align: center !important;
}
.bold {
	font-weight: bold;
}
.normal {
	font-weight: normal;
}
.inline {
	display: inline;
}

/* 無障礙AA使用 */
.guide_title#main_content {
	top: 0px;
}

/*----------------------------------------------------------------------*/
/* 上部區 */
#Header {
	position: relative;
	background-color: #fff;
}
.topMenu {
	float: right;
	padding: 5px 20px;
	height: 10px;
	line-height: 20px;
}
.topMenu li {
	float: left;
	padding-left: 18px;
	text-decoration: none;
	margin-left: 5px;
}
.topMenu li a {
	color: #222;
	text-decoration: none;
	font-size: 0.8125em;
}
.topMenu li a:hover {
	color: #555;
}
.topMenu li.list {
	background: url(../images/icon_index.png) no-repeat;
}
.topMenu li.sitemap {
	background: url(../images/icon_sitemap.png) no-repeat;
}
.topMenu li.pastissues {
	list-style: none;
	background: url(../images/icon_pastissues.png) no-repeat;
}

/* 無障礙AA使用 */
#Header a.guide_title {
	top: 10px;
}
.skip_to_content {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px 0 0 -1px;
	background-color: #fffabf;
	z-index: 9999;
	overflow: hidden;
	line-height: 24px;
	font-size: 0.8125em;
	color: #000;
}
.skip_to_content:focus {
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
}

/*----------------------------------------------------------------------*/
/* 內容區 */
#Center::after {
	content: "";
	display: block;
	clear: both;
}
.content {
	position: relative;
}

/*----------------------------------------------------------------------*/
/* 底部區 */
#Footer {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #fff;
	line-height: 20px;
	font-size: 0.8125em;
	overflow: hidden;
	color: #000;
	padding: 25px 15px 15px 15px;
	box-sizing: border-box;
}
#Footer::after {
	content: "";
	clear: both;
}
#Footer .logo {
	padding-left: 10px;
}
#Footer .logo a {
	position: relative;
	display: block;
	float: left;
	text-indent: -9999px;
	width: 160px;
	height: 50px;
	background: url(../images/logo_footer.png) no-repeat;
	background-size: contain;
}
#Footer .info {
	text-align: right;
}
#Footer .info a {
	color: #000;
	text-decoration: none;
}
#Footer .info a:hover {
	color: #666;
}
#Footer .accessibility {
	color: #666;
}
#Footer .accessibility a {
	max-width: 100px;
	display: inline-block;
	color: #666;
}
#Footer .accessibility a:hover {
	color: #666;
}
#Footer .accessibility img {
	width: 100%;
	height: auto;
}

/*----------------------------------------------------------------------*/
/* 頁面切換 */
.pageSelect {
	width: 100%;
}
.pageSelect a.previous,
.pageSelect a.next {
	position: absolute;
	display: block;
	text-indent: -9999px;
	width: 33px;
	height: 75px;
}
.pageSelect a:focus {
	outline: 2px solid #f67c06;
}

/*----------------------------------------------------------------------*/
/* noscript */
.toolbar .toolbar_right .noscript {
	margin-bottom: 10px;
}
.toolbar .toolbar_right .noscript a {
	text-indent: 0;
	background: none;
	display: inline-block;
	margin-right: 5px;
}

/*----------------------------------------------------------------------*/
/* Btn Top */
.BtnTop {
	text-align: center;
	z-index: 9994;
	position: fixed;
	bottom: 65px;
	right: 5px;
	width: 44px;
	height: 44px;
	display: none;
}
.BtnTop a {
	display: block;
	width: 44px;
	height: 44px;
	background-color: #7d7d7d;
	text-indent: -10000px;
	position: relative;
	z-index: 9993;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.BtnTop a::after {
	content: "";
	position: absolute;
	top: 19px;
	left: 16px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.BtnTop a:hover {
	background-color: #00b2b3;
}

/*----------------------------------------------------------------------*/
/*----------------------------------------------------------------------*/
/* colorbox */
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox,
#cboxOverlay,
#cboxWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	overflow: hidden;
}
#cboxOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
}
#cboxMiddleLeft,
#cboxBottomLeft {
	clear: left;
}
#cboxContent {
	position: relative;
	font-size: 0.8125em;
}
#cboxLoadedContent {
	overflow: auto;
	padding: 30px 5px 60px 5px;
}
#cboxTitle {
	margin: 0;
}
#cboxLoadingOverlay,
#cboxLoadingGraphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
	cursor: pointer;
}
.cboxPhoto {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none;
}
.cboxIframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
#colorbox,
#cboxContent,
#cboxLoadedContent {
	box-sizing: content-box;
}

#colorbox_thum {
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: #cbcbcb 1px solid;
	border-bottom: #cbcbcb 1px solid;
	text-align: center;
}
#colorbox_thum::after {
	content: "";
	display: block;
	clear: both;
}
#colorbox_thum > div {
	display: inline-block;
	vertical-align: middle;
}
#colorbox_thum a {
	display: block;
	float: left;
	margin: 0 6px;
	width: 135px;
	height: 135px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #cbcbcb;
}

#colorbox_thum a * {
	vertical-align: middle;
}
#colorbox_thum a span {
	display: inline-block;
	height: 100%;
}
#colorbox_thum a img {
	max-width: 100%;
	max-height: 100%;
}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
	background: #000;
}
#colorbox {
}
#cboxContent {
	margin-top: 20px;
}
.cboxIframe {
	background: #fff;
}
#cboxError {
	padding: 50px;
	border: 1px solid #ccc;
}
#cboxLoadedContent {
	border: 5px solid #000;
	background: #000;
}
#cboxTitle {
	position: absolute;
	bottom: 10px;
	*bottom: 20px;
	left: 10px;
	color: #fff;
	line-height: 18px;
	font-family: "Georgia", serif;
	font-size: 1.063em;
}
#cboxCurrent {
	position: absolute;
	top: -15px;
	right: 0px;
	color: #ccc;
}
#cboxSlideshow {
	position: absolute;
	top: -20px;
	right: 90px;
	color: #fff;
}
#cboxPrevious {
	position: absolute;
	top: 50%;
	left: 5px;
	margin-top: -32px;
	background: url(../images/controls.png) no-repeat top left;
	width: 28px;
	height: 65px;
	text-indent: -9999px;
}
#cboxPrevious:hover {
	background-position: bottom left;
}
#cboxNext {
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -32px;
	background: url(../images/controls.png) no-repeat top right;
	width: 28px;
	height: 65px;
	text-indent: -9999px;
}
#cboxNext:hover {
	background-position: bottom right;
}
#cboxLoadingOverlay {
	background: #000;
}
#cboxLoadingGraphic {
	background: url(../../images/tw/loading.gif) no-repeat center center;
}
#cboxClose {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	background: url(../images/controls.png) no-repeat top center;
	width: 38px;
	height: 19px;
	text-indent: -9999px;
}
#cboxClose:hover {
	background-position: bottom center;
}
.MsgModule_Media {
	text-align: center;
}

/*============================================================================*/
/*----------------------------------------------------------------------------*/
/* RWD設定 */
/*----------------------------------------------------------------------------*/
/*============================================================================*/
/* 寬1023px以下*/
@media screen and (max-width: 1023px) {
	/* 共用 */
	#Header,
	#Center,
	#Footer {
		max-width: 90%;
	}
	#Wrap.styleFix .BtnTop {
		display: block;
	}

	/* Content */
	.Content a.guide_title {
		left: 10px;
	}
	.guide_title#main_content {
		left: 0;
	}

	/*page Select*/
	.pageSelect a::before {
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		border-left: 4px solid #333;
		border-top: 4px solid #333;
		width: 10px;
		height: 10px;
	}
	.pageSelect a.previous::before {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.pageSelect a.next::before {
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	/* Footer */
	#Footer {
		padding: 25px 40px 15px 30px;
	}
}

/*============================================================================*/
/* 手機板(寬320px~639px) */
@media screen and (max-width: 639px) {
	/* 共用 */
	#Header,
	#Center,
	#Footer {
		max-width: 100%;
	}
	a.guide_title {
		left: 10px;
	}

	/* Footer */
	#Footer {
		padding: 10px 30px;
	}
	#Footer .logo {
		text-align: center;
		width: 100%;
		margin-bottom: 10px;
		padding-left: 0;
	}
	#Footer .logo a {
		float: none;
		margin: auto;
		width: 130px;
		height: 40px;
	}
	#Footer .info {
		text-align: center;
	}
}

/*============================================================================*/
/* 平板(寬640px~1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* pageSelect */
	.pageSelect a.previous {
		left: 5px;
	}
	.pageSelect a.next {
		right: 5px;
	}
}

/*============================================================================*/
/* 桌機板(寬1024px~1920px) */
@media screen and (min-width: 1024px) {
	/* 共用 */
	#Header,
	#Center,
	#Footer {
		width: 830px;
	}
	#Wrap.styleFix .BtnTop {
		display: none;
	}

	/* pageSelect */
	.pageSelect {
		position: fixed;
		width: 830px;
		top: 300px;
	}
	.pageSelect a.previous,
	.pageSelect a.next {
		background: url(../images/btn_page.png) no-repeat;
	}
	.pageSelect a.previous {
		left: -70px;
		background-position: 0 -100px;
	}
	.pageSelect a.next {
		right: -70px;
		background-position: 0 0;
	}
	.pageSelect a.previous:hover {
		background-position: -60px -100px;
	}
	.pageSelect a.next:hover {
		background-position: -60px 0;
	}
}