html, body { height:100%; font: 14px/22px Arial, Helvetica, sans-serif, "新細明體"; }

/*************************
********* Header *********
*************************/
#header { position:fixed; top:0px; left:0px; height:90px; width:100%; z-index:999; }
#header-inner { height: 90px; background: #fff; }
#header-content { padding-top: 5px; }
#header-inner {}
#logo { width: 330px; margin: auto; position: relative; z-index: 900; }
#logo a { height: 75px; }
#logo a,
#logo img { display: block; }

#main-issue { width: 960px; height: 35px; line-height: 35px; font-size: 12px; position: absolute; bottom: 0px; }
#main-issue-name,
#main-issue-date { width: 50%; float: left; }
#main-issue-date { text-align: right; }
#m-header-content { display: none; }


/*************************
********* Footer *********
*************************/
#footer { position:fixed; bottom:0; width:100%; height:50px; z-index:999; }
#footer-inner { height: 50px; background:red; }

#footer-inner,
#footer-nav li#f-archive a,
#footer-nav li#f-next a { background:url('../images/footer-sprites.jpg'); }
#footer-inner { height: 50px; background-position: 0 -40px; position: relative; }

#footer-nav {}
#footer-nav li { width: 187px; height: 50px; border-right: 1px solid #fff; float: left; }
#footer-nav li a { height: 50px; line-height: 50px; display: block; color: #fff; text-align: center; text-decoration: none; font-weight: bold; }

#footer-nav li#f-archive,
#footer-nav li#f-next { padding-top: 5px; height: 45px; }
#footer-nav li#f-archive { padding-right: 10px; }
#footer-nav li#f-next { padding-left: 10px; }
#footer-nav li#f-archive a,
#footer-nav li#f-next a { height: 40px !important; line-height: 40px !important; background-position: 0 0; color: #000 !important; }

/*  Cover */
.oh,
#cover { overflow: hidden; }
#cover .site-container { width: 750px; }
#cover #main { border: none; }
#cover #main-issue { width: auto; position: static; }
#cover #logo { width: auto; position: static; }
#cover #logo a { height: 153px; }

#cover #header { height:170px; }
#cover #header-inner { height: 170px; border-bottom: 1px solid #000; }

#cover #footer-inner { margin-right: 0; }
#cover #footer-content { position: relative; }
#cover #footer-nav li { width: 133px; border-right: 1px solid #fff; float: left; }
#cover #footer-nav li a { }

#cover #footer-nav li#f-mobile-ad { display: none; }
#cover #footer-nav li#f-archive,
#cover #footer-nav li#f-next {  }
#cover #footer-nav li#f-archive { padding-right: 40px; }
#cover #footer-nav li#f-next { padding-left: 40px; }
#cover #footer-nav li#f-archive a,
#cover #footer-nav li#f-next a { height: 40px !important; line-height: 40px !important; background-position: 0 0; color: #000 !important; }
#cover .inner { padding: 170px 0 50px; position:relative; border: none; }

