@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 { 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; }
}