/*************************
********* Wrapper ********
*************************/
#main { border-top: 5px solid #002c52; }
.inner { padding: 90px 0 50px; position:relative;  }
.b-border { display: block; border-bottom: 1px solid #000; position: fixed; width: 100%; top: 90px; z-index: 1; }

/*************************
***** Class :: Layout ****
*************************/
.site-container { width: 960px; height: auto; margin: 0 auto; }
.border-alpha { border-left: none !important; }
.border-omega { border-right: none !important; }
.reveal-scrollbar { height: 50px; padding-right: 17px; }
.img-response { max-width: 100%; display: block; }
.hide-mobile { display: none; }

/*************************
******* Grid System ******
*************************/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:before,
.clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/*************************
***** Class :: Styles ****
*************************/
.link-type01 { color: #ffff00 !important; }


/****************** MEDIAQUERIES ******************/

@media only screen and (min-width: 768px) and (max-width: 959px) {

 html,
 body { font: 17px/25px Arial, Helvetica, sans-serif, "新細明體"; }

 /* Inner Page */
 #header-inner,
 #footer-inner { margin-right: 0; }
 
 /*- Header -*/
 #main-issue { width: 768px; }
 #main-issue-name span,
 #main-issue-date span { display: block; padding: 0 10px; }
 .site-container { width: 768px; }
 
 /*- Footer -*/
 #footer-nav li { width: 148px; }
 #footer-nav li#f-archive,
 #footer-nav li#f-next { padding: 5px 4px 0 6px; }
 
 #cover #footer-nav li#f-archive { padding: 5px 40px 0 0; }
 #cover #footer-nav li#f-next { padding: 5px 0 0 40px; }

 /* Grid System */
 .grid_1 { width:44px; }
 .grid_2 { width:108px; }
 .grid_3 { width:172px; }
 .grid_4 { width:236px; }
 .grid_5 { width:300px; }
 .grid_6 { width:364px; }
 .grid_7 { width:428px; }
 .grid_8 { width:492px; }
 .grid_9 { width:556px; }
 .grid_10 { width:620px; }
 .grid_11 { width:684px; }
 .grid_12 { width:748px }
 
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
 html,
 body { font: 17px/25px Arial, Helvetica, sans-serif, "新細明體"; }
 
 /* Cover Global */
 html,
 body,
 #wrapper,
 #contain-all { overflow: visible; position: static; height: auto; }
 #cover .inner { padding: 115px 0 50px 0; }
 .inner { padding-top: 70px; }
 #cover .site-container,
 .site-container { width: 480px; }
 .hide-mobile { display: block; }
 
 /* - Header - */
 #header { height: auto; padding-bottom: 5px; }
 #cover { overflow: visible; }
 #cover #header,
 #cover #header-inner { height: auto; }
 #cover #header-content { display: block; }
 #cover #logo { width: 100%; }
 #cover #logo a { height: auto; }
 #cover #main-issue { padding: 0; }
 
 /* - Footer - */
 #cover #footer-nav li#f-mobile-ad { display: block; }
 #cover #footer-nav li#f-archive,
 #cover #footer-nav li#f-toc,
 #cover #footer-nav li#f-share,
 #cover #footer-nav li#f-subscribe { display: none; }
 #cover #footer-nav li#f-next { float: right; }
 #cover #footer-nav li#f-next a { float: right; width: 100px; }
 
 /* Global */
 
 /* Grid System */
 .grid_1,
 .grid_2,
 .grid_3,
 .grid_4,
 .grid_5,
 .grid_6,
 .grid_7,
 .grid_8,
 .grid_9,
 .grid_10,
 .grid_11,
 .grid_12 { width: 100%; margin-left: 0; margin-right: 0; }
 
 .b-border { top: 70px; }
 #main-issue { width: 98%; padding: 0 2%; height: 25px; line-height: 25px; }
 #footer { position: fixed; overflow: hidden; }
 #footer-nav li#f-archive,
 #footer-nav li#f-next { padding: 5px 11px 0; }
 #footer-nav li { width: 30%; }
 #footer-nav li#f-share,
 #footer-nav li#f-subscribe { display: none; }
 #header-inner,
 #footer-inner { margin: 0; }
 
 #header-inner { height: 60px; padding: 5px 0; border-bottom: none; }
 #header-content { display: none; }
 #m-header-content { display: block; }
 #m-main-issue { font-size: 11px; }
 #m-main-issue-name,
 #m-main-issue-date { padding-top: 40px; }
 #m-main-issue-date { text-align: right; }
 .h-cols { width: 23%; float: left; padding-right: 1%; padding-left: 1%; }
 .h-cols-01 { width: 50%; float: left; }

}


@media only screen and (max-width: 480px) {

 html,
 body { font: 17px/25px Arial, Helvetica, sans-serif, "新細明體"; }
 
 /* Cover Global */
 html,
 body,
 #wrapper,
 #contain-all { overflow: visible; position: static; height: auto; }
 #cover .inner { padding: 23% 0 50px 0; }
 .inner { padding-top: 50px; }
 #cover .site-container { width: 98%; }
 .hide-mobile { display: block; }
 
 /* - Header - */
 #header { height: 50px; padding-bottom: 5px; }
 #cover { overflow: visible; }
 #cover #header,
 #cover #header-inner { height: auto; }
 #cover #header-content { display: block; }
 #cover #logo { width: 95%; }
 #cover #logo a { height: auto; }
 
 /* - Footer - */
 #cover #footer-nav li#f-mobile-ad { display: block; }
 #cover #footer-nav li#f-archive,
 #cover #footer-nav li#f-toc,
 #cover #footer-nav li#f-share,
 #cover #footer-nav li#f-subscribe { display: none; }
 #cover #footer-nav li#f-next { float: right; }
 #cover #footer-nav li#f-next { padding-right: 5px; }
 #cover #footer-nav li#f-next a { float: right; width: 100px; }
 
 /* Global */
 
 /* Grid System */
 .grid_1,
 .grid_2,
 .grid_3,
 .grid_4,
 .grid_5,
 .grid_6,
 .grid_7,
 .grid_8,
 .grid_9,
 .grid_10,
 .grid_11,
 .grid_12 { width: 100%; margin-left: 0; margin-right: 0; }
 
 .site-container { width: 98%; }
 .b-border { top: 50px; }
 #main-issue { width: 98%; padding: 0 2%; height: 25px; line-height: 25px; position: static; }
 #footer { position: fixed; overflow: hidden; }
 #footer-nav li#f-archive,
 #footer-nav li#f-next { padding: 5px 12px 0 13px; }
 #footer-nav li { width: 28%; }
 #footer-nav li#f-share,
 #footer-nav li#f-subscribe { display: none; }
 #header-inner,
 #footer-inner { margin: 0; }
 
 #logo { width: 50%; }
 #logo a { height: auto; }
 #header-inner { height: 40px; padding: 5px 0; border-bottom: none; }
 #header-content { display: none; }
 #m-header-content { display: block; position: relative; }
 #m-logo { width: 167px; margin: 0 auto; }
 
 #m-main-issue-name,
 #m-main-issue-date { position: absolute; top: 20px; }
 #m-main-issue { font-size: 9px; left: 10px;  }
 #m-main-issue-date { text-align: right; right: 0px; }
 
 #content { padding-top: 13%; }
}

@media only screen and (max-width: 320px) {

 #cover .site-container,
 .site-container { width: 320px; }
 #cover .inner { padding: 82px 0 50px 0; }
 #content { padding-top: 50px; }
 #footer-nav li { width: 27%; }
